Spaces:
Build error
Build error
| <html lang="fr"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Support & Contact - Nexus</title> | |
| <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> | |
| body { font-family: 'Inter', sans-serif; } | |
| /* Étape 2 : Définir les Variables de Thème (SOMBRE par défaut) */ | |
| :root { | |
| /* Couleurs SOMBRE (Noir très foncé pour le fond) */ | |
| --bg-darker: #0A0A0A; /* Très foncé pour la barre ou le footer */ | |
| --bg-default: #121212; /* Fond général */ | |
| --bg-form: #1F1F1F; /* Fond des blocs de contenu */ | |
| --text-color: #E3E3E3; | |
| --input-bg: #2C2C2C; | |
| --input-border: #2C2C2C; | |
| --header-border: #333333; /* Bordure plus discrète */ | |
| --blue-500: #3B82F6; /* Couleur primaire pour rester visible */ | |
| --blue-600: #2563EB; | |
| --blue-700: #1D4ED8; | |
| } | |
| /* Mode CLAIR */ | |
| html.light { | |
| /* Couleurs CLAIR */ | |
| --bg-darker: #FFFFFF; | |
| --bg-default: #F7F7F7; | |
| --bg-form: #FFFFFF; | |
| --text-color: #333333; | |
| --input-bg: #EAEAEA; | |
| --input-border: #D1D5DB; | |
| --header-border: #E5E7EB; | |
| --blue-500: #1D4ED8; | |
| --blue-600: #2563EB; | |
| --blue-700: #1D4ED8; | |
| } | |
| /* Appliquer les variables et transitions */ | |
| body { | |
| background-color: var(--bg-default) ; | |
| color: var(--text-color) ; | |
| transition: background-color 0.3s, color 0.3s; | |
| } | |
| /* Réinitialiser les classes Tailwind par défaut pour utiliser les variables */ | |
| .bg-gray-900 { background-color: var(--bg-default) ; } | |
| .bg-gray-800 { background-color: var(--bg-form) ; } | |
| .bg-gray-700 { background-color: var(--input-bg) ; } | |
| .text-white { color: var(--text-color) ; } | |
| .text-gray-300 { color: var(--text-color) ; } | |
| .text-gray-400 { color: #A0A0A0 ; } /* Garder gris pour les textes secondaires */ | |
| .text-gray-500 { color: #888888 ; } | |
| .border-gray-700 { border-color: var(--header-border) ; } | |
| .border-blue-500\/50 { border-color: color-mix(in srgb, var(--blue-500) 50%, transparent) ; } | |
| .text-blue-500 { color: var(--blue-500) ; } | |
| .bg-blue-600 { background-color: var(--blue-600) ; } | |
| .hover\:bg-blue-700:hover { background-color: var(--blue-700) ; } | |
| .hover\:text-blue-500:hover { color: var(--blue-500) ; } | |
| .border-blue-600 { border-color: var(--blue-600) ; } | |
| /* Style du bouton de thème */ | |
| #theme-toggle { | |
| background: none; | |
| border: none; | |
| cursor: pointer; | |
| color: var(--text-color); | |
| font-size: 24px; | |
| transition: color 0.2s; | |
| margin-right: 16px; /* Espace à droite du bouton */ | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-900 text-white min-h-screen"> | |
| <div class="container mx-auto p-4 sm:p-6 lg:p-8"> | |
| <header class="flex flex-col sm:flex-row justify-between items-center py-4 border-b border-blue-500/50 mb-8 | |
| bg-[var(--bg-default)] sticky top-0 z-50 transition duration-300 shadow-xl shadow-black/20"> | |
| <h1 class="text-4xl font-extrabold text-blue-500 tracking-wider mb-4 sm:mb-0"> | |
| Support & Contact | |
| </h1> | |
| <nav class="flex items-center space-x-4"> | |
| <button id="theme-toggle" aria-label="Basculer le thème"> | |
| <span class="material-symbols-rounded">light_mode</span> | |
| </button> | |
| <a href="/" class="px-4 py-2 text-white hover:text-blue-300 transition duration-200 font-medium"> | |
| Accueil | |
| </a> | |
| {% if is_logged_in %} | |
| <a href="/dashboard" class="px-4 py-2 bg-blue-600 hover:bg-blue-700 rounded-lg transition duration-200 font-medium"> | |
| Dashboard | |
| </a> | |
| {% else %} | |
| <a href="/connexion" class="px-4 py-2 border-2 border-blue-600 text-blue-600 rounded-lg hover:bg-blue-600 hover:text-white font-medium transition duration-200"> | |
| Connexion | |
| </a> | |
| {% endif %} | |
| </nav> | |
| </header> | |
| <main class="space-y-10 max-w-2xl mx-auto"> | |
| <div class="p-8 bg-gray-800 rounded-xl shadow-2xl border-l-4 border-blue-500"> | |
| {% if is_logged_in %} | |
| <h2 class="text-3xl font-bold text-blue-500 mb-4">Envoyer une Requête (Connecté)</h2> | |
| <p class="text-gray-300 mb-6"> | |
| Votre ID utilisateur ({{ user_id }}) sera automatiquement attaché à votre ticket, garantissant un traitement plus rapide. | |
| </p> | |
| {% else %} | |
| <h2 class="text-3xl font-bold text-blue-500 mb-4">Contactez notre Équipe</h2> | |
| <p class="text-gray-300 mb-6"> | |
| Veuillez vous connecter pour un support prioritaire. | |
| </p> | |
| {% endif %} | |
| <form id="supportForm" class="space-y-6"> | |
| <div> | |
| <label for="subject" class="block text-sm font-medium text-gray-300 mb-1">Sujet de la Requête</label> | |
| <input type="text" id="subject" name="subject" required | |
| class="w-full px-4 py-3 bg-gray-700 text-white border-2 border-gray-700 rounded-lg focus:border-blue-500 transition duration-200" | |
| placeholder="Problème de connexion, Question de facturation..."> | |
| </div> | |
| <div> | |
| <label for="email" class="block text-sm font-medium text-gray-300 mb-1">Votre E-mail</label> | |
| <input type="email" id="email" name="email" required | |
| class="w-full px-4 py-3 bg-gray-700 text-white border-2 border-gray-700 rounded-lg focus:border-blue-500 transition duration-200" | |
| placeholder="votre.email@exemple.com" | |
| value="{% if is_logged_in %}L'email serait ici (via API){% endif %}"> | |
| </div> | |
| <div> | |
| <label for="message" class="block text-sm font-medium text-gray-300 mb-1">Message</label> | |
| <textarea id="message" name="message" rows="5" required | |
| class="w-full px-4 py-3 bg-gray-700 text-white border-2 border-gray-700 rounded-lg focus:border-blue-500 transition duration-200" | |
| placeholder="Décrivez votre problème ou votre question en détail."></textarea> | |
| </div> | |
| <div id="messageBoxSupport" class="text-sm p-3 rounded-lg hidden" role="alert"></div> | |
| <button type="submit" | |
| class="w-full py-3 bg-blue-600 hover:bg-blue-700 text-white font-semibold rounded-lg transition duration-300 shadow-lg"> | |
| Envoyer le Message | |
| </button> | |
| </form> | |
| </div> | |
| </main> | |
| <footer class="mt-12 pt-6 border-t border-gray-700 text-center text-gray-500 text-sm"> | |
| © 2024 Nexus. Tous droits réservés. | |
| </footer> | |
| </div> | |
| <script> | |
| // Logique de bascule du mode sombre/clair (Étape 3) | |
| const themeToggle = document.getElementById('theme-toggle'); | |
| const htmlElement = document.documentElement; | |
| const iconElement = themeToggle.querySelector('.material-symbols-rounded'); | |
| // Charger le thème depuis le localStorage | |
| const savedTheme = localStorage.getItem('theme'); | |
| if (savedTheme === 'light') { | |
| htmlElement.classList.add('light'); | |
| iconElement.textContent = 'dark_mode'; // Afficher l'icône "Sombre" en mode clair | |
| } else { | |
| // Default is 'dark' (or first visit) | |
| iconElement.textContent = 'light_mode'; // Afficher l'icône "Clair" en mode sombre | |
| } | |
| themeToggle.addEventListener('click', () => { | |
| if (htmlElement.classList.contains('light')) { | |
| // Passage du mode Clair au mode Sombre | |
| htmlElement.classList.remove('light'); | |
| localStorage.setItem('theme', 'dark'); | |
| iconElement.textContent = 'light_mode'; | |
| } else { | |
| // Passage du mode Sombre au mode Clair | |
| htmlElement.classList.add('light'); | |
| localStorage.setItem('theme', 'light'); | |
| iconElement.textContent = 'dark_mode'; | |
| } | |
| }); | |
| // Logique du formulaire de support (existante) | |
| document.getElementById('supportForm').addEventListener('submit', async (event) => { | |
| event.preventDefault(); | |
| const subject = document.getElementById('subject').value; | |
| const email = document.getElementById('email').value; | |
| const message = document.getElementById('message').value; | |
| const messageBox = document.getElementById('messageBoxSupport'); | |
| messageBox.classList.add('hidden'); | |
| messageBox.textContent = ''; | |
| const formData = { | |
| subject, | |
| email, | |
| message, | |
| {% if is_logged_in %} | |
| user_id: "{{ user_id }}" // Ajout automatique de l'ID si connecté | |
| {% else %} | |
| user_id: null | |
| {% endif %} | |
| }; | |
| try { | |
| // Utiliser la route proxy Flask pour contacter l'API Nexus | |
| const response = await fetch('/api/support', { | |
| method: 'POST', | |
| headers: { 'Content-Type': 'application/json' }, | |
| body: JSON.stringify(formData) | |
| }); | |
| // Simuler la réponse, car la route /api/support est un placeholder dans app.py | |
| const data = await response.json(); | |
| // Si la route /api/support n'est qu'un proxy sans réponse complète, on simule: | |
| if (response.ok) { | |
| messageBox.classList.remove('bg-red-900/50', 'text-red-300'); | |
| messageBox.classList.add('bg-green-900/50', 'text-green-300'); | |
| messageBox.textContent = "Votre requête a été envoyée avec succès ! (Simulé pour l'API Nexus)"; | |
| document.getElementById('supportForm').reset(); | |
| } else { | |
| messageBox.classList.remove('bg-green-900/50', 'text-green-300'); | |
| messageBox.classList.add('bg-red-900/50', 'text-red-300'); | |
| messageBox.textContent = data.message || "Erreur lors de l'envoi. Veuillez réessayer."; | |
| } | |
| messageBox.classList.remove('hidden'); | |
| } catch (error) { | |
| console.error('Erreur réseau ou du serveur Flask:', error); | |
| messageBox.classList.remove('bg-green-900/50', 'text-green-300'); | |
| messageBox.classList.add('bg-red-900/50', 'text-red-300'); | |
| messageBox.textContent = "Impossible de contacter le serveur. Veuillez réessayer."; | |
| messageBox.classList.remove('hidden'); | |
| } | |
| }); | |
| </script> | |
| <footer class="mt-16 border-t border-gray-700 bg-gray-900"> | |
| <div class="container mx-auto p-4 sm:p-6 lg:p-8 max-w-7xl"> | |
| <div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-5 gap-8 text-sm"> | |
| <div class="col-span-2 lg:col-span-1"> | |
| <a href="/" class="text-3xl font-extrabold text-blue-500 tracking-wider">NEXUS</a> | |
| <p class="mt-3 text-gray-400"> | |
| L'infrastructure API qui propulse votre avenir technologique. | |
| </p> | |
| <div class="mt-4 flex space-x-4"> | |
| <a href="#" class="text-gray-400 hover:text-blue-500 transition duration-200"> | |
| <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M12 2.163c3.204 0 3.584.014 4.85.07c3.275.146 4.47 1.583 4.61 4.85.056 1.266.07 1.646.07 4.85s-.014 3.584-.07 4.85c-.14 3.267-1.335 4.704-4.61 4.85-1.266.056-1.646.07-4.85.07s-3.584-.014-4.85-.07c-3.275-.146-4.47-1.583-4.61-4.85-.056-1.266-.07-1.646-.07-4.85s.014-3.584.07-4.85c.14-3.267 1.335-4.704 4.61-4.85 1.266-.056 1.646-.07 4.85-.07zM12 0c-3.784 0-4.285.016-5.773.083-4.722.211-6.755 2.24-6.965 6.965C.016 7.715 0 8.216 0 12s.016 4.285.083 5.773c.21 4.721 2.239 6.755 6.965 6.965 1.488.067 1.99.083 5.773.083s4.285-.016 5.773-.083c4.721-.21 6.755-2.239 6.965-6.965.067-1.488.083-1.99.083-5.773s-.016-4.285-.083-5.773c-.21-4.722-2.239-6.755-6.965-6.965C16.285.016 15.784 0 12 0zm0 14.5c-1.381 0-2.5-1.119-2.5-2.5s1.119-2.5 2.5-2.5 2.5 1.119 2.5 2.5-1.119 2.5-2.5 2.5z"/></svg> | |
| </a> | |
| </div> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-semibold text-white mb-4">Plateforme</h3> | |
| <ul class="space-y-3 text-gray-400"> | |
| <li><a href="/tarifs" class="hover:text-blue-500 transition duration-200">Tarifs</a></li> | |
| <li><a href="/documentation" class="hover:text-blue-500 transition duration-200">Documentation</a></li> | |
| <li><a href="/connexion" class="hover:text-blue-500 transition duration-200">Connexion</a></li> | |
| <li><a href="/support" class="hover:text-blue-500 transition duration-200">Support</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-semibold text-white mb-4">Légal</h3> | |
| <ul class="space-y-3 text-gray-400"> | |
| <li><a href="/politique-confidentialite" class="hover:text-blue-500 transition duration-200">Politique de Confidentialité</a></li> | |
| <li><a href="/mentions-legales" class="hover:text-blue-500 transition duration-200">Mentions Légales</a></li> | |
| <li><a href="/conditions-utilisation" class="hover:text-blue-500 transition duration-200">Conditions d'Utilisation</a></li> | |
| <li><a href="/a-propos" class="hover:text-blue-500 transition duration-200">À Propos</a></li> | |
| </ul> | |
| </div> | |
| <div class="col-span-2 md:col-span-1"> | |
| <h3 class="text-lg font-semibold text-white mb-4">Ressources</h3> | |
| <ul class="space-y-3 text-gray-400"> | |
| <li><a href="mailto:support@nexus.com" class="hover:text-blue-500 transition duration-200">Contact Email</a></li> | |
| <li><a href="/dashboard" class="hover:text-blue-500 transition duration-200">Espace Client</a></li> | |
| <li><a href="/api-logs" class="hover:text-blue-500 transition duration-200">Statut API</a></li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="mt-10 pt-6 border-t border-gray-800 text-center text-gray-500 text-sm"> | |
| © 2025 Nexus. Tous droits réservés. Construit pour l'ère des microservices. | |
| </div> | |
| </div> | |
| </footer> | |
| </body> | |
| </html> |