DogFatherGit/vans-diy-bastelbedarf
1
0
Fork 0
Code Issues Pull Requests Actions 3 Packages Projects Releases Wiki Activity

Zugangsseite: Gold durch kräftiges Lila ersetzt (Badge, Kopf-Kiste, VanVan-Fenster)

Browse Source 
Neue Farbvariablen --c-lila/--c-lila-hover (sattes, kräftiges Violett) ersetzen das bisherige
Gold/Gelb überall dort, wo es verwendet wurde: "Noch nicht öffentlich"-Badge, Verlaufsrand der
Kopf-Kiste, sowie komplett das VanVan-Fenster (Rand, Avatar-Glow, Name, Eingabefeld-Fokus,
Button). Gelbes Herz-Emoji im VanVan-Button ebenfalls zu einem violetten Herz gewechselt, damit
nichts mehr gold/gelb übrig bleibt. Dogis Cyan-Fenster bleibt unverändert.

Per Build + Browsertest verifiziert: neue Farbe korrekt angezeigt, Login-Funktion unverändert.
This commit is contained in:
qcigano
2026-08-04 17:25:56 +02:00
parent 8d0d6702da
commit f56621ac77
1 changed files with 19 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/gate.html
+19 -15
View File
@@ -16,8 +16,12 @@
--c-accent: #5fd3ec; --c-accent: #5fd3ec;
--c-accent-hover: #3ca9c2; --c-accent-hover: #3ca9c2;
--c-purple-glow: #9b7fd6; --c-purple-glow: #9b7fd6;
--c-gold: #e3b23c; /* 04.08.2026, auf ausdrücklichen Wunsch ("geiles spezielles lila"): ersetzt das vorherige
--c-gold-hover: #c99527; Gold/Gelb (VanVan-Fenster + Badge/Kopf-Kiste) durch ein kräftigeres, sattes Violett — im
Gegensatz zu --c-purple-glow (heller, für Verlaufsränder/Deko gedacht) hier bewusst
satter/dunkler gewählt, damit Text/Buttons in Vollfarbe genug Kontrast und "Wumms" haben. */
--c-lila: #a875f5;
--c-lila-hover: #7c3aed;
--radius-l: 22px; --radius-l: 22px;
--radius-m: 16px; --radius-m: 16px;
--ease: cubic-bezier(0.22, 1, 0.36, 1); --ease: cubic-bezier(0.22, 1, 0.36, 1);
@@ -92,7 +96,7 @@
qciga, eins für VanVan — im Stil einer anderen, bereits bestehenden Zwei-Personen-Zugangsseite, qciga, eins für VanVan — im Stil einer anderen, bereits bestehenden Zwei-Personen-Zugangsseite,
aber komplett an Van's eigene Marke angepasst (Farben/Schrift/Wasserzeichen unverändert, siehe aber komplett an Van's eigene Marke angepasst (Farben/Schrift/Wasserzeichen unverändert, siehe
Branding.md: kein Babyblau/Rot-Look von anderen Projekten, sondern die eigene Lila/Anthrazit/ Branding.md: kein Babyblau/Rot-Look von anderen Projekten, sondern die eigene Lila/Anthrazit/
Hellblau/Gold-Welt). Technisch ändert sich nichts: /gate-auth erkennt die Rolle ohnehin selbst Hellblau/Lila-Welt). Technisch ändert sich nichts: /gate-auth erkennt die Rolle ohnehin selbst
anhand DES CODES, nicht danach, welches Fenster benutzt wurde — die Aufteilung ist rein dafür anhand DES CODES, nicht danach, welches Fenster benutzt wurde — die Aufteilung ist rein dafür
da, dass jede/r sofort das eigene Feld findet, statt raten zu müssen. */ da, dass jede/r sofort das eigene Feld findet, statt raten zu müssen. */
.gate-wrap { .gate-wrap {
@@ -115,7 +119,7 @@
border: 1.5px solid transparent; border: 1.5px solid transparent;
background: background:
linear-gradient(165deg, var(--c-anthracite-light), var(--c-anthracite)) padding-box, linear-gradient(165deg, var(--c-anthracite-light), var(--c-anthracite)) padding-box,
linear-gradient(120deg, var(--c-accent), var(--c-purple-glow), var(--c-gold), var(--c-accent)) border-box; linear-gradient(120deg, var(--c-accent), var(--c-purple-glow), var(--c-lila), var(--c-accent)) border-box;
background-size: 100% 100%, 300% 100%; background-size: 100% 100%, 300% 100%;
animation: gate-border-shift 9s ease-in-out infinite; animation: gate-border-shift 9s ease-in-out infinite;
box-shadow: 0 20px 50px -20px rgba(0, 0, 0, 0.7); box-shadow: 0 20px 50px -20px rgba(0, 0, 0, 0.7);
@@ -141,9 +145,9 @@
font-weight: 700; font-weight: 700;
letter-spacing: 0.06em; letter-spacing: 0.06em;
text-transform: uppercase; text-transform: uppercase;
color: var(--c-gold); color: var(--c-lila);
background: color-mix(in srgb, var(--c-gold) 16%, transparent); background: color-mix(in srgb, var(--c-lila) 16%, transparent);
border: 1px solid color-mix(in srgb, var(--c-gold) 40%, transparent); border: 1px solid color-mix(in srgb, var(--c-lila) 40%, transparent);
border-radius: 999px; border-radius: 999px;
padding: 0.3rem 0.9rem; padding: 0.3rem 0.9rem;
margin-bottom: 1rem; margin-bottom: 1rem;
@@ -187,7 +191,7 @@
.gate-card-vanvan { .gate-card-vanvan {
background: background:
linear-gradient(165deg, var(--c-anthracite-light), var(--c-anthracite)) padding-box, linear-gradient(165deg, var(--c-anthracite-light), var(--c-anthracite)) padding-box,
linear-gradient(120deg, var(--c-gold), var(--c-purple-glow), var(--c-accent), var(--c-gold)) border-box; linear-gradient(120deg, var(--c-lila), var(--c-purple-glow), var(--c-accent), var(--c-lila)) border-box;
} }
@keyframes gate-border-shift { @keyframes gate-border-shift {
0%, 100% { background-position: 0 0, 0% 50%; } 0%, 100% { background-position: 0 0, 0% 50%; }
@@ -233,7 +237,7 @@
animation: gate-avatar-pulse 3.2s ease-in-out infinite; animation: gate-avatar-pulse 3.2s ease-in-out infinite;
} }
.gate-card-qciga .gate-avatar-glow { background: radial-gradient(circle, color-mix(in srgb, var(--c-accent) 70%, transparent), transparent 72%); } .gate-card-qciga .gate-avatar-glow { background: radial-gradient(circle, color-mix(in srgb, var(--c-accent) 70%, transparent), transparent 72%); }
.gate-card-vanvan .gate-avatar-glow { background: radial-gradient(circle, color-mix(in srgb, var(--c-gold) 70%, transparent), transparent 72%); } .gate-card-vanvan .gate-avatar-glow { background: radial-gradient(circle, color-mix(in srgb, var(--c-lila) 70%, transparent), transparent 72%); }
@keyframes gate-avatar-pulse { @keyframes gate-avatar-pulse {
0%, 100% { opacity: 0.45; transform: scale(1); } 0%, 100% { opacity: 0.45; transform: scale(1); }
50% { opacity: 0.85; transform: scale(1.12); } 50% { opacity: 0.85; transform: scale(1.12); }
@@ -254,7 +258,7 @@
.gate-card-qciga .gate-avatar-photo, .gate-card-qciga .gate-avatar-photo,
.gate-card-qciga .gate-avatar-icon { box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-accent) 50%, transparent), 0 10px 26px -10px rgba(0, 0, 0, 0.7); } .gate-card-qciga .gate-avatar-icon { box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-accent) 50%, transparent), 0 10px 26px -10px rgba(0, 0, 0, 0.7); }
.gate-card-vanvan .gate-avatar-photo, .gate-card-vanvan .gate-avatar-photo,
.gate-card-vanvan .gate-avatar-icon { box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-gold) 50%, transparent), 0 10px 26px -10px rgba(0, 0, 0, 0.7); } .gate-card-vanvan .gate-avatar-icon { box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-lila) 50%, transparent), 0 10px 26px -10px rgba(0, 0, 0, 0.7); }
.gate-avatar-icon { font-size: 2.1rem; } .gate-avatar-icon { font-size: 2.1rem; }
.gate-card h2 { .gate-card h2 {
@@ -264,7 +268,7 @@
margin: 0 0 1.1rem; margin: 0 0 1.1rem;
} }
.gate-card-qciga h2 { color: var(--c-accent); } .gate-card-qciga h2 { color: var(--c-accent); }
.gate-card-vanvan h2 { color: var(--c-gold); } .gate-card-vanvan h2 { color: var(--c-lila); }
.gate-card input { .gate-card input {
width: 100%; width: 100%;
@@ -280,7 +284,7 @@
font-family: inherit; font-family: inherit;
} }
.gate-card-qciga 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-card-qciga 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-card-vanvan input:focus { outline: none; border-color: var(--c-gold); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-gold) 25%, transparent); } .gate-card-vanvan input:focus { outline: none; border-color: var(--c-lila); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-lila) 25%, transparent); }
.gate-card button { .gate-card button {
width: 100%; width: 100%;
@@ -294,8 +298,8 @@
} }
.gate-card-qciga button { background: linear-gradient(120deg, var(--c-accent), var(--c-accent-hover)); color: var(--c-black); } .gate-card-qciga button { background: linear-gradient(120deg, var(--c-accent), var(--c-accent-hover)); color: var(--c-black); }
.gate-card-qciga button:hover { transform: translateY(-2px); box-shadow: 0 10px 24px -10px color-mix(in srgb, var(--c-accent) 60%, transparent); } .gate-card-qciga button:hover { transform: translateY(-2px); box-shadow: 0 10px 24px -10px color-mix(in srgb, var(--c-accent) 60%, transparent); }
.gate-card-vanvan button { background: linear-gradient(120deg, var(--c-gold), var(--c-gold-hover)); color: var(--c-black); } .gate-card-vanvan button { background: linear-gradient(120deg, var(--c-lila), var(--c-lila-hover)); color: var(--c-black); }
.gate-card-vanvan button:hover { transform: translateY(-2px); box-shadow: 0 10px 24px -10px color-mix(in srgb, var(--c-gold) 60%, transparent); } .gate-card-vanvan button:hover { transform: translateY(-2px); box-shadow: 0 10px 24px -10px color-mix(in srgb, var(--c-lila) 60%, transparent); }
.gate-fehler { .gate-fehler {
color: #ff9a9a; color: #ff9a9a;
@@ -337,7 +341,7 @@
<form class="gate-form" data-role="vanvan"> <form class="gate-form" data-role="vanvan">
<label class="sr-only" for="gate-code-vanvan">Zugangscode für VanVan</label> <label class="sr-only" for="gate-code-vanvan">Zugangscode für VanVan</label>
<input type="text" id="gate-code-vanvan" placeholder="Zugangscode" autocomplete="off" autocapitalize="off" spellcheck="false" /> <input type="text" id="gate-code-vanvan" placeholder="Zugangscode" autocomplete="off" autocapitalize="off" spellcheck="false" />
<button type="submit">💛 Öffnen</button> <button type="submit">💜 Öffnen</button>
</form> </form>
<p class="gate-fehler" data-fehler-for="vanvan" role="alert" aria-live="assertive"></p> <p class="gate-fehler" data-fehler-for="vanvan" role="alert" aria-live="assertive"></p>
</div> </div>