From 5cd473e71a0506a50daca3b217332125ce24d003 Mon Sep 17 00:00:00 2001 From: Dogfather Date: Thu, 20 Aug 2026 10:51:34 +0200 Subject: [PATCH] DogiCrew-Registrierung: "Coming Soon"-Sperre + Bald-Badge im Nav-Knopf MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Nutzer-Wunsch 20.08.2026: DogiCrew ist "das geilste Bonus" -- der Registrieren- Knopf soll noch nicht bedienbar sein (Dogis PayPal-Business-Zugangsdaten fehlen noch, siehe DogFather Website - Offene Punkte.md), aber Besucher sollen ueber den Nav-Knopf trotzdem ganz normal auf die Seite kommen und die Vorschau sehen duerfen -- "soll alles bleiben" ausser dem einen Knopf. - Nav-Knopf (DogiCrew/Abo aktivieren, main.js renderAboButton): neues kleines Schimmer-Badge "Bald" direkt in der Pille (main.css .nav-cta-soon, reine Wiederverwendung von .btn-silver-text/-spark in kleinerem Massstab). Nur auf den drei Zielen, die zur (noch gesperrten) Registrierung fuehren -- NICHT auf supporter.html, das ist der echte, bereits funktionierende Bereich fuer Dogi/VanVan als Test-Supporter. - abonnieren.html: Registrieren-Knopf ersetzt durch neue .btn-gold-locked- Komponente -- eigener Gold/Schloss-Stil (nicht das schon anderswo auf dieser Seite vergebene .btn-silver), natives disabled-Attribut (kein JS noetig, disabled-Buttons feuern keine Click-Events -- der bestehende Listener bleibt unveraendert und inert). Formularfelder bleiben normal ausfuellbar (Teaser), nur der Absende-Knopf ist gesperrt. Bug waehrend der Umsetzung gefunden UND behoben, nicht nur uebersehen: die rotierende Conic-Gradient-Randmaske von .btn-silver/.btn-legendary (copy-paste als erster Versuch) verzieht sich auf diesem sehr langgestreckten 100%-Breite- Knopf zu einer krummen Schlaufe -- exakt die dokumentierte Lektion in Projektregeln.md Punkt 14 (03.08.2026, TikTok-Button-Bug), die beim ersten Entwurf übersehen wurde. Per Playwright-Screenshots über mehrere Animations- Frames nachgewiesen (nicht nur vermutet) und auch am bereits LIVE laufenden .btn-silver auf dieser Seite reproduziert, um auszuschliessen, dass es an der neuen Komponente statt an der Technik selbst liegt. Fix: derselbe sichere Zwei-Layer-Background-Trick wie bei .abo-google-frame (gleiche Datei) -- Bewegung nur ueber background-position, bleibt geometrieunabhaengig exakt an der Kontur. Nach dem Fix erneut ueber mehrere Frames verifiziert, sauber. Co-Authored-By: Claude Opus 5 --- abonnieren.html | 18 +++++- assets/css/main.css | 130 ++++++++++++++++++++++++++++++++++++++++++++ assets/js/main.js | 22 +++++++- 3 files changed, 166 insertions(+), 4 deletions(-) diff --git a/abonnieren.html b/abonnieren.html index eb246504..ef3ccb83 100644 --- a/abonnieren.html +++ b/abonnieren.html @@ -320,7 +320,23 @@ - + +

Schon Supporter? Hier einloggen

diff --git a/assets/css/main.css b/assets/css/main.css index 04591275..f26a1703 100644 --- a/assets/css/main.css +++ b/assets/css/main.css @@ -613,6 +613,34 @@ header.site-header { 0 0 22px rgba(143, 217, 234, .35), 0 0 22px rgba(139, 92, 246, .3); } +/* "Bald"-Badge auf dem Abo-Knopf, solange die Registrierung auf + abonnieren.html gesperrt ist (20.08.2026, siehe .btn-gold-locked weiter + unten + main.js renderAboButton/soonBadge). Sitzt als zweites Kind IN + der Pille (nicht als eigenes Nav-Element), bleibt dadurch Teil desselben + Klicks — der Knopf führt bewusst weiterhin ganz normal zu abonnieren.html, + nur die Registrierung selbst dort ist gesperrt. Bewusst neutral-silbern + (Wiederverwendung von .btn-silver-text/-spark, nur kleiner skaliert) + statt Gold, damit es nicht mit der babyblau/lila-Aurora dieser Pille + konkurriert — reine Status-Markierung, kein zweiter Marken-Akzent. */ +.nav-cta-soon { + position: relative; + z-index: 2; + display: inline-flex; + align-items: center; + gap: .22rem; + margin-left: .5rem; + padding: .15rem .5rem; + border-radius: 999px; + font-size: .64rem; + font-weight: 800; + letter-spacing: .04em; + text-transform: uppercase; + background: rgba(255, 255, 255, .07); + border: 1px solid rgba(255, 255, 255, .3); + box-shadow: 0 0 10px rgba(230, 235, 242, .3); + flex-shrink: 0; +} +.nav-cta-soon .btn-silver-spark { font-size: .85em; } @media (prefers-reduced-motion: reduce) { .nav-cta::before, .nav-cta::after { animation: none; } } @@ -937,6 +965,108 @@ header.site-header { } } +/* ===================================================================== + "Gesperrter Tresor"-Knopf für den DogiCrew-Registrieren-Knopf + (abonnieren.html, 20.08.2026, Nutzer-Wunsch: "richtig krank übertrieben + geiles... weil es wird ja das geilste Bonus und überhaupt so von mir"). + Bewusst KEINE Wiederverwendung von .btn-silver — der ist neutral-grau und + auf DIESER Seite bereits für die Teddy-Kollektion (Nebensache) vergeben. + Chrome-Text-Clip-Schimmer + Schimmer-Sweep + Halo-Puls wie .btn-silver/ + .btn-legendary, aber in den ECHTEN Gold-Tönen dieser Seite + (#ffe9a8/#d4af37, siehe .abo-panel .btn) und mit einem pulsierenden + Schloss statt Sternen, damit die Haupt-CTA sichtbar "das Besondere, + noch verschlossene" bleibt statt nur "irgendwann verfügbar". + WICHTIG: Für den Rand bewusst NICHT die rotierende Conic-Gradient-Maske + von .btn-silver/.btn-legendary kopiert — dieser Knopf läuft über + `width:100%` auf voller Kartenbreite (~440px) bei nur ~62px Höhe, also + ein sehr langgestrecktes Rechteck. Genau für diesen Fall ist die + dokumentierte Lektion in Projektregeln.md Punkt 14 gedacht (03.08.2026, + "TikTok-Button-Bug"): ein rotierendes maskiertes Pseudo-Element verzieht + sich auf länglichen Formen zu einer krummen Schlaufe, weil ein Rechteck + beim Rotieren nicht rotationssymmetrisch ist — live mit Playwright- + Screenshots über mehrere Frames nachgewiesen (die Schlaufe ist der + rotierende Rand bei verschiedenen Winkeln). Stattdessen derselbe sichere + Zwei-Layer-Background-Trick wie bei .abo-google-frame weiter oben in + dieser Datei (Füllung padding-box + Verlauf border-box, Bewegung nur + über background-position) — bleibt geometrisch exakt an der Kontur, + unabhängig vom Seitenverhältnis. Reine Deko/Statusanzeige — echte + Deaktivierung läuft über das native disabled-Attribut am