Hugging Face's logo

Spaces:
PhoenixBomb
/
workout-board
Running

App Files Community
PhoenixBomb commited on
Commit
010b4f7
·
verified ·
1 Parent(s): 07928c5

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +6 -4
  2. index.html +671 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Workout Board
3
- emoji: 🚀
4
  colorFrom: pink
5
- colorTo: gray
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: workout-board
3
+ emoji: 🐳
4
  colorFrom: pink
5
+ colorTo: green
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,671 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Workout Analytics Dashboard</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
9
+ <script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
10
+ <script src="https://kit.fontawesome.com/a076d05399.js" crossorigin="anonymous"></script>
11
+ <style>
12
+ .custom-scrollbar::-webkit-scrollbar {
13
+ width: 6px;
14
+ height: 6px;
15
+ }
16
+ .custom-scrollbar::-webkit-scrollbar-track {
17
+ background: #f1f1f1;
18
+ border-radius: 10px;
19
+ }
20
+ .custom-scrollbar::-webkit-scrollbar-thumb {
21
+ background: #888;
22
+ border-radius: 10px;
23
+ }
24
+ .custom-scrollbar::-webkit-scrollbar-thumb:hover {
25
+ background: #555;
26
+ }
27
+ .chart-container {
28
+ position: relative;
29
+ height: 100%;
30
+ width: 100%;
31
+ }
32
+ .progress-ring__circle {
33
+ transition: stroke-dashoffset 0.5s;
34
+ transform: rotate(-90deg);
35
+ transform-origin: 50% 50%;
36
+ }
37
+ .blink {
38
+ animation: blink-animation 1.5s steps(5, start) infinite;
39
+ }
40
+ @keyframes blink-animation {
41
+ to {
42
+ visibility: hidden;
43
+ }
44
+ }
45
+ </style>
46
+ </head>
47
+ <body class="bg-gray-100 font-sans">
48
+ <div class="container mx-auto px-4 py-8">
49
+ <div class="flex justify-between items-center mb-8">
50
+ <h1 class="text-3xl font-bold text-gray-800">Workout Performance Analytics</h1>
51
+ <div class="flex space-x-4">
52
+ <div class="relative">
53
+ <select class="appearance-none bg-white border border-gray-300 rounded-md py-2 pl-3 pr-8 text-gray-700 focus:outline-none focus:ring-2 focus:ring-blue-500">
54
+ <option>Last 7 Days</option>
55
+ <option selected>Last 30 Days</option>
56
+ <option>Last 90 Days</option>
57
+ <option>Custom Range</option>
58
+ </select>
59
+ <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700">
60
+ <i class="fas fa-chevron-down"></i>
61
+ </div>
62
+ </div>
63
+ <button class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md flex items-center">
64
+ <i class="fas fa-download mr-2"></i> Export
65
+ </button>
66
+ </div>
67
+ </div>
68
+
69
+ <!-- Summary Cards -->
70
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
71
+ <div class="bg-white rounded-xl shadow-md p-6 flex items-center">
72
+ <div class="p-3 rounded-full bg-blue-100 text-blue-600 mr-4">
73
+ <i class="fas fa-dumbbell text-xl"></i>
74
+ </div>
75
+ <div>
76
+ <p class="text-gray-500 text-sm">Total Volume</p>
77
+ <h3 class="text-2xl font-bold">12,450 kg</h3>
78
+ <p class="text-green-500 text-sm flex items-center">
79
+ <i class="fas fa-arrow-up mr-1"></i> 8.2% from last month
80
+ </p>
81
+ </div>
82
+ </div>
83
+ <div class="bg-white rounded-xl shadow-md p-6 flex items-center">
84
+ <div class="p-3 rounded-full bg-purple-100 text-purple-600 mr-4">
85
+ <i class="fas fa-clock text-xl"></i>
86
+ </div>
87
+ <div>
88
+ <p class="text-gray-500 text-sm">Avg Rest Time</p>
89
+ <h3 class="text-2xl font-bold">72s</h3>
90
+ <p class="text-red-500 text-sm flex items-center">
91
+ <i class="fas fa-arrow-down mr-1"></i> 5.3% from last month
92
+ </p>
93
+ </div>
94
+ </div>
95
+ <div class="bg-white rounded-xl shadow-md p-6 flex items-center">
96
+ <div class="p-3 rounded-full bg-green-100 text-green-600 mr-4">
97
+ <i class="fas fa-fire text-xl"></i>
98
+ </div>
99
+ <div>
100
+ <p class="text-gray-500 text-sm">Workout Intensity</p>
101
+ <h3 class="text-2xl font-bold">78%</h3>
102
+ <p class="text-green-500 text-sm flex items-center">
103
+ <i class="fas fa-arrow-up mr-1"></i> 12.1% from last month
104
+ </p>
105
+ </div>
106
+ </div>
107
+ <div class="bg-white rounded-xl shadow-md p-6 flex items-center">
108
+ <div class="p-3 rounded-full bg-orange-100 text-orange-600 mr-4">
109
+ <i class="fas fa-heartbeat text-xl"></i>
110
+ </div>
111
+ <div>
112
+ <p class="text-gray-500 text-sm">Avg Heart Rate</p>
113
+ <h3 class="text-2xl font-bold">142 bpm</h3>
114
+ <p class="text-green-500 text-sm flex items-center">
115
+ <i class="fas fa-arrow-up mr-1"></i> 3.7% from last month
116
+ </p>
117
+ </div>
118
+ </div>
119
+ </div>
120
+
121
+ <!-- Main Charts -->
122
+ <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 mb-8">
123
+ <!-- Workout Volume & Intensity Chart -->
124
+ <div class="bg-white rounded-xl shadow-md p-6">
125
+ <div class="flex justify-between items-center mb-4">
126
+ <h2 class="text-xl font-semibold text-gray-800">Workout Volume & Intensity</h2>
127
+ <div class="flex space-x-2">
128
+ <button class="px-3 py-1 text-sm bg-blue-100 text-blue-600 rounded-md">Volume</button>
129
+ <button class="px-3 py-1 text-sm bg-gray-100 text-gray-600 rounded-md">Intensity</button>
130
+ <button class="px-3 py-1 text-sm bg-gray-100 text-gray-600 rounded-md">Both</button>
131
+ </div>
132
+ </div>
133
+ <div class="chart-container">
134
+ <canvas id="volumeIntensityChart"></canvas>
135
+ </div>
136
+ </div>
137
+
138
+ <!-- Rest Periods & Recovery Chart -->
139
+ <div class="bg-white rounded-xl shadow-md p-6">
140
+ <div class="flex justify-between items-center mb-4">
141
+ <h2 class="text-xl font-semibold text-gray-800">Rest Periods & Recovery</h2>
142
+ <div class="flex items-center text-sm text-gray-500">
143
+ <i class="fas fa-info-circle mr-1"></i> Optimal range: 60-90s
144
+ </div>
145
+ </div>
146
+ <div class="chart-container">
147
+ <canvas id="restRecoveryChart"></canvas>
148
+ </div>
149
+ </div>
150
+ </div>
151
+
152
+ <!-- Secondary Charts -->
153
+ <div class="grid grid-cols-1 lg:grid-cols-3 gap-8 mb-8">
154
+ <!-- Muscle Group Distribution -->
155
+ <div class="bg-white rounded-xl shadow-md p-6">
156
+ <h2 class="text-xl font-semibold text-gray-800 mb-4">Muscle Group Distribution</h2>
157
+ <div class="chart-container">
158
+ <canvas id="muscleGroupChart"></canvas>
159
+ </div>
160
+ </div>
161
+
162
+ <!-- Weight Progression -->
163
+ <div class="bg-white rounded-xl shadow-md p-6">
164
+ <h2 class="text-xl font-semibold text-gray-800 mb-4">Weight Progression</h2>
165
+ <div class="chart-container">
166
+ <canvas id="weightProgressionChart"></canvas>
167
+ </div>
168
+ </div>
169
+
170
+ <!-- Workout Consistency -->
171
+ <div class="bg-white rounded-xl shadow-md p-6">
172
+ <h2 class="text-xl font-semibold text-gray-800 mb-4">Workout Consistency</h2>
173
+ <div class="flex items-center justify-center h-48">
174
+ <svg class="w-40 h-40">
175
+ <circle
176
+ class="text-gray-200"
177
+ stroke-width="10"
178
+ stroke="currentColor"
179
+ fill="transparent"
180
+ r="60"
181
+ cx="80"
182
+ cy="80"
183
+ />
184
+ <circle
185
+ class="progress-ring__circle text-blue-600"
186
+ stroke-width="10"
187
+ stroke-linecap="round"
188
+ stroke="currentColor"
189
+ fill="transparent"
190
+ r="60"
191
+ cx="80"
192
+ cy="80"
193
+ stroke-dasharray="377"
194
+ stroke-dashoffset="75.4"
195
+ />
196
+ </svg>
197
+ <div class="absolute text-center">
198
+ <span class="text-3xl font-bold">80%</span>
199
+ <p class="text-gray-500 text-sm">Completion Rate</p>
200
+ </div>
201
+ </div>
202
+ <div class="mt-4 text-center">
203
+ <p class="text-gray-600">You've completed 16 of 20 planned workouts this month</p>
204
+ </div>
205
+ </div>
206
+ </div>
207
+
208
+ <!-- Detailed Metrics Table -->
209
+ <div class="bg-white rounded-xl shadow-md overflow-hidden mb-8">
210
+ <div class="px-6 py-4 border-b border-gray-200 flex justify-between items-center">
211
+ <h2 class="text-xl font-semibold text-gray-800">Workout Session Details</h2>
212
+ <div class="relative">
213
+ <input type="text" placeholder="Search workouts..." class="pl-8 pr-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
214
+ <i class="fas fa-search absolute left-3 top-3 text-gray-400"></i>
215
+ </div>
216
+ </div>
217
+ <div class="overflow-x-auto custom-scrollbar">
218
+ <table class="min-w-full divide-y divide-gray-200">
219
+ <thead class="bg-gray-50">
220
+ <tr>
221
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Date</th>
222
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Workout</th>
223
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Volume (kg)</th>
224
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Avg Rest</th>
225
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Intensity</th>
226
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">HR Max</th>
227
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Recovery</th>
228
+ </tr>
229
+ </thead>
230
+ <tbody class="bg-white divide-y divide-gray-200">
231
+ <tr class="hover:bg-gray-50">
232
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">Jun 12, 2023</td>
233
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-blue-600">Upper Body</td>
234
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">2,450</td>
235
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">68s</td>
236
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
237
+ <div class="flex items-center">
238
+ <div class="h-2 w-16 bg-gray-200 rounded-full mr-2">
239
+ <div class="h-2 bg-green-500 rounded-full" style="width: 75%"></div>
240
+ </div>
241
+ <span>75%</span>
242
+ </div>
243
+ </td>
244
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">158 bpm</td>
245
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
246
+ <span class="px-2 py-1 text-xs rounded-full bg-green-100 text-green-800">Excellent</span>
247
+ </td>
248
+ </tr>
249
+ <tr class="hover:bg-gray-50">
250
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">Jun 10, 2023</td>
251
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-blue-600">Leg Day</td>
252
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">3,120</td>
253
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">82s</td>
254
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
255
+ <div class="flex items-center">
256
+ <div class="h-2 w-16 bg-gray-200 rounded-full mr-2">
257
+ <div class="h-2 bg-yellow-500 rounded-full" style="width: 65%"></div>
258
+ </div>
259
+ <span>65%</span>
260
+ </div>
261
+ </td>
262
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">162 bpm</td>
263
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
264
+ <span class="px-2 py-1 text-xs rounded-full bg-yellow-100 text-yellow-800">Good</span>
265
+ </td>
266
+ </tr>
267
+ <tr class="hover:bg-gray-50">
268
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">Jun 8, 2023</td>
269
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-blue-600">Full Body</td>
270
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">2,780</td>
271
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">71s</td>
272
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
273
+ <div class="flex items-center">
274
+ <div class="h-2 w-16 bg-gray-200 rounded-full mr-2">
275
+ <div class="h-2 bg-green-500 rounded-full" style="width: 80%"></div>
276
+ </div>
277
+ <span>80%</span>
278
+ </div>
279
+ </td>
280
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">155 bpm</td>
281
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
282
+ <span class="px-2 py-1 text-xs rounded-full bg-green-100 text-green-800">Excellent</span>
283
+ </td>
284
+ </tr>
285
+ <tr class="hover:bg-gray-50">
286
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">Jun 5, 2023</td>
287
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-blue-600">Upper Body</td>
288
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">2,310</td>
289
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">65s</td>
290
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
291
+ <div class="flex items-center">
292
+ <div class="h-2 w-16 bg-gray-200 rounded-full mr-2">
293
+ <div class="h-2 bg-red-500 rounded-full" style="width: 45%"></div>
294
+ </div>
295
+ <span>45%</span>
296
+ </div>
297
+ </td>
298
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">148 bpm</td>
299
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
300
+ <span class="px-2 py-1 text-xs rounded-full bg-red-100 text-red-800">Poor</span>
301
+ </td>
302
+ </tr>
303
+ </tbody>
304
+ </table>
305
+ </div>
306
+ <div class="px-6 py-4 border-t border-gray-200 flex items-center justify-between">
307
+ <div class="text-sm text-gray-500">
308
+ Showing <span class="font-medium">1</span> to <span class="font-medium">4</span> of <span class="font-medium">16</span> workouts
309
+ </div>
310
+ <div class="flex space-x-2">
311
+ <button class="px-3 py-1 border border-gray-300 rounded-md text-sm bg-white text-gray-700 hover:bg-gray-50">Previous</button>
312
+ <button class="px-3 py-1 border border-gray-300 rounded-md text-sm bg-blue-600 text-white hover:bg-blue-700">1</button>
313
+ <button class="px-3 py-1 border border-gray-300 rounded-md text-sm bg-white text-gray-700 hover:bg-gray-50">2</button>
314
+ <button class="px-3 py-1 border border-gray-300 rounded-md text-sm bg-white text-gray-700 hover:bg-gray-50">3</button>
315
+ <button class="px-3 py-1 border border-gray-300 rounded-md text-sm bg-white text-gray-700 hover:bg-gray-50">Next</button>
316
+ </div>
317
+ </div>
318
+ </div>
319
+
320
+ <!-- Insights Section -->
321
+ <div class="bg-white rounded-xl shadow-md p-6 mb-8">
322
+ <h2 class="text-xl font-semibold text-gray-800 mb-4">Performance Insights</h2>
323
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
324
+ <div class="border-l-4 border-blue-500 pl-4">
325
+ <h3 class="text-lg font-medium text-gray-800 mb-2">Positive Trend</h3>
326
+ <p class="text-gray-600">Your workout volume has increased by 8.2% compared to last month, indicating progressive overload which is essential for muscle growth.</p>
327
+ </div>
328
+ <div class="border-l-4 border-yellow-500 pl-4">
329
+ <h3 class="text-lg font-medium text-gray-800 mb-2">Attention Needed</h3>
330
+ <p class="text-gray-600">Your average rest periods have decreased by 5.3%. While this may increase workout density, ensure you're getting adequate recovery between sets.</p>
331
+ </div>
332
+ <div class="border-l-4 border-green-500 pl-4">
333
+ <h3 class="text-lg font-medium text-gray-800 mb-2">Excellent Progress</h3>
334
+ <p class="text-gray-600">Your workout intensity has improved significantly (+12.1%), showing you're pushing yourself appropriately during sessions.</p>
335
+ </div>
336
+ <div class="border-l-4 border-purple-500 pl-4">
337
+ <h3 class="text-lg font-medium text-gray-800 mb-2">Recommendation</h3>
338
+ <p class="text-gray-600">Consider adding 1-2 additional lower body sessions per week to balance your muscle group distribution (currently 65% upper body focus).</p>
339
+ </div>
340
+ </div>
341
+ </div>
342
+ </div>
343
+
344
+ <script>
345
+ // Volume & Intensity Chart
346
+ const volumeIntensityCtx = document.getElementById('volumeIntensityChart').getContext('2d');
347
+ const volumeIntensityChart = new Chart(volumeIntensityCtx, {
348
+ type: 'line',
349
+ data: {
350
+ labels: ['Week 1', 'Week 2', 'Week 3', 'Week 4', 'Week 5', 'Week 6'],
351
+ datasets: [
352
+ {
353
+ label: 'Workout Volume (kg)',
354
+ data: [8500, 9200, 8800, 10200, 11000, 12450],
355
+ borderColor: 'rgba(59, 130, 246, 1)',
356
+ backgroundColor: 'rgba(59, 130, 246, 0.05)',
357
+ borderWidth: 2,
358
+ fill: true,
359
+ tension: 0.3,
360
+ yAxisID: 'y'
361
+ },
362
+ {
363
+ label: 'Workout Intensity (%)',
364
+ data: [65, 68, 70, 72, 75, 78],
365
+ borderColor: 'rgba(16, 185, 129, 1)',
366
+ backgroundColor: 'rgba(16, 185, 129, 0.05)',
367
+ borderWidth: 2,
368
+ borderDash: [5, 5],
369
+ tension: 0.3,
370
+ yAxisID: 'y1'
371
+ }
372
+ ]
373
+ },
374
+ options: {
375
+ responsive: true,
376
+ interaction: {
377
+ mode: 'index',
378
+ intersect: false,
379
+ },
380
+ plugins: {
381
+ tooltip: {
382
+ callbacks: {
383
+ label: function(context) {
384
+ let label = context.dataset.label || '';
385
+ if (label) {
386
+ label += ': ';
387
+ }
388
+ if (context.datasetIndex === 0) {
389
+ label += context.parsed.y.toLocaleString() + ' kg';
390
+ } else {
391
+ label += context.parsed.y + '%';
392
+ }
393
+ return label;
394
+ }
395
+ }
396
+ },
397
+ legend: {
398
+ position: 'top',
399
+ },
400
+ annotation: {
401
+ annotations: {
402
+ line1: {
403
+ type: 'line',
404
+ yMin: 70,
405
+ yMax: 70,
406
+ borderColor: 'rgba(16, 185, 129, 0.5)',
407
+ borderWidth: 1,
408
+ borderDash: [6, 6],
409
+ label: {
410
+ content: 'Target Intensity',
411
+ enabled: true,
412
+ position: 'right'
413
+ }
414
+ }
415
+ }
416
+ }
417
+ },
418
+ scales: {
419
+ y: {
420
+ type: 'linear',
421
+ display: true,
422
+ position: 'left',
423
+ title: {
424
+ display: true,
425
+ text: 'Volume (kg)'
426
+ },
427
+ grid: {
428
+ drawOnChartArea: false
429
+ }
430
+ },
431
+ y1: {
432
+ type: 'linear',
433
+ display: true,
434
+ position: 'right',
435
+ title: {
436
+ display: true,
437
+ text: 'Intensity (%)'
438
+ },
439
+ min: 50,
440
+ max: 100,
441
+ grid: {
442
+ drawOnChartArea: false
443
+ }
444
+ }
445
+ }
446
+ }
447
+ });
448
+
449
+ // Rest & Recovery Chart
450
+ const restRecoveryCtx = document.getElementById('restRecoveryChart').getContext('2d');
451
+ const restRecoveryChart = new Chart(restRecoveryCtx, {
452
+ type: 'bar',
453
+ data: {
454
+ labels: ['Jun 5', 'Jun 8', 'Jun 10', 'Jun 12', 'Jun 15', 'Jun 18', 'Jun 22', 'Jun 25', 'Jun 28'],
455
+ datasets: [
456
+ {
457
+ label: 'Rest Period (s)',
458
+ data: [65, 71, 82, 68, 75, 70, 67, 73, 69],
459
+ backgroundColor: 'rgba(124, 58, 237, 0.7)',
460
+ borderColor: 'rgba(124, 58, 237, 1)',
461
+ borderWidth: 1,
462
+ yAxisID: 'y'
463
+ },
464
+ {
465
+ label: 'Recovery Score',
466
+ data: [62, 85, 72, 88, 78, 82, 75, 80, 84],
467
+ type: 'line',
468
+ borderColor: 'rgba(245, 158, 11, 1)',
469
+ backgroundColor: 'rgba(245, 158, 11, 0.1)',
470
+ borderWidth: 2,
471
+ pointRadius: 4,
472
+ pointBackgroundColor: 'rgba(245, 158, 11, 1)',
473
+ tension: 0.3,
474
+ yAxisID: 'y1'
475
+ }
476
+ ]
477
+ },
478
+ options: {
479
+ responsive: true,
480
+ plugins: {
481
+ tooltip: {
482
+ callbacks: {
483
+ label: function(context) {
484
+ let label = context.dataset.label || '';
485
+ if (label) {
486
+ label += ': ';
487
+ }
488
+ if (context.datasetIndex === 0) {
489
+ label += context.parsed.y + 's';
490
+ } else {
491
+ label += context.parsed.y + '/100';
492
+ }
493
+ return label;
494
+ }
495
+ }
496
+ },
497
+ legend: {
498
+ position: 'top',
499
+ },
500
+ annotation: {
501
+ annotations: {
502
+ box1: {
503
+ type: 'box',
504
+ yMin: 60,
505
+ yMax: 90,
506
+ backgroundColor: 'rgba(124, 58, 237, 0.05)',
507
+ borderColor: 'rgba(124, 58, 237, 0.3)',
508
+ borderWidth: 1,
509
+ label: {
510
+ content: 'Optimal Rest Range',
511
+ enabled: true,
512
+ position: 'top'
513
+ }
514
+ }
515
+ }
516
+ }
517
+ },
518
+ scales: {
519
+ y: {
520
+ type: 'linear',
521
+ display: true,
522
+ position: 'left',
523
+ title: {
524
+ display: true,
525
+ text: 'Rest Period (seconds)'
526
+ },
527
+ min: 50,
528
+ max: 100
529
+ },
530
+ y1: {
531
+ type: 'linear',
532
+ display: true,
533
+ position: 'right',
534
+ title: {
535
+ display: true,
536
+ text: 'Recovery Score'
537
+ },
538
+ min: 50,
539
+ max: 100,
540
+ grid: {
541
+ drawOnChartArea: false
542
+ }
543
+ }
544
+ }
545
+ }
546
+ });
547
+
548
+ // Muscle Group Chart
549
+ const muscleGroupCtx = document.getElementById('muscleGroupChart').getContext('2d');
550
+ const muscleGroupChart = new Chart(muscleGroupCtx, {
551
+ type: 'doughnut',
552
+ data: {
553
+ labels: ['Chest', 'Back', 'Legs', 'Shoulders', 'Arms', 'Core'],
554
+ datasets: [{
555
+ data: [25, 20, 15, 15, 15, 10],
556
+ backgroundColor: [
557
+ 'rgba(59, 130, 246, 0.8)',
558
+ 'rgba(16, 185, 129, 0.8)',
559
+ 'rgba(245, 158, 11, 0.8)',
560
+ 'rgba(124, 58, 237, 0.8)',
561
+ 'rgba(239, 68, 68, 0.8)',
562
+ 'rgba(14, 165, 233, 0.8)'
563
+ ],
564
+ borderColor: [
565
+ 'rgba(59, 130, 246, 1)',
566
+ 'rgba(16, 185, 129, 1)',
567
+ 'rgba(245, 158, 11, 1)',
568
+ 'rgba(124, 58, 237, 1)',
569
+ 'rgba(239, 68, 68, 1)',
570
+ 'rgba(14, 165, 233, 1)'
571
+ ],
572
+ borderWidth: 1
573
+ }]
574
+ },
575
+ options: {
576
+ responsive: true,
577
+ plugins: {
578
+ legend: {
579
+ position: 'right',
580
+ },
581
+ tooltip: {
582
+ callbacks: {
583
+ label: function(context) {
584
+ const label = context.label || '';
585
+ const value = context.raw || 0;
586
+ const total = context.dataset.data.reduce((a, b) => a + b, 0);
587
+ const percentage = Math.round((value / total) * 100);
588
+ return `${label}: ${percentage}% (${value} sessions)`;
589
+ }
590
+ }
591
+ }
592
+ },
593
+ cutout: '65%'
594
+ }
595
+ });
596
+
597
+ // Weight Progression Chart
598
+ const weightProgressionCtx = document.getElementById('weightProgressionChart').getContext('2d');
599
+ const weightProgressionChart = new Chart(weightProgressionCtx, {
600
+ type: 'line',
601
+ data: {
602
+ labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
603
+ datasets: [
604
+ {
605
+ label: 'Bench Press (kg)',
606
+ data: [60, 62, 65, 67, 70, 72],
607
+ borderColor: 'rgba(59, 130, 246, 1)',
608
+ backgroundColor: 'rgba(59, 130, 246, 0.1)',
609
+ borderWidth: 2,
610
+ tension: 0.3,
611
+ fill: true
612
+ },
613
+ {
614
+ label: 'Squat (kg)',
615
+ data: [80, 82, 85, 87, 90, 95],
616
+ borderColor: 'rgba(16, 185, 129, 1)',
617
+ backgroundColor: 'rgba(16, 185, 129, 0.1)',
618
+ borderWidth: 2,
619
+ tension: 0.3,
620
+ fill: true
621
+ },
622
+ {
623
+ label: 'Deadlift (kg)',
624
+ data: [90, 92, 95, 100, 105, 110],
625
+ borderColor: 'rgba(245, 158, 11, 1)',
626
+ backgroundColor: 'rgba(245, 158, 11, 0.1)',
627
+ borderWidth: 2,
628
+ tension: 0.3,
629
+ fill: true
630
+ }
631
+ ]
632
+ },
633
+ options: {
634
+ responsive: true,
635
+ plugins: {
636
+ legend: {
637
+ position: 'top',
638
+ },
639
+ tooltip: {
640
+ callbacks: {
641
+ label: function(context) {
642
+ return context.dataset.label + ': ' + context.parsed.y + 'kg';
643
+ }
644
+ }
645
+ }
646
+ },
647
+ scales: {
648
+ y: {
649
+ beginAtZero: false,
650
+ min: 50,
651
+ title: {
652
+ display: true,
653
+ text: 'Weight (kg)'
654
+ }
655
+ }
656
+ }
657
+ }
658
+ });
659
+
660
+ // Animate progress ring
661
+ document.addEventListener('DOMContentLoaded', function() {
662
+ const circle = document.querySelector('.progress-ring__circle');
663
+ const radius = circle.r.baseVal.value;
664
+ const circumference = 2 * Math.PI * radius;
665
+
666
+ circle.style.strokeDasharray = circumference;
667
+ circle.style.strokeDashoffset = circumference - (0.8 * circumference);
668
+ });
669
+ </script>
670
+ <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=PhoenixBomb/workout-board" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
671
+ </html>