Spaces:

ppaihack
/

ZAuth

Sleeping

App Files Files Community

Martin Natale commited on Sep 28, 2024

Commit

974696d

1 Parent(s): 79192e7

feat: Update front

Browse files

Files changed (6) hide show

client/static/createAccount.html +52 -44
client/static/css/styles.css +12 -0
client/static/fonts/GeistMono-Black.ttf +0 -0
client/static/images/background2.jpg +0 -0
client/static/index.html +91 -12
client/static/login.html +50 -27

client/static/createAccount.html CHANGED Viewed

@@ -4,55 +4,53 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>TechMart - Créer un compte</title>
     <script src="https://cdn.tailwindcss.com"></script>
     <script src="https://unpkg.com/scrollreveal"></script>
-    <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=Inter:wght@300;400;500&display=swap" rel="stylesheet">
     <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" rel="stylesheet">
     <link rel="stylesheet" href="/static/css/styles.css">
 </head>
 <body class="bg-gray-900 text-white min-h-screen flex flex-col" style="background-image: url('/static/images/background.jpg');">
-    <!-- <header class="bg-gray-800 p-4">
-        <h1 class="text-3xl font-bold text-center"><i class="fas fa-user-plus mr-2"></i>Créer un compte</h1>
-    </header> -->
     <main class="flex-grow container mx-auto p-6 flex flex-col lg:flex-row items-center justify-center space-y-8 lg:space-y-0 lg:space-x-12">
-<!-- Camera Section -->
-<div class="max-w-md w-full p-6 lg:p-0 lg:w-1/2 flex flex-col items-center video-reveal">
-    <div class="relative">
-        <video id="video-preview" autoplay muted class="w-full max-w-md max-h-md aspect-square bg-black rounded-full object-cover shadow-2xl ring-4 ring-gray-300 ring-opacity-50 hover:ring-blue-500 hover:ring-opacity-75 transition-all duration-300 ease-in-out transform hover:scale-105"></video>
-    <!-- Recording indicator -->
-        <div id="rec-indicator" class="hidden absolute top-2 right-2 w-4 h-4 bg-red-600 rounded-full animate-pulse"></div>
-    </div>
-    <!-- Start Recording Button -->
-    <div class="text-center mt-6">
-        <button type="button" id="start-recording" class="bg-red-600 hover:bg-red-700 text-white font-bold w-16 h-16 rounded-full flex items-center justify-center animate-pulse hover:scale-110 active:scale-95 transition-all duration-300 ease-in-out">
-            <i class="fas fa-video"></i>
-        </button>
-    </div>
-</div>
-<!-- Form Section -->
-<div class="max-w-md w-full bg-gray-800/40 backdrop-blur-md rounded-xl shadow-lg p-6 lg:w-1/2 transform transition-all duration-300 hover:scale-102 hover:shadow-md form-reveal">
-    <form id="create-account-form" method="POST" action="/submitAccount" class="space-y-6" enctype="multipart/form-data">
-        <div>
-            <label for="email" class="block text-sm font-medium text-gray-300">Email Address</label>
-            <input type="email" id="email" name="email" required class="w-full px-4 py-3 mt-2 bg-gray-700 text-white rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50 transition duration-300 ease-in-out">
         </div>
-        <button type="submit" class="w-full bg-green-600 hover:bg-green-700 text-white font-bold py-3 px-4 rounded-lg transition-all duration-300 ease-in-out transform hover:scale-102">
-            Create Account 🤗
-        </button>
-    </form>
-    <div id="error-message" class="mt-4 text-center text-red-500"></div>
-</div>
     </main>
     <!-- <footer class="bg-gray-800 p-4 text-center">
@@ -71,7 +69,7 @@
                 easing: 'ease-in-out',   // Transition fluide
                 delay: 200               // Délai avant le début
             });
             // Animation pour la section formulaire avec un glissement depuis la droite
             ScrollReveal().reveal('.form-reveal', {
                 duration: 1200,          // Durée de l'animation
@@ -81,13 +79,23 @@
                 easing: 'ease-in-out',   // Transition fluide
                 delay: 400               // Délai un peu plus long pour que l'effet soit coordonné
             });
             // Appelle la fonction de caméra et remplissage de l'email après le chargement de la page
             fillEmailFromUrl();
             startCamera();
         });
