Hugging Face's logo

Spaces:
THEGREA241
/
thegreat
Running

App Files Community
THEGREA241 commited on
Commit
8dfe9eb
·
verified ·
1 Parent(s): f2ab761

undefined - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +551 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Thegreat
3
- emoji: 🐠
4
- colorFrom: red
5
- colorTo: pink
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: thegreat
3
+ emoji: 🐳
4
+ colorFrom: blue
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,551 @@
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>Bible Challenge - 6 mois</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
+ @keyframes pulse {
11
+ 0%, 100% { opacity: 1; }
12
+ 50% { opacity: 0.5; }
13
+ }
14
+ .animate-pulse-slow {
15
+ animation: pulse 3s infinite;
16
+ }
17
+ .progress-ring__circle {
18
+ transition: stroke-dashoffset 0.5s;
19
+ transform: rotate(-90deg);
20
+ transform-origin: 50% 50%;
21
+ }
22
+ .menu-bubble {
23
+ position: relative;
24
+ background: linear-gradient(135deg, #e6e6e6, #ffffff);
25
+ border-radius: 1rem;
26
+ box-shadow: 0 4px 15px rgba(0,0,0,0.1);
27
+ }
28
+ .menu-bubble:after {
29
+ content: '';
30
+ position: absolute;
31
+ bottom: -10px;
32
+ left: 50%;
33
+ transform: translateX(-50%);
34
+ border-width: 10px 10px 0;
35
+ border-style: solid;
36
+ border-color: #e6e6e6 transparent transparent;
37
+ }
38
+ .floating-btn {
39
+ box-shadow: 0 6px 20px rgba(0,0,0,0.15);
40
+ transition: all 0.3s ease;
41
+ }
42
+ .floating-btn:hover {
43
+ transform: translateY(-3px);
44
+ box-shadow: 0 8px 25px rgba(0,0,0,0.2);
45
+ }
46
+ .alarm-active {
47
+ background: linear-gradient(135deg, #f0f9ff, #e0f2fe);
48
+ border: 2px solid #38bdf8;
49
+ }
50
+ </style>
51
+ </head>
52
+ <body class="bg-gray-50 font-sans min-h-screen">
53
+ <div class="container mx-auto px-4 py-8 max-w-4xl">
54
+ <!-- Header -->
55
+ <header class="flex justify-between items-center mb-8">
56
+ <div>
57
+ <h1 class="text-3xl font-bold text-gray-800">Bible Challenge</h1>
58
+ <p class="text-gray-600">Terminer la Bible (LS 1910) en 6 mois</p>
59
+ </div>
60
+ <div class="relative">
61
+ <button id="menuBtn" class="bg-gradient-to-r from-gray-200 to-gray-100 p-3 rounded-full shadow-md hover:shadow-lg transition">
62
+ <i class="fas fa-bars text-gray-700"></i>
63
+ </button>
64
+ <div id="menuContent" class="menu-bubble absolute right-0 mt-2 w-64 p-4 hidden z-10">
65
+ <h3 class="font-semibold text-gray-700 mb-2">Options</h3>
66
+ <ul class="space-y-2">
67
+ <li><a href="#" class="flex items-center text-gray-600 hover:text-blue-500"><i class="fas fa-cog mr-2"></i> Paramètres</a></li>
68
+ <li><a href="#" class="flex items-center text-gray-600 hover:text-blue-500"><i class="fas fa-history mr-2"></i> Historique</a></li>
69
+ <li><a href="#" class="flex items-center text-gray-600 hover:text-blue-500"><i class="fas fa-question-circle mr-2"></i> Aide</a></li>
70
+ <li><button id="resetBtn" class="flex items-center text-gray-600 hover:text-red-500"><i class="fas fa-redo mr-2"></i> Réinitialiser</button></li>
71
+ </ul>
72
+ </div>
73
+ </div>
74
+ </header>
75
+
76
+ <!-- Progress Section -->
77
+ <section class="bg-white rounded-xl shadow-md p-6 mb-8">
78
+ <div class="flex flex-col md:flex-row items-center justify-between">
79
+ <div class="w-full md:w-1/3 flex justify-center mb-6 md:mb-0">
80
+ <div class="relative w-40 h-40">
81
+ <svg class="w-full h-full" viewBox="0 0 100 100">
82
+ <circle class="text-gray-200" stroke-width="8" stroke="currentColor" fill="transparent" r="40" cx="50" cy="50" />
83
+ <circle id="progressCircle" class="text-blue-500 progress-ring__circle" stroke-width="8" stroke-linecap="round" stroke="currentColor" fill="transparent" r="40" cx="50" cy="50" />
84
+ </svg>
85
+ <div class="absolute inset-0 flex items-center justify-center flex-col">
86
+ <span id="progressPercent" class="text-3xl font-bold text-gray-800">0%</span>
87
+ <span class="text-sm text-gray-500">Complété</span>
88
+ </div>
89
+ </div>
90
+ </div>
91
+ <div class="w-full md:w-2/3">
92
+ <h2 class="text-xl font-semibold text-gray-800 mb-4">Votre Progression</h2>
93
+ <div class="space-y-4">
94
+ <div>
95
+ <div class="flex justify-between mb-1">
96
+ <span class="text-sm font-medium text-gray-700">Versets lus</span>
97
+ <span id="versesCount" class="text-sm font-medium text-gray-700">0/31,102</span>
98
+ </div>
99
+ <div class="w-full bg-gray-200 rounded-full h-2.5">
100
+ <div id="versesProgress" class="bg-blue-600 h-2.5 rounded-full" style="width: 0%"></div>
101
+ </div>
102
+ </div>
103
+ <div>
104
+ <div class="flex justify-between mb-1">
105
+ <span class="text-sm font-medium text-gray-700">Jours restants</span>
106
+ <span id="daysCount" class="text-sm font-medium text-gray-700">180/180</span>
107
+ </div>
108
+ <div class="w-full bg-gray-200 rounded-full h-2.5">
109
+ <div id="daysProgress" class="bg-indigo-600 h-2.5 rounded-full" style="width: 100%"></div>
110
+ </div>
111
+ </div>
112
+ <div class="grid grid-cols-2 gap-4 mt-4">
113
+ <div class="bg-gray-50 p-3 rounded-lg">
114
+ <p class="text-sm text-gray-500">Versets/jour</p>
115
+ <p id="versesPerDay" class="font-semibold text-gray-800">120</p>
116
+ </div>
117
+ <div class="bg-gray-50 p-3 rounded-lg">
118
+ <p class="text-sm text-gray-500">Temps estimé</p>
119
+ <p id="timePerDay" class="font-semibold text-gray-800">15 min</p>
120
+ </div>
121
+ </div>
122
+ </div>
123
+ </div>
124
+ </div>
125
+ </section>
126
+
127
+ <!-- Today's Reading -->
128
+ <section class="bg-white rounded-xl shadow-md p-6 mb-8">
129
+ <h2 class="text-xl font-semibold text-gray-800 mb-4">Lecture du jour</h2>
130
+ <div class="bg-blue-50 border border-blue-100 rounded-lg p-4 mb-4">
131
+ <div class="flex items-start">
132
+ <div class="flex-shrink-0 pt-1">
133
+ <i class="fas fa-book-open text-blue-500"></i>
134
+ </div>
135
+ <div class="ml-3">
136
+ <h3 id="todayPassage" class="text-lg font-medium text-gray-800">Genèse 1:1-120</h3>
137
+ <p id="todayVerses" class="text-gray-600">120 versets à lire aujourd'hui</p>
138
+ </div>
139
+ </div>
140
+ </div>
141
+ <div class="flex justify-between items-center">
142
+ <div>
143
+ <p class="text-sm text-gray-500">Statut</p>
144
+ <p id="readingStatus" class="font-semibold text-gray-800">Pas encore commencé</p>
145
+ </div>
146
+ <button id="markReadBtn" class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg transition flex items-center">
147
+ <i class="fas fa-check mr-2"></i> Marquer comme lu
148
+ </button>
149
+ </div>
150
+ </section>
151
+
152
+ <!-- Alarm Section -->
153
+ <section class="bg-white rounded-xl shadow-md p-6 mb-8">
154
+ <h2 class="text-xl font-semibold text-gray-800 mb-4">Rappel quotidien</h2>
155
+ <div id="alarmContainer" class="border rounded-lg p-4 transition">
156
+ <div class="flex items-center justify-between">
157
+ <div class="flex items-center">
158
+ <div class="mr-4">
159
+ <i class="fas fa-bell text-2xl text-gray-400"></i>
160
+ </div>
161
+ <div>
162
+ <h3 class="font-medium text-gray-800">Rappel de lecture</h3>
163
+ <p id="alarmTimeText" class="text-sm text-gray-500">Non programmé</p>
164
+ </div>
165
+ </div>
166
+ <label class="relative inline-flex items-center cursor-pointer">
167
+ <input id="alarmToggle" type="checkbox" class="sr-only peer">
168
+ <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-600"></div>
169
+ </label>
170
+ </div>
171
+ <div id="timePickerContainer" class="mt-4 hidden">
172
+ <div class="flex items-center space-x-4">
173
+ <div class="flex-1">
174
+ <label for="alarmTime" class="block text-sm font-medium text-gray-700 mb-1">Heure</label>
175
+ <input type="time" id="alarmTime" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5">
176
+ </div>
177
+ <div class="flex-1">
178
+ <label for="alarmDays" class="block text-sm font-medium text-gray-700 mb-1">Jours</label>
179
+ <select id="alarmDays" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5">
180
+ <option value="1111111">Tous les jours</option>
181
+ <option value="1111110">En semaine</option>
182
+ <option value="0000001">Dimanche</option>
183
+ <option value="1000000">Lundi</option>
184
+ <option value="0100000">Mardi</option>
185
+ <option value="0010000">Mercredi</option>
186
+ <option value="0001000">Jeudi</option>
187
+ <option value="0000100">Vendredi</option>
188
+ <option value="0000010">Samedi</option>
189
+ </select>
190
+ </div>
191
+ </div>
192
+ <button id="saveAlarmBtn" class="mt-4 bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg transition w-full">
193
+ Enregistrer le rappel
194
+ </button>
195
+ </div>
196
+ </div>
197
+ </section>
198
+
199
+ <!-- Stats Section -->
200
+ <section class="bg-white rounded-xl shadow-md p-6">
201
+ <h2 class="text-xl font-semibold text-gray-800 mb-4">Statistiques</h2>
202
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
203
+ <div class="bg-gray-50 p-4 rounded-lg">
204
+ <div class="flex items-center">
205
+ <div class="p-3 rounded-full bg-blue-100 text-blue-600 mr-3">
206
+ <i class="fas fa-fire"></i>
207
+ </div>
208
+ <div>
209
+ <p class="text-sm text-gray-500">Série actuelle</p>
210
+ <p id="currentStreak" class="font-semibold text-gray-800">0 jours</p>
211
+ </div>
212
+ </div>
213
+ </div>
214
+ <div class="bg-gray-50 p-4 rounded-lg">
215
+ <div class="flex items-center">
216
+ <div class="p-3 rounded-full bg-green-100 text-green-600 mr-3">
217
+ <i class="fas fa-calendar-check"></i>
218
+ </div>
219
+ <div>
220
+ <p class="text-sm text-gray-500">Jours réussis</p>
221
+ <p id="successDays" class="font-semibold text-gray-800">0/180</p>
222
+ </div>
223
+ </div>
224
+ </div>
225
+ <div class="bg-gray-50 p-4 rounded-lg">
226
+ <div class="flex items-center">
227
+ <div class="p-3 rounded-full bg-purple-100 text-purple-600 mr-3">
228
+ <i class="fas fa-tachometer-alt"></i>
229
+ </div>
230
+ <div>
231
+ <p class="text-sm text-gray-500">Vitesse moyenne</p>
232
+ <p id="avgSpeed" class="font-semibold text-gray-800">8 v/min</p>
233
+ </div>
234
+ </div>
235
+ </div>
236
+ </div>
237
+ </section>
238
+
239
+ <!-- Floating Action Button -->
240
+ <button id="fab" class="floating-btn fixed bottom-8 right-8 bg-gradient-to-r from-blue-500 to-blue-600 text-white p-4 rounded-full shadow-lg z-20">
241
+ <i class="fas fa-plus text-xl"></i>
242
+ </button>
243
+ </div>
244
+
245
+ <script>
246
+ document.addEventListener('DOMContentLoaded', function() {
247
+ // Initialize app data
248
+ const totalVerses = 31102;
249
+ const totalDays = 180;
250
+ const versesPerMinute = 8;
251
+ const dailyMinutes = 15;
252
+ const dailyVerses = versesPerMinute * dailyMinutes;
253
+
254
+ // Load saved data from localStorage
255
+ let appData = JSON.parse(localStorage.getItem('bibleChallengeData')) || {
256
+ startDate: new Date().toISOString(),
257
+ currentDay: 1,
258
+ readVerses: 0,
259
+ readingHistory: {},
260
+ alarm: null,
261
+ streak: 0,
262
+ successDays: 0
263
+ };
264
+
265
+ // Update UI with loaded data
266
+ updateProgress();
267
+ updateTodayReading();
268
+ updateStats();
269
+ initAlarm();
270
+
271
+ // Menu toggle
272
+ const menuBtn = document.getElementById('menuBtn');
273
+ const menuContent = document.getElementById('menuContent');
274
+
275
+ menuBtn.addEventListener('click', function() {
276
+ menuContent.classList.toggle('hidden');
277
+ });
278
+
279
+ // Close menu when clicking outside
280
+ document.addEventListener('click', function(e) {
281
+ if (!menuBtn.contains(e.target) && !menuContent.contains(e.target)) {
282
+ menuContent.classList.add('hidden');
283
+ }
284
+ });
285
+
286
+ // Reset button
287
+ document.getElementById('resetBtn').addEventListener('click', function() {
288
+ if (confirm('Êtes-vous sûr de vouloir réinitialiser toutes vos données de progression ?')) {
289
+ localStorage.removeItem('bibleChallengeData');
290
+ location.reload();
291
+ }
292
+ });
293
+
294
+ // Mark as read button
295
+ document.getElementById('markReadBtn').addEventListener('click', function() {
296
+ const today = new Date().toISOString().split('T')[0];
297
+
298
+ if (!appData.readingHistory[today]) {
299
+ appData.readingHistory[today] = {
300
+ verses: dailyVerses,
301
+ date: today
302
+ };
303
+
304
+ appData.readVerses += dailyVerses;
305
+ appData.currentDay++;
306
+ appData.successDays++;
307
+
308
+ // Check streak
309
+ const yesterday = new Date();
310
+ yesterday.setDate(yesterday.getDate() - 1);
311
+ const yesterdayStr = yesterday.toISOString().split('T')[0];
312
+
313
+ if (appData.readingHistory[yesterdayStr]) {
314
+ appData.streak++;
315
+ } else {
316
+ appData.streak = 1;
317
+ }
318
+
319
+ localStorage.setItem('bibleChallengeData', JSON.stringify(appData));
320
+ updateProgress();
321
+ updateTodayReading();
322
+ updateStats();
323
+
324
+ // Update button state
325
+ document.getElementById('readingStatus').textContent = 'Terminé aujourd\'hui';
326
+ document.getElementById('markReadBtn').innerHTML = '<i class="fas fa-check-circle mr-2"></i> Lecture terminée';
327
+ document.getElementById('markReadBtn').classList.remove('bg-blue-600', 'hover:bg-blue-700');
328
+ document.getElementById('markReadBtn').classList.add('bg-green-100', 'text-green-800');
329
+ document.getElementById('markReadBtn').disabled = true;
330
+
331
+ // Show celebration effect
332
+ showConfetti();
333
+ }
334
+ });
335
+
336
+ // Alarm functionality
337
+ function initAlarm() {
338
+ const alarmToggle = document.getElementById('alarmToggle');
339
+ const timePickerContainer = document.getElementById('timePickerContainer');
340
+ const alarmContainer = document.getElementById('alarmContainer');
341
+
342
+ if (appData.alarm) {
343
+ alarmToggle.checked = true;
344
+ document.getElementById('alarmTime').value = appData.alarm.time;
345
+ document.getElementById('alarmDays').value = appData.alarm.days;
346
+ document.getElementById('alarmTimeText').textContent = `${appData.alarm.time} (${formatDays(appData.alarm.days)})`;
347
+ timePickerContainer.classList.remove('hidden');
348
+ alarmContainer.classList.add('alarm-active');
349
+ }
350
+
351
+ alarmToggle.addEventListener('change', function() {
352
+ if (this.checked) {
353
+ timePickerContainer.classList.remove('hidden');
354
+ alarmContainer.classList.add('alarm-active');
355
+ } else {
356
+ timePickerContainer.classList.add('hidden');
357
+ alarmContainer.classList.remove('alarm-active');
358
+ delete appData.alarm;
359
+ localStorage.setItem('bibleChallengeData', JSON.stringify(appData));
360
+ document.getElementById('alarmTimeText').textContent = 'Non programmé';
361
+ }
362
+ });
363
+
364
+ document.getElementById('saveAlarmBtn').addEventListener('click', function() {
365
+ const time = document.getElementById('alarmTime').value;
366
+ const days = document.getElementById('alarmDays').value;
367
+
368
+ if (!time) {
369
+ alert('Veuillez sélectionner une heure');
370
+ return;
371
+ }
372
+
373
+ appData.alarm = {
374
+ time,
375
+ days
376
+ };
377
+
378
+ localStorage.setItem('bibleChallengeData', JSON.stringify(appData));
379
+ document.getElementById('alarmTimeText').textContent = `${time} (${formatDays(days)})`;
380
+
381
+ // In a real app, you would schedule the notification here
382
+ alert(`Rappel programmé pour ${time} (${formatDays(days)})`);
383
+ });
384
+ }
385
+
386
+ function formatDays(daysPattern) {
387
+ if (daysPattern === '1111111') return 'Tous les jours';
388
+ if (daysPattern === '1111110') return 'En semaine';
389
+
390
+ const daysMap = ['Lun', 'Mar', 'Mer', 'Jeu', 'Ven', 'Sam', 'Dim'];
391
+ const selectedDays = [];
392
+
393
+ for (let i = 0; i < 7; i++) {
394
+ if (daysPattern[i] === '1') {
395
+ selectedDays.push(daysMap[i]);
396
+ }
397
+ }
398
+
399
+ return selectedDays.join(', ');
400
+ }
401
+
402
+ // Update progress indicators
403
+ function updateProgress() {
404
+ const progressPercent = Math.round((appData.readVerses / totalVerses) * 100);
405
+ const daysLeft = totalDays - appData.currentDay + 1;
406
+ const daysPercent = Math.round(((totalDays - daysLeft) / totalDays) * 100);
407
+
408
+ // Update progress circle
409
+ const circle = document.getElementById('progressCircle');
410
+ const radius = circle.r.baseVal.value;
411
+ const circumference = 2 * Math.PI * radius;
412
+ const offset = circumference - (progressPercent / 100) * circumference;
413
+ circle.style.strokeDasharray = `${circumference} ${circumference}`;
414
+ circle.style.strokeDashoffset = offset;
415
+
416
+ // Update text displays
417
+ document.getElementById('progressPercent').textContent = `${progressPercent}%`;
418
+ document.getElementById('versesCount').textContent = `${appData.readVerses.toLocaleString()}/${totalVerses.toLocaleString()}`;
419
+ document.getElementById('versesProgress').style.width = `${progressPercent}%`;
420
+ document.getElementById('daysCount').textContent = `${appData.currentDay}/${totalDays}`;
421
+ document.getElementById('daysProgress').style.width = `${daysPercent}%`;
422
+ document.getElementById('versesPerDay').textContent = dailyVerses;
423
+ document.getElementById('timePerDay').textContent = `${dailyMinutes} min`;
424
+ }
425
+
426
+ // Update today's reading section
427
+ function updateTodayReading() {
428
+ const today = new Date().toISOString().split('T')[0];
429
+ const todayPassage = calculatePassage(appData.readVerses, dailyVerses);
430
+
431
+ document.getElementById('todayPassage').textContent = todayPassage;
432
+ document.getElementById('todayVerses').textContent = `${dailyVerses} versets à lire aujourd'hui`;
433
+
434
+ if (appData.readingHistory[today]) {
435
+ document.getElementById('readingStatus').textContent = 'Terminé aujourd\'hui';
436
+ document.getElementById('markReadBtn').innerHTML = '<i class="fas fa-check-circle mr-2"></i> Lecture terminée';
437
+ document.getElementById('markReadBtn').classList.remove('bg-blue-600', 'hover:bg-blue-700');
438
+ document.getElementById('markReadBtn').classList.add('bg-green-100', 'text-green-800');
439
+ document.getElementById('markReadBtn').disabled = true;
440
+ } else {
441
+ document.getElementById('readingStatus').textContent = 'Pas encore commencé';
442
+ document.getElementById('markReadBtn').innerHTML = '<i class="fas fa-check mr-2"></i> Marquer comme lu';
443
+ document.getElementById('markReadBtn').classList.remove('bg-green-100', 'text-green-800');
444
+ document.getElementById('markReadBtn').classList.add('bg-blue-600', 'hover:bg-blue-700');
445
+ document.getElementById('markReadBtn').disabled = false;
446
+ }
447
+ }
448
+
449
+ // Calculate Bible passage based on verses read
450
+ function calculatePassage(readVerses, todayVerses) {
451
+ // Simplified calculation - in a real app you would use a proper Bible structure
452
+ const books = [
453
+ {name: "Genèse", verses: 1533},
454
+ {name: "Exode", verses: 1213},
455
+ {name: "Lévitique", verses: 859},
456
+ {name: "Nombres", verses: 1288},
457
+ {name: "Deutéronome", verses: 959},
458
+ // ... (all books of the Bible with verse counts)
459
+ ];
460
+
461
+ let remainingVerses = readVerses;
462
+ let currentBook = 0;
463
+ let currentChapter = 1;
464
+
465
+ // Find current book
466
+ while (currentBook < books.length && remainingVerses >= books[currentBook].verses) {
467
+ remainingVerses -= books[currentBook].verses;
468
+ currentBook++;
469
+ }
470
+
471
+ if (currentBook >= books.length) {
472
+ return "Apocalypse 22:21 (Terminé!)";
473
+ }
474
+
475
+ // Simplified chapter calculation (in reality each book has different chapter verse counts)
476
+ const versesPerChapter = 30; // Approximation
477
+ currentChapter = Math.floor(remainingVerses / versesPerChapter) + 1;
478
+ const startVerse = (remainingVerses % versesPerChapter) + 1;
479
+ const endVerse = Math.min(startVerse + todayVerses - 1, versesPerChapter);
480
+
481
+ return `${books[currentBook].name} ${currentChapter}:${startVerse}-${endVerse}`;
482
+ }
483
+
484
+ // Update statistics
485
+ function updateStats() {
486
+ document.getElementById('currentStreak').textContent = `${appData.streak} jours`;
487
+ document.getElementById('successDays').textContent = `${appData.successDays}/${totalDays}`;
488
+ document.getElementById('avgSpeed').textContent = `${versesPerMinute} v/min`;
489
+ }
490
+
491
+ // Celebration effect
492
+ function showConfetti() {
493
+ // Create confetti elements
494
+ for (let i = 0; i < 50; i++) {
495
+ const confetti = document.createElement('div');
496
+ confetti.className = 'absolute w-2 h-2 bg-yellow-400 rounded-full';
497
+ confetti.style.left = `${Math.random() * 100}%`;
498
+ confetti.style.top = '-10px';
499
+ confetti.style.transform = `rotate(${Math.random() * 360}deg)`;
500
+
501
+ document.body.appendChild(confetti);
502
+
503
+ // Animate
504
+ const animation = confetti.animate([
505
+ { top: '-10px', opacity: 1 },
506
+ { top: `${Math.random() * 100 + 50}%`, opacity: 0 }
507
+ ], {
508
+ duration: 1000 + Math.random() * 2000,
509
+ easing: 'cubic-bezier(0.1, 0.8, 0.3, 1)'
510
+ });
511
+
512
+ animation.onfinish = () => confetti.remove();
513
+ }
514
+ }
515
+
516
+ // Floating action button
517
+ document.getElementById('fab').addEventListener('click', function() {
518
+ const actions = [
519
+ {icon: 'fa-book', text: 'Lire maintenant', color: 'bg-blue-500'},
520
+ {icon: 'fa-calendar-alt', text: 'Planifier', color: 'bg-purple-500'},
521
+ {icon: 'fa-share-alt', text: 'Partager', color: 'bg-green-500'},
522
+ {icon: 'fa-trophy', text: 'Récompenses', color: 'bg-yellow-500'}
523
+ ];
524
+
525
+ const fabMenu = document.createElement('div');
526
+ fabMenu.className = 'fixed bottom-24 right-8 bg-white rounded-xl shadow-xl z-20 p-2';
527
+ fabMenu.style.width = '200px';
528
+
529
+ actions.forEach(action => {
530
+ const btn = document.createElement('button');
531
+ btn.className = `w-full flex items-center p-3 text-white ${action.color} rounded-lg mb-2 last:mb-0 hover:opacity-90 transition`;
532
+ btn.innerHTML = `<i class="fas ${action.icon} mr-3"></i> ${action.text}`;
533
+ fabMenu.appendChild(btn);
534
+ });
535
+
536
+ document.body.appendChild(fabMenu);
537
+
538
+ // Close on outside click
539
+ setTimeout(() => {
540
+ document.addEventListener('click', function closeFabMenu(e) {
541
+ if (!e.target.closest('.fixed.bottom-24.right-8') && e.target.id !== 'fab') {
542
+ fabMenu.remove();
543
+ document.removeEventListener('click', closeFabMenu);
544
+ }
545
+ });
546
+ }, 10);
547
+ });
548
+ });
549
+ </script>
550
+ <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=THEGREA241/thegreat" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
551
+ </html>