index.html

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="robots" content="noindex, nofollow, noarchive, nosnippet">
    <meta name="googlebot" content="noindex, nofollow">
    <title>GSK | Règles de Sécurité</title>
    <link rel="icon" href="https://gsk.labbej27.fr/logo.jpeg" type="image/jpeg">
    <link rel="shortcut icon" href="https://gsk.labbej27.fr/logo.jpeg" type="image/jpeg">
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap');
        
        :root {
            --gsk-orange: #f36f21;
            --gsk-dark: #1c2526;
        }
        
        * { margin: 0; padding: 0; box-sizing: border-box; }
        
        body {
            font-family: 'Roboto', sans-serif;
            background-color: #f8f9fa;
            color: #333;
            line-height: 1.6;
        }
        
        header {
            background: linear-gradient(135deg, var(--gsk-dark), #2a3a3d);
            color: white;
            padding: 1rem 0;
            box-shadow: 0 4px 12px rgba(0,0,0,0.2);
        }
        
        .header-content {
            max-width: 1200px;
            margin: 0 auto;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 2rem;
        }
        
        .logo img {
            height: 65px;
        }
        
        .lang-selector {
            display: flex;
            gap: 10px;
        }
        
        .lang-btn {
            background: rgba(255,255,255,0.1);
            color: white;
            border: 2px solid var(--gsk-orange);
            padding: 8px 16px;
            border-radius: 30px;
            cursor: pointer;
            transition: all 0.3s;
            font-weight: 500;
        }
        
        .lang-btn:hover, .lang-btn.active {
            background: var(--gsk-orange);
            transform: translateY(-2px);
        }
        
        .hero {
            background: linear-gradient(rgba(0,0,0,0.65), rgba(0,0,0,0.75)), url('https://picsum.photos/id/1015/2000/800') center/cover;
            height: 55vh;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            color: white;
        }
        
        .hero-content h1 {
            font-size: 2.8rem;
            color: var(--gsk-orange);
            margin-bottom: 1rem;
        }
        
        .content {
            max-width: 1200px;
            margin: 3rem auto;
            padding: 0 2rem;
            display: none;
        }
        
        .content.active { display: block; }
        
        .video-container {
            margin: 2.5rem auto;
            border-radius: 12px;
            overflow: hidden;
            box-shadow: 0 10px 30px rgba(0,0,0,0.2);
            background: #000;
            width: 100%;
            max-width: 1100px;
        }
        
        .video-container video {
            width: 100%;
            height: auto;
            display: block;
            aspect-ratio: 16 / 9;
            object-fit: contain;
        }
        
        .safety-text {
            background: white;
            padding: 3rem;
            border-radius: 12px;
            box-shadow: 0 5px 20px rgba(0,0,0,0.1);
            margin-top: 2rem;
        }
        
        .safety-text h2 {
            color: var(--gsk-orange);
            margin-bottom: 1.5rem;
            font-size: 2rem;
        }
        
        ul { list-style: none; margin: 1.5rem 0; }
        
        ul li {
            padding: 12px 0;
            border-bottom: 1px solid #eee;
            font-size: 1.1rem;
        }
        
        ul li:before {
            content: "✓";
            color: var(--gsk-orange);
            margin-right: 12px;
            font-weight: bold;
        }
        
        .confirmation {
            background: #f8f9fa;
            border: 3px solid var(--gsk-orange);
            padding: 2rem;
            border-radius: 12px;
            text-align: center;
            margin-top: 2.5rem;
            font-size: 1.3rem;
        }
        
        .code {
            font-size: 2.2rem;
            font-weight: bold;
            color: var(--gsk-orange);
            letter-spacing: 4px;
            margin: 1rem 0;
            background: white;
            padding: 15px;
            border-radius: 8px;
            display: none; /* caché par défaut */
        }
        
        .accept-label {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            font-size: 1.2rem;
            margin-bottom: 1rem;
            cursor: pointer;
        }
        
        footer {
            background: var(--gsk-dark);
            color: #aaa;
            text-align: center;
            padding: 2.5rem;
            margin-top: 4rem;
        }
        
        @media (max-width: 768px) {
            .hero-content h1 { font-size: 2.2rem; }
        }
    </style>
</head>
<body>
    <header>
        <div class="header-content">
            <div class="logo">
                <img src="https://gsk.labbej27.fr/logo.jpeg" alt="GSK Logo">
            </div>
            <div class="lang-selector">
                <button class="lang-btn active" data-lang="fr">🇫🇷 Français</button>
                <button class="lang-btn" data-lang="en">🇬🇧 English</button>
                <button class="lang-btn" data-lang="es">🇪🇸 Español</button>
            </div>
        </div>
    </header>

    <!-- Accueil -->
    <section id="home" class="hero">
        <div class="hero-content">
            <h1>Bienvenue chez GSK</h1>
            <p style="font-size: 1.5rem; margin-bottom: 2.5rem;">Sélectionnez votre langue pour consulter les règles de sécurité</p>
            <div class="lang-selector" style="justify-content: center;">
                <button class="lang-btn" onclick="selectLanguage('fr')" style="padding: 14px 32px; font-size: 1.15rem;">🇫🇷 Français</button>
                <button class="lang-btn" onclick="selectLanguage('en')" style="padding: 14px 32px; font-size: 1.15rem;">🇬🇧 English</button>
                <button class="lang-btn" onclick="selectLanguage('es')" style="padding: 14px 32px; font-size: 1.15rem;">🇪🇸 Español</button>
            </div>
        </div>
    </section>

    <!-- Français -->
    <div id="content-fr" class="content active">
        <div style="text-align:center; margin-bottom: 2rem;">
            <h1 style="color:#f36f21;">Règles de sûreté à l’intention des visiteurs</h1>
        </div>
        
        <div class="video-container">
            <video controls autoplay loop playsinline>
                <source src="https://gsk.labbej27.fr/video-securite.mp4" type="video/mp4">
                Votre navigateur ne supporte pas la lecture vidéo.
            </video>
        </div>
        <div class="safety-text">
            <ul>
                <li>Lire attentivement les consignes de sécurité, les compléter et les conserver sur soi en cas de contrôle.</li>
                <li>Porter le badge de manière visible autour du cou.</li>
                <li>Badger individuellement, même si quelqu’un vous tient la porte.</li>
                <li>Seuls les véhicules transportant du matériel sont autorisés à entrer et à se stationner à l’intérieur du site, munis d’une autorisation.</li>
                <li>Limitation de vitesse à 20 km/h.</li>
                <li>Stationner dans le sens du départ.</li>
                <li>Restituer le badge à l’accueil visiteurs ou dans la boîte aux lettres en quittant le site après 18 h.</li>
            </ul>
            
            <div class="confirmation">
                <label class="accept-label">
                    <input type="checkbox" class="accept-checkbox">
                    <strong>En cliquant ici, « vous reconnaissez avoir lu et compris » les règles de sûreté, et vous vous engagez à les appliquer.</strong>
                </label>
                <br><br>
                Communiquez ce code à l’hôtesse d’accueil :<br>
                <div class="code" id="code-fr">GSK-SEC-FR-XXXXXX</div>
            </div>
        </div>
    </div>

    <!-- English -->
    <div id="content-en" class="content">
        <div style="text-align:center; margin-bottom: 2rem;">
            <h1 style="color:#f36f21;">Safety Rules for Visitors</h1>
        </div>
        
        <div class="video-container">
            <video controls autoplay loop playsinline>
                <source src="https://gsk.labbej27.fr/video-securiteen.mp4" type="video/mp4">
                Your browser does not support video playback.
            </video>
        </div>
        
        <div class="safety-text">
            <ul>
                <li>Please read the safety instructions carefully, complete them, and keep them with you at all times in case of inspection.</li>
                <li>Your badge must be worn visibly around the neck at all times.</li>
                <li>You must badge in individually, even if someone holds the door for you.</li>
                <li>Only vehicles carrying equipment are permitted to enter and park on site, and must have a valid authorization.</li>
                <li>Speed limit: 20 km/h.</li>
                <li>Vehicles must be parked facing the exit.</li>
                <li>Please return your badge to the reception desk or place it in the mailbox when leaving the site after 6 p.m.</li>
            </ul>
            
            <div class="confirmation">
                <label class="accept-label">
                    <input type="checkbox" class="accept-checkbox">
                    <strong>By clicking here, you acknowledge that you have read and understood the safety rules, and you agree to comply with them.</strong>
                </label>
                <br><br>
                Give this code to the receptionist:<br>
                <div class="code" id="code-en">GSK-SEC-EN-XXXXXX</div>
            </div>
        </div>
    </div>

    <!-- Español -->
    <div id="content-es" class="content">
        <div style="text-align:center; margin-bottom: 2rem;">
            <h1 style="color:#f36f21;">Normas de seguridad para visitantes</h1>
        </div>
        
        <div class="video-container">
            <video controls autoplay loop playsinline>
                <source src="https://gsk.labbej27.fr/video-securitees.mp4" type="video/mp4">
                Tu navegador no admite la reproducción de vídeo.
            </video>
        </div>
        
        <div class="safety-text">
            <ul>
                <li>Lea atentamente las instrucciones de seguridad, complételas y consérvelas consigo en caso de control.</li>
                <li>La credencial debe llevarse visible alrededor del cuello en todo momento.</li>
                <li>Debe registrar su entrada de forma individual, incluso si alguien le abre la puerta.</li>
                <li>Solo los vehículos que transportan material están autorizados a acceder y estacionarse dentro del recinto, y deben contar con una autorización válida.</li>
                <li>Límite de velocidad: 20 km/h.</li>
                <li>Los vehículos deben estacionarse en el sentido de la salida.</li>
                <li>Devuelva la credencial en la recepción o deposítela en el buzón al salir del sitio después de las 18 h.</li>
            </ul>
            
            <div class="confirmation">
                <label class="accept-label">
                    <input type="checkbox" class="accept-checkbox">
                    <strong>Haciendo clic aquí, usted reconoce haber leído y comprendido las normas de seguridad, y se compromete a cumplirlas.</strong>
                </label>
                <br><br>
                Entregue este código a la recepcionista:<br>
                <div class="code" id="code-es">GSK-SEC-ES-XXXXXX</div>
            </div>
        </div>
    </div>

<footer>
        <p>&copy; 2026 GSK plc — Règles de Sécurité Visiteurs</p>
        <p style="margin-top: 8px; font-size: 0.95rem;">Développé par LABBEJ27 pour Fiducial Évreux</p>
        <p style="margin-top: 15px; font-size: 0.85rem; opacity: 0.75;">
            Code source disponible sur : 
            <a href="https://labbej27.duckdns.org/labbej/gsk-securite-visiteurs" 
               target="_blank" 
               style="color: #f36f21;">
                Gitea — gsk-securite-visiteurs
            </a>
        </p>
    </footer>

    <script>
        // Génère le code avec le mois en cours (ex: 062026)
        function getCurrentCode(lang) {
            const now = new Date();
            const month = String(now.getMonth() + 1).padStart(2, '0');
            const year = now.getFullYear();
            return `GSK-SEC-${lang.toUpperCase()}-${month}${year}`;
        }

        // Met à jour tous les codes
        function updateCodes() {
            document.getElementById('code-fr').textContent = getCurrentCode('fr');
            document.getElementById('code-en').textContent = getCurrentCode('en');
            document.getElementById('code-es').textContent = getCurrentCode('es');
        }

        function selectLanguage(lang) {
            document.querySelectorAll('.content').forEach(c => c.classList.remove('active'));
            document.getElementById(`content-${lang}`).classList.add('active');
            
            document.querySelectorAll('.lang-btn').forEach(btn => {
                btn.classList.toggle('active', btn.getAttribute('data-lang') === lang);
            });
            
            setTimeout(() => {
                document.getElementById(`content-${lang}`).scrollIntoView({ behavior: 'smooth' });
            }, 150);
        }

        // Gestion des cases à cocher
        function setupCheckboxes() {
            document.querySelectorAll('.accept-checkbox').forEach(checkbox => {
                const codeDiv = checkbox.closest('.confirmation').querySelector('.code');
                
                checkbox.addEventListener('change', function() {
                    if (this.checked) {
                        codeDiv.style.display = 'inline-block';
                    } else {
                        codeDiv.style.display = 'none';
                    }
                });
            });
        }

        // Initialisation
        window.onload = function() {
            updateCodes();
            setupCheckboxes();
            
            // Retour à l'accueil en cliquant sur le logo
            document.querySelector('.logo').addEventListener('click', () => {
                document.getElementById('home').scrollIntoView({ behavior: 'smooth' });
            });
        };
    </script>
</body>
</html>