From 56807913b315f227ffb3d8fcc4c4d03dffee5d79 Mon Sep 17 00:00:00 2001
From: snoopy <snoopy@harmonia-it.fr>
Date: Mon, 16 Mar 2026 20:40:44 +0000
Subject: [PATCH] Add file

---
 classique.html | 330 +++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 330 insertions(+)
 create mode 100644 classique.html
diff --git a/classique.html b/classique.html
new file mode 100644
index 0000000..b349c06
--- /dev/null
+++ b/classique.html
@@ -0,0 +1,330 @@
+<!doctype html>
+<html lang="fr">
+	<head>
+		<meta charset="UTF-8" />
+		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+		<title>Wi-Fi Invités - Classique</title>
+		<script>
+			const WIFI_SSID = "Bbox-31ACA61F-Invite";
+			const WIFI_PASSWORD = "U*GoyB-v#f!33Cswqeq@";
+			const WIFI_DISPLAY_NAME = "Wi-Fi Invités";
+			const WIFI_SECURITY = "WPA";
+		</script>
+		<style>
+			:root {
+				--bg: #eef2ff;
+				--card: #ffffff;
+				--text: #111827;
+				--muted: #4b5563;
+				--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;
+			}
+
+			.card {
+				width: min(680px, 100%);
+				background: var(--card);
+				border: 1px solid var(--border);
+				border-radius: 16px;
+				box-shadow: 0 14px 36px rgba(15, 23, 42, 0.12);
+				padding: 28px;
+			}
+
+			.top-actions {
+				display: flex;
+				justify-content: space-between;
+				gap: 10px;
+				margin-bottom: 14px;
+				flex-wrap: wrap;
+			}
+
+			.btn,
+			.btn-link {
+				border: 1px solid #c7d2fe;
+				background: #eef2ff;
+				color: #1e3a8a;
+				font-weight: 700;
+				font-size: 0.9rem;
+				border-radius: 10px;
+				padding: 8px 12px;
+				text-decoration: none;
+				cursor: pointer;
+			}
+
+			.btn:hover,
+			.btn-link:hover {
+				background: #dbeafe;
+			}
+
+			.editor {
+				display: grid;
+				gap: 10px;
+				grid-template-columns: repeat(2, minmax(0, 1fr));
+				margin-bottom: 18px;
+				padding: 12px;
+				background: #f8fbff;
+				border: 1px solid #cfd8e3;
+				border-radius: 12px;
+			}
+
+			.field {
+				display: grid;
+				gap: 4px;
+			}
+
+			.field label {
+				font-size: 0.82rem;
+				color: var(--muted);
+				font-weight: 600;
+			}
+
+			.field input,
+			.field select {
+				width: 100%;
+				padding: 8px 10px;
+				border: 1px solid #cbd5e1;
+				border-radius: 8px;
+				font: inherit;
+				color: #0f172a;
+				background: #fff;
+			}
+
+			.badge {
+				display: inline-block;
+				padding: 4px 10px;
+				margin-bottom: 12px;
+				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.4rem, 2vw, 2rem);
+			}
+
+			.subtitle {
+				margin: 0 0 20px;
+				color: var(--muted);
+			}
+
+			.layout {
+				display: grid;
+				gap: 24px;
+				grid-template-columns: 220px 1fr;
+				align-items: center;
+			}
+
+			#qrcode {
+				width: 220px;
+				height: 220px;
+				padding: 12px;
+				border: 1px solid #cbd5e1;
+				border-radius: 12px;
+				display: grid;
+				place-items: center;
+				background: #fff;
+			}
+
+			.details {
+				display: grid;
+				gap: 12px;
+			}
+
+			.item {
+				border: 1px solid #cfd8e3;
+				border-radius: 12px;
+				padding: 12px 14px;
+				background: #f8fbff;
+			}
+
+			.label {
+				display: block;
+				color: var(--muted);
+				font-size: 0.9rem;
+				margin-bottom: 4px;
+			}
+
+			.value {
+				font-weight: 700;
+				font-size: 1rem;
+				color: #0f172a;
+				word-break: break-all;
+			}
+
+			.help {
+				margin-top: 20px;
+				font-size: 0.95rem;
+			}
+
+			.help strong {
+				color: var(--accent);
+			}
+
+			@media (max-width: 640px) {
+				.editor {
+					grid-template-columns: 1fr;
+				}
+
+				.layout {
+					grid-template-columns: 1fr;
+					justify-items: center;
+				}
+
+				.details {
+					width: 100%;
+				}
+			}
+
+			@media print {
+				@page {
+					size: A4 portrait;
+					margin: 12mm;
+				}
+
+				body {
+					background: #fff;
+					padding: 0;
+				}
+
+				.top-actions,
+				.editor {
+					display: none;
+				}
+
+				.card {
+					width: 100%;
+					border: 1px solid #d1d5db;
+					box-shadow: none;
+					border-radius: 0;
+				}
+			}
+		</style>
+	</head>
+	<body>
+		<main class="card">
+			<div class="top-actions">
+				<a class="btn-link" href="index.html">← Retour accueil</a>
+				<button class="btn" id="print-btn" type="button">Imprimer (A4)</button>
+			</div>
+
+			<section class="editor" aria-label="Paramètres Wi-Fi modifiables">
+				<div class="field">
+					<label for="display-name-input">Nom affiché</label>
+					<input id="display-name-input" type="text" />
+				</div>
+				<div class="field">
+					<label for="security-input">Sécurité</label>
+					<select id="security-input">
+						<option value="WPA">WPA/WPA2</option>
+						<option value="WEP">WEP</option>
+						<option value="nopass">Aucune (nopass)</option>
+					</select>
+				</div>
+				<div class="field">
+					<label for="ssid-input">SSID</label>
+					<input id="ssid-input" type="text" />
+				</div>
+				<div class="field">
+					<label for="password-input">Mot de passe</label>
+					<input id="password-input" type="text" />
+				</div>
+			</section>
+
+			<div class="badge" id="badge-text">Réseau Invités</div>
+			<h1 id="title-text">Accès Wi-Fi Invités</h1>
+			<p class="subtitle">Scannez le QR code pour vous connecter automatiquement.</p>
+
+			<section class="layout">
+				<div id="qrcode" aria-label="QR code Wi-Fi"></div>
+
+				<div class="details">
+					<div class="item">
+						<span class="label">Nom du réseau (SSID)</span>
+						<span class="value" id="ssid"></span>
+					</div>
+
+					<div class="item">
+						<span class="label">Mot de passe</span>
+						<span class="value" id="password"></span>
+					</div>
+				</div>
+			</section>
+
+			<p class="help">
+				<strong>Astuce :</strong> sur iPhone/Android, ouvrez l'appareil photo puis pointez le QR code.
+			</p>
+		</main>
+
+		<script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script>
+		<script>
+			function escapeWifiValue(value) {
+				return value.replace(/([\\;,:\"])/g, "\\$1");
+			}
+
+			const displayNameInput = document.getElementById("display-name-input");
+			const securityInput = document.getElementById("security-input");
+			const ssidInput = document.getElementById("ssid-input");
+			const passwordInput = document.getElementById("password-input");
+			const badgeText = document.getElementById("badge-text");
+			const titleText = document.getElementById("title-text");
+			const ssidText = document.getElementById("ssid");
+			const passwordText = document.getElementById("password");
+			const qrcodeContainer = document.getElementById("qrcode");
+
+			displayNameInput.value = WIFI_DISPLAY_NAME;
+			securityInput.value = WIFI_SECURITY;
+			ssidInput.value = WIFI_SSID;
+			passwordInput.value = WIFI_PASSWORD;
+
+			function renderQr() {
+				const displayName = displayNameInput.value.trim() || "Wi-Fi";
+				const wifiType = securityInput.value;
+				const wifiSsid = ssidInput.value;
+				const wifiPassword = passwordInput.value;
+				const passwordPart = wifiType === "nopass" ? "" : `P:${escapeWifiValue(wifiPassword)};`;
+				const wifiPayload = `WIFI:T:${wifiType};S:${escapeWifiValue(wifiSsid)};${passwordPart};`;
+
+				badgeText.textContent = displayName;
+				titleText.textContent = `Accès ${displayName}`;
+				ssidText.textContent = wifiSsid;
+				passwordText.textContent = wifiType === "nopass" ? "Aucun" : wifiPassword;
+
+				qrcodeContainer.innerHTML = "";
+				new QRCode(qrcodeContainer, {
+					text: wifiPayload,
+					width: 196,
+					height: 196,
+					colorDark: "#111827",
+					colorLight: "#ffffff",
+					correctLevel: QRCode.CorrectLevel.M
+				});
+			}
+
+			[displayNameInput, securityInput, ssidInput, passwordInput].forEach((element) => {
+				element.addEventListener("input", renderQr);
+				element.addEventListener("change", renderQr);
+			});
+
+			document.getElementById("print-btn").addEventListener("click", () => window.print());
+			renderQr();
+		</script>
+	</body>
+</html>
