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: center;
            padding: 0 2rem;
        }
        
        .logo {
        cursor: pointer;
        }

        .logo img {
        height: 65px;
        }
        
        .lang-selector {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 10px;
            flex-wrap: wrap;
        }
        
        .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.5rem;
            font-weight: bold;
            color: var(--gsk-orange);
            letter-spacing: 2px;
            margin: 1rem 0;
            background: white;
            padding: 15px;
            border-radius: 8px;
            display: none;
            text-align: center;
        }

        .accept-checkbox {
        width: 24px;
        height: 24px;
        flex-shrink: 0;
        margin-top: 3px;
       }
        
        .accept-label {
            display: inline-flex;
            align-items: flex-start;
            gap: 10px;
            font-size: 1.2rem;
           margin-bottom: 1rem;
           cursor: pointer;
           text-align: left;
        }
        
        footer {
            background: var(--gsk-dark);
            color: #aaa;
            text-align: center;
            padding: 2.5rem;
            margin-top: 4rem;
        }
        
        @media (max-width: 768px) {

    .header-content {
        padding: 0 1rem;
    }

    .logo img {
        height: 50px;
    }

    .hero {
        height: auto;
        padding: 2rem 1rem;
    }

    .hero-content h1 {
        font-size: 2rem;
    }

    .hero-content p {
        font-size: 1.15rem !important;
        margin-bottom: 1.5rem !important;
    }

    .lang-selector {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
        max-width: 350px;
        margin: 0 auto;
    }

    .lang-btn {
        width: 100%;
        font-size: 1.1rem !important;
        padding: 14px !important;
    }


    .content {
        padding: 0 1rem;
        margin: 1.5rem auto;
    }

    .safety-text {
        padding: 1.25rem;
    }

    .safety-text h2 {
        font-size: 1.5rem;
    }

    ul li {
        font-size: 1rem;
    }

    .confirmation {
        padding: 1.25rem;
        font-size: 1rem;
    }

    .code {
        font-size: 1.8rem;
        letter-spacing: 2px;
        word-break: break-word;
    }

    footer {
        padding: 1.5rem 1rem;
    }
}
    </style>
</head>
<body>
    <header>
        <div class="header-content">
            <div class="logo">
                <img src="https://gsk.labbej27.fr/logo.jpeg" alt="GSK Logo">
            </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">
        <button class="lang-btn" data-lang="fr" onclick="selectLanguage('fr')">
            🇫🇷 Français
        </button>

        <button class="lang-btn" data-lang="en" onclick="selectLanguage('en')">
            🇬🇧 English
        </button>

        <button class="lang-btn" data-lang="es" onclick="selectLanguage('es')">
            🇪🇸 Español
        </button>
    </div>
        </div>
    </section>

    <!-- Français -->
    <div id="content-fr" class="content">
        <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 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 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 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) {

    stopAllVideos();

    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
        );
    });

    const activeVideo =
        document.querySelector(`#content-${lang} video`);

    if (activeVideo) {
        activeVideo.play();
    }

    setTimeout(() => {
        document.getElementById(`content-${lang}`)
            .scrollIntoView({ behavior: 'smooth' });
    }, 150);
}

        // Arrête toutes les vidéos lors du changement de langue
        function stopAllVideos() {
    document.querySelectorAll('video').forEach(video => {
        video.pause();
        video.currentTime = 0;
    });
}
        // 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';

        setTimeout(() => {
            codeDiv.scrollIntoView({
                behavior: 'smooth',
                block: 'center'
            });
        }, 100);
    } 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>