Noteo/changelog.html at main · Pyronixus/Noteo · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- SEO -->
    <title>Changelog — Noteo.</title>
    <meta name="description" content="Historique complet des mises à jour de Noteo. Découvrez toutes les nouvelles fonctionnalités, correctifs et améliorations.">
    <meta name="author" content="Pyro">
    <meta name="robots" content="index, follow">
    <meta name="theme-color" content="#6366f1" media="(prefers-color-scheme: light)">
    <meta name="theme-color" content="#05050a" media="(prefers-color-scheme: dark)">
    <meta name="color-scheme" content="light dark">

    <!-- Icons -->
    <link rel="icon" type="image/png" href="Source/Assets/Img/logo.png">
    <link rel="apple-touch-icon" href="Source/Assets/Img/logo.png">

    <!-- Resource hints -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link rel="dns-prefetch" href="https://cdn.tailwindcss.com">

    <!-- Tailwind (blocking — required for first paint) -->
    <script src="https://cdn.tailwindcss.com"></script>

    <!-- Fonts -->
    <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">

    <!-- Styles -->
    <link rel="stylesheet" href="Source/code/style.css">
</head>
<body class="antialiased light-mode">
    <script>if(/Macintosh|MacIntel|Mac OS X/i.test(navigator.userAgent))document.body.classList.add("is-macos");</script>
    <div class="blobs-container">
        <div class="blob blob-1"></div>
        <div class="blob blob-2"></div>
        <div class="blob blob-3"></div>
    </div>

    <div class="min-h-screen flex flex-col">
        <!-- Header -->
        <header class="sticky top-0 z-40 h-20 bg-[var(--bg-body)]/40 backdrop-blur-md border-b border-[var(--border)]">
            <div class="max-w-7xl mx-auto px-6 h-full flex items-center justify-between">
                <div class="flex items-center gap-4">
                    <div class="w-10 h-10 rounded-xl bg-gradient-to-tr from-indigo-600 to-purple-500 flex items-center justify-center shadow-lg">
                        <span class="text-white text-xl font-black">N.</span>
                    </div>
                    <div>
                        <h1 class="text-2xl font-black italic text-[var(--text-main)] tracking-tighter">Noteo.</h1>
                        <p class="text-xs font-bold text-[var(--text-muted)] uppercase tracking-widest">Historique complet des versions</p>
                    </div>
                </div>
                <a href="index.html" class="inline-flex items-center gap-2 px-6 py-3 rounded-xl text-sm font-bold bg-indigo-500/20 text-indigo-500 hover:bg-indigo-500 hover:text-white hover:scale-105 active:scale-95 transition-all duration-200 shadow-lg hover:shadow-indigo-500/30">
                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path></svg>
                    Retour à Noteo
                </a>
            </div>
        </header>

        <!-- Main Content -->
        <main class="max-w-4xl mx-auto px-6 py-12 flex-grow w-full">
            <div class="mb-12">
                <h2 class="text-4xl font-black text-[var(--text-main)] mb-4">Changelog Complet</h2>
                <div class="glass-card p-4 rounded-xl mb-8 text-sm">
                    <p class="text-[var(--text-muted)]"><strong>🚀 <span class="text-red-500">X</span>.x.x</strong> = Mise à jour majeure | <strong>⭐ x.<span class="text-blue-500">X</span>.x</strong> = Mise à jour importante | <strong>🔧 x.x.<span class="text-purple-500">X</span></strong> = Correctif/petites améliorations</p>
                </div>

                <!-- Sort & Expand Options -->
                <div class="flex flex-wrap gap-3 mb-6">
                    <div class="flex items-center gap-2">
                        <span class="text-sm font-bold text-[var(--text-muted)]">Trier par :</span>
                    </div>
                    <button onclick="sortChangelog('newest')" class="sort-btn active px-4 py-2 rounded-xl text-sm font-bold bg-indigo-500/20 text-indigo-500 hover:bg-indigo-500 hover:text-white transition-all">
                        Plus récent
                    </button>
                    <button onclick="sortChangelog('oldest')" class="sort-btn px-4 py-2 rounded-xl text-sm font-bold text-[var(--text-muted)] hover:bg-[var(--input-bg)] transition-all">
                        Plus ancien
                    </button>
                    <button onclick="sortChangelog('major')" class="sort-btn px-4 py-2 rounded-xl text-sm font-bold text-[var(--text-muted)] hover:bg-[var(--input-bg)] transition-all">
                        🚀 Majeur
                    </button>
                    <button onclick="sortChangelog('important')" class="sort-btn px-4 py-2 rounded-xl text-sm font-bold text-[var(--text-muted)] hover:bg-[var(--input-bg)] transition-all">
                        ⭐ Important
                    </button>
                    <button onclick="sortChangelog('bugfix')" class="sort-btn px-4 py-2 rounded-xl text-sm font-bold text-[var(--text-muted)] hover:bg-[var(--input-bg)] transition-all">
                        🔧 Correctif
                    </button>
                    <div class="flex-1 md:flex-none"></div>
                    <button onclick="toggleAllVersions()" id="toggle-all-btn" class="px-4 py-2 rounded-xl text-sm font-bold bg-purple-500/20 text-purple-500 hover:bg-purple-500 hover:text-white transition-all">
                        📖 Tout dérouler
                    </button>
                </div>
            </div>

            <div id="versions-container"></div>
        </main>

        <!-- Footer -->
        <footer class="mt-12 p-6 text-center text-[var(--text-muted)] text-sm border-t border-[var(--border)]">
            <p>Noteo © 2026 - Créé par <a href="https://github.com/Pyronixus" class="hover:text-purple-500 transition-colors font-bold">Pyro</a></p>
        </footer>
    </div>

    <!-- Scroll to Top Button -->
    <button id="scroll-to-top" class="fixed bottom-8 right-8 z-50 p-3 rounded-full bg-gradient-to-tr from-indigo-500 to-purple-500 text-white shadow-lg hover:shadow-indigo-500/50 active:scale-90 transition-all duration-200 opacity-0 translate-y-12 pointer-events-none hover:scale-110" title="Remonter au début">
        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 19V5M5 12l7-7 7 7"></path>
        </svg>
    </button>

    <script>
        const versionsData = [
            {
                number: "2.3",
                type: "important",
                color: "indigo",
                label: "Mise à jour importante",
                icon: "⭐",
                current: true,
                content: `
                    <div class="space-y-3 mb-6 text-[var(--text-main)]">
                        <h4 class="font-bold text-lg text-indigo-500 mb-3">🍎 Support macOS Natif</h4>
                        <ul class="space-y-2 ml-4">
                            <li class="flex gap-3"><span class="text-indigo-500 font-bold">→</span><span><strong>Rendu macOS Optimisé</strong> - Détection automatique de macOS et remplacement du backdrop-filter (non supporté) par des dégradés solides multi-couches</span></li>
                            <li class="flex gap-3"><span class="text-indigo-500 font-bold">→</span><span><strong>Thème Clair & Sombre</strong> - Overrides CSS complets pour une apparence premium sur tous les navigateurs macOS</span></li>
                            <li class="flex gap-3"><span class="text-indigo-500 font-bold">→</span><span><strong>Ombres Riches</strong> - Box-shadows multicouches en remplacement du flou pour une profondeur visuelle équivalente</span></li>
                        </ul>
                    </div>
                    <div class="space-y-3 mb-6 text-[var(--text-main)]">
                        <h4 class="font-bold text-lg text-indigo-500 mb-3">⚡ Performances Maximales</h4>
                        <ul class="space-y-2 ml-4">
                            <li class="flex gap-3"><span class="text-indigo-500 font-bold">→</span><span><strong>Chart.js Chargé à la Demande</strong> - La librairie graphique n'est téléchargée que quand l'onglet Graphiques est ouvert</span></li>
                            <li class="flex gap-3"><span class="text-indigo-500 font-bold">→</span><span><strong>DOM Cache Étendu</strong> - 19 éléments DOM mis en cache pour éviter les lookups répétés</span></li>
                            <li class="flex gap-3"><span class="text-indigo-500 font-bold">→</span><span><strong>getProfiles() Centralisé</strong> - Suppression de 6 scans redondants du localStorage en un seul helper optimisé</span></li>
                            <li class="flex gap-3"><span class="text-indigo-500 font-bold">→</span><span><strong>Rendu Historique Optimisé</strong> - Itération inverse directe sans <code>.reverse()</code> (zéro allocation supplémentaire)</span></li>
                            <li class="flex gap-3"><span class="text-indigo-500 font-bold">→</span><span><strong>Calcul des Tags O(N+M)</strong> - Pré-calcul des comptages de tags remplace le filtre imbriqué O(N×M)</span></li>
                            <li class="flex gap-3"><span class="text-indigo-500 font-bold">→</span><span><strong>Tri CustomTag Optimisé</strong> - <code>.some()</code> avec court-circuit remplace <code>.map().includes()</code></span></li>
                            <li class="flex gap-3"><span class="text-indigo-500 font-bold">→</span><span><strong>Script Différé</strong> - Attribut <code>defer</code> sur script.js + préchargement CSS pour un premier rendu plus rapide</span></li>
                            <li class="flex gap-3"><span class="text-indigo-500 font-bold">→</span><span><strong>Scroll Passif</strong> - Listener scroll avec <code>passive: true</code>, <code>will-change</code> retiré des éléments non-animés</span></li>
                        </ul>
                    </div>
                    <div class="space-y-3 mb-6 text-[var(--text-main)]">
                        <h4 class="font-bold text-lg text-indigo-500 mb-3">📱 Responsive Complet</h4>
                        <ul class="space-y-2 ml-4">
                            <li class="flex gap-3"><span class="text-indigo-500 font-bold">→</span><span><strong>6 Breakpoints CSS</strong> - Adaptation parfaite de 480px à 1536px sur tous les écrans</span></li>
                            <li class="flex gap-3"><span class="text-indigo-500 font-bold">→</span><span><strong>Classes Responsives HTML</strong> - Tous les composants adaptés mobile/tablette/desktop</span></li>
                        </ul>
                    </div>
                    <div class="space-y-3 mb-6 text-[var(--text-main)]">
                        <h4 class="font-bold text-lg text-indigo-500 mb-3">🔧 Corrections & Nettoyage</h4>
                        <ul class="space-y-2 ml-4">
                            <li class="flex gap-3"><span class="text-indigo-500 font-bold">→</span><span><strong>Correction Critique</strong> - Du code de <code>switchTab()</code> s'était glissé dans <code>importCloudAccount()</code>, causant une erreur à l'import</span></li>
                            <li class="flex gap-3"><span class="text-indigo-500 font-bold">→</span><span><strong>Modal Pyro</strong> - La fonction <code>openPyroModal()</code> manquante est ajoutée</span></li>
                            <li class="flex gap-3"><span class="text-indigo-500 font-bold">→</span><span><strong>Sécurité</strong> - Suppression du <code>console.info</code> qui exposait le code PIN de récupération dans la console</span></li>
                            <li class="flex gap-3"><span class="text-indigo-500 font-bold">→</span><span><strong>Code Mort Retiré</strong> - Suppression de <code>notify()</code>, <code>initEmailJS()</code> stub et la modal de sélection du mode mobile</span></li>
                        </ul>
                    </div>
                `
            },
            {
                number: "2.2",
                type: "important",
                color: "cyan",
                label: "Mise à jour importante",
                icon: "⭐",
                content: `
                    <div class="space-y-3 mb-6 text-[var(--text-main)]">
                        <h4 class="font-bold text-lg text-cyan-500 mb-3">🛠️ Mode Développeur Avancé</h4>
                        <ul class="space-y-2 ml-4">
                            <li class="flex gap-3">
                                <span class="text-cyan-500 font-bold">→</span>
                                <span><strong>Actions Rapides</strong> - Basculer le thème, vider le cache, forcer le rendu, etc. en un clic</span>
                            </li>
                            <li class="flex gap-3">
                                <span class="text-cyan-500 font-bold">→</span>
                                <span><strong>Informations App Enrichies</strong> - Détails complets sur l'état de l'application et du viewport</span>
                            </li>
                        </ul>
                    </div>
                    <div class="space-y-3 mb-6 text-[var(--text-main)]">
                        <h4 class="font-bold text-lg text-cyan-500 mb-3">📱 Simulation d'Appareils Réaliste</h4>
                        <ul class="space-y-2 ml-4">
                            <li class="flex gap-3">
                                <span class="text-cyan-500 font-bold">→</span>
                                <span><strong>Chrome iOS</strong> - Barre de statut avec Dynamic Island, indicateur d'accueil et batterie simulés</span>
                            </li>
                            <li class="flex gap-3">
                                <span class="text-cyan-500 font-bold">→</span>
                                <span><strong>Chrome Android</strong> - Barre de statut et barre de navigation gestuelle réalistes</span>
                            </li>
                            <li class="flex gap-3">
                                <span class="text-cyan-500 font-bold">→</span>
                                <span><strong>Viewports Précis</strong> - Dimensions exactes de chaque appareil simulé</span>
                            </li>
                        </ul>
                    </div>
                    <div class="space-y-3 mb-6 text-[var(--text-main)]">
                        <h4 class="font-bold text-lg text-cyan-500 mb-3">✨ Améliorations UX</h4>
                        <ul class="space-y-2 ml-4">
                            <li class="flex gap-3">
                                <span class="text-cyan-500 font-bold">→</span>
                                <span><strong>Fermeture des Modals</strong> - Cliquer en dehors d'une modal la ferme automatiquement</span>
                            </li>
                            <li class="flex gap-3">
                                <span class="text-cyan-500 font-bold">→</span>
                                <span><strong>Optimisation Performances</strong> - Chargement paresseux du terminal développeur (zéro coût quand fermé)</span>
                            </li>
                        </ul>
                    </div>
                `
            },
            {
                number: "2.1",
                type: "important",
                color: "emerald",
                label: "Mise à jour importante",
                icon: "⭐",
                content: `
                    <div class="space-y-3 mb-6 text-[var(--text-main)]">
                        <h4 class="font-bold text-lg text-emerald-500 mb-3">📱 Améliorations Mobile</h4>
                        <ul class="space-y-2 ml-4">
                            <li class="flex gap-3">
                                <span class="text-emerald-500 font-bold">→</span>
                                <span><strong>Mode Mobile Personnalisé</strong> - Choix entre visualisation et édition complète au premier accès</span>
                            </li>
                            <li class="flex gap-3">
                                <span class="text-emerald-500 font-bold">→</span>
                                <span><strong>Interface Adaptative</strong> - Masquage automatique du formulaire d'ajout en mode visualisation</span>
                            </li>
                            <li class="flex gap-3">
                                <span class="text-emerald-500 font-bold">→</span>
                                <span><strong>Import Cloud Simplifié</strong> - Section dédiée pour importer des comptes via lien de partage</span>
                            </li>
                        </ul>
                    </div>
                    <div class="space-y-3 mb-6 text-[var(--text-main)]">
                        <h4 class="font-bold text-lg text-emerald-500 mb-3">⚙️ Paramètres Étendus</h4>
                        <ul class="space-y-2 ml-4">
                            <li class="flex gap-3">
                                <span class="text-emerald-500 font-bold">→</span>
                                <span><strong>Contrôle d'Affichage</strong> - Option pour masquer/afficher le formulaire d'ajout de matière</span>
                            </li>
                            <li class="flex gap-3">
                                <span class="text-emerald-500 font-bold">→</span>
                                <span><strong>Paramètres Synchronisés</strong> - Préférences d'affichage sauvegardées sur tous les appareils</span>
                            </li>
                        </ul>
                    </div>
                    <div class="space-y-3 text-[var(--text-main)]">
                        <h4 class="font-bold text-lg text-emerald-500 mb-3">🌐 Open Source</h4>
                        <ul class="space-y-2 ml-4">
                            <li class="flex gap-3">
                                <span class="text-emerald-500 font-bold">→</span>
                                <span><strong>Modal Open Source</strong> - Informations sur la licence et accès direct au code source</span>
                            </li>
                            <li class="flex gap-3">
                                <span class="text-emerald-500 font-bold">→</span>
                                <span><strong>Lien GitHub Prominent</strong> - Accès facilité au dépôt du projet</span>
                            </li>
                        </ul>
                    </div>
                `
            },
            { number: "1.9.2", type: "bugfix", color: "purple", label: "Correctif", icon: "🔧", content: "<h4 class='font-bold text-lg text-purple-500 mb-3'>🐛 Corrections</h4><ul class='space-y-2 ml-4'><li class='flex gap-3'><span class='text-purple-500 font-bold'>→</span><span>Correction d'un bug critique du Cloud lors de la synchronisation</span></li><li class='flex gap-3'><span class='text-purple-500 font-bold'>→</span><span>Optimisation du chiffrement des données</span></li></ul>" },
            { number: "1.9.1", type: "bugfix", color: "purple", label: "Correctif", icon: "🔧", content: "<h4 class='font-bold text-lg text-purple-500 mb-3'>🐛 Corrections</h4><ul class='space-y-2 ml-4'><li class='flex gap-3'><span class='text-purple-500 font-bold'>→</span><span>Correction de l'export Cloud sur mobile</span></li><li class='flex gap-3'><span class='text-purple-500 font-bold'>→</span><span>Amélioration de la validation du lien de partage</span></li></ul>" },
            { number: "1.9", type: "important", color: "purple", label: "Mise à jour importante", icon: "⭐", content: "<div class='space-y-3 mb-6'><h4 class='font-bold text-lg text-purple-500 mb-3'>✨ Nouvelles Fonctionnalités</h4><ul class='space-y-2 ml-4'><li class='flex gap-3'><span class='text-purple-500 font-bold'>→</span><span><strong>Base Cloud</strong> - Infrastructure de base pour Cloud</span></li><li class='flex gap-3'><span class='text-purple-500 font-bold'>→</span><span><strong>Synchronisation Multi-appareil</strong> - Accès sur plusieurs appareils</span></li></ul></div><div class='space-y-3'><h4 class='font-bold text-lg text-purple-500 mb-3'>🔧 Améliorations</h4><ul class='space-y-2 ml-4'><li class='flex gap-3'><span class='text-purple-500 font-bold'>→</span><span>Architecture préparée pour le Cloud</span></li></ul></div>" },
            { number: "1.8.1", type: "bugfix", color: "blue", label: "Correctif", icon: "🔧", content: "<h4 class='font-bold text-lg text-blue-500 mb-3'>🐛 Corrections</h4><ul class='space-y-2 ml-4'><li class='flex gap-3'><span class='text-blue-500 font-bold'>→</span><span>Correction des modals sur écrans petits</span></li><li class='flex gap-3'><span class='text-blue-500 font-bold'>→</span><span>Amélioration de la performance sur mobile faible</span></li></ul>" },
            { number: "1.8", type: "important", color: "blue", label: "Mise à jour importante", icon: "⭐", content: "<h4 class='font-bold text-lg text-blue-500 mb-3'>🎨 Améliorations Interface</h4><ul class='space-y-2 ml-4'><li class='flex gap-3'><span class='text-blue-500 font-bold'>→</span><span>Optimisations complètes de l'interface mobile</span></li><li class='flex gap-3'><span class='text-blue-500 font-bold'>→</span><span>Amélioration des performances générales</span></li><li class='flex gap-3'><span class='text-blue-500 font-bold'>→</span><span>Gestion avancée des modals</span></li></ul>" },
            { number: "1.7.2", type: "bugfix", color: "rose", label: "Correctif", icon: "🔧", content: "<h4 class='font-bold text-lg text-rose-500 mb-3'>🐛 Corrections</h4><ul class='space-y-2 ml-4'><li class='flex gap-3'><span class='text-rose-500 font-bold'>→</span><span>Correction de la sauvegarde locale sur Safari</span></li><li class='flex gap-3'><span class='text-rose-500 font-bold'>→</span><span>Gestion des erreurs de sauvegarde améliorée</span></li></ul>" },
            { number: "1.7.1", type: "bugfix", color: "rose", label: "Correctif", icon: "🔧", content: "<h4 class='font-bold text-lg text-rose-500 mb-3'>🐛 Corrections</h4><ul class='space-y-2 ml-4'><li class='flex gap-3'><span class='text-rose-500 font-bold'>→</span><span>Correction du mode mobile restreint sur certains appareils</span></li></ul>" },
            { number: "1.7", type: "important", color: "rose", label: "Mise à jour importante", icon: "⭐", content: "<h4 class='font-bold text-lg text-rose-500 mb-3'>📱 Corrections & Stabilité</h4><ul class='space-y-2 ml-4'><li class='flex gap-3'><span class='text-rose-500 font-bold'>→</span><span>Amélioration du mode mobile restreint</span></li><li class='flex gap-3'><span class='text-rose-500 font-bold'>→</span><span>Stabilisation complète de la sauvegarde locale</span></li><li class='flex gap-3'><span class='text-rose-500 font-bold'>→</span><span>Corrections de bugs mineurs</span></li></ul>" },
            { number: "1.6.2", type: "bugfix", color: "amber", label: "Correctif", icon: "🔧", content: "<h4 class='font-bold text-lg text-amber-500 mb-3'>🐛 Corrections</h4><ul class='space-y-2 ml-4'><li class='flex gap-3'><span class='text-amber-500 font-bold'>→</span><span>Correction de l'option de tri sur mobile</span></li><li class='flex gap-3'><span class='text-amber-500 font-bold'>→</span><span>Amélioration du responsive du footer</span></li></ul>" },
            { number: "1.6.1", type: "bugfix", color: "amber", label: "Correctif", icon: "🔧", content: "<h4 class='font-bold text-lg text-amber-500 mb-3'>🐛 Corrections</h4><ul class='space-y-2 ml-4'><li class='flex gap-3'><span class='text-amber-500 font-bold'>→</span><span>Correction d'une multitude de bugs critiques</span></li><li class='flex gap-3'><span class='text-amber-500 font-bold'>→</span><span>Stabilité générale améliorée</span></li></ul>" },
            { number: "1.6", type: "important", color: "amber", label: "Mise à jour importante", icon: "⭐", content: "<div class='space-y-3 mb-6'><h4 class='font-bold text-lg text-amber-500 mb-3'>✨ Nouvelles Fonctionnalités</h4><ul class='space-y-2 ml-4'><li class='flex gap-3'><span class='text-amber-500 font-bold'>→</span><span><strong>Footer Ajouté</strong> - Pied de page avec informations légales et liens utiles</span></li><li class='flex gap-3'><span class='text-amber-500 font-bold'>→</span><span><strong>Option de Tri</strong> - Tri personnalisé des matières par nom, moyenne, ou date</span></li></ul></div><div class='space-y-3'><h4 class='font-bold text-lg text-amber-500 mb-3'>🐛 Corrections de Bugs</h4><ul class='space-y-2 ml-4'><li class='flex gap-3'><span class='text-amber-500 font-bold'>→</span><span>Correction d'une multitude de bugs critiques et mineurs</span></li><li class='flex gap-3'><span class='text-amber-500 font-bold'>→</span><span>Stabilité générale améliorée</span></li></ul></div>" },
            { number: "1.5.1", type: "bugfix", color: "green", label: "Correctif", icon: "🔧", content: "<h4 class='font-bold text-lg text-green-500 mb-3'>🐛 Corrections</h4><ul class='space-y-2 ml-4'><li class='flex gap-3'><span class='text-green-500 font-bold'>→</span><span>Correction export PDF sur certains navigateurs</span></li><li class='flex gap-3'><span class='text-green-500 font-bold'>→</span><span>Amélioration de la sélection multiple</span></li></ul>" },
            { number: "1.5", type: "important", color: "green", label: "Mise à jour importante", icon: "⭐", content: "<div class='space-y-3 mb-6'><h4 class='font-bold text-lg text-green-500 mb-3'>✨ Nouvelles Fonctionnalités</h4><ul class='space-y-2 ml-4'><li class='flex gap-3'><span class='text-green-500 font-bold'>→</span><span><strong>Sélection Multiple</strong> - Sélectionner plusieurs matières pour les analyser ensemble</span></li><li class='flex gap-3'><span class='text-green-500 font-bold'>→</span><span><strong>Export PDF</strong> - Exporter les notes et analyses en PDF</span></li></ul></div><div class='space-y-3'><h4 class='font-bold text-lg text-green-500 mb-3'>🔧 Améliorations</h4><ul class='space-y-2 ml-4'><li class='flex gap-3'><span class='text-green-500 font-bold'>→</span><span>Interface de calcul optimisée</span></li><li class='flex gap-3'><span class='text-green-500 font-bold'>→</span><span>Temps de chargement réduit de 20%</span></li></ul></div>" },
            { number: "1.4.1", type: "bugfix", color: "cyan", label: "Correctif", icon: "🔧", content: "<h4 class='font-bold text-lg text-cyan-500 mb-3'>🐛 Corrections</h4><ul class='space-y-2 ml-4'><li class='flex gap-3'><span class='text-cyan-500 font-bold'>→</span><span>Correction des raccourcis clavier sur Mac</span></li><li class='flex gap-3'><span class='text-cyan-500 font-bold'>→</span><span>Amélioration des notifications</span></li></ul>" },
            { number: "1.4", type: "important", color: "cyan", label: "Mise à jour importante", icon: "⭐", content: "<div class='space-y-3 mb-6'><h4 class='font-bold text-lg text-cyan-500 mb-3'>✨ Nouvelles Fonctionnalités</h4><ul class='space-y-2 ml-4'><li class='flex gap-3'><span class='text-cyan-500 font-bold'>→</span><span><strong>Notification des Dépassements</strong> - Alertes quand une note dépasse le barème</span></li><li class='flex gap-3'><span class='text-cyan-500 font-bold'>→</span><span><strong>Raccourcis Clavier</strong> - Ctrl+A pour ajouter, Ctrl+D pour supprimer</span></li></ul></div><div class='space-y-3'><h4 class='font-bold text-lg text-cyan-500 mb-3'>🐛 Corrections</h4><ul class='space-y-2 ml-4'><li class='flex gap-3'><span class='text-cyan-500 font-bold'>→</span><span>Correction du calcul de moyenne avec coefficients</span></li></ul></div>" },
            { number: "1.3.1", type: "bugfix", color: "teal", label: "Correctif", icon: "🔧", content: "<h4 class='font-bold text-lg text-teal-500 mb-3'>🐛 Corrections</h4><ul class='space-y-2 ml-4'><li class='flex gap-3'><span class='text-teal-500 font-bold'>→</span><span>Correction du thème sombre sur certains appareils</span></li><li class='flex gap-3'><span class='text-teal-500 font-bold'>→</span><span>Amélioration de la police dyslexique</span></li></ul>" },
            { number: "1.3", type: "important", color: "teal", label: "Mise à jour importante", icon: "⭐", content: "<div class='space-y-3 mb-6'><h4 class='font-bold text-lg text-teal-500 mb-3'>✨ Nouvelles Fonctionnalités</h4><ul class='space-y-2 ml-4'><li class='flex gap-3'><span class='text-teal-500 font-bold'>→</span><span><strong>Thème Sombre</strong> - Mode sombre complet avec respect circadien</span></li><li class='flex gap-3'><span class='text-teal-500 font-bold'>→</span><span><strong>Police Dyslexique</strong> - Support pour Open Dyslexic</span></li></ul></div><div class='space-y-3'><h4 class='font-bold text-lg text-teal-500 mb-3'>🔧 Améliorations</h4><ul class='space-y-2 ml-4'><li class='flex gap-3'><span class='text-teal-500 font-bold'>→</span><span>Accessibilité globale améliorée</span></li><li class='flex gap-3'><span class='text-teal-500 font-bold'>→</span><span>Support des lecteurs d'écran</span></li></ul></div>" },
            { number: "1.2.2", type: "bugfix", color: "blue", label: "Correctif", icon: "🔧", content: "<h4 class='font-bold text-lg text-blue-500 mb-3'>🐛 Corrections</h4><ul class='space-y-2 ml-4'><li class='flex gap-3'><span class='text-blue-500 font-bold'>→</span><span>Correction des graphiques radar sur mobile</span></li><li class='flex gap-3'><span class='text-blue-500 font-bold'>→</span><span>Amélioration du rendu des graphiques</span></li></ul>" },
            { number: "1.2.1", type: "bugfix", color: "blue", label: "Correctif", icon: "🔧", content: "<h4 class='font-bold text-lg text-blue-500 mb-3'>🐛 Corrections</h4><ul class='space-y-2 ml-4'><li class='flex gap-3'><span class='text-blue-500 font-bold'>→</span><span>Correction de la comparaison de périodes</span></li></ul>" },
            { number: "1.2", type: "important", color: "blue", label: "Mise à jour importante", icon: "⭐", content: "<div class='space-y-3 mb-6'><h4 class='font-bold text-lg text-blue-500 mb-3'>✨ Nouvelles Fonctionnalités</h4><ul class='space-y-2 ml-4'><li class='flex gap-3'><span class='text-blue-500 font-bold'>→</span><span><strong>Graphiques Avancés</strong> - Types de graphiques supplémentaires (radar, box-plot)</span></li><li class='flex gap-3'><span class='text-blue-500 font-bold'>→</span><span><strong>Comparaison de Périodes</strong> - Comparer les performances entre semestres</span></li></ul></div><div class='space-y-3'><h4 class='font-bold text-lg text-blue-500 mb-3'>🔧 Améliorations</h4><ul class='space-y-2 ml-4'><li class='flex gap-3'><span class='text-blue-500 font-bold'>→</span><span>Performance des graphiques optimisée</span></li></ul></div>" },
            { number: "1.1.2", type: "bugfix", color: "fuchsia", label: "Correctif", icon: "🔧", content: "<h4 class='font-bold text-lg text-fuchsia-500 mb-3'>🐛 Corrections</h4><ul class='space-y-2 ml-4'><li class='flex gap-3'><span class='text-fuchsia-500 font-bold'>→</span><span>Correction du PIN sur certains navigateurs</span></li><li class='flex gap-3'><span class='text-fuchsia-500 font-bold'>→</span><span>Amélioration de la sécurité des données</span></li></ul>" },
            { number: "1.1.1", type: "bugfix", color: "fuchsia", label: "Correctif", icon: "🔧", content: "<h4 class='font-bold text-lg text-fuchsia-500 mb-3'>🐛 Corrections</h4><ul class='space-y-2 ml-4'><li class='flex gap-3'><span class='text-fuchsia-500 font-bold'>→</span><span>Correction du système de récupération de compte</span></li></ul>" },
            { number: "1.1", type: "important", color: "fuchsia", label: "Mise à jour importante", icon: "⭐", content: "<div class='space-y-3 mb-6'><h4 class='font-bold text-lg text-fuchsia-500 mb-3'>✨ Nouvelles Fonctionnalités</h4><ul class='space-y-2 ml-4'><li class='flex gap-3'><span class='text-fuchsia-500 font-bold'>→</span><span><strong>Protection par Code PIN</strong> - Sécurisez vos comptes avec un PIN 4-8 chiffres</span></li><li class='flex gap-3'><span class='text-fuchsia-500 font-bold'>→</span><span><strong>Récupération de Compte</strong> - Système de récupération par email simulé</span></li></ul></div><div class='space-y-3'><h4 class='font-bold text-lg text-fuchsia-500 mb-3'>🔧 Améliorations</h4><ul class='space-y-2 ml-4'><li class='flex gap-3'><span class='text-fuchsia-500 font-bold'>→</span><span>LocalStorage sécurisé</span></li><li class='flex gap-3'><span class='text-fuchsia-500 font-bold'>→</span><span>Validation des données côté client améliorée</span></li></ul></div>" },
            { number: "1.0.2", type: "bugfix", color: "pink", label: "Correctif", icon: "🔧", content: "<h4 class='font-bold text-lg text-pink-500 mb-3'>🐛 Corrections</h4><ul class='space-y-2 ml-4'><li class='flex gap-3'><span class='text-pink-500 font-bold'>→</span><span>Correction du bug d'affichage des graphiques</span></li><li class='flex gap-3'><span class='text-pink-500 font-bold'>→</span><span>Amélioration du calcul de moyenne</span></li></ul>" },
            { number: "1.0.1", type: "bugfix", color: "pink", label: "Correctif", icon: "🔧", content: "<h4 class='font-bold text-lg text-pink-500 mb-3'>🐛 Corrections</h4><ul class='space-y-2 ml-4'><li class='flex gap-3'><span class='text-pink-500 font-bold'>→</span><span>Correction du bug d'import JSON</span></li><li class='flex gap-3'><span class='text-pink-500 font-bold'>→</span><span>Amélioration de la stabilité générale</span></li></ul>" },
            { number: "1.0", type: "major", color: "pink", label: "Lancement initial - Mise à jour majeure", icon: "🚀", content: "<div class='space-y-3 mb-6'><h4 class='font-bold text-lg text-pink-500 mb-3'>✨ Fonctionnalités de Base</h4><ul class='space-y-2 ml-4'><li class='flex gap-3'><span class='text-pink-500 font-bold'>→</span><span><strong>Gestion des Matières</strong> - Création, modification, suppression de matières avec couleurs</span></li><li class='flex gap-3'><span class='text-pink-500 font-bold'>→</span><span><strong>Gestion des Notes</strong> - Ajout de notes avec coefficients et calcul automatique</span></li><li class='flex gap-3'><span class='text-pink-500 font-bold'>→</span><span><strong>Gestion des Périodes</strong> - Organisation par semestres ou trimestres</span></li><li class='flex gap-3'><span class='text-pink-500 font-bold'>→</span><span><strong>Graphiques Interactifs</strong> - Visualisation des données avec Chart.js</span></li><li class='flex gap-3'><span class='text-pink-500 font-bold'>→</span><span><strong>Import/Export JSON</strong> - Sauvegarde et restauration des données</span></li></ul></div><div class='space-y-3 mb-6'><h4 class='font-bold text-lg text-pink-500 mb-3'>🎨 Interface & Design</h4><ul class='space-y-2 ml-4'><li class='flex gap-3'><span class='text-pink-500 font-bold'>→</span><span><strong>Design Glassmorphism</strong> - Interface moderne avec effet verre</span></li><li class='flex gap-3'><span class='text-pink-500 font-bold'>→</span><span><strong>Responsive Design</strong> - Compatible mobile, tablette et desktop</span></li><li class='flex gap-3'><span class='text-pink-500 font-bold'>→</span><span><strong>Thème Clair</strong> - Interface par défaut claire et épurée</span></li></ul></div><div class='space-y-3'><h4 class='font-bold text-lg text-pink-500 mb-3'>💾 Stockage & Performance</h4><ul class='space-y-2 ml-4'><li class='flex gap-3'><span class='text-pink-500 font-bold'>→</span><span>LocalStorage pour la persistance des données</span></li><li class='flex gap-3'><span class='text-pink-500 font-bold'>→</span><span>Application web progressive (PWA-ready)</span></li></ul></div>" }
        ];

        function parseVersion(versionStr) {
            return versionStr.split('.').map(num => parseInt(num, 10));
        }

        function compareVersions(a, b) {
            const aParts = parseVersion(a);
            const bParts = parseVersion(b);
            const maxLen = Math.max(aParts.length, bParts.length);
            for (let i = 0; i < maxLen; i++) {
                const aPart = aParts[i] || 0;
                const bPart = bParts[i] || 0;
                if (aPart !== bPart) return aPart - bPart;
            }
            return 0;
        }

        function renderVersionCard(version) {
            const sizeClass = version.type === 'major' || version.type === 'important' ? 'text-3xl' : 'text-2xl';
            const colorBg = `border-${version.color}-${version.type === 'bugfix' ? '400' : '500'}`;
            const colorText = `text-${version.color}-${version.type === 'bugfix' ? '400' : '500'}`;
            const currentBadge = version.current ? `<span class='px-4 py-2 rounded-xl bg-${version.color}-500/20 text-${version.color}-500 font-bold text-sm'>Actuelle</span>` : '';

            return `
                <div class="version-card glass-card rounded-[2rem] mb-4 border-l-4 border-${version.color}-${version.type === 'bugfix' ? '400' : '500'} overflow-hidden" data-version="${version.number}" data-type="${version.type}">
                    <button onclick="toggleVersion(this)" class="version-header w-full p-8 flex items-start justify-between hover:bg-[var(--input-bg)] transition-all cursor-pointer text-left">
                        <div>
                            <h3 class="${sizeClass} font-black text-[var(--text-main)] mb-2">Version ${version.number}</h3>
                            <p class="text-sm font-bold text-${version.color}-${version.type === 'bugfix' ? '400' : '500'} uppercase tracking-widest">${version.icon} ${version.label}</p>
                        </div>
                        <div class="flex items-center gap-4">
                            ${currentBadge}
                            <svg class="version-toggle w-6 h-6 text-[var(--text-muted)] transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 14l-7 7m0 0l-7-7m7 7V3"></path>
                            </svg>
                        </div>
                    </button>
                    <div class="version-content hidden px-8 pb-8 border-t border-[var(--border)]">
                        ${version.content}
                    </div>
                </div>
            `;
        }

        function renderVersions(sortType = 'newest') {
            let sortedVersions = [...versionsData];

            if (sortType === 'newest') {
                sortedVersions.sort((a, b) => compareVersions(b.number, a.number));
            } else if (sortType === 'oldest') {
                sortedVersions.sort((a, b) => compareVersions(a.number, b.number));
            } else if (sortType === 'major') {
                sortedVersions.sort((a, b) => {
                    if (a.type === 'major' && b.type !== 'major') return -1;
                    if (a.type !== 'major' && b.type === 'major') return 1;
                    return compareVersions(b.number, a.number);
                });
            } else if (sortType === 'important') {
                sortedVersions.sort((a, b) => {
                    const aIsPriority = a.type === 'major' || a.type === 'important';
                    const bIsPriority = b.type === 'major' || b.type === 'important';
                    if (aIsPriority && !bIsPriority) return -1;
                    if (!aIsPriority && bIsPriority) return 1;
                    return compareVersions(b.number, a.number);
                });
            } else if (sortType === 'bugfix') {
                sortedVersions.sort((a, b) => {
                    if (a.type === 'bugfix' && b.type !== 'bugfix') return -1;
                    if (a.type !== 'bugfix' && b.type === 'bugfix') return 1;
                    return compareVersions(b.number, a.number);
                });
            }

            const container = document.getElementById('versions-container');
            container.innerHTML = sortedVersions.map(v => renderVersionCard(v)).join('');
        }

        function toggleVersion(button) {
            const card = button.closest('.version-card');
            const content = card.querySelector('.version-content');
            const toggle = card.querySelector('.version-toggle');

            content.classList.toggle('hidden');
            toggle.style.transform = content.classList.contains('hidden') ? '' : 'rotate(180deg)';
        }

        function toggleAllVersions() {
            const btn = document.getElementById('toggle-all-btn');
            const allCards = document.querySelectorAll('.version-card');
            const allExpanded = Array.from(allCards).every(card => !card.querySelector('.version-content').classList.contains('hidden'));

            allCards.forEach(card => {
                const content = card.querySelector('.version-content');
                const toggle = card.querySelector('.version-toggle');

                if (allExpanded) {
                    content.classList.add('hidden');
                    toggle.style.transform = '';
                } else {
                    content.classList.remove('hidden');
                    toggle.style.transform = 'rotate(180deg)';
                }
            });

            btn.textContent = allExpanded ? '📖 Tout dérouler' : '📖 Tout replier';
        }

        function sortChangelog(sortType) {
            renderVersions(sortType);
            document.querySelectorAll('.sort-btn').forEach(btn => btn.classList.remove('active', 'bg-indigo-500/20', 'text-indigo-500'));
            event.target.classList.add('active', 'bg-indigo-500/20', 'text-indigo-500');
        }

        // Initial render
        renderVersions();

        // Scroll to Top Button functionality
        const scrollToTopBtn = document.getElementById('scroll-to-top');

        // Show/hide button based on scroll position
        window.addEventListener('scroll', () => {
            if (window.scrollY > 300) {
                scrollToTopBtn.classList.remove('opacity-0', 'translate-y-12', 'pointer-events-none');
                scrollToTopBtn.classList.add('opacity-100', 'translate-y-0');
            } else {
                scrollToTopBtn.classList.add('opacity-0', 'translate-y-12', 'pointer-events-none');
                scrollToTopBtn.classList.remove('opacity-100', 'translate-y-0');
            }
        });

        // Scroll to top when button is clicked
        scrollToTopBtn.addEventListener('click', () => {
            window.scrollTo({
                top: 0,
                behavior: 'smooth'
            });
        });
    </script>
    <script src="Source/code/script.js"></script>
</body>
</html>