-        // Add this function at the beginning of the script
         function fillEmailFromUrl() {
             const urlParams = new URLSearchParams(window.location.search);
             const email = urlParams.get('email');
@@ -96,7 +104,7 @@
             }
         }
-        // Call this function when the page loads
         window.onload = function () {
             fillEmailFromUrl();
             startCamera();
@@ -108,7 +116,7 @@
         let isRecording = false;
         const recIndicator = document.getElementById('rec-indicator');
-        // Function to start the camera
         async function startCamera() {
             const videoPreview = document.getElementById('video-preview');
@@ -207,4 +215,4 @@
     </script>
 </body>
-</html>

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Zauth - Create Account</title>
     <script src="https://cdn.tailwindcss.com"></script>
     <script src="https://unpkg.com/scrollreveal"></script>
+    <link href="https://fonts.googleapis.com/css2?family=GeistMono:wght@400;700&family=Playfair+Display:wght@400;700&family=Inter:wght@300;400;500&display=swap" rel="stylesheet">
     <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" rel="stylesheet">
     <link rel="stylesheet" href="/static/css/styles.css">
 </head>
 <body class="bg-gray-900 text-white min-h-screen flex flex-col" style="background-image: url('/static/images/background.jpg');">
+    <!-- Header Aligné en Haut à Gauche -->
+    <header class="container mx-auto p-6">
+        <h1 class="text-4xl font-bold text-left text-white icon-geistmono">Zauth.</h1>
+    </header>
     <main class="flex-grow container mx-auto p-6 flex flex-col lg:flex-row items-center justify-center space-y-8 lg:space-y-0 lg:space-x-12">
+        <!-- Section Vidéo avec ScrollReveal -->
+        <div class="max-w-md w-full p-6 lg:p-0 lg:w-1/2 flex flex-col items-center video-reveal">
+            <div class="relative">
+                <video id="video-preview" autoplay muted class="w-full max-w-md max-h-md aspect-square bg-black rounded-full object-cover shadow-2xl ring-4 ring-gray-300 ring-opacity-50 hover:ring-blue-500 hover:ring-opacity-75 transition-all duration-300 ease-in-out transform hover:scale-105"></video>
+                <!-- Indicateur d'Enregistrement -->
+                <div id="rec-indicator" class="hidden absolute top-2 right-2 w-4 h-4 bg-red-600 rounded-full animate-pulse"></div>
+            </div>
+            <!-- Bouton Démarrer l'Enregistrement -->
+            <div class="text-center mt-6">
+                <button type="button" id="start-recording" class="bg-red-600 hover:bg-red-700 text-white font-bold w-16 h-16 rounded-full flex items-center justify-center animate-pulse hover:scale-110 active:scale-95 transition-all duration-300 ease-in-out">
+                    <i class="fas fa-video"></i>
+                </button>
+            </div>
         </div>
+        <!-- Section Formulaire avec ScrollReveal -->
+        <div class="max-w-md w-full bg-gray-800/40 backdrop-blur-md rounded-xl shadow-lg p-6 lg:w-1/2 transform transition-all duration-300 hover:scale-102 hover:shadow-md form-reveal">
+            <form id="create-account-form" method="POST" action="/submitAccount" class="space-y-6" enctype="multipart/form-data">
+                <div>
+                    <label for="email" class="block text-sm font-medium text-gray-300 icon-geistmono">Email Address</label>
+                    <input type="email" id="email" name="email" required class="w-full px-4 py-3 mt-2 bg-gray-700 text-white rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50 transition duration-300 ease-in-out">
+                </div>
+                <button type="submit" class="w-full bg-green-600 hover:bg-green-700 text-white font-bold py-3 px-4 rounded-lg transition-all duration-300 ease-in-out transform hover:scale-102 icon-geistmono">
+                    Create Account 🔐
+                </button>
+            </form>
+            <div id="error-message" class="mt-4 text-center text-red-500"></div>
+        </div>
     </main>
     <!-- <footer class="bg-gray-800 p-4 text-center">
                 easing: 'ease-in-out',   // Transition fluide
                 delay: 200               // Délai avant le début
             });
             // Animation pour la section formulaire avec un glissement depuis la droite
             ScrollReveal().reveal('.form-reveal', {
                 duration: 1200,          // Durée de l'animation
                 easing: 'ease-in-out',   // Transition fluide
                 delay: 400               // Délai un peu plus long pour que l'effet soit coordonné
             });
