Spaces:

ernestmindres
/

Nexus

Sleeping

App Files Files Community

ernestmindres commited on Oct 18, 2025

Commit

f0e5c0b

verified ·

1 Parent(s): 9f6bae5

Update templates/api_key.html

Browse files

Files changed (1) hide show

templates/api_key.html +160 -44

templates/api_key.html CHANGED Viewed

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="fr">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
@@ -9,9 +9,89 @@
     <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 et thème sombre */
         body { font-family: 'Inter', sans-serif; }
         /* Style pour les boutons et cartes carrés (Artboard) */
         .btn-square, .card-square {
             border-radius: 0; /* Supprime l'arrondi */
@@ -19,14 +99,14 @@
         /* Styles spécifiques pour le chargement/spinner */
         .spinner {
-            border-top-color: var(--spinner-color); /* Utilisation de variable */
             animation: spin 1s linear infinite;
         }
         @keyframes spin {
             to { transform: rotate(360deg); }
         }
-        /* Style pour la Sidebar - FIXE et complète (Correction pour la stabilité) */
         .sidebar {
             transition: transform 0.3s ease-in-out;
             transform: translateX(-100%);
@@ -41,76 +121,80 @@
             transform: translateX(0);
         }
-        /* Sur les grands écrans, la sidebar est statique et toujours visible */
         @media (min-width: 1024px) {
             .sidebar {
                 transform: translateX(0) !important;
-                position: static;
-                height: auto;
             }
         }
-        /* Conteneur principal pour décaler le contenu sur les grands écrans */
         @media (min-width: 1024px) {
             .main-content {
-                margin-left: 256px; /* Doit correspondre à la largeur de la sidebar (w-64) */
             }
         }
     </style>
 </head>
-<body class="bg-gray-900 text-gray-100 min-h-screen">
-    <aside id="sidebar" class="sidebar w-64 bg-gray-800 border-r border-gray-700 p-6 lg:block">
         <div class="flex items-center mb-10">
             <img src="https://i.imgur.com/7Gn3toV.png" alt="Nexus Pro Logo" class="h-8">
-            <span class="text-xl font-bold text-white ml-2">Nexus Pro</span>
         </div>
         <nav class="space-y-3">
-            <a href="{{ url_for('user_bp.dashboard') }}" class="flex items-center p-3 text-gray-300 hover:text-white hover:bg-gray-700 rounded-lg transition duration-150">
                 <span class="material-symbols-rounded">dashboard</span>
                 <span class="ml-3">Dashboard</span>
             </a>
-            <a href="{{ url_for('user_bp.api_keys') }}" class="flex items-center p-3 bg-gray-700 text-white rounded-lg transition duration-150">
                 <span class="material-symbols-rounded">key</span>
                 <span class="ml-3">Clés API</span>
             </a>
-            <a href="{{ url_for('user_bp.api_logs') }}" class="flex items-center p-3 text-gray-300 hover:text-white hover:bg-gray-700 rounded-lg transition duration-150">
                 <span class="material-symbols-rounded">list_alt</span>
                 <span class="ml-3">Logs d'API</span>
             </a>
-            <a href="{{ url_for('user_bp.profile') }}" class="flex items-center p-3 text-gray-300 hover:text-white hover:bg-gray-700 rounded-lg transition duration-150">
                 <span class="material-symbols-rounded">person</span>
                 <span class="ml-3">Profil</span>
             </a>
-            <a href="{{ url_for('user_bp.deconnexion') }}" id="logout-button-sidebar" class="flex items-center p-3 text-red-400 hover:text-red-300 hover:bg-gray-700 rounded-lg transition duration-150">
                 <span class="material-symbols-rounded">logout</span>
                 <span class="ml-3">Déconnexion</span>
             </a>
         </nav>
-        <div class="absolute bottom-6 w-52 text-xs text-gray-400">
-             <p>Connecté en tant que: <span class="font-semibold text-gray-200">{{ user.email if user else 'Chargement...' }}</span></p>
-             <p>Plan: <span class="font-semibold text-gray-200">{{ (user.plan | upper) if user else 'Chargement...' }}</span></p>
         </div>
     </aside>
-    <div id="main-content" class="lg:ml-64 p-8">
         <header class="lg:hidden flex justify-between items-center mb-8">
             <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-white ml-2">Nexus Pro</span>
             </div>
-            <button id="sidebar-toggle" class="p-2 rounded-lg bg-gray-800 hover:bg-gray-700">
-                 <span class="material-symbols-rounded text-white">menu</span>
             </button>
         </header>
-        <h1 class="text-3xl font-bold mb-8 text-white">Gestion des Clés API</h1>
         {% with messages = get_flashed_messages(with_categories=true) %}
             {% if messages %}
@@ -122,34 +206,34 @@
             {% endif %}
         {% endwith %}
-        <div class="bg-gray-800 p-6 rounded-lg shadow-xl border border-gray-700">
-            <h2 class="text-xl font-semibold mb-4 text-white">Votre Clé d'Accès Principale</h2>
-            <p class="text-gray-400 mb-6">Utilisez cette clé pour authentifier vos requêtes auprès de l'API ErnestMind Nexus.</p>
             <div class="flex items-center space-x-4 mb-6">
                 <input id="api-key-display"
                        type="text"
                        readonly
-                       class="flex-grow bg-gray-900 border border-gray-700 text-green-400 p-3 rounded-lg font-mono text-sm break-all focus:ring-blue-500 focus:border-blue-500"
                        value="{{ user.api_key if user and user.api_key else 'Clé API non trouvée. Réinitialisez-la.' }}">
-                <button id="copy-btn" class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-4 rounded-lg transition duration-200 flex items-center btn-square">
                     <span class="material-symbols-rounded">content_copy</span>
                     <span class="ml-2 hidden sm:inline">Copier</span>
                 </button>
             </div>
-            <div class="flex items-center justify-between border-t border-gray-700 pt-4">
-                <button id="regenerate-btn" class="text-sm text-red-400 hover:text-red-300 transition duration-200 flex items-center font-medium">
                     <span class="material-symbols-rounded text-lg mr-1">refresh</span>
                     Régénérer la Clé
-                    <div id="spinner" class="spinner w-4 h-4 border-2 border-gray-500 rounded-full ml-2 hidden" style="--spinner-color: #ffffff;"></div>
                 </button>
-                <p id="status-message" class="text-sm text-green-400 font-medium"></p>
             </div>
         </div>
-        <div class="mt-8 p-4 bg-yellow-900/50 border border-yellow-800 rounded-lg text-yellow-300">
             <h3 class="font-bold flex items-center">
                 <span class="material-symbols-rounded mr-2">warning</span>
                 Attention Sécurité
@@ -160,6 +244,44 @@
     </div>
     <script>
         // Logique pour la copie de la clé API
         const copyBtn = document.getElementById('copy-btn');
         const apiKeyDisplay = document.getElementById('api-key-display');
@@ -167,9 +289,6 @@
         const regenerateBtn = document.getElementById('regenerate-btn');
         const spinner = document.getElementById('spinner');
-        // Styles pour le spinner (Assurer que la couleur de la bordure est blanche)
-        document.documentElement.style.setProperty('--spinner-color', '#ffffff');
         // 1. Fonctionnalité de Copie
         copyBtn.addEventListener('click', () => {
             apiKeyDisplay.select();
@@ -191,10 +310,7 @@
             sidebar.classList.toggle('open');
         });
-        // 3. Logique de REGÉNÉRATION (Laisser la structure pour la Phase 2/3)
-        // NOTE: La logique de régénération AJAX est retirée pour l'instant.
-        // Elle sera réintégrée dans la phase suivante si nécessaire.
-        // Pour l'instant, le bouton ne fait rien d'autre qu'afficher un message.
         regenerateBtn.addEventListener('click', (e) => {
             e.preventDefault();
             // Simuler une action pour l'utilisateur
@@ -208,7 +324,7 @@
         const logoutHandler = async (e) => {
             e.preventDefault();
             // La déconnexion est maintenant gérée par la route Flask directe
-            window.location.href = regenerateBtn.parentElement.querySelector('#logout-button-sidebar').href;
         };
         // On attache l'événement à la déconnexion dans la sidebar.
         document.getElementById('logout-button-sidebar').addEventListener('click', logoutHandler);

 <!DOCTYPE html>
+<html lang="fr" class="dark">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <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; /* Reste fixe même si le reste défile */
+            top: 1rem;
+            right: 1rem;
+            z-index: 50; /* Doit être au-dessus de tout */
+        }
+        /* Définir les Variables de Thème */
+        /* Mode Sombre (Défaut) */
+        :root, .dark {
+            --bg-page: #121212;
+            --bg-card: #1E1E1E;
+            --bg-sidebar: #1E1E1E; /* Sidebar aussi foncée que les cartes */
+            --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; /* Vert clair pour la clé */
+            --primary-color: #3B82F6;
+            --primary-hover: #2563EB;
+            --warning-bg: #451A03; /* Orange très sombre */
+            --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; /* Vert foncé pour la clé */
+            --primary-color: #3B82F6;
+            --primary-hover: #2563EB;
+            --warning-bg: #FEF3C7; /* Jaune très clair */
+            --warning-border: #FBBF24;
+            --warning-text: #92400E;
+        }
+        /* Appliquer les variables au body et aux éléments */
+        .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); }
         /* Style pour les boutons et cartes carrés (Artboard) */
         .btn-square, .card-square {
             border-radius: 0; /* Supprime l'arrondi */
         /* Styles spécifiques pour le chargement/spinner */
         .spinner {
+            border-top-color: var(--primary-color); /* Utiliser la couleur primaire pour le spinner */
             animation: spin 1s linear infinite;
         }
         @keyframes spin {
             to { transform: rotate(360deg); }
         }
+        /* Style pour la Sidebar - FIXE et complète */
         .sidebar {
             transition: transform 0.3s ease-in-out;
             transform: translateX(-100%);
             transform: translateX(0);
         }
+        /* Sur les grands écrans (lg), la sidebar est statique et toujours visible */
         @media (min-width: 1024px) {
             .sidebar {
                 transform: translateX(0) !important;
+                position: fixed; /* Changement : Rendre la sidebar fixe sur grand écran */
+                height: 100vh;
             }
         }
+        /* Conteneur principal pour décaler le contenu sur les grands écrans (lg) */
+        /* La marge doit correspondre à la largeur de la sidebar (w-64) */
         @media (min-width: 1024px) {
             .main-content {
+                margin-left: 256px;
             }
         }
     </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" class="sidebar w-64 bg-sidebar-var border-r border-sidebar-var p-6 lg:block transition-colors-theme">
         <div class="flex items-center mb-10">
             <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">Nexus Pro</span>
         </div>
         <nav class="space-y-3">
+            <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="{{ url_for('user_bp.api_keys') }}" 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">key</span>
                 <span class="ml-3">Clés API</span>
             </a>
+            <a href="{{ url_for('user_bp.api_logs') }}" 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">list_alt</span>
                 <span class="ml-3">Logs d'API</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="{{ 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 class="absolute bottom-6 w-52 text-xs text-secondary-var transition-colors-theme">
+             <p>Connecté en tant que: <span class="font-semibold text-color-var transition-colors-theme">{{ user.email if user else 'Chargement...' }}</span></p>
+             <p>Plan: <span class="font-semibold text-color-var transition-colors-theme">{{ (user.plan | upper) if user else 'Chargement...' }}</span></p>
         </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">
             <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">Nexus Pro</span>
             </div>
+            <button id="sidebar-toggle" class="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>
         </header>
+        <h1 class="text-3xl font-bold mb-8 text-color-var transition-colors-theme">Gestion des Clés API</h1>
         {% with messages = get_flashed_messages(with_categories=true) %}
             {% if messages %}
             {% endif %}
         {% endwith %}
+        <div class="bg-card-var p-6 rounded-lg shadow-xl border border-sidebar-var transition-colors-theme">
+            <h2 class="text-xl font-semibold mb-4 text-color-var transition-colors-theme">Votre Clé d'Accès Principale</h2>
+            <p class="text-secondary-var mb-6 transition-colors-theme">Utilisez cette clé pour authentifier vos requêtes auprès de l'API ErnestMind Nexus.</p>
             <div class="flex items-center space-x-4 mb-6">
                 <input id="api-key-display"
                        type="text"
                        readonly
+                       class="flex-grow bg-input-var border border-input-var text-input-key-var p-3 rounded-lg font-mono text-sm break-all focus:outline-none focus:ring-2 focus:ring-primary-color-var focus:border-primary-color-var transition-colors-theme"
                        value="{{ user.api_key if user and user.api_key else 'Clé API non trouvée. Réinitialisez-la.' }}">
+                <button id="copy-btn" class="bg-primary-color-var hover:bg-primary-hover-var text-white font-bold py-3 px-4 rounded-lg transition duration-200 flex items-center btn-square transition-colors-theme">
                     <span class="material-symbols-rounded">content_copy</span>
                     <span class="ml-2 hidden sm:inline">Copier</span>
                 </button>
             </div>
+            <div class="flex items-center justify-between border-t border-sidebar-var pt-4 transition-colors-theme">
+                <button id="regenerate-btn" class="text-sm text-red-500 hover:text-red-400 transition duration-200 flex items-center font-medium transition-colors-theme">
                     <span class="material-symbols-rounded text-lg mr-1">refresh</span>
                     Régénérer la Clé
+                    <div id="spinner" class="spinner w-4 h-4 border-2 rounded-full ml-2 hidden" style="border-bottom-color: transparent;"></div>
                 </button>
+                <p id="status-message" class="text-sm text-input-key-var font-medium transition-colors-theme"></p>
             </div>
         </div>
+        <div class="mt-8 p-4 bg-warning-var border border-warning-border-var rounded-lg text-warning-text-var transition-colors-theme">
             <h3 class="font-bold flex items-center">
                 <span class="material-symbols-rounded mr-2">warning</span>
                 Attention Sécurité
     </div>
     <script>
+        // Logique du thème (copiée de inscription.html)
+        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 {
+            // Par défaut, nous nous assurons que 'dark' est appliqué s'il n'y a pas de thème enregistré
+            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 copie de la clé API
         const copyBtn = document.getElementById('copy-btn');
         const apiKeyDisplay = document.getElementById('api-key-display');
         const regenerateBtn = document.getElementById('regenerate-btn');
         const spinner = document.getElementById('spinner');
         // 1. Fonctionnalité de Copie
         copyBtn.addEventListener('click', () => {
             apiKeyDisplay.select();
             sidebar.classList.toggle('open');
         });
+        // 3. Logique de REGÉNÉRATION (Message de démo)
         regenerateBtn.addEventListener('click', (e) => {
             e.preventDefault();
             // Simuler une action pour l'utilisateur
         const logoutHandler = async (e) => {
             e.preventDefault();
             // La déconnexion est maintenant gérée par la route Flask directe
+            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);