Files
dogfather-universe/webdesign/portal.html
T
DogFatherGitandClaude Opus 5 2c12b8706e Highlights des Teams sind sofort zu sehen -- ohne zweiten Klick
Filipe, 30.09.2026: „wenn wir bei highlights videos rein setzen will
ich nicht mehr dass wir sie freigeben muessen, sobald die reingesetzt
wurden sollen die sofort zu sehen sein."

=====================================================================
WAS ICH NICHT GETAN HABE, UND WARUM NICHT
=====================================================================
Die naheliegende Loesung waere gewesen, `highlight` aus
`TREFF_FREIGABE_BRETTER` zu streichen. Das waere falsch: Auf diesem
Brett laedt auch die COMMUNITY hoch -- Clips, Bilder, Fanart. Im
Quelltext steht woertlich daneben:

    „Zwei Schloesser, weil hier fremde Inhalte hochgeladen werden --
     Urheberrecht und Anstand sind nichts, was man nachtraeglich
     klaert."

Filipe meint nicht das. Er meint: „wenn WIR videos rein setzen".

=====================================================================
DIE UNTERSCHEIDUNG STAND SCHON IM HAUS -- nur nicht im Code
=====================================================================
Derselbe Quelltext sagt ueber die zwei Freigabe-Bretter
Verschiedenes:

    ansteht    -> der SCHALTER „Im Treff zeigen". Das Team entscheidet
                  JE TERMIN, ob die Community ihn sieht.
    highlight  -> der Urheberrechts- und Anstandsfilter.

Ein Filter fragt „hat das jemand angesehen?". Wenn der, der ihn
bedienen darf, den Eintrag SELBST anlegt, ist die Antwort ja. Genau
diese Begruendung steht seit dem Uebernehmen aus dem Katalog im
Haus: „Eine zweite daneben waere keine Sicherheit, sondern ein
Klick."

Ein Schalter dagegen ist eine Entscheidung je Fall. Termine bleiben
deshalb unberuehrt -- sonst stuende jeder interne Termin sofort im
Treff, und danach hat niemand gefragt.

Neu: `FREIGABE_IST_FILTER` und `sofortFreigeben()` in
workspace-treff.js. DIE BEDINGUNG FRAGT DIE ROLLE, NICHT DEN WEG --
waere der Weg gefragt, waere aus dem Filter ein Loch geworden, sobald
jemand einen zweiten Weg baut. Ein Community-Mitglied ab „Stamm"
darf weiterhin einstellen; sein Eintrag wartet auf das Team.

Gerufen an ZWEI Stellen: beim Videoweg und beim Anlegen von Hand.
Beide hatten es bisher nicht.

=====================================================================
DIE VORHANDENE FREIGABEPRUEFUNG BEWEIST DAS NICHT
=====================================================================
Sie blieb nach der Aenderung gruen -- und das zu Recht: Sie legt ihre
Eintraege unmittelbar in der Datenbank an und prueft damit den
Mechanismus, nicht den Weg. Haette ich mich darauf verlassen, waere
eine Aenderung ausgeliefert worden, fuer die keine Zeile spricht.

pruef-treff (+5): DogFather legt ueber den echten Weg an -> die
Community sieht es SOFORT. Ein TERMIN bleibt verborgen. Die Regel
gibt fuer eine Rolle von aussen NICHT frei und fuer Termine
ueberhaupt nicht.

pruef-video (+3): Der Videoweg hat seinen eigenen Aufruf -- genau
dort wird einer vergessen. Geprueft wird die Freigabezeile selbst,
samt Gegenprobe „freigegeben ist nur, was auch angelegt wurde".