+            // Animation pour le header "Zauth."
+            ScrollReveal().reveal('header h1', {
+                duration: 1000,
+                origin: 'left',
+                distance: '50px',
+                opacity: 0,
+                easing: 'ease-in-out',
+                delay: 100
+            });
             // Appelle la fonction de caméra et remplissage de l'email après le chargement de la page
             fillEmailFromUrl();
             startCamera();
         });
+        // Ajoutez cette fonction au début du script
         function fillEmailFromUrl() {
             const urlParams = new URLSearchParams(window.location.search);
             const email = urlParams.get('email');
             }
         }
+        // Appelez cette fonction lorsque la page se charge
         window.onload = function () {
             fillEmailFromUrl();
             startCamera();
         let isRecording = false;
         const recIndicator = document.getElementById('rec-indicator');
+        // Fonction pour démarrer la caméra
         async function startCamera() {
             const videoPreview = document.getElementById('video-preview');
     </script>
 </body>
+</html>

client/static/css/styles.css CHANGED Viewed

@@ -59,4 +59,16 @@ body {
 .bg-transparent {
     background-color: rgba(128, 128, 128, 0); /* Adjust the alpha value for desired transparency */
 }

 .bg-transparent {
     background-color: rgba(128, 128, 128, 0); /* Adjust the alpha value for desired transparency */
+}
+@font-face {
+    font-family: 'GeistMono';
+    src: url('/static/fonts/GeistMono-Black.ttf') format('truetype');
+    font-weight: normal;
+    font-style: normal;
+}
+.icon-geistmono {
+    font-family: 'GeistMono', monospace;
 }

client/static/fonts/GeistMono-Black.ttf ADDED Viewed

Binary file (121 kB). View file

client/static/images/background2.jpg ADDED Viewed

client/static/index.html CHANGED Viewed

@@ -1,12 +1,13 @@
 <!DOCTYPE html>
-<html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>TechMart - Smart Shopping</title>
     <script src="https://cdn.tailwindcss.com"></script>
     <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" rel="stylesheet">
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/gsap.min.js"></script>
     <link rel="stylesheet" href="/static/css/styles.css">
     <style>
         /* Scan effect in a slight spiral motion */
@@ -44,15 +45,21 @@
         }
     </style>
 </head>
 <body class="bg-gray-900 text-white min-h-screen flex flex-col" style="background-image: url('/static/images/background.jpg');">
     <main class="flex-grow container mx-auto p-6 flex flex-col lg:flex-row items-center justify-center space-y-16 lg:space-y-0 lg:space-x-28">
         <!-- Camera Section -->
-        <div class="max-w-md w-full flex justify-center items-center">
             <div class="relative">
                 <!-- Vidéo circulaire centrée -->
-                <video id="camera-feed" autoplay class="w-full max-w-md max-h-md aspect-square bg-black rounded-full object-cover shadow-2xl ring-4 ring-gray-300 ring-opacity-50 hover:ring-blue-500 hover:ring-opacity-75 transition-all duration-300 ease-in-out transform hover:scale-105"></video>
                 <!-- Scan Effect -->
                 <div id="scan-effect" class="scan-effect"></div>
@@ -60,12 +67,12 @@
         </div>
         <!-- Form Section -->
-        <div class="max-w-sm w-full bg-gray-800/40 backdrop-blur-md rounded-xl shadow-lg p-6 lg:w-1/3 transform transition-all duration-300 hover:scale-102 hover:shadow-md">
-            <h2 class="text-xl font-semibold mb-4 text-center">Smart Check-In</h2>
             <div class="text-center">
                 <!-- Taille réduite du bouton -->
-                <button id="begin-scan-btn" class="w-3/4 bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-3 rounded-lg transition-all duration-300 ease-in-out transform hover:scale-102 text-sm">
                     Scan 🔍
                 </button>
             </div>
@@ -73,20 +80,92 @@
             <div id="error-message" class="mt-4 text-center text-red-500"></div>
         </div>
     </main>
-    <script src="/static/js/script.js"></script>
     <script>
         document.getElementById('begin-scan-btn').addEventListener('click', function () {
             const scanEffect = document.getElementById('scan-effect');
-            // Toggle the animation class
             scanEffect.classList.add('scan-active');
-            // Remove the class after 3 seconds
             setTimeout(function () {
                 scanEffect.classList.remove('scan-active');
             }, 3000);  // L'effet dure 3 secondes
         });
     </script>
 </body>

 <!DOCTYPE html>
+<html lang="fr">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Zauth - Smart Check-In</title>
     <script src="https://cdn.tailwindcss.com"></script>
+    <!-- ScrollReveal CDN -->
+    <script src="https://unpkg.com/scrollreveal"></script>
     <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" rel="stylesheet">
     <link rel="stylesheet" href="/static/css/styles.css">
     <style>
         /* Scan effect in a slight spiral motion */
         }
     </style>
 </head>
 <body class="bg-gray-900 text-white min-h-screen flex flex-col" style="background-image: url('/static/images/background.jpg');">
+    <!-- Header Aligné en Haut à Gauche -->
+    <header class="container mx-auto p-6">
+        <h1 class="text-4xl font-bold text-left text-white icon-geistmono">Zauth.</h1>
+    </header>
     <main class="flex-grow container mx-auto p-6 flex flex-col lg:flex-row items-center justify-center space-y-16 lg:space-y-0 lg:space-x-28">
         <!-- Camera Section -->
+        <div class="max-w-md w-full flex justify-center items-center video-reveal">
             <div class="relative">
                 <!-- Vidéo circulaire centrée -->
+                <video id="camera-feed" autoplay muted class="w-full max-w-md max-h-md aspect-square bg-black rounded-full object-cover shadow-2xl ring-4 ring-gray-300 ring-opacity-50 hover:ring-blue-500 hover:ring-opacity-75 transition-all duration-300 ease-in-out transform hover:scale-105"></video>
                 <!-- Scan Effect -->
                 <div id="scan-effect" class="scan-effect"></div>
         </div>
         <!-- Form Section -->
+        <div class="max-w-sm w-full bg-gray-800/40 backdrop-blur-md rounded-xl shadow-lg p-6 lg:w-1/3 transform transition-all duration-300 hover:scale-102 hover:shadow-md form-reveal">
+            <h2 class="text-xl font-semibold mb-4 text-center icon-geistmono">Smart Check-In</h2>
             <div class="text-center">
                 <!-- Taille réduite du bouton -->
+                <button id="begin-scan-btn" class="w-3/4 bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-3 rounded-lg transition-all duration-300 ease-in-out transform hover:scale-102 text-sm icon-geistmono">
                     Scan 🔍
                 </button>
             </div>
             <div id="error-message" class="mt-4 text-center text-red-500"></div>
         </div>
     </main>
+    <!-- <footer class="bg-gray-800 p-4 text-center">
+        <p>&copy; 2023 TechMart. Tous droits réservés.</p>
+    </footer> -->
     <script>
+        document.addEventListener('DOMContentLoaded', function() {
+            // Initialisation de ScrollReveal avec les animations pour différents éléments
+            // Animation pour le header "Zauth."
+            ScrollReveal().reveal('header h1', {
+                duration: 1000,
+                origin: 'left',
+                distance: '50px',
+                opacity: 0,
+                easing: 'ease-in-out',
+                delay: 100
+            });
+            // Animation pour la section vidéo avec un zoom-in et glissement vers le bas
+            ScrollReveal().reveal('.video-reveal', {
+                duration: 1200,          // Durée de l'animation
+                scale: 0.9,              // Zoom initial (90%)
+                distance: '30px',        // Glissement vers le haut
+                origin: 'bottom',        // Animation qui part du bas
+                opacity: 0,              // Apparition progressive
+                easing: 'ease-in-out',   // Transition fluide
+                delay: 200               // Délai avant le début
+            });
+            // Animation pour la section formulaire avec un glissement depuis la droite
+            ScrollReveal().reveal('.form-reveal', {
+                duration: 1200,          // Durée de l'animation
+                distance: '60px',        // Distance de glissement depuis la droite
+                origin: 'right',         // Animation qui part de la droite
+                opacity: 0,              // Apparition progressive
+                easing: 'ease-in-out',   // Transition fluide
+                delay: 400               // Délai un peu plus long pour que l'effet soit coordonné
+            });
+            // Appelle les fonctions de remplissage de l'email et de démarrage de la caméra après le chargement de la page
+            fillEmailFromUrl();
+            startCamera();
+        });
+        // Fonction pour remplir l'email à partir des paramètres de l'URL
+        function fillEmailFromUrl() {
+            const urlParams = new URLSearchParams(window.location.search);
+            const email = urlParams.get('email');
+            if (email) {
+                document.getElementById('email').value = decodeURIComponent(email);
+            }
+        }
+        // Fonction pour démarrer la caméra
+        async function startCamera() {
+            const cameraFeed = document.getElementById('camera-feed');
+            if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
+                try {
+                    const stream = await navigator.mediaDevices.getUserMedia({ video: true });
+                    cameraFeed.srcObject = stream;
+                } catch (error) {
+                    console.error('Erreur lors de l\'accès à la caméra:', error);
+                    document.getElementById('error-message').innerText = 'Erreur lors de l\'accès à la caméra. Veuillez vérifier vos permissions.';
+                }
+            } else {
+                document.getElementById('error-message').innerText = 'Votre navigateur ne supporte pas l\'accès à la caméra.';
+            }
+        }
+        // Gestionnaire d'événements pour le bouton "Scan"
         document.getElementById('begin-scan-btn').addEventListener('click', function () {
             const scanEffect = document.getElementById('scan-effect');
+            // Ajouter la classe d'animation
             scanEffect.classList.add('scan-active');
+            // Supprimer la classe après 3 secondes
             setTimeout(function () {
                 scanEffect.classList.remove('scan-active');
             }, 3000);  // L'effet dure 3 secondes
+            // Ajoutez ici la logique de scan (par exemple, utiliser une bibliothèque de reconnaissance d'image)
+            // Exemple :
+            // startScan();
         });
     </script>
 </body>

