From 5d0ea115702154b88e65f865af2763aff717129e Mon Sep 17 00:00:00 2001 From: Dogfather Date: Fri, 21 Aug 2026 17:35:14 +0200 Subject: [PATCH] Arbeit der parallelen Session in git gesichert (war nur auf dem Server) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Diese Änderungen liefen bereits live auf dem Server, lagen dort aber ausschließlich als nicht eingecheckte Arbeitskopie — bei jedem Deploy (stash/pull/pop) und bei jedem Serverproblem wären sie verloren gewesen. Deshalb hier unverändert in git übernommen, bevor darauf aufgebaut wird. Enthalten (nicht von mir gebaut, nur gesichert): - Supporter: eigener fester Zugangscode statt Einmalcode-Login (Migration 0009, lib/crypto.js scrypt-Hash, routes/supporter.js, abonnieren.html, supporter.html, i18n-abonnieren/-supporter) - Stimmen: Profilbilder (Migration 0010, routes/testimonials.js) - Event-Bild-Upload: voller Pfad statt relativem (routes/events.js) - Neue/überarbeitete Hintergrundbilder für viele Seiten - Teilen-Funktion (streamplan.js, i18n-index/-streamplan, main.css) Co-Authored-By: Claude Opus 5 --- abonnieren.html | 370 ++++++++++++++---- assets/css/main.css | 6 + assets/img/bg-abonnieren-mobile.jpg | Bin 357675 -> 493229 bytes assets/img/bg-abonnieren.jpg | Bin 357675 -> 493229 bytes assets/img/bg-bewerben-creator-mobile.jpg | Bin 326132 -> 423286 bytes assets/img/bg-bewerben-creator.jpg | Bin 326132 -> 423286 bytes assets/img/bg-bewerben-mobile.jpg | Bin 308687 -> 357005 bytes assets/img/bg-bewerben-split-mobile.jpg | Bin 195282 -> 252225 bytes assets/img/bg-bewerben-split.jpg | Bin 367790 -> 470131 bytes assets/img/bg-bewerben.jpg | Bin 308687 -> 357005 bytes assets/img/bg-casper-mobile.jpg | Bin 148194 -> 198050 bytes assets/img/bg-casper.jpg | Bin 305943 -> 409712 bytes assets/img/bg-community-mobile.jpg | Bin 352168 -> 412386 bytes assets/img/bg-community.jpg | Bin 352168 -> 412386 bytes assets/img/bg-creator-mobile.jpg | Bin 63316 -> 88836 bytes assets/img/bg-creator.jpg | Bin 185616 -> 227615 bytes assets/img/bg-dogfather-mobile.jpg | Bin 192089 -> 590169 bytes assets/img/bg-dogfather-person-mobile.jpg | Bin 105524 -> 142806 bytes assets/img/bg-dogfather-person.jpg | Bin 317385 -> 384319 bytes assets/img/bg-dogfather.jpg | Bin 425101 -> 590169 bytes assets/img/bg-hasidog-mobile.jpg | Bin 144662 -> 195487 bytes assets/img/bg-hasidog.jpg | Bin 301718 -> 404996 bytes assets/img/bg-links-mobile.jpg | Bin 468529 -> 429223 bytes assets/img/bg-links.jpg | Bin 468529 -> 429223 bytes assets/img/bg-manager-mobile.jpg | Bin 44925 -> 58416 bytes assets/img/bg-manager.jpg | Bin 93657 -> 126707 bytes assets/img/bg-scouts-mobile.jpg | Bin 91811 -> 124432 bytes assets/img/bg-scouts.jpg | Bin 205666 -> 275387 bytes assets/img/bg-stimmen-mobile.jpg | Bin 68857 -> 95493 bytes assets/img/bg-stimmen.jpg | Bin 176844 -> 243122 bytes assets/img/bg-streamer-mobile.jpg | Bin 98392 -> 118626 bytes assets/img/bg-streamer.jpg | Bin 249405 -> 283034 bytes assets/img/bg-streamplan-mobile.jpg | Bin 107573 -> 124515 bytes assets/img/bg-streamplan.jpg | Bin 267523 -> 307518 bytes assets/img/bg-tt-muddi.jpg | Bin 418189 -> 488498 bytes assets/img/bg-vanvan-mobile.jpg | Bin 113659 -> 147587 bytes assets/img/bg-vanvan.jpg | Bin 244370 -> 320970 bytes assets/img/bg-werte-mobile.jpg | Bin 67455 -> 86983 bytes assets/img/bg-werte.jpg | Bin 154129 -> 210336 bytes assets/img/bg-zeitreise-mobile.jpg | Bin 137082 -> 185562 bytes assets/img/bg-zeitreise.jpg | Bin 264374 -> 357480 bytes assets/img/team-dogi-bg-mobile.jpg | Bin 280266 -> 364435 bytes assets/img/team-dogi-bg.jpg | Bin 520204 -> 364435 bytes assets/js/i18n-abonnieren.js | 71 +++- assets/js/i18n-index.js | 4 + assets/js/i18n-streamplan.js | 4 + assets/js/i18n-supporter.js | 11 + assets/js/main.js | 65 ++- assets/js/streamplan.js | 21 + bewerben-modi.html | 4 +- bewerben-scout.html | 4 +- .../migrations/0009_supporter_access_code.sql | 27 ++ .../migrations/0010_testimonials_avatar.sql | 23 ++ links.html | 4 +- medien-casper.html | 4 +- medien-hasidog.html | 4 +- server-internal/db.js | 2 + server-internal/index.js | 25 ++ server-internal/lib/crypto.js | 54 +++ server-internal/lib/supporter-mail.js | 21 + server-internal/routes/events.js | 15 +- server-internal/routes/supporter.js | 147 ++++++- server-internal/routes/testimonials.js | 62 ++- supporter.html | 179 ++++++++- team-modis.html | 4 +- 65 files changed, 992 insertions(+), 139 deletions(-) create mode 100644 cloudflare-worker/migrations/0009_supporter_access_code.sql create mode 100644 cloudflare-worker/migrations/0010_testimonials_avatar.sql diff --git a/abonnieren.html b/abonnieren.html index 3218959d..3d36e715 100644 --- a/abonnieren.html +++ b/abonnieren.html @@ -216,6 +216,104 @@ .abo-switch a { color: var(--accent); cursor: pointer; font-weight: 600; } .abo-switch a:hover { text-decoration: underline; } + /* Registrieren/Einloggen-Umschalter (21.08.2026, Nutzer-Wunsch: "die + sollen dann sofort immer den anmelde knopf auswählen können") — zwei + Segmente in einer Pille, aktiver Tab in Gold hervorgehoben, damit die + Wahl sofort ins Auge fällt, noch bevor überhaupt ein Formularfeld zu + sehen ist. Augenschonend: kein grelles Weiß, ruhiger Farbwechsel. */ + /* ===================================================================== + Aktionsleiste (21.08.2026) — EIN Element für beide Wege, statt vorher + doppeltem "Registrieren" (Umschalter oben + Knopf unten). Links die + eigentliche Aktion in Gold (unverändert im bestehenden Marken-Look), + rechts der Wechsel in Babyblau — der zweiten Hausfarbe der Seite + (theme-dogfather.css). Beide Hälften nutzen dieselbe Technik wie die + bestehenden Gold-Knöpfe (wandernder Verlauf per background-position + + ein durchlaufender Glanzstreifen als ::after) — dadurch wirken sie wie + ein zusammengehöriges Paar statt wie zwei fremde Knöpfe. + Augenschonend (Projektregel): kein Blinken/Flackern, nur ruhig + wandernde Verläufe, und bei prefers-reduced-motion steht alles still. + ===================================================================== */ + .abo-aktionsleiste { + display: flex; gap: .6rem; margin-top: .4rem; + } + /* flex-basis "auto" statt "0": jede Hälfte startet bei ihrer eigenen + Textbreite und wächst dann anteilig mit. Dadurch bekommt automatisch + die Seite mit dem längeren Text mehr Platz — egal ob das gerade links + ("Login-Code anfordern") oder rechts ("Schon registriert? Einloggen") + ist. Mit fester 0-Basis wären beide exakt gleich breit gewesen und der + jeweils längere Text wäre auf zwei Zeilen umgebrochen. */ + .abo-aktionsleiste > button { + position: relative; isolation: isolate; overflow: hidden; + flex: 1 1 auto; min-width: 0; + display: flex; align-items: center; justify-content: center; text-align: center; + padding: 1rem .95rem; border-radius: 14px; + font-weight: 800; font-size: .92rem; line-height: 1.25; + white-space: nowrap; + cursor: pointer; + transition: transform .2s ease, box-shadow .2s ease; + } + .abo-aktionsleiste > button::after { + content: ""; position: absolute; inset: 0; z-index: 1; + background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.85) 48%, transparent 66%); + background-size: 240% 100%; + mix-blend-mode: overlay; + animation: abo-btn-glare 3.2s ease-in-out infinite; + pointer-events: none; + } + .abo-aktionsleiste > button:hover { transform: translateY(-3px) scale(1.015); } + + /* Links: Gold — exakt die bestehende Knopf-Optik der Seite. */ + .abo-aktion-haupt { + color: #1a1408; + border: 1.5px solid rgba(255,233,168,.65); + background: linear-gradient(120deg, #ffe9a8 0%, #d4af37 30%, #ffe9a8 55%, #fff2c9 78%, #d4af37 100%); + background-size: 280% 100%; + animation: abo-btn-shine 6s ease-in-out infinite; + box-shadow: 0 10px 26px -12px rgba(212,175,55,.55); + } + .abo-aktion-haupt:hover { + box-shadow: 0 16px 34px -10px rgba(212,175,55,.65), 0 0 26px rgba(212,175,55,.4); + } + + /* Babyblau — gleiche Machart, kräftigeres Sky-Blau statt des sehr + blassen Standard-Babyblaus, damit es neben dem Gold nicht untergeht + (dieselbe Lektion wie auf der Verwaltungsseite). Dunkler Tiefsee-Text + darauf für klaren Kontrast; zusätzlich ein sanft atmender Ring, der die + Kachel leicht leuchten lässt, ohne zu blenden. + + Zwei Namen, eine Optik: ".abo-aktion-neben" ist der Wechsel-Knopf neben + einer Gold-Aktion (Registrierungs-Seite), ".abo-aktion-blau" ist ein + Knopf, der selbst DIE Hauptaktion ist und trotzdem blau sein soll + (Einloggen-Seite, Nutzer-Wunsch 21.08.2026). Bewusst getrennte Namen, + damit später klar bleibt, warum ein Knopf blau ist. */ + .abo-aktion-neben, + .abo-aktion-blau { + color: #05202b; + border: 1.5px solid rgba(224,247,254,.7); + background: linear-gradient(120deg, #e0f7fe 0%, #38bdf8 30%, #7dd3fc 55%, #f0fbff 78%, #38bdf8 100%); + background-size: 280% 100%; + animation: abo-btn-shine 6s ease-in-out infinite, abo-blau-atem 4.5s ease-in-out infinite; + box-shadow: 0 10px 26px -12px rgba(56,189,248,.6), 0 0 0 0 rgba(125,211,252,.5); + } + .abo-aktion-neben:hover, + .abo-aktion-blau:hover { + box-shadow: 0 16px 34px -10px rgba(56,189,248,.75), 0 0 30px rgba(125,211,252,.55); + } + @keyframes abo-blau-atem { + 0%, 100% { box-shadow: 0 10px 26px -12px rgba(56,189,248,.55), 0 0 14px rgba(125,211,252,.25); } + 50% { box-shadow: 0 12px 30px -12px rgba(56,189,248,.75), 0 0 26px rgba(125,211,252,.5); } + } + + @media (prefers-reduced-motion: reduce) { + .abo-aktionsleiste > button, + .abo-aktionsleiste > button::after { animation: none; } + } + /* Auf schmalen Handys untereinander statt gequetscht nebeneinander. */ + @media (max-width: 430px) { + .abo-aktionsleiste { flex-direction: column; gap: .55rem; } + .abo-aktionsleiste > button { font-size: .92rem; } + } + .abo-oder { display: flex; align-items: center; gap: .8rem; color: var(--text-muted); font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; @@ -321,62 +419,88 @@ korrekt "nicht bedienbar" meldet. -->
- +
- +
- + +
+ + +
+ + +

Mit diesem Code loggst du dich künftig ein — merk ihn dir gut.

+
+ + +
+ +
- -

-

Schon Supporter? Hier einloggen

- - + - + @@ -460,7 +619,7 @@