Hugging Face's logo

Spaces:
martinez59
/
fitness
Running

App Files Community
martinez59 commited on
Commit
fe457d6
·
verified ·
1 Parent(s): 185aa91

Créer moi un site web dynamique nommé FlashFitZone fitness, une plateforme qui propose des exercices rapide, des conseils fitness, et un suivi des progrès, avec un design moderne et facile à utiliser. En plus de cela tu ajoutes des témoignages des clients satisfaits. Et pour plus d'informations de s'abonner et de laisser une message sur notre compte GitHub ( FlashFitZone ) et notre compte Tik tok ( tiktok.com/@flashfitzone4) - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +708 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Fitness
3
- emoji: 👀
4
- colorFrom: red
5
- colorTo: blue
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: fitness
3
+ emoji: 🐳
4
+ colorFrom: pink
5
+ colorTo: gray
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,708 @@
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 - Fitness Rapide et Efficace</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.5s;
19
+ transform: rotate(-90deg);
20
+ transform-origin: 50% 50%;
21
+ }
22
+ #animated-counter {
23
+ transition: all 1s ease-out;
24
+ }
25
+ </style>
26
+ </head>
27
+ <body class="font-sans bg-gray-50">
28
+ <!-- Navigation -->
29
+ <nav class="bg-white shadow-lg sticky top-0 z-50">
30
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
31
+ <div class="flex justify-between h-16">
32
+ <div class="flex items-center">
33
+ <div class="flex-shrink-0 flex items-center">
34
+ <i class="fas fa-bolt text-purple-600 text-2xl mr-2"></i>
35
+ <span class="text-xl font-bold text-gray-900">FlashFitZone</span>
36
+ </div>
37
+ </div>
38
+ <div class="hidden md:ml-6 md:flex md:items-center md:space-x-8">
39
+ <a href="#home" class="text-gray-900 hover:text-purple-600 px-3 py-2 text-sm font-medium">Accueil</a>
40
+ <a href="#exercises" class="text-gray-900 hover:text-purple-600 px-3 py-2 text-sm font-medium">Exercices</a>
41
+ <a href="#tips" class="text-gray-900 hover:text-purple-600 px-3 py-2 text-sm font-medium">Conseils</a>
42
+ <a href="#progress" class="text-gray-900 hover:text-purple-600 px-3 py-2 text-sm font-medium">Progrès</a>
43
+ <a href="#testimonials" class="text-gray-900 hover:text-purple-600 px-3 py-2 text-sm font-medium">Témoignages</a>
44
+ <a href="#contact" class="bg-purple-600 text-white px-4 py-2 rounded-md text-sm font-medium hover:bg-purple-700 transition duration-300">S'abonner</a>
45
+ </div>
46
+ <div class="-mr-2 flex items-center md:hidden">
47
+ <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">
48
+ <i class="fas fa-bars"></i>
49
+ </button>
50
+ </div>
51
+ </div>
52
+ </div>
53
+ <!-- Mobile menu -->
54
+ <div id="mobile-menu" class="hidden md:hidden bg-white border-t border-gray-200">
55
+ <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
56
+ <a href="#home" class="block px-3 py-2 rounded-md text-base font-medium text-gray-900 hover:text-purple-600 hover:bg-gray-50">Accueil</a>
57
+ <a href="#exercises" class="block px-3 py-2 rounded-md text-base font-medium text-gray-900 hover:text-purple-600 hover:bg-gray-50">Exercices</a>
58
+ <a href="#tips" class="block px-3 py-2 rounded-md text-base font-medium text-gray-900 hover:text-purple-600 hover:bg-gray-50">Conseils</a>
59
+ <a href="#progress" class="block px-3 py-2 rounded-md text-base font-medium text-gray-900 hover:text-purple-600 hover:bg-gray-50">Progrès</a>
60
+ <a href="#testimonials" class="block px-3 py-2 rounded-md text-base font-medium text-gray-900 hover:text-purple-600 hover:bg-gray-50">Témoignages</a>
61
+ <a href="#contact" class="block px-3 py-2 rounded-md text-base font-medium text-white bg-purple-600 hover:bg-purple-700">S'abonner</a>
62
+ </div>
63
+ </div>
64
+ </nav>
65
+
66
+ <!-- Hero Section -->
67
+ <section id="home" class="hero-gradient text-white py-20">
68
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
69
+ <div class="lg:flex lg:items-center lg:justify-between">
70
+ <div class="lg:w-1/2">
71
+ <h1 class="text-4xl font-extrabold tracking-tight sm:text-5xl lg:text-6xl mb-6">
72
+ Transformez votre corps en <span class="text-yellow-300">quelques minutes</span> par jour
73
+ </h1>
74
+ <p class="text-xl text-purple-100 mb-8">
75
+ FlashFitZone vous propose des séances d'entraînement rapides et efficaces, adaptées à votre emploi du temps chargé.
76
+ </p>
77
+ <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4">
78
+ <a href="#exercises" class="bg-white text-purple-600 px-6 py-3 rounded-md text-lg font-semibold hover:bg-gray-100 transition duration-300 text-center">
79
+ Commencer maintenant
80
+ </a>
81
+ <a href="#contact" class="border-2 border-white text-white px-6 py-3 rounded-md text-lg font-semibold hover:bg-white hover:text-purple-600 transition duration-300 text-center">
82
+ Essai gratuit
83
+ </a>
84
+ </div>
85
+ </div>
86
+ <div class="lg:w-1/2 mt-12 lg:mt-0">
87
+ <img src="https://images.unsplash.com/photo-1571019613454-1cb2f99b2d8b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Fitness" class="rounded-lg shadow-2xl transform hover:scale-105 transition duration-500">
88
+ </div>
89
+ </div>
90
+ </div>
91
+ </section>
92
+
93
+ <!-- Stats Section -->
94
+ <section class="bg-white py-12">
95
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
96
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8 text-center">
97
+ <div class="p-6 border border-gray-200 rounded-lg hover:shadow-lg transition duration-300">
98
+ <div class="text-5xl font-bold text-purple-600 mb-2" id="animated-counter" data-target="50000">0</div>
99
+ <div class="text-gray-600">Utilisateurs actifs</div>
100
+ </div>
101
+ <div class="p-6 border border-gray-200 rounded-lg hover:shadow-lg transition duration-300">
102
+ <div class="text-5xl font-bold text-purple-600 mb-2">15</div>
103
+ <div class="text-gray-600">Minutes par séance</div>
104
+ </div>
105
+ <div class="p-6 border border-gray-200 rounded-lg hover:shadow-lg transition duration-300">
106
+ <div class="text-5xl font-bold text-purple-600 mb-2">97%</div>
107
+ <div class="text-gray-600">Satisfaction client</div>
108
+ </div>
109
+ </div>
110
+ </div>
111
+ </section>
112
+
113
+ <!-- Exercises Section -->
114
+ <section id="exercises" class="py-16 bg-gray-50">
115
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
116
+ <div class="text-center mb-12">
117
+ <h2 class="text-3xl font-extrabold text-gray-900 sm:text-4xl">
118
+ Nos Exercices Flash
119
+ </h2>
120
+ <p class="mt-4 text-xl text-gray-600">
121
+ Des séances rapides et efficaces pour des résultats visibles
122
+ </p>
123
+ </div>
124
+
125
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
126
+ <!-- Exercise Card 1 -->
127
+ <div class="exercise-card bg-white rounded-lg overflow-hidden shadow-md transition duration-300">
128
+ <div class="relative h-48 overflow-hidden">
129
+ <img src="https://images.unsplash.com/photo-1571019614242-c955c9f6d0d5?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="HIIT" class="w-full h-full object-cover">
130
+ <div class="absolute top-2 right-2 bg-purple-600 text-white px-2 py-1 rounded-md text-xs font-bold">
131
+ 15 min
132
+ </div>
133
+ </div>
134
+ <div class="p-6">
135
+ <h3 class="text-xl font-bold text-gray-900 mb-2">HIIT Flash</h3>
136
+ <p class="text-gray-600 mb-4">Entraînement par intervalles à haute intensité pour brûler les graisses rapidement.</p>
137
+ <div class="flex justify-between items-center">
138
+ <span class="text-sm font-medium text-purple-600">Niveau: Intermédiaire</span>
139
+ <button class="text-purple-600 hover:text-purple-800 font-medium">Démarrer <i class="fas fa-arrow-right ml-1"></i></button>
140
+ </div>
141
+ </div>
142
+ </div>
143
+
144
+ <!-- Exercise Card 2 -->
145
+ <div class="exercise-card bg-white rounded-lg overflow-hidden shadow-md transition duration-300">
146
+ <div class="relative h-48 overflow-hidden">
147
+ <img src="https://images.unsplash.com/photo-1538805060514-97d9cc17730c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1374&q=80" alt="Yoga" class="w-full h-full object-cover">
148
+ <div class="absolute top-2 right-2 bg-purple-600 text-white px-2 py-1 rounded-md text-xs font-bold">
149
+ 10 min
150
+ </div>
151
+ </div>
152
+ <div class="p-6">
153
+ <h3 class="text-xl font-bold text-gray-900 mb-2">Yoga Éclair</h3>
154
+ <p class="text-gray-600 mb-4">Séance de yoga rapide pour améliorer la flexibilité et réduire le stress.</p>
155
+ <div class="flex justify-between items-center">
156
+ <span class="text-sm font-medium text-purple-600">Niveau: Débutant</span>
157
+ <button class="text-purple-600 hover:text-purple-800 font-medium">Démarrer <i class="fas fa-arrow-right ml-1"></i></button>
158
+ </div>
159
+ </div>
160
+ </div>
161
+
162
+ <!-- Exercise Card 3 -->
163
+ <div class="exercise-card bg-white rounded-lg overflow-hidden shadow-md transition duration-300">
164
+ <div class="relative h-48 overflow-hidden">
165
+ <img src="https://images.unsplash.com/photo-1571019613454-1cb2f99b2d8b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Abdos" class="w-full h-full object-cover">
166
+ <div class="absolute top-2 right-2 bg-purple-600 text-white px-2 py-1 rounded-md text-xs font-bold">
167
+ 7 min
168
+ </div>
169
+ </div>
170
+ <div class="p-6">
171
+ <h3 class="text-xl font-bold text-gray-900 mb-2">Abdos Express</h3>
172
+ <p class="text-gray-600 mb-4">Renforcement rapide de la ceinture abdominale pour un ventre plat.</p>
173
+ <div class="flex justify-between items-center">
174
+ <span class="text-sm font-medium text-purple-600">Niveau: Tous niveaux</span>
175
+ <button class="text-purple-600 hover:text-purple-800 font-medium">Démarrer <i class="fas fa-arrow-right ml-1"></i></button>
176
+ </div>
177
+ </div>
178
+ </div>
179
+ </div>
180
+
181
+ <div class="mt-12 text-center">
182
+ <a href="#" class="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-md shadow-sm text-white bg-purple-600 hover:bg-purple-700 transition duration-300">
183
+ Voir tous les exercices <i class="fas fa-chevron-right ml-2"></i>
184
+ </a>
185
+ </div>
186
+ </div>
187
+ </section>
188
+
189
+ <!-- Tips Section -->
190
+ <section id="tips" class="py-16 bg-white">
191
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
192
+ <div class="text-center mb-12">
193
+ <h2 class="text-3xl font-extrabold text-gray-900 sm:text-4xl">
194
+ Conseils Fitness
195
+ </h2>
196
+ <p class="mt-4 text-xl text-gray-600">
197
+ Des astuces professionnelles pour optimiser vos résultats
198
+ </p>
199
+ </div>
200
+
201
+ <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
202
+ <div class="bg-gray-50 p-8 rounded-lg shadow-sm">
203
+ <div class="flex items-center mb-4">
204
+ <div class="flex-shrink-0 bg-purple-100 p-3 rounded-full">
205
+ <i class="fas fa-glass-whiskey text-purple-600 text-xl"></i>
206
+ </div>
207
+ <h3 class="ml-3 text-lg font-medium text-gray-900">Hydratation</h3>
208
+ </div>
209
+ <p class="text-gray-600">
210
+ Buvez au moins 2 litres d'eau par jour pour optimiser vos performances et votre récupération. Une bonne hydratation améliore l'endurance et réduit les risques de blessures.
211
+ </p>
212
+ </div>
213
+
214
+ <div class="bg-gray-50 p-8 rounded-lg shadow-sm">
215
+ <div class="flex items-center mb-4">
216
+ <div class="flex-shrink-0 bg-purple-100 p-3 rounded-full">
217
+ <i class="fas fa-utensils text-purple-600 text-xl"></i>
218
+ </div>
219
+ <h3 class="ml-3 text-lg font-medium text-gray-900">Nutrition</h3>
220
+ </div>
221
+ <p class="text-gray-600">
222
+ Privilégiez les protéines maigres, les glucides complexes et les graisses saines. Un repas équilibré dans les 30 minutes après l'entraînement optimise la récupération musculaire.
223
+ </p>
224
+ </div>
225
+
226
+ <div class="bg-gray-50 p-8 rounded-lg shadow-sm">
227
+ <div class="flex items-center mb-4">
228
+ <div class="flex-shrink-0 bg-purple-100 p-3 rounded-full">
229
+ <i class="fas fa-bed text-purple-600 text-xl"></i>
230
+ </div>
231
+ <h3 class="ml-3 text-lg font-medium text-gray-900">Sommeil</h3>
232
+ </div>
233
+ <p class="text-gray-600">
234
+ 7 à 9 heures de sommeil de qualité sont essentielles pour la récupération musculaire et la performance. Le sommeil profond stimule la production d'hormone de croissance.
235
+ </p>
236
+ </div>
237
+
238
+ <div class="bg-gray-50 p-8 rounded-lg shadow-sm">
239
+ <div class="flex items-center mb-4">
240
+ <div class="flex-shrink-0 bg-purple-100 p-3 rounded-full">
241
+ <i class="fas fa-dumbbell text-purple-600 text-xl"></i>
242
+ </div>
243
+ <h3 class="ml-3 text-lg font-medium text-gray-900">Technique</h3>
244
+ </div>
245
+ <p class="text-gray-600">
246
+ La qualité prime sur la quantité. Mieux vaut faire moins de répétitions avec une parfaite exécution que beaucoup avec une mauvaise forme, qui peut mener à des blessures.
247
+ </p>
248
+ </div>
249
+ </div>
250
+ </div>
251
+ </section>
252
+
253
+ <!-- Progress Tracking Section -->
254
+ <section id="progress" class="py-16 bg-purple-50">
255
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
256
+ <div class="lg:flex lg:items-center lg:justify-between">
257
+ <div class="lg:w-1/2 mb-12 lg:mb-0">
258
+ <h2 class="text-3xl font-extrabold text-gray-900 sm:text-4xl mb-6">
259
+ Suivez vos progrès
260
+ </h2>
261
+ <p class="text-xl text-gray-600 mb-8">
262
+ Notre tableau de bord intuitif vous permet de visualiser votre évolution et de rester motivé.
263
+ </p>
264
+ <ul class="space-y-4">
265
+ <li class="flex items-start">
266
+ <div class="flex-shrink-0 mt-1">
267
+ <div class="flex items-center justify-center h-6 w-6 rounded-full bg-purple-600 text-white">
268
+ <i class="fas fa-check text-xs"></i>
269
+ </div>
270
+ </div>
271
+ <p class="ml-3 text-lg text-gray-700">Historique complet de vos séances</p>
272
+ </li>
273
+ <li class="flex items-start">
274
+ <div class="flex-shrink-0 mt-1">
275
+ <div class="flex items-center justify-center h-6 w-6 rounded-full bg-purple-600 text-white">
276
+ <i class="fas fa-check text-xs"></i>
277
+ </div>
278
+ </div>
279
+ <p class="ml-3 text-lg text-gray-700">Graphiques d'évolution des performances</p>
280
+ </li>
281
+ <li class="flex items-start">
282
+ <div class="flex-shrink-0 mt-1">
283
+ <div class="flex items-center justify-center h-6 w-6 rounded-full bg-purple-600 text-white">
284
+ <i class="fas fa-check text-xs"></i>
285
+ </div>
286
+ </div>
287
+ <p class="ml-3 text-lg text-gray-700">Objectifs personnalisés et rappels</p>
288
+ </li>
289
+ </ul>
290
+ </div>
291
+ <div class="lg:w-1/2">
292
+ <div class="bg-white p-8 rounded-lg shadow-lg">
293
+ <h3 class="text-xl font-bold text-gray-900 mb-6">Vos progrès cette semaine</h3>
294
+
295
+ <div class="flex justify-between mb-8">
296
+ <div class="text-center">
297
+ <div class="relative w-20 h-20 mx-auto mb-2">
298
+ <svg class="w-full h-full" viewBox="0 0 36 36">
299
+ <circle cx="18" cy="18" r="16" fill="none" stroke="#e6e6e6" stroke-width="2"></circle>
300
+ <circle cx="18" cy="18" r="16" fill="none" stroke="#8b5cf6" stroke-width="2" stroke-dasharray="80 100" stroke-dashoffset="0" class="progress-ring__circle"></circle>
301
+ <text x="18" y="20.5" text-anchor="middle" font-size="10" fill="#8b5cf6" font-weight="bold">80%</text>
302
+ </svg>
303
+ </div>
304
+ <div class="text-sm font-medium text-gray-600">Séances complétées</div>
305
+ </div>
306
+
307
+ <div class="text-center">
308
+ <div class="relative w-20 h-20 mx-auto mb-2">
309
+ <svg class="w-full h-full" viewBox="0 0 36 36">
310
+ <circle cx="18" cy="18" r="16" fill="none" stroke="#e6e6e6" stroke-width="2"></circle>
311
+ <circle cx="18" cy="18" r="16" fill="none" stroke="#8b5cf6" stroke-width="2" stroke-dasharray="65 100" stroke-dashoffset="0" class="progress-ring__circle"></circle>
312
+ <text x="18" y="20.5" text-anchor="middle" font-size="10" fill="#8b5cf6" font-weight="bold">65%</text>
313
+ </svg>
314
+ </div>
315
+ <div class="text-sm font-medium text-gray-600">Objectif calories</div>
316
+ </div>
317
+
318
+ <div class="text-center">
319
+ <div class="relative w-20 h-20 mx-auto mb-2">
320
+ <svg class="w-full h-full" viewBox="0 0 36 36">
321
+ <circle cx="18" cy="18" r="16" fill="none" stroke="#e6e6e6" stroke-width="2"></circle>
322
+ <circle cx="18" cy="18" r="16" fill="none" stroke="#8b5cf6" stroke-width="2" stroke-dasharray="90 100" stroke-dashoffset="0" class="progress-ring__circle"></circle>
323
+ <text x="18" y="20.5" text-anchor="middle" font-size="10" fill="#8b5cf6" font-weight="bold">90%</text>
324
+ </svg>
325
+ </div>
326
+ <div class="text-sm font-medium text-gray-600">Niveau d'énergie</div>
327
+ </div>
328
+ </div>
329
+
330
+ <div class="mb-6">
331
+ <div class="flex justify-between mb-1">
332
+ <span class="text-sm font-medium text-gray-700">Prochain objectif : 10 séances</span>
333
+ <span class="text-sm font-medium text-purple-600">6/10</span>
334
+ </div>
335
+ <div class="w-full bg-gray-200 rounded-full h-2.5">
336
+ <div class="bg-purple-600 h-2.5 rounded-full" style="width: 60%"></div>
337
+ </div>
338
+ </div>
339
+
340
+ <button class="w-full bg-purple-600 text-white py-2 px-4 rounded-md hover:bg-purple-700 transition duration-300 font-medium">
341
+ Voir le détail des progrès
342
+ </button>
343
+ </div>
344
+ </div>
345
+ </div>
346
+ </div>
347
+ </section>
348
+
349
+ <!-- Testimonials Section -->
350
+ <section id="testimonials" class="py-16 bg-white">
351
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
352
+ <div class="text-center mb-12">
353
+ <h2 class="text-3xl font-extrabold text-gray-900 sm:text-4xl">
354
+ Ils ont transformé leur corps avec FlashFitZone
355
+ </h2>
356
+ <p class="mt-4 text-xl text-gray-600">
357
+ Découvrez les témoignages de nos membres satisfaits
358
+ </p>
359
+ </div>
360
+
361
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
362
+ <!-- Testimonial 1 -->
363
+ <div class="bg-gray-50 p-8 rounded-lg shadow-sm hover:shadow-md transition duration-300">
364
+ <div class="flex items-center mb-4">
365
+ <img class="w-12 h-12 rounded-full object-cover" src="https://randomuser.me/api/portraits/women/43.jpg" alt="Sarah">
366
+ <div class="ml-4">
367
+ <h4 class="text-lg font-bold text-gray-900">Sarah L.</h4>
368
+ <div class="flex text-yellow-400">
369
+ <i class="fas fa-star"></i>
370
+ <i class="fas fa-star"></i>
371
+ <i class="fas fa-star"></i>
372
+ <i class="fas fa-star"></i>
373
+ <i class="fas fa-star"></i>
374
+ </div>
375
+ </div>
376
+ </div>
377
+ <p class="text-gray-600 italic">
378
+ "En tant que mère de famille occupée, je n'avais pas le temps pour de longues séances de sport. FlashFitZone a changé ma vie avec des exercices rapides et efficaces. J'ai perdu 8 kg en 3 mois !"
379
+ </p>
380
+ </div>
381
+
382
+ <!-- Testimonial 2 -->
383
+ <div class="bg-gray-50 p-8 rounded-lg shadow-sm hover:shadow-md transition duration-300">
384
+ <div class="flex items-center mb-4">
385
+ <img class="w-12 h-12 rounded-full object-cover" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Thomas">
386
+ <div class="ml-4">
387
+ <h4 class="text-lg font-bold text-gray-900">Thomas P.</h4>
388
+ <div class="flex text-yellow-400">
389
+ <i class="fas fa-star"></i>
390
+ <i class="fas fa-star"></i>
391
+ <i class="fas fa-star"></i>
392
+ <i class="fas fa-star"></i>
393
+ <i class="fas fa-star"></i>
394
+ </div>
395
+ </div>
396
+ </div>
397
+ <p class="text-gray-600 italic">
398
+ "Je voyage beaucoup pour mon travail et je peux emporter FlashFitZone partout avec moi. Les séances de 15 minutes me permettent de rester en forme même dans les chambres d'hôtel. Résultats impressionnants !"
399
+ </p>
400
+ </div>
401
+
402
+ <!-- Testimonial 3 -->
403
+ <div class="bg-gray-50 p-8 rounded-lg shadow-sm hover:shadow-md transition duration-300">
404
+ <div class="flex items-center mb-4">
405
+ <img class="w-12 h-12 rounded-full object-cover" src="https://randomuser.me/api/portraits/women/65.jpg" alt="Emma">
406
+ <div class="ml-4">
407
+ <h4 class="text-lg font-bold text-gray-900">Emma D.</h4>
408
+ <div class="flex text-yellow-400">
409
+ <i class="fas fa-star"></i>
410
+ <i class="fas fa-star"></i>
411
+ <i class="fas fa-star"></i>
412
+ <i class="fas fa-star"></i>
413
+ <i class="fas fa-star-half-alt"></i>
414
+ </div>
415
+ </div>
416
+ </div>
417
+ <p class="text-gray-600 italic">
418
+ "Après mon accouchement, je voulais retrouver la forme mais sans pression. Les exercices adaptés de FlashFitZone m'ont permis de me remettre en douceur. Je me sens mieux dans mon corps qu'avant ma grossesse !"
419
+ </p>
420
+ </div>
421
+ </div>
422
+
423
+ <div class="mt-12 text-center">
424
+ <a href="#" class="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-md shadow-sm text-white bg-purple-600 hover:bg-purple-700 transition duration-300">
425
+ Lire plus de témoignages <i class="fas fa-chevron-right ml-2"></i>
426
+ </a>
427
+ </div>
428
+ </div>
429
+ </section>
430
+
431
+ <!-- CTA Section -->
432
+ <section class="py-16 bg-purple-600 text-white">
433
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
434
+ <h2 class="text-3xl font-extrabold sm:text-4xl mb-6">
435
+ Prêt à transformer votre corps ?
436
+ </h2>
437
+ <p class="text-xl text-purple-100 mb-8 max-w-3xl mx-auto">
438
+ Rejoignez notre communauté de plus de 50 000 membres et commencez votre parcours fitness dès aujourd'hui.
439
+ </p>
440
+ <div class="flex flex-col sm:flex-row justify-center space-y-4 sm:space-y-0 sm:space-x-4">
441
+ <a href="#contact" class="bg-white text-purple-600 px-8 py-3 rounded-md text-lg font-semibold hover:bg-gray-100 transition duration-300">
442
+ Essai gratuit 7 jours
443
+ </a>
444
+ <a href="#exercises" class="border-2 border-white text-white px-8 py-3 rounded-md text-lg font-semibold hover:bg-white hover:text-purple-600 transition duration-300">
445
+ Voir les exercices
446
+ </a>
447
+ </div>
448
+ </div>
449
+ </section>
450
+
451
+ <!-- Contact Section -->
452
+ <section id="contact" class="py-16 bg-white">
453
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
454
+ <div class="lg:grid lg:grid-cols-2 lg:gap-8">
455
+ <div class="mb-12 lg:mb-0">
456
+ <h2 class="text-3xl font-extrabold text-gray-900 sm:text-4xl mb-6">
457
+ Contactez-nous
458
+ </h2>
459
+ <p class="text-xl text-gray-600 mb-8">
460
+ Vous avez des questions ? Notre équipe est là pour vous aider.
461
+ </p>
462
+
463
+ <div class="space-y-6">
464
+ <div class="flex items-start">
465
+ <div class="flex-shrink-0 mt-1">
466
+ <div class="flex items-center justify-center h-10 w-10 rounded-full bg-purple-100 text-purple-600">
467
+ <i class="fas fa-envelope"></i>
468
+ </div>
469
+ </div>
470
+ <div class="ml-4">
471
+ <h3 class="text-lg font-medium text-gray-900">Email</h3>
472
+ <p class="text-gray-600">contact@flashfitzone.com</p>
473
+ </div>
474
+ </div>
475
+
476
+ <div class="flex items-start">
477
+ <div class="flex-shrink-0 mt-1">
478
+ <div class="flex items-center justify-center h-10 w-10 rounded-full bg-purple-100 text-purple-600">
479
+ <i class="fas fa-phone-alt"></i>
480
+ </div>
481
+ </div>
482
+ <div class="ml-4">
483
+ <h3 class="text-lg font-medium text-gray-900">Téléphone</h3>
484
+ <p class="text-gray-600">+33 1 23 45 67 89</p>
485
+ </div>
486
+ </div>
487
+
488
+ <div class="flex items-start">
489
+ <div class="flex-shrink-0 mt-1">
490
+ <div class="flex items-center justify-center h-10 w-10 rounded-full bg-purple-100 text-purple-600">
491
+ <i class="fab fa-github"></i>
492
+ </div>
493
+ </div>
494
+ <div class="ml-4">
495
+ <h3 class="text-lg font-medium text-gray-900">GitHub</h3>
496
+ <p class="text-gray-600">github.com/FlashFitZone</p>
497
+ </div>
498
+ </div>
499
+
500
+ <div class="flex items-start">
501
+ <div class="flex-shrink-0 mt-1">
502
+ <div class="flex items-center justify-center h-10 w-10 rounded-full bg-purple-100 text-purple-600">
503
+ <i class="fab fa-tiktok"></i>
504
+ </div>
505
+ </div>
506
+ <div class="ml-4">
507
+ <h3 class="text-lg font-medium text-gray-900">TikTok</h3>
508
+ <p class="text-gray-600">tiktok.com/@flashfitzone4</p>
509
+ </div>
510
+ </div>
511
+ </div>
512
+ </div>
513
+
514
+ <div class="bg-gray-50 p-8 rounded-lg shadow-sm">
515
+ <h3 class="text-2xl font-bold text-gray-900 mb-6">Abonnez-vous à notre newsletter</h3>
516
+ <form id="subscribe-form" class="space-y-6">
517
+ <div>
518
+ <label for="name" class="block text-sm font-medium text-gray-700 mb-1">Nom complet</label>
519
+ <input type="text" id="name" name="name" required class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-purple-500 focus:border-purple-500">
520
+ </div>
521
+
522
+ <div>
523
+ <label for="email" class="block text-sm font-medium text-gray-700 mb-1">Email</label>
524
+ <input type="email" id="email" name="email" required class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-purple-500 focus:border-purple-500">
525
+ </div>
526
+
527
+ <div>
528
+ <label for="goal" class="block text-sm font-medium text-gray-700 mb-1">Votre objectif principal</label>
529
+ <select id="goal" name="goal" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-purple-500 focus:border-purple-500">
530
+ <option value="">Sélectionnez un objectif</option>
531
+ <option value="weight-loss">Perte de poids</option>
532
+ <option value="muscle-gain">Prise de muscle</option>
533
+ <option value="fitness">Remise en forme</option>
534
+ <option value="stress">Réduction du stress</option>
535
+ </select>
536
+ </div>
537
+
538
+ <div class="flex items-start">
539
+ <div class="flex items-center h-5">
540
+ <input id="terms" name="terms" type="checkbox" required class="focus:ring-purple-500 h-4 w-4 text-purple-600 border-gray-300 rounded">
541
+ </div>
542
+ <div class="ml-3 text-sm">
543
+ <label for="terms" class="font-medium text-gray-700">J'accepte les <a href="#" class="text-purple-600 hover:text-purple-500">conditions d'utilisation</a></label>
544
+ </div>
545
+ </div>
546
+
547
+ <div>
548
+ <button type="submit" class="w-full bg-purple-600 text-white py-2 px-4 rounded-md hover:bg-purple-700 transition duration-300 font-medium">
549
+ S'abonner maintenant
550
+ </button>
551
+ </div>
552
+ </form>
553
+ </div>
554
+ </div>
555
+ </div>
556
+ </section>
557
+
558
+ <!-- Footer -->
559
+ <footer class="bg-gray-900 text-white py-12">
560
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
561
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
562
+ <div>
563
+ <h3 class="text-lg font-bold mb-4">FlashFitZone</h3>
564
+ <p class="text-gray-400">
565
+ La plateforme de fitness rapide et efficace pour des résultats visibles en quelques minutes par jour.
566
+ </p>
567
+ </div>
568
+
569
+ <div>
570
+ <h3 class="text-lg font-bold mb-4">Navigation</h3>
571
+ <ul class="space-y-2">
572
+ <li><a href="#home" class="text-gray-400 hover:text-white transition duration-300">Accueil</a></li>
573
+ <li><a href="#exercises" class="text-gray-400 hover:text-white transition duration-300">Exercices</a></li>
574
+ <li><a href="#tips" class="text-gray-400 hover:text-white transition duration-300">Conseils</a></li>
575
+ <li><a href="#progress" class="text-gray-400 hover:text-white transition duration-300">Progrès</a></li>
576
+ <li><a href="#testimonials" class="text-gray-400 hover:text-white transition duration-300">Témoignages</a></li>
577
+ </ul>
578
+ </div>
579
+
580
+ <div>
581
+ <h3 class="text-lg font-bold mb-4">Légal</h3>
582
+ <ul class="space-y-2">
583
+ <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Conditions d'utilisation</a></li>
584
+ <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Politique de confidentialité</a></li>
585
+ <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Mentions légales</a></li>
586
+ <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Cookies</a></li>
587
+ </ul>
588
+ </div>
589
+
590
+ <div>
591
+ <h3 class="text-lg font-bold mb-4">Réseaux sociaux</h3>
592
+ <div class="flex space-x-4">
593
+ <a href="#" class="text-gray-400 hover:text-white transition duration-300"><i class="fab fa-facebook-f text-xl"></i></a>
594
+ <a href="#" class="text-gray-400 hover:text-white transition duration-300"><i class="fab fa-twitter text-xl"></i></a>
595
+ <a href="https://www.tiktok.com/@flashfitzone4" class="text-gray-400 hover:text-white transition duration-300"><i class="fab fa-tiktok text-xl"></i></a>
596
+ <a href="https://github.com/FlashFitZone" class="text-gray-400 hover:text-white transition duration-300"><i class="fab fa-github text-xl"></i></a>
597
+ <a href="#" class="text-gray-400 hover:text-white transition duration-300"><i class="fab fa-instagram text-xl"></i></a>
598
+ </div>
599
+ <div class="mt-4">
600
+ <p class="text-gray-400">Téléchargez notre application :</p>
601
+ <div class="flex space-x-2 mt-2">
602
+ <a href="#" class="bg-black text-white px-3 py-1 rounded text-sm flex items-center">
603
+ <i class="fab fa-apple mr-1"></i> App Store
604
+ </a>
605
+ <a href="#" class="bg-black text-white px-3 py-1 rounded text-sm flex items-center">
606
+ <i class="fab fa-google-play mr-1"></i> Play Store
607
+ </a>
608
+ </div>
609
+ </div>
610
+ </div>
611
+ </div>
612
+
613
+ <div class="mt-12 pt-8 border-t border-gray-800 text-center text-gray-400 text-sm">
614
+ <p>&copy; 2023 FlashFitZone. Tous droits réservés.</p>
615
+ </div>
616
+ </div>
617
+ </footer>
618
+
619
+ <script>
620
+ // Mobile menu toggle
621
+ document.getElementById('mobile-menu-button').addEventListener('click', function() {
622
+ const menu = document.getElementById('mobile-menu');
623
+ menu.classList.toggle('hidden');
624
+ });
625
+
626
+ // Animated counter
627
+ function animateCounter() {
628
+ const counter = document.getElementById('animated-counter');
629
+ const target = parseInt(counter.getAttribute('data-target'));
630
+ const duration = 2000; // 2 seconds
631
+ const step = target / (duration / 16); // 60fps
632
+
633
+ let current = 0;
634
+ const incrementCounter = () => {
635
+ current += step;
636
+ if (current < target) {
637
+ counter.textContent = Math.floor(current).toLocaleString();
638
+ requestAnimationFrame(incrementCounter);
639
+ } else {
640
+ counter.textContent = target.toLocaleString();
641
+ }
642
+ };
643
+
644
+ incrementCounter();
645
+ }
646
+
647
+ // Smooth scrolling for anchor links
648
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
649
+ anchor.addEventListener('click', function (e) {
650
+ e.preventDefault();
651
+
652
+ const targetId = this.getAttribute('href');
653
+ if (targetId === '#') return;
654
+
655
+ const targetElement = document.querySelector(targetId);
656
+ if (targetElement) {
657
+ targetElement.scrollIntoView({
658
+ behavior: 'smooth'
659
+ });
660
+
661
+ // Close mobile menu if open
662
+ const mobileMenu = document.getElementById('mobile-menu');
663
+ if (!mobileMenu.classList.contains('hidden')) {
664
+ mobileMenu.classList.add('hidden');
665
+ }
666
+ }
667
+ });
668
+ });
669
+
670
+ // Form submission
671
+ document.getElementById('subscribe-form').addEventListener('submit', function(e) {
672
+ e.preventDefault();
673
+ alert('Merci pour votre inscription ! Nous vous contacterons bientôt.');
674
+ this.reset();
675
+ });
676
+
677
+ // Initialize counter when page loads
678
+ window.addEventListener('load', animateCounter);
679
+
680
+ // Progress animation on scroll
681
+ function animateProgressOnScroll() {
682
+ const progressSection = document.getElementById('progress');
683
+ const progressCircles = document.querySelectorAll('.progress-ring__circle');
684
+
685
+ const observer = new IntersectionObserver((entries) => {
686
+ entries.forEach(entry => {
687
+ if (entry.isIntersecting) {
688
+ progressCircles.forEach(circle => {
689
+ const circumference = 2 * Math.PI * 16;
690
+ const percent = parseInt(circle.textContent);
691
+ const offset = circumference - (percent / 100) * circumference;
692
+ circle.style.strokeDasharray = `${circumference} ${circumference}`;
693
+ circle.style.strokeDashoffset = offset;
694
+ });
695
+ observer.unobserve(entry.target);
696
+ }
697
+ });
698
+ }, { threshold: 0.5 });
699
+
700
+ if (progressSection) {
701
+ observer.observe(progressSection);
702
+ }
703
+ }
704
+
705
+ animateProgressOnScroll();
706
+ </script>
707
+ <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/fitness" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
708
+ </html>