<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Multi-Functional App</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
:root {
--primary-color: #3498db;
--secondary-color: #2980b9;
--background-color: #f5f7fa;
--text-color: #2c3e50;
--card-bg: #ffffff;
--shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
--border-radius: 12px;
--success-color: #2ecc71;
--danger-color: #e74c3c;
--warning-color: #f39c12;
--info-color: #3498db;
}
/* Theme Options */
.default-theme {
--primary-color: #3498db;
--secondary-color: #2980b9;
--background-color: #f5f7fa;
--text-color: #2c3e50;
--card-bg: #ffffff;
--shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
.dark-theme {
--primary-color: #9b59b6;
--secondary-color: #8e44ad;
--background-color: #1a1a2e;
--text-color: #e6e6e6;
--card-bg: #16213e;
--shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
}
.green-theme {
--primary-color: #2ecc71;
--secondary-color: #27ae60;
--background-color: #ecf0f1;
--text-color: #2c3e50;
--card-bg: #ffffff;
}
.orange-theme {
--primary-color: #e67e22;
--secondary-color: #d35400;
--background-color: #fef9e7;
--text-color: #2c3e50;
--card-bg: #ffffff;
}
.purple-theme {
--primary-color: #8e44ad;
--secondary-color: #6c3483;
--background-color: #f4ecf7;
--text-color: #2c3e50;
--card-bg: #ffffff;
}
.pink-theme {
--primary-color: #e84393;
--secondary-color: #fd79a8;
--background-color: #ffeaa7;
--text-color: #2d3436;
--card-bg: #ffffff;
}
.sunset-theme {
--primary-color: #e17055;
--secondary-color: #d63031;
--background-color: #fab1a0;
--text-color: #2d3436;
--card-bg: #ffffff;
}
.ocean-theme {
--primary-color: #0984e3;
--secondary-color: #00cec9;
--background-color: #dfe6e9;
--text-color: #2d3436;
--card-bg: #ffffff;
}
.forest-theme {
--primary-color: #00b894;
--secondary-color: #55efc4;
--background-color: #b2bec3;
--text-color: #2d3436;
--card-bg: #ffffff;
}
.midnight-theme {
--primary-color: #6c5ce7;
--secondary-color: #a29bfe;
--background-color: #2d3436;
--text-color: #dfe6e9;
--card-bg: #34495e;
}
.coffee-theme {
--primary-color: #a1887f;
--secondary-color: #8d6e63;
--background-color: #d7ccc8;
--text-color: #4e342e;
--card-bg: #ffffff;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
body {
background-color: var(--background-color);
color: var(--text-color);
transition: all 0.3s ease;
min-height: 100vh;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 20px;
}
header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px 0;
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.logo {
display: flex;
align-items: center;
gap: 10px;
}
.logo i {
font-size: 24px;
color: var(--primary-color);
}
.logo h1 {
font-size: 24px;
font-weight: 700;
}
.theme-selector {
position: relative;
}
.theme-toggle {
background: var(--primary-color);
color: white;
border: none;
padding: 10px 15px;
border-radius: 20px;
cursor: pointer;
display: flex;
align-items: center;
gap: 8px;
font-weight: 600;
}
.theme-dropdown {
position: absolute;
top: 100%;
right: 0;
background: var(--card-bg);
border-radius: 10px;
box-shadow: var(--shadow);
padding: 15px;
margin-top: 10px;
width: 200px;
display: none;
z-index: 100;
}
.theme-dropdown.active {
display: block;
}
.theme-option {
display: flex;
align-items: center;
gap: 10px;
padding: 10px;
border-radius: 8px;
cursor: pointer;
transition: all 0.2s;
}
.theme-option:hover {
background: rgba(0, 0, 0, 0.05);
}
.theme-option.active {
background: var(--primary-color);
color: white;
}
.theme-preview {
width: 20px;
height: 20px;
border-radius: 50%;
border: 2px solid white;
}
.app-container {
display: flex;
gap: 30px;
margin-top: 30px;
}
@media (max-width: 768px) {
.app-container {
flex-direction: column;
}
.functions-sidebar {
width: 100%;
}
}
.functions-sidebar {
width: 250px;
background-color: var(--card-bg);
border-radius: var(--border-radius);
box-shadow: var(--shadow);
padding: 20px;
height: fit-content;
position: sticky;
top: 20px;
}
.functions-sidebar h2 {
margin-bottom: 20px;
padding-bottom: 10px;
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
display: flex;
align-items: center;
gap: 10px;
}
.function-list {
display: flex;
flex-direction: column;
gap: 10px;
}
.function-btn {
padding: 15px;
border: none;
border-radius: 10px;
background-color: rgba(0, 0, 0, 0.05);
color: var(--text-color);
cursor: pointer;
transition: all 0.2s;
text-align: left;
font-weight: 600;
display: flex;
align-items: center;
gap: 10px;
}
.function-btn:hover {
background-color: rgba(0, 0, 0, 0.1);
}
.function-btn.active {
background-color: var(--primary-color);
color: white;
}
.main-content {
flex: 1;
}
.card {
background-color: var(--card-bg);
border-radius: var(--border-radius);
box-shadow: var(--shadow);
padding: 25px;
transition: all 0.3s ease;
margin-bottom: 20px;
}
.card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
}
.card-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
padding-bottom: 15px;
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.card-title {
font-size: 20px;
font-weight: 600;
display: flex;
align-items: center;
gap: 10px;
}
.card-title i {
color: var(--primary-color);
}
/* Calculator Styles */
.calculator-display {
background-color: rgba(0, 0, 0, 0.05);
border-radius: 10px;
padding: 15px;
margin-bottom: 20px;
text-align: right;
font-size: 24px;
font-weight: 600;
min-height: 70px;
display: flex;
align-items: center;
justify-content: flex-end;
overflow: hidden;
flex-direction: column;
}
.calculator-main-display {
font-size: 32px;
width: 100%;
}
.calculator-expression {
font-size: 16px;
opacity: 0.7;
width: 100%;
min-height: 20px;
}
.calculator-buttons {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 10px;
}
.calc-btn {
padding: 12px;
font-size: 16px;
font-weight: 600;
border: none;
border-radius: 8px;
background-color: rgba(0, 0, 0, 0.05);
color: var(--text-color);
cursor: pointer;
transition: all 0.2s;
}
.calc-btn:hover {
background-color: rgba(0, 0, 0, 0.1);
}
.calc-btn.operator {
background-color: var(--primary-color);
color: white;
}
.calc-btn.operator:hover {
background-color: var(--secondary-color);
}
.calc-btn.function {
background-color: #95a5a6;
color: white;
}
.calc-btn.function:hover {
background-color: #7f8c8d;
}
.calc-btn.equals {
background-color: var(--secondary-color);
color: white;
grid-column: span 2;
}
/* Calculator Tabs */
.calculator-tabs {
display: flex;
gap: 10px;
margin-bottom: 20px;
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
padding-bottom: 10px;
}
.calculator-tab {
padding: 10px 20px;
border: none;
border-radius: 30px;
background-color: rgba(0, 0, 0, 0.05);
color: var(--text-color);
cursor: pointer;
transition: all 0.2s;
font-weight: 600;
}
.calculator-tab.active {
background-color: var(--primary-color);
color: white;
}
.calculator-content {
display: none;
}
.calculator-content.active {
display: block;
}
/* Basic Calculator */
.basic-calculator-buttons {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 12px;
}
/* BMI Calculator */
.bmi-inputs {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 15px;
margin-bottom: 20px;
}
@media (max-width: 480px) {
.bmi-inputs {
grid-template-columns: 1fr;
}
}
.bmi-input-group {
display: flex;
flex-direction: column;
gap: 5px;
}
.bmi-input {
padding: 12px 15px;
border: 1px solid rgba(0, 0, 0, 0.1);
border-radius: 10px;
background-color: var(--card-bg);
color: var(--text-color);
font-size: 16px;
}
.bmi-result {
background-color: rgba(0, 0, 0, 0.05);
border-radius: 10px;
padding: 15px;
margin-top: 20px;
text-align: center;
font-size: 24px;
font-weight: 600;
color: var(--primary-color);
}
/* Currency Converter */
.currency-container {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 15px;
margin-top: 20px;
}
@media (max-width: 480px) {
.currency-container {
grid-template-columns: 1fr;
}
}
.currency-group {
display: flex;
flex-direction: column;
gap: 10px;
}
.currency-input {
padding: 12px 15px;
border: 1px solid rgba(0, 0, 0, 0.1);
border-radius: 10px;
background-color: var(--card-bg);
color: var(--text-color);
font-size: 16px;
}
.currency-select {
padding: 12px 15px;
border: 1px solid rgba(0, 0, 0, 0.1);
border-radius: 10px;
background-color: var(--card-bg);
color: var(--text-color);
font-size: 16px;
}
.currency-result {
background-color: rgba(0, 0, 0, 0.05);
border-radius: 10px;
padding: 15px;
margin-top: 20px;
text-align: center;
font-size: 24px;
font-weight: 600;
color: var(--primary-color);
}
/* Tasbeeh Counter */
.tasbeeh-counter {
text-align: center;
padding: 20px;
}
.counter-display {
font-size: 80px;
font-weight: 700;
color: var(--primary-color);
margin: 20px 0;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
}
.counter-btn {
background-color: var(--primary-color);
color: white;
border: none;
border-radius: 50%;
width: 120px;
height: 120px;
font-size: 24px;
font-weight: 700;
cursor: pointer;
margin: 20px auto;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s;
box-shadow: 0 6px 10px rgba(0, 0, 0, 0.2);
}
.counter-btn:hover {
transform: scale(1.05);
background-color: var(--secondary-color);
}
.counter-controls {
display: flex;
justify-content: center;
gap: 15px;
margin-top: 20px;
}
.control-btn {
padding: 10px 20px;
border: none;
border-radius: 30px;
background-color: rgba(0, 0, 0, 0.05);
color: var(--text-color);
cursor: pointer;
transition: all 0.2s;
font-weight: 600;
}
.control-btn:hover {
background-color: rgba(0, 0, 0, 0.1);
}
.tasbeeh-list {
margin-top: 30px;
}
.tasbeeh-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 15px;
margin-bottom: 15px;
background-color: rgba(0, 0, 0, 0.03);
border-radius: 10px;
transition: all 0.2s;
}
.tasbeeh-item:hover {
background-color: rgba(0, 0, 0, 0.05);
}
.add-tasbeeh {
margin-top: 20px;
display: flex;
gap: 10px;
}
.add-tasbeeh input {
flex: 1;
padding: 12px 15px;
border: 1px solid rgba(0, 0, 0, 0.1);
border-radius: 30px;
background-color: var(--card-bg);
color: var(--text-color);
}
.add-tasbeeh button {
padding: 12px 25px;
border: none;
border-radius: 30px;
background-color: var(--primary-color);
color: white;
cursor: pointer;
font-weight: 600;
transition: all 0.2s;
}
.add-tasbeeh button:hover {
background-color: var(--secondary-color);
}
/* Stopwatch */
.stopwatch-display {
font-size: 48px;
font-weight: 700;
text-align: center;
color: var(--primary-color);
margin: 20px 0;
}
.stopwatch-controls {
display: flex;
justify-content: center;
gap: 15px;
margin-top: 20px;
}
.stopwatch-btn {
padding: 12px 25px;
border: none;
border-radius: 30px;
background-color: var(--primary-color);
color: white;
cursor: pointer;
font-weight: 600;
transition: all 0.2s;
}
.stopwatch-btn:hover {
background-color: var(--secondary-color);
}
.stopwatch-btn.reset {
background-color: #95a5a6;
}
.stopwatch-btn.reset:hover {
background-color: #7f8c8d;
}
.laps-container {
margin-top: 20px;
max-height: 200px;
overflow-y: auto;
}
.lap-item {
display: flex;
justify-content: space-between;
padding: 10px 15px;
margin-bottom: 10px;
background-color: rgba(0, 0, 0, 0.03);
border-radius: 10px;
}
/* Water Tracker */
.water-goal {
text-align: center;
margin-bottom: 20px;
}
.water-progress {
height: 20px;
background-color: rgba(0, 0, 0, 0.1);
border-radius: 10px;
overflow: hidden;
margin-bottom: 20px;
}
.water-progress-bar {
height: 100%;
background-color: var(--primary-color);
width: 0%;
transition: width 0.5s;
}
.water-buttons {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 15px;
margin-top: 20px;
}
@media (max-width: 480px) {
.water-buttons {
grid-template-columns: repeat(2, 1fr);
}
}
.water-btn {
padding: 15px;
border: none;
border-radius: 10px;
background-color: var(--primary-color);
color: white;
cursor: pointer;
font-weight: 600;
transition: all 0.2s;
}
.water-btn:hover {
background-color: var(--secondary-color);
}
.water-history {
margin-top: 20px;
}
.water-history-item {
display: flex;
justify-content: space-between;
padding: 10px 15px;
margin-bottom: 10px;
background-color: rgba(0, 0, 0, 0.03);
border-radius: 10px;
}
/* Calendar */
.calendar-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
}
.calendar-nav {
display: flex;
gap: 10px;
}
.calendar-nav-btn {
padding: 8px 12px;
border: none;
border-radius: 5px;
background-color: var(--primary-color);
color: white;
cursor: pointer;
}
.calendar-grid {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 5px;
}
.calendar-day {
text-align: center;
padding: 10px 5px;
font-weight: 600;
co