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

---
 a6.html | 331 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 331 insertions(+)
 create mode 100644 a6.html
diff --git a/a6.html b/a6.html
new file mode 100644
index 0000000..0c68546
--- /dev/null
+++ b/a6.html
@@ -0,0 +1,331 @@
+<!doctype html>
+<html lang="fr">
+	<head>
+		<meta charset="UTF-8" />
+		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+		<title>Wi-Fi Domestique - Carte Visite</title>
+		<script>
+			const WIFI_SSID = "Bbox-31ACA61F";
+			const WIFI_PASSWORD = "CHANGE-MOI";
+			const WIFI_DISPLAY_NAME = "Wi‑Fi Maison";
+			const WIFI_SECURITY = "WPA";
+		</script>
+		<style>
+			:root {
+				--text: #0f172a;
+				--muted: #475569;
+				--border: #d1d5db;
+				--accent: #1e3a8a;
+				--accent-soft: #dbeafe;
+			}
+
+			* {
+				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%, #f8fafc 70%);
+				padding: 18px;
+				display: grid;
+				place-items: center;
+				min-height: 100vh;
+			}
+
+			.page-wrap {
+				width: min(820px, 100%);
+				display: grid;
+				gap: 12px;
+				justify-items: center;
+			}
+
+			.top-actions {
+				width: 100%;
+				display: flex;
+				justify-content: space-between;
+				gap: 10px;
+				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 {
+				width: 100%;
+				display: grid;
+				gap: 10px;
+				grid-template-columns: repeat(2, minmax(0, 1fr));
+				padding: 12px;
+				background: #ffffff;
+				border: 1px solid #cfd8e3;
+				border-radius: 12px;
+				box-shadow: 0 6px 14px rgba(15, 23, 42, 0.06);
+			}
+
+			.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;
+			}
+
+			.a6-card {
+				width: 90mm;
+				min-height: 55mm;
+				border: 1.5px dashed #64748b;
+				background: #ffffff;
+				box-shadow: 0 12px 30px rgba(15, 23, 42, 0.1);
+				border-radius: 10px;
+				padding: 4mm;
+				display: grid;
+				grid-template-columns: 26mm 1fr;
+				gap: 4mm;
+				align-items: center;
+			}
+
+			.a6-badge {
+				display: inline-block;
+				padding: 2px 7px;
+				margin-bottom: 1.5mm;
+				border-radius: 999px;
+				font-size: 8px;
+				font-weight: 700;
+				color: var(--accent);
+				background: var(--accent-soft);
+			}
+
+			#a6-qrcode {
+				width: 26mm;
+				height: 26mm;
+				border: 1px solid var(--border);
+				padding: 1.5mm;
+				display: grid;
+				place-items: center;
+			}
+
+			.a6-title {
+				margin: 0 0 1mm;
+				font-size: 17px;
+			}
+
+			.a6-subtitle {
+				margin: 0 0 2mm;
+				font-size: 10.5px;
+				color: var(--muted);
+			}
+
+			.a6-meta {
+				display: grid;
+				gap: 1.4mm;
+			}
+
+			.a6-label {
+				font-size: 8.5px;
+				color: var(--muted);
+			}
+
+			.a6-value {
+				font-size: 12px;
+				font-weight: 700;
+				line-height: 1.2;
+				color: #0b1324;
+				word-break: break-all;
+			}
+
+			.a6-tip {
+				margin: 1.5mm 0 0;
+				font-size: 8.5px;
+			}
+
+			@media (max-width: 640px) {
+				body {
+					padding: 16px;
+				}
+
+				.editor {
+					grid-template-columns: 1fr;
+				}
+
+				.a6-card {
+					width: 100%;
+					min-height: auto;
+					grid-template-columns: 1fr;
+				}
+
+				#a6-qrcode {
+					margin: 0 auto;
+				}
+			}
+
+			@media print {
+				@page {
+					size: 90mm 55mm;
+					margin: 0;
+				}
+
+				body {
+					background: #fff;
+					padding: 0;
+					display: grid;
+					place-items: center;
+				}
+
+				.top-actions,
+				.editor {
+					display: none;
+				}
+
+				.page-wrap {
+					width: auto;
+					display: block;
+				}
+
+				.a6-card {
+					width: 90mm;
+					min-height: 55mm;
+					margin: 0;
+					box-shadow: none;
+					break-inside: avoid;
+					page-break-inside: avoid;
+				}
+			}
+		</style>
+	</head>
+	<body>
+		<div class="page-wrap">
+			<div class="top-actions">
+				<a class="btn-link" href="index.html">← Retour accueil</a>
+				<button class="btn" id="print-btn" type="button">Imprimer (Carte)</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>
+
+			<section class="a6-card" aria-label="Carte de visite Wi-Fi à imprimer et découper">
+				<div id="a6-qrcode" aria-label="QR code Wi-Fi format carte de visite"></div>
+				<div>
+					<div class="a6-badge" id="badge-text">Réseau Domestique</div>
+					<h1 class="a6-title" id="title-text">Wi‑Fi Maison</h1>
+					<p class="a6-subtitle">Carte de visite Wi-Fi</p>
+					<div class="a6-meta">
+						<div>
+							<div class="a6-label">SSID</div>
+							<div class="a6-value" id="ssid-a6"></div>
+						</div>
+						<div>
+							<div class="a6-label">Mot de passe</div>
+							<div class="a6-value" id="password-a6"></div>
+						</div>
+					</div>
+					<p class="a6-tip">Scannez ce QR code avec l'appareil photo du téléphone.</p>
+				</div>
+			</section>
+		</div>
+
+		<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-a6");
+			const passwordText = document.getElementById("password-a6");
+			const qrcodeContainer = document.getElementById("a6-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 = `Réseau ${displayName}`;
+				titleText.textContent = displayName;
+				ssidText.textContent = wifiSsid;
+				passwordText.textContent = wifiType === "nopass" ? "Aucun" : wifiPassword;
+
+				qrcodeContainer.innerHTML = "";
+				new QRCode(qrcodeContainer, {
+					text: wifiPayload,
+					width: 78,
+					height: 78,
+					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>
