Jimmy Labbé
311 lines
7.4 KiB
HTML
311 lines
7.4 KiB
HTML
<!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, noarchive, nosnippet">
|
|
<meta name="googlebot" content="noindex, nofollow">
|
|
|
|
<title>GSK | Accueil</title>
|
|
|
|
<link rel="icon" href="https://gsk.labbej27.fr/logo.jpeg" type="image/jpeg">
|
|
<link rel="shortcut 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-color: #f8f9fa;
|
|
color: #333;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
header {
|
|
background: linear-gradient(135deg, var(--gsk-dark), #2a3a3d);
|
|
color: white;
|
|
padding: 1rem 0;
|
|
box-shadow: 0 4px 12px rgba(0,0,0,.2);
|
|
}
|
|
|
|
.header-content {
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
padding: 0 2rem;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
.logo img {
|
|
height: 65px;
|
|
}
|
|
|
|
.hero {
|
|
background:
|
|
linear-gradient(rgba(0,0,0,.65), rgba(0,0,0,.75)),
|
|
url('https://picsum.photos/id/1015/2000/800')
|
|
center/cover;
|
|
min-height: calc(100vh - 95px);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
text-align: center;
|
|
color: white;
|
|
padding: 2rem;
|
|
}
|
|
|
|
.hero-content {
|
|
width: 100%;
|
|
max-width: 1000px;
|
|
}
|
|
|
|
.hero h1 {
|
|
font-size: 3rem;
|
|
color: var(--gsk-orange);
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.subtitle {
|
|
font-size: 1.5rem;
|
|
margin-bottom: 2.5rem;
|
|
}
|
|
|
|
.choice-container {
|
|
display: flex;
|
|
justify-content: center;
|
|
gap: 2rem;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.choice-card {
|
|
background: white;
|
|
color: #333;
|
|
border-radius: 18px;
|
|
padding: 2rem;
|
|
width: 420px;
|
|
cursor: pointer;
|
|
border: 3px solid transparent;
|
|
box-shadow: 0 10px 30px rgba(0,0,0,.15);
|
|
transition: all .25s ease;
|
|
}
|
|
|
|
.choice-card:hover {
|
|
transform: translateY(-8px);
|
|
border-color: var(--gsk-orange);
|
|
box-shadow: 0 18px 35px rgba(243,111,33,.25);
|
|
}
|
|
|
|
.choice-card:active {
|
|
transform: scale(.98);
|
|
}
|
|
|
|
.icon {
|
|
display: block;
|
|
font-size: 4rem;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.choice-card h2 {
|
|
color: var(--gsk-orange);
|
|
font-size: 1.8rem;
|
|
margin-bottom: .75rem;
|
|
line-height: 1.3;
|
|
}
|
|
|
|
.choice-card .lang {
|
|
display: block;
|
|
font-size: 1rem;
|
|
font-weight: 400;
|
|
color: #666;
|
|
margin-top: .3rem;
|
|
}
|
|
|
|
.choice-card p {
|
|
color: #555;
|
|
margin-bottom: 1.2rem;
|
|
}
|
|
|
|
.tap-message {
|
|
color: var(--gsk-orange);
|
|
font-weight: 700;
|
|
font-size: 1rem;
|
|
}
|
|
|
|
footer {
|
|
background: var(--gsk-dark);
|
|
color: #aaa;
|
|
text-align: center;
|
|
padding: 2rem;
|
|
}
|
|
|
|
footer a {
|
|
color: var(--gsk-orange);
|
|
text-decoration: none;
|
|
}
|
|
|
|
/* MOBILE */
|
|
@media (max-width: 768px) {
|
|
|
|
.header-content {
|
|
padding: 0 1rem;
|
|
}
|
|
|
|
.logo img {
|
|
height: 50px;
|
|
}
|
|
|
|
.hero {
|
|
min-height: auto;
|
|
padding: 1.5rem 1rem 2rem;
|
|
}
|
|
|
|
.hero h1 {
|
|
font-size: 2rem;
|
|
margin-bottom: .5rem;
|
|
}
|
|
|
|
.subtitle {
|
|
font-size: 1.15rem;
|
|
margin-bottom: 1.2rem;
|
|
}
|
|
|
|
.choice-container {
|
|
flex-direction: column;
|
|
gap: .8rem;
|
|
}
|
|
|
|
.choice-card {
|
|
width: 100%;
|
|
max-width: none;
|
|
padding: 1.25rem;
|
|
}
|
|
|
|
.icon {
|
|
font-size: 2.8rem;
|
|
margin-bottom: .5rem;
|
|
}
|
|
|
|
.choice-card h2 {
|
|
font-size: 1.3rem;
|
|
margin-bottom: .4rem;
|
|
}
|
|
|
|
.choice-card p {
|
|
display: none;
|
|
}
|
|
|
|
.tap-message {
|
|
font-size: .95rem;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<header>
|
|
<div class="header-content">
|
|
<div class="logo">
|
|
<img src="https://gsk.labbej27.fr/logo.jpeg" alt="GSK Logo">
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<section class="hero">
|
|
<div class="hero-content">
|
|
|
|
<h1>Bienvenue chez GSK</h1>
|
|
|
|
<p class="subtitle">
|
|
Veuillez sélectionner votre catégorie
|
|
</p>
|
|
|
|
<div class="choice-container">
|
|
|
|
<div class="choice-card" onclick="goToPage('visiteur')">
|
|
<span class="icon">👩💼</span>
|
|
|
|
<h2>
|
|
Visiteur
|
|
<span class="lang">
|
|
Visitor / Visitante
|
|
</span>
|
|
</h2>
|
|
|
|
<p>
|
|
Accès aux règles de sécurité pour les visiteurs
|
|
</p>
|
|
|
|
<div class="tap-message">
|
|
👉 Appuyez pour continuer
|
|
</div>
|
|
</div>
|
|
|
|
<div class="choice-card" onclick="goToPage('livreur')">
|
|
<span class="icon">🚚</span>
|
|
|
|
<h2>
|
|
Livreurs / Transporteurs
|
|
<span class="lang">
|
|
Drivers / Conductores / Водители /
|
|
Водії / Kierowcy
|
|
</span>
|
|
</h2>
|
|
|
|
<p>
|
|
Accès aux consignes spécifiques pour les livreurs
|
|
</p>
|
|
|
|
<div class="tap-message">
|
|
👉 Appuyez pour continuer
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
</section>
|
|
|
|
<footer>
|
|
<p>© 2026 GSK plc — Règles de Sécurité</p>
|
|
|
|
<p style="margin-top:8px;font-size:.95rem;">
|
|
Développé par LABBEJ27 pour Fiducial Évreux
|
|
</p>
|
|
|
|
<p style="margin-top:15px;font-size:.85rem;opacity:.75;">
|
|
Code source disponible sur :
|
|
<a href="https://labbej27.duckdns.org/labbej/gsk-accueil" target="_blank">
|
|
Gitea — gsk-accueil
|
|
</a>
|
|
</p>
|
|
</footer>
|
|
|
|
<script>
|
|
function goToPage(category) {
|
|
if (category === 'visiteur') {
|
|
window.location.href =
|
|
'https://gsk.labbej27.fr/visiteurs.html';
|
|
}
|
|
|
|
if (category === 'livreur') {
|
|
window.location.href =
|
|
'https://gsk.labbej27.fr/livreurs.html';
|
|
}
|
|
}
|
|
</script>
|
|
|
|
</body>
|
|
</html> |