snoopy/qrcode-wifi
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add file

Browse Source
This commit is contained in:
snoopy
2026-03-16 20:41:07 +00:00
parent 56807913b3
commit 3c630a594d
1 changed files with 132 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

132
index.html Normal file
View File

@@ -0,0 +1,132 @@
<!doctype html>
<html lang="fr">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Accueil Wi-Fi</title>
<style>
:root {
--bg: #eef2ff;
--card: #ffffff;
--text: #111827;
--muted: #475569;
--accent: #1e3a8a;
--accent-soft: #dbeafe;
--border: #d1d5db;
}
* {
box-sizing: border-box;
}
body {
margin: 0;
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
color: var(--text);
background: radial-gradient(circle at top, #e0e7ff 0%, var(--bg) 45%, #f8fafc 100%);
min-height: 100vh;
display: grid;
place-items: center;
padding: 24px;
}
.container {
width: min(860px, 100%);
}
.hero {
background: var(--card);
border: 1px solid var(--border);
border-radius: 16px;
padding: 26px;
box-shadow: 0 14px 36px rgba(15, 23, 42, 0.12);
margin-bottom: 16px;
}
.badge {
display: inline-block;
padding: 4px 10px;
margin-bottom: 10px;
border-radius: 999px;
font-size: 0.8rem;
font-weight: 700;
color: var(--accent);
background: var(--accent-soft);
}
h1 {
margin: 0 0 8px;
font-size: clamp(1.5rem, 2.4vw, 2.1rem);
}
.subtitle {
margin: 0;
color: var(--muted);
}
.links {
display: grid;
gap: 14px;
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.link-card {
display: block;
text-decoration: none;
background: #fff;
border: 1px solid var(--border);
border-radius: 14px;
padding: 18px;
color: inherit;
box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08);
transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.link-card:hover {
transform: translateY(-1px);
border-color: #93c5fd;
box-shadow: 0 12px 24px rgba(30, 58, 138, 0.16);
}
.link-title {
font-size: 1.05rem;
font-weight: 700;
color: #0f172a;
margin: 0 0 5px;
}
.link-desc {
margin: 0;
color: var(--muted);
font-size: 0.95rem;
}
@media (max-width: 740px) {
.links {
grid-template-columns: 1fr;
}
}
</style>
</head>
<body>
<div class="container">
<section class="hero">
<div class="badge">Accueil</div>
<h1>Portail Wi-Fi</h1>
<p class="subtitle">Choisissez la version à afficher ou imprimer.</p>
</section>
<section class="links" aria-label="Liens vers les versions Wi-Fi">
<a class="link-card" href="classique.html">
<h2 class="link-title">Version Classique</h2>
<p class="link-desc">Carte grand format, idéale pour affichage à l'écran.</p>
</a>
<a class="link-card" href="a6.html">
<h2 class="link-title">Version A6</h2>
<p class="link-desc">Carte compacte, optimisée pour impression et découpe.</p>
</a>
</section>
</div>
</body>
</html>