215 lines
11 KiB
HTML
215 lines
11 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="de" data-theme="dogfather">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>Zugang — DOGFATHER UNIVERSE</title>
|
|
<meta name="robots" content="noindex, nofollow" />
|
|
<link rel="icon" type="image/png" href="assets/img/favicon.png" />
|
|
<link rel="stylesheet" href="assets/css/main.css" />
|
|
<link rel="stylesheet" href="assets/css/theme-dogfather.css" />
|
|
<style>
|
|
/* =====================================================================
|
|
Zugangsseite — bewusst kein braves Standard-Login-Formular, sondern
|
|
die volle Bühne für das Logo (Nutzer-Wunsch 03.08.2026: "übelst geil",
|
|
"überrasch mich", Logo verwenden). Reines CSS, keine zusätzlichen
|
|
Bild-Assets nötig — nur das vorhandene Logo + prozedural erzeugte
|
|
Sterne/Funken (siehe Skript unten, gleiche Machart wie der
|
|
Nebel-Effekt in main.js).
|
|
|
|
Lektion aus diesem Projekt beachtet: rotierende Ringe verzerren sich
|
|
auf nicht-runden Formen (siehe TikTok-Button-Lektion) — hier deshalb
|
|
bewusst KEIN rotierender Ring um das (unregelmäßig geformte) Logo,
|
|
stattdessen nur eine ruhig pulsierende Glut dahinter. overflow:hidden
|
|
am Body sorgt dafür, dass nichts über den Rand hinausblutet.
|
|
===================================================================== */
|
|
html, body { height: 100%; }
|
|
body {
|
|
display: flex; align-items: center; justify-content: center;
|
|
min-height: 100vh; padding: 2rem 1.2rem; position: relative;
|
|
overflow: hidden; background: radial-gradient(ellipse at 50% 30%, #12161d 0%, #06070a 62%, #030304 100%);
|
|
}
|
|
|
|
/* ---------- Aurora-Nebel, langsam driftend (3 Farbtöne der Marke) ---------- */
|
|
.gate-aurora { position: fixed; inset: -10%; z-index: 0; pointer-events: none; filter: blur(2px); }
|
|
.gate-aurora span { position: absolute; border-radius: 50%; opacity: .5; filter: blur(70px); mix-blend-mode: screen; }
|
|
.gate-aurora .a1 { width: 55vw; height: 55vw; left: -10%; top: -8%; background: radial-gradient(circle, rgba(143,217,234,.55), transparent 70%); animation: gate-drift-1 26s ease-in-out infinite; }
|
|
.gate-aurora .a2 { width: 50vw; height: 50vw; right: -12%; top: 8%; background: radial-gradient(circle, rgba(139,92,246,.5), transparent 70%); animation: gate-drift-2 32s ease-in-out infinite; }
|
|
.gate-aurora .a3 { width: 46vw; height: 46vw; left: 20%; bottom: -18%; background: radial-gradient(circle, rgba(212,175,55,.4), transparent 70%); animation: gate-drift-3 38s ease-in-out infinite; }
|
|
@keyframes gate-drift-1 { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(6vw,4vh) scale(1.12); } }
|
|
@keyframes gate-drift-2 { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(-5vw,5vh) scale(1.08); } }
|
|
@keyframes gate-drift-3 { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(4vw,-4vh) scale(1.1); } }
|
|
@media (prefers-reduced-motion: reduce) { .gate-aurora span { animation: none; } }
|
|
|
|
/* ---------- Sternenstaub/Funken (per JS positioniert, siehe unten) ---------- */
|
|
.gate-funken { position: fixed; inset: 0; z-index: 1; pointer-events: none; }
|
|
.gate-funken span {
|
|
position: absolute; width: 3px; height: 3px; border-radius: 50%;
|
|
background: #ffe9a8; box-shadow: 0 0 6px 1px rgba(255,233,168,.9);
|
|
animation: gate-funke-twinkle 3.5s ease-in-out infinite;
|
|
}
|
|
@keyframes gate-funke-twinkle { 0%,100% { opacity: .15; transform: scale(.7); } 50% { opacity: 1; transform: scale(1.3); } }
|
|
@media (prefers-reduced-motion: reduce) { .gate-funken span { animation: none; opacity: .5; } }
|
|
|
|
/* ---------- Bühne: Logo + Karte übereinander ----------
|
|
Nutzer-Feedback 03.08.2026: das Logo sollte nicht wie ein Sticker in
|
|
einer weißen Kreisscheibe auf dem Hintergrund "kleben", sondern direkt
|
|
IM Hintergrund stecken. Grund für den weißen Kreis vorher: die
|
|
Original-PNG hatte selbst einen weißen Hintergrund eingebrannt (kein
|
|
Alphakanal). Freigestellt (Rand-Flood-Fill in Python/Pillow, nur die
|
|
mit dem Bildrand verbundene Fläche wurde transparent gemacht — innen-
|
|
liegende helle Stellen wie Augen-Glanzlicht blieben unangetastet) nach
|
|
logo-dogfather-transparent.png. Dadurch kein Kreis-Container/Ring mehr
|
|
nötig — nur noch eine weiche Glut dahinter, die durch die jetzt echten
|
|
Konturen des Hunde-Kopfs hindurch scheint. */
|
|
.gate-stage { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; width: 100%; max-width: 440px; }
|
|
|
|
.gate-logo-wrap {
|
|
position: relative; width: 260px; margin-bottom: -34px; z-index: 3;
|
|
animation: gate-logo-float 6s ease-in-out infinite;
|
|
}
|
|
@keyframes gate-logo-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
|
|
@media (prefers-reduced-motion: reduce) { .gate-logo-wrap { animation: none; } }
|
|
|
|
/* Pulsierende Glut hinter der freigestellten Form (rund, aber sitzt HINTER
|
|
dem Logo statt es einzurahmen — scheint an den Konturen vorbei durch). */
|
|
.gate-logo-glow {
|
|
position: absolute; inset: -22%; border-radius: 50%; z-index: -1;
|
|
background: radial-gradient(circle, rgba(255,233,168,.65) 0%, rgba(143,217,234,.35) 40%, rgba(139,92,246,.2) 62%, transparent 76%);
|
|
filter: blur(26px); animation: gate-glow-puls 3.2s ease-in-out infinite;
|
|
}
|
|
@keyframes gate-glow-puls { 0%,100% { opacity: .6; transform: scale(.92); } 50% { opacity: 1; transform: scale(1.05); } }
|
|
|
|
.gate-logo-img {
|
|
position: relative; display: block; width: 100%; height: auto;
|
|
filter: drop-shadow(0 0 18px rgba(255,233,168,.5)) drop-shadow(0 22px 34px rgba(0,0,0,.65));
|
|
}
|
|
|
|
/* ---------- Die eigentliche Karte ---------- */
|
|
.gate-box {
|
|
position: relative; width: 100%; text-align: center;
|
|
padding: 4.2rem 2rem 2.4rem;
|
|
background: linear-gradient(180deg, rgba(20,23,29,.92), rgba(10,12,15,.96));
|
|
backdrop-filter: blur(14px);
|
|
border: 1.5px solid rgba(212,175,55,.4);
|
|
box-shadow: 0 0 0 1px rgba(212,175,55,.06) inset, 0 40px 80px -30px rgba(0,0,0,.75);
|
|
overflow: hidden;
|
|
}
|
|
.gate-box::before {
|
|
content: ""; position: absolute; top: 0; left: 8%; right: 8%; height: 1px;
|
|
background: linear-gradient(90deg, transparent, rgba(255,214,102,.95), transparent);
|
|
animation: gate-goldglanz 4.5s ease-in-out infinite;
|
|
}
|
|
@keyframes gate-goldglanz { 0%,100% { opacity: .3; } 50% { opacity: 1; } }
|
|
|
|
.gate-box .eyebrow { color: #ffe9a8; border-color: rgba(255,214,102,.5); }
|
|
.gate-box h1 {
|
|
font-size: clamp(1.6rem, 4vw, 2.1rem); margin: .5rem 0 .7rem; letter-spacing: -.01em;
|
|
background: linear-gradient(135deg, #fff, #ffe9a8 55%, #d4af37);
|
|
-webkit-background-clip: text; background-clip: text; color: transparent;
|
|
}
|
|
.gate-box p { font-size: 1rem; }
|
|
.gate-box input {
|
|
width: 100%; box-sizing: border-box; padding: 1rem 1.1rem; border-radius: 12px; text-align: center;
|
|
letter-spacing: .1em; font-size: 1.1rem; font-weight: 600; margin: 1.4rem 0 1rem;
|
|
background: rgba(255,255,255,.04); border: 1.5px solid var(--border); color: var(--text);
|
|
transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
|
|
}
|
|
.gate-box input::placeholder { letter-spacing: normal; font-weight: 400; color: rgba(154,164,178,.55); }
|
|
.gate-box input:focus {
|
|
outline: none; border-color: rgba(212,175,55,.7); background: rgba(255,255,255,.06);
|
|
box-shadow: 0 0 0 4px rgba(212,175,55,.14);
|
|
}
|
|
/* "Weiter"-Knopf: der schon fertig gebaute, aber bislang ungenutzte
|
|
.btn-holo-Stil (main.css) — Trading-Card-Holo-Folie in genau den drei
|
|
Farben, die auch schon den Hintergrund dieser Seite tragen (Babyblau/
|
|
Lila/Gold, siehe .gate-aurora), daher hier bewusst statt des
|
|
generischen .btn-primary. Volle Breite + zentrierter Text sind eine
|
|
seiteneigene Ergänzung (der Stil selbst ist an anderer Stelle als
|
|
Inline-Button mit automatischer Breite gedacht). */
|
|
.gate-box .btn-holo { width: 100%; justify-content: center; margin-top: .2rem; }
|
|
.gate-fehler { color: #ff9a9a; font-size: .9rem; margin-top: .9rem; display: none; }
|
|
.gate-fehler.zeige { display: block; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="gate-aurora" aria-hidden="true"><span class="a1"></span><span class="a2"></span><span class="a3"></span></div>
|
|
<div class="gate-funken" id="gate-funken" aria-hidden="true"></div>
|
|
|
|
<div class="gate-stage">
|
|
<div class="gate-logo-wrap" aria-hidden="true">
|
|
<div class="gate-logo-glow"></div>
|
|
<img class="gate-logo-img" src="assets/img/logo-dogfather-transparent.png" alt="" width="472" height="476" />
|
|
</div>
|
|
|
|
<div class="card gate-box">
|
|
<!-- Nutzer-Wunsch 04.08.2026: Besucher ohne Zugangscode (z.B. über einen
|
|
gefundenen/geteilten Link) sollen HIER nicht mehr "Noch nicht
|
|
öffentlich / im Aufbau" lesen — stattdessen ein normal wirkender
|
|
Link auf die eigene Domain (die spätere, öffentliche Hauptseite).
|
|
Das Eingabefeld darunter bleibt unverändert für Dogi/VanVan. -->
|
|
<h1>DOGFATHER UNIVERSE</h1>
|
|
<p class="small" style="opacity:.85;">
|
|
<a href="https://dogfather-universe.com/" style="color:#8fd9ea; font-weight:700; text-decoration: underline; text-underline-offset: .2em;">dogfather-universe.com</a>
|
|
</p>
|
|
<form id="gate-form">
|
|
<input type="text" id="gate-code" placeholder="Zugangscode" autocomplete="off" autocapitalize="off" spellcheck="false" autofocus />
|
|
<button type="submit" class="btn-holo">
|
|
<span class="btn-holo-spark" aria-hidden="true">✨</span>
|
|
<span class="btn-holo-text">Weiter</span>
|
|
<span class="btn-holo-spark" aria-hidden="true">✨</span>
|
|
</button>
|
|
</form>
|
|
<p class="gate-fehler" id="gate-fehler"></p>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
(function () {
|
|
// Sternenstaub — gleiche Machart wie der Nebel-Effekt in main.js
|
|
// (renderFog): zufällig positionierte, unterschiedlich große/verzögerte
|
|
// Punkte statt einer festen Deko.
|
|
const feld = document.getElementById("gate-funken");
|
|
let html = "";
|
|
for (let i = 0; i < 44; i++) {
|
|
const size = 2 + Math.round(Math.random() * 3);
|
|
const top = Math.round(Math.random() * 100);
|
|
const left = Math.round(Math.random() * 100);
|
|
const delay = (Math.random() * 3.5).toFixed(1);
|
|
const dauer = (2.5 + Math.random() * 2.5).toFixed(1);
|
|
html += `<span style="width:${size}px;height:${size}px;top:${top}%;left:${left}%;animation-delay:${delay}s;animation-duration:${dauer}s;"></span>`;
|
|
}
|
|
feld.innerHTML = html;
|
|
|
|
const params = new URLSearchParams(location.search);
|
|
const next = params.get("next") || "/index.html";
|
|
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 || "/index.html";
|
|
} catch {
|
|
fehlerEl.textContent = "Verbindung fehlgeschlagen. Bitte nochmal versuchen.";
|
|
fehlerEl.classList.add("zeige");
|
|
}
|
|
});
|
|
})();
|
|
</script>
|
|
</body>
|
|
</html>
|