Hugging Face's logo

Spaces:
martinez59
/
flashfitzone
Running

App Files Community
martinez59 commited on
Commit
51dd984
·
verified ·
1 Parent(s): ebe9356

Créer moi un site web dynamique nommé FlashFitZone, une plateforme qui propose des exercices rapide, des conseils fitness, et un suivi des progrès, avec des design moderne et facile à utiliser, avec des témoignages des clients satisfaits. - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +503 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Flashfitzone
3
- emoji: 👀
4
- colorFrom: yellow
5
- colorTo: purple
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: flashfitzone
3
+ emoji: 🐳
4
+ colorFrom: purple
5
+ colorTo: blue
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,503 @@
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="fr">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>FlashFitZone - Votre partenaire fitness rapide</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
+ .hero-gradient {
11
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
12
+ }
13
+ .exercise-card:hover {
14
+ transform: translateY(-5px);
15
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
16
+ }
17
+ .progress-ring__circle {
18
+ transition: stroke-dashoffset 0.8s ease-in-out;
19
+ transform: rotate(-90deg);
20
+ transform-origin: 50% 50%;
21
+ }
22
+ .testimonial-card {
23
+ transition: all 0.3s ease;
24
+ }
25
+ .testimonial-card:hover {
26
+ transform: scale(1.03);
27
+ }
28
+ .nav-link:after {
29
+ content: '';
30
+ display: block;
31
+ width: 0;
32
+ height: 2px;
33
+ background: #667eea;
34
+ transition: width .3s;
35
+ }
36
+ .nav-link:hover:after {
37
+ width: 100%;
38
+ }
39
+ </style>
40
+ </head>
41
+ <body class="font-sans antialiased text-gray-800">
42
+ <!-- Navigation -->
43
+ <nav class="bg-white shadow-lg sticky top-0 z-50">
44
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
45
+ <div class="flex justify-between h-16">
46
+ <div class="flex items-center">
47
+ <div class="flex-shrink-0 flex items-center">
48
+ <i class="fas fa-bolt text-purple-600 text-2xl mr-2"></i>
49
+ <span class="text-xl font-bold text-gray-900">FlashFitZone</span>
50
+ </div>
51
+ </div>
52
+ <div class="hidden md:ml-6 md:flex md:items-center md:space-x-8">
53
+ <a href="#accueil" class="nav-link px-3 py-2 text-sm font-medium">Accueil</a>
54
+ <a href="#exercices" class="nav-link px-3 py-2 text-sm font-medium">Exercices</a>
55
+ <a href="#conseils" class="nav-link px-3 py-2 text-sm font-medium">Conseils</a>
56
+ <a href="#suivi" class="nav-link px-3 py-2 text-sm font-medium">Suivi</a>
57
+ <a href="#temoignages" class="nav-link px-3 py-2 text-sm font-medium">Témoignages</a>
58
+ <button class="bg-purple-600 hover:bg-purple-700 text-white px-4 py-2 rounded-md text-sm font-medium transition duration-300">
59
+ S'inscrire
60
+ </button>
61
+ </div>
62
+ <div class="-mr-2 flex items-center md:hidden">
63
+ <button type="button" id="mobile-menu-button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none">
64
+ <span class="sr-only">Ouvrir menu</span>
65
+ <i class="fas fa-bars"></i>
66
+ </button>
67
+ </div>
68
+ </div>
69
+ </div>
70
+ <!-- Mobile menu -->
71
+ <div id="mobile-menu" class="hidden md:hidden bg-white border-t border-gray-200">
72
+ <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
73
+ <a href="#accueil" class="block px-3 py-2 text-base font-medium text-gray-700 hover:text-gray-900 hover:bg-gray-50">Accueil</a>
74
+ <a href="#exercices" class="block px-3 py-2 text-base font-medium text-gray-700 hover:text-gray-900 hover:bg-gray-50">Exercices</a>
75
+ <a href="#conseils" class="block px-3 py-2 text-base font-medium text-gray-700 hover:text-gray-900 hover:bg-gray-50">Conseils</a>
76
+ <a href="#suivi" class="block px-3 py-2 text-base font-medium text-gray-700 hover:text-gray-900 hover:bg-gray-50">Suivi</a>
77
+ <a href="#temoignages" class="block px-3 py-2 text-base font-medium text-gray-700 hover:text-gray-900 hover:bg-gray-50">Témoignages</a>
78
+ <button class="w-full mt-2 bg-purple-600 hover:bg-purple-700 text-white px-4 py-2 rounded-md text-sm font-medium">
79
+ S'inscrire
80
+ </button>
81
+ </div>
82
+ </div>
83
+ </nav>
84
+
85
+ <!-- Hero Section -->
86
+ <section id="accueil" class="hero-gradient text-white py-20 md:py-32">
87
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
88
+ <div class="md:flex md:items-center md:justify-between">
89
+ <div class="md:w-1/2 mb-10 md:mb-0">
90
+ <h1 class="text-4xl md:text-5xl font-bold leading-tight mb-6">Transformez votre corps en seulement 15 minutes par jour</h1>
91
+ <p class="text-xl mb-8">FlashFitZone vous propose des séances d'entraînement rapides et efficaces, adaptées à votre niveau et à vos objectifs.</p>
92
+ <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4">
93
+ <button class="bg-white text-purple-600 hover:bg-gray-100 px-6 py-3 rounded-md font-medium transition duration-300">
94
+ Commencer maintenant
95
+ </button>
96
+ <button class="border-2 border-white text-white hover:bg-white hover:text-purple-600 px-6 py-3 rounded-md font-medium transition duration-300">
97
+ Voir la démo
98
+ </button>
99
+ </div>
100
+ </div>
101
+ <div class="md:w-1/2 flex justify-center">
102
+ <img src="https://images.unsplash.com/photo-1571019613454-1cb2f99b2d8b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" alt="Personne faisant des exercices" class="rounded-lg shadow-2xl max-w-md w-full">
103
+ </div>
104
+ </div>
105
+ </div>
106
+ </section>
107
+
108
+ <!-- Features Section -->
109
+ <section class="py-16 bg-gray-50">
110
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
111
+ <div class="text-center mb-16">
112
+ <h2 class="text-3xl font-bold text-gray-900 mb-4">Pourquoi choisir FlashFitZone ?</h2>
113
+ <p class="text-xl text-gray-600 max-w-3xl mx-auto">Notre approche unique combine efficacité, rapidité et plaisir pour des résultats durables.</p>
114
+ </div>
115
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
116
+ <div class="bg-white p-8 rounded-lg shadow-md text-center">
117
+ <div class="bg-purple-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-6">
118
+ <i class="fas fa-stopwatch text-purple-600 text-2xl"></i>
119
+ </div>
120
+ <h3 class="text-xl font-bold mb-3">Séances rapides</h3>
121
+ <p class="text-gray-600">Des entraînements de 15 à 30 minutes spécialement conçus pour maximiser vos résultats en un minimum de temps.</p>
122
+ </div>
123
+ <div class="bg-white p-8 rounded-lg shadow-md text-center">
124
+ <div class="bg-purple-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-6">
125
+ <i class="fas fa-chart-line text-purple-600 text-2xl"></i>
126
+ </div>
127
+ <h3 class="text-xl font-bold mb-3">Suivi intelligent</h3>
128
+ <p class="text-gray-600">Notre système suit vos progrès et adapte automatiquement les exercices pour une progression optimale.</p>
129
+ </div>
130
+ <div class="bg-white p-8 rounded-lg shadow-md text-center">
131
+ <div class="bg-purple-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-6">
132
+ <i class="fas fa-user-friends text-purple-600 text-2xl"></i>
133
+ </div>
134
+ <h3 class="text-xl font-bold mb-3">Communauté active</h3>
135
+ <p class="text-gray-600">Rejoignez une communauté motivée et partagez vos progrès, astuces et défis avec d'autres membres.</p>
136
+ </div>
137
+ </div>
138
+ </div>
139
+ </section>
140
+
141
+ <!-- Exercises Section -->
142
+ <section id="exercices" class="py-16">
143
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
144
+ <div class="text-center mb-16">
145
+ <h2 class="text-3xl font-bold text-gray-900 mb-4">Nos Exercices Flash</h2>
146
+ <p class="text-xl text-gray-600 max-w-3xl mx-auto">Des routines courtes mais intenses pour des résultats visibles rapidement.</p>
147
+ </div>
148
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
149
+ <!-- Exercise cards will be populated by JavaScript -->
150
+ </div>
151
+ <div class="text-center mt-12">
152
+ <button class="bg-purple-600 hover:bg-purple-700 text-white px-6 py-3 rounded-md font-medium transition duration-300">
153
+ Voir tous les exercices
154
+ </button>
155
+ </div>
156
+ </div>
157
+ </section>
158
+
159
+ <!-- Tips Section -->
160
+ <section id="conseils" class="py-16 bg-gray-50">
161
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
162
+ <div class="text-center mb-16">
163
+ <h2 class="text-3xl font-bold text-gray-900 mb-4">Conseils Fitness</h2>
164
+ <p class="text-xl text-gray-600 max-w-3xl mx-auto">Nos experts partagent leurs meilleurs conseils pour optimiser vos résultats.</p>
165
+ </div>
166
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
167
+ <div class="bg-white rounded-lg overflow-hidden shadow-md">
168
+ <div class="h-48 bg-purple-100 flex items-center justify-center">
169
+ <i class="fas fa-utensils text-purple-600 text-6xl"></i>
170
+ </div>
171
+ <div class="p-6">
172
+ <h3 class="text-xl font-bold mb-3">Nutrition Flash</h3>
173
+ <p class="text-gray-600 mb-4">Découvrez nos plans nutritionnels rapides à préparer mais parfaitement équilibrés pour soutenir vos efforts.</p>
174
+ <button class="text-purple-600 font-medium hover:text-purple-800 transition duration-300">
175
+ Lire l'article <i class="fas fa-arrow-right ml-1"></i>
176
+ </button>
177
+ </div>
178
+ </div>
179
+ <div class="bg-white rounded-lg overflow-hidden shadow-md">
180
+ <div class="h-48 bg-purple-100 flex items-center justify-center">
181
+ <i class="fas fa-moon text-purple-600 text-6xl"></i>
182
+ </div>
183
+ <div class="p-6">
184
+ <h3 class="text-xl font-bold mb-3">Récupération Express</h3>
185
+ <p class="text-gray-600 mb-4">Apprenez des techniques de récupération rapide pour maximiser vos séances même avec un emploi du temps chargé.</p>
186
+ <button class="text-purple-600 font-medium hover:text-purple-800 transition duration-300">
187
+ Lire l'article <i class="fas fa-arrow-right ml-1"></i>
188
+ </button>
189
+ </div>
190
+ </div>
191
+ </div>
192
+ </div>
193
+ </section>
194
+
195
+ <!-- Progress Tracking -->
196
+ <section id="suivi" class="py-16">
197
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
198
+ <div class="md:flex md:items-center md:justify-between">
199
+ <div class="md:w-1/2 mb-10 md:mb-0">
200
+ <h2 class="text-3xl font-bold text-gray-900 mb-6">Suivez vos progrès en temps réel</h2>
201
+ <p class="text-xl text-gray-600 mb-8">Notre tableau de bord intuitif vous permet de visualiser votre évolution, vos performances et vos objectifs atteints.</p>
202
+ <ul class="space-y-4">
203
+ <li class="flex items-start">
204
+ <div class="flex-shrink-0 bg-purple-100 rounded-full p-2 mr-4">
205
+ <i class="fas fa-check text-purple-600"></i>
206
+ </div>
207
+ <p class="text-gray-700">Historique complet de vos séances</p>
208
+ </li>
209
+ <li class="flex items-start">
210
+ <div class="flex-shrink-0 bg-purple-100 rounded-full p-2 mr-4">
211
+ <i class="fas fa-check text-purple-600"></i>
212
+ </div>
213
+ <p class="text-gray-700">Analyse de vos performances</p>
214
+ </li>
215
+ <li class="flex items-start">
216
+ <div class="flex-shrink-0 bg-purple-100 rounded-full p-2 mr-4">
217
+ <i class="fas fa-check text-purple-600"></i>
218
+ </div>
219
+ <p class="text-gray-700">Suggestions personnalisées</p>
220
+ </li>
221
+ </ul>
222
+ </div>
223
+ <div class="md:w-1/2 flex justify-center">
224
+ <div class="relative w-64 h-64">
225
+ <svg class="w-full h-full" viewBox="0 0 100 100">
226
+ <!-- Background circle -->
227
+ <circle cx="50" cy="50" r="45" fill="none" stroke="#e5e7eb" stroke-width="8"/>
228
+ <!-- Progress circle -->
229
+ <circle id="progress-ring" cx="50" cy="50" r="45" fill="none" stroke="#667eea" stroke-width="8" stroke-dasharray="283" stroke-dashoffset="70" class="progress-ring__circle"/>
230
+ </svg>
231
+ <div class="absolute inset-0 flex items-center justify-center flex-col">
232
+ <span class="text-3xl font-bold text-gray-900">75%</span>
233
+ <span class="text-gray-600">Objectif hebdo</span>
234
+ </div>
235
+ </div>
236
+ </div>
237
+ </div>
238
+ </div>
239
+ </section>
240
+
241
+ <!-- Testimonials -->
242
+ <section id="temoignages" class="py-16 bg-gray-50">
243
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
244
+ <div class="text-center mb-16">
245
+ <h2 class="text-3xl font-bold text-gray-900 mb-4">Ils ont transformé leur vie</h2>
246
+ <p class="text-xl text-gray-600 max-w-3xl mx-auto">Découvrez ce que nos membres disent de leur expérience FlashFitZone.</p>
247
+ </div>
248
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
249
+ <!-- Testimonial cards will be populated by JavaScript -->
250
+ </div>
251
+ </div>
252
+ </section>
253
+
254
+ <!-- CTA Section -->
255
+ <section class="py-16 bg-purple-600 text-white">
256
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
257
+ <h2 class="text-3xl font-bold mb-6">Prêt à transformer votre routine fitness ?</h2>
258
+ <p class="text-xl mb-8 max-w-3xl mx-auto">Rejoignez des milliers de membres satisfaits et commencez à voir des résultats dès la première semaine.</p>
259
+ <div class="flex flex-col sm:flex-row justify-center space-y-4 sm:space-y-0 sm:space-x-4">
260
+ <button class="bg-white text-purple-600 hover:bg-gray-100 px-8 py-4 rounded-md font-medium text-lg transition duration-300">
261
+ Essai gratuit 7 jours
262
+ </button>
263
+ <button class="border-2 border-white hover:bg-white hover:text-purple-600 px-8 py-4 rounded-md font-medium text-lg transition duration-300">
264
+ Voir les offres
265
+ </button>
266
+ </div>
267
+ </div>
268
+ </section>
269
+
270
+ <!-- Footer -->
271
+ <footer class="bg-gray-900 text-white py-12">
272
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
273
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
274
+ <div>
275
+ <div class="flex items-center mb-4">
276
+ <i class="fas fa-bolt text-purple-400 text-2xl mr-2"></i>
277
+ <span class="text-xl font-bold">FlashFitZone</span>
278
+ </div>
279
+ <p class="text-gray-400">Votre partenaire fitness pour des résultats rapides et durables.</p>
280
+ <div class="flex space-x-4 mt-6">
281
+ <a href="#" class="text-gray-400 hover:text-white transition duration-300">
282
+ <i class="fab fa-facebook-f"></i>
283
+ </a>
284
+ <a href="#" class="text-gray-400 hover:text-white transition duration-300">
285
+ <i class="fab fa-instagram"></i>
286
+ </a>
287
+ <a href="#" class="text-gray-400 hover:text-white transition duration-300">
288
+ <i class="fab fa-twitter"></i>
289
+ </a>
290
+ <a href="#" class="text-gray-400 hover:text-white transition duration-300">
291
+ <i class="fab fa-youtube"></i>
292
+ </a>
293
+ </div>
294
+ </div>
295
+ <div>
296
+ <h3 class="text-lg font-semibold mb-4">Navigation</h3>
297
+ <ul class="space-y-2">
298
+ <li><a href="#accueil" class="text-gray-400 hover:text-white transition duration-300">Accueil</a></li>
299
+ <li><a href="#exercices" class="text-gray-400 hover:text-white transition duration-300">Exercices</a></li>
300
+ <li><a href="#conseils" class="text-gray-400 hover:text-white transition duration-300">Conseils</a></li>
301
+ <li><a href="#suivi" class="text-gray-400 hover:text-white transition duration-300">Suivi</a></li>
302
+ <li><a href="#temoignages" class="text-gray-400 hover:text-white transition duration-300">Témoignages</a></li>
303
+ </ul>
304
+ </div>
305
+ <div>
306
+ <h3 class="text-lg font-semibold mb-4">Entreprise</h3>
307
+ <ul class="space-y-2">
308
+ <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">À propos</a></li>
309
+ <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Carrières</a></li>
310
+ <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Blog</a></li>
311
+ <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Presse</a></li>
312
+ </ul>
313
+ </div>
314
+ <div>
315
+ <h3 class="text-lg font-semibold mb-4">Contact</h3>
316
+ <ul class="space-y-2">
317
+ <li class="text-gray-400">contact@flashfitzone.com</li>
318
+ <li class="text-gray-400">+33 1 23 45 67 89</li>
319
+ <li class="text-gray-400">123 Rue du Fitness<br>75015 Paris, France</li>
320
+ </ul>
321
+ </div>
322
+ </div>
323
+ <div class="border-t border-gray-800 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center">
324
+ <p class="text-gray-400 mb-4 md:mb-0">© 2023 FlashFitZone. Tous droits réservés.</p>
325
+ <div class="flex space-x-6">
326
+ <a href="#" class="text-gray-400 hover:text-white transition duration-300">Confidentialité</a>
327
+ <a href="#" class="text-gray-400 hover:text-white transition duration-300">Conditions</a>
328
+ <a href="#" class="text-gray-400 hover:text-white transition duration-300">Cookies</a>
329
+ </div>
330
+ </div>
331
+ </div>
332
+ </footer>
333
+
334
+ <script>
335
+ // Mobile menu toggle
336
+ document.getElementById('mobile-menu-button').addEventListener('click', function() {
337
+ const menu = document.getElementById('mobile-menu');
338
+ menu.classList.toggle('hidden');
339
+ });
340
+
341
+ // Exercise data
342
+ const exercises = [
343
+ {
344
+ title: "Flash Cardio",
345
+ duration: "15 min",
346
+ intensity: "Moyenne",
347
+ calories: "150-200 kcal",
348
+ icon: "fa-heart-pulse",
349
+ desc: "Une séance cardio rapide pour brûler des calories et améliorer votre endurance."
350
+ },
351
+ {
352
+ title: "Force Express",
353
+ duration: "20 min",
354
+ intensity: "Élevée",
355
+ calories: "120-180 kcal",
356
+ icon: "fa-dumbbell",
357
+ desc: "Renforcement musculaire intensif avec des mouvements composés pour des résultats rapides."
358
+ },
359
+ {
360
+ title: "Yoga Flash",
361
+ duration: "15 min",
362
+ intensity: "Douce",
363
+ calories: "80-120 kcal",
364
+ icon: "fa-spa",
365
+ desc: "Séquence de yoga rapide pour améliorer flexibilité et récupération."
366
+ },
367
+ {
368
+ title: "Abdos Foudroyants",
369
+ duration: "10 min",
370
+ intensity: "Élevée",
371
+ calories: "100-150 kcal",
372
+ icon: "fa-fire",
373
+ desc: "Circuit spécial abdos pour un ventre tonique en un temps record."
374
+ },
375
+ {
376
+ title: "HIIT Éclair",
377
+ duration: "15 min",
378
+ intensity: "Très élevée",
379
+ calories: "200-250 kcal",
380
+ icon: "fa-bolt",
381
+ desc: "Entraînement par intervalles à haute intensité pour maximiser la combustion des graisses."
382
+ },
383
+ {
384
+ title: "Mobilité Flash",
385
+ duration: "10 min",
386
+ intensity: "Douce",
387
+ calories: "50-80 kcal",
388
+ icon: "fa-person-walking",
389
+ desc: "Exercices de mobilité pour améliorer vos mouvements au quotidien."
390
+ }
391
+ ];
392
+
393
+ // Testimonials data
394
+ const testimonials = [
395
+ {
396
+ name: "Sophie Martin",
397
+ role: "Membre depuis 6 mois",
398
+ quote: "J'ai perdu 8 kg en 3 mois avec les séances FlashFitZone. Parfait pour mon emploi du temps de maman active!",
399
+ avatar: "https://randomuser.me/api/portraits/women/44.jpg"
400
+ },
401
+ {
402
+ name: "Thomas Leroy",
403
+ role: "Membre depuis 1 an",
404
+ quote: "Enfin un programme qui respecte mon temps. Je me sens plus en forme que jamais avec seulement 20 min par jour.",
405
+ avatar: "https://randomuser.me/api/portraits/men/32.jpg"
406
+ },
407
+ {
408
+ name: "Amélie Dubois",
409
+ role: "Membre depuis 3 mois",
410
+ quote: "Le suivi des progrès est incroyable. Voir mes améliorations me motive à continuer chaque jour.",
411
+ avatar: "https://randomuser.me/api/portraits/women/68.jpg"
412
+ }
413
+ ];
414
+
415
+ // Populate exercises
416
+ const exercisesContainer = document.querySelector('#exercices .grid');
417
+ exercises.forEach(exercise => {
418
+ const exerciseCard = document.createElement('div');
419
+ exerciseCard.className = 'exercise-card bg-white rounded-lg overflow-hidden shadow-md transition duration-300';
420
+ exerciseCard.innerHTML = `
421
+ <div class="h-48 bg-purple-100 flex items-center justify-center">
422
+ <i class="fas ${exercise.icon} text-purple-600 text-6xl"></i>
423
+ </div>
424
+ <div class="p-6">
425
+ <div class="flex justify-between items-start mb-2">
426
+ <h3 class="text-xl font-bold">${exercise.title}</h3>
427
+ <span class="bg-purple-100 text-purple-800 text-xs font-semibold px-2.5 py-0.5 rounded">${exercise.duration}</span>
428
+ </div>
429
+ <div class="flex items-center text-sm text-gray-600 mb-3">
430
+ <span class="mr-4"><i class="fas fa-bolt mr-1"></i> ${exercise.intensity}</span>
431
+ <span><i class="fas fa-fire mr-1"></i> ${exercise.calories}</span>
432
+ </div>
433
+ <p class="text-gray-600 mb-4">${exercise.desc}</p>
434
+ <button class="text-purple-600 font-medium hover:text-purple-800 transition duration-300 flex items-center">
435
+ Voir la routine <i class="fas fa-arrow-right ml-2"></i>
436
+ </button>
437
+ </div>
438
+ `;
439
+ exercisesContainer.appendChild(exerciseCard);
440
+ });
441
+
442
+ // Populate testimonials
443
+ const testimonialsContainer = document.querySelector('#temoignages .grid');
444
+ testimonials.forEach(testimonial => {
445
+ const testimonialCard = document.createElement('div');
446
+ testimonialCard.className = 'testimonial-card bg-white rounded-lg shadow-md p-6';
447
+ testimonialCard.innerHTML = `
448
+ <div class="flex items-center mb-4">
449
+ <img src="${testimonial.avatar}" alt="${testimonial.name}" class="w-12 h-12 rounded-full mr-4">
450
+ <div>
451
+ <h4 class="font-bold">${testimonial.name}</h4>
452
+ <p class="text-purple-600 text-sm">${testimonial.role}</p>
453
+ </div>
454
+ </div>
455
+ <p class="text-gray-600 italic">"${testimonial.quote}"</p>
456
+ <div class="mt-4 flex text-yellow-400">
457
+ <i class="fas fa-star"></i>
458
+ <i class="fas fa-star"></i>
459
+ <i class="fas fa-star"></i>
460
+ <i class="fas fa-star"></i>
461
+ <i class="fas fa-star"></i>
462
+ </div>
463
+ `;
464
+ testimonialsContainer.appendChild(testimonialCard);
465
+ });
466
+
467
+ // Animate progress ring
468
+ function animateProgressRing() {
469
+ const progressRing = document.getElementById('progress-ring');
470
+ let offset = 283 * (1 - 0.75); // 75% progress
471
+ progressRing.style.strokeDashoffset = offset;
472
+ }
473
+
474
+ // Smooth scrolling for anchor links
475
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
476
+ anchor.addEventListener('click', function(e) {
477
+ e.preventDefault();
478
+
479
+ const targetId = this.getAttribute('href');
480
+ const targetElement = document.querySelector(targetId);
481
+
482
+ if (targetElement) {
483
+ window.scrollTo({
484
+ top: targetElement.offsetTop - 80,
485
+ behavior: 'smooth'
486
+ });
487
+
488
+ // Close mobile menu if open
489
+ const mobileMenu = document.getElementById('mobile-menu');
490
+ if (!mobileMenu.classList.contains('hidden')) {
491
+ mobileMenu.classList.add('hidden');
492
+ }
493
+ }
494
+ });
495
+ });
496
+
497
+ // Initialize animations when page loads
498
+ window.addEventListener('load', () => {
499
+ animateProgressRing();
500
+ });
501
+ </script>
502
+ <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=martinez59/flashfitzone" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
503
+ </html>