Creator Workspace: Anmeldeseite unter /workspace
Erstes sichtbares Stueck des Creator-Workspace-Konzepts. Reine statische Dateien in einem neuen Ordner workspace/ -- express.static liefert den Repo-Ordner aus, die Seite ist damit ohne Servercode-Aenderung und ohne Neustart unter /workspace/ erreichbar. Rein additiv: an bestehenden Dateien wurde nichts geaendert. Motiv: Dogfather und Hasi Dog stehen rechts im Bild, deshalb liegt die Code-Tafel links ueber der ruhigen Flaeche (bei VanVans Buchhaltung ist es gespiegelt, weil dort das Emblem links steht). Drei Layoutfaelle, damit die Figuren in keiner Fenstergroesse von der Tafel ueberdeckt werden. Bewusst nur WebP, kein AVIF: send 0.19.2 (Express 4) kennt AVIF nicht und liefert es als application/octet-stream aus -- wegen des nosniff-Headers verweigert der Browser das Bild dann komplett. Lokal gegen den echten Express-Server geprueft: 0 Konsolenfehler, 0 CSP-Verstoesse. Anmelden funktioniert noch nicht (kein Endpunkt); das Formular sagt das jetzt ehrlich statt "Code stimmt nicht".
This commit is contained in:
@@ -0,0 +1,336 @@
|
||||
/* ===================================================================
|
||||
Creator Workspace - Anmeldeseite
|
||||
-------------------------------------------------------------------
|
||||
Grundsatz: dunkel und ruhig. Die Farben stammen aus dem Motiv, sind
|
||||
aber bewusst entsättigt - Neon als Stimmung, nicht als Blendung.
|
||||
Kein reines Weiss auf Schwarz, keine harten Kanten, keine Blinker.
|
||||
=================================================================== */
|
||||
|
||||
:root {
|
||||
--tinte: #05070d;
|
||||
--glas: rgba(10, 14, 23, 0.74);
|
||||
--glas-tief: rgba(6, 9, 16, 0.86);
|
||||
--rand: rgba(150, 186, 220, 0.16);
|
||||
--rand-hell: rgba(150, 186, 220, 0.30);
|
||||
|
||||
--text: #dbe4ef; /* kein reines Weiss - schont die Augen */
|
||||
--text-leise: #94a5bb;
|
||||
--text-still: #6d7d92;
|
||||
|
||||
--akzent: #3fbdf5; /* aus dem Neon des Motivs, entsättigt */
|
||||
--akzent-tief: #1f7fb0;
|
||||
--violett: #8a76ff;
|
||||
--warn: #ff9aa2; /* weiches Rot statt Signalrot */
|
||||
|
||||
--radius: 18px;
|
||||
--radius-klein: 12px;
|
||||
--schatten: 0 24px 60px -20px rgba(0, 0, 0, 0.75);
|
||||
--tempo: .22s cubic-bezier(.4, 0, .2, 1);
|
||||
}
|
||||
|
||||
*, *::before, *::after { box-sizing: border-box; }
|
||||
|
||||
html { -webkit-text-size-adjust: 100%; }
|
||||
|
||||
body.gate {
|
||||
margin: 0;
|
||||
min-height: 100svh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background: var(--tinte);
|
||||
color: var(--text);
|
||||
font-family: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
|
||||
font-size: 16px;
|
||||
line-height: 1.55;
|
||||
letter-spacing: .01em;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
/* ---------- Bühne ---------------------------------------------------- */
|
||||
|
||||
.buehne { position: fixed; inset: 0; z-index: 0; }
|
||||
|
||||
.buehne__bild {
|
||||
width: 100%; height: 100%;
|
||||
object-fit: cover;
|
||||
object-position: center;
|
||||
/* Minimal abgedunkelt und entsättigt, damit der Text darüber ruhig liegt. */
|
||||
filter: saturate(.92) brightness(.9);
|
||||
transform: scale(1.03); /* Reserve für die Parallaxe */
|
||||
transition: transform 1.4s cubic-bezier(.2, .7, .2, 1);
|
||||
will-change: transform;
|
||||
}
|
||||
|
||||
/* Der Schleier macht die linke Seite lesbar, ohne das Motiv zu erschlagen.
|
||||
Rechts bleibt er fast durchsichtig - dort stehen Dogfather und Hasi Dog. */
|
||||
.buehne__schleier {
|
||||
position: absolute; inset: 0;
|
||||
/* Viele weiche Stufen statt weniger harter - sonst zeichnet sich die Kante
|
||||
des Verlaufs als sichtbare Diagonale quer durchs Bild. */
|
||||
background:
|
||||
linear-gradient(96deg,
|
||||
rgba(3, 5, 10, 0.93) 0%,
|
||||
rgba(3, 5, 10, 0.90) 18%,
|
||||
rgba(3, 5, 10, 0.82) 28%,
|
||||
rgba(4, 6, 12, 0.68) 36%,
|
||||
rgba(4, 6, 12, 0.50) 44%,
|
||||
rgba(4, 6, 12, 0.33) 52%,
|
||||
rgba(4, 6, 12, 0.19) 60%,
|
||||
rgba(4, 6, 12, 0.09) 68%,
|
||||
rgba(4, 6, 12, 0.03) 78%,
|
||||
rgba(4, 6, 12, 0.00) 88%),
|
||||
radial-gradient(120% 90% at 50% 120%, rgba(0, 0, 0, .42), transparent 62%);
|
||||
}
|
||||
|
||||
/* ---------- Tafel ---------------------------------------------------- */
|
||||
|
||||
.tafel {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
margin-left: clamp(24px, 7vw, 104px);
|
||||
width: min(452px, 44vw);
|
||||
padding: clamp(28px, 3vw, 40px) clamp(24px, 2.6vw, 36px) clamp(24px, 2.6vw, 32px);
|
||||
background: var(--glas);
|
||||
backdrop-filter: blur(22px) saturate(115%);
|
||||
-webkit-backdrop-filter: blur(22px) saturate(115%);
|
||||
border: 1px solid var(--rand);
|
||||
border-radius: var(--radius);
|
||||
box-shadow: var(--schatten);
|
||||
animation: auftauchen .7s cubic-bezier(.2, .7, .2, 1) both;
|
||||
}
|
||||
|
||||
/* Feine Lichtkante links - nimmt das Neon des Motivs auf, ohne zu leuchten. */
|
||||
.tafel__kante {
|
||||
position: absolute; left: -1px; top: 16%; bottom: 16%;
|
||||
width: 2px; border-radius: 2px;
|
||||
background: linear-gradient(180deg,
|
||||
transparent, var(--akzent) 22%, var(--violett) 72%, transparent);
|
||||
opacity: .55;
|
||||
}
|
||||
|
||||
@keyframes auftauchen {
|
||||
from { opacity: 0; transform: translateY(14px); }
|
||||
to { opacity: 1; transform: none; }
|
||||
}
|
||||
|
||||
/* ---------- Kopf ----------------------------------------------------- */
|
||||
|
||||
.marke {
|
||||
margin: 0 0 6px;
|
||||
font-size: .74rem; font-weight: 700;
|
||||
letter-spacing: .18em; text-transform: uppercase;
|
||||
color: var(--akzent);
|
||||
}
|
||||
|
||||
.titel {
|
||||
margin: 0 0 8px;
|
||||
font-size: clamp(1.6rem, 2.5vw, 2rem);
|
||||
font-weight: 700; line-height: 1.15;
|
||||
letter-spacing: -.01em;
|
||||
}
|
||||
|
||||
.unterzeile { margin: 0 0 26px; color: var(--text-leise); font-size: .94rem; }
|
||||
|
||||
/* ---------- Rollen --------------------------------------------------- */
|
||||
|
||||
.feldschild {
|
||||
margin: 0 0 10px;
|
||||
font-size: .78rem; font-weight: 600;
|
||||
letter-spacing: .06em; text-transform: uppercase;
|
||||
color: var(--text-still);
|
||||
}
|
||||
|
||||
.rollen { margin-bottom: 22px; }
|
||||
|
||||
.rolle {
|
||||
display: flex; align-items: center; gap: 13px;
|
||||
width: 100%; margin-bottom: 8px; padding: 11px 14px;
|
||||
background: rgba(255, 255, 255, .035);
|
||||
border: 1px solid var(--rand);
|
||||
border-radius: var(--radius-klein);
|
||||
color: var(--text);
|
||||
font: inherit; text-align: left; cursor: pointer;
|
||||
transition: border-color var(--tempo), background var(--tempo), transform var(--tempo);
|
||||
}
|
||||
.rolle:hover { background: rgba(255, 255, 255, .06); border-color: var(--rand-hell); }
|
||||
.rolle:active { transform: scale(.995); }
|
||||
|
||||
.rolle[aria-checked="true"] {
|
||||
background: linear-gradient(100deg, rgba(63, 189, 245, .14), rgba(138, 118, 255, .10));
|
||||
border-color: rgba(63, 189, 245, .55);
|
||||
}
|
||||
|
||||
.rolle__zeichen {
|
||||
flex: 0 0 auto; width: 21px; height: 21px;
|
||||
fill: none; stroke: var(--text-still);
|
||||
stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
|
||||
transition: stroke var(--tempo);
|
||||
}
|
||||
.rolle__zeichen .strich { fill: none; }
|
||||
.rolle[aria-checked="true"] .rolle__zeichen { stroke: var(--akzent); }
|
||||
|
||||
.rolle__text { display: flex; flex-direction: column; min-width: 0; }
|
||||
.rolle__name { font-weight: 600; font-size: .95rem; }
|
||||
.rolle__zusatz { font-size: .8rem; color: var(--text-still); }
|
||||
|
||||
/* ---------- Formular ------------------------------------------------- */
|
||||
|
||||
.fuer { color: var(--akzent); text-transform: none; letter-spacing: normal; }
|
||||
|
||||
.feld { position: relative; }
|
||||
|
||||
#code {
|
||||
width: 100%; padding: 13px 46px 13px 15px;
|
||||
background: rgba(255, 255, 255, .045);
|
||||
border: 1px solid var(--rand);
|
||||
border-radius: var(--radius-klein);
|
||||
color: var(--text);
|
||||
font: inherit; letter-spacing: .06em;
|
||||
transition: border-color var(--tempo), background var(--tempo), box-shadow var(--tempo);
|
||||
}
|
||||
#code::placeholder { color: var(--text-still); letter-spacing: normal; }
|
||||
#code:hover { border-color: var(--rand-hell); }
|
||||
#code:focus {
|
||||
outline: none;
|
||||
border-color: rgba(63, 189, 245, .7);
|
||||
background: rgba(255, 255, 255, .065);
|
||||
box-shadow: 0 0 0 3px rgba(63, 189, 245, .16);
|
||||
}
|
||||
|
||||
.feld__auge {
|
||||
position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
|
||||
width: 36px; height: 36px; padding: 8px;
|
||||
background: none; border: 0; border-radius: 9px;
|
||||
cursor: pointer; color: var(--text-still);
|
||||
transition: color var(--tempo), background var(--tempo);
|
||||
}
|
||||
.feld__auge:hover { color: var(--text-leise); background: rgba(255, 255, 255, .06); }
|
||||
.feld__auge svg { width: 100%; height: 100%; fill: none; stroke: currentColor;
|
||||
stroke-width: 1.7; stroke-linecap: round; }
|
||||
.feld__auge .durch { opacity: 0; transition: opacity var(--tempo); }
|
||||
.feld__auge[aria-pressed="true"] .durch { opacity: 1; }
|
||||
|
||||
.hinweis, .fehler {
|
||||
margin: 9px 2px 0; font-size: .84rem; min-height: 0;
|
||||
}
|
||||
.hinweis { color: var(--text-leise); }
|
||||
.fehler { color: var(--warn); }
|
||||
.fehler:empty { margin: 0; }
|
||||
|
||||
.knopf {
|
||||
position: relative;
|
||||
width: 100%; margin-top: 18px; padding: 13px 18px;
|
||||
background: linear-gradient(100deg, var(--akzent-tief), #2f6fa8 55%, var(--violett));
|
||||
border: 0; border-radius: var(--radius-klein);
|
||||
color: #f2f7fc; font: inherit; font-weight: 650; letter-spacing: .02em;
|
||||
cursor: pointer;
|
||||
transition: filter var(--tempo), transform var(--tempo);
|
||||
}
|
||||
.knopf:hover { filter: brightness(1.1); }
|
||||
.knopf:active { transform: scale(.99); }
|
||||
.knopf[disabled] { cursor: progress; filter: saturate(.6) brightness(.85); }
|
||||
|
||||
.knopf__laden {
|
||||
position: absolute; right: 16px; top: 50%; margin-top: -8px;
|
||||
width: 16px; height: 16px; border-radius: 50%;
|
||||
border: 2px solid rgba(255, 255, 255, .35);
|
||||
border-top-color: #fff;
|
||||
opacity: 0;
|
||||
animation: dreh .8s linear infinite;
|
||||
}
|
||||
.knopf[disabled] .knopf__laden { opacity: 1; }
|
||||
@keyframes dreh { to { transform: rotate(360deg); } }
|
||||
|
||||
.fuss {
|
||||
margin: 22px 0 0; padding-top: 16px;
|
||||
border-top: 1px solid var(--rand);
|
||||
font-size: .78rem; color: var(--text-still); text-align: center;
|
||||
}
|
||||
|
||||
/* ---------- Übergang beim erfolgreichen Anmelden ---------------------
|
||||
Die Tafel tritt zurück, das Motiv wird kurz frei - als würde sich das
|
||||
Tor öffnen. Bewusst kurz und ohne Aufblitzen. */
|
||||
|
||||
body.oeffnet .tafel {
|
||||
opacity: 0; transform: translateY(-8px) scale(.985);
|
||||
transition: opacity .26s ease, transform .26s ease;
|
||||
}
|
||||
body.oeffnet .buehne__schleier { opacity: .35; transition: opacity .26s ease; }
|
||||
body.oeffnet .buehne__bild { filter: saturate(1) brightness(1); transition: filter .26s ease; }
|
||||
|
||||
/* ---------- Tastatur-Bedienung --------------------------------------- */
|
||||
|
||||
:where(button, input):focus-visible {
|
||||
outline: 2px solid var(--akzent);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
/* ---------- Schmale oder hohe Fenster --------------------------------
|
||||
Sobald das Fenster nicht mehr deutlich breiter als hoch ist, würde die
|
||||
Tafel den Figuren zu nahe kommen. Dann wechselt die Seite auf das
|
||||
Hochformat-Motiv und die Tafel rückt nach unten - die beiden bleiben
|
||||
oben im Bild sichtbar. */
|
||||
|
||||
/* Gemeinsam: Tafel wandert nach unten, Motiv bleibt darüber frei. */
|
||||
@media (max-width: 899px), (max-aspect-ratio: 7/5) {
|
||||
body.gate { align-items: flex-end; justify-content: center; }
|
||||
.tafel {
|
||||
margin: 0 0 max(18px, env(safe-area-inset-bottom));
|
||||
width: min(520px, calc(100vw - 32px));
|
||||
}
|
||||
.tafel__kante { display: none; }
|
||||
}
|
||||
|
||||
/* Schmale Geräte: Hochformat-Ausschnitt. Die Bildfläche endet oberhalb der
|
||||
Tafel - dadurch liegt ihr Seitenverhältnis nah am Ausschnitt und der
|
||||
Browser muss seitlich kaum etwas wegschneiden. Beide Figuren bleiben ganz
|
||||
im Bild, der Verlauf blendet nach unten ins Dunkle. */
|
||||
@media (max-width: 899px) {
|
||||
.buehne { bottom: auto; height: 66svh; }
|
||||
.buehne__bild { object-position: center top; }
|
||||
.buehne__schleier {
|
||||
background:
|
||||
linear-gradient(180deg,
|
||||
rgba(3, 5, 10, 0.30) 0%,
|
||||
rgba(3, 5, 10, 0.10) 20%,
|
||||
rgba(3, 5, 10, 0.22) 46%,
|
||||
rgba(3, 5, 10, 0.55) 66%,
|
||||
rgba(5, 7, 13, 0.88) 82%,
|
||||
/* Muss vor der Unterkante voll deckend sein und exakt der Seitenfarbe
|
||||
entsprechen - sonst zeichnet sich dort eine feine Kante ab. */
|
||||
rgba(5, 7, 13, 1.00) 94%);
|
||||
}
|
||||
}
|
||||
|
||||
/* Breite, aber hohe Fenster (z. B. 1100x980): Querformat bleibt und füllt die
|
||||
ganze Fläche - sonst entsteht unten eine tote dunkle Zone. Weil hier
|
||||
seitlich beschnitten wird, rückt das Motiv nach rechts, damit Dogfather und
|
||||
Hasi Dog vollständig im Bild bleiben. */
|
||||
@media (min-width: 900px) and (max-aspect-ratio: 7/5) {
|
||||
.buehne__bild { object-position: 82% center; }
|
||||
.buehne__schleier {
|
||||
background:
|
||||
linear-gradient(180deg,
|
||||
rgba(3, 5, 10, 0.12) 0%,
|
||||
rgba(3, 5, 10, 0.20) 34%,
|
||||
rgba(3, 5, 10, 0.48) 56%,
|
||||
rgba(3, 5, 10, 0.82) 74%,
|
||||
rgba(3, 5, 10, 0.95) 90%);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 420px) {
|
||||
.tafel { padding: 22px 18px 20px; border-radius: 16px; }
|
||||
.rolle__zusatz { display: none; }
|
||||
}
|
||||
|
||||
/* ---------- Weniger Bewegung ----------------------------------------- */
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
*, *::before, *::after {
|
||||
animation-duration: .001ms !important;
|
||||
animation-iteration-count: 1 !important;
|
||||
transition-duration: .001ms !important;
|
||||
}
|
||||
.buehne__bild { transform: none; transition: none; }
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 113 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 157 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 69 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 52 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 79 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 30 KiB |
@@ -0,0 +1,155 @@
|
||||
/* ===================================================================
|
||||
Creator Workspace - Anmeldeseite
|
||||
Kein Framework, keine externen Abhängigkeiten.
|
||||
=================================================================== */
|
||||
(() => {
|
||||
'use strict';
|
||||
|
||||
const $ = (id) => document.getElementById(id);
|
||||
const rollen = Array.from(document.querySelectorAll('.rolle'));
|
||||
const formular = $('formular');
|
||||
const code = $('code');
|
||||
const auge = $('auge');
|
||||
const fehler = $('fehler');
|
||||
const hinweis = $('hinweis');
|
||||
const knopf = $('knopf');
|
||||
const fuer = $('fuer');
|
||||
|
||||
const NAMEN = { admin: 'Management', creator: 'Creator', scout: 'Scout' };
|
||||
const SPEICHER = 'dfw.rolle';
|
||||
let gewaehlt = null;
|
||||
|
||||
/* ---------- Rolle wählen ------------------------------------------ */
|
||||
|
||||
function waehle(rolle, fokus = false) {
|
||||
gewaehlt = rolle;
|
||||
rollen.forEach((b) => b.setAttribute('aria-checked', String(b.dataset.rolle === rolle)));
|
||||
fuer.textContent = `· ${NAMEN[rolle]}`;
|
||||
fuer.hidden = false;
|
||||
melde('');
|
||||
try { localStorage.setItem(SPEICHER, rolle); } catch { /* Privater Modus */ }
|
||||
if (fokus) code.focus();
|
||||
}
|
||||
|
||||
rollen.forEach((b) => {
|
||||
b.addEventListener('click', () => waehle(b.dataset.rolle, true));
|
||||
// Pfeiltasten wie bei echten Radio-Feldern
|
||||
b.addEventListener('keydown', (e) => {
|
||||
const i = rollen.indexOf(b);
|
||||
let ziel = null;
|
||||
if (e.key === 'ArrowDown' || e.key === 'ArrowRight') ziel = rollen[(i + 1) % rollen.length];
|
||||
if (e.key === 'ArrowUp' || e.key === 'ArrowLeft') ziel = rollen[(i - 1 + rollen.length) % rollen.length];
|
||||
if (!ziel) return;
|
||||
e.preventDefault();
|
||||
ziel.focus();
|
||||
waehle(ziel.dataset.rolle);
|
||||
});
|
||||
});
|
||||
|
||||
// Zuletzt genutzte Rolle vorauswählen - spart bei täglicher Nutzung einen Klick.
|
||||
try {
|
||||
const zuletzt = localStorage.getItem(SPEICHER);
|
||||
if (zuletzt && NAMEN[zuletzt]) waehle(zuletzt);
|
||||
} catch { /* egal */ }
|
||||
|
||||
/* ---------- Code anzeigen / verbergen ------------------------------ */
|
||||
|
||||
auge.addEventListener('click', () => {
|
||||
const sichtbar = code.type === 'text';
|
||||
code.type = sichtbar ? 'password' : 'text';
|
||||
auge.setAttribute('aria-pressed', String(!sichtbar));
|
||||
auge.setAttribute('aria-label', sichtbar ? 'Code anzeigen' : 'Code verbergen');
|
||||
code.focus();
|
||||
});
|
||||
|
||||
/* ---------- Feststelltaste ----------------------------------------- */
|
||||
|
||||
const pruefeFeststell = (e) => {
|
||||
if (typeof e.getModifierState !== 'function') return;
|
||||
hinweis.hidden = !e.getModifierState('CapsLock');
|
||||
};
|
||||
code.addEventListener('keyup', pruefeFeststell);
|
||||
code.addEventListener('keydown', pruefeFeststell);
|
||||
code.addEventListener('blur', () => { hinweis.hidden = true; });
|
||||
|
||||
/* ---------- Rückmeldung -------------------------------------------- */
|
||||
|
||||
function melde(text) { fehler.textContent = text; }
|
||||
|
||||
function laden(an) {
|
||||
knopf.disabled = an;
|
||||
knopf.querySelector('.knopf__text').textContent = an ? 'Prüfe …' : 'Anmelden';
|
||||
}
|
||||
|
||||
/* ---------- Absenden ------------------------------------------------ */
|
||||
|
||||
formular.addEventListener('submit', async (e) => {
|
||||
e.preventDefault();
|
||||
const wert = code.value.trim();
|
||||
|
||||
if (!gewaehlt) { melde('Bitte zuerst auswählen, womit du dich anmeldest.'); rollen[0].focus(); return; }
|
||||
if (!wert) { melde('Bitte den Zugangscode eingeben.'); code.focus(); return; }
|
||||
|
||||
melde('');
|
||||
laden(true);
|
||||
|
||||
try {
|
||||
const antwort = await fetch('/api/anmelden', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ rolle: gewaehlt, code: wert }),
|
||||
credentials: 'same-origin',
|
||||
});
|
||||
|
||||
if (antwort.ok) {
|
||||
const ziel = (await antwort.json().catch(() => ({}))).weiter || '/workspace';
|
||||
document.body.classList.add('oeffnet');
|
||||
setTimeout(() => { location.assign(ziel); }, 260);
|
||||
return;
|
||||
}
|
||||
|
||||
// 404 heißt: Es gibt noch gar keine Gegenstelle. Das ist derzeit der
|
||||
// Normalfall - die Seite steht schon, der Login-Server wird noch gebaut.
|
||||
// Eine ehrliche Meldung ist hier besser als "Code stimmt nicht".
|
||||
if (antwort.status === 404) {
|
||||
melde('Der Zugang wird gerade eingerichtet – Anmelden ist noch nicht möglich.');
|
||||
return;
|
||||
}
|
||||
|
||||
// Bewusst keine Auskunft darüber, ob Rolle oder Code falsch war.
|
||||
melde(antwort.status === 429
|
||||
? 'Zu viele Versuche. Bitte kurz warten.'
|
||||
: 'Zugangscode stimmt nicht.');
|
||||
code.select();
|
||||
} catch {
|
||||
melde('Keine Verbindung zum Server. Bitte erneut versuchen.');
|
||||
} finally {
|
||||
laden(false);
|
||||
}
|
||||
});
|
||||
|
||||
/* ---------- Sehr dezente Parallaxe ---------------------------------- */
|
||||
|
||||
const ruhig = matchMedia('(prefers-reduced-motion: reduce)');
|
||||
const bild = document.querySelector('.buehne__bild');
|
||||
const grob = matchMedia('(pointer: coarse)');
|
||||
|
||||
if (bild && !ruhig.matches && !grob.matches) {
|
||||
let ziel = { x: 0, y: 0 }, ist = { x: 0, y: 0 }, laeuft = false;
|
||||
|
||||
addEventListener('pointermove', (e) => {
|
||||
ziel.x = (e.clientX / innerWidth - 0.5) * -10; // max. 10 px
|
||||
ziel.y = (e.clientY / innerHeight - 0.5) * -6;
|
||||
if (!laeuft) { laeuft = true; requestAnimationFrame(schritt); }
|
||||
}, { passive: true });
|
||||
|
||||
function schritt() {
|
||||
ist.x += (ziel.x - ist.x) * 0.06;
|
||||
ist.y += (ziel.y - ist.y) * 0.06;
|
||||
bild.style.transform = `scale(1.03) translate3d(${ist.x.toFixed(2)}px, ${ist.y.toFixed(2)}px, 0)`;
|
||||
if (Math.abs(ziel.x - ist.x) > 0.05 || Math.abs(ziel.y - ist.y) > 0.05) {
|
||||
requestAnimationFrame(schritt);
|
||||
} else { laeuft = false; }
|
||||
}
|
||||
}
|
||||
})();
|
||||
@@ -0,0 +1,131 @@
|
||||
<!doctype html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
|
||||
<title>Dogfather Universe · Creator Workspace · Anmeldung</title>
|
||||
<meta name="description" content="Privater Arbeitsbereich für Creator, Scouts und Management." />
|
||||
<meta name="robots" content="noindex, nofollow" />
|
||||
<meta name="theme-color" content="#05070d" />
|
||||
|
||||
<!-- Die Bühne ist der erste Eindruck. Ohne diesen Hinweis lädt der Browser sie erst,
|
||||
nachdem er das CSS gelesen hat - das kostet spürbar Zeit. Quer- und Hochformat
|
||||
sind getrennt, damit das Handy nicht die große Fassung zieht.
|
||||
|
||||
Hier steht bewusst WebP und nicht AVIF, obwohl die AVIF-Fassungen erzeugt
|
||||
werden und rund ein Drittel kleiner wären: Der ausliefernde Server läuft auf
|
||||
Express 4, dessen `send` eine alte MIME-Tabelle ohne AVIF mitbringt. Die
|
||||
Dateien kämen als application/octet-stream an und würden wegen des
|
||||
nosniff-Headers vom Browser verweigert - die Bühne bliebe leer. Sobald der
|
||||
Workspace einen eigenen Server bekommt, kann AVIF wieder eingeschaltet
|
||||
werden (die Dateien liegen bereit). -->
|
||||
<link rel="preload" as="image" href="assets/img/buehne/gate-1600.webp"
|
||||
type="image/webp" media="(min-width: 900px)" />
|
||||
<link rel="preload" as="image" href="assets/img/buehne/gate-hoch-580.webp"
|
||||
type="image/webp" media="(max-width: 899px)" />
|
||||
|
||||
<link rel="icon" href="assets/img/favicon.png" />
|
||||
<link rel="stylesheet" href="assets/css/gate.css" />
|
||||
</head>
|
||||
|
||||
<body class="gate">
|
||||
|
||||
<!-- ---------- Bühne: Bild + Schleier ---------------------------------- -->
|
||||
<div class="buehne" aria-hidden="true">
|
||||
<picture>
|
||||
<source media="(min-width: 900px)" type="image/webp"
|
||||
srcset="assets/img/buehne/gate-960.webp 960w,
|
||||
assets/img/buehne/gate-1280.webp 1280w,
|
||||
assets/img/buehne/gate-1600.webp 1600w" sizes="100vw" />
|
||||
<source type="image/webp"
|
||||
srcset="assets/img/buehne/gate-hoch-440.webp 440w,
|
||||
assets/img/buehne/gate-hoch-580.webp 580w" sizes="100vw" />
|
||||
<img class="buehne__bild" src="assets/img/buehne/gate-1280.webp" alt=""
|
||||
width="1672" height="941" fetchpriority="high" decoding="async" />
|
||||
</picture>
|
||||
<div class="buehne__schleier"></div>
|
||||
</div>
|
||||
|
||||
<!-- ---------- Tafel ---------------------------------------------------- -->
|
||||
<main class="tafel" id="tafel">
|
||||
<div class="tafel__kante" aria-hidden="true"></div>
|
||||
|
||||
<header class="kopf">
|
||||
<p class="marke">Dogfather Universe</p>
|
||||
<h1 class="titel">Creator Workspace</h1>
|
||||
<p class="unterzeile">Privater Bereich für Creator, Scouts und Management.</p>
|
||||
</header>
|
||||
|
||||
<div class="rollen" role="radiogroup" aria-labelledby="rollen-schild">
|
||||
<p class="feldschild" id="rollen-schild">Womit meldest du dich an?</p>
|
||||
|
||||
<button type="button" class="rolle" data-rolle="admin" role="radio" aria-checked="false">
|
||||
<svg class="rolle__zeichen" viewBox="0 0 24 24" aria-hidden="true">
|
||||
<path d="M12 2.6 4.5 5.8v5.6c0 4.6 3.2 8.4 7.5 9.9 4.3-1.5 7.5-5.3 7.5-9.9V5.8L12 2.6Z"/>
|
||||
<path class="strich" d="m8.7 12.1 2.3 2.3 4.3-4.7"/>
|
||||
</svg>
|
||||
<span class="rolle__text">
|
||||
<span class="rolle__name">Management</span>
|
||||
<span class="rolle__zusatz">Gesamtübersicht & Freigaben</span>
|
||||
</span>
|
||||
</button>
|
||||
|
||||
<button type="button" class="rolle" data-rolle="creator" role="radio" aria-checked="false">
|
||||
<svg class="rolle__zeichen" viewBox="0 0 24 24" aria-hidden="true">
|
||||
<path d="M12 12.6a4.3 4.3 0 1 0 0-8.6 4.3 4.3 0 0 0 0 8.6Z"/>
|
||||
<path class="strich" d="M4.4 20.2c.9-3.4 3.9-5.6 7.6-5.6s6.7 2.2 7.6 5.6"/>
|
||||
</svg>
|
||||
<span class="rolle__text">
|
||||
<span class="rolle__name">Creator</span>
|
||||
<span class="rolle__zusatz">Eigener Bereich & Fortschritt</span>
|
||||
</span>
|
||||
</button>
|
||||
|
||||
<button type="button" class="rolle" data-rolle="scout" role="radio" aria-checked="false">
|
||||
<svg class="rolle__zeichen" viewBox="0 0 24 24" aria-hidden="true">
|
||||
<path d="M10.9 17.8a6.9 6.9 0 1 0 0-13.8 6.9 6.9 0 0 0 0 13.8Z"/>
|
||||
<path class="strich" d="m16.1 16.1 4 4"/>
|
||||
</svg>
|
||||
<span class="rolle__text">
|
||||
<span class="rolle__name">Scout</span>
|
||||
<span class="rolle__zusatz">Eigene Pipeline & Kontakte</span>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<form class="formular" id="formular" novalidate>
|
||||
<label class="feldschild" for="code">
|
||||
Persönlicher Zugangscode <span class="fuer" id="fuer" hidden></span>
|
||||
</label>
|
||||
|
||||
<div class="feld">
|
||||
<input type="password" id="code" name="code" inputmode="text"
|
||||
autocomplete="current-password" spellcheck="false"
|
||||
placeholder="Code eingeben" aria-describedby="hinweis fehler" />
|
||||
<button type="button" class="feld__auge" id="auge"
|
||||
aria-label="Code anzeigen" aria-pressed="false">
|
||||
<svg viewBox="0 0 24 24" aria-hidden="true">
|
||||
<path class="strich" d="M2.5 12S6 5.8 12 5.8 21.5 12 21.5 12 18 18.2 12 18.2 2.5 12 2.5 12Z"/>
|
||||
<circle class="strich" cx="12" cy="12" r="2.9"/>
|
||||
<path class="strich durch" d="m4 20 16-16"/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<p class="hinweis" id="hinweis" hidden>Feststelltaste ist aktiv.</p>
|
||||
<p class="fehler" id="fehler" role="alert" aria-live="polite"></p>
|
||||
|
||||
<button type="submit" class="knopf" id="knopf">
|
||||
<span class="knopf__text">Anmelden</span>
|
||||
<span class="knopf__laden" aria-hidden="true"></span>
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<p class="fuss">
|
||||
Verschlüsselte Verbindung · Zugriffe werden protokolliert
|
||||
</p>
|
||||
</main>
|
||||
|
||||
<script src="assets/js/gate.js" defer></script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user