Files
gsk-securite-livreurs/index.html
T

623 lines
16 KiB
HTML
Raw Normal View History

2026-06-11 19:22:02 +02:00
<!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:space-between;
align-items:center;
}
.logo img{
height:65px;
cursor:pointer;
}
.lang-selector{
display:flex;
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:2rem;
font-weight:bold;
color:var(--gsk-orange);
margin-top:20px;
}
footer{
background:var(--gsk-dark);
color:#aaa;
text-align:center;
padding:2rem;
margin-top:4rem;
}
</style>
</head>
<body>
<header>
<div class="header-content">
<div class="logo">
<img src="https://gsk.labbej27.fr/logo.jpeg">
</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>
<button class="lang-btn" data-lang="ru">🇷🇺 Русский</button>
<button class="lang-btn" data-lang="ua">🇺🇦 Українська</button>
<button class="lang-btn" data-lang="pl">🇵🇱 Polski</button>
</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" style="justify-content:center;">
<button class="lang-btn" onclick="selectLanguage('fr')">🇫🇷 Français</button>
<button class="lang-btn" onclick="selectLanguage('en')">🇬🇧 English</button>
<button class="lang-btn" onclick="selectLanguage('es')">🇪🇸 Español</button>
<button class="lang-btn" onclick="selectLanguage('ru')">🇷🇺 Русский</button>
<button class="lang-btn" onclick="selectLanguage('ua')">🇺🇦 Українська</button>
<button class="lang-btn" onclick="selectLanguage('pl')">🇵🇱 Polski</button>
</div>
</div>
</section>
<!-- FR -->
<div id="content-fr" class="content active">
<h1 style="text-align:center;color:#f36f21;margin-bottom:20px;">
Règles de sûreté à lintention des livreurs
</h1>
<div class="video-container">
<video controls autoplay loop playsinline>
<source src="https://gsk.labbej27.fr/gsklivfr.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 à lentré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>
<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 à lhôtesse daccueil :
</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 autoplay loop 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>
<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 autoplay loop 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>
<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 autoplay loop 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>
<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 autoplay loop 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>
<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 autoplay loop playsinline>
<source src="https://gsk.labbej27.fr/gsklivpl.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>
<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;">
Peredajte цей код адміністратору :
</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}`;
}
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){
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'
});
},100);
}
function setupCheckboxes(){
document
.querySelectorAll('.accept-checkbox')
.forEach(box=>{
const codeDiv=
box.closest('.confirmation')
.querySelector('.code');
box.addEventListener('change',()=>{
if(box.checked){
codeDiv.style.display='block';
}
else{
codeDiv.style.display='none';
}
});
});
}
window.onload=function(){
updateCodes();
setupCheckboxes();
document
.querySelector('.logo')
.addEventListener('click',()=>{
document
.getElementById('home')
.scrollIntoView({
behavior:'smooth'
});
});
};
</script>
</body>
</html>