DogiCrew-Registrierung: "Coming Soon"-Sperre + Bald-Badge im Nav-Knopf

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 <[email protected]>
2026-08-20 10:51:34 +02:00
parent 0223fcf9cd
commit 5cd473e71a
3 changed files with 166 additions and 4 deletions
@@ -320,7 +320,23 @@
            <label for="reg-email" data-i18n="ab_feld_email">E-Mail-Adresse</label>
            <input type="email" id="reg-email" maxlength="120" />
          </div>
-          <button type="button" class="btn btn-primary" style="width:100%;" id="btn-register" data-i18n="ab_btn_register">Registrieren</button>
+          <!-- Bugfix/Nutzer-Wunsch 20.08.2026: Die DogiCrew-Registrierung ist
+               technisch fertig, aber ohne Dogis echte PayPal-Business-Zugangsdaten
+               kann niemand wirklich zahlen (siehe DogFather Website - Offene
+               Punkte.md). Bis die stehen: Knopf bleibt sichtbar (Teaser, "soll
+               alles bleiben"), aber NICHT bedienbar — natives disabled-Attribut
+               (nicht nur optisch/pointer-events, damit es auch für Tastatur/
+               Screenreader korrekt gesperrt ist). main.js hängt weiterhin
+               unverändert einen Klick-Listener an dieselbe ID — disabled-Buttons
+               feuern in allen Browsern keine Click-Events, daher hier bewusst
+               KEINE JS-Änderung nötig. Eigener Gold/Schloss-Stil (.btn-gold-locked,
+               siehe main.css) statt des generischen .btn-silver, der auf dieser
+               Seite schon für die Teddy-Kollektion vergeben ist. -->
+          <button type="button" class="btn-gold-locked" style="width:100%;margin-top:.2rem;" id="btn-register"
+                  disabled aria-disabled="true">
+            <span class="btn-gold-locked-lock" aria-hidden="true">🔒</span>
+            <span class="btn-gold-locked-text" data-i18n="ab_kollektion_coming_soon">Coming soon…</span>
+          </button>
          <p class="abo-fehler" id="register-fehler"></p>
          <p class="abo-switch"><a id="switch-to-login" data-i18n="ab_switch_login">Schon Supporter? Hier einloggen</a></p>
        </div>
@@ -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 <button>
+   (siehe abonnieren.html), nicht über pointer-events, damit auch
+   Tastatur-/Screenreader-Nutzung korrekt "nicht bedienbar" meldet. Bewusst
+   KEIN :hover-Zustand (keine Lift-Animation wie bei .btn-silver/
+   .btn-legendary) — soll nicht so wirken, als wäre er doch klickbar. */
+.btn-gold-locked {
+  position: relative;
+  isolation: isolate;
+  overflow: hidden;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: .65rem;
+  padding: 1rem 1.4rem;
+  border-radius: 14px;
+  font-weight: 800;
+  font-size: 1.04rem;
+  letter-spacing: .02em;
+  border: 1.5px solid transparent;
+  background:
+    linear-gradient(160deg, #1c1710, #0b0e14 55%, #211a0d) padding-box,
+    linear-gradient(120deg, #d4af37, #ffe9a8, #b8912b, #fff2c9, #d4af37) border-box;
+  background-size: 100% 100%, 260% 100%;
+  cursor: not-allowed;
+  animation: btn-gold-locked-border-shine 6s ease-in-out infinite, btn-gold-locked-halo 3s ease-in-out infinite;
+  box-shadow: 0 8px 22px rgba(0, 0, 0, .45), 0 0 0 1px rgba(212, 175, 55, .08) inset;
+}
+.btn-gold-locked-lock {
+  position: relative;
+  z-index: 2;
+  display: inline-block;
+  font-size: 1.05em;
+  filter: drop-shadow(0 0 6px rgba(255, 214, 102, .85));
+  animation: btn-gold-locked-pulse 2.2s ease-in-out infinite;
+}
+.btn-gold-locked-text {
+  position: relative;
+  z-index: 2;
+  background: linear-gradient(100deg, #ffe9a8 0%, #ffffff 24%, #d4af37 42%, #ffe9a8 60%, #ffffff 78%, #d4af37 100%);
+  background-size: 260% 100%;
+  -webkit-background-clip: text;
+  background-clip: text;
+  color: transparent;
+  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .6));
+  animation: btn-silver-text-shine 3.6s linear infinite; /* bestehendes Keyframe wiederverwendet */
+}
+.btn-gold-locked::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  z-index: 1;
+  border-radius: inherit;
+  background: linear-gradient(115deg, transparent 32%, rgba(255, 233, 168, .5) 49%, transparent 66%);
+  background-size: 240% 100%;
+  mix-blend-mode: overlay;
+  animation: nav-cta-shimmer 4s linear infinite; /* bestehendes Keyframe wiederverwendet */
+  pointer-events: none;
+}
+@keyframes btn-gold-locked-border-shine {
+  0%, 100% { background-position: 0 0, 0% 50%; }
+  50% { background-position: 0 0, 100% 50%; }
+}
+@keyframes btn-gold-locked-pulse {
+  0%, 100% { opacity: .7; transform: scale(.92) rotate(-4deg); }
+  50% { opacity: 1; transform: scale(1.12) rotate(4deg); }
+}
+@keyframes btn-gold-locked-halo {
+  0%, 100% { box-shadow: 0 8px 22px rgba(0, 0, 0, .45), 0 0 16px rgba(212, 175, 55, .22); }
+  50% { box-shadow: 0 8px 22px rgba(0, 0, 0, .45), 0 0 32px rgba(255, 214, 102, .45); }
+}
+@media (prefers-reduced-motion: reduce) {
+  .btn-gold-locked, .btn-gold-locked::after,
+  .btn-gold-locked-text, .btn-gold-locked-lock {
+    animation: none;
+  }
+}
+
 /* =====================================================================
   .btn-holo — zweiter "Mega"-Button-Stil, bewusst MECHANISCH anders als
   .btn-legendary/.btn-silver/.btn-tiktok (die alle nach demselben Muster
@@ -104,6 +104,11 @@
    nav_cta_abo_anonym: { de: "DogiCrew 👑", "de-CH": "DogiCrew 👑", en: "DogiCrew 👑", fr: "DogiCrew 👑", pt: "DogiCrew 👑" },
    nav_cta_abo_aktivieren: { de: "Abo aktivieren 👑", "de-CH": "Abo aktiviere 👑", en: "Activate Subscription 👑", fr: "Activer l'abonnement 👑", pt: "Ativar assinatura 👑" },
    nav_cta_abo_bereich: { de: "Supporter-Bereich 👑", "de-CH": "Supporter-Bereich 👑", en: "Supporter Area 👑", fr: "Espace Supporter 👑", pt: "Área do Apoiador 👑" },
+    /* Kleines Schimmer-Badge auf dem Abo-Knopf, solange die Registrierung
+       noch gesperrt ist (20.08.2026, Nutzer-Wunsch) — bewusst ein kurzes
+       Wort statt "Coming soon…", weil in der schmalen Nav-Pille (siehe
+       Mobil-Menü-Fix vom selben Tag) kaum Platz ist. */
+    nav_cta_abo_soon: { de: "Bald", "de-CH": "Bald", en: "Soon", fr: "Bientôt", pt: "Em breve" },
    nav_toggle_aria: { de: "Menü öffnen", "de-CH": "Menü uftue", en: "Open menu", fr: "Ouvrir le menu", pt: "Abrir menu" },
    sprache_aria: { de: "Sprache wählen", "de-CH": "Sprach uswähle", en: "Choose language", fr: "Choisir la langue", pt: "Escolher idioma" },
    brand_tagline: {
@@ -454,6 +459,17 @@
    return `${escapeHtml(kuerzen(sauber, 18))} 👑`;
  }

+  /* Kleines Schimmer-Badge "Bald", solange die eigentliche Registrierung auf
+     abonnieren.html gesperrt ist (20.08.2026, siehe .btn-gold-locked dort).
+     Nur auf den drei Zielen, die dort ankommen — NICHT auf supporter.html
+     (echter, bereits funktionierender Bereich für Dogi/VanVan als Test-
+     Supporter), sonst würde es fälschlich so wirken, als sei der ganze
+     Supporter-Bereich gesperrt. Reine Wiederverwendung von .btn-silver-text/
+     -spark (siehe main.css) in kleinerem Maßstab, kein neuer Mechanismus. */
+  function soonBadge() {
+    return `<span class="nav-cta-soon"><span class="btn-silver-spark" aria-hidden="true">✨</span><span class="btn-silver-text">${t("nav_cta_abo_soon")}</span></span>`;
+  }
+
  function renderAboButton() {
    const vorschau = getVorschauModus();
    if (vorschau === "abonnent") {
@@ -469,20 +485,20 @@
      return `<a class="nav-cta nav-cta-abo" href="supporter.html"><span>${bereichLabel(echterName || vorschauAnzeigename())}</span></a>`;
    }
    if (vorschau === "nicht-abonnent") {
-      return `<a class="nav-cta nav-cta-abo" href="abonnieren.html"><span>${t("nav_cta_abo_anonym")}</span></a>`;
+      return `<a class="nav-cta nav-cta-abo" href="abonnieren.html"><span>${t("nav_cta_abo_anonym")}</span>${soonBadge()}</a>`;
    }

    const token = localStorage.getItem("supporterToken");
    const status = localStorage.getItem("supporterSubStatus");
    if (!token) {
-      return `<a class="nav-cta nav-cta-abo" href="abonnieren.html"><span>${t("nav_cta_abo_anonym")}</span></a>`;
+      return `<a class="nav-cta nav-cta-abo" href="abonnieren.html"><span>${t("nav_cta_abo_anonym")}</span>${soonBadge()}</a>`;
    }
    const hatBereich = ["active", "pending", "suspended", "cancelled"].includes(status);
    if (hatBereich) {
      const name = localStorage.getItem("supporterDisplayName");
      return `<a class="nav-cta nav-cta-abo" href="supporter.html"><span>${bereichLabel(name)}</span></a>`;
    }
-    return `<a class="nav-cta nav-cta-abo" href="abonnieren.html"><span>${t("nav_cta_abo_aktivieren")}</span></a>`;
+    return `<a class="nav-cta nav-cta-abo" href="abonnieren.html"><span>${t("nav_cta_abo_aktivieren")}</span>${soonBadge()}</a>`;
  }

  function renderHeader() {