Files
labbej 7271852a30 Actualiser Index
Ajout version mobile
2026-06-11 19:40:30 +00:00

732 lines
17 KiB
HTML
Raw Permalink Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!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é à lintention 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 à 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 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 à 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 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>