Des tonnes de modifications notamment VIM / Couleurs / typos

2025-11-11 15:41:51 +01:00
parent 439880b08f
commit 6face7a02f
59 changed files with 7857 additions and 960 deletions
--- a/frontend/src/font-manager.js
+++ b/frontend/src/font-manager.js
@ -0,0 +1,184 @@
+/**
+ * Font Manager - Gère le changement de polices
+ */
+
+class FontManager {
+    constructor() {
+        this.fonts = [
+            { 
+                id: 'fira-code', 
+                name: 'Fira Code', 
+                family: "'Fira Code', 'Courier New', monospace",
+                googleFont: 'Fira+Code:wght@300;400;500;600;700'
+            },
+            { 
+                id: 'sans-serif', 
+                name: 'Sans-serif', 
+                family: "-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif",
+                googleFont: null
+            },
+            { 
+                id: 'inter', 
+                name: 'Inter', 
+                family: "'Inter', -apple-system, BlinkMacSystemFont, sans-serif",
+                googleFont: 'Inter:wght@300;400;500;600;700'
+            },
+            { 
+                id: 'poppins', 
+                name: 'Poppins', 
+                family: "'Poppins', -apple-system, BlinkMacSystemFont, sans-serif",
+                googleFont: 'Poppins:wght@300;400;500;600;700'
+            },
+            { 
+                id: 'public-sans', 
+                name: 'Public Sans', 
+                family: "'Public Sans', -apple-system, BlinkMacSystemFont, sans-serif",
+                googleFont: 'Public+Sans:wght@300;400;500;600;700'
+            },
+            { 
+                id: 'jetbrains-mono', 
+                name: 'JetBrains Mono', 
+                family: "'JetBrains Mono', 'Courier New', monospace",
+                googleFont: 'JetBrains+Mono:wght@300;400;500;600;700'
+            },
+            { 
+                id: 'cascadia-code', 
+                name: 'Cascadia Code', 
+                family: "'Cascadia Code', 'Courier New', monospace",
+                googleFont: 'Cascadia+Code:wght@300;400;500;600;700'
+            },
+            { 
+                id: 'source-code-pro', 
+                name: 'Source Code Pro', 
+                family: "'Source Code Pro', 'Courier New', monospace",
+                googleFont: 'Source+Code+Pro:wght@300;400;500;600;700'
+            }
+        ];
+        
+        this.init();
+    }
+
+    init() {
+        // Charger la police sauvegardée
+        const savedFont = localStorage.getItem('selectedFont') || 'jetbrains-mono';
+        this.applyFont(savedFont);
+        
+        // Charger la taille sauvegardée
+        const savedSize = localStorage.getItem('fontSize') || 'medium';
+        this.applyFontSize(savedSize);
+        
+        console.log('FontManager initialized with font:', savedFont, 'size:', savedSize);
+    }
+
+    applyFont(fontId) {
+        const font = this.fonts.find(f => f.id === fontId);
+        if (!font) {
+            console.error('Police non trouvée:', fontId);
+            return;
+        }
+
+        // Charger la police Google Fonts si nécessaire
+        if (font.googleFont) {
+            this.loadGoogleFont(font.googleFont);
+        }
+
+        // Appliquer la police au body
+        document.body.style.fontFamily = font.family;
+        
+        // Sauvegarder le choix
+        localStorage.setItem('selectedFont', fontId);
+        
+        console.log('Police appliquée:', font.name);
+    }
+
+    applyFontSize(sizeId) {
+        // Définir les tailles en utilisant une variable CSS root
+        const sizes = {
+            'small': '14px',
+            'medium': '16px',
+            'large': '18px',
+            'x-large': '20px'
+        };
+        
+        const size = sizes[sizeId] || sizes['medium'];
+        
+        // Appliquer la taille via une variable CSS sur :root
+        // Cela affectera tous les éléments qui utilisent rem
+        document.documentElement.style.fontSize = size;
+        
+        // Sauvegarder le choix
+        localStorage.setItem('fontSize', sizeId);
+        
+        console.log('Taille de police appliquée:', sizeId, size);
+    }
+
+    getCurrentSize() {
+        return localStorage.getItem('fontSize') || 'medium';
+    }
+
+    loadGoogleFont(fontParam) {
+        // Vérifier si la police n'est pas déjà chargée
+        const linkId = 'google-font-' + fontParam.split(':')[0].replace(/\+/g, '-');
+        if (document.getElementById(linkId)) {
+            return; // Déjà chargé
+        }
+
+        // Créer un nouveau link pour Google Fonts
+        const link = document.createElement('link');
+        link.id = linkId;
+        link.rel = 'stylesheet';
+        link.href = `https://fonts.googleapis.com/css2?family=${fontParam}&display=swap`;
+        document.head.appendChild(link);
+        
+        console.log('Google Font chargée:', fontParam);
+    }
+
+    getCurrentFont() {
+        return localStorage.getItem('selectedFont') || 'jetbrains-mono';
+    }
+
+    getFonts() {
+        return this.fonts;
+    }
+}
+
+// Initialisation automatique
+if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', () => {
+        window.fontManager = new FontManager();
+    });
+} else {
+    window.fontManager = new FontManager();
+}
+
+// Fonction globale pour changer la police
+window.selectFont = function(fontId) {
+    if (window.fontManager) {
+        window.fontManager.applyFont(fontId);
+        
+        // Mettre à jour l'interface (marquer comme active)
+        document.querySelectorAll('.font-card').forEach(card => {
+            card.classList.remove('active');
+        });
+        const selectedCard = document.querySelector(`.font-card[data-font="${fontId}"]`);
+        if (selectedCard) {
+            selectedCard.classList.add('active');
+        }
+    }
+};
+
+// Fonction globale pour changer la taille de police
+window.selectFontSize = function(sizeId) {
+    if (window.fontManager) {
+        window.fontManager.applyFontSize(sizeId);
+        
+        // Mettre à jour l'interface (marquer comme active)
+        document.querySelectorAll('.font-size-option').forEach(option => {
+            option.classList.remove('active');
+        });
+        const selectedOption = document.querySelector(`.font-size-option[data-size="${sizeId}"]`);
+        if (selectedOption) {
+            selectedOption.classList.add('active');
+        }
+    }
+};