Hugging Face's logo

Spaces:
Faco24
/
coachify
Running

App Files Community
Faco24 commited on
Commit
47b4308
·
verified ·
1 Parent(s): f0d1b0f

undefined - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +700 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Coachify
3
- emoji: 📚
4
- colorFrom: pink
5
- colorTo: indigo
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: coachify
3
+ emoji: 🐳
4
+ colorFrom: red
5
+ colorTo: pink
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,700 @@
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>Coachify - Voice-Powered Fitness App</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <style>
10
+ .gradient-bg {
11
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
12
+ }
13
+ .voice-pulse {
14
+ animation: pulse 2s infinite;
15
+ }
16
+ @keyframes pulse {
17
+ 0% {
18
+ box-shadow: 0 0 0 0 rgba(102, 126, 234, 0.7);
19
+ }
20
+ 70% {
21
+ box-shadow: 0 0 0 15px rgba(102, 126, 234, 0);
22
+ }
23
+ 100% {
24
+ box-shadow: 0 0 0 0 rgba(102, 126, 234, 0);
25
+ }
26
+ }
27
+ .exercise-card:hover {
28
+ transform: translateY(-5px);
29
+ transition: all 0.3s ease;
30
+ }
31
+ .progress-ring__circle {
32
+ transition: stroke-dashoffset 0.5s;
33
+ transform: rotate(-90deg);
34
+ transform-origin: 50% 50%;
35
+ }
36
+ </style>
37
+ </head>
38
+ <body class="font-sans bg-gray-50">
39
+ <!-- Navigation -->
40
+ <nav class="gradient-bg text-white shadow-lg">
41
+ <div class="container mx-auto px-4 py-3 flex justify-between items-center">
42
+ <div class="flex items-center space-x-2">
43
+ <i class="fas fa-dumbbell text-2xl"></i>
44
+ <span class="text-xl font-bold">Coachify</span>
45
+ </div>
46
+ <div class="hidden md:flex space-x-6">
47
+ <a href="#" class="hover:text-gray-200">Home</a>
48
+ <a href="#" class="hover:text-gray-200">Features</a>
49
+ <a href="#" class="hover:text-gray-200">Dashboard</a>
50
+ <a href="#" class="hover:text-gray-200">Coach</a>
51
+ </div>
52
+ <div class="flex items-center space-x-4">
53
+ <button class="bg-white text-indigo-700 px-4 py-2 rounded-full font-medium hover:bg-gray-100 transition">
54
+ Sign In
55
+ </button>
56
+ <button class="md:hidden text-white">
57
+ <i class="fas fa-bars text-xl"></i>
58
+ </button>
59
+ </div>
60
+ </div>
61
+ </nav>
62
+
63
+ <!-- Hero Section -->
64
+ <section class="gradient-bg text-white py-16 md:py-24">
65
+ <div class="container mx-auto px-4 flex flex-col md:flex-row items-center">
66
+ <div class="md:w-1/2 mb-10 md:mb-0">
67
+ <h1 class="text-4xl md:text-5xl font-bold mb-6">Train Smarter With Voice Commands</h1>
68
+ <p class="text-xl mb-8">Coachify transforms your fitness journey with natural voice tracking, smart analytics, and a virtual coach that keeps you motivated.</p>
69
+ <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4">
70
+ <button class="bg-white text-indigo-700 px-6 py-3 rounded-full font-bold hover:bg-gray-100 transition">
71
+ Get Started
72
+ </button>
73
+ <button class="border-2 border-white text-white px-6 py-3 rounded-full font-bold hover:bg-white hover:text-indigo-700 transition">
74
+ Watch Demo
75
+ </button>
76
+ </div>
77
+ </div>
78
+ <div class="md:w-1/2 flex justify-center">
79
+ <div class="relative">
80
+ <div class="bg-white rounded-2xl p-4 shadow-xl w-80 h-96 relative overflow-hidden">
81
+ <div class="absolute top-4 left-4 right-4 bg-gray-100 rounded-lg p-3">
82
+ <div class="flex justify-between items-center mb-2">
83
+ <span class="font-bold text-gray-800">Today's Workout</span>
84
+ <span class="text-xs text-gray-500">45 min</span>
85
+ </div>
86
+ <div class="space-y-2">
87
+ <div class="bg-indigo-100 rounded p-2 flex items-center">
88
+ <div class="w-8 h-8 rounded-full bg-indigo-500 flex items-center justify-center text-white mr-2">
89
+ <i class="fas fa-dumbbell text-sm"></i>
90
+ </div>
91
+ <div>
92
+ <p class="font-medium text-gray-800">Squats</p>
93
+ <p class="text-xs text-gray-600">4x12 @ 60kg</p>
94
+ </div>
95
+ </div>
96
+ <div class="bg-indigo-100 rounded p-2 flex items-center">
97
+ <div class="w-8 h-8 rounded-full bg-indigo-500 flex items-center justify-center text-white mr-2">
98
+ <i class="fas fa-running text-sm"></i>
99
+ </div>
100
+ <div>
101
+ <p class="font-medium text-gray-800">Sprints</p>
102
+ <p class="text-xs text-gray-600">20s @ 19km/h</p>
103
+ </div>
104
+ </div>
105
+ <div class="bg-indigo-100 rounded p-2 flex items-center">
106
+ <div class="w-8 h-8 rounded-full bg-indigo-500 flex items-center justify-center text-white mr-2">
107
+ <i class="fas fa-fire-alt text-sm"></i>
108
+ </div>
109
+ <div>
110
+ <p class="font-medium text-gray-800">Burpees</p>
111
+ <p class="text-xs text-gray-600">4x10</p>
112
+ </div>
113
+ </div>
114
+ </div>
115
+ </div>
116
+ <div class="absolute bottom-4 left-4 right-4">
117
+ <div class="bg-indigo-600 rounded-full p-4 flex items-center justify-center voice-pulse">
118
+ <i class="fas fa-microphone text-white text-2xl"></i>
119
+ </div>
120
+ <p class="text-center text-gray-600 mt-2">Tap to record your workout</p>
121
+ </div>
122
+ </div>
123
+ </div>
124
+ </div>
125
+ </div>
126
+ </section>
127
+
128
+ <!-- Features Section -->
129
+ <section class="py-16 bg-white">
130
+ <div class="container mx-auto px-4">
131
+ <h2 class="text-3xl font-bold text-center mb-12">Powerful Features</h2>
132
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
133
+ <!-- Feature 1 -->
134
+ <div class="bg-gray-50 rounded-xl p-6 shadow-md hover:shadow-lg transition">
135
+ <div class="w-16 h-16 rounded-full bg-indigo-100 flex items-center justify-center mb-4">
136
+ <i class="fas fa-microphone text-indigo-600 text-2xl"></i>
137
+ </div>
138
+ <h3 class="text-xl font-bold mb-3">Voice Commands</h3>
139
+ <p class="text-gray-600">Simply speak your workout details like "4 sets of 12 squats with 60kg" and let Coachify handle the rest.</p>
140
+ </div>
141
+
142
+ <!-- Feature 2 -->
143
+ <div class="bg-gray-50 rounded-xl p-6 shadow-md hover:shadow-lg transition">
144
+ <div class="w-16 h-16 rounded-full bg-indigo-100 flex items-center justify-center mb-4">
145
+ <i class="fas fa-chart-line text-indigo-600 text-2xl"></i>
146
+ </div>
147
+ <h3 class="text-xl font-bold mb-3">Progress Tracking</h3>
148
+ <p class="text-gray-600">Visual dashboards show your strength gains, workout frequency, and muscle group balance.</p>
149
+ </div>
150
+
151
+ <!-- Feature 3 -->
152
+ <div class="bg-gray-50 rounded-xl p-6 shadow-md hover:shadow-lg transition">
153
+ <div class="w-16 h-16 rounded-full bg-indigo-100 flex items-center justify-center mb-4">
154
+ <i class="fas fa-robot text-indigo-600 text-2xl"></i>
155
+ </div>
156
+ <h3 class="text-xl font-bold mb-3">Virtual Coach</h3>
157
+ <p class="text-gray-600">Your personal AI trainer provides motivation, technique tips, and workout variations.</p>
158
+ </div>
159
+ </div>
160
+ </div>
161
+ </section>
162
+
163
+ <!-- Voice Demo Section -->
164
+ <section class="py-16 bg-gray-50">
165
+ <div class="container mx-auto px-4">
166
+ <div class="flex flex-col md:flex-row items-center">
167
+ <div class="md:w-1/2 mb-10 md:mb-0">
168
+ <h2 class="text-3xl font-bold mb-6">How Voice Tracking Works</h2>
169
+ <p class="text-gray-600 mb-8">Coachify understands natural language commands to log your workouts effortlessly. No more fumbling with your phone between sets!</p>
170
+
171
+ <div class="space-y-4">
172
+ <div class="flex items-start">
173
+ <div class="bg-indigo-100 rounded-full w-10 h-10 flex items-center justify-center mr-4 mt-1">
174
+ <i class="fas fa-quote-left text-indigo-600"></i>
175
+ </div>
176
+ <div>
177
+ <p class="font-medium">"3 sets of 10 pull-ups with 5kg assistance"</p>
178
+ <p class="text-sm text-gray-500">Records pull-ups with assisted weight</p>
179
+ </div>
180
+ </div>
181
+ <div class="flex items-start">
182
+ <div class="bg-indigo-100 rounded-full w-10 h-10 flex items-center justify-center mr-4 mt-1">
183
+ <i class="fas fa-quote-left text-indigo-600"></i>
184
+ </div>
185
+ <div>
186
+ <p class="font-medium">"Ran 5km in 28 minutes"</p>
187
+ <p class="text-sm text-gray-500">Logs cardio with distance and time</p>
188
+ </div>
189
+ </div>
190
+ <div class="flex items-start">
191
+ <div class="bg-indigo-100 rounded-full w-10 h-10 flex items-center justify-center mr-4 mt-1">
192
+ <i class="fas fa-quote-left text-indigo-600"></i>
193
+ </div>
194
+ <div>
195
+ <p class="font-medium">"4x8 bench press at 80kg with 2 min rest"</p>
196
+ <p class="text-sm text-gray-500">Tracks weight, reps, and rest periods</p>
197
+ </div>
198
+ </div>
199
+ </div>
200
+ </div>
201
+ <div class="md:w-1/2 flex justify-center">
202
+ <div class="bg-white rounded-2xl p-6 shadow-lg w-full max-w-md">
203
+ <div class="flex justify-between items-center mb-6">
204
+ <h3 class="font-bold text-lg">Voice Workout Log</h3>
205
+ <div class="flex space-x-2">
206
+ <button class="w-8 h-8 rounded-full bg-gray-100 flex items-center justify-center">
207
+ <i class="fas fa-history text-gray-500"></i>
208
+ </button>
209
+ <button class="w-8 h-8 rounded-full bg-gray-100 flex items-center justify-center">
210
+ <i class="fas fa-cog text-gray-500"></i>
211
+ </button>
212
+ </div>
213
+ </div>
214
+
215
+ <div class="bg-indigo-50 rounded-lg p-4 mb-6">
216
+ <div class="flex items-center justify-center mb-2">
217
+ <div class="relative">
218
+ <div class="w-24 h-24 rounded-full bg-indigo-100 flex items-center justify-center">
219
+ <i class="fas fa-microphone text-indigo-600 text-3xl"></i>
220
+ </div>
221
+ <div class="absolute inset-0 rounded-full border-4 border-indigo-200 animate-ping opacity-75"></div>
222
+ </div>
223
+ </div>
224
+ <p class="text-center text-indigo-800 font-medium">Listening for workout...</p>
225
+ <p class="text-center text-indigo-600 text-sm">Speak naturally after the beep</p>
226
+ </div>
227
+
228
+ <div class="space-y-3">
229
+ <div class="flex items-center">
230
+ <div class="w-8 h-8 rounded-full bg-green-100 flex items-center justify-center mr-3">
231
+ <i class="fas fa-check text-green-600"></i>
232
+ </div>
233
+ <div>
234
+ <p class="font-medium">"3 sets of 12 squats at 60kg"</p>
235
+ <p class="text-xs text-gray-500">Added to today's workout</p>
236
+ </div>
237
+ </div>
238
+ <div class="flex items-center">
239
+ <div class="w-8 h-8 rounded-full bg-yellow-100 flex items-center justify-center mr-3">
240
+ <i class="fas fa-exclamation text-yellow-600"></i>
241
+ </div>
242
+ <div>
243
+ <p class="font-medium">"4 rounds of 30s sprints"</p>
244
+ <p class="text-xs text-gray-500">Confirm rest period duration</p>
245
+ </div>
246
+ </div>
247
+ </div>
248
+ </div>
249
+ </div>
250
+ </div>
251
+ </div>
252
+ </section>
253
+
254
+ <!-- Dashboard Preview -->
255
+ <section class="py-16 bg-white">
256
+ <div class="container mx-auto px-4">
257
+ <h2 class="text-3xl font-bold text-center mb-6">Your Fitness Dashboard</h2>
258
+ <p class="text-gray-600 text-center max-w-2xl mx-auto mb-12">Visualize your progress with beautiful charts and actionable insights tailored to your goals.</p>
259
+
260
+ <div class="bg-gray-50 rounded-2xl p-6 shadow-lg overflow-hidden">
261
+ <div class="flex flex-wrap -mx-2">
262
+ <!-- Weekly Summary -->
263
+ <div class="w-full md:w-1/3 px-2 mb-6 md:mb-0">
264
+ <div class="bg-white rounded-xl p-4 h-full">
265
+ <h3 class="font-bold mb-4">This Week</h3>
266
+ <div class="space-y-4">
267
+ <div>
268
+ <p class="text-gray-500 text-sm">Workouts Completed</p>
269
+ <p class="text-2xl font-bold">4/5</p>
270
+ </div>
271
+ <div>
272
+ <p class="text-gray-500 text-sm">Total Volume</p>
273
+ <p class="text-2xl font-bold">12,540 kg</p>
274
+ </div>
275
+ <div>
276
+ <p class="text-gray-500 text-sm">Calories Burned</p>
277
+ <p class="text-2xl font-bold">3,450</p>
278
+ </div>
279
+ </div>
280
+ </div>
281
+ </div>
282
+
283
+ <!-- Muscle Group Chart -->
284
+ <div class="w-full md:w-1/3 px-2 mb-6 md:mb-0">
285
+ <div class="bg-white rounded-xl p-4 h-full">
286
+ <h3 class="font-bold mb-4">Muscle Balance</h3>
287
+ <div class="flex justify-center">
288
+ <svg width="160" height="160" viewBox="0 0 160 160">
289
+ <!-- Background circle -->
290
+ <circle cx="80" cy="80" r="70" fill="none" stroke="#e2e8f0" stroke-width="10"/>
291
+ <!-- Progress circle (Chest) -->
292
+ <circle cx="80" cy="80" r="70" fill="none" stroke="#818cf8" stroke-width="10"
293
+ stroke-dasharray="439.8" stroke-dashoffset="307.8" stroke-linecap="round"/>
294
+ <!-- Progress circle (Legs) -->
295
+ <circle cx="80" cy="80" r="70" fill="none" stroke="#4f46e5" stroke-width="10"
296
+ stroke-dasharray="439.8" stroke-dashoffset="219.9" stroke-linecap="round" transform="rotate(70 80 80)"/>
297
+ <!-- Progress circle (Back) -->
298
+ <circle cx="80" cy="80" r="70" fill="none" stroke="#6366f1" stroke-width="10"
299
+ stroke-dasharray="439.8" stroke-dashoffset="351.8" stroke-linecap="round" transform="rotate(140 80 80)"/>
300
+ <!-- Progress circle (Arms) -->
301
+ <circle cx="80" cy="80" r="70" fill="none" stroke="#a5b4fc" stroke-width="10"
302
+ stroke-dasharray="439.8" stroke-dashoffset="395.8" stroke-linecap="round" transform="rotate(210 80 80)"/>
303
+ <!-- Progress circle (Core) -->
304
+ <circle cx="80" cy="80" r="70" fill="none" stroke="#c7d2fe" stroke-width="10"
305
+ stroke-dasharray="439.8" stroke-dashoffset="263.8" stroke-linecap="round" transform="rotate(280 80 80)"/>
306
+ </svg>
307
+ </div>
308
+ <div class="grid grid-cols-2 gap-2 mt-4">
309
+ <div class="flex items-center">
310
+ <div class="w-3 h-3 rounded-full bg-indigo-400 mr-2"></div>
311
+ <span class="text-xs">Legs (50%)</span>
312
+ </div>
313
+ <div class="flex items-center">
314
+ <div class="w-3 h-3 rounded-full bg-indigo-600 mr-2"></div>
315
+ <span class="text-xs">Chest (30%)</span>
316
+ </div>
317
+ <div class="flex items-center">
318
+ <div class="w-3 h-3 rounded-full bg-indigo-300 mr-2"></div>
319
+ <span class="text-xs">Core (40%)</span>
320
+ </div>
321
+ <div class="flex items-center">
322
+ <div class="w-3 h-3 rounded-full bg-indigo-500 mr-2"></div>
323
+ <span class="text-xs">Back (20%)</span>
324
+ </div>
325
+ <div class="flex items-center">
326
+ <div class="w-3 h-3 rounded-full bg-indigo-200 mr-2"></div>
327
+ <span class="text-xs">Arms (10%)</span>
328
+ </div>
329
+ </div>
330
+ </div>
331
+ </div>
332
+
333
+ <!-- Recent Exercises -->
334
+ <div class="w-full md:w-1/3 px-2">
335
+ <div class="bg-white rounded-xl p-4 h-full">
336
+ <h3 class="font-bold mb-4">Recent Exercises</h3>
337
+ <div class="space-y-3">
338
+ <div class="flex items-center justify-between">
339
+ <div class="flex items-center">
340
+ <div class="w-8 h-8 rounded-full bg-indigo-100 flex items-center justify-center mr-3">
341
+ <i class="fas fa-dumbbell text-indigo-600"></i>
342
+ </div>
343
+ <div>
344
+ <p class="font-medium">Squats</p>
345
+ <p class="text-xs text-gray-500">4x12 @ 60kg</p>
346
+ </div>
347
+ </div>
348
+ <span class="text-sm text-gray-500">2d ago</span>
349
+ </div>
350
+ <div class="flex items-center justify-between">
351
+ <div class="flex items-center">
352
+ <div class="w-8 h-8 rounded-full bg-indigo-100 flex items-center justify-center mr-3">
353
+ <i class="fas fa-running text-indigo-600"></i>
354
+ </div>
355
+ <div>
356
+ <p class="font-medium">Sprints</p>
357
+ <p class="text-xs text-gray-500">4x30s @ 18km/h</p>
358
+ </div>
359
+ </div>
360
+ <span class="text-sm text-gray-500">1d ago</span>
361
+ </div>
362
+ <div class="flex items-center justify-between">
363
+ <div class="flex items-center">
364
+ <div class="w-8 h-8 rounded-full bg-indigo-100 flex items-center justify-center mr-3">
365
+ <i class="fas fa-fire-alt text-indigo-600"></i>
366
+ </div>
367
+ <div>
368
+ <p class="font-medium">Burpees</p>
369
+ <p class="text-xs text-gray-500">4x10</p>
370
+ </div>
371
+ </div>
372
+ <span class="text-sm text-gray-500">Today</span>
373
+ </div>
374
+ </div>
375
+ </div>
376
+ </div>
377
+ </div>
378
+
379
+ <!-- Progress Chart -->
380
+ <div class="mt-6 bg-white rounded-xl p-4">
381
+ <div class="flex justify-between items-center mb-4">
382
+ <h3 class="font-bold">Strength Progress</h3>
383
+ <div class="flex space-x-2">
384
+ <button class="px-3 py-1 bg-indigo-100 text-indigo-700 rounded-full text-sm">1M</button>
385
+ <button class="px-3 py-1 bg-indigo-600 text-white rounded-full text-sm">3M</button>
386
+ <button class="px-3 py-1 bg-indigo-100 text-indigo-700 rounded-full text-sm">6M</button>
387
+ <button class="px-3 py-1 bg-indigo-100 text-indigo-700 rounded-full text-sm">1Y</button>
388
+ </div>
389
+ </div>
390
+ <div class="h-64">
391
+ <!-- This would be a Chart.js or similar chart in a real app -->
392
+ <div class="flex items-end h-48 space-x-1">
393
+ <div class="w-8 bg-indigo-200 rounded-t" style="height: 40%;"></div>
394
+ <div class="w-8 bg-indigo-300 rounded-t" style="height: 50%;"></div>
395
+ <div class="w-8 bg-indigo-400 rounded-t" style="height: 60%;"></div>
396
+ <div class="w-8 bg-indigo-500 rounded-t" style="height: 70%;"></div>
397
+ <div class="w-8 bg-indigo-600 rounded-t" style="height: 90%;"></div>
398
+ <div class="w-8 bg-indigo-500 rounded-t" style="height: 80%;"></div>
399
+ <div class="w-8 bg-indigo-400 rounded-t" style="height: 75%;"></div>
400
+ </div>
401
+ <div class="flex justify-between mt-2 text-xs text-gray-500">
402
+ <span>Jan</span>
403
+ <span>Feb</span>
404
+ <span>Mar</span>
405
+ <span>Apr</span>
406
+ <span>May</span>
407
+ <span>Jun</span>
408
+ <span>Jul</span>
409
+ </div>
410
+ </div>
411
+ </div>
412
+ </div>
413
+ </div>
414
+ </section>
415
+
416
+ <!-- Virtual Coach Section -->
417
+ <section class="py-16 bg-indigo-50">
418
+ <div class="container mx-auto px-4">
419
+ <div class="flex flex-col md:flex-row items-center">
420
+ <div class="md:w-1/2 mb-10 md:mb-0">
421
+ <h2 class="text-3xl font-bold mb-6">Your Personal AI Coach</h2>
422
+ <p class="text-gray-600 mb-8">Meet Coach Max - your virtual training partner who provides motivation, technique tips, and workout variations tailored to your progress.</p>
423
+
424
+ <div class="bg-white rounded-xl p-6 shadow-md max-w-lg">
425
+ <div class="flex items-start mb-4">
426
+ <div class="w-12 h-12 rounded-full bg-indigo-100 flex items-center justify-center mr-4">
427
+ <i class="fas fa-robot text-indigo-600 text-xl"></i>
428
+ </div>
429
+ <div class="bg-gray-100 rounded-lg p-4 flex-1">
430
+ <p class="font-medium">Hey champ! I noticed you crushed your squat PR yesterday. 💪 Want to try paused squats next time to build even more strength out of the hole?</p>
431
+ <div class="flex space-x-2 mt-3">
432
+ <button class="text-xs bg-indigo-600 text-white px-3 py-1 rounded-full">Sounds good!</button>
433
+ <button class="text-xs border border-gray-300 px-3 py-1 rounded-full">Show me how</button>
434
+ </div>
435
+ </div>
436
+ </div>
437
+ <div class="flex items-start">
438
+ <div class="w-12 h-12 rounded-full bg-indigo-100 flex items-center justify-center mr-4">
439
+ <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="User" class="rounded-full w-full h-full object-cover">
440
+ </div>
441
+ <div class="bg-indigo-600 text-white rounded-lg p-4 flex-1">
442
+ <p>"4 sets of 8 paused squats with 50kg"</p>
443
+ </div>
444
+ </div>
445
+ </div>
446
+ </div>
447
+ <div class="md:w-1/2 flex justify-center">
448
+ <div class="bg-white rounded-2xl p-6 shadow-xl max-w-md w-full">
449
+ <div class="flex justify-between items-center mb-6">
450
+ <h3 class="font-bold text-lg">Coach Messages</h3>
451
+ <button class="text-indigo-600">
452
+ <i class="fas fa-ellipsis-h"></i>
453
+ </button>
454
+ </div>
455
+
456
+ <div class="space-y-4">
457
+ <!-- Message 1 -->
458
+ <div class="flex items-start">
459
+ <div class="w-10 h-10 rounded-full bg-indigo-100 flex items-center justify-center mr-3">
460
+ <i class="fas fa-robot text-indigo-600"></i>
461
+ </div>
462
+ <div class="bg-gray-100 rounded-xl p-3">
463
+ <p class="text-sm">Your deadlift progress is impressive! You've added 15kg in 2 months. Try alternating with Romanian deadlifts for hamstring development.</p>
464
+ <div class="flex justify-end mt-2">
465
+ <span class="text-xs text-gray-500">Yesterday</span>
466
+ </div>
467
+ </div>
468
+ </div>
469
+
470
+ <!-- Message 2 -->
471
+ <div class="flex items-start">
472
+ <div class="w-10 h-10 rounded-full bg-indigo-100 flex items-center justify-center mr-3">
473
+ <i class="fas fa-robot text-indigo-600"></i>
474
+ </div>
475
+ <div class="bg-gray-100 rounded-xl p-3">
476
+ <p class="text-sm">Rest day tomorrow! Your muscles need recovery to grow. Maybe try some light yoga or walking?</p>
477
+ <div class="flex justify-end mt-2">
478
+ <span class="text-xs text-gray-500">2 days ago</span>
479
+ </div>
480
+ </div>
481
+ </div>
482
+
483
+ <!-- Message 3 -->
484
+ <div class="flex items-start">
485
+ <div class="w-10 h-10 rounded-full bg-indigo-100 flex items-center justify-center mr-3">
486
+ <i class="fas fa-robot text-indigo-600"></i>
487
+ </div>
488
+ <div class="bg-gray-100 rounded-xl p-3">
489
+ <div class="flex items-center mb-1">
490
+ <i class="fas fa-trophy text-yellow-500 mr-2"></i>
491
+ <p class="font-medium text-sm">New Achievement!</p>
492
+ </div>
493
+ <p class="text-sm">You've completed 50 workouts with Coachify! Here's your virtual high five! ✋</p>
494
+ <div class="flex justify-end mt-2">
495
+ <span class="text-xs text-gray-500">1 week ago</span>
496
+ </div>
497
+ </div>
498
+ </div>
499
+ </div>
500
+
501
+ <div class="mt-6 flex items-center">
502
+ <input type="text" placeholder="Message Coach Max..." class="flex-1 border border-gray-300 rounded-full py-2 px-4 focus:outline-none focus:ring-2 focus:ring-indigo-500">
503
+ <button class="ml-2 w-10 h-10 rounded-full bg-indigo-600 text-white flex items-center justify-center">
504
+ <i class="fas fa-paper-plane"></i>
505
+ </button>
506
+ </div>
507
+ </div>
508
+ </div>
509
+ </div>
510
+ </div>
511
+ </section>
512
+
513
+ <!-- CTA Section -->
514
+ <section class="py-16 gradient-bg text-white">
515
+ <div class="container mx-auto px-4 text-center">
516
+ <h2 class="text-3xl font-bold mb-6">Ready to Transform Your Fitness Journey?</h2>
517
+ <p class="text-xl mb-8 max-w-2xl mx-auto">Join thousands of athletes and fitness enthusiasts who are training smarter with Coachify.</p>
518
+ <div class="flex flex-col sm:flex-row justify-center space-y-4 sm:space-y-0 sm:space-x-4">
519
+ <button class="bg-white text-indigo-700 px-8 py-4 rounded-full font-bold hover:bg-gray-100 transition">
520
+ Start Free Trial
521
+ </button>
522
+ <button class="border-2 border-white text-white px-8 py-4 rounded-full font-bold hover:bg-white hover:text-indigo-700 transition">
523
+ See Pricing Plans
524
+ </button>
525
+ </div>
526
+ </div>
527
+ </section>
528
+
529
+ <!-- Footer -->
530
+ <footer class="bg-gray-900 text-white py-12">
531
+ <div class="container mx-auto px-4">
532
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
533
+ <div>
534
+ <div class="flex items-center space-x-2 mb-4">
535
+ <i class="fas fa-dumbbell text-2xl"></i>
536
+ <span class="text-xl font-bold">Coachify</span>
537
+ </div>
538
+ <p class="text-gray-400">The voice-powered fitness app that helps you train smarter and track progress effortlessly.</p>
539
+ </div>
540
+ <div>
541
+ <h3 class="font-bold mb-4">Product</h3>
542
+ <ul class="space-y-2 text-gray-400">
543
+ <li><a href="#" class="hover:text-white">Features</a></li>
544
+ <li><a href="#" class="hover:text-white">Pricing</a></li>
545
+ <li><a href="#" class="hover:text-white">Download</a></li>
546
+ <li><a href="#" class="hover:text-white">Demo</a></li>
547
+ </ul>
548
+ </div>
549
+ <div>
550
+ <h3 class="font-bold mb-4">Company</h3>
551
+ <ul class="space-y-2 text-gray-400">
552
+ <li><a href="#" class="hover:text-white">About</a></li>
553
+ <li><a href="#" class="hover:text-white">Careers</a></li>
554
+ <li><a href="#" class="hover:text-white">Blog</a></li>
555
+ <li><a href="#" class="hover:text-white">Contact</a></li>
556
+ </ul>
557
+ </div>
558
+ <div>
559
+ <h3 class="font-bold mb-4">Connect</h3>
560
+ <div class="flex space-x-4 mb-4">
561
+ <a href="#" class="w-10 h-10 rounded-full bg-gray-800 flex items-center justify-center hover:bg-indigo-600">
562
+ <i class="fab fa-facebook-f"></i>
563
+ </a>
564
+ <a href="#" class="w-10 h-10 rounded-full bg-gray-800 flex items-center justify-center hover:bg-indigo-600">
565
+ <i class="fab fa-twitter"></i>
566
+ </a>
567
+ <a href="#" class="w-10 h-10 rounded-full bg-gray-800 flex items-center justify-center hover:bg-indigo-600">
568
+ <i class="fab fa-instagram"></i>
569
+ </a>
570
+ <a href="#" class="w-10 h-10 rounded-full bg-gray-800 flex items-center justify-center hover:bg-indigo-600">
571
+ <i class="fab fa-youtube"></i>
572
+ </a>
573
+ </div>
574
+ <p class="text-gray-400">support@coachify.fit</p>
575
+ </div>
576
+ </div>
577
+ <div class="border-t border-gray-800 mt-8 pt-8 flex flex-col md:flex-row justify-between items-center">
578
+ <p class="text-gray-400 mb-4 md:mb-0">© 2023 Coachify. All rights reserved.</p>
579
+ <div class="flex space-x-6">
580
+ <a href="#" class="text-gray-400 hover:text-white">Privacy Policy</a>
581
+ <a href="#" class="text-gray-400 hover:text-white">Terms of Service</a>
582
+ <a href="#" class="text-gray-400 hover:text-white">Cookie Policy</a>
583
+ </div>
584
+ </div>
585
+ </div>
586
+ </footer>
587
+
588
+ <!-- Sign In Modal -->
589
+ <div id="signInModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
590
+ <div class="bg-white rounded-lg p-8 max-w-md w-full">
591
+ <div class="flex justify-between items-center mb-6">
592
+ <h3 class="text-2xl font-bold">Sign In</h3>
593
+ <button id="closeModal" class="text-gray-500 hover:text-gray-700">
594
+ <i class="fas fa-times"></i>
595
+ </button>
596
+ </div>
597
+ <form>
598
+ <div class="mb-4">
599
+ <label class="block text-gray-700 mb-2" for="email">Email</label>
600
+ <input type="email" id="email" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500">
601
+ </div>
602
+ <div class="mb-6">
603
+ <label class="block text-gray-700 mb-2" for="password">Password</label>
604
+ <input type="password" id="password" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500">
605
+ </div>
606
+ <button type="submit" class="w-full bg-indigo-600 text-white py-2 px-4 rounded-lg hover:bg-indigo-700 transition">
607
+ Sign In
608
+ </button>
609
+ <p class="text-center mt-4 text-gray-600">
610
+ Don't have an account? <a href="#" class="text-indigo-600 hover:underline">Sign up</a>
611
+ </p>
612
+ </form>
613
+ </div>
614
+ </div>
615
+
616
+ <script>
617
+ // Modal and voice recording functionality
618
+ document.addEventListener('DOMContentLoaded', function() {
619
+ // Sign In Modal
620
+ const signInBtn = document.querySelector('button.bg-white.text-indigo-700');
621
+ const modal = document.getElementById('signInModal');
622
+ const closeModal = document.getElementById('closeModal');
623
+
624
+ if (signInBtn) {
625
+ signInBtn.addEventListener('click', function(e) {
626
+ e.preventDefault();
627
+ modal.classList.remove('hidden');
628
+ });
629
+ }
630
+
631
+ if (closeModal) {
632
+ closeModal.addEventListener('click', function() {
633
+ modal.classList.add('hidden');
634
+ });
635
+ }
636
+
637
+ // Close modal when clicking outside
638
+ modal.addEventListener('click', function(e) {
639
+ if (e.target === modal) {
640
+ modal.classList.add('hidden');
641
+ }
642
+ });
643
+
644
+ const voiceButtons = document.querySelectorAll('.fa-microphone');
645
+
646
+ voiceButtons.forEach(button => {
647
+ button.addEventListener('click', function() {
648
+ const parent = this.closest('.voice-pulse');
649
+ if (parent) {
650
+ parent.classList.remove('voice-pulse');
651
+ this.classList.remove('fa-microphone');
652
+ this.classList.add('fa-stop');
653
+
654
+ // Simulate recording
655
+ setTimeout(() => {
656
+ this.classList.remove('fa-stop');
657
+ this.classList.add('fa-microphone');
658
+ parent.classList.add('voice-pulse');
659
+
660
+ // Show success message
661
+ alert("Workout recorded successfully! '4 sets of 12 squats with 60kg' has been added to your log.");
662
+ }, 3000);
663
+ }
664
+ });
665
+ });
666
+
667
+ // Form submission
668
+ const signInForm = document.querySelector('#signInModal form');
669
+ if (signInForm) {
670
+ signInForm.addEventListener('submit', function(e) {
671
+ e.preventDefault();
672
+ const email = document.getElementById('email').value;
673
+ const password = document.getElementById('password').value;
674
+
675
+ // Simple validation
676
+ if (email && password) {
677
+ alert(`Sign in successful for ${email}`);
678
+ modal.classList.add('hidden');
679
+ signInForm.reset();
680
+ } else {
681
+ alert('Please enter both email and password');
682
+ }
683
+ });
684
+ }
685
+
686
+ // Coach message send
687
+ const sendButton = document.querySelector('.fa-paper-plane');
688
+ if (sendButton) {
689
+ sendButton.addEventListener('click', function() {
690
+ const input = this.previousElementSibling;
691
+ if (input.value.trim() !== '') {
692
+ alert("Message sent to Coach Max: " + input.value);
693
+ input.value = '';
694
+ }
695
+ });
696
+ }
697
+ });
698
+ </script>
699
+ <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=Faco24/coachify" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
700
+ </html>