-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
157 lines (145 loc) · 7.47 KB
/
index.html
File metadata and controls
157 lines (145 loc) · 7.47 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fitness Tracker Dashboard</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
</head>
<body>
<div class="dashboard-container">
<nav class="sidebar">
<div class="sidebar-header">
<h3><i class="fas fa-heartbeat"></i> Fitness Hub</h3>
</div>
<ul class="nav-links">
<li><a href="#dashboard" class="nav-link active" data-target="dashboard-content"><i class="fas fa-tachometer-alt"></i> Dashboard</a></li>
<li><a href="#log" class="nav-link" data-target="log-content"><i class="fas fa-clipboard-list"></i> Workout Log</a></li>
<li><a href="#plans" class="nav-link" data-target="plans-content"><i class="fas fa-calendar-alt"></i> Workout Plans</a></li>
<li><a href="#progress" class="nav-link" data-target="progress-content"><i class="fas fa-chart-line"></i> Progress</a></li>
</ul>
</nav>
<main class="main-content">
<header class="main-header">
<h1>Your Fitness Dashboard</h1>
<p>Reference Date: April 5, 2025 | Current Time: <span id="current-time">Loading...</span> (Asia/Dhaka)</p>
</header>
<div id="notification" class="notification"></div>
<section id="dashboard-content" class="content-section active">
<h2>Overview</h2>
<div class="stats-grid">
<div class="stat-card workouts-week">
<i class="fas fa-dumbbell stat-icon"></i>
<h4>Workouts This Week</h4>
<p class="stat-value" id="workoutsThisWeek">0</p>
</div>
<div class="stat-card calories-today">
<i class="fas fa-fire stat-icon"></i>
<h4>Calories Burned Today</h4>
<p class="stat-value" id="caloriesToday">0</p> <small>(Simulated)</small>
</div>
<div class="stat-card streak">
<i class="fas fa-calendar-check stat-icon"></i>
<h4>Active Streak</h4>
<p class="stat-value" id="activeStreak">0 days</p> <small>(Simulated)</small>
</div>
<div class="stat-card next-workout">
<i class="fas fa-forward stat-icon"></i>
<h4>Next Planned Workout</h4>
<p class="stat-value small-text" id="nextPlannedWorkout">None</p>
</div>
</div>
<div class="today-focus">
<h3>Today's Focus (April 5, 2025)</h3>
<div id="todaysWorkoutInfo" class="today-workout-info">
<p>No workout logged or planned for today yet.</p>
</div>
</div>
<div class="chart-container">
<h3>Progress Snapshot</h3>
<div id="progressChartPlaceholder" class="chart-placeholder">
Chart Placeholder: Visualize weight trend, workout duration, or calories burned over time here (requires charting library).
</div>
</div>
</section>
<section id="log-content" class="content-section">
<h2>Workout Log</h2>
<button id="logWorkoutBtn" class="btn btn-primary"><i class="fas fa-plus"></i> Log New Workout</button>
<div class="table-container">
<table id="logTable">
<thead>
<tr>
<th>Date</th>
<th>Workout Type/Name</th>
<th>Duration</th>
<th>Calories Burned (Est.)</th>
<th>Notes</th>
<th>Actions</th> </tr>
</thead>
<tbody id="logTableBody">
</tbody>
</table>
</div>
</section>
<section id="plans-content" class="content-section">
<h2>Workout Plans</h2>
<p>Select or view details of available workout plans.</p>
<div id="plansListContainer" class="plans-list-container">
<p>Loading plans...</p>
</div>
</section>
<section id="progress-content" class="content-section">
<h2>Your Progress</h2>
<div class="progress-details">
<p>Detailed statistics and charts tracking your fitness journey over time would appear here.</p>
<div class="chart-container">
<h3>Weight Tracking</h3>
<div class="chart-placeholder">Weight chart placeholder (needs library).</div>
</div>
<div class="pb-tracker">
<h3>Personal Bests (PBs)</h3>
<p>Placeholder for tracking personal bests (e.g., fastest 5k, heaviest lift).</p>
</div>
</div>
</section>
</main>
</div>
<div id="logWorkoutModal" class="modal">
<div class="modal-content">
<span class="close-button" title="Close">×</span>
<h2 id="logFormTitle">Log New Workout</h2>
<form id="logWorkoutForm">
<input type="hidden" id="logId"> <div class="form-group">
<label for="logDate">Date:</label>
<input type="date" id="logDate" required>
</div>
<div class="form-group">
<label for="logWorkoutName">Workout Type/Name:</label>
<input type="text" id="logWorkoutName" placeholder="E.g., Morning Run, Gym Session, Full Body Routine" required>
</div>
<div class="form-group form-row">
<div class="form-column">
<label for="logDuration">Duration (minutes):</label>
<input type="number" id="logDuration" min="1" step="1" required>
</div>
<div class="form-column">
<label for="logCalories">Calories Burned (Est.):</label>
<input type="number" id="logCalories" min="0" step="1" placeholder="Optional">
<small>Leave blank for auto-estimate (simulated)</small>
</div>
</div>
<div class="form-group">
<label for="logNotes">Notes:</label>
<textarea id="logNotes" rows="3" placeholder="How did it feel? Any PBs?"></textarea>
</div>
<div class="form-actions">
<button type="submit" class="btn btn-success"><i class="fas fa-save"></i> Save Log</button>
<button type="button" id="cancelLogBtn" class="btn btn-secondary">Cancel</button>
</div>
</form>
</div>
</div>
<script src="script.js"></script>
</body>
</html>