first commit

This commit is contained in:
Jimmy Labbé
2026-06-11 19:22:02 +02:00
commit decb4df708
16 changed files with 732 additions and 0 deletions
Vendored
BIN
View File
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
BIN
View File
Binary file not shown.
Binary file not shown.
+104
View File
@@ -0,0 +1,104 @@
# GSK Évreux - Mini Site Règles de Sécurité Visiteurs
## Présentation
Ce mini site web a été développé pour **GSK Évreux** afin de présenter de manière claire et moderne les **règles de sécurité** à lintention des livreurs.
---
## Informations Projet
- **Client** : GSK Évreux
- **Réalisé par** : Jimmy Labbé (Labbej27)
- **Pour le compte de** : Fiducial
- **Date** : Juin 2026
- **Type** : Mini site web autonome (single file)
---
## Objectif
Permettre aux visiteurs de :
- Choisir leur langue (Français, Anglais, Espagnol, Polonias, Russe et Ukrainien)
- Visionner une vidéo de sensibilisation à la sécurité
- Lire clairement les règles de sûreté
- Obtenir un code de confirmation à remettre à lhôtesse daccueil
---
## Fonctionnalités
- Design aux couleurs officielles GSK (orange #f36f21)
- Interface multilingue (FR / EN / ES / UA / RU / PL)
- Vidéo locale français responsive (`gsklivrfr.mp4`)
- Vidéo locale anglais responsive (`gsklivren.mp4`)
- Vidéo locale espagnol responsive (`gsklivres.mp4`)
- Vidéo locale russe responsive (`gsklivrru.mp4`)
- Vidéo locale ukrainien responsive (`gsklivrukr.mp4`)
- Vidéo locale polonais responsive (`gsklivrpl.mp4`)
- Codes de confirmation par langue
- Responsive (mobile & desktop)
- Protection contre lindexation (`noindex`)
- Favicon et logo GSK
---
## Licence
**© 2026 Jimmy Labbé - Tous droits réservés**
Ce projet est **strictement confidentiel** et **propriétaire**.
**Seul le personnel de GSK et son service informatique** est autorisé à exploiter, modifier, déployer ou utiliser ce site.
**Aucune autorisation** nest donnée pour :
- La redistribution
- Lutilisation en dehors de GSK
- La publication publique
- Toute utilisation par des tiers (y compris Fiducial sans accord explicite de GSK)
Toute utilisation en dehors du personnel GSK et de son service informatique est strictement interdite.
---
## Fichiers du projet
- `index.html` → Page principale
- `logo.jpeg` → Logo GSK
- `logo.jpeg` → Icône du site
- `video-securite.mp4` → Vidéo de sensibilisation FR
- `video-securiteen.mp4` → Vidéo de sensibilisation EN
- `video-securitees.mp4` → Vidéo de sensibilisation ES
- `robots.txt` → Blocage dindexation
- `README.md` → Ce fichier
---
## Déploiement
Ce site est conçu pour être très léger et peut être déployé facilement sur :
- Un serveur web interne
- Un NAS
- Gitea / GitLab Pages
- Tout serveur HTTP (Apache, Nginx, etc.)
### Important :
Pensez à **modifier lURL** dans le fichier `index.html` (si nécessaire) ou dans la documentation selon ladresse où le site sera hébergé.
**Exemple** : Remplacer `https://gsk.labbej27.fr` par ladresse réelle du serveur (ex: `https://securite.gsk-evreux.fr` ou `http://10.0.0.50:8080`).
Pour tester en local :
```bash
python -m http.server 8000
```
---
## Auteurs
**Jimmy Labbé** (Labbej27)
**Rebecca-Sarah Attat**
*Développé pour Fiducial au service de GSK Évreux*
BIN
View File
Binary file not shown.
BIN
View File
Binary file not shown.
BIN
View File
Binary file not shown.
BIN
View File
Binary file not shown.
BIN
View File
Binary file not shown.
BIN
View File
Binary file not shown.
+623
View File
@@ -0,0 +1,623 @@
<!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:space-between;
align-items:center;
}
.logo img{
height:65px;
cursor:pointer;
}
.lang-selector{
display:flex;
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:2rem;
font-weight:bold;
color:var(--gsk-orange);
margin-top:20px;
}
footer{
background:var(--gsk-dark);
color:#aaa;
text-align:center;
padding:2rem;
margin-top:4rem;
}
</style>
</head>
<body>
<header>
<div class="header-content">
<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>
<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" style="justify-content:center;">
<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>
</div>
</div>
</section>
<!-- FR -->
<div id="content-fr" class="content active">
<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 autoplay loop playsinline>
<source src="https://gsk.labbej27.fr/gsklivfr.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>
<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 autoplay loop 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>
<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 autoplay loop 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>
<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 autoplay loop 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>
<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 autoplay loop 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>
<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 autoplay loop playsinline>
<source src="https://gsk.labbej27.fr/gsklivpl.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>
<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 цей код адміністратору :
</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}`;
}
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){
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'
});
},100);
}
function setupCheckboxes(){
document
.querySelectorAll('.accept-checkbox')
.forEach(box=>{
const codeDiv=
box.closest('.confirmation')
.querySelector('.code');
box.addEventListener('change',()=>{
if(box.checked){
codeDiv.style.display='block';
}
else{
codeDiv.style.display='none';
}
});
});
}
window.onload=function(){
updateCodes();
setupCheckboxes();
document
.querySelector('.logo')
.addEventListener('click',()=>{
document
.getElementById('home')
.scrollIntoView({
behavior:'smooth'
});
});
};
</script>
</body>
</html>
+5
View File
@@ -0,0 +1,5 @@
User-agent: *
Disallow: /
# Pas d'indexation
Noindex: /