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

Actualiser Index

Browse Source 
prise en charge version mobile améliorée
This commit is contained in:
Jimmy Labbé
2026-06-11 19:35:47 +00:00
parent 64cdfd1b02
commit ded6a25bd9
1 changed files with 160 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+160 -41
View File
@@ -37,17 +37,24 @@
margin: 0 auto; margin: 0 auto;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: center;
padding: 0 2rem; padding: 0 2rem;
} }
.logo {
cursor: pointer;
}
.logo img { .logo img {
height: 65px; height: 65px;
} }
.lang-selector { .lang-selector {
display: flex; display: flex;
justify-content: center;
align-items: center;
gap: 10px; gap: 10px;
flex-wrap: wrap;
} }
.lang-btn { .lang-btn {
@@ -149,24 +156,33 @@
} }
.code { .code {
font-size: 2.2rem; font-size: 2.5rem;
font-weight: bold; font-weight: bold;
color: var(--gsk-orange); color: var(--gsk-orange);
letter-spacing: 4px; letter-spacing: 2px;
margin: 1rem 0; margin: 1rem 0;
background: white; background: white;
padding: 15px; padding: 15px;
border-radius: 8px; border-radius: 8px;
display: none; /* caché par défaut */ display: none;
text-align: center;
} }
.accept-checkbox {
width: 24px;
height: 24px;
flex-shrink: 0;
margin-top: 3px;
}
.accept-label { .accept-label {
display: inline-flex; display: inline-flex;
align-items: center; align-items: flex-start;
gap: 10px; gap: 10px;
font-size: 1.2rem; font-size: 1.2rem;
margin-bottom: 1rem; margin-bottom: 1rem;
cursor: pointer; cursor: pointer;
text-align: left;
} }
footer { footer {
@@ -178,8 +194,76 @@
} }
@media (max-width: 768px) { @media (max-width: 768px) {
.hero-content h1 { font-size: 2.2rem; }
} .header-content {
padding: 0 1rem;
}
.logo img {
height: 50px;
}
.hero {
height: auto;
padding: 2rem 1rem;
}
.hero-content h1 {
font-size: 2rem;
}
.hero-content p {
font-size: 1.15rem !important;
margin-bottom: 1.5rem !important;
}
.lang-selector {
flex-direction: column;
align-items: stretch;
width: 100%;
max-width: 350px;
margin: 0 auto;
}
.lang-btn {
width: 100%;
font-size: 1.1rem !important;
padding: 14px !important;
}
.content {
padding: 0 1rem;
margin: 1.5rem auto;
}
.safety-text {
padding: 1.25rem;
}
.safety-text h2 {
font-size: 1.5rem;
}
ul li {
font-size: 1rem;
}
.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> </style>
</head> </head>
<body> <body>
@@ -188,11 +272,6 @@
<div class="logo"> <div class="logo">
<img src="https://gsk.labbej27.fr/logo.jpeg" alt="GSK Logo"> <img src="https://gsk.labbej27.fr/logo.jpeg" alt="GSK Logo">
</div> </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>
</div>
</div> </div>
</header> </header>
@@ -201,22 +280,30 @@
<div class="hero-content"> <div class="hero-content">
<h1>Bienvenue chez GSK</h1> <h1>Bienvenue chez GSK</h1>
<p style="font-size: 1.5rem; margin-bottom: 2.5rem;">Sélectionnez votre langue pour consulter les règles de sécurité</p> <p style="font-size: 1.5rem; margin-bottom: 2.5rem;">Sélectionnez votre langue pour consulter les règles de sécurité</p>
<div class="lang-selector" style="justify-content: center;"> <div class="lang-selector">
<button class="lang-btn" onclick="selectLanguage('fr')" style="padding: 14px 32px; font-size: 1.15rem;">🇫🇷 Français</button> <button class="lang-btn" data-lang="fr" onclick="selectLanguage('fr')">
<button class="lang-btn" onclick="selectLanguage('en')" style="padding: 14px 32px; font-size: 1.15rem;">🇬🇧 English</button> 🇫🇷 Français
<button class="lang-btn" onclick="selectLanguage('es')" style="padding: 14px 32px; font-size: 1.15rem;">🇪🇸 Español</button> </button>
</div>
<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>
</div>
</div> </div>
</section> </section>
<!-- Français --> <!-- Français -->
<div id="content-fr" class="content active"> <div id="content-fr" class="content">
<div style="text-align:center; margin-bottom: 2rem;"> <div style="text-align:center; margin-bottom: 2rem;">
<h1 style="color:#f36f21;">Règles de sûreté à l’intention des visiteurs</h1> <h1 style="color:#f36f21;">Règles de sûreté à l’intention des visiteurs</h1>
</div> </div>
<div class="video-container"> <div class="video-container">
<video controls autoplay loop playsinline> <video controls playsinline>
<source src="https://gsk.labbej27.fr/video-securite.mp4" type="video/mp4"> <source src="https://gsk.labbej27.fr/video-securite.mp4" type="video/mp4">
Votre navigateur ne supporte pas la lecture vidéo. Votre navigateur ne supporte pas la lecture vidéo.
</video> </video>
@@ -251,7 +338,7 @@
</div> </div>
<div class="video-container"> <div class="video-container">
<video controls autoplay loop playsinline> <video controls playsinline>
<source src="https://gsk.labbej27.fr/video-securiteen.mp4" type="video/mp4"> <source src="https://gsk.labbej27.fr/video-securiteen.mp4" type="video/mp4">
Your browser does not support video playback. Your browser does not support video playback.
</video> </video>
@@ -287,7 +374,7 @@
</div> </div>
<div class="video-container"> <div class="video-container">
<video controls autoplay loop playsinline> <video controls playsinline>
<source src="https://gsk.labbej27.fr/video-securitees.mp4" type="video/mp4"> <source src="https://gsk.labbej27.fr/video-securitees.mp4" type="video/mp4">
Tu navegador no admite la reproducción de vídeo. Tu navegador no admite la reproducción de vídeo.
</video> </video>
@@ -346,30 +433,62 @@
} }
function selectLanguage(lang) { 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' });
}, 150);
}
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);
}
// Arrête toutes les vidéos lors du changement de langue
function stopAllVideos() {
document.querySelectorAll('video').forEach(video => {
video.pause();
video.currentTime = 0;
});
}
// Gestion des cases à cocher // Gestion des cases à cocher
function setupCheckboxes() { function setupCheckboxes() {
document.querySelectorAll('.accept-checkbox').forEach(checkbox => { document.querySelectorAll('.accept-checkbox').forEach(checkbox => {
const codeDiv = checkbox.closest('.confirmation').querySelector('.code'); const codeDiv = checkbox.closest('.confirmation').querySelector('.code');
checkbox.addEventListener('change', function() { checkbox.addEventListener('change', function() {
if (this.checked) { if (this.checked) {
codeDiv.style.display = 'inline-block'; codeDiv.style.display = 'inline-block';
} else {
codeDiv.style.display = 'none'; setTimeout(() => {
} codeDiv.scrollIntoView({
}); behavior: 'smooth',
block: 'center'
});
}, 100);
} else {
codeDiv.style.display = 'none';
}
});
}); });
} }