Hugging Face's logo

Spaces:
zama1
/
trackly
Running

App Files Community
zama1 commited on
Commit
c45a4f5
·
verified ·
1 Parent(s): 6b7b86e

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +6 -4
  2. index.html +617 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Trackly
3
- emoji: 🐢
4
  colorFrom: blue
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: trackly
3
+ emoji: 🐳
4
  colorFrom: blue
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,617 @@
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>Trackly - Suivi des Habitudes</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
+ @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
11
+
12
+ :root {
13
+ --primary: #6366f1;
14
+ --primary-dark: #4f46e5;
15
+ --secondary: #f43f5e;
16
+ --dark: #1e293b;
17
+ --light: #f8fafc;
18
+ }
19
+
20
+ body {
21
+ font-family: 'Poppins', sans-serif;
22
+ background-color: #f1f5f9;
23
+ }
24
+
25
+ .habit-card:hover .habit-progress {
26
+ transform: scaleY(1.1);
27
+ }
28
+
29
+ .streak-flame {
30
+ animation: pulse 1.5s infinite;
31
+ }
32
+
33
+ @keyframes pulse {
34
+ 0%, 100% { opacity: 1; }
35
+ 50% { opacity: 0.7; }
36
+ }
37
+
38
+ .progress-ring__circle {
39
+ transition: stroke-dashoffset 0.5s;
40
+ transform: rotate(-90deg);
41
+ transform-origin: 50% 50%;
42
+ }
43
+ </style>
44
+ </head>
45
+ <body class="min-h-screen">
46
+ <!-- Navigation -->
47
+ <nav class="bg-white shadow-sm">
48
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
49
+ <div class="flex justify-between h-16">
50
+ <div class="flex items-center">
51
+ <div class="flex-shrink-0 flex items-center">
52
+ <i class="fas fa-fire text-indigo-500 text-2xl mr-2"></i>
53
+ <span class="text-xl font-bold text-indigo-600">Trackly</span>
54
+ </div>
55
+ </div>
56
+ <div class="hidden sm:ml-6 sm:flex sm:items-center space-x-8">
57
+ <a href="#" class="text-indigo-600 px-3 py-2 font-medium">Tableau de bord</a>
58
+ <a href="#" class="text-gray-500 hover:text-indigo-600 px-3 py-2 font-medium">Habitudes</a>
59
+ <a href="#" class="text-gray-500 hover:text-indigo-600 px-3 py-2 font-medium">Statistiques</a>
60
+ <a href="#" class="text-gray-500 hover:text-indigo-600 px-3 py-2 font-medium">Récompenses</a>
61
+ </div>
62
+ <div class="hidden sm:ml-6 sm:flex sm:items-center">
63
+ <button class="bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-md font-medium transition">
64
+ Passer Premium
65
+ </button>
66
+ </div>
67
+ <div class="-mr-2 flex items-center sm:hidden">
68
+ <button type="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 focus:ring-2 focus:ring-inset focus:ring-indigo-500" aria-controls="mobile-menu" aria-expanded="false">
69
+ <span class="sr-only">Open main menu</span>
70
+ <i class="fas fa-bars"></i>
71
+ </button>
72
+ </div>
73
+ </div>
74
+ </div>
75
+ </nav>
76
+
77
+ <!-- Main Content -->
78
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
79
+ <!-- Header -->
80
+ <div class="flex flex-col md:flex-row justify-between items-start md:items-center mb-8">
81
+ <div>
82
+ <h1 class="text-3xl font-bold text-gray-900">Bonjour, Alex</h1>
83
+ <p class="text-gray-500 mt-2">Suivez vos progrès et construisez des habitudes durables</p>
84
+ </div>
85
+ <div class="mt-4 md:mt-0 flex space-x-3">
86
+ <button class="bg-white border border-gray-300 rounded-md px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50 flex items-center">
87
+ <i class="fas fa-calendar-alt mr-2 text-indigo-500"></i>
88
+ Aujourd'hui
89
+ </button>
90
+ <button class="bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-md font-medium transition flex items-center">
91
+ <i class="fas fa-plus mr-2"></i>
92
+ Nouvelle habitude
93
+ </button>
94
+ </div>
95
+ </div>
96
+
97
+ <!-- Stats Overview -->
98
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-8">
99
+ <div class="bg-white rounded-xl shadow-sm p-6">
100
+ <div class="flex items-center justify-between">
101
+ <div>
102
+ <p class="text-gray-500 text-sm font-medium">Série actuelle</p>
103
+ <p class="text-2xl font-bold text-gray-900 mt-1">12 <span class="text-sm text-gray-500">jours</span></p>
104
+ </div>
105
+ <div class="bg-indigo-100 p-3 rounded-full">
106
+ <i class="fas fa-fire text-indigo-600 text-xl"></i>
107
+ </div>
108
+ </div>
109
+ <div class="mt-4">
110
+ <div class="w-full bg-gray-200 rounded-full h-2">
111
+ <div class="bg-indigo-600 h-2 rounded-full" style="width: 75%"></div>
112
+ </div>
113
+ <p class="text-xs text-gray-500 mt-1">75% de votre objectif de 16 jours</p>
114
+ </div>
115
+ </div>
116
+
117
+ <div class="bg-white rounded-xl shadow-sm p-6">
118
+ <div class="flex items-center justify-between">
119
+ <div>
120
+ <p class="text-gray-500 text-sm font-medium">Habitudes complétées</p>
121
+ <p class="text-2xl font-bold text-gray-900 mt-1">5/8</p>
122
+ </div>
123
+ <div class="bg-green-100 p-3 rounded-full">
124
+ <i class="fas fa-check-circle text-green-600 text-xl"></i>
125
+ </div>
126
+ </div>
127
+ <div class="mt-4">
128
+ <div class="w-full bg-gray-200 rounded-full h-2">
129
+ <div class="bg-green-500 h-2 rounded-full" style="width: 62%"></div>
130
+ </div>
131
+ <p class="text-xs text-gray-500 mt-1">62% des habitudes terminées</p>
132
+ </div>
133
+ </div>
134
+
135
+ <div class="bg-white rounded-xl shadow-sm p-6">
136
+ <div class="flex items-center justify-between">
137
+ <div>
138
+ <p class="text-gray-500 text-sm font-medium">Taux de réussite</p>
139
+ <p class="text-2xl font-bold text-gray-900 mt-1">89%</p>
140
+ </div>
141
+ <div class="bg-blue-100 p-3 rounded-full">
142
+ <i class="fas fa-chart-line text-blue-600 text-xl"></i>
143
+ </div>
144
+ </div>
145
+ <div class="mt-4">
146
+ <div class="w-full bg-gray-200 rounded-full h-2">
147
+ <div class="bg-blue-500 h-2 rounded-full" style="width: 89%"></div>
148
+ </div>
149
+ <p class="text-xs text-gray-500 mt-1">+12% depuis la semaine dernière</p>
150
+ </div>
151
+ </div>
152
+
153
+ <div class="bg-white rounded-xl shadow-sm p-6">
154
+ <div class="flex items-center justify-between">
155
+ <div>
156
+ <p class="text-gray-500 text-sm font-medium">Points</p>
157
+ <p class="text-2xl font-bold text-gray-900 mt-1">1,240</p>
158
+ </div>
159
+ <div class="bg-purple-100 p-3 rounded-full">
160
+ <i class="fas fa-trophy text-purple-600 text-xl"></i>
161
+ </div>
162
+ </div>
163
+ <div class="mt-4">
164
+ <div class="w-full bg-gray-200 rounded-full h-2">
165
+ <div class="bg-purple-500 h-2 rounded-full" style="width: 40%"></div>
166
+ </div>
167
+ <p class="text-xs text-gray-500 mt-1">400 points jusqu'au prochain niveau</p>
168
+ </div>
169
+ </div>
170
+ </div>
171
+
172
+ <!-- Habits Section -->
173
+ <div class="mb-8">
174
+ <div class="flex justify-between items-center mb-6">
175
+ <h2 class="text-xl font-bold text-gray-900">Vos habitudes du jour</h2>
176
+ <div class="flex space-x-2">
177
+ <button class="text-gray-500 hover:text-indigo-600">
178
+ <i class="fas fa-filter"></i>
179
+ </button>
180
+ <button class="text-gray-500 hover:text-indigo-600">
181
+ <i class="fas fa-sort"></i>
182
+ </button>
183
+ </div>
184
+ </div>
185
+
186
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
187
+ <!-- Habit Card 1 -->
188
+ <div class="habit-card bg-white rounded-xl shadow-sm overflow-hidden transition hover:shadow-md">
189
+ <div class="p-6">
190
+ <div class="flex justify-between items-start">
191
+ <div>
192
+ <div class="flex items-center">
193
+ <div class="bg-indigo-100 p-2 rounded-lg">
194
+ <i class="fas fa-running text-indigo-600 text-lg"></i>
195
+ </div>
196
+ <h3 class="ml-3 font-bold text-gray-900">Course matinale</h3>
197
+ </div>
198
+ <p class="text-sm text-gray-500 mt-2">30 minutes de course à pied</p>
199
+ </div>
200
+ <div class="flex items-center">
201
+ <span class="text-xs font-medium px-2 py-1 rounded-full bg-green-100 text-green-800">Active</span>
202
+ </div>
203
+ </div>
204
+
205
+ <div class="mt-6 flex justify-between items-center">
206
+ <div class="flex items-center">
207
+ <div class="relative w-10 h-10">
208
+ <svg class="w-10 h-10" viewBox="0 0 36 36">
209
+ <circle cx="18" cy="18" r="16" fill="none" stroke="#e6e6e6" stroke-width="3"></circle>
210
+ <circle class="progress-ring__circle" cx="18" cy="18" r="16" fill="none" stroke="#6366f1" stroke-width="3" stroke-dasharray="100" stroke-dashoffset="30"></circle>
211
+ </svg>
212
+ <div class="absolute inset-0 flex items-center justify-center">
213
+ <span class="text-xs font-bold text-indigo-600">70%</span>
214
+ </div>
215
+ </div>
216
+ <div class="ml-3">
217
+ <p class="text-xs text-gray-500">Réussite</p>
218
+ <p class="text-sm font-medium">7/10 jours</p>
219
+ </div>
220
+ </div>
221
+
222
+ <div class="flex flex-col items-center">
223
+ <div class="flex items-center text-yellow-500 streak-flame">
224
+ <i class="fas fa-fire"></i>
225
+ <span class="ml-1 text-sm font-bold">5</span>
226
+ </div>
227
+ <p class="text-xs text-gray-500 mt-1">Série actuelle</p>
228
+ </div>
229
+ </div>
230
+ </div>
231
+
232
+ <div class="habit-progress bg-gray-100 h-2 transition-transform origin-bottom">
233
+ <div class="bg-indigo-600 h-2" style="width: 70%"></div>
234
+ </div>
235
+ </div>
236
+
237
+ <!-- Habit Card 2 -->
238
+ <div class="habit-card bg-white rounded-xl shadow-sm overflow-hidden transition hover:shadow-md">
239
+ <div class="p-6">
240
+ <div class="flex justify-between items-start">
241
+ <div>
242
+ <div class="flex items-center">
243
+ <div class="bg-blue-100 p-2 rounded-lg">
244
+ <i class="fas fa-book text-blue-600 text-lg"></i>
245
+ </div>
246
+ <h3 class="ml-3 font-bold text-gray-900">Lecture</h3>
247
+ </div>
248
+ <p class="text-sm text-gray-500 mt-2">20 pages par jour</p>
249
+ </div>
250
+ <div class="flex items-center">
251
+ <span class="text-xs font-medium px-2 py-1 rounded-full bg-green-100 text-green-800">Active</span>
252
+ </div>
253
+ </div>
254
+
255
+ <div class="mt-6 flex justify-between items-center">
256
+ <div class="flex items-center">
257
+ <div class="relative w-10 h-10">
258
+ <svg class="w-10 h-10" viewBox="0 0 36 36">
259
+ <circle cx="18" cy="18" r="16" fill="none" stroke="#e6e6e6" stroke-width="3"></circle>
260
+ <circle class="progress-ring__circle" cx="18" cy="18" r="16" fill="none" stroke="#3b82f6" stroke-width="3" stroke-dasharray="100" stroke-dashoffset="15"></circle>
261
+ </svg>
262
+ <div class="absolute inset-0 flex items-center justify-center">
263
+ <span class="text-xs font-bold text-blue-600">85%</span>
264
+ </div>
265
+ </div>
266
+ <div class="ml-3">
267
+ <p class="text-xs text-gray-500">Réussite</p>
268
+ <p class="text-sm font-medium">17/20 jours</p>
269
+ </div>
270
+ </div>
271
+
272
+ <div class="flex flex-col items-center">
273
+ <div class="flex items-center text-yellow-500 streak-flame">
274
+ <i class="fas fa-fire"></i>
275
+ <span class="ml-1 text-sm font-bold">12</span>
276
+ </div>
277
+ <p class="text-xs text-gray-500 mt-1">Série actuelle</p>
278
+ </div>
279
+ </div>
280
+ </div>
281
+
282
+ <div class="habit-progress bg-gray-100 h-2 transition-transform origin-bottom">
283
+ <div class="bg-blue-500 h-2" style="width: 85%"></div>
284
+ </div>
285
+ </div>
286
+
287
+ <!-- Habit Card 3 -->
288
+ <div class="habit-card bg-white rounded-xl shadow-sm overflow-hidden transition hover:shadow-md">
289
+ <div class="p-6">
290
+ <div class="flex justify-between items-start">
291
+ <div>
292
+ <div class="flex items-center">
293
+ <div class="bg-purple-100 p-2 rounded-lg">
294
+ <i class="fas fa-spa text-purple-600 text-lg"></i>
295
+ </div>
296
+ <h3 class="ml-3 font-bold text-gray-900">Méditation</h3>
297
+ </div>
298
+ <p class="text-sm text-gray-500 mt-2">10 minutes de pleine conscience</p>
299
+ </div>
300
+ <div class="flex items-center">
301
+ <span class="text-xs font-medium px-2 py-1 rounded-full bg-green-100 text-green-800">Active</span>
302
+ </div>
303
+ </div>
304
+
305
+ <div class="mt-6 flex justify-between items-center">
306
+ <div class="flex items-center">
307
+ <div class="relative w-10 h-10">
308
+ <svg class="w-10 h-10" viewBox="0 0 36 36">
309
+ <circle cx="18" cy="18" r="16" fill="none" stroke="#e6e6e6" stroke-width="3"></circle>
310
+ <circle class="progress-ring__circle" cx="18" cy="18" r="16" fill="none" stroke="#8b5cf6" stroke-width="3" stroke-dasharray="100" stroke-dashoffset="50"></circle>
311
+ </svg>
312
+ <div class="absolute inset-0 flex items-center justify-center">
313
+ <span class="text-xs font-bold text-purple-600">50%</span>
314
+ </div>
315
+ </div>
316
+ <div class="ml-3">
317
+ <p class="text-xs text-gray-500">Réussite</p>
318
+ <p class="text-sm font-medium">5/10 jours</p>
319
+ </div>
320
+ </div>
321
+
322
+ <div class="flex flex-col items-center">
323
+ <div class="flex items-center text-yellow-500 streak-flame">
324
+ <i class="fas fa-fire"></i>
325
+ <span class="ml-1 text-sm font-bold">3</span>
326
+ </div>
327
+ <p class="text-xs text-gray-500 mt-1">Série actuelle</p>
328
+ </div>
329
+ </div>
330
+ </div>
331
+
332
+ <div class="habit-progress bg-gray-100 h-2 transition-transform origin-bottom">
333
+ <div class="bg-purple-500 h-2" style="width: 50%"></div>
334
+ </div>
335
+ </div>
336
+
337
+ <!-- Habit Card 4 -->
338
+ <div class="habit-card bg-white rounded-xl shadow-sm overflow-hidden transition hover:shadow-md">
339
+ <div class="p-6">
340
+ <div class="flex justify-between items-start">
341
+ <div>
342
+ <div class="flex items-center">
343
+ <div class="bg-green-100 p-2 rounded-lg">
344
+ <i class="fas fa-utensils text-green-600 text-lg"></i>
345
+ </div>
346
+ <h3 class="ml-3 font-bold text-gray-900">Repas sains</h3>
347
+ </div>
348
+ <p class="text-sm text-gray-500 mt-2">3 repas équilibrés par jour</p>
349
+ </div>
350
+ <div class="flex items-center">
351
+ <span class="text-xs font-medium px-2 py-1 rounded-full bg-green-100 text-green-800">Active</span>
352
+ </div>
353
+ </div>
354
+
355
+ <div class="mt-6 flex justify-between items-center">
356
+ <div class="flex items-center">
357
+ <div class="relative w-10 h-10">
358
+ <svg class="w-10 h-10" viewBox="0 0 36 36">
359
+ <circle cx="18" cy="18" r="16" fill="none" stroke="#e6e6e6" stroke-width="3"></circle>
360
+ <circle class="progress-ring__circle" cx="18" cy="18" r="16" fill="none" stroke="#10b981" stroke-width="3" stroke-dasharray="100" stroke-dashoffset="60"></circle>
361
+ </svg>
362
+ <div class="absolute inset-0 flex items-center justify-center">
363
+ <span class="text-xs font-bold text-green-600">40%</span>
364
+ </div>
365
+ </div>
366
+ <div class="ml-3">
367
+ <p class="text-xs text-gray-500">Réussite</p>
368
+ <p class="text-sm font-medium">4/10 jours</p>
369
+ </div>
370
+ </div>
371
+
372
+ <div class="flex flex-col items-center">
373
+ <div class="flex items-center text-yellow-500 streak-flame">
374
+ <i class="fas fa-fire"></i>
375
+ <span class="ml-1 text-sm font-bold">2</span>
376
+ </div>
377
+ <p class="text-xs text-gray-500 mt-1">Série actuelle</p>
378
+ </div>
379
+ </div>
380
+ </div>
381
+
382
+ <div class="habit-progress bg-gray-100 h-2 transition-transform origin-bottom">
383
+ <div class="bg-green-500 h-2" style="width: 40%"></div>
384
+ </div>
385
+ </div>
386
+
387
+ <!-- Habit Card 5 -->
388
+ <div class="habit-card bg-white rounded-xl shadow-sm overflow-hidden transition hover:shadow-md">
389
+ <div class="p-6">
390
+ <div class="flex justify-between items-start">
391
+ <div>
392
+ <div class="flex items-center">
393
+ <div class="bg-red-100 p-2 rounded-lg">
394
+ <i class="fas fa-bed text-red-600 text-lg"></i>
395
+ </div>
396
+ <h3 class="ml-3 font-bold text-gray-900">Sommeil</h3>
397
+ </div>
398
+ <p class="text-sm text-gray-500 mt-2">7-8 heures par nuit</p>
399
+ </div>
400
+ <div class="flex items-center">
401
+ <span class="text-xs font-medium px-2 py-1 rounded-full bg-green-100 text-green-800">Active</span>
402
+ </div>
403
+ </div>
404
+
405
+ <div class="mt-6 flex justify-between items-center">
406
+ <div class="flex items-center">
407
+ <div class="relative w-10 h-10">
408
+ <svg class="w-10 h-10" viewBox="0 0 36 36">
409
+ <circle cx="18" cy="18" r="16" fill="none" stroke="#e6e6e6" stroke-width="3"></circle>
410
+ <circle class="progress-ring__circle" cx="18" cy="18" r="16" fill="none" stroke="#ef4444" stroke-width="3" stroke-dasharray="100" stroke-dashoffset="20"></circle>
411
+ </svg>
412
+ <div class="absolute inset-0 flex items-center justify-center">
413
+ <span class="text-xs font-bold text-red-600">80%</span>
414
+ </div>
415
+ </div>
416
+ <div class="ml-3">
417
+ <p class="text-xs text-gray-500">Réussite</p>
418
+ <p class="text-sm font-medium">16/20 jours</p>
419
+ </div>
420
+ </div>
421
+
422
+ <div class="flex flex-col items-center">
423
+ <div class="flex items-center text-yellow-500 streak-flame">
424
+ <i class="fas fa-fire"></i>
425
+ <span class="ml-1 text-sm font-bold">8</span>
426
+ </div>
427
+ <p class="text-xs text-gray-500 mt-1">Série actuelle</p>
428
+ </div>
429
+ </div>
430
+ </div>
431
+
432
+ <div class="habit-progress bg-gray-100 h-2 transition-transform origin-bottom">
433
+ <div class="bg-red-500 h-2" style="width: 80%"></div>
434
+ </div>
435
+ </div>
436
+
437
+ <!-- Add New Habit Card -->
438
+ <div class="border-2 border-dashed border-gray-300 rounded-xl flex flex-col items-center justify-center p-6 hover:border-indigo-400 hover:bg-indigo-50 transition cursor-pointer">
439
+ <div class="w-12 h-12 bg-indigo-100 rounded-full flex items-center justify-center mb-3">
440
+ <i class="fas fa-plus text-indigo-600 text-xl"></i>
441
+ </div>
442
+ <h3 class="text-lg font-medium text-gray-700">Ajouter une habitude</h3>
443
+ <p class="text-sm text-gray-500 mt-1 text-center">Commencez à suivre une nouvelle routine</p>
444
+ </div>
445
+ </div>
446
+ </div>
447
+
448
+ <!-- Statistics Section -->
449
+ <div class="bg-white rounded-xl shadow-sm p-6 mb-8">
450
+ <div class="flex justify-between items-center mb-6">
451
+ <h2 class="text-xl font-bold text-gray-900">Vos statistiques</h2>
452
+ <div class="flex space-x-2">
453
+ <button class="text-gray-500 hover:text-indigo-600 text-sm font-medium">Semaine</button>
454
+ <button class="text-gray-500 hover:text-indigo-600 text-sm font-medium">Mois</button>
455
+ <button class="bg-indigo-100 text-indigo-600 px-3 py-1 rounded-md text-sm font-medium">Année</button>
456
+ </div>
457
+ </div>
458
+
459
+ <div class="h-64">
460
+ <canvas id="statsChart"></canvas>
461
+ </div>
462
+ </div>
463
+
464
+ <!-- Premium CTA -->
465
+ <div class="bg-gradient-to-r from-indigo-500 to-purple-600 rounded-xl shadow-sm p-8 text-white">
466
+ <div class="flex flex-col md:flex-row justify-between items-center">
467
+ <div class="mb-6 md:mb-0">
468
+ <h2 class="text-2xl font-bold mb-2">Passez à Trackly Premium</h2>
469
+ <p class="opacity-90 max-w-lg">Débloquez des analyses avancées, des plans personnalisés et des fonctionnalités exclusives pour maximiser vos progrès.</p>
470
+ </div>
471
+ <button class="bg-white text-indigo-600 hover:bg-gray-100 px-6 py-3 rounded-lg font-bold transition whitespace-nowrap">
472
+ Essai gratuit de 7 jours
473
+ </button>
474
+ </div>
475
+ </div>
476
+ </div>
477
+
478
+ <!-- Footer -->
479
+ <footer class="bg-white border-t border-gray-200 mt-12">
480
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
481
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
482
+ <div>
483
+ <h3 class="text-lg font-semibold text-gray-900 mb-4">Trackly</h3>
484
+ <p class="text-gray-500 text-sm">Aidez-vous à construire des habitudes durables et à atteindre vos objectifs personnels.</p>
485
+ </div>
486
+ <div>
487
+ <h3 class="text-sm font-semibold text-gray-900 uppercase tracking-wider mb-4">Produit</h3>
488
+ <ul class="space-y-2">
489
+ <li><a href="#" class="text-gray-500 hover:text-indigo-600 text-sm">Fonctionnalités</a></li>
490
+ <li><a href="#" class="text-gray-500 hover:text-indigo-600 text-sm">Premium</a></li>
491
+ <li><a href="#" class="text-gray-500 hover:text-indigo-600 text-sm">Tarifs</a></li>
492
+ </ul>
493
+ </div>
494
+ <div>
495
+ <h3 class="text-sm font-semibold text-gray-900 uppercase tracking-wider mb-4">Ressources</h3>
496
+ <ul class="space-y-2">
497
+ <li><a href="#" class="text-gray-500 hover:text-indigo-600 text-sm">Blog</a></li>
498
+ <li><a href="#" class="text-gray-500 hover:text-indigo-600 text-sm">Guides</a></li>
499
+ <li><a href="#" class="text-gray-500 hover:text-indigo-600 text-sm">FAQ</a></li>
500
+ </ul>
501
+ </div>
502
+ <div>
503
+ <h3 class="text-sm font-semibold text-gray-900 uppercase tracking-wider mb-4">Entreprise</h3>
504
+ <ul class="space-y-2">
505
+ <li><a href="#" class="text-gray-500 hover:text-indigo-600 text-sm">À propos</a></li>
506
+ <li><a href="#" class="text-gray-500 hover:text-indigo-600 text-sm">Carrières</a></li>
507
+ <li><a href="#" class="text-gray-500 hover:text-indigo-600 text-sm">Contact</a></li>
508
+ </ul>
509
+ </div>
510
+ </div>
511
+ <div class="mt-8 pt-8 border-t border-gray-200 flex flex-col md:flex-row justify-between items-center">
512
+ <p class="text-gray-500 text-sm">© 2023 Trackly. Tous droits réservés.</p>
513
+ <div class="flex space-x-6 mt-4 md:mt-0">
514
+ <a href="#" class="text-gray-400 hover:text-indigo-600">
515
+ <i class="fab fa-facebook-f"></i>
516
+ </a>
517
+ <a href="#" class="text-gray-400 hover:text-indigo-600">
518
+ <i class="fab fa-twitter"></i>
519
+ </a>
520
+ <a href="#" class="text-gray-400 hover:text-indigo-600">
521
+ <i class="fab fa-instagram"></i>
522
+ </a>
523
+ </div>
524
+ </div>
525
+ </div>
526
+ </footer>
527
+
528
+ <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
529
+ <script>
530
+ // Initialize Chart
531
+ const ctx = document.getElementById('statsChart').getContext('2d');
532
+ const statsChart = new Chart(ctx, {
533
+ type: 'line',
534
+ data: {
535
+ labels: ['Jan', 'Fév', 'Mar', 'Avr', 'Mai', 'Juin', 'Juil', 'Août', 'Sep', 'Oct', 'Nov', 'Déc'],
536
+ datasets: [
537
+ {
538
+ label: 'Habitudes complétées',
539
+ data: [65, 59, 80, 81, 76, 85, 90, 92, 88, 95, 93, 97],
540
+ borderColor: '#6366f1',
541
+ backgroundColor: 'rgba(99, 102, 241, 0.1)',
542
+ tension: 0.3,
543
+ fill: true
544
+ },
545
+ {
546
+ label: 'Taux de réussite',
547
+ data: [72, 75, 78, 82, 85, 87, 89, 91, 90, 93, 94, 96],
548
+ borderColor: '#10b981',
549
+ backgroundColor: 'rgba(16, 185, 129, 0.1)',
550
+ tension: 0.3,
551
+ fill: true
552
+ }
553
+ ]
554
+ },
555
+ options: {
556
+ responsive: true,
557
+ maintainAspectRatio: false,
558
+ plugins: {
559
+ legend: {
560
+ position: 'top',
561
+ },
562
+ tooltip: {
563
+ mode: 'index',
564
+ intersect: false,
565
+ }
566
+ },
567
+ scales: {
568
+ y: {
569
+ beginAtZero: false,
570
+ min: 50,
571
+ max: 100,
572
+ ticks: {
573
+ callback: function(value) {
574
+ return value + '%';
575
+ }
576
+ }
577
+ }
578
+ }
579
+ }
580
+ });
581
+
582
+ // Animate progress rings
583
+ document.addEventListener('DOMContentLoaded', function() {
584
+ const circles = document.querySelectorAll('.progress-ring__circle');
585
+ const radius = 16;
586
+ const circumference = 2 * Math.PI * radius;
587
+
588
+ circles.forEach(circle => {
589
+ const percent = parseInt(circle.parentElement.querySelector('span').textContent);
590
+ const offset = circumference - (percent / 100) * circumference;
591
+ circle.style.strokeDasharray = circumference;
592
+ circle.style.strokeDashoffset = offset;
593
+ });
594
+
595
+ // Simulate habit completion
596
+ const habitCards = document.querySelectorAll('.habit-card');
597
+ habitCards.forEach(card => {
598
+ card.addEventListener('click', function() {
599
+ const checkIcon = document.createElement('i');
600
+ checkIcon.className = 'fas fa-check-circle text-green-500 text-4xl';
601
+
602
+ const overlay = document.createElement('div');
603
+ overlay.className = 'absolute inset-0 bg-white bg-opacity-90 flex items-center justify-center rounded-xl';
604
+ overlay.appendChild(checkIcon);
605
+
606
+ this.style.position = 'relative';
607
+ this.appendChild(overlay);
608
+
609
+ setTimeout(() => {
610
+ this.removeChild(overlay);
611
+ }, 1500);
612
+ });
613
+ });
614
+ });
615
+ </script>
616
+ <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=zama1/trackly" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
617
+ </html>