Files
dogfather-universe/workspace/profil.html
T
DogFatherGitandClaude Opus 5 2a26a49f91 Mit "@" jemanden im Chat ansprechen
Filipe: "ich will das man die leute mit @ markieren kann im chat."

MARKIEREN IST KEINE FARBE, SONDERN EINE ANSPRACHE. Sie funktioniert
nur, wenn drei Dinge zusammen stimmen: Der Richtige ist gemeint, er
MERKT es, und man sieht es im Satz. Fehlt eines davon, ist es eine
Attrappe -- und zwar eine, die gut aussieht.

WER GEMEINT IST, ENTSCHEIDET DER SERVER. Der Browser schickt nur Text.
Damit wirkt ein von Hand getipptes "@VanVan" genauso wie eines aus der
Auswahlliste, und niemand kann jemanden ansprechen, der gar nicht im
Raum sitzt -- auch nicht ueber die Schnittstelle.

Die Regeln stehen in server/chat-erwaehnung.js, jede mit Begruendung.
Zwei davon sind keine Feinheit, sondern der Unterschied zwischen
brauchbar und laestig:

  * Das Zeichen VOR dem "@" darf kein Buchstabe sein. Sonst piepst
    jede E-Mail-Adresse im Chat jemanden an
    ("[email protected]").
  * Das Zeichen DANACH auch nicht, und der laengste Name gewinnt.
    Sonst spricht "@Tilikum" Tili an.

MAN MERKT ES AUCH OHNE OFFENEN RAUM. Eine Zahl in der Gespraechsliste
sagt "hier ist etwas" -- nicht, ob es an dich war. Wer morgens vier
Raeume mit Zahlen sieht, macht den lautesten zuerst auf, und dort
steht selten das, was auf ihn wartet. Jetzt steht ein "@" daneben.

UND DIE MELDUNG AUFS HANDY SAGT ES: "VanVan hat dich erwaehnt" statt
"Nachricht von VanVan". Als EIGENE Art, die sich getrennt abschalten
laesst -- wer den lauten Chat stumm stellt, will trotzdem wissen, wenn
ihn jemand direkt anspricht. Ohne Ausnahme von der Ruhezeit: Ein Anruf
wartet auf eine Antwort, ein "@Anna" nicht.

DIE AUSWAHL BEIM TIPPEN loest drei Dinge, die man sonst selbst wissen
muesste: wie die Person genau heisst, wer ueberhaupt im Raum ist, und
ob man sich vertippt hat. Tastatur zuerst (Pfeile, Enter, Tab, Escape).
Sie erzwingt nichts -- wer weitertippt, schreibt einfach weiter.

ZWEI RECHNUNGEN, EINE ANTWORT: Der Browser braucht dieselbe Aufloesung,
um sofort hervorzuheben. Genau dort laufen Dinge auseinander, und dann
haette die Seite jemanden hervorgehoben, den niemand benachrichtigt
hat. pruef-erwaehnung LIEST die Browserfassung aus der Datei und fuehrt
sie aus -- ein Nachbau wuerde pruefen, ob ich zweimal dasselbe
schreiben kann.

---- DABEI GEFUNDEN: "gelesen bis 999999" ----------------------------

Der Server nahm fuer den Lesestand JEDE ganze Zahl an. Wer einmal eine
Zahl hinter allem Vorhandenen schickte, sah in diesem Gespraech nie
wieder einen Zaehler und nie wieder ein @-Zeichen: Alles Kuenftige galt
als gelesen, bevor es geschrieben war. Das faellt niemandem als
Zusammenhang auf -- man merkt nur, dass "die Benachrichtigungen nicht
gehen".

Der Browser schickt heute immer die letzte gesehene Nummer, ist also
nicht der Grund. Aber eine Grenze, die nur davon lebt, dass der
Aufrufer sich benimmt, ist keine. Jetzt wird auf die juengste
Nachricht des Raums begrenzt -- abgeleitet, nicht geraten.

Gefunden hat es meine eigene Pruefung: Sie setzte zum Aufraeumen 99999
und wunderte sich danach, warum das frische "@" nicht leuchtete.

