Actualiser Index

Ajout version mobile

index.html

@@ -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" data-lang="fr" onclick="selectLanguage('fr')">
-<button class="lang-btn" onclick="selectLanguage('en')">🇬🇧 English</button>
+🇫🇷 Français
-<button class="lang-btn" onclick="selectLanguage('es')">🇪🇸 Español</button>
+</button>
-<button class="lang-btn" onclick="selectLanguage('ru')">🇷🇺 Русский</button>
+
-<button class="lang-btn" onclick="selectLanguage('ua')">🇺🇦 Українська</button>
+<button class="lang-btn" data-lang="en" onclick="selectLanguage('en')">
-<button class="lang-btn" onclick="selectLanguage('pl')">🇵🇱 Polski</button>
+🇬🇧 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>
+<video controls playsinline>
-<source src="https://gsk.labbej27.fr/gsklivfr.mp4" type="video/mp4">
+<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>
+<video controls playsinline>
-<source src="https://gsk.labbej27.fr/gsklivpl.mp4">
+<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
+    stopAllVideos();
-.querySelectorAll('.content')
-.forEach(c=>c.classList.remove('active'));
 
-document
+    document.querySelectorAll('.content').forEach(c =>
-.getElementById(`content-${lang}`)
+        c.classList.remove('active')
-.classList.add('active');
+    );
 
-document
+    document.getElementById(`content-${lang}`)
-.querySelectorAll('.lang-btn')
+        .classList.add('active');
-.forEach(btn=>{
 
-btn.classList.toggle(
+    document.querySelectorAll('.lang-btn').forEach(btn => {
-'active',
+        btn.classList.toggle(
-btn.getAttribute('data-lang')===lang
+            'active',
-);
+            btn.getAttribute('data-lang') === lang
+        );
+    });
 
-});
+    const activeVideo =
+        document.querySelector(`#content-${lang} video`);
 
-setTimeout(()=>{
+    if (activeVideo) {
-document
+        activeVideo.play();
-.getElementById(`content-${lang}`)
+    }
-.scrollIntoView({
-behavior:'smooth'
-});
-},100);
 
+    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';