Eigene Zugangscode-Schranke statt Cloudflare Access — löst VanVans Login-Problem
Ersetzt die (fehlerhaft auf die GANZE Domain wirkende) Cloudflare-Zero- Trust-Access-Sperre durch eine eigene, schlanke Lösung nach dem bewährten Vorbild von "Dogfather Universe": eine Pages-Functions-Middleware (functions/_middleware.js) prüft bei jeder Anfrage ein HMAC-signiertes Session-Cookie; ohne gültiges Cookie geht's zu public/gate.html (im Van's- Design), wo ein Zugangscode eingegeben wird. Zwei getrennte Codes für qciga und VanVan, 90 Tage gültig, danach neu eingeben. /admin/* ist komplett ausgenommen — läuft weiter über das echte GitHub-OAuth-Login, das für VanVan schon funktioniert. Bonus: die drei separaten Vorschau-Seiten (demo-normal/demo-konto/demo-abo) sind jetzt überflüssig und entfernt. Stattdessen gibt's ein schwebendes Umschalter-Widget (Layout.astro), das NUR sichtbar ist, wenn das Gate-Cookie vorhanden ist (also nur für uns beide) — auf jeder beliebigen Seite kann per Knopfdruck zwischen "Normaler Besucher", "Angemeldete Kundin" und "Abonnentin" gewechselt werden, ohne die Seite verlassen zu müssen. Co-Authored-By: Claude Sonnet 5 <[email protected]>
This commit is contained in:
qcigano
co-authored by
Claude Sonnet 5
Claude Sonnet 5
parent
6b1920dfb3
commit
ad07584906
@@ -0,0 +1,173 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Zugang — Van's DIY & Bastelbedarf</title>
|
||||
<meta name="robots" content="noindex, nofollow" />
|
||||
<link rel="icon" type="image/x-icon" href="/favicon.ico" />
|
||||
<style>
|
||||
:root {
|
||||
--c-black: #0a0910;
|
||||
--c-anthracite: #1b1a22;
|
||||
--c-anthracite-light: #252333;
|
||||
--c-text: #f4f1f7;
|
||||
--c-text-muted: #b7aec4;
|
||||
--c-accent: #5fd3ec;
|
||||
--c-accent-hover: #3ca9c2;
|
||||
--c-purple-glow: #9b7fd6;
|
||||
--radius-l: 22px;
|
||||
--radius-m: 16px;
|
||||
--ease: cubic-bezier(0.22, 1, 0.36, 1);
|
||||
}
|
||||
* { box-sizing: border-box; }
|
||||
body {
|
||||
margin: 0;
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 1.5rem;
|
||||
background: var(--c-black);
|
||||
background-image: radial-gradient(60% 50% at 15% 10%, color-mix(in srgb, var(--c-purple-glow) 20%, transparent), transparent 70%),
|
||||
radial-gradient(50% 45% at 85% 90%, color-mix(in srgb, var(--c-accent) 14%, transparent), transparent 70%);
|
||||
color: var(--c-text);
|
||||
font-family: "Inter", "Manrope", system-ui, sans-serif;
|
||||
line-height: 1.6;
|
||||
}
|
||||
.gate-box {
|
||||
position: relative;
|
||||
max-width: 430px;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
padding: 2.4rem 2rem;
|
||||
border-radius: var(--radius-l);
|
||||
border: 1.5px solid transparent;
|
||||
background:
|
||||
linear-gradient(165deg, var(--c-anthracite-light), var(--c-anthracite)) padding-box,
|
||||
linear-gradient(120deg, #9b7fd6, var(--c-accent), #e3b23c, #9b7fd6) border-box;
|
||||
background-size: 100% 100%, 300% 100%;
|
||||
animation: gate-border-shift 9s ease-in-out infinite;
|
||||
box-shadow: 0 20px 50px -20px rgba(0, 0, 0, 0.7);
|
||||
}
|
||||
@keyframes gate-border-shift {
|
||||
0%, 100% { background-position: 0 0, 0% 50%; }
|
||||
50% { background-position: 0 0, 100% 50%; }
|
||||
}
|
||||
.gate-eyebrow {
|
||||
display: inline-block;
|
||||
font-size: 0.78rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.06em;
|
||||
text-transform: uppercase;
|
||||
color: #e3b23c;
|
||||
background: color-mix(in srgb, #e3b23c 16%, transparent);
|
||||
border: 1px solid color-mix(in srgb, #e3b23c 40%, transparent);
|
||||
border-radius: 999px;
|
||||
padding: 0.3rem 0.9rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
.gate-box h1 {
|
||||
font-family: "Fraunces", "Playfair Display", Georgia, serif;
|
||||
font-size: 1.7rem;
|
||||
font-weight: 600;
|
||||
margin: 0 0 0.6rem;
|
||||
line-height: 1.2;
|
||||
}
|
||||
.gate-box p {
|
||||
margin: 0 0 1.4rem;
|
||||
color: var(--c-text-muted);
|
||||
font-size: 0.96rem;
|
||||
}
|
||||
.gate-box input {
|
||||
width: 100%;
|
||||
padding: 0.9rem 1rem;
|
||||
border-radius: 12px;
|
||||
text-align: center;
|
||||
letter-spacing: 0.08em;
|
||||
font-size: 1.05rem;
|
||||
margin-bottom: 0.9rem;
|
||||
background: rgba(244, 241, 247, 0.05);
|
||||
border: 1.5px solid rgba(244, 241, 247, 0.16);
|
||||
color: var(--c-text);
|
||||
font-family: inherit;
|
||||
}
|
||||
.gate-box input:focus {
|
||||
outline: none;
|
||||
border-color: var(--c-accent);
|
||||
box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-accent) 25%, transparent);
|
||||
}
|
||||
.gate-box button {
|
||||
width: 100%;
|
||||
padding: 0.85rem 1rem;
|
||||
border-radius: 12px;
|
||||
border: none;
|
||||
background: linear-gradient(120deg, var(--c-accent), var(--c-accent-hover));
|
||||
color: var(--c-black);
|
||||
font-weight: 800;
|
||||
font-size: 1rem;
|
||||
cursor: pointer;
|
||||
transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease);
|
||||
}
|
||||
.gate-box button:hover { transform: translateY(-2px); box-shadow: 0 10px 24px -10px color-mix(in srgb, var(--c-accent) 60%, transparent); }
|
||||
.gate-fehler {
|
||||
color: #ff9a9a;
|
||||
font-size: 0.88rem;
|
||||
margin: 0.9rem 0 0;
|
||||
display: none;
|
||||
}
|
||||
.gate-fehler.zeige { display: block; }
|
||||
.gate-logo {
|
||||
font-family: "Fraunces", "Playfair Display", Georgia, serif;
|
||||
font-weight: 700;
|
||||
font-size: 0.95rem;
|
||||
color: var(--c-text-muted);
|
||||
margin: 1.6rem 0 0;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="gate-box">
|
||||
<span class="gate-eyebrow">🔒 Noch nicht öffentlich</span>
|
||||
<h1>Van's DIY & Bastelbedarf</h1>
|
||||
<p>Diese Seite ist gerade im Aufbau und noch nicht für die Öffentlichkeit freigegeben.<br />Zugangscode eingeben, um weiterzukommen.</p>
|
||||
<form id="gate-form">
|
||||
<input type="text" id="gate-code" placeholder="Zugangscode" autocomplete="off" autocapitalize="off" spellcheck="false" autofocus />
|
||||
<button type="submit">Weiter</button>
|
||||
</form>
|
||||
<p class="gate-fehler" id="gate-fehler"></p>
|
||||
<p class="gate-logo">🧶 Handgemacht mit Liebe</p>
|
||||
</div>
|
||||
<script>
|
||||
(function () {
|
||||
const params = new URLSearchParams(location.search);
|
||||
const next = params.get("next") || "/";
|
||||
const form = document.getElementById("gate-form");
|
||||
const fehlerEl = document.getElementById("gate-fehler");
|
||||
form.addEventListener("submit", async function (e) {
|
||||
e.preventDefault();
|
||||
fehlerEl.classList.remove("zeige");
|
||||
const code = document.getElementById("gate-code").value.trim();
|
||||
if (!code) return;
|
||||
try {
|
||||
const res = await fetch("/gate-auth", {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({ code, next }),
|
||||
});
|
||||
const data = await res.json();
|
||||
if (!res.ok || !data.ok) {
|
||||
fehlerEl.textContent = (data && data.error) || "Falscher Zugangscode.";
|
||||
fehlerEl.classList.add("zeige");
|
||||
return;
|
||||
}
|
||||
location.href = data.next || "/";
|
||||
} catch {
|
||||
fehlerEl.textContent = "Verbindung fehlgeschlagen. Bitte nochmal versuchen.";
|
||||
fehlerEl.classList.add("zeige");
|
||||
}
|
||||
});
|
||||
})();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user