Meinen Abschnitt hatte ich erst HINTER das Abschalten des
nachgebauten TikTok-Dienstes gehaengt -- der Kopf der Datei warnt
woertlich davor („das Abschalten steht ganz hinten"). Gelesen habe
ich ihn, als es rot wurde.

UND `pruef-struktur` HAT MEINE EIGENE NEUE ZEILE GEFANGEN: Sie bildete
das Datum aus UTC statt Ortszeit -- zwischen Mitternacht und zwei Uhr
waere es der falsche Tag gewesen. Behoben mit `tagLokal()`, Minuten
nach dem Schreiben.

Gemessen: pruef-treff 85/0 (war 80), pruef-video 74/0 (war 71),
pruef-highlights 31/0, pruef-bereiche-lesend 37/0,
pruef-treff-werkzeuge 73/0, pruef-alle-sehen-es 43/0,
pruef-community-sicht 10/0, pruef-wege-nach-draussen 67/0,
pruef-struktur 44/0.

Co-Authored-By: Claude Opus 5 <[email protected]>
2026-09-30 12:55:12 +02:00

207 lines
10 KiB
HTML

<!DOCTYPE html>
<html lang="de" data-i18n-titel="seiten_titel">
<head>
<meta charset="UTF-8" />
<!-- viewport-fit=cover ist die Voraussetzung dafuer, dass env(safe-area-inset-*)
ueberhaupt einen Wert liefert. Ohne diese Angabe gibt jedes env() null zurueck
-- die Sicherheitsabstaende im CSS waeren totes Recht. Zusammen mit
apple-mobile-web-app-status-bar-style=black-translucent (siehe unten) laeuft
der Inhalt sonst installiert unter Uhr und Akkuanzeige. -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
<title>Kundenportal — Dogfather Webdesign</title>
<meta name="robots" content="noindex, nofollow, noarchive" />
<link rel="icon" type="image/png" href="/assets/img/app-symbole/portal-32.png?v=202609301254" />
<meta name="theme-color" content="#924985" />
<link rel="manifest" href="/webdesign/portal.webmanifest" />
<link rel="apple-touch-icon" href="/assets/img/app-symbole/portal-180.png?v=202609301254" />
<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=202609301254" />
<link rel="stylesheet" href="/assets/css/webdesign.css?v=202609301254" />
<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); }
/* Frist-Marke neben dem Liefertermin.
Bewusst zurueckhaltend im Normalfall: Ein Kunde, dessen Projekt
entspannt laeuft, soll keine Alarmfarbe sehen. Erst wenn es eng
wird, kommt Farbe dazu -- und der TEXT sagt es ebenfalls, damit die
Aussage auch ankommt, wenn man Farben nicht unterscheiden kann. */
/* ---------- Angebot ----------
Deutlich hervorgehoben, aber nicht schreiend: Es ist das Einzige im
Portal, das eine Entscheidung verlangt, und es soll auffallen —
ohne dass die Seite dabei nach Werbung aussieht. Deshalb ein
ruhiger Goldton am Rand statt einer farbigen Fläche. */
.po-angebot { position: relative; }
.po-angebot--offen {
border-color: rgb(var(--wd-gold-rgb) / .45);
box-shadow: 0 0 0 1px rgb(var(--wd-gold-rgb) / .12), var(--wd-hoehe-1);
}
.po-ag-marke {
display: inline-block; margin-bottom: .5rem;
padding: .16rem .6rem; border-radius: 999px;
font-size: .74rem; font-weight: 800; letter-spacing: .04em;
text-transform: uppercase;
background: rgb(var(--wd-gold-rgb) / .16); color: var(--wd-gold);
}
.wd .po-ag-preis {
font-size: clamp(1.5rem, 4vw, 2rem); font-weight: 700;
color: var(--wd-blau); margin: .2rem 0 .3rem;
font-variant-numeric: tabular-nums;
}
.po-ag-leistungen { margin: 1rem 0; }
.wd .po-ag-gruppe {
font-size: .9rem; font-weight: 700; margin: .9rem 0 .3rem;
color: var(--wd-text);
}
.po-ag-liste { margin: 0 0 .2rem; padding-left: 1.1rem; }
.wd .po-ag-liste li { font-size: .88rem; margin-bottom: .2rem; color: var(--wd-text-soft); }
.po-ag-knoepfe {
display: flex; flex-wrap: wrap; gap: .6rem; align-items: center;
margin-top: 1rem; padding-top: .9rem;
border-top: 1px solid var(--wd-rand);
}
/* Der Zusage-Knopf nimmt auf dem Handy die volle Breite — er ist das
Ziel dieser Karte, und ein halbbreiter Knopf neben einem
Abbrechen-Knopf lädt zum Verwechseln ein. */
@media (max-width: 560px) {
.po-ag-knoepfe > .wd-btn--haupt { width: 100%; }
}
.po-frist {
display: inline-block; margin-left: .35rem;
padding: .1rem .5rem; border-radius: 999px;
font-size: .76rem; font-weight: 700;
background: rgb(var(--wd-blau-rgb) / .14); color: var(--wd-blau);
font-variant-numeric: tabular-nums;
}
.po-frist--warn { background: rgb(233 196 106 / .16); color: #e9c46a; }
/* Gedaempftes Korallrot statt reinem Rot: auf dunklem Grund ist volles
Rot blendend und schlecht lesbar. */
.po-frist--rot { background: rgb(231 130 120 / .16); color: #e78278; }
.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" class="wd-motiv wd-motiv--ring">
<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=202609301254"></script>
<script src="/assets/js/wd-core.js?v=202609301254"></script>
<script src="/assets/js/wd-portal.js?v=202609301254"></script>
</body>
</html>