Des tonnes de modifications notamment VIM / Couleurs / typos

templates/about.html

@@ -0,0 +1,119 @@
+<div id="about-content" style="padding: 3rem; max-width: 900px; margin: 0 auto;">
+    <div style="text-align: center; margin-bottom: 3rem;">
+        <h1 style="font-size: 2.5rem; color: #c792ea; margin-bottom: 1rem;">
+            📝 About Project Notes
+        </h1>
+        <p style="font-size: 1.2rem; color: var(--text-secondary); margin-bottom: 2rem;">
+            Un gestionnaire de notes Markdown moderne et puissant
+        </p>
+    </div>
+
+    <div style="margin-top: 3rem;">
+        <h2 style="color: #82aaff; font-size: 1.5rem; margin-bottom: 1.5rem;">
+            🚀 Démarrage rapide
+        </h2>
+        <div style="display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));">
+            <div style="background: var(--bg-secondary); border: 1px solid var(--border-primary); border-radius: var(--radius-md); padding: 1.5rem;">
+                <h3 style="color: #89ddff; margin-bottom: 0.5rem;">📁 Parcourir</h3>
+                <p style="color: var(--text-secondary); font-size: 0.9rem; margin-bottom: 1rem;">
+                    Explorez vos notes dans l'arborescence à gauche
+                </p>
+            </div>
+            <div style="background: var(--bg-secondary); border: 1px solid var(--border-primary); border-radius: var(--radius-md); padding: 1.5rem;">
+                <h3 style="color: #c3e88d; margin-bottom: 0.5rem;">🔍 Rechercher</h3>
+                <p style="color: var(--text-secondary); font-size: 0.9rem; margin-bottom: 1rem;">
+                    Utilisez la barre de recherche en haut pour trouver vos notes
+                </p>
+            </div>
+            <div style="background: var(--bg-secondary); border: 1px solid var(--border-primary); border-radius: var(--radius-md); padding: 1.5rem;">
+                <h3 style="color: #ffcb6b; margin-bottom: 0.5rem;">⚡ Slash commands</h3>
+                <p style="color: var(--text-secondary); font-size: 0.9rem; margin-bottom: 1rem;">
+                    Tapez <code style="color: #f07178;">/</code> dans l'éditeur pour insérer du Markdown
+                </p>
+            </div>
+        </div>
+    </div>
+
+    <div style="margin-top: 3rem;">
+        <h2 style="color: #82aaff; font-size: 1.5rem; margin-bottom: 1.5rem;">
+            ✨ Fonctionnalités
+        </h2>
+        <ul style="color: var(--text-secondary); line-height: 2; list-style: none; padding: 0;">
+            <li style="padding: 0.5rem 0; border-bottom: 1px solid var(--border-secondary);">
+                <span style="color: #c792ea;">◆</span> Éditeur Markdown avec coloration syntaxique (CodeMirror)
+            </li>
+            <li style="padding: 0.5rem 0; border-bottom: 1px solid var(--border-secondary);">
+                <span style="color: #82aaff;">◆</span> Prévisualisation en temps réel avec scroll synchronisé
+            </li>
+            <li style="padding: 0.5rem 0; border-bottom: 1px solid var(--border-secondary);">
+                <span style="color: #89ddff;">◆</span> Organisation par dossiers avec arborescence dynamique
+            </li>
+            <li style="padding: 0.5rem 0; border-bottom: 1px solid var(--border-secondary);">
+                <span style="color: #c3e88d;">◆</span> Recherche avancée par tag, titre ou contenu
+            </li>
+            <li style="padding: 0.5rem 0; border-bottom: 1px solid var(--border-secondary);">
+                <span style="color: #ffcb6b;">◆</span> Thème Material Darker pour vos yeux
+            </li>
+            <li style="padding: 0.5rem 0;">
+                <span style="color: #f07178;">◆</span> Sauvegarde automatique avec Ctrl/Cmd+S
+            </li>
+        </ul>
+    </div>
+
+    <div style="margin-top: 3rem; text-align: center; padding: 2rem; background: var(--bg-secondary); border-radius: var(--radius-md); border: 1px solid var(--border-primary);">
+        <p style="color: var(--text-muted); font-size: 0.9rem;">
+            💡 Astuce : Cliquez sur une note dans l'arborescence pour commencer à éditer
+        </p>
+    </div>
+
+    <div style="margin-top: 3rem;">
+        <h2 style="color: #82aaff; font-size: 1.5rem; margin-bottom: 1.5rem;">
+            ⌨️ Raccourcis clavier
+        </h2>
+        <div style="display: grid; gap: 0.75rem; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));">
+            <div style="background: var(--bg-secondary); border: 1px solid var(--border-primary); border-radius: var(--radius-sm); padding: 0.75rem; display: flex; justify-content: space-between; align-items: center;">
+                <span style="color: var(--text-primary); font-size: 0.9rem;">Ouvrir la recherche</span>
+                <kbd style="background: var(--bg-tertiary); border: 1px solid var(--border-primary); border-radius: 4px; padding: 0.25rem 0.5rem; font-size: 0.85rem; color: var(--text-secondary);">Ctrl/Cmd + K</kbd>
+            </div>
+            <div style="background: var(--bg-secondary); border: 1px solid var(--border-primary); border-radius: var(--radius-sm); padding: 0.75rem; display: flex; justify-content: space-between; align-items: center;">
+                <span style="color: var(--text-primary); font-size: 0.9rem;">Sauvegarder la note</span>
+                <kbd style="background: var(--bg-tertiary); border: 1px solid var(--border-primary); border-radius: 4px; padding: 0.25rem 0.5rem; font-size: 0.85rem; color: var(--text-secondary);">Ctrl/Cmd + S</kbd>
+            </div>
+            <div style="background: var(--bg-secondary); border: 1px solid var(--border-primary); border-radius: var(--radius-sm); padding: 0.75rem; display: flex; justify-content: space-between; align-items: center;">
+                <span style="color: var(--text-primary); font-size: 0.9rem;">Ouvrir la note du jour</span>
+                <kbd style="background: var(--bg-tertiary); border: 1px solid var(--border-primary); border-radius: 4px; padding: 0.25rem 0.5rem; font-size: 0.85rem; color: var(--text-secondary);">Ctrl/Cmd + D</kbd>
+            </div>
+            <div style="background: var(--bg-secondary); border: 1px solid var(--border-primary); border-radius: var(--radius-sm); padding: 0.75rem; display: flex; justify-content: space-between; align-items: center;">
+                <span style="color: var(--text-primary); font-size: 0.9rem;">Créer une nouvelle note</span>
+                <kbd style="background: var(--bg-tertiary); border: 1px solid var(--border-primary); border-radius: 4px; padding: 0.25rem 0.5rem; font-size: 0.85rem; color: var(--text-secondary);">Ctrl/Cmd + N</kbd>
+            </div>
+            <div style="background: var(--bg-secondary); border: 1px solid var(--border-primary); border-radius: var(--radius-sm); padding: 0.75rem; display: flex; justify-content: space-between; align-items: center;">
+                <span style="color: var(--text-primary); font-size: 0.9rem;">Retour à la page d'accueil</span>
+                <kbd style="background: var(--bg-tertiary); border: 1px solid var(--border-primary); border-radius: 4px; padding: 0.25rem 0.5rem; font-size: 0.85rem; color: var(--text-secondary);">Ctrl/Cmd + H</kbd>
+            </div>
+            <div style="background: var(--bg-secondary); border: 1px solid var(--border-primary); border-radius: var(--radius-sm); padding: 0.75rem; display: flex; justify-content: space-between; align-items: center;">
+                <span style="color: var(--text-primary); font-size: 0.9rem;">Afficher/Masquer la sidebar</span>
+                <kbd style="background: var(--bg-tertiary); border: 1px solid var(--border-primary); border-radius: 4px; padding: 0.25rem 0.5rem; font-size: 0.85rem; color: var(--text-secondary);">Ctrl/Cmd + B</kbd>
+            </div>
+            <div style="background: var(--bg-secondary); border: 1px solid var(--border-primary); border-radius: var(--radius-sm); padding: 0.75rem; display: flex; justify-content: space-between; align-items: center;">
+                <span style="color: var(--text-primary); font-size: 0.9rem;">Ouvrir les paramètres</span>
+                <kbd style="background: var(--bg-tertiary); border: 1px solid var(--border-primary); border-radius: 4px; padding: 0.25rem 0.5rem; font-size: 0.85rem; color: var(--text-secondary);">Ctrl/Cmd + ,</kbd>
+            </div>
+            <div style="background: var(--bg-secondary); border: 1px solid var(--border-primary); border-radius: var(--radius-sm); padding: 0.75rem; display: flex; justify-content: space-between; align-items: center;">
+                <span style="color: var(--text-primary); font-size: 0.9rem;">Toggle prévisualisation</span>
+                <kbd style="background: var(--bg-tertiary); border: 1px solid var(--border-primary); border-radius: 4px; padding: 0.25rem 0.5rem; font-size: 0.85rem; color: var(--text-secondary);">Ctrl/Cmd + P</kbd>
+            </div>
+            <div style="background: var(--bg-secondary); border: 1px solid var(--border-primary); border-radius: var(--radius-sm); padding: 0.75rem; display: flex; justify-content: space-between; align-items: center;">
+                <span style="color: var(--text-primary); font-size: 0.9rem;">Créer un nouveau dossier</span>
+                <kbd style="background: var(--bg-tertiary); border: 1px solid var(--border-primary); border-radius: 4px; padding: 0.25rem 0.5rem; font-size: 0.85rem; color: var(--text-secondary);">Ctrl/Cmd + Shift + F</kbd>
+            </div>
+            <div style="background: var(--bg-secondary); border: 1px solid var(--border-primary); border-radius: var(--radius-sm); padding: 0.75rem; display: flex; justify-content: space-between; align-items: center;">
+                <span style="color: var(--text-primary); font-size: 0.9rem;">Fermer les modales</span>
+                <kbd style="background: var(--bg-tertiary); border: 1px solid var(--border-primary); border-radius: 4px; padding: 0.25rem 0.5rem; font-size: 0.85rem; color: var(--text-secondary);">Escape</kbd>
+            </div>
+        </div>
+        <p style="color: var(--text-muted); font-size: 0.85rem; text-align: center; margin-top: 1.5rem;">
+            💡 Sur Mac, utilisez Cmd au lieu de Ctrl
+        </p>
+    </div>
+</div>