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
+145 -26
View File
@@ -37,17 +37,24 @@
margin: 0 auto;
display: flex;
align-items: center;
justify-content: space-between;
justify-content: center;
padding: 0 2rem;
}
.logo {
cursor: pointer;
}
.logo img {
height: 65px;
}
.lang-selector {
display: flex;
justify-content: center;
align-items: center;
gap: 10px;
flex-wrap: wrap;
}
.lang-btn {
@@ -149,24 +156,33 @@
}
.code {
font-size: 2.2rem;
font-size: 2.5rem;
font-weight: bold;
color: var(--gsk-orange);
letter-spacing: 4px;
letter-spacing: 2px;
margin: 1rem 0;
background: white;
padding: 15px;
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 {
display: inline-flex;
align-items: center;
align-items: flex-start;
gap: 10px;
font-size: 1.2rem;
margin-bottom: 1rem;
cursor: pointer;
text-align: left;
}
footer {
@@ -178,8 +194,76 @@
}
@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>
</head>
<body>
@@ -188,11 +272,6 @@
<div class="logo">
<img src="https://gsk.labbej27.fr/logo.jpeg" alt="GSK Logo">
</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>
</header>
@@ -201,22 +280,30 @@
<div class="hero-content">
<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>
<div class="lang-selector" style="justify-content: center;">
<button class="lang-btn" onclick="selectLanguage('fr')" style="padding: 14px 32px; font-size: 1.15rem;">🇫🇷 Français</button>
<button class="lang-btn" onclick="selectLanguage('en')" style="padding: 14px 32px; font-size: 1.15rem;">🇬🇧 English</button>
<button class="lang-btn" onclick="selectLanguage('es')" style="padding: 14px 32px; font-size: 1.15rem;">🇪🇸 Español</button>
<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>
</div>
</div>
</section>
<!-- Français -->
<div id="content-fr" class="content active">
<div id="content-fr" class="content">
<div style="text-align:center; margin-bottom: 2rem;">
<h1 style="color:#f36f21;">Règles de sûreté à l’intention des visiteurs</h1>
</div>
<div class="video-container">
<video controls autoplay loop playsinline>
<video controls playsinline>
<source src="https://gsk.labbej27.fr/video-securite.mp4" type="video/mp4">
Votre navigateur ne supporte pas la lecture vidéo.
</video>
@@ -251,7 +338,7 @@
</div>
<div class="video-container">
<video controls autoplay loop playsinline>
<video controls playsinline>
<source src="https://gsk.labbej27.fr/video-securiteen.mp4" type="video/mp4">
Your browser does not support video playback.
</video>
@@ -287,7 +374,7 @@
</div>
<div class="video-container">
<video controls autoplay loop playsinline>
<video controls playsinline>
<source src="https://gsk.labbej27.fr/video-securitees.mp4" type="video/mp4">
Tu navegador no admite la reproducción de vídeo.
</video>
@@ -346,18 +433,43 @@
}
function selectLanguage(lang) {
document.querySelectorAll('.content').forEach(c => c.classList.remove('active'));
document.getElementById(`content-${lang}`).classList.add('active');
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);
btn.classList.toggle(
'active',
btn.getAttribute('data-lang') === lang
);
});
setTimeout(() => {
document.getElementById(`content-${lang}`).scrollIntoView({ behavior: 'smooth' });
}, 150);
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
function setupCheckboxes() {
document.querySelectorAll('.accept-checkbox').forEach(checkbox => {
@@ -366,10 +478,17 @@
checkbox.addEventListener('change', function() {
if (this.checked) {
codeDiv.style.display = 'inline-block';
setTimeout(() => {
codeDiv.scrollIntoView({
behavior: 'smooth',
block: 'center'
});
}, 100);
} else {
codeDiv.style.display = 'none';
}
});
});
});
}