DogFatherGitandClaude Opus 5
299ef0d506
SCREEN 1: Jeder im Workspace hat jetzt seinen eigenen Steckbrief -- Creator, Scout, Manager und DogFather gleichermassen. Ein Bild, ein Satz ueber sich, und die Kanaele, auf denen er unterwegs ist. Er steht ganz oben auf profil.html, ueber der Creator-Akte; die ist etwas anderes (die fuehren die Betreuer, den Steckbrief fuehrt man selbst). Das Bild erscheint sofort ueberall: in der Kopfleiste jeder Seite und in der Begruessung. /api/ich liefert es deshalb gleich mit -- das spart auf jeder Seite eine zweite Abfrage und verhindert, dass die Plakette erst als Buchstabe erscheint und dann umspringt. Faellt das Bild aus, steht der Buchstabe da: Er wird nicht ersetzt, sondern liegt darunter. WARUM KEINE ECHTE TIKTOK-ANMELDUNG. "Mit TikTok verbinden" klingt nach OAuth. Das waere: ein Entwicklerkonto mit App-Freischaltung, eine Pruefung durch TikTok (Wochen, widerrufbar), je Person ein Zugriffstoken, das ablaeuft, erneuert werden muss und -- wenn es abhandenkommt -- fremden Zugriff auf ein fremdes Konto bedeutet. Dafuer bekaeme man Follower-Zahlen. Gebraucht wird hier aber "Wer ist das, und wo finde ich ihn?". Dafuer genuegt der oeffentliche Name. Gespeichert wird deshalb NUR das Handle -- kein Token, kein Passwort, nichts, was abhandenkommen kann. Daraus wird ein Verweis auf den Kanal. Vier Kanaele: TikTok, Instagram, YouTube, Twitch. Sollen spaeter echte Zahlen dazukommen, ist das ein eigenes Vorhaben -- der Name hier bleibt dann trotzdem richtig. Eingefuegt werden darf, was Leute wirklich in der Zwischenablage haben: "@name", "https://www.tiktok.com/@name" oder der Name allein. Alles wird auf den Namen zurueckgefuehrt, statt eine Fehlermeldung zu zeigen. SICHERHEIT beim Bild -- die drei Stellen, an denen Profilbilder typischerweise scheitern: 1. Der Typ wird an der SIGNATUR der Datei geprueft, nicht am Content-Type, den der Absender behauptet. Ein umbenanntes SVG mit Skript darin kaeme sonst durch und liefe im Namen der Domain -- mit der Sitzung des Betrachters. 2. Auf der Platte bekommt jede Datei einen Zufallsnamen. Kein Name kann Pfade verlassen oder etwas ueberschreiben. 3. Ausgeliefert mit nosniff und einer eigenen, alles verbietenden Inhaltsregel. Das Bild liegt als Datei neben der Datenbank, nicht darin: Bilder in SQLite blaehen jede Sicherung auf, und die laeuft jede Nacht. Niemand schreibt einem anderen ins Profil -- auch DogFather nicht. Ein Satz ueber sich und der eigene Kanalname gehoeren der Person. Wer wen SEHEN darf, folgt der bekannten Regel: Leitung alle, Scout seine Creator, Creator sich und seine Betreuer. Fremde Profile sind 404, nicht 403. ZWEI FUNDE DURCH DIE PRUEFUNG: - Der TikTok-Link, den die App beim Teilen kopiert, endet auf "?lang=de&is_from_webapp=1". Der wurde abgelehnt: "sieht nicht richtig aus" -- obwohl es der offizielle Link ist. Jetzt werden Parameter und Anker mit abgeschnitten. - Ein zu grosses Bild ergab "500 Serverfehler" statt einer Ansage. Der PayloadTooLargeError lief bis in die allgemeine Fehlerbehandlung durch. Jetzt 413 mit dem Satz, wie viel erlaubt ist. Von Hand haette das vermutlich nie jemand probiert. Vor der Schemaaenderung wurde eine geprueft vollstaendige Sicherung gezogen (VACUUM INTO, Integritaet ok, 6 Personen). Co-Authored-By: Claude Opus 5 <[email protected]>
171 lines
6.2 KiB
CSS
171 lines
6.2 KiB
CSS
/* ===================================================================
|
|
Creator-Profil (Onboarding).
|
|
=================================================================== */
|
|
|
|
.gruppe {
|
|
margin: 0 0 22px;
|
|
padding: 20px 22px 22px;
|
|
background: var(--flaeche);
|
|
border: 1px solid var(--rand);
|
|
border-radius: var(--radius);
|
|
}
|
|
|
|
.gruppe__titel {
|
|
padding: 0 6px;
|
|
font-size: .96rem; font-weight: 700;
|
|
color: var(--text);
|
|
}
|
|
.gruppe__text { margin: 2px 0 18px; font-size: .86rem; color: var(--text-still); }
|
|
|
|
.gruppe .feld-schild { margin-top: 14px; }
|
|
.gruppe .feld-schild:first-of-type { margin-top: 0; }
|
|
|
|
.gruppe textarea, .gruppe input {
|
|
width: 100%; padding: 10px 12px;
|
|
background: rgba(255, 255, 255, .045);
|
|
border: 1px solid var(--rand);
|
|
border-radius: var(--radius-klein);
|
|
color: var(--text); font: inherit;
|
|
transition: border-color var(--tempo), box-shadow var(--tempo);
|
|
}
|
|
.gruppe textarea { resize: vertical; min-height: 46px; }
|
|
.gruppe textarea:focus, .gruppe input:focus {
|
|
outline: none; border-color: rgba(63, 189, 245, .7);
|
|
box-shadow: 0 0 0 3px rgba(63, 189, 245, .16);
|
|
}
|
|
/* Siehe aufgaben.css: color-scheme: dark erledigt das Aufhellen. */
|
|
.gruppe input[type="date"]::-webkit-calendar-picker-indicator { cursor: pointer; }
|
|
|
|
.gruppe__raster {
|
|
display: grid; gap: 14px; margin-top: 16px;
|
|
grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
|
|
}
|
|
|
|
/* Die interne Notiz hebt sich deutlich ab, damit im Gespräch mit dem
|
|
Creator niemand versehentlich hineinschreibt, was er lesen soll. */
|
|
.gruppe--intern {
|
|
border-color: rgba(224, 163, 60, .38);
|
|
background: rgba(224, 163, 60, .05);
|
|
}
|
|
.gruppe--intern .gruppe__titel { color: #e6b45c; }
|
|
|
|
#auswahl-block select {
|
|
min-width: 210px; padding: 10px 12px;
|
|
background: rgba(255, 255, 255, .045);
|
|
border: 1px solid var(--rand); border-radius: var(--radius-klein);
|
|
color: var(--text); font: inherit;
|
|
}
|
|
|
|
.speicher-leiste {
|
|
position: sticky; bottom: 0;
|
|
display: flex; align-items: center; gap: 14px;
|
|
margin-top: 26px; padding: 14px 0;
|
|
background: linear-gradient(180deg, transparent, var(--tinte) 34%);
|
|
}
|
|
|
|
@media (max-width: 560px) {
|
|
.gruppe { padding: 16px 15px 18px; }
|
|
}
|
|
|
|
/* ===================================================================
|
|
Der eigene Steckbrief
|
|
|
|
Steht ganz oben und gehoert JEDEM im Workspace -- nicht nur Creatorn.
|
|
Deshalb sieht er auch anders aus als die Creator-Akte darunter: eine
|
|
geschlossene Karte mit dem Bild links, nicht ein weiteres Formularfeld.
|
|
=================================================================== */
|
|
|
|
.steckbrief {
|
|
position: relative; overflow: hidden;
|
|
margin-bottom: 28px;
|
|
padding: 22px;
|
|
border: 1px solid color-mix(in srgb, var(--ton, var(--akzent)) 22%, var(--rand));
|
|
border-radius: var(--radius);
|
|
background:
|
|
radial-gradient(90% 120% at 0% 0%,
|
|
color-mix(in srgb, var(--ton, var(--akzent)) 12%, transparent), transparent 62%),
|
|
var(--flaeche);
|
|
}
|
|
.steckbrief__kopf { display: flex; gap: 24px; align-items: flex-start; flex-wrap: wrap; }
|
|
|
|
.steckbrief__bildfeld { display: grid; gap: 10px; justify-items: center; flex: none; }
|
|
|
|
/* Rund, wie die Plakette in der Begruessung: Ein runder Koerper gehoert
|
|
in dieser Oberflaeche zu einer PERSON, ein eckiger zu einer Sache. */
|
|
.steckbrief__bild {
|
|
display: grid; place-items: center;
|
|
width: 128px; height: 128px; border-radius: 50%;
|
|
overflow: hidden;
|
|
font-size: 3rem; font-weight: 700; line-height: 1;
|
|
color: #f2f7fd;
|
|
border: 1px solid color-mix(in srgb, var(--ton, var(--akzent)) 40%, transparent);
|
|
background:
|
|
radial-gradient(120% 120% at 30% 20%,
|
|
color-mix(in srgb, var(--ton, var(--akzent)) 30%, transparent), transparent 70%),
|
|
rgba(255, 255, 255, .05);
|
|
box-shadow:
|
|
inset 0 1px 0 rgba(255, 255, 255, .1),
|
|
0 14px 34px -16px color-mix(in srgb, var(--ton, var(--akzent)) 70%, transparent);
|
|
}
|
|
.steckbrief__bild img { width: 100%; height: 100%; object-fit: cover; display: block; }
|
|
.steckbrief__bildknoepfe { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
|
|
/* Das Dateifeld ist versteckt; die Beschriftung ist der Knopf. Sie muss
|
|
deshalb auch AUSSEHEN wie einer und den Zeiger aendern. */
|
|
.steckbrief__bildknoepfe label { cursor: pointer; }
|
|
|
|
.steckbrief__text { flex: 1 1 320px; min-width: 0; }
|
|
.steckbrief__name {
|
|
margin: 4px 0 2px;
|
|
font-size: 1.5rem; letter-spacing: -.02em; color: #f2f7fd;
|
|
}
|
|
.steckbrief__rolle {
|
|
margin: 0 0 16px;
|
|
font-size: .78rem; letter-spacing: .12em; text-transform: uppercase;
|
|
color: color-mix(in srgb, var(--ton, var(--akzent)) 62%, #cfe0f0);
|
|
}
|
|
.steckbrief__schild { margin-top: 18px; }
|
|
.steckbrief textarea { width: 100%; }
|
|
|
|
/* ---------- Die Kanaele ---------------------------------------------------
|
|
Gespeichert wird NUR der oeffentliche Name -- kein Login, kein Token
|
|
(Begruendung im Kopf von server/workspace-steckbrief.js). Das @ steht
|
|
deshalb fest vor dem Feld und wird nicht mit eingegeben: So ist ohne
|
|
Erklaerung klar, was hier hingehoert. */
|
|
.steckbrief__kanaele { display: grid; gap: 8px; margin-top: 8px; }
|
|
.kanal {
|
|
display: grid;
|
|
grid-template-columns: 92px minmax(0, 1fr) auto;
|
|
align-items: center; gap: 10px;
|
|
}
|
|
.kanal__name { font-size: .84rem; color: var(--text-leise); }
|
|
.kanal__feld {
|
|
display: flex; align-items: center;
|
|
border: 1px solid var(--rand); border-radius: var(--radius-klein);
|
|
background: rgba(0, 0, 0, .22);
|
|
overflow: hidden;
|
|
}
|
|
.kanal__feld:focus-within { border-color: color-mix(in srgb, var(--akzent) 50%, transparent); }
|
|
.kanal__at { padding: 0 2px 0 11px; color: var(--text-still); }
|
|
.kanal__feld input {
|
|
flex: 1 1 auto; min-width: 0;
|
|
border: 0; background: none; color: var(--text);
|
|
font: inherit; font-size: .88rem;
|
|
padding: 9px 11px 9px 3px;
|
|
}
|
|
.kanal__feld input:focus { outline: none; }
|
|
.kanal__auf { font-size: .78rem; color: var(--akzent); white-space: nowrap; }
|
|
|
|
.steckbrief__fuss {
|
|
display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
|
|
margin-top: 18px;
|
|
}
|
|
.steckbrief__stand { font-size: .82rem; color: var(--text-leise); }
|
|
|
|
@media (max-width: 560px) {
|
|
.steckbrief { padding: 18px 15px; }
|
|
.steckbrief__kopf { gap: 16px; }
|
|
.steckbrief__bild { width: 96px; height: 96px; font-size: 2.2rem; }
|
|
.kanal { grid-template-columns: 1fr; gap: 4px; }
|
|
.kanal__auf { justify-self: start; }
|
|
}
|