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">

<title>GSK | Règles de Sécurité Livreurs</title>

<link rel="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:#f8f9fa;
color:#333;
line-height:1.6;
}

header{
background:linear-gradient(135deg,var(--gsk-dark),#2a3a3d);
padding:1rem 0;
color:white;
}

.header-content{
max-width:1200px;
margin:auto;
padding:0 2rem;
display:flex;
justify-content:center;
align-items:center;
}

.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,.1);
color:white;
border:2px solid var(--gsk-orange);
padding:8px 16px;
border-radius:30px;
cursor:pointer;
transition:.3s;
}

.lang-btn:hover,
.lang-btn.active{
background:var(--gsk-orange);
}

.hero{
height:55vh;
display:flex;
justify-content:center;
align-items:center;
text-align:center;
background:
linear-gradient(rgba(0,0,0,.65),rgba(0,0,0,.75)),
url('https://picsum.photos/id/1015/2000/800') center/cover;
color:white;
}

.hero 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:2rem auto;
overflow:hidden;
border-radius:12px;
box-shadow:0 10px 30px rgba(0,0,0,.2);
background:black;
max-width:1100px;
}

.video-container video{
width:100%;
display:block;
aspect-ratio:16/9;
}

.safety-text{
background:white;
padding:3rem;
border-radius:12px;
box-shadow:0 5px 20px rgba(0,0,0,.1);
}

.safety-text h2{
color:var(--gsk-orange);
margin-bottom:20px;
}

ul{
list-style:none;
margin-top:20px;
}

ul li{
padding:10px 0;
border-bottom:1px solid #eee;
}

ul li:before{
content:"✓";
color:var(--gsk-orange);
font-weight:bold;
margin-right:10px;
}

.confirmation{
margin-top:30px;
padding:2rem;
border:3px solid var(--gsk-orange);
border-radius:12px;
text-align:center;
background:#f8f9fa;
}

.code{
display:none;
font-size:2.5rem;
font-weight:bold;
color:var(--gsk-orange);
margin-top:20px;
background:white;
padding:15px;
border-radius:8px;
text-align:center;
letter-spacing:4px;
}

