Spaces:
Build error
Build error
| <html lang="fr" class="dark"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Mailix | Tableau de Bord - Pro</title> | |
| <link rel="icon" type="image/png" href="https://i.imgur.com/7Gn3toV.png"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" | |
| href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@24,400,0,0" /> | |
| <style> | |
| /* Configuration de la police Inter */ | |
| body { font-family: 'Inter', sans-serif; } | |
| /* Transition pour un effet doux des couleurs */ | |
| .transition-colors-theme { transition: background-color 0.3s, color 0.3s, border-color 0.3s; } | |
| /* Style et positionnement du bouton de Thème */ | |
| .theme-switch { | |
| background: none; | |
| border: none; | |
| cursor: pointer; | |
| font-size: 24px; | |
| transition: color 0.2s; | |
| position: fixed; | |
| top: 1rem; | |
| right: 1rem; | |
| z-index: 60; /* Z-index plus élevé pour s'assurer qu'il est au-dessus de tout */ | |
| } | |
| /* Définir les Variables de Thème (inchangé) */ | |
| /* Mode Sombre (Défaut) */ | |
| :root, .dark { | |
| --bg-page: #121212; | |
| --bg-card: #1E1E1E; | |
| --bg-sidebar: #1E1E1E; | |
| --bg-sidebar-active: #2C2C2C; | |
| --border-sidebar: #383838; | |
| --text-color: #FFFFFF; | |
| --text-secondary: #D1D5DB; | |
| --text-link: #3B82F6; | |
| --text-link-hover: #60A5FA; | |
| --input-bg: #2C2C2C; | |
| --input-border: #4B5563; | |
| --input-text-key: #6EE7B7; | |
| --primary-color: #3B82F6; | |
| --primary-hover: #2563EB; | |
| --warning-bg: #451A03; | |
| --warning-border: #78350F; | |
| --warning-text: #FBBF24; | |
| } | |
| /* Mode Clair */ | |
| .light { | |
| --bg-page: #F5F5F5; | |
| --bg-card: #FFFFFF; | |
| --bg-sidebar: #FFFFFF; | |
| --bg-sidebar-active: #F3F4F6; | |
| --border-sidebar: #D1D5DB; | |
| --text-color: #000000; | |
| --text-secondary: #4B5563; | |
| --text-link: #1D4ED8; | |
| --text-link-hover: #3B82F6; | |
| --input-bg: #FFFFFF; | |
| --input-border: #D1D5DB; | |
| --input-text-key: #059669; | |
| --primary-color: #3B82F6; | |
| --primary-hover: #2563EB; | |
| --warning-bg: #FEF3C7; | |
| --warning-border: #FBBF24; | |
| --warning-text: #92400E; | |
| } | |
| /* Appliquer les variables au body et aux éléments (inchangé) */ | |
| .bg-page-var { background-color: var(--bg-page); } | |
| .bg-card-var { background-color: var(--bg-card); } | |
| .bg-sidebar-var { background-color: var(--bg-sidebar); } | |
| .border-sidebar-var { border-color: var(--border-sidebar); } | |
| .text-color-var { color: var(--text-color); } | |
| .text-secondary-var { color: var(--text-secondary); } | |
| .text-link-var { color: var(--text-link); } | |
| .hover\:text-link-hover-var:hover { color: var(--text-link-hover); } | |
| .bg-input-var { background-color: var(--input-bg); } | |
| .border-input-var { border-color: var(--input-border); } | |
| .text-input-key-var { color: var(--input-text-key); } | |
| .bg-primary-color-var { background-color: var(--primary-color); } | |
| .hover\:bg-primary-hover-var:hover { background-color: var(--primary-hover); } | |
| .focus\:ring-primary-color-var:focus { --tw-ring-color: var(--primary-color); } | |
| .focus\:border-primary-color-var:focus { border-color: var(--primary-color); } | |
| .bg-sidebar-active-var { background-color: var(--bg-sidebar-active); } | |
| .bg-warning-var { background-color: var(--warning-bg); } | |
| .border-warning-var { border-color: var(--warning-border); } | |
| .text-warning-var { color: var(--warning-text); } | |
| /* Styles pour les sidebars - FIXES */ | |
| .sidebar { | |
| transition: transform 0.3s ease-in-out; | |
| position: fixed; | |
| top: 0; | |
| z-index: 30; | |
| height: 100vh; | |
| } | |
| /* Sidebar Gauche */ | |
| .sidebar-left { | |
| transform: translateX(-100%); /* Masqué par défaut sur mobile */ | |
| left: 0; | |
| } | |
| .sidebar-left.open { | |
| transform: translateX(0); | |
| } | |
| /* Sidebar Droite */ | |
| .sidebar-right { | |
| transform: translateX(100%); /* Masqué par défaut sur mobile */ | |
| right: 0; | |
| } | |
| .sidebar-right.open { | |
| transform: translateX(0); | |
| } | |
| /* Sur les grands écrans (lg), les sidebars sont statiques et toujours visibles */ | |
| @media (min-width: 1024px) { | |
| .sidebar { | |
| transform: translateX(0) ; | |
| height: 100vh; | |
| } | |
| } | |
| /* Conteneur principal pour décaler le contenu sur les grands écrans (lg) */ | |
| /* La marge doit correspondre à la largeur des sidebars (w-64 = 256px) */ | |
| @media (min-width: 1024px) { | |
| .main-content { | |
| margin-left: 256px; /* Marge Gauche pour la sidebar-left */ | |
| margin-right: 256px; /* Marge Droite pour la sidebar-right */ | |
| } | |
| } | |
| /* Ajustement du bouton de Thème pour ne pas interférer avec la sidebar droite sur mobile */ | |
| @media (max-width: 1023px) { | |
| .theme-switch { | |
| right: 5rem; /* Déplacé à gauche pour ne pas être sous le bouton de menu (sidebar droite) */ | |
| } | |
| } | |
| /* Style pour les boutons de toggle sur mobile */ | |
| .mobile-toggle-button { | |
| z-index: 40; /* Au-dessus de la sidebar mais sous le theme-switch */ | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-page-var text-color-var min-h-screen transition-colors-theme"> | |
| <button id="theme-toggle" class="theme-switch text-color-var hover:text-link-hover-var transition-colors-theme"> | |
| <span class="material-symbols-rounded">dark_mode</span> | |
| </button> | |
| <aside id="sidebar-left" class="sidebar sidebar-left w-64 bg-sidebar-var border-r border-sidebar-var p-6 flex flex-col transition-colors-theme"> | |
| <div class="flex items-center mb-6 shrink-0"> | |
| <img src="https://i.imgur.com/7Gn3toV.png" alt="Nexus Pro Logo" class="h-8"> | |
| <span class="text-xl font-bold text-color-var ml-2 transition-colors-theme">Mailix</span> | |
| </div> | |
| <div class="flex-grow overflow-y-auto pr-2" id="scrollable-nav-container"> | |
| <h3 class="text-xs font-semibold uppercase tracking-wider text-secondary-var mb-2">Fichiers Ouverts</h3> | |
| <nav id="file-explorer" class="space-y-1 pb-4 border-b border-sidebar-var/50 mb-4"> | |
| </nav> | |
| <h3 class="text-xs font-semibold uppercase tracking-wider text-secondary-var mb-2">Navigation</h3> | |
| <nav class="space-y-3 pb-4"> | |
| <a href="{{ url_for('user_bp.dashboard') }}" class="flex items-center p-3 text-secondary-var hover:text-color-var hover:bg-sidebar-active-var rounded-lg transition duration-150 transition-colors-theme"> | |
| <span class="material-symbols-rounded">dashboard</span> | |
| <span class="ml-3">Dashboard</span> | |
| </a> | |
| <a href="/aide" class="flex items-center p-3 text-secondary-var hover:text-color-var hover:bg-sidebar-active-var rounded-lg transition duration-150 transition-colors-theme"> | |
| <span class="material-symbols-rounded">help</span> | |
| <span class="ml-3">Aide & Support</span> | |
| </a> | |
| <a href="/tarifs" class="flex items-center p-3 text-secondary-var hover:text-color-var hover:bg-sidebar-active-var rounded-lg transition duration-150 transition-colors-theme"> | |
| <span class="material-symbols-rounded">payments</span> | |
| <span class="ml-3">Tarifs</span> | |
| </a> | |
| <a href="/statut" class="flex items-center p-3 bg-sidebar-active-var text-color-var rounded-lg transition duration-150 transition-colors-theme"> | |
| <span class="material-symbols-rounded">monitor_heart</span> | |
| <span class="ml-3">Statut de l'API</span> | |
| </a> | |
| <a href="{{ url_for('user_bp.deconnexion') }}" id="logout-button-sidebar" class="flex items-center p-3 text-red-500 hover:text-red-400 hover:bg-sidebar-active-var rounded-lg transition duration-150 transition-colors-theme"> | |
| <span class="material-symbols-rounded">logout</span> | |
| <span class="ml-3">Déconnexion</span> | |
| </a> | |
| </nav> | |
| </div> | |
| <div class="mt-auto pt-4 text-xs text-secondary-var transition-colors-theme border-t border-sidebar-var/50 shrink-0"> | |
| <p>Connecté en tant que: <span class="font-semibold text-color-var transition-colors-theme">{{ user.email if user and user.email else 'Chargement...' }}</span></p> | |
| <p>Plan: <span class="font-semibold text-color-var transition-colors-theme">{{ (user.plan | upper) if user and user.plan else 'GRATUIT' }}</span></p> | |
| </div> | |
| </aside> | |
| <aside id="sidebar-right" class="sidebar sidebar-right w-64 bg-sidebar-var border-l border-sidebar-var p-6 lg:block transition-colors-theme"> | |
| <a href="/nouveau_project" id="new-project-button" class="flex items-center justify-center w-full p-3 mb-6 bg-primary-color-var hover:bg-primary-hover-var text-white font-semibold rounded-lg shadow-md transition duration-150"> | |
| <span class="material-symbols-rounded mr-2">add</span> Créer un Projet | |
| </a> | |
| <h3 class="text-lg font-semibold mb-4 text-color-var transition-colors-theme">Outils</h3> | |
| <nav class="space-y-3"> | |
| <a href="/static-deploy" | |
| class="flex items-center p-3 text-secondary-var hover:text-color-var hover:bg-sidebar-active-var rounded-lg transition duration-150 transition-colors-theme" | |
| title="Déployer un site web statique complet"> | |
| <span class="material-symbols-rounded">web</span> | |
| <span class="ml-3">Déploiement Statique</span> | |
| </a> | |
| <a href="/parametres" class="flex items-center p-3 text-secondary-var hover:text-color-var hover:bg-sidebar-active-var rounded-lg transition duration-150 transition-colors-theme"> | |
| <span class="material-symbols-rounded">settings</span> <span class="ml-3">Paramètres</span> | |
| </a> | |
| <a href="/edit-coder" | |
| class="flex items-center p-3 text-secondary-var hover:text-color-var hover:bg-sidebar-active-var rounded-lg transition duration-150 transition-colors-theme" | |
| title="Ouvrir l'Éditeur de Code"> | |
| <span class="material-symbols-rounded">code</span> | |
| <span class="ml-3">Éditeur de Code</span> | |
| </a> | |
| <a href="/aide" class="flex items-center p-3 text-secondary-var hover:text-color-var hover:bg-sidebar-active-var rounded-lg transition duration-150 transition-colors-theme"> | |
| <span class="material-symbols-rounded">help</span> | |
| <span class="ml-3">Aide & Support</span> | |
| </a> | |
| <a href="{{ url_for('user_bp.profile') }}" class="flex items-center p-3 text-secondary-var hover:text-color-var hover:bg-sidebar-active-var rounded-lg transition duration-150 transition-colors-theme"> | |
| <span class="material-symbols-rounded">person</span> | |
| <span class="ml-3">Profil</span> | |
| </a> | |
| <a href="/tarifs" class="flex items-center p-3 text-secondary-var hover:text-color-var hover:bg-sidebar-active-var rounded-lg transition duration-150 transition-colors-theme"> | |
| <span class="material-symbols-rounded">payments</span> | |
| <span class="ml-3">Tarifs</span> | |
| </a> | |
| </nav> | |
| <div class="absolute bottom-6 w-52 text-xs text-secondary-var transition-colors-theme"> | |
| <p class="font-semibold text-color-var transition-colors-theme mb-1">Espace de travail</p> | |
| <ul class="space-y-1"> | |
| <li><a href="#" class="text-link-var hover:text-link-hover-var">Mailix Corp (Actif)</a></li> | |
| <li><a href="#" class="text-link-var hover:text-link-hover-var">Mon Sandbox</a></li> | |
| </ul> | |
| </div> | |
| </aside> | |
| <div id="main-content" class="main-content p-8 transition-colors-theme"> | |
| <header class="lg:hidden flex justify-between items-center mb-8"> | |
| <button id="sidebar-left-toggle" class="mobile-toggle-button p-2 rounded-lg bg-sidebar-active-var hover:bg-sidebar-active-var/80 transition-colors-theme"> | |
| <span class="material-symbols-rounded text-color-var">menu</span> | |
| </button> | |
| <div class="flex items-center"> | |
| <img src="https://i.imgur.com/7Gn3toV.png" alt="Nexus Pro Logo" class="h-8"> | |
| <span class="text-xl font-bold text-color-var ml-2 transition-colors-theme">Mailix</span> | |
| </div> | |
| <button id="sidebar-right-toggle" class="mobile-toggle-button p-2 rounded-lg bg-sidebar-active-var hover:bg-sidebar-active-var/80 transition-colors-theme"> | |
| <span class="material-symbols-rounded text-color-var">settings</span> </button> | |
| </header> | |
| <h1 class="text-3xl font-bold mb-8 text-color-var transition-colors-theme">Tableau de Bord Principal 📊</h1> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-12"> | |
| <div class="bg-card-var p-6 rounded-lg shadow-xl border border-sidebar-var transition-colors-theme"> | |
| <div class="flex items-center justify-between"> | |
| <span class="material-symbols-rounded text-3xl text-primary-color-var">cloud_upload</span> | |
| <p class="text-2xl font-bold text-color-var">12,450</p> | |
| </div> | |
| <p class="text-sm text-secondary-var mt-2">Requêtes Totales</p> | |
| </div> | |
| <div class="bg-card-var p-6 rounded-lg shadow-xl border border-sidebar-var transition-colors-theme"> | |
| <div class="flex items-center justify-between"> | |
| <span class="material-symbols-rounded text-3xl text-input-text-key-var">check_circle</span> | |
| <p class="text-2xl font-bold text-color-var">99.8%</p> | |
| </div> | |
| <p class="text-sm text-secondary-var mt-2">Taux de Succès</p> | |
| </div> | |
| <div class="bg-card-var p-6 rounded-lg shadow-xl border border-sidebar-var transition-colors-theme"> | |
| <div class="flex items-center justify-between"> | |
| <span class="material-symbols-rounded text-3xl text-link-hover-var">wallet</span> | |
| <p class="text-2xl font-bold text-color-var">150$</p> | |
| </div> | |
| <p class="text-sm text-secondary-var mt-2">Coût Estimé (Mois)</p> | |
| </div> | |
| <div class="bg-card-var p-6 rounded-lg shadow-xl border border-sidebar-var transition-colors-theme"> | |
| <div class="flex items-center justify-between"> | |
| <span class="material-symbols-rounded text-3xl text-warning-text-var">person_add</span> | |
| <p class="text-2xl font-bold text-color-var">482</p> | |
| </div> | |
| <p class="text-sm text-secondary-var mt-2">Utilisateurs Uniques</p> | |
| </div> | |
| </div> | |
| <h2 class="text-2xl font-bold mb-6 text-color-var transition-colors-theme">Mes Projets Récents</h2> | |
| <div class="space-y-6"> | |
| <div class="bg-card-var p-6 rounded-lg shadow-lg border border-sidebar-var transition-colors-theme flex justify-between items-start"> | |
| <div> | |
| <h3 class="text-xl font-semibold text-color-var transition-colors-theme mb-2">Projet: API de Traduction (V3)</h3> | |
| <p class="text-secondary-var text-sm mb-3">Dernière modification: 15 minutes ago</p> | |
| <div class="flex items-center space-x-3 text-sm"> | |
| <span class="text-input-key-var font-medium flex items-center"> | |
| <span class="material-symbols-rounded text-lg mr-1">public</span> Public | |
| </span> | |
| <span class="text-secondary-var flex items-center"> | |
| <span class="material-symbols-rounded text-lg mr-1">code</span> Type: Snippet de Code (Python) | |
| </span> | |
| </div> | |
| </div> | |
| <a href="/project/api-translation-v3" class="text-link-var hover:text-link-hover-var font-medium flex items-center p-2 rounded-lg hover:bg-sidebar-active-var transition-colors-theme"> | |
| Ouvrir l'éditeur | |
| <span class="material-symbols-rounded ml-1">arrow_forward</span> | |
| </a> | |
| </div> | |
| <div class="bg-card-var p-6 rounded-lg shadow-lg border border-sidebar-var transition-colors-theme flex justify-between items-start"> | |
| <div> | |
| <h3 class="text-xl font-semibold text-color-var transition-colors-theme mb-2">Micro-App: Calculatrice de Taux</h3> | |
| <p class="text-secondary-var text-sm mb-3">Dernière modification: Hier</p> | |
| <div class="flex items-center space-x-3 text-sm"> | |
| <span class="text-warning-text-var font-medium flex items-center"> | |
| <span class="material-symbols-rounded text-lg mr-1">lock</span> Privé | |
| </span> | |
| <span class="text-secondary-var flex items-center"> | |
| <span class="material-symbols-rounded text-lg mr-1">web_asset</span> Type: Micro-Application Web (HTML/JS) | |
| </span> | |
| </div> | |
| </div> | |
| <a href="/project/rate-calculator" class="text-link-var hover:text-link-hover-var font-medium flex items-center p-2 rounded-lg hover:bg-sidebar-active-var transition-colors-theme"> | |
| Ouvrir l'éditeur | |
| <span class="material-symbols-rounded ml-1">arrow_forward</span> | |
| </a> | |
| </div> | |
| <div class="lg:hidden text-center mt-8"> | |
| <a href="/nouveau_project" class="inline-flex items-center justify-center p-3 bg-primary-color-var hover:bg-primary-hover-var text-white font-semibold rounded-lg shadow-lg transition duration-150"> | |
| <span class="material-symbols-rounded mr-2">add</span> | |
| Créer un Nouveau Projet | |
| </a> | |
| </div> | |
| </div> | |
| <div class="mt-12"> | |
| <h2 class="text-xl font-semibold mb-4 text-color-var transition-colors-theme">Journal d'Activité Récente</h2> | |
| <p class="text-secondary-var mb-6 transition-colors-theme">Les 5 dernières actions significatives sur votre compte.</p> | |
| <ul class="space-y-3 bg-card-var p-4 rounded-lg shadow-xl border border-sidebar-var"> | |
| <li class="p-3 border-b border-sidebar-var flex justify-between items-center text-sm"> | |
| <span class="text-color-var font-medium">API: Endpoint /generation appelé</span> | |
| <span class="text-secondary-var">2 minutes ago</span> | |
| </li> | |
| <li class="p-3 border-b border-sidebar-var flex justify-between items-center text-sm"> | |
| <span class="text-color-var font-medium">Connexion réussie (IP: 192.168.1.1)</span> | |
| <span class="text-secondary-var">1 heure ago</span> | |
| </li> | |
| <li class="p-3 border-b border-sidebar-var flex justify-between items-center text-sm"> | |
| <span class="text-color-var font-medium">API: Erreur de quota /analyse</span> | |
| <span class="text-secondary-var text-red-400">3 heures ago</span> | |
| </li> | |
| <li class="p-3 border-b border-sidebar-var flex justify-between items-center text-sm"> | |
| <span class="text-color-var font-medium">Mise à jour du profil (Nom)</span> | |
| <span class="text-secondary-var">Hier</span> | |
| </li> | |
| <li class="p-3 flex justify-between items-center text-sm"> | |
| <span class="text-color-var font-medium">API: Endpoint /translate appelé</span> | |
| <span class="text-secondary-var">Il y a 2 jours</span> | |
| </li> | |
| </ul> | |
| <div class="mt-4 text-right"> | |
| <a href="api_logs.html" class="text-sm text-link-var hover:text-link-hover-var font-medium transition-colors-theme"> | |
| Voir tous les logs → | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| // Logique du thème (inchangée) | |
| const themeToggle = document.getElementById('theme-toggle'); | |
| const html = document.documentElement; | |
| const updateIcon = () => { | |
| const icon = themeToggle.querySelector('.material-symbols-rounded'); | |
| if (html.classList.contains('light')) { | |
| icon.textContent = 'light_mode'; | |
| } else { | |
| icon.textContent = 'dark_mode'; | |
| } | |
| }; | |
| const savedTheme = localStorage.getItem('theme'); | |
| if (savedTheme === 'light') { | |
| html.classList.remove('dark'); | |
| html.classList.add('light'); | |
| } else { | |
| html.classList.add('dark'); | |
| html.classList.remove('light'); | |
| } | |
| updateIcon(); | |
| themeToggle.addEventListener('click', () => { | |
| if (html.classList.contains('dark')) { | |
| html.classList.remove('dark'); | |
| html.classList.add('light'); | |
| localStorage.setItem('theme', 'light'); | |
| } else { | |
| html.classList.remove('light'); | |
| html.classList.add('dark'); | |
| localStorage.setItem('theme', 'dark'); | |
| } | |
| updateIcon(); | |
| }); | |
| // Logique pour la Sidebar Gauche sur mobile | |
| const sidebarLeftToggle = document.getElementById('sidebar-left-toggle'); | |
| const sidebarLeft = document.getElementById('sidebar-left'); | |
| sidebarLeftToggle.addEventListener('click', () => { | |
| sidebarLeft.classList.toggle('open'); | |
| // Fermer l'autre sidebar si elle est ouverte pour éviter le chevauchement | |
| sidebarRight.classList.remove('open'); | |
| }); | |
| // Logique pour la Sidebar Droite sur mobile | |
| const sidebarRightToggle = document.getElementById('sidebar-right-toggle'); | |
| const sidebarRight = document.getElementById('sidebar-right'); | |
| sidebarRightToggle.addEventListener('click', () => { | |
| sidebarRight.classList.toggle('open'); | |
| // Fermer l'autre sidebar si elle est ouverte | |
| sidebarLeft.classList.remove('open'); | |
| }); | |
| // Logique de Déconnexion (Conservée) | |
| const logoutHandler = async (e) => { | |
| e.preventDefault(); | |
| // Simulation de la redirection pour la déconnexion | |
| window.location.href = document.getElementById('logout-button-sidebar').href; | |
| }; | |
| // On attache l'événement à la déconnexion dans la sidebar. | |
| document.getElementById('logout-button-sidebar').addEventListener('click', logoutHandler); | |
| </script> | |
| </body> | |
| </html> |