Spaces:
Sleeping
Sleeping
| <html lang="fr" class="dark"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Nexus | Logs d'API - 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; } | |
| /* Définition des variables de thème (Ajoutées pour le style) */ | |
| :root { | |
| /* Couleurs de base (exemple - ajustez si nécessaire) */ | |
| --page-var: #f8fafc; /* light - slate-50 */ | |
| --color-var: #0f172a; /* light - slate-900 */ | |
| --secondary-var: #64748b; /* light - slate-500 */ | |
| --card-var: #ffffff; /* light - white */ | |
| --sidebar-var: #e2e8f0; /* light - slate-200 */ | |
| --sidebar-active-var: #cbd5e1; /* light - slate-300 */ | |
| --input-var: #f1f5f9; /* light - slate-100 */ | |
| --primary-color-var: #4f46e5; /* indigo-600 */ | |
| --primary-hover-var: #4338ca; /* indigo-700 */ | |
| --error-var: #fef2f2; /* red-50 */ | |
| --success-var: #f0fdf4; /* green-50 */ | |
| --warning-var: #fcd34d; /* amber-400 */ | |
| } | |
| .dark { | |
| --page-var: #18181b; /* dark - zinc-900 (Gris très foncé pour l'arrière-plan de la page) */ | |
| --color-var: #f4f4f5; /* dark - zinc-100 (Texte clair) */ | |
| --secondary-var: #a1a1aa; /* dark - zinc-400 (Texte secondaire) */ | |
| --card-var: #27272a; /* dark - zinc-800 (Gris foncé pour les cartes et la sidebar) */ | |
| --sidebar-var: #27272a; /* dark - zinc-800 */ | |
| --sidebar-active-var: #3f3f46; /* dark - zinc-700 (Gris un peu plus clair pour l'actif) */ | |
| --input-var: #18181b; /* dark - zinc-900 (Fond de champ de saisie) */ | |
| --primary-color-var: #6366f1; /* indigo-500 (Couleur primaire inchangée) */ | |
| --primary-hover-var: #4f46e5; /* indigo-600 */ | |
| --error-var: #450a0a; /* red-950 */ | |
| --success-var: #052e16; /* green-950 */ | |
| --warning-var: #b45309; /* amber-800 */ | |
| } | |
| /* 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 du reste */ | |
| } | |
| /* Style pour la sidebar responsive */ | |
| .sidebar { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| height: 100vh; | |
| z-index: 40; | |
| transform: translateX(-100%); | |
| } | |
| /* Styles pour le mode desktop/large screen */ | |
| @media (min-width: 1024px) { | |
| .sidebar { | |
| transform: translateX(0); | |
| } | |
| .main-content { | |
| margin-left: 16rem; /* 64px width */ | |
| } | |
| } | |
| /* Styles pour le mode mobile/tablet */ | |
| @media (max-width: 1023px) { | |
| .sidebar { | |
| transition: transform 0.3s ease-in-out; | |
| } | |
| .sidebar.open { | |
| transform: translateX(0); | |
| } | |
| } | |
| /* Ajout des styles pour les variables CSS dans Tailwind */ | |
| .bg-page-var { background-color: var(--page-var); } | |
| .text-color-var { color: var(--color-var); } | |
| .text-secondary-var { color: var(--secondary-var); } | |
| .bg-card-var { background-color: var(--card-var); } | |
| .bg-sidebar-var { background-color: var(--sidebar-var); } | |
| .border-sidebar-var { border-color: var(--sidebar-var); } | |
| .bg-sidebar-active-var { background-color: var(--sidebar-active-var); } | |
| .bg-input-var { background-color: var(--input-var); } | |
| .border-input-var { border-color: var(--input-var); } | |
| .text-primary-color-var { color: var(--primary-color-var); } | |
| .focus\:ring-primary-color-var:focus { --tw-ring-color: var(--primary-color-var); } | |
| .focus\:border-primary-color-var:focus { border-color: var(--primary-color-var); } | |
| .bg-primary-color-var { background-color: var(--primary-color-var); } | |
| .hover\:bg-primary-hover-var:hover { background-color: var(--primary-hover-var); } | |
| .hover\:bg-sidebar-active-var:hover { background-color: var(--sidebar-active-var); } | |
| .hover\:bg-sidebar-active-var\/80:hover { background-color: color-mix(in srgb, var(--sidebar-active-var) 80%, transparent); } | |
| /* Correction pour les messages flash pour utiliser les variables */ | |
| .bg-red-900\/20 { background-color: color-mix(in srgb, var(--error-var) 20%, transparent); } /* Approximation des couleurs spécifiques */ | |
| .text-red-500 { color: #ef4444; } /* Laissez le rouge spécifique pour les erreurs */ | |
| .border-red-900 { border-color: #7f1d1d; } /* Laissez le rouge spécifique pour les erreurs */ | |
| .bg-green-900\/20 { background-color: color-mix(in srgb, var(--success-var) 20%, transparent); } /* Approximation des couleurs spécifiques */ | |
| .text-green-500 { color: #22c55e; } /* Laissez le vert spécifique pour le succès */ | |
| .border-green-900 { border-color: #064e3b; } /* Laissez le vert spécifique pour le succès */ | |
| .hover\:text-link-hover-var:hover { color: var(--secondary-var); } /* Ajout d'une pseudo-variable pour le hover de l'icône de thème (simple fallback) */ | |
| </style> | |
| </head> | |
| <body class="bg-page-var text-color-var min-h-screen transition-colors-theme"> | |
| <button id="theme-switch" 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_key') }}" 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">key</span> | |
| <span class="ml-3">Clés 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="/api_logs" 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">list_alt</span> | |
| <span class="ml-3">Logs d'API</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 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">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 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 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> | |
| <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">Logs d'API Utilisateur</h1> | |
| {% with messages = get_flashed_messages(with_categories=true) %} | |
| {% if messages %} | |
| {% for category, message in messages %} | |
| <div class="p-4 mb-4 text-sm rounded-lg border border-transparent | |
| {{ 'bg-red-900/20 text-red-500 border-red-900' if category == 'error' or category == 'danger' or category == 'warning' else 'bg-green-900/20 text-green-500 border-green-900' }}" role="alert"> | |
| {{ message }} | |
| </div> | |
| {% endfor %} | |
| {% endif %} | |
| {% endwith %} | |
| <div class="bg-card-var p-6 rounded-lg shadow-xl border border-sidebar-var transition-colors-theme mb-8"> | |
| <h2 class="text-xl font-semibold mb-4 flex items-center text-color-var transition-colors-theme"> | |
| <span class="material-symbols-rounded mr-2">history</span> | |
| Historique des Requêtes API | |
| </h2> | |
| <p class="text-secondary-var mb-6 text-sm transition-colors-theme">Retrouvez ici les 100 dernières requêtes effectuées sur l'API Nexus.</p> | |
| <div class="overflow-x-auto"> | |
| <table class="min-w-full divide-y divide-sidebar-active-var transition-colors-theme"> | |
| <thead> | |
| <tr class="text-left text-sm font-semibold text-secondary-var uppercase tracking-wider bg-input-var transition-colors-theme"> | |
| <th class="px-4 py-3">Date</th> | |
| <th class="px-4 py-3">Endpoint</th> | |
| <th class="px-4 py-3">Méthode</th> | |
| <th class="px-4 py-3">Statut</th> | |
| <th class="px-4 py-3">Temps (ms)</th> | |
| </tr> | |
| </thead> | |
| <tbody class="divide-y divide-sidebar-active-var transition-colors-theme text-sm"> | |
| {% if api_logs and api_logs|length > 0 %} | |
| {% for log in api_logs %} | |
| <tr class="text-color-var hover:bg-sidebar-active-var/80 transition-colors-theme"> | |
| <td class="px-4 py-3 whitespace-nowrap">{{ log.timestamp }}</td> | |
| <td class="px-4 py-3 whitespace-nowrap">{{ log.endpoint }}</td> | |
| <td class="px-4 py-3 whitespace-nowrap">{{ log.method }}</td> | |
| <td class="px-4 py-3 whitespace-nowrap"> | |
| {% if log.status_code >= 200 and log.status_code < 300 %} | |
| <span class="text-green-500 font-medium">Succès ({{ log.status_code }})</span> | |
| {% elif log.status_code >= 400 and log.status_code < 500 %} | |
| <span class="text-red-500 font-medium">Erreur Client ({{ log.status_code }})</span> | |
| {% elif log.status_code >= 500 %} | |
| <span class="text-red-500 font-medium">Erreur Serveur ({{ log.status_code }})</span> | |
| {% else %} | |
| <span class="text-secondary-var">{{ log.status_code }}</span> | |
| {% endif %} | |
| </td> | |
| <td class="px-4 py-3 whitespace-nowrap">{{ log.response_time_ms }}</td> | |
| </tr> | |
| {% endfor %} | |
| {% else %} | |
| <tr class="text-secondary-var"> | |
| <td colspan="5" class="px-4 py-6 text-center">Aucun log d'API trouvé pour le moment.</td> | |
| </tr> | |
| {% endif %} | |
| </tbody> | |
| </table> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| // Fonction utilitaire pour appliquer le thème | |
| function applyTheme(theme) { | |
| if (theme === 'dark') { | |
| document.documentElement.classList.add('dark'); | |
| localStorage.setItem('theme', 'dark'); | |
| } else { | |
| document.documentElement.classList.remove('dark'); | |
| localStorage.setItem('theme', 'light'); | |
| } | |
| // Mettre à jour l'icône du switch si nécessaire | |
| const icon = document.querySelector('#theme-switch .material-symbols-rounded'); | |
| if (icon) { | |
| // S'assurer que l'icône reflète le mode ACTIF | |
| icon.textContent = theme === 'dark' ? 'light_mode' : 'dark_mode'; | |
| } | |
| } | |
| // 1. Initialisation du thème au chargement | |
| // Récupérer le thème sauvé ou utiliser 'dark' comme défaut | |
| const savedTheme = localStorage.getItem('theme') || 'dark'; | |
| applyTheme(savedTheme); | |
| // 2. Logique du switch de thème | |
| document.getElementById('theme-switch').addEventListener('click', () => { | |
| // Vérifier si la classe 'dark' est présente sur l'élément racine | |
| const currentTheme = document.documentElement.classList.contains('dark') ? 'dark' : 'light'; | |
| const newTheme = currentTheme === 'light' ? 'dark' : 'light'; | |
| applyTheme(newTheme); | |
| }); | |
| // 3. Logique de bascule de la sidebar pour mobile/tablette | |
| const sidebarToggle = document.getElementById('sidebar-toggle'); | |
| const sidebar = document.getElementById('sidebar'); | |
| if (sidebarToggle && sidebar) { | |
| sidebarToggle.addEventListener('click', () => { | |
| sidebar.classList.toggle('open'); | |
| }); | |
| } | |
| // 4. Fermeture de la sidebar lors du clic sur un lien (pour mobile) | |
| // Note: Assurez-vous que 'sidebar' est défini avant d'appeler querySelectorAll | |
| if (sidebar) { | |
| const sidebarLinks = sidebar.querySelectorAll('a'); | |
| if (sidebarLinks) { | |
| sidebarLinks.forEach(link => { | |
| link.addEventListener('click', () => { | |
| // Fermer la sidebar uniquement sur les petits écrans | |
| if (window.innerWidth < 1024) { | |
| sidebar.classList.remove('open'); | |
| } | |
| }); | |
| }); | |
| } | |
| } | |
| // 5. Logique de Déconnexion (Conservée) | |
| const logoutHandler = async (e) => { | |
| e.preventDefault(); | |
| // La déconnexion est 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. | |
| const logoutButtonSidebar = document.getElementById('logout-button-sidebar'); | |
| if (logoutButtonSidebar) { | |
| logoutButtonSidebar.addEventListener('click', logoutHandler); | |
| } | |
| </script> | |
| </body> | |
| </html> |