.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:2rem;
margin-top:4rem;
}
@media (max-width: 768px){

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

.logo img{
height:50px;
}

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

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

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

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

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

.safety-text{
padding:1.25rem;
}

.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">
</div>
</div>
</header>

<section id="home" class="hero">
<div>

<h1>Bienvenue chez GSK</h1>

<p style="font-size:1.4rem;margin-bottom:30px;">
Sélectionnez votre langue
</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>

<button class="lang-btn" data-lang="ru" onclick="selectLanguage('ru')">
🇷🇺 Русский
</button>

<button class="lang-btn" data-lang="ua" onclick="selectLanguage('ua')">
🇺🇦 Українська
</button>

<button class="lang-btn" data-lang="pl" onclick="selectLanguage('pl')">
🇵🇱 Polski
</button>

</div>
</div>
</section>

<!-- FR -->

<div id="content-fr" class="content">

<h1 style="text-align:center;color:#f36f21;margin-bottom:20px;">
Règles de sûreté à l’intention des livreurs
</h1>

<div class="video-container">
<video controls playsinline>
<source src="https://gsk.labbej27.fr/gsklivrfr.mp4" type="video/mp4">
</video>
</div>

<div class="safety-text">

<ul>
<li>Vitesse limitée à 20 km/h.</li>
<li>Interdiction de fumer, même dans votre véhicule.</li>
<li>Animaux interdits, même tenus en laisse.</li>
<li>Passagers interdits (à déclarer si présents).</li>
<li>Aucune nourriture ni boisson dans les locaux.</li>
<li>Téléphone interdit au volant.</li>
<li>Ne pas courir et ne pas marcher sur les pelouses.</li>
<li>Badge visible obligatoire et badgeage individuel à l’entrée et à la sortie.</li>
<li>EPI obligatoires : chaussures de sécurité et gilet haute visibilité.</li>
<li>Bon de livraison daté obligatoire (papier et numérique).</li>
</ul>

<p><strong>Merci de respecter ces règles pour la sécurité de tous.</strong></p>

<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>

<p style="margin-top:20px;">
Communiquez ce code à l’hôtesse d’accueil :
</p>

<div class="code" id="code-fr"></div>

</div>
</div>
</div>

<!-- EN -->

<div id="content-en" class="content">

<h1 style="text-align:center;color:#f36f21;margin-bottom:20px;">
Safety Rules for Delivery Drivers
</h1>

<div class="video-container">
<video controls playsinline>
<source src="https://gsk.labbej27.fr/gsklivren.mp4">
</video>
</div>

<div class="safety-text">

<ul>
<li>Maximum speed limit: 20 km/h.</li>
<li>No smoking, including inside your vehicle.</li>
<li>No animals allowed, even if kept on a leash.</li>
<li>No passengers allowed (must be declared if present).</li>
<li>No food or drinks allowed inside the buildings.</li>
<li>No phone use while driving.</li>
<li>Do not run or walk on the grass.</li>
<li>Badge must be visible at all times; individual badge scanning is mandatory when entering and leaving the site.</li>
<li>Mandatory PPE: safety shoes and a high-visibility vest.</li>
<li>A dated delivery note is required, both in paper and digital format.</li>
</ul>

<p><strong>Thank you for complying with these rules to ensure everyone's safety.</strong></p>

<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>

<p style="margin-top:20px;">
Give this code to the receptionist :
</p>

<div class="code" id="code-en"></div>

</div>
</div>
</div>

<!-- ES -->

<div id="content-es" class="content">

<h1 style="text-align:center;color:#f36f21;margin-bottom:20px;">
Normas de seguridad para transportistas
</h1>

<div class="video-container">
<video controls playsinline>
<source src="https://gsk.labbej27.fr/gsklivres.mp4">
</video>
</div>

<div class="safety-text">

<ul>
<li>Velocidad máxima permitida: 20 km/h.</li>
<li>Prohibido fumar, incluso dentro de su vehículo.</li>
<li>Prohibida la entrada de animales, incluso si van sujetos con correa.</li>
<li>No se permiten pasajeros (deben declararse si los hubiera).</li>
<li>No se permite introducir alimentos ni bebidas en las instalaciones.</li>
<li>Prohibido utilizar el teléfono móvil mientras se conduce.</li>
<li>No correr ni caminar sobre el césped.</li>
<li>Es obligatorio llevar la acreditación visible y realizar el registro individual de entrada y salida.</li>
<li>Uso obligatorio de EPI: calzado de seguridad y chaleco de alta visibilidad.</li>
<li>Es obligatorio presentar un albarán de entrega fechado, tanto en formato papel como digital.</li>
</ul>

<p><strong>Gracias por respetar estas normas para garantizar la seguridad de todos.</strong></p>

<div class="confirmation">

<label class="accept-label">
<input type="checkbox" class="accept-checkbox">
<strong>Al hacer clic aquí, usted reconoce haber leído y comprendido las normas de seguridad, y se compromete a cumplirlas.</strong>
</label>

<p style="margin-top:20px;">
Entregue este código a la recepcionista :
</p>

<div class="code" id="code-es"></div>

</div>
</div>
</div>
<!-- RU -->

<div id="content-ru" class="content">

<h1 style="text-align:center;color:#f36f21;margin-bottom:20px;">
Правила безопасности для водителей доставки
</h1>

<div class="video-container">
<video controls playsinline>
<source src="https://gsk.labbej27.fr/gsklivrru.mp4">
</video>
</div>

<div class="safety-text">

<ul>
<li>Максимальная скорость движения — 20 км/ч.</li>
<li>Курение запрещено, в том числе в вашем автомобиле.</li>
<li>Животные запрещены, даже если они находятся на поводке.</li>
<li>Пассажиры запрещены (при их наличии необходимо сообщить об этом).</li>
<li>Приносить еду и напитки в помещения запрещено.</li>
<li>Запрещено пользоваться телефоном за рулём.</li>
<li>Запрещено бегать и ходить по газонам.</li>
<li>Пропуск должен быть всегда на видном месте; обязательна индивидуальная регистрация при входе и выходе.</li>
<li>Использование СИЗ обязательно: защитная обувь и сигнальный жилет повышенной видимости.</li>
<li>Товарно-транспортная накладная с датой обязательна как в бумажном, так и в электронном виде.</li>
</ul>

<p><strong>Просим соблюдать данные правила для обеспечения безопасности всех находящихся на объекте.</strong></p>

<div class="confirmation">

<label class="accept-label">
<input type="checkbox" class="accept-checkbox">
<strong>Нажав здесь, вы подтверждаете, что прочитали и поняли правила безопасности, и обязуетесь их соблюдать.</strong>
</label>

<p style="margin-top:20px;">
Передайте этот код администратору :
</p>

<div class="code" id="code-ru"></div>

</div>
</div>
</div>

<!-- UA -->

<div id="content-ua" class="content">

<h1 style="text-align:center;color:#f36f21;margin-bottom:20px;">
Правила безпеки для водіїв доставки
</h1>

<div class="video-container">
<video controls playsinline>
<source src="https://gsk.labbej27.fr/gsklivrukr.mp4">
</video>
</div>

<div class="safety-text">

<ul>
<li>Максимальна швидкість руху — 20 км/год.</li>
<li>Паління заборонено, у тому числі у вашому транспортному засобі.</li>
<li>Тварини заборонені, навіть якщо вони на повідку.</li>
<li>Пасажири заборонені (у разі їх наявності необхідно повідомити про це).</li>
<li>Їжа та напої в приміщеннях заборонені.</li>
<li>Заборонено користуватися телефоном за кермом.</li>
<li>Заборонено бігати та ходити по газонах.</li>
<li>Перепустка повинна бути добре видимою; обов’язкова індивідуальна реєстрація при вході та виході.</li>
<li>ЗІЗ обов’язкові: захисне взуття та сигнальний жилет підвищеної видимості.</li>
<li>Обов’язкова наявність датованої накладної на поставку як у паперовому, так і в електронному вигляді.</li>
</ul>

<p><strong>Дякуємо за дотримання цих правил задля безпеки всіх присутніх на об’єкті.</strong></p>

<div class="confirmation">

<label class="accept-label">
<input type="checkbox" class="accept-checkbox">
<strong>Натискаючи тут, ви підтверджуєте, що прочитали та зрозуміли правила безпеки, і погоджуєтеся їх дотримуватися.</strong>
</label>

<p style="margin-top:20px;">
Передайте цей код адміністратору :
</p>

<div class="code" id="code-ua"></div>

</div>
</div>
</div>

<!-- PL -->

<div id="content-pl" class="content">

<h1 style="text-align:center;color:#f36f21;margin-bottom:20px;">
Zasady bezpieczeństwa dla kierowców dostawczych
</h1>

<div class="video-container">
<video controls playsinline>
<source src="https://gsk.labbej27.fr/gsklivrpl.mp4">
</video>
</div>

<div class="safety-text">

<ul>
<li>Maksymalna dozwolona prędkość – 20 km/h.</li>
<li>Palenie jest zabronione, również w pojeździe.</li>
<li>Wprowadzanie zwierząt jest zabronione, nawet jeśli są na smyczy.</li>
<li>Pasażerowie są niedozwoleni (jeśli są obecni, należy to zgłosić).</li>
<li>Wnoszenie żywności i napojów do budynków jest zabronione.</li>
<li>Korzystanie z telefonu podczas prowadzenia pojazdu jest zabronione.</li>
<li>Nie wolno biegać ani chodzić po trawnikach.</li>
<li>Identyfikator musi być widoczny; obowiązuje indywidualne odbijanie identyfikatora przy wejściu i wyjściu.</li>
<li>ŚOI są obowiązkowe: obuwie ochronne oraz kamizelka ostrzegawcza o wysokiej widoczności.</li>
<li>Obowiązkowy jest datowany dokument dostawy (w formie papierowej i elektronicznej).</li>
</ul>

<p><strong>Dziękujemy za przestrzeganie tych zasad dla bezpieczeństwa wszystkich osób przebywających na terenie obiektu.</strong></p>

<div class="confirmation">

<label class="accept-label">
<input type="checkbox" class="accept-checkbox">
<strong>Klikając tutaj, potwierdzasz, że zapoznałeś(-aś) się z zasadami bezpieczeństwa i je zrozumiałeś(-aś), a także zobowiązujesz się do ich przestrzegania.</strong>
</label>

<p style="margin-top:20px;">
Przekaż ten kod recepcjoniście :
</p>

<div class="code" id="code-pl"></div>

</div>
</div>
</div>

<footer>
        <p>&copy; 2026 GSK plc — Règles de Sécurité Livreurs</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-livreurs" 
               target="_blank" 
               style="color: #f36f21;">
                Gitea — gsk-securite-livreurs
            </a>
        </p>
    </footer>

<script>

function getCurrentCode(lang){

const now = new Date();

const month = String(
now.getMonth()+1
).padStart(2,'0');

const year = now.getFullYear();

return `GSK-DRV-${lang.toUpperCase()}-${month}${year}`;

}

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

function updateCodes(){

document.getElementById('code-fr').textContent=getCurrentCode('fr');
document.getElementById('code-en').textContent=getCurrentCode('en');
document.getElementById('code-es').textContent=getCurrentCode('es');
document.getElementById('code-ru').textContent=getCurrentCode('ru');
document.getElementById('code-ua').textContent=getCurrentCode('ua');
document.getElementById('code-pl').textContent=getCurrentCode('pl');

}

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

function setupCheckboxes(){

document
.querySelectorAll('.accept-checkbox')
.forEach(box=>{

const codeDiv=
box.closest('.confirmation')
.querySelector('.code');

box.addEventListener('change',()=>{

if(box.checked){

codeDiv.style.display='inline-block';

setTimeout(() => {
codeDiv.scrollIntoView({
behavior:'smooth',
block:'center'
});
},100);

}
else{
codeDiv.style.display='none';
}

});

});

}

window.onload=function(){

updateCodes();

setupCheckboxes();

document
.querySelector('.logo')
.addEventListener('click',()=>{

document
.getElementById('home')
.scrollIntoView({
behavior:'smooth'
});

});

};

</script>

</body>
</html>