client/static/index.html

<!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 */
        .scan-effect {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.1);
            opacity: 0;
            z-index: 1;
        }

        /* Animation spiral */
        @keyframes spiral-scan {
            0% {
                transform: scale(0.8) rotate(0deg);
                opacity: 0;
            }
            50% {
                transform: scale(1.2) rotate(180deg);
                opacity: 1;
            }
            100% {
                transform: scale(1.5) rotate(360deg);
                opacity: 0;
            }
        }

        /* Active class for scan effect */
        .scan-active {
            animation: spiral-scan 3s ease-in-out;
        }
    </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>
        </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>
</html>