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>Connexion - Nexus</title> | |
| <link rel="stylesheet" | |
| href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@24,400,0,0" /> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <style> | |
| 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 */ | |
| .theme-switch { | |
| background: none; | |
| border: none; | |
| cursor: pointer; | |
| font-size: 24px; | |
| transition: color 0.2s; | |
| position: absolute; | |
| top: 1rem; | |
| right: 1rem; | |
| z-index: 10; | |
| } | |
| /* Définir les Variables de Thème (Mise à jour pour être similaire à inscription.html) */ | |
| /* Mode Sombre (Défaut : noir très foncé #121212) */ | |
| :root, .dark { | |
| --bg-page: #121212; | |
| --bg-card: #1E1E1E; | |
| --text-color: #FFFFFF; /* Texte général blanc en mode sombre */ | |
| --input-bg: #2C2C2C; | |
| --border-color: #383838; | |
| --primary-color: #3B82F6; | |
| --primary-hover: #2563EB; | |
| --error-color: #DC2626; | |
| } | |
| /* Mode Clair */ | |
| .light { | |
| --bg-page: #F5F5F5; | |
| --bg-card: #FFFFFF; | |
| --text-color: #000000; /* Texte général noir foncé en mode clair */ | |
| --input-bg: #FFFFFF; | |
| --border-color: #D1D5DB; | |
| --primary-color: #3B82F6; | |
| --primary-hover: #2563EB; | |
| --error-color: #DC2626; | |
| } | |
| /* 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); } | |
| .text-color-var { color: var(--text-color); } | |
| .bg-input-var { background-color: var(--input-bg); } | |
| .border-color-var { border-color: var(--border-color); } | |
| .text-primary-color-var { color: var(--primary-color); } | |
| .bg-primary-color-var { background-color: var(--primary-color); } | |
| .hover\:text-primary-hover-var:hover { 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); } | |
| /* Forcer le texte saisi dans les champs de formulaire en noir foncé (#000000) */ | |
| input[type="text"], | |
| input[type="email"], | |
| input[type="password"] { | |
| color: #000000 ; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-page-var transition-colors-theme min-h-screen flex items-center justify-center p-4"> | |
| <button id="theme-toggle" class="theme-switch text-color-var hover:text-primary-color-var transition-colors-theme"> | |
| <span class="material-symbols-rounded">dark_mode</span> | |
| </button> | |
| <div class="w-full max-w-6xl flex flex-col md:flex-row shadow-2xl rounded-lg overflow-hidden"> | |
| <div class="hidden md:block md:w-1/2 bg-primary-color-var p-12 flex flex-col justify-center items-center text-white transition-colors-theme"> | |
| <svg class="w-32 h-32 mb-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15a4 4 0 01-4-4V7a4 4 0 118 0v4a4 4 0 01-4 4z"/> | |
| </svg> | |
| <h3 class="text-4xl font-extrabold mb-4 text-center">Bienvenue de Retour</h3> | |
| <p class="text-center text-lg">Veuillez vous connecter pour accéder à votre tableau de bord.</p> | |
| </div> | |
| <div class="w-full md:w-1/2 bg-card-var transition-colors-theme p-8 md:p-12"> | |
| <h2 class="text-3xl font-bold text-center text-color-var mb-8 transition-colors-theme">Connexion</h2> | |
| <p id="message" class="text-center text-red-500 mb-4"></p> | |
| <form id="loginForm"> | |
| <div class="mb-4"> | |
| <label for="username" class="block text-sm font-medium text-color-var">Nom d'utilisateur ou Email</label> | |
| <input type="text" id="username" name="username" placeholder="Votre nom d'utilisateur ou email" required | |
| class="mt-1 block w-full px-3 py-2 border border-border-color-var rounded-md shadow-sm bg-input-bg-var text-color-var focus:outline-none focus:ring-primary-color-var focus:border-primary-color-var transition-colors-theme"> | |
| </div> | |
| <div class="mb-4"> | |
| <label for="password" class="block text-sm font-medium text-color-var">Mot de Passe</label> | |
| <input type="password" id="password" name="password" placeholder="Votre mot de passe" required | |
| class="mt-1 block w-full px-3 py-2 border border-border-color-var rounded-md shadow-sm bg-input-bg-var text-color-var focus:outline-none focus:ring-primary-color-var focus:border-primary-color-var transition-colors-theme"> | |
| </div> | |
| <div class="flex items-center justify-between mb-6"> | |
| <a href="/mot-de-passe-oublie" class="text-sm font-medium text-primary-color-var hover:text-primary-hover-var transition-colors-theme"> | |
| Mot de passe oublié ? | |
| </a> | |
| <a href="/inscription" class="text-sm font-medium text-primary-color-var hover:text-primary-hover-var transition-colors-theme"> | |
| Pas de compte? S'inscrire | |
| </a> | |
| </div> | |
| <button type="submit" | |
| class="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-primary-color-var hover:bg-primary-hover-var focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-color-var transition duration-150 ease-in-out"> | |
| Se Connecter | |
| </button> | |
| </form> | |
| </div> | |
| </div> | |
| <script> | |
| const form = document.getElementById('loginForm'); | |
| const message = document.getElementById('message'); | |
| form.addEventListener('submit', async (e) => { | |
| e.preventDefault(); | |
| message.textContent = 'Connexion en cours...'; | |
| message.className = 'text-gray-500 mb-4'; | |
| const formData = { | |
| username: form.username.value, | |
| password: form.password.value, | |
| }; | |
| try { | |
| const response = await fetch('/api/login', { | |
| method: 'POST', | |
| headers: { 'Content-Type': 'application/json' }, | |
| body: JSON.stringify(formData) | |
| }); | |
| const data = await response.json(); | |
| if (data.status === 'Success') { | |
| message.textContent = data.message + " Redirection vers le tableau de bord..."; | |
| message.className = 'text-green-500 mb-4'; | |
| // REDIRECTION AUTOMATIQUE VERS LE DASHBOARD | |
| setTimeout(() => { | |
| window.location.href = '/dashboard'; | |
| }, 1500); | |
| } else { | |
| message.textContent = 'Erreur : ' + (data.message || 'Échec de la connexion.'); | |
| message.className = 'text-red-500 mb-4'; | |
| } | |
| } catch (error) { | |
| console.error('Erreur réseau ou du serveur Flask:', error); | |
| message.textContent = 'Erreur de connexion au serveur.'; | |
| message.className = 'text-red-500 mb-4'; | |
| } | |
| }); | |
| // Logique du thème (conservée pour l'esthétique) | |
| 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(); | |
| }); | |
| </script> | |
| </body> | |
| </html> |