WOHER MAN ERFAEHRT, DASS ES DAS GIBT: Im Chat gibt es keinen
Hilfeknopf. Der Hinweis steht deshalb im Leersatz einer neuen Gruppe --
dort, wo man beim ersten Oeffnen ohnehin hinsieht, und nur ab drei
Leuten. In einem Zweiergespraech waere er Ballast.

GEPRUEFT: pruef-erwaehnung 67/0 (neu) -- 13 Regelfaelle ohne Server,
der Weg durch die Schnittstelle, das Zeichen in der Liste samt
Gegenprobe bei jemandem, der dabei aber nicht gemeint war, beide
Aufloesungen nebeneinander, und der ganze Ablauf am echten Bildschirm
bis "Enter waehlt und schickt NICHT ab".
Dazu pruef-chat 48/0, pruef-chat-optik 36/0, pruef-treffchat 110/0,
pruef-chat-kanaele 79/0, pruef-glocke 31/0, pruef-push 24/0,
pruef-anruf-klingelt, pruef-css-klassen, pruef-meldungen,
pruef-nachfrage, pruef-tippziele.

Co-Authored-By: Claude Opus 5 <[email protected]>
2026-09-20 17:54:16 +02:00

229 lines
10 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!doctype html>
<html lang="de">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
<title>Creator-Profil · Spicy & Dogi</title>
<meta name="robots" content="noindex, nofollow" />
<link rel="manifest" href="/workspace/app.webmanifest" />
<!-- Die Farbe der Fensterleiste, wenn der Workspace als App laeuft.
Stand auf #0674b9 (kraeftiges Blau) und stach damit als einziger
heller Balken ueber einer durchweg dunklen Seite. Jetzt derselbe
Ton wie die Kopfleiste darunter (#06090f), damit Leiste und Seite
eine Flaeche sind statt zweier. -->
<meta name="theme-color" content="#06090f" />
<link rel="icon" type="image/png" href="/assets/img/app-symbole/workspace-32.png?v=202609201750" />
<link rel="apple-touch-icon" href="/assets/img/app-symbole/workspace-180.png?v=202609201750" />
<link rel="stylesheet" href="assets/css/gate.css?v=202609201750" />
<link rel="stylesheet" href="assets/css/start.css?v=202609201750" />
<link rel="stylesheet" href="assets/css/aufgaben.css?v=202609201750" />
<link rel="stylesheet" href="assets/css/profil.css?v=202609201750" />
<link rel="stylesheet" href="assets/css/module.css?v=202609201750" />
<!-- haus.css MUSS die letzte Stilvorlage sein (10.09.2026).
Auf der Agenturadresse ist sie leer -- das Haus hier IST der
Grundzustand. Auf der Adresse von Team Dogi biegt der Server
genau diesen Dateinamen auf crew-haus.css um, und die Seite
kommt schon beim ERSTEN Abruf in Lila und Babyblau an --
ohne Umfaerben im Browser, ohne Flackern. -->
<link rel="stylesheet" href="assets/css/haus.css?v=202609201750" />
</head>
<body class="start">
<!-- Der Schleier ueber der Buehne (Casper und HasiDog in den unteren
Ecken, siehe start.css). Ein eigenes Element statt eines dritten
Pseudo-Elements -- body hat nur ::before und ::after. -->
<div class="schleier" aria-hidden="true"></div>
<header class="kopfleiste">
<button type="button" class="zurueck-knopf" id="zurueck" hidden>
<svg class="zurueck-knopf__pfeil" viewBox="0 0 24 24" aria-hidden="true">
<path d="M14.5 5.5 8 12l6.5 6.5" />
</svg>
<span class="zurueck-knopf__text">Zurück</span>
</button>
<p class="marke"><span class="marke__text"><a class="zurueck" href="start.html">Creator&nbsp;Workspace</a> · Profil</span></p>
<div class="kopfleiste__rechts">
<span class="wer" id="wer">…</span>
<button type="button" class="abmelden" id="abmelden">Abmelden</button>
</div>
</header>
<main class="inhalt">
<section class="kopf-zeile">
<div>
<p class="marke">Onboarding</p>
<h1 class="titel" id="titel">Creator-Profil</h1>
<p class="unterzeile" id="unterzeile">…</p>
</div>
<div id="auswahl-block" hidden>
<label class="feld-schild" for="auswahl">Creator</label>
<select id="auswahl"></select>
</div>
</section>
<!-- Der eigene Steckbrief -- hier NUR fuer Creator, weil ein Creator
nur eine Profilseite hat und beides zusammengehoert.
Scouts, Manager und DogFather sehen ihn auf steckbrief.html.
Grund: Auf dieser Seite steht die Akte eines ANDEREN Menschen
("Profil: SpongBobSchwammKopf"). Der eigene Steckbrief mittendrin
ergab zwei Personen auf einem Bildschirm, ohne dass klar war,
welche gerade gemeint ist. steckbrief.js blendet ihn hier nur
fuer Creator ein. -->
<section class="steckbrief" id="steckbrief" data-nur-creator="ja" hidden>
<div class="steckbrief__kopf">
<div class="steckbrief__bildfeld">
<span class="steckbrief__bild" id="sb-bild" aria-hidden="true"></span>
<div class="steckbrief__bildknoepfe">
<label class="schritt" for="sb-datei">Bild wählen</label>
<input type="file" id="sb-datei" accept="image/jpeg,image/png,image/webp" hidden />
<button type="button" class="schritt" id="sb-bild-weg" hidden>entfernen</button>
</div>
</div>
<div class="steckbrief__text">
<p class="feldschild">Mein Profil</p>
<h2 class="steckbrief__name" id="sb-name">…</h2>
<p class="steckbrief__rolle" id="sb-rolle"></p>
<label class="feld-schild" for="sb-ueber">Ein Satz über dich</label>
<textarea id="sb-ueber" rows="2" maxlength="400"
placeholder="z. B. Ich streame Gaming und Just Chatting, meistens abends."></textarea>
<p class="feldschild steckbrief__schild">Meine Kanäle</p>
<!-- Bewusst nur der öffentliche Name, kein Login: siehe die
Begründung im Kopf von server/workspace-steckbrief.js. -->
<div class="steckbrief__kanaele" id="sb-kanaele"></div>
<p class="fehler" id="sb-fehler" role="alert" aria-live="polite"></p>
<div class="steckbrief__fuss">
<button type="button" class="knopf knopf--klein" id="sb-speichern">Profil speichern</button>
<span class="steckbrief__stand" id="sb-stand" role="status" aria-live="polite"></span>
</div>
</div>
</div>
</section>
<p class="fehler" id="fehler" role="alert" aria-live="polite"></p>
<form id="formular" hidden>
<fieldset class="gruppe">
<legend class="gruppe__titel">Stammdaten</legend>
<p class="gruppe__text">Wer ist der Creator, und wie arbeitet er?</p>
<label class="feld-schild" for="handles">Social-Handles</label>
<textarea id="handles" rows="2" maxlength="2000"
placeholder="TikTok, Instagram, Discord …"></textarea>
<label class="feld-schild" for="nische">Nische &amp; Content-Stil</label>
<textarea id="nische" rows="2" maxlength="2000"
placeholder="Worum geht es, und wie wirkt es?"></textarea>
<label class="feld-schild" for="live_zeiten">LIVE-Zeiten &amp; Routinen</label>
<textarea id="live_zeiten" rows="2" maxlength="2000"
placeholder="Wann wird gestreamt, wie regelmäßig?"></textarea>
<label class="feld-schild" for="technik">Technik-Setup &amp; Tools</label>
<textarea id="technik" rows="2" maxlength="2000"
placeholder="PC/Handy, Kamera, Mikro, OBS …"></textarea>
</fieldset>
<fieldset class="gruppe">
<legend class="gruppe__titel">Ziele</legend>
<p class="gruppe__text">Was soll wachsen? Aus dem Konzept, Seite 5.</p>
<label class="feld-schild" for="ziel_live">LIVE-Qualität &amp; Bindung</label>
<textarea id="ziel_live" rows="2" maxlength="2000"></textarea>
<label class="feld-schild" for="ziel_content">Content-Reichweite</label>
<textarea id="ziel_content" rows="2" maxlength="2000"></textarea>
<label class="feld-schild" for="ziel_community">Community &amp; Wiederkehr</label>
<textarea id="ziel_community" rows="2" maxlength="2000"></textarea>
<label class="feld-schild" for="ziel_technik">Technische Stabilität</label>
<textarea id="ziel_technik" rows="2" maxlength="2000"></textarea>
</fieldset>
<fieldset class="gruppe">
<legend class="gruppe__titel">90-Tage-Plan</legend>
<p class="gruppe__text">Wenige Punkte, dafür verbindlich – Top&nbsp;3 aus dem Konzept.</p>
<label class="feld-schild" for="plan_prio1">Priorität 1</label>
<input id="plan_prio1" maxlength="2000" />
<label class="feld-schild" for="plan_prio2">Priorität 2</label>
<input id="plan_prio2" maxlength="2000" />
<label class="feld-schild" for="plan_prio3">Priorität 3</label>
<input id="plan_prio3" maxlength="2000" />
<div class="gruppe__raster" id="termine" hidden>
<div>
<label class="feld-schild" for="plan_start">Plan-Start</label>
<input id="plan_start" type="date" />
</div>
<div>
<label class="feld-schild" for="naechster_review">Nächster Review-Termin</label>
<input id="naechster_review" type="date" />
</div>
</div>
</fieldset>
<!-- Nur für DogFather. Der Server schickt dieses Feld an Creator
gar nicht erst mit. -->
<fieldset class="gruppe gruppe--intern" id="gruppe-intern" hidden>
<legend class="gruppe__titel">Interne Notiz</legend>
<p class="gruppe__text">
Sieht <strong>nur DogFather</strong>. Der Creator bekommt dieses Feld
weder angezeigt noch übertragen.
</p>
<!-- Beschriftung ergänzt 04.09.2026 (Audit): Als einziges der
vierzehn Felder auf dieser Seite hatte dieses keine. Die
Überschrift der Gruppe steht zwar darüber, gehört für ein
Vorleseprogramm aber nicht zum Feld -- dort kam schlicht
"Textfeld" an, ohne zu sagen, wofür. -->
<label class="feld-schild" for="admin_notiz">Interne Notiz zum Creator</label>
<textarea id="admin_notiz" rows="4" maxlength="2000"></textarea>
</fieldset>
<div class="speicher-leiste">
<button type="submit" class="knopf knopf--klein" id="speichern">Speichern</button>
<span class="leise" id="stand"></span>
</div>
</form>
<!-- DAS TEAM (01.09.2026). Steht auch hier, weil ein Creator nur diese
eine Seite hat: Er soll sehen, wer ihn betreut -- mit Gesicht, nicht
nur mit Namen. Wen er sehen darf, entscheidet der Server; für ihn
sind das seine Betreuer und das Management, nicht die anderen
Creator. Für alle übrigen Rollen wird der Block hier gar nicht erst
aufgebaut, sie haben ihn auf steckbrief.html. -->
<section class="team-block" id="team-block" hidden>
<div class="team-block__kopf">
<div>
<p class="feldschild">Das Team</p>
<h2 class="team-block__titel">Wer hier mitarbeitet</h2>
</div>
<span class="team-block__zahl" id="team-zahl"></span>
</div>
<p class="team-block__text" id="team-text"></p>
<div class="team-gitter" id="team"></div>
</section>
</main>
<script src="assets/js/meldung.js?v=202609201750" defer></script>
<script src="assets/js/hochladen.js?v=202609201750" defer></script>
<script src="assets/js/nachfrage.js?v=202609201750" defer></script>
<script src="assets/js/wahl.js?v=202609201750" defer></script>
<script src="assets/js/bereiche.js?v=202609201750" defer></script>
<script src="assets/js/kopf.js?v=202609201750" defer></script>
<script src="assets/js/glocke.js?v=202609201750" defer></script>
<script src="assets/js/steckbrief.js?v=202609201750" defer></script>
<script src="assets/js/profil.js?v=202609201750" defer></script>
</body>
</html>