client/static/login.html CHANGED Viewed

@@ -4,9 +4,10 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>TechMart - Connexion</title>
     <script src="https://cdn.tailwindcss.com"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/gsap.min.js"></script>
     <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" rel="stylesheet">
     <link rel="stylesheet" href="/static/css/styles.css">
 </head>
@@ -15,48 +16,70 @@
         <h1 class="text-3xl font-bold text-center"><i class="fas fa-shopping-cart mr-2"></i>TechMart</h1>
     </header> -->
-    <main class="flex-grow container mx-auto p-4 flex items-center justify-center">
-        <div class="max-w-md w-full bg-gray-800/40 backdrop-blur-md rounded-xl shadow-lg p-6 transform transition-all duration-300 hover:scale-102 hover:shadow-md reveal-box">
-            <h2 class="text-3xl font-semibold mb-6 text-center text-white">Connexion </h2>
-            <form id="login-form" method="POST" action="/login" class="space-y-6">
-                <div>
-                    <label for="email" class="block text-sm font-medium text-gray-300"> Email Address </label>
-                    <input type="email" id="email" name="email" required
-                           class="w-full px-4 py-3 mt-2 bg-gray-700 text-white rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50 transition duration-300 ease-in-out">
-                </div>
-                <button type="submit"
-                        class="w-full bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-4 rounded-lg transition-all duration-300 ease-in-out transform hover:scale-102">
-                    <i class="fas fa-sign-in-alt mr-2"></i>Connexion
-                </button>
-            </form>
-            <div id="error-message" class="mt-4 text-center text-red-500"></div>
         </div>
     </main>
     <!-- <footer class="bg-gray-800 p-4 text-center">
         <p>&copy; 2023 TechMart. Tous droits réservés.</p>
     </footer> -->
     <script>
