Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>NutriTrack - Your Health & Diet Companion</title> | |
| <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet"> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> | |
| <style> | |
| :root { | |
| --primary: #10b981; | |
| --primary-dark: #059669; | |
| --secondary: #6366f1; | |
| --accent: #f59e0b; | |
| --danger: #ef4444; | |
| --bg-dark: #0f172a; | |
| --bg-card: #1e293b; | |
| --bg-card-hover: #334155; | |
| --text-primary: #f8fafc; | |
| --text-secondary: #94a3b8; | |
| --border: #334155; | |
| --gradient-1: linear-gradient(135deg, #10b981 0%, #3b82f6 100%); | |
| --gradient-2: linear-gradient(135deg, #6366f1 0%, #ec4899 100%); | |
| --gradient-3: linear-gradient(135deg, #f59e0b 0%, #ef4444 100%); | |
| --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -2px rgba(0, 0, 0, 0.2); | |
| --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -4px rgba(0, 0, 0, 0.3); | |
| } | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| } | |
| body { | |
| font-family: 'Poppins', sans-serif; | |
| background: var(--bg-dark); | |
| color: var(--text-primary); | |
| min-height: 100vh; | |
| line-height: 1.6; | |
| } | |
| /* Header */ | |
| .header { | |
| background: rgba(30, 41, 59, 0.8); | |
| backdrop-filter: blur(20px); | |
| position: sticky; | |
| top: 0; | |
| z-index: 1000; | |
| border-bottom: 1px solid var(--border); | |
| padding: 1rem 2rem; | |
| } | |
| .header-content { | |
| max-width: 1400px; | |
| margin: 0 auto; | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| } | |
| .logo { | |
| display: flex; | |
| align-items: center; | |
| gap: 0.75rem; | |
| font-size: 1.5rem; | |
| font-weight: 700; | |
| color: var(--primary); | |
| text-decoration: none; | |
| } | |
| .logo i { | |
| font-size: 1.75rem; | |
| } | |
| .logo span { | |
| background: var(--gradient-1); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| background-clip: text; | |
| } | |
| .header-actions { | |
| display: flex; | |
| align-items: center; | |
| gap: 1rem; | |
| } | |
| .date-display { | |
| color: var(--text-secondary); | |
| font-size: 0.9rem; | |
| } | |
| .user-avatar { | |
| width: 40px; | |
| height: 40px; | |
| border-radius: 50%; | |
| background: var(--gradient-2); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-weight: 600; | |
| cursor: pointer; | |
| transition: transform 0.3s ease; | |
| } | |
| .user-avatar:hover { | |
| transform: scale(1.1); | |
| } | |
| /* Main Layout */ | |
| .main-container { | |
| max-width: 1400px; | |
| margin: 0 auto; | |
| padding: 2rem; | |
| display: grid; | |
| grid-template-columns: 280px 1fr; | |
| gap: 2rem; | |
| } | |
| /* Sidebar */ | |
| .sidebar { | |
| position: sticky; | |
| top: 100px; | |
| height: fit-content; | |
| } | |
| .nav-menu { | |
| background: var(--bg-card); | |
| border-radius: 20px; | |
| padding: 1rem; | |
| box-shadow: var(--shadow); | |
| } | |
| .nav-item { | |
| display: flex; | |
| align-items: center; | |
| gap: 0.75rem; | |
| padding: 0.875rem 1rem; | |
| border-radius: 12px; | |
| color: var(--text-secondary); | |
| cursor: pointer; | |
| transition: all 0.3s ease; | |
| margin-bottom: 0.5rem; | |
| font-weight: 500; | |
| } | |
| .nav-item:hover, .nav-item.active { | |
| background: var(--gradient-1); | |
| color: white; | |
| transform: translateX(5px); | |
| } | |
| .nav-item i { | |
| width: 20px; | |
| text-align: center; | |
| } | |
| /* Main Content */ | |
| .content { | |
| min-height: 100vh; | |
| } | |
| .section-title { | |
| font-size: 1.75rem; | |
| font-weight: 700; | |
| margin-bottom: 1.5rem; | |
| display: flex; | |
| align-items: center; | |
| gap: 0.75rem; | |
| } | |
| .section-title i { | |
| color: var(--primary); | |
| } | |
| /* Stats Grid */ | |
| .stats-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); | |
| gap: 1.5rem; | |
| margin-bottom: 2rem; | |
| } | |
| .stat-card { | |
| background: var(--bg-card); | |
| border-radius: 20px; | |
| padding: 1.5rem; | |
| box-shadow: var(--shadow); | |
| transition: all 0.3s ease; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .stat-card::before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| height: 4px; | |
| background: var(--gradient-1); | |
| } | |
| .stat-card.calories::before { | |
| background: var(--gradient-1); | |
| } | |
| .stat-card.water::before { | |
| background: linear-gradient(135deg, #06b6d4, #3b82f6); | |
| } | |
| .stat-card.exercise::before { | |
| background: var(--gradient-2); | |
| } | |
| .stat-card.sleep::before { | |
| background: linear-gradient(135deg, #8b5cf6, #ec4899); | |
| } | |
| .stat-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: var(--shadow-lg); | |
| } | |
| .stat-header { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| margin-bottom: 1rem; | |
| } | |
| .stat-icon { | |
| width: 50px; | |
| height: 50px; | |
| border-radius: 15px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-size: 1.5rem; | |
| } | |
| .stat-icon.calories { | |
| background: rgba(16, 185, 129, 0.2); | |
| color: var(--primary); | |
| } | |
| .stat-icon.water { | |
| background: rgba(6, 182, 212, 0.2); | |
| color: #06b6d4; | |
| } | |
| .stat-icon.exercise { | |
| background: rgba(99, 102, 241, 0.2); | |
| color: var(--secondary); | |
| } | |
| .stat-icon.sleep { | |
| background: rgba(139, 92, 246, 0.2); | |
| color: #8b5cf6; | |
| } | |
| .stat-value { | |
| font-size: 2rem; | |
| font-weight: 700; | |
| margin-bottom: 0.25rem; | |
| } | |
| .stat-label { | |
| color: var(--text-secondary); | |
| font-size: 0.875rem; | |
| } | |
| .stat-progress { | |
| margin-top: 1rem; | |
| height: 8px; | |
| background: var(--border); | |
| border-radius: 4px; | |
| overflow: hidden; | |
| } | |
| .stat-progress-bar { | |
| height: 100%; | |
| border-radius: 4px; | |
| transition: width 0.5s ease; | |
| } | |
| .stat-progress-bar.calories { | |
| background: var(--gradient-1); | |
| } | |
| .stat-progress-bar.water { | |
| background: linear-gradient(90deg, #06b6d4, #3b82f6); | |
| } | |
| .stat-progress-bar.exercise { | |
| background: var(--gradient-2); | |
| } | |
| .stat-progress-bar.sleep { | |
| background: linear-gradient(90deg, #8b5cf6, #ec4899); | |
| } | |
| /* Charts Section */ | |
| .charts-section { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); | |
| gap: 1.5rem; | |
| margin-bottom: 2rem; | |
| } | |
| .chart-card { | |
| background: var(--bg-card); | |
| border-radius: 20px; | |
| padding: 1.5rem; | |
| box-shadow: var(--shadow); | |
| } | |
| .chart-header { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| margin-bottom: 1.5rem; | |
| } | |
| .chart-title { | |
| font-size: 1.125rem; | |
| font-weight: 600; | |
| } | |
| .chart-container { | |
| position: relative; | |
| height: 300px; | |
| } | |
| /* Food Diary */ | |
| .food-diary { | |
| background: var(--bg-card); | |
| border-radius: 20px; | |
| padding: 1.5rem; | |
| box-shadow: var(--shadow); | |
| margin-bottom: 2rem; | |
| } | |
| .meal-section { | |
| margin-bottom: 2rem; | |
| } | |
| .meal-section:last-child { | |
| margin-bottom: 0; | |
| } | |
| .meal-header { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| margin-bottom: 1rem; | |
| padding-bottom: 0.75rem; | |
| border-bottom: 1px solid var(--border); | |
| } | |
| .meal-title { | |
| display: flex; | |
| align-items: center; | |
| gap: 0.75rem; | |
| font-weight: 600; | |
| } | |
| .meal-icon { | |
| width: 40px; | |
| height: 40px; | |
| border-radius: 12px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-size: 1.25rem; | |
| } | |
| .meal-icon.breakfast { | |
| background: rgba(251, 191, 36, 0.2); | |
| color: #fbbf24; | |
| } | |
| .meal-icon.lunch { | |
| background: rgba(16, 185, 129, 0.2); | |
| color: var(--primary); | |
| } | |
| .meal-icon.dinner { | |
| background: rgba(99, 102, 241, 0.2); | |
| color: var(--secondary); | |
| } | |
| .meal-icon.snack { | |
| background: rgba(236, 72, 153, 0.2); | |
| color: #ec4899; | |
| } | |
| .meal-calories { | |
| font-weight: 600; | |
| color: var(--primary); | |
| } | |
| .food-list { | |
| list-style: none; | |
| } | |
| .food-item { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| padding: 0.75rem; | |
| border-radius: 10px; | |
| transition: background 0.3s ease; | |
| } | |
| .food-item:hover { | |
| background: var(--bg-card-hover); | |
| } | |
| .food-info { | |
| display: flex; | |
| align-items: center; | |
| gap: 0.75rem; | |
| } | |
| .food-name { | |
| font-weight: 500; | |
| } | |
| .food-portion { | |
| color: var(--text-secondary); | |
| font-size: 0.875rem; | |
| } | |
| .food-calories { | |
| font-weight: 600; | |
| color: var(--accent); | |
| } | |
| .delete-btn { | |
| background: none; | |
| border: none; | |
| color: var(--danger); | |
| cursor: pointer; | |
| opacity: 0; | |
| transition: opacity 0.3s ease; | |
| padding: 0.25rem; | |
| } | |
| .food-item:hover .delete-btn { | |
| opacity: 1; | |
| } | |
| /* Add Food Form */ | |
| .add-food-form { | |
| display: flex; | |
| gap: 0.75rem; | |
| margin-top: 1rem; | |
| flex-wrap: wrap; | |
| } | |
| .form-input { | |
| flex: 1; | |
| min-width: 150px; | |
| padding: 0.75rem 1rem; | |
| border: 2px solid var(--border); | |
| border-radius: 10px; | |
| background: var(--bg-dark); | |
| color: var(--text-primary); | |
| font-family: inherit; | |
| transition: border-color 0.3s ease; | |
| } | |
| .form-input:focus { | |
| outline: none; | |
| border-color: var(--primary); | |
| } | |
| .form-input::placeholder { | |
| color: var(--text-secondary); | |
| } | |
| .btn { | |
| padding: 0.75rem 1.5rem; | |
| border: none; | |
| border-radius: 10px; | |
| font-weight: 600; | |
| cursor: pointer; | |
| transition: all 0.3s ease; | |
| font-family: inherit; | |
| } | |
| .btn-primary { | |
| background: var(--gradient-1); | |
| color: white; | |
| } | |
| .btn-primary:hover { | |
| transform: translateY(-2px); | |
| box-shadow: 0 4px 12px rgba(16, 185, 129, 0.4); | |
| } | |
| .btn-secondary { | |
| background: var(--bg-card-hover); | |
| color: var(--text-primary); | |
| } | |
| .btn-secondary:hover { | |
| background: var(--border); | |
| } | |
| /* Quick Add Buttons */ | |
| .quick-add { | |
| display: flex; | |
| gap: 0.5rem; | |
| flex-wrap: wrap; | |
| margin-top: 0.75rem; | |
| } | |
| .quick-add-btn { | |
| padding: 0.5rem 1rem; | |
| border-radius: 20px; | |
| border: 1px solid var(--border); | |
| background: transparent; | |
| color: var(--text-secondary); | |
| font-size: 0.8rem; | |
| cursor: pointer; | |
| transition: all 0.3s ease; | |
| } | |
| .quick-add-btn:hover { | |
| border-color: var(--primary); | |
| color: var(--primary); | |
| background: rgba(16, 185, 129, 0.1); | |
| } | |
| /* BMI Calculator */ | |
| .bmi-section { | |
| background: var(--bg-card); | |
| border-radius: 20px; | |
| padding: 1.5rem; | |
| box-shadow: var(--shadow); | |
| margin-bottom: 2rem; | |
| } | |
| .bmi-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); | |
| gap: 1.5rem; | |
| align-items: end; | |
| } | |
| .bmi-result { | |
| text-align: center; | |
| padding: 2rem; | |
| background: var(--bg-dark); | |
| border-radius: 15px; | |
| } | |
| .bmi-value { | |
| font-size: 3rem; | |
| font-weight: 700; | |
| margin-bottom: 0.5rem; | |
| } | |
| .bmi-value.healthy { | |
| color: var(--primary); | |
| } | |
| .bmi-value.overweight { | |
| color: var(--accent); | |
| } | |
| .bmi-value.obese { | |
| color: var(--danger); | |
| } | |
| .bmi-label { | |
| font-size: 1.25rem; | |
| font-weight: 600; | |
| margin-bottom: 1rem; | |
| } | |
| .bmi-scale { | |
| display: flex; | |
| height: 10px; | |
| border-radius: 5px; | |
| overflow: hidden; | |
| margin-top: 1rem; | |
| } | |
| .scale-underweight { | |
| background: #60a5fa; | |
| flex: 1; | |
| } | |
| .scale-healthy { | |
| background: var(--primary); | |
| flex: 1; | |
| } | |
| .scale-overweight { | |
| background: var(--accent); | |
| flex: 1; | |
| } | |
| .scale-obese { | |
| background: var(--danger); | |
| flex: 1; | |
| } | |
| .scale-labels { | |
| display: flex; | |
| justify-content: space-between; | |
| margin-top: 0.5rem; | |
| font-size: 0.75rem; | |
| color: var(--text-secondary); | |
| } | |
| /* Water Tracker */ | |
| .water-tracker { | |
| background: var(--bg-card); | |
| border-radius: 20px; | |
| padding: 1.5rem; | |
| box-shadow: var(--shadow); | |
| margin-bottom: 2rem; | |
| } | |
| .water-visual { | |
| display: flex; | |
| align-items: center; | |
| gap: 2rem; | |
| flex-wrap: wrap; | |
| } | |
| .water-cup { | |
| width: 120px; | |
| height: 160px; | |
| background: var(--bg-dark); | |
| border-radius: 0 0 20px 20px; | |
| position: relative; | |
| overflow: hidden; | |
| border: 3px solid var(--border); | |
| } | |
| .water-level { | |
| position: absolute; | |
| bottom: 0; | |
| left: 0; | |
| right: 0; | |
| background: linear-gradient(to top, #06b6d4, #3b82f6); | |
| transition: height 0.5s ease; | |
| border-radius: 0 0 17px 17px; | |
| } | |
| .water-info { | |
| flex: 1; | |
| } | |
| .water-buttons { | |
| display: flex; | |
| gap: 0.75rem; | |
| flex-wrap: wrap; | |
| margin-top: 1rem; | |
| } | |
| .water-btn { | |
| padding: 0.75rem 1.25rem; | |
| border-radius: 10px; | |
| border: 2px solid var(--border); | |
| background: transparent; | |
| color: var(--text-primary); | |
| cursor: pointer; | |
| transition: all 0.3s ease; | |
| display: flex; | |
| align-items: center; | |
| gap: 0.5rem; | |
| } | |
| .water-btn:hover { | |
| border-color: #06b6d4; | |
| color: #06b6d4; | |
| } | |
| .water-btn.add-glass { | |
| background: rgba(6, 182, 212, 0.2); | |
| border-color: #06b6d4; | |
| color: #06b6d4; | |
| } | |
| /* Exercise Section */ | |
| .exercise-section { | |
| background: var(--bg-card); | |
| border-radius: 20px; | |
| padding: 1.5rem; | |
| box-shadow: var(--shadow); | |
| margin-bottom: 2rem; | |
| } | |
| .exercise-list { | |
| display: grid; | |
| gap: 1rem; | |
| } | |
| .exercise-item { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| padding: 1rem; | |
| background: var(--bg-dark); | |
| border-radius: 12px; | |
| transition: transform 0.3s ease; | |
| } | |
| .exercise-item:hover { | |
| transform: translateX(5px); | |
| } | |
| .exercise-info { | |
| display: flex; | |
| align-items: center; | |
| gap: 1rem; | |
| } | |
| .exercise-icon { | |
| width: 50px; | |
| height: 50px; | |
| border-radius: 12px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-size: 1.5rem; | |
| } | |
| .exercise-icon.running { | |
| background: rgba(239, 68, 68, 0.2); | |
| color: var(--danger); | |
| } | |
| .exercise-icon.cycling { | |
| background: rgba(6, 182, 212, 0.2); | |
| color: #06b6d4; | |
| } | |
| .exercise-icon.swimming { | |
| background: rgba(99, 102, 241, 0.2); | |
| color: var(--secondary); | |
| } | |
| .exercise-icon.yoga { | |
| background: rgba(16, 185, 129, 0.2); | |
| color: var(--primary); | |
| } | |
| .exercise-icon.gym { | |
| background: rgba(251, 191, 36, 0.2); | |
| color: #fbbf24; | |
| } | |
| .exercise-name { | |
| font-weight: 600; | |
| margin-bottom: 0.25rem; | |
| } | |
| .exercise-duration { | |
| color: var(--text-secondary); | |
| font-size: 0.875rem; | |
| } | |
| .exercise-calories { | |
| text-align: right; | |
| } | |
| .calories-burned { | |
| font-size: 1.25rem; | |
| font-weight: 700; | |
| color: var(--accent); | |
| } | |
| .calories-label { | |
| font-size: 0.75rem; | |
| color: var(--text-secondary); | |
| } | |
| /* Sleep Tracker */ | |
| .sleep-section { | |
| background: var(--bg-card); | |
| border-radius: 20px; | |
| padding: 1.5rem; | |
| box-shadow: var(--shadow); | |
| margin-bottom: 2rem; | |
| } | |
| .sleep-visual { | |
| display: flex; | |
| align-items: center; | |
| gap: 2rem; | |
| flex-wrap: wrap; | |
| } | |
| .sleep-icon { | |
| width: 100px; | |
| height: 100px; | |
| background: rgba(139, 92, 246, 0.2); | |
| border-radius: 50%; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-size: 3rem; | |
| color: #8b5cf6; | |
| animation: pulse 2s infinite; | |
| } | |
| @keyframes pulse { | |
| 0%, 100% { | |
| transform: scale(1); | |
| box-shadow: 0 0 0 0 rgba(139, 92, 246, 0.4); | |
| } | |
| 50% { | |
| transform: scale(1.05); | |
| box-shadow: 0 0 20px 10px rgba(139, 92, 246, 0); | |
| } | |
| } | |
| .sleep-inputs { | |
| display: flex; | |
| gap: 1rem; | |
| flex-wrap: wrap; | |
| flex: 1; | |
| } | |
| .time-input { | |
| flex: 1; | |
| min-width: 150px; | |
| } | |
| .time-input label { | |
| display: block; | |
| margin-bottom: 0.5rem; | |
| color: var(--text-secondary); | |
| font-size: 0.875rem; | |
| } | |
| .time-input input { | |
| width: 100%; | |
| padding: 0.75rem; | |
| border: 2px solid var(--border); | |
| border-radius: 10px; | |
| background: var(--bg-dark); | |
| color: var(--text-primary); | |
| font-family: inherit; | |
| } | |
| /* Goals Section */ | |
| .goals-section { | |
| background: var(--bg-card); | |
| border-radius: 20px; | |
| padding: 1.5rem; | |
| box-shadow: var(--shadow); | |
| margin-bottom: 2rem; | |
| } | |
| .goal-item { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| padding: 1rem; | |
| border-radius: 12px; | |
| margin-bottom: 0.75rem; | |
| background: var(--bg-dark); | |
| transition: all 0.3s ease; | |
| } | |
| .goal-item:hover { | |
| background: var(--bg-card-hover); | |
| } | |
| .goal-item.completed { | |
| border-left: 4px solid var(--primary); | |
| } | |
| .goal-text { | |
| display: flex; | |
| align-items: center; | |
| gap: 0.75rem; | |
| } | |
| .goal-checkbox { | |
| width: 24px; | |
| height: 24px; | |
| border: 2px solid var(--border); | |
| border-radius: 6px; | |
| cursor: pointer; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| transition: all 0.3s ease; | |
| } | |
| .goal-checkbox.checked { | |
| background: var(--primary); | |
| border-color: var(--primary); | |
| } | |
| .goal-checkbox.checked i { | |
| color: white; | |
| font-size: 0.875rem; | |
| } | |
| /* Weekly Summary */ | |
| .weekly-summary { | |
| background: var(--bg-card); | |
| border-radius: 20px; | |
| padding: 1.5rem; | |
| box-shadow: var(--shadow); | |
| } | |
| .week-grid { | |
| display: grid; | |
| grid-template-columns: repeat(7, 1fr); | |
| gap: 0.5rem; | |
| margin-top: 1rem; | |
| } | |
| .day-card { | |
| text-align: center; | |
| padding: 1rem 0.5rem; | |
| border-radius: 12px; | |
| background: var(--bg-dark); | |
| transition: all 0.3s ease; | |
| } | |
| .day-card.today { | |
| background: var(--gradient-1); | |
| } | |
| .day-card.future { | |
| opacity: 0.5; | |
| } | |
| .day-name { | |
| font-size: 0.75rem; | |
| color: var(--text-secondary); | |
| margin-bottom: 0.5rem; | |
| } | |
| .day-card.today .day-name { | |
| color: white; | |
| } | |
| .day-value { | |
| font-weight: 600; | |
| font-size: 0.9rem; | |
| } | |
| .day-card.today .day-value { | |
| color: white; | |
| } | |
| /* Modal */ | |
| .modal-overlay { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| bottom: 0; | |
| background: rgba(0, 0, 0, 0.7); | |
| backdrop-filter: blur(5px); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| z-index: 2000; | |
| opacity: 0; | |
| visibility: hidden; | |
| transition: all 0.3s ease; | |
| } | |
| .modal-overlay.active { | |
| opacity: 1; | |
| visibility: visible; | |
| } | |
| .modal { | |
| background: var(--bg-card); | |
| border-radius: 20px; | |
| padding: 2rem; | |
| width: 90%; | |
| max-width: 500px; | |
| transform: scale(0.9); | |
| transition: transform 0.3s ease; | |
| } | |
| .modal-overlay.active .modal { | |
| transform: scale(1); | |
| } | |
| .modal-header { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| margin-bottom: 1.5rem; | |
| } | |
| .modal-title { | |
| font-size: 1.25rem; | |
| font-weight: 600; | |
| } | |
| .modal-close { | |
| background: none; | |
| border: none; | |
| color: var(--text-secondary); | |
| font-size: 1.5rem; | |
| cursor: pointer; | |
| transition: color 0.3s ease; | |
| } | |
| .modal-close:hover { | |
| color: var(--danger); | |
| } | |
| .modal-form { | |
| display: grid; | |
| gap: 1rem; | |
| } | |
| .form-group { | |
| display: grid; | |
| gap: 0.5rem; | |
| } | |
| .form-group label { | |
| font-weight: 500; | |
| color: var(--text-secondary); | |
| } | |
| /* Toast Notification */ | |
| .toast-container { | |
| position: fixed; | |
| bottom: 2rem; | |
| right: 2rem; | |
| z-index: 3000; | |
| display: flex; | |
| flex-direction: column; | |
| gap: 0.75rem; | |
| } | |
| .toast { | |
| background: var(--bg-card); | |
| border-radius: 12px; | |
| padding: 1rem 1.5rem; | |
| box-shadow: var(--shadow-lg); | |
| display: flex; | |
| align-items: center; | |
| gap: 0.75rem; | |
| animation: slideIn 0.3s ease; | |
| border-left: 4px solid var(--primary); | |
| } | |
| .toast.success { | |
| border-left-color: var(--primary); | |
| } | |
| .toast.error { | |
| border-left-color: var(--danger); | |
| } | |
| @keyframes slideIn { | |
| from { | |
| transform: translateX(100%); | |
| opacity: 0; | |
| } | |
| to { | |
| transform: translateX(0); | |
| opacity: 1; | |
| } | |
| } | |
| /* Footer */ | |
| .footer { | |
| text-align: center; | |
| padding: 2rem; | |
| color: var(--text-secondary); | |
| border-top: 1px solid var(--border); | |
| margin-top: 2rem; | |
| } | |
| .footer a { | |
| color: var(--primary); | |
| text-decoration: none; | |
| font-weight: 500; | |
| } | |
| .footer a:hover { | |
| text-decoration: underline; | |
| } | |
| /* Responsive */ | |
| @media (max-width: 1024px) { | |
| .main-container { | |
| grid-template-columns: 1fr; | |
| } | |
| .sidebar { | |
| position: fixed; | |
| bottom: 0; | |
| left: 0; | |
| right: 0; | |
| top: auto; | |
| z-index: 1000; | |
| } | |
| .nav-menu { | |
| display: flex; | |
| justify-content: space-around; | |
| padding: 0.5rem; | |
| border-radius: 20px 20px 0 0; | |
| } | |
| .nav-item { | |
| flex-direction: column; | |
| padding: 0.5rem; | |
| margin-bottom: 0; | |
| font-size: 0.7rem; | |
| text-align: center; | |
| } | |
| .nav-item:hover, .nav-item.active { | |
| transform: none; | |
| } | |
| .nav-item i { | |
| font-size: 1.25rem; | |
| margin-bottom: 0.25rem; | |
| } | |
| .content { | |
| padding-bottom: 80px; | |
| } | |
| } | |
| @media (max-width: 768px) { | |
| .header { | |
| padding: 1rem; | |
| } | |
| .main-container { | |
| padding: 1rem; | |
| } | |
| .stats-grid { | |
| grid-template-columns: repeat(2, 1fr); | |
| } | |
| .charts-section { | |
| grid-template-columns: 1fr; | |
| } | |
| .stat-value { | |
| font-size: 1.5rem; | |
| } | |
| .water-visual, .sleep-visual { | |
| flex-direction: column; | |
| text-align: center; | |
| } | |
| .week-grid { | |
| grid-template-columns: repeat(7, 1fr); | |
| } | |
| } | |
| @media (max-width: 480px) { | |
| .stats-grid { | |
| grid-template-columns: 1fr; | |
| } | |
| .header-actions .date-display { | |
| display: none; | |
| } | |
| .add-food-form { | |
| flex-direction: column; | |
| } | |
| .btn { | |
| width: 100%; | |
| } | |
| } | |
| /* Animations */ | |
| .fade-in { | |
| animation: fadeIn 0.5s ease forwards; | |
| } | |
| @keyframes fadeIn { | |
| from { | |
| opacity: 0; | |
| transform: translateY(20px); | |
| } | |
| to { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| } | |
| .slide-in { | |
| animation: slideIn 0.3s ease forwards; | |
| } | |
| @keyframes slideIn { | |
| from { | |
| opacity: 0; | |
| transform: translateX(-20px); | |
| } | |
| to { | |
| opacity: 1; | |
| transform: translateX(0); | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <!-- Header --> | |
| <header class="header"> | |
| <div class="header-content"> | |
| <a href="#" class="logo"> | |
| <i class="fas fa-leaf"></i> | |
| <span>NutriTrack</span> | |
| </a> | |
| <div class="header-actions"> | |
| <span class="date-display" id="currentDate"></span> | |
| <div class="user-avatar" onclick="openModal('settings')">JD</div> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Main Container --> | |
| <div class="main-container"> | |
| <!-- Sidebar Navigation --> | |
| <aside class="sidebar"> | |
| <nav class="nav-menu"> | |
| <div class="nav-item active" data-section="dashboard"> | |
| <i class="fas fa-home"></i> | |
| <span>Dashboard</span> | |
| </div> | |
| <div class="nav-item" data-section="food"> | |
| <i class="fas fa-utensils"></i> | |
| <span>Food Diary</span> | |
| </div> | |
| <div class="nav-item" data-section="water"> | |
| <i class="fas fa-tint"></i> | |
| <span>Water</span> | |
| </div> | |
| <div class="nav-item" data-section="exercise"> | |
| <i class="fas fa-running"></i> | |
| <span>Exercise</span> | |
| </div> | |
| <div class="nav-item" data-section="sleep"> | |
| <i class="fas fa-moon"></i> | |
| <span>Sleep</span> | |
| </div> | |
| <div class="nav-item" data-section="bmi"> | |
| <i class="fas fa-weight"></i> | |
| <span>BMI Calculator</span> | |
| </div> | |
| <div class="nav-item" data-section="goals"> | |
| <i class="fas fa-trophy"></i> | |
| <span>Goals</span> | |
| </div> | |
| <div class="nav-item" data-section="settings"> | |
| <i class="fas fa-cog"></i> | |
| <span>Settings</span> | |
| </div> | |
| </nav> | |
| </aside> | |
| <!-- Main Content --> | |
| <main class="content"> | |
| <!-- Dashboard Section --> | |
| <section id="dashboard" class="section active"> | |
| <h2 class="section-title"><i class="fas fa-chart-line"></i> Daily Overview</h2> | |
| <!-- Stats Grid --> | |
| <div class="stats-grid"> | |
| <div class="stat-card calories fade-in"> | |
| <div class="stat-header"> | |
| <div class="stat-icon calories"><i class="fas fa-fire"></i></div> | |
| </div> | |
| <div class="stat-value" id="caloriesConsumed">0</div> | |
| <div class="stat-label">Calories Consumed</div> | |
| <div class="stat-progress"> | |
| <div class="stat-progress-bar calories" id="caloriesProgress" style="width: 0%"></div> | |
| </div> | |
| <div class="stat-label" style="margin-top: 0.5rem" id="caloriesRemaining">2000 remaining</div> | |
| </div> | |
| <div class="stat-card water fade-in" style="animation-delay: 0.1s"> | |
| <div class="stat-header"> | |
| <div class="stat-icon water"><i class="fas fa-tint"></i></div> | |
| </div> | |
| <div class="stat-value" id="waterIntake">0</div> | |
| <div class="stat-label">Glasses of Water</div> | |
| <div class="stat-progress"> | |
| <div class="stat-progress-bar water" id="waterProgress" style="width: 0%"></div> | |
| </div> | |
| <div class="stat-label" style="margin-top: 0.5rem" id="waterRemaining">8 glasses goal</div> | |
| </div> | |
| <div class="stat-card exercise fade-in" style="animation-delay: 0.2s"> | |
| <div class="stat-header"> | |
| <div class="stat-icon exercise"><i class="fas fa-burn"></i></div> | |
| </div> | |
| <div class="stat-value" id="caloriesBurned">0</div> | |
| <div class="stat-label">Calories Burned</div> | |
| <div class="stat-progress"> | |
| <div class="stat-progress-bar exercise" id="exerciseProgress" style="width: 0%"></div> | |
| </div> | |
| <div class="stat-label" style="margin-top: 0.5rem" id="exerciseGoal">500 goal</div> | |
| </div> | |
| <div class="stat-card sleep fade-in" style="animation-delay: 0.3s"> | |
| <div class="stat-header"> | |
| <div class="stat-icon sleep"><i class="fas fa-moon"></i></div> | |
| </div> | |
| <div class="stat-value" id="sleepHours">0</div> | |
| <div class="stat-label">Hours of Sleep</div> | |
| <div class="stat-progress"> | |
| <div class="stat-progress-bar sleep" id="sleepProgress" style="width: 0%"></div> | |
| </div> | |
| <div class="stat-label" style="margin-top: 0.5rem" id="sleepGoal">8 hours goal</div> | |
| </div> | |
| </div> | |
| <!-- Charts Section --> | |
| <div class="charts-section"> | |
| <div class="chart-card fade-in" style="animation-delay: 0.4s"> | |
| <div class="chart-header"> | |
| <h3 class="chart-title">Weekly Calorie Intake</h3> | |
| <button class="btn btn-secondary" onclick="openModal('addFood')"> | |
| <i class="fas fa-plus"></i> Add Food | |
| </button> | |
| </div> | |
| <div class="chart-container"> | |
| <canvas id="weeklyCaloriesChart"></canvas> | |
| </div> | |
| </div> | |
| <div class="chart-card fade-in" style="animation-delay: 0.5s"> | |
| <div class="chart-header"> | |
| <h3 class="chart-title">Macronutrients Breakdown</h3> | |
| </div> | |
| <div class="chart-container"> | |
| <canvas id="macrosChart"></canvas> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Weekly Summary --> | |
| <div class="weekly-summary fade-in" style="animation-delay: 0.6s"> | |
| <h3 class="chart-title"><i class="fas fa-calendar-week"></i> This Week</h3> | |
| <div class="week-grid" id="weeklyGrid"> | |
| <!-- Generated by JS --> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Food Diary Section --> | |
| <section id="food" class="section" style="display: none;"> | |
| <h2 class="section-title"><i class="fas fa-utensils"></i> Food Diary</h2> | |
| <div class="food-diary"> | |
| <!-- Breakfast --> | |
| <div class="meal-section"> | |
| <div class="meal-header"> | |
| <div class="meal-title"> | |
| <div class="meal-icon breakfast"><i class="fas fa-coffee"></i></div> | |
| <span>Breakfast</span> | |
| </div> | |
| <span class="meal-calories" id="breakfastCalories">0 kcal</span> | |
| </div> | |
| <ul class="food-list" id="breakfastList"> | |
| <!-- Generated by JS --> | |
| </ul> | |
| <form class="add-food-form" onsubmit="addFood(event, 'breakfast')"> | |
| <input type="text" class="form-input" placeholder="Food name" required> | |
| <input type="number" class="form-input" placeholder="Calories" required> | |
| <button type="submit" class="btn btn-primary">Add</button> | |
| </form> | |
| <div class="quick-add"> | |
| <button class="quick-add-btn" onclick="quickAddFood('breakfast', 'Oatmeal', 150)">Oatmeal</button> | |
| <button class="quick-add-btn" onclick="quickAddFood('breakfast', 'Eggs (2)', 140)">Eggs (2)</button> | |
| <button class="quick-add-btn" onclick="quickAddFood('breakfast', 'Banana', 105)">Banana</button> | |
| <button class="quick-add-btn" onclick="quickAddFood('breakfast', 'Toast', 80)">Toast</button> | |
| <button class="quick-add-btn" onclick="quickAddFood('breakfast', 'Yogurt', 120)">Yogurt</button> | |
| </div> | |
| </div> | |
| <!-- Lunch --> | |
| <div class="meal-section"> | |
| <div class="meal-header"> | |
| <div class="meal-title"> | |
| <div class="meal-icon lunch"><i class="fas fa-hamburger"></i></div> | |
| <span>Lunch</span> | |
| </div> | |
| <span class="meal-calories" id="lunchCalories">0 kcal</span> | |
| </div> | |
| <ul class="food-list" id="lunchList"> | |
| <!-- Generated by JS --> | |
| </ul> | |
| <form class="add-food-form" onsubmit="addFood(event, 'lunch')"> | |
| <input type="text" class="form-input" placeholder="Food name" required> | |
| <input type="number" class="form-input" placeholder="Calories" required> | |
| <button type="submit" class="btn btn-primary">Add</button> | |
| </form> | |
| <div class="quick-add"> | |
| <button class="quick-add-btn" onclick="quickAddFood('lunch', 'Chicken Salad', 350)">Chicken Salad</button> | |
| <button class="quick-add-btn" onclick="quickAddFood('lunch', 'Sandwich', 400)">Sandwich</button> | |
| <button class="quick-add-btn" onclick="quickAddFood('lunch', 'Rice Bowl', 450)">Rice Bowl</button> | |
| <button class="quick-add-btn" onclick="quickAddFood('lunch', 'Soup', 200)">Soup</button> | |
| <button class="quick-add-btn" onclick="quickAddFood('lunch', 'Fruits', 150)">Fruits</button> | |
| </div> | |
| </div> | |
| <!-- Dinner --> | |
| <div class="meal-section"> | |
| <div class="meal-header"> | |
| <div class="meal-title"> | |
| <div class="meal-icon dinner"><i class="fas fa-utensils"></i></div> | |
| <span>Dinner</span> | |
| </div> | |
| <span class="meal-calories" id="dinnerCalories">0 kcal</span> | |
| </div> | |
| <ul class="food-list" id="dinnerList"> | |
| <!-- Generated by JS --> | |
| </ul> | |
| <form class="add-food-form" onsubmit="addFood(event, 'dinner')"> | |
| <input type="text" class="form-input" placeholder="Food name" required> | |
| <input type="number" class="form-input" placeholder="Calories" required> | |
| <button type="submit" class="btn btn-primary">Add</button> | |
| </form> | |
| <div class="quick-add"> | |
| <button class="quick-add-btn" onclick="quickAddFood('dinner', 'Grilled Fish', 400)">Grilled Fish</button> | |
| <button class="quick-add-btn" onclick="quickAddFood('dinner', 'Vegetables', 150)">Vegetables</button> | |
| <button class="quick-add-btn" onclick="quickAddFood('dinner', 'Pasta', 500)">Pasta</button> | |
| <button class="quick-add-btn" onclick="quickAddFood('dinner', 'Steak', 600)">Steak</button> | |
| <button class="quick-add-btn" onclick="quickAddFood('dinner', 'Salad', 200)">Salad</button> | |
| </div> | |
| </div> | |
| <!-- Snacks --> | |
| <div class="meal-section"> | |
| <div class="meal-header"> | |
| <div class="meal-title"> | |
| <div class="meal-icon snack"><i class="fas fa-cookie"></i></div> | |
| <span>Snacks</span> | |
| </div> | |
| <span class="meal-calories" id="snackCalories">0 kcal</span> | |
| </div> | |
| <ul class="food-list" id="snackList"> | |
| <!-- Generated by JS --> | |
| </ul> | |
| <form class="add-food-form" onsubmit="addFood(event, 'snack')"> | |
| <input type="text" class="form-input" placeholder="Food name" required> |