labbej/gsk-securite-livreurs
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Actualiser Index

Browse Source 
Ajout version mobile
This commit is contained in:
Jimmy Labbé
2026-06-11 19:40:30 +00:00
parent decb4df708
commit 7271852a30
1 changed files with 168 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+168 -59
View File
@@ -41,17 +41,22 @@ max-width:1200px;
margin:auto;
padding:0 2rem;
display:flex;
justify-content:space-between;
justify-content:center;
align-items:center;
}
.logo{
cursor:pointer;
}
.logo img{
height:65px;
cursor:pointer;
}
.lang-selector{
display:flex;
justify-content:center;
align-items:center;
gap:10px;
flex-wrap:wrap;
}
@@ -155,10 +160,32 @@ background:#f8f9fa;
.code{
display:none;
font-size:2rem;
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{
@@ -167,6 +194,64 @@ 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>
@@ -179,16 +264,6 @@ margin-top:4rem;
<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>
@@ -201,14 +276,31 @@ margin-top:4rem;
Sélectionnez votre langue
</p>
<div class="lang-selector" style="justify-content:center;">
<div class="lang-selector">
<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>
<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>
@@ -216,15 +308,15 @@ Sélectionnez votre langue
<!-- FR -->
<div id="content-fr" class="content active">
<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 autoplay loop playsinline>
<source src="https://gsk.labbej27.fr/gsklivfr.mp4" type="video/mp4">
<video controls playsinline>
<source src="https://gsk.labbej27.fr/gsklivrfr.mp4" type="video/mp4">
</video>
</div>
@@ -247,7 +339,7 @@ Règles de sûreté à l’intention des livreurs
<div class="confirmation">
<label>
<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>
@@ -271,7 +363,7 @@ Safety Rules for Delivery Drivers
</h1>
<div class="video-container">
<video controls autoplay loop playsinline>
<video controls playsinline>
<source src="https://gsk.labbej27.fr/gsklivren.mp4">
</video>
</div>
@@ -295,7 +387,7 @@ Safety Rules for Delivery Drivers
<div class="confirmation">
<label>
<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>
@@ -319,7 +411,7 @@ Normas de seguridad para transportistas
</h1>
<div class="video-container">
<video controls autoplay loop playsinline>
<video controls playsinline>
<source src="https://gsk.labbej27.fr/gsklivres.mp4">
</video>
</div>
@@ -343,7 +435,7 @@ Normas de seguridad para transportistas
<div class="confirmation">
<label>
<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>
@@ -366,7 +458,7 @@ Entregue este código a la recepcionista :
</h1>
<div class="video-container">
<video controls autoplay loop playsinline>
<video controls playsinline>
<source src="https://gsk.labbej27.fr/gsklivrru.mp4">
</video>
</div>
@@ -390,7 +482,7 @@ Entregue este código a la recepcionista :
<div class="confirmation">
<label>
<label class="accept-label">
<input type="checkbox" class="accept-checkbox">
<strong>Нажав здесь, вы подтверждаете, что прочитали и поняли правила безопасности, и обязуетесь их соблюдать.</strong>
</label>
@@ -414,7 +506,7 @@ Entregue este código a la recepcionista :
</h1>
<div class="video-container">
<video controls autoplay loop playsinline>
<video controls playsinline>
<source src="https://gsk.labbej27.fr/gsklivrukr.mp4">
</video>
</div>
@@ -438,7 +530,7 @@ Entregue este código a la recepcionista :
<div class="confirmation">
<label>
<label class="accept-label">
<input type="checkbox" class="accept-checkbox">
<strong>Натискаючи тут, ви підтверджуєте, що прочитали та зрозуміли правила безпеки, і погоджуєтеся їх дотримуватися.</strong>
</label>
@@ -462,8 +554,8 @@ 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 controls playsinline>
<source src="https://gsk.labbej27.fr/gsklivrpl.mp4">
</video>
</div>
@@ -486,13 +578,13 @@ Zasady bezpieczeństwa dla kierowców dostawczych
<div class="confirmation">
<label>
<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;">
Peredajte цей код адміністратору :
Przekaż ten kod recepcjoniście :
</p>
<div class="code" id="code-pl"></div>
@@ -530,6 +622,14 @@ 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');
@@ -541,35 +641,35 @@ document.getElementById('code-pl').textContent=getCurrentCode('pl');
}
function selectLanguage(lang){
function selectLanguage(lang) {
document
.querySelectorAll('.content')
.forEach(c=>c.classList.remove('active'));
stopAllVideos();
document
.getElementById(`content-${lang}`)
.classList.add('active');
document.querySelectorAll('.content').forEach(c =>
c.classList.remove('active')
);
document
.querySelectorAll('.lang-btn')
.forEach(btn=>{
document.getElementById(`content-${lang}`)
.classList.add('active');
btn.classList.toggle(
'active',
btn.getAttribute('data-lang')===lang
);
document.querySelectorAll('.lang-btn').forEach(btn => {
btn.classList.toggle(
'active',
btn.getAttribute('data-lang') === lang
);
});
});
const activeVideo =
document.querySelector(`#content-${lang} video`);
setTimeout(()=>{
document
.getElementById(`content-${lang}`)
.scrollIntoView({
behavior:'smooth'
});
},100);
if (activeVideo) {
activeVideo.play();
}
setTimeout(() => {
document.getElementById(`content-${lang}`)
.scrollIntoView({ behavior: 'smooth' });
}, 150);
}
function setupCheckboxes(){
@@ -585,7 +685,16 @@ box.closest('.confirmation')
box.addEventListener('change',()=>{
if(box.checked){
codeDiv.style.display='block';
codeDiv.style.display='inline-block';
setTimeout(() => {
codeDiv.scrollIntoView({
behavior:'smooth',
block:'center'
});
},100);
}
else{
codeDiv.style.display='none';