-        gsap.from('.reveal-box', {
-            duration: 1,
-            opacity: 0.5,
-            y: -300,
-            ease: "power10.out"
         });
         document.getElementById('login-form').addEventListener('submit', async function(event) {
             event.preventDefault();
             const email = document.getElementById('email').value;
             try {
                 const emailEncoded = encodeURIComponent(email);
-                const url = `http://localhost:8000/check_user_exists?user_id=${emailEncoded}`;
                 const response = await fetch(url, {
                     method: 'POST',
@@ -72,10 +95,10 @@
                 }
             } catch (error) {
-                document.getElementById('error-message').innerText = 'An error occurred. Please try again.';
-                console.error('Error during the request:', error);
             }
         });
     </script>
 </body>
-</html>

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Zauth. - Connexion</title>
     <script src="https://cdn.tailwindcss.com"></script>
+    <!-- ScrollReveal CDN -->
+    <script src="https://unpkg.com/scrollreveal"></script>
     <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" rel="stylesheet">
     <link rel="stylesheet" href="/static/css/styles.css">
 </head>
         <h1 class="text-3xl font-bold text-center"><i class="fas fa-shopping-cart mr-2"></i>TechMart</h1>
     </header> -->
+    <main class="flex-grow container mx-auto p-4 flex flex-col">
+        <!-- Section du Titre -->
+        <header class="mb-20 pt-4">
+            <h1 class="text-4xl font-bold text-left text-white icon-geistmono">Zauth.</h1>
+        </header>
+        <!-- Section de la Boîte de Connexion -->
+        <div class="flex-grow flex items-center justify-center">
+            <div class="max-w-md w-full bg-gray-800/40 backdrop-blur-md rounded-xl shadow-lg p-6 transform transition-all duration-300 hover:scale-102 hover:shadow-md reveal-box">
+                <!-- Application de la police GeistMono -->
+                <h2 class="text-3xl font-semibold mb-6 text-center text-white icon-geistmono">Welcome 🤗</h2>
+                <form id="login-form" method="POST" action="/login" class="space-y-6">
+                    <div>
+                        <label for="email" class="block text-sm text-gray-300 icon-geistmono"> Email Address </label>
+                        <input type="email" id="email" name="email" required
+                               class="w-full px-4 py-3 mt-2 bg-gray-700 text-white rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50 transition duration-300 ease-in-out">
+                    </div>
+                    <button type="submit"
+                            class="w-full bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-4 rounded-lg transition-all duration-300 ease-in-out transform hover:scale-102">
+                        <i class="fas mr-2 icon-geistmono">Connexion</i>
+                    </button>
+                </form>
+                <div id="error-message" class="mt-4 text-center text-red-500"></div>
+            </div>
         </div>
     </main>
     <!-- <footer class="bg-gray-800 p-4 text-center">
         <p>&copy; 2023 TechMart. Tous droits réservés.</p>
     </footer> -->
     <script>
+        // Initialisation de ScrollReveal
+        ScrollReveal().reveal('.reveal-box', {
+            duration: 1000,
+            origin: 'top',
+            distance: '50px',
+            opacity: 0,
+            easing: 'ease-out',
+            reset: false
+        });
+        // Si vous souhaitez animer d'autres éléments, vous pouvez les ajouter ici
+        ScrollReveal().reveal('.icon-geistmono', {
+            duration: 1000,
+            origin: 'bottom',
+            distance: '20px',
+            opacity: 0,
+            easing: 'ease-out',
+            reset: false,
+            interval: 200
         });
         document.getElementById('login-form').addEventListener('submit', async function(event) {
             event.preventDefault();
             const email = document.getElementById('email').value;
             try {
                 const emailEncoded = encodeURIComponent(email);
+                const url = `/check_user_exists?user_id=${emailEncoded}`; // Utilisation d'un chemin relatif
                 const response = await fetch(url, {
                     method: 'POST',
                 }
             } catch (error) {
+                document.getElementById('error-message').innerText = 'Une erreur est survenue. Veuillez réessayer.';
+                console.error('Erreur lors de la requête :', error);
             }
         });
     </script>
 </body>
+</html>