DogFatherGitandClaude Opus 5
d6e75ce56a
"ich will das die kacheln richtig speziell sind und modern ... dass viel mehr auffaellt und doch modern und profissionell" Die Kacheln hatten Verlaufsrand, Verlaufsflaeche, Schatten und Lichtkante -- alles richtig, alles STATISCH. Was fehlte, war das Gefuehl von Material: eine Flaeche, die auf Licht reagiert. ZWEI EBENEN Ein weicher Lichtfleck folgt dem Zeiger ueber die Flaeche. Und -- der Teil, der wirklich auffaellt -- der RAND glueht an derselben Stelle auf und verlaeuft nach beiden Seiten aus. Das geht ohne zusaetzliches Element: Die Kachel hat bereits zwei Hintergrundebenen (Flaeche padding-box, Verlaufsrand border-box). Beim Ueberfahren bekommt die Randebene einen Lichtpunkt an der Zeigerstelle. Der Rand ist nur einen Pixel breit -- genau dort laesst sich Licht am staerksten zeigen, ohne kitschig zu werden. Ein Lichtfleck OHNE mitleuchtende Kante wirkt wie ein Fleck AUF der Kachel; mit ihr wirkt die ganze Kachel beleuchtet. Die Flaeche selbst bleibt beim Ueberfahren unveraendert -- sonst wuerde der Text flackern. VIER ENTSCHEIDUNGEN GEGEN BILLIGE OPTIK Die Farbe folgt der Kachel: blaue leuchten blau, lila lila. Sonst braeche der Effekt die Farbordnung, die ueberall sonst Bedeutung traegt. Nur bei echtem Zeiger (hover: hover, pointer: fine). Auf dem Handy gibt es keinen; dort bliebe der Lichtfleck an einer zufaelligen Stelle kleben. Aus bei prefers-reduced-motion. Auch wenn sich nichts bewegt: Etwas, das dem Zeiger folgt, ist Bewegung. Erste Fassung war mit 13 % zu zurueckhaltend -- am Screenshot geprueft und auf 22 % angehoben. "Man soll es spueren" ist richtig, aber es muss auch ankommen. SPARSAM GEBAUT EIN Zuhoerer am Dokument statt einem je Kachel -- sonst muesste jede nachgeladene Kachel einzeln nachgeruestet werden. Geschrieben wird erst im naechsten Bildaufbau: Der Zeiger meldet sich bis zu tausendmal je Sekunde, der Bildschirm zeichnet sechzigmal; ohne Drosselung rechnet der Browser neunhundertmal umsonst. Der Inhalt bekommt z-index 1. Ohne das legt sich der absolut gesetzte Lichtfleck ueber den Text -- absolut positionierte Elemente malen ueber Fluss-Inhalt, auch wenn sie im Quelltext davor stehen. Das Ergebnis waere ein Schleier auf der Schrift, den man erst beim Vergleich zweier Kacheln bemerkt. Eigens geprueft. GEPRUEFT: 7 Pruefungen fuer den Effekt selbst -- unsichtbar im Ruhezustand, erscheint beim Ueberfahren, folgt dem Zeiger auf 6 Pixel genau, Inhalt liegt darueber, lila Kacheln leuchten lila, bei Bewegungsempfindlichkeit vollstaendig abgeschaltet. Gestaltung 0 Befunde, Designsystem 5, Verwaltung 69, Portal 32. Versionsstempel und Cache auf v19. Co-Authored-By: Claude Opus 5 <[email protected]>
142 lines
7.4 KiB
HTML
142 lines
7.4 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="de" data-i18n-titel="seiten_titel">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>Kundenportal — Dogfather Webdesign</title>
|
|
<meta name="robots" content="noindex, nofollow, noarchive" />
|
|
<link rel="icon" type="image/png" href="/assets/img/favicon.png" />
|
|
<meta name="theme-color" content="#05070b" />
|
|
<link rel="manifest" href="/webdesign/app.webmanifest" />
|
|
<link rel="apple-touch-icon" href="/assets/img/wd-app-180.png" />
|
|
<meta name="apple-mobile-web-app-capable" content="yes" />
|
|
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
|
|
<meta name="apple-mobile-web-app-title" content="Dogfather Webdesign" />
|
|
<link rel="stylesheet" href="/assets/css/main.css?v=20260823wd19" />
|
|
<link rel="stylesheet" href="/assets/css/webdesign.css?v=20260823wd19" />
|
|
<style>
|
|
.po-login { max-width: 440px; margin: clamp(1.5rem,6vh,4rem) auto; }
|
|
|
|
.po-kopf { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem; margin-bottom: 1.4rem; }
|
|
.po-kopf h1 { margin: 0; font-size: clamp(1.4rem,3.4vw,2rem); }
|
|
.po-kopf .wd-btn { margin-left: auto; }
|
|
|
|
/* Projektkarte in der Übersicht */
|
|
.po-projekt { display: block; width: 100%; text-align: left; cursor: pointer; margin-bottom: .8rem; }
|
|
.po-projekt-kopf { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin-bottom: .5rem; }
|
|
.po-projekt-nr { font-family: var(--font-head); font-weight: 800; font-size: .8rem; color: var(--wd-blau); }
|
|
.po-projekt h3 { margin: 0; flex: 1; min-width: 0; }
|
|
|
|
/* Fortschrittsleiste über die Projektphasen.
|
|
Zeigt auf einen Blick, wo das Projekt steht — die häufigste Frage
|
|
überhaupt, und der Grund, warum Kunden anrufen. */
|
|
.po-phasen { display: flex; gap: 3px; margin: .8rem 0 .6rem; }
|
|
.po-phase { flex: 1; height: 6px; border-radius: 999px; background: rgb(var(--wd-blau-rgb) / .13); }
|
|
.po-phase.po-erledigt { background: var(--wd-blau-tief); }
|
|
.po-phase.po-jetzt { background: var(--wd-blau); box-shadow: 0 0 10px rgb(var(--wd-blau-rgb) / .6); }
|
|
.po-phasen-text { font-size: .82rem; color: var(--wd-text-soft); }
|
|
|
|
.po-wartet {
|
|
display: inline-flex; align-items: center; gap: .35rem;
|
|
padding: .25rem .65rem; border-radius: 999px; font-size: .78rem; font-weight: 700;
|
|
}
|
|
.po-wartet--kunde { background: rgb(var(--wd-gold-rgb) / .16); color: var(--wd-gold); }
|
|
.po-wartet--dogfather { background: rgb(var(--wd-blau-rgb) / .14); color: var(--wd-blau); }
|
|
|
|
.po-liste { list-style: none; margin: 0; padding: 0; }
|
|
.po-eintrag {
|
|
display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .9rem;
|
|
padding: .8rem 0; border-bottom: 1px solid var(--wd-rand);
|
|
}
|
|
.po-eintrag:last-child { border-bottom: none; }
|
|
.po-eintrag-haupt { flex: 1; min-width: 0; }
|
|
.po-eintrag-name { color: var(--wd-text); font-weight: 600; overflow-wrap: break-word; }
|
|
.po-eintrag-neben { font-size: .84rem; color: var(--wd-text-soft); }
|
|
|
|
.po-nachricht { padding: .8rem 1rem; border-radius: 14px; margin-bottom: .6rem; max-width: 88%; }
|
|
.po-nachricht--ich { background: rgb(var(--wd-blau-rgb) / .1); border: 1px solid var(--wd-rand-stark); margin-left: auto; }
|
|
.po-nachricht--du { background: rgb(var(--wd-glas-rgb) / .7); border: 1px solid var(--wd-rand); }
|
|
.po-nachricht-kopf { font-size: 0.8rem; color: var(--wd-text-soft); margin-bottom: .25rem; }
|
|
.po-nachricht p { margin: 0; font-size: .95rem; white-space: pre-wrap; color: var(--wd-text); }
|
|
|
|
.po-idee { padding: 1rem; border-radius: 14px; border: 1px solid var(--wd-rand); background: rgb(var(--wd-glas-rgb) / .5); margin-bottom: .7rem; }
|
|
.po-idee-kopf { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem; margin-bottom: .4rem; }
|
|
.po-idee-kopf h4 { margin: 0; flex: 1; min-width: 0; }
|
|
.po-idee--offen { border-color: rgb(var(--wd-gold-rgb) / .4); background: rgb(var(--wd-gold-rgb) / .05); }
|
|
|
|
.po-laedt { text-align: center; padding: 2.5rem 1rem; color: var(--wd-text-soft); }
|
|
</style>
|
|
</head>
|
|
<body class="wd">
|
|
|
|
<div id="wd-kopf" data-wd-kopf="minimal"></div>
|
|
|
|
<main id="wd-inhalt">
|
|
<section class="wd-abschnitt" style="padding-top:1.6rem">
|
|
<div class="wd-container wd-container--schmal">
|
|
|
|
<div class="wd-meldung" id="po-meldung" hidden></div>
|
|
|
|
<!-- ============ ANMELDUNG ============ -->
|
|
<div id="po-anmeldung" class="wd-karte po-login" hidden>
|
|
<h1 style="font-size:1.5rem" data-i18n="po_login_h1">Dein Projektraum</h1>
|
|
<p class="wd-klein wd-leise" data-i18n="po_login_text">Hier siehst du deinen Projektstand, alle Dateien und offene Punkte.</p>
|
|
<form id="po-login-form" novalidate>
|
|
<div class="wd-feld" id="po-feld-email">
|
|
<label for="po-email" data-i18n="po_email">E-Mail</label>
|
|
<input type="email" id="po-email" autocomplete="username" inputmode="email" />
|
|
</div>
|
|
<div class="wd-feld" id="po-feld-passwort">
|
|
<label for="po-passwort" data-i18n="po_passwort">Passwort</label>
|
|
<input type="password" id="po-passwort" autocomplete="current-password" />
|
|
<p class="wd-feld-fehler"></p>
|
|
</div>
|
|
<button type="submit" class="wd-btn wd-btn--haupt wd-btn--breit" data-i18n="po_anmelden">Anmelden</button>
|
|
</form>
|
|
<p class="wd-klein wd-leise" style="margin-top:1rem" data-i18n="po_kein_zugang">Noch keinen Zugang? Der Projektraum wird freigeschaltet, sobald dein Projekt beginnt.</p>
|
|
</div>
|
|
|
|
<!-- ============ PASSWORT SETZEN ============ -->
|
|
<div id="po-setzen" class="wd-karte po-login" hidden>
|
|
<h1 style="font-size:1.5rem" data-i18n="po_setz_h1">Passwort festlegen</h1>
|
|
<p class="wd-klein wd-leise" data-i18n="po_setz_text">Wähl ein Passwort für deinen Projektraum. Ein kurzer Satz ist sicherer und leichter zu merken als ein kryptisches Wort.</p>
|
|
<p id="po-setz-fuer" class="wd-klein" style="color:var(--wd-blau)"></p>
|
|
<form id="po-setz-form" novalidate>
|
|
<div class="wd-feld" id="po-feld-neu">
|
|
<label for="po-neu" data-i18n="po_passwort">Passwort</label>
|
|
<input type="password" id="po-neu" autocomplete="new-password" />
|
|
<p class="wd-feld-fehler"></p>
|
|
</div>
|
|
<button type="submit" class="wd-btn wd-btn--haupt wd-btn--breit" data-i18n="po_setz_knopf">Passwort speichern</button>
|
|
</form>
|
|
</div>
|
|
|
|
<!-- ============ ÜBERSICHT ============ -->
|
|
<div id="po-uebersicht" hidden>
|
|
<div class="po-kopf">
|
|
<h1><span data-i18n="po_hallo">Hallo</span> <span id="po-name">—</span></h1>
|
|
<button type="button" class="wd-btn wd-btn--still wd-btn--klein" id="po-abmelden" data-i18n="po_abmelden">Abmelden</button>
|
|
</div>
|
|
<div id="po-inhalt"><div class="po-laedt" data-i18n="laedt">Wird geladen…</div></div>
|
|
</div>
|
|
|
|
<!-- ============ PROJEKTDETAIL ============ -->
|
|
<div id="po-detail" hidden>
|
|
<div class="po-kopf">
|
|
<button type="button" class="wd-btn wd-btn--still wd-btn--klein" id="po-zurueck" data-i18n="po_zurueck">Zurück zur Übersicht</button>
|
|
</div>
|
|
<div id="po-detail-inhalt"><div class="po-laedt" data-i18n="laedt">Wird geladen…</div></div>
|
|
</div>
|
|
|
|
</div>
|
|
</section>
|
|
</main>
|
|
|
|
<div id="wd-fuss"></div>
|
|
|
|
<script src="/assets/js/i18n-wd-portal.js?v=20260823wd19"></script>
|
|
<script src="/assets/js/wd-core.js?v=20260823wd19"></script>
|
|
<script src="/assets/js/wd-portal.js?v=20260823wd19"></script>
|
|
</body>
|
|
</html>
|