Filipe zu einem Bildschirmfoto: "was soll das jetzt, wieso sieht das in
gewissen seiten so scheisse aus?!"
Der Teilen-Knopf stand doppelt so hoch wie seine Nachbarn, mit dem
Zeichen UEBER dem Wort statt daneben. Es war kein Gestaltungsfehler,
sondern ein Name: `.teilen` gab es ZWEIMAL --
gate.css Knopf der Kopfleiste inline-flex, waagerecht
bereich.css Layout der Teilen-Seite flex column, 22px, 44rem
Auf den drei Seiten, die beide Dateien laden (bereich, bewerben,
teilen), gewann die spaeter geladene. Der Knopf bekam das Layout einer
ganzen Seite. "Gewisse Seiten" war exakt richtig beobachtet.
DERSELBE NAME KOSTETE AUSSERDEM DEN KNOPF: kopf.js baut ihn nur ein,
wenn `getElementById('teilen')` nichts findet -- ein Schutz gegen
doppelten Einbau. Auf teilen.html steht `<section id="teilen">` aber
schon im HTML. Dort fehlte der Knopf ganz, ohne Spur, ohne Meldung.
REPARIERT ALS REGEL, NICHT ALS EINZELFALL:
- Was kopf.js in die Leiste haengt, traegt jetzt `kopf-` davor
(kopf-teilen, kopf-sicht-wahl, kopf-sicht-feld, kopf-fremd-band).
Eine Seite darf dann heissen wie sie will -- auch "teilen", "chat"
oder "suchen", und genau diese Woerter braucht als naechstes eine
Seite.
- Die Teilen-Seite bekommt eigene Klassennamen (tl-*).
NEU: server/pruef-namen.mjs (12 Pruefungen, ohne Server, <1 s).
Es ist der ZWEITE Namenskonflikt an einem Tag -- der erste war
`.t-schritt` auf der Talente-Seite, gefunden nur durch Zaehlen im
Browser. Beide waren gruen in jeder bestehenden Prueflinie.
Gemessen, um den Schnitt zu finden, der etwas taugt:
2872 Klasse in zwei geladenen Dateien erwaehnt -> Rauschen
1887 davon mit eigener Blockdefinition -> Rauschen
12 davon mit widersprechendem `display`
6 davon ohne `display: none` -> geprueft
Mit Gegenprobe, die aus den Dateien ABGELEITET wird (die erste, fest
abgeschriebene Fassung fand nichts, weil die gewaehlte Klasse dort gar
kein `display` setzt -- eine Gegenprobe, die selbst danebenliegt,
beweist nichts).
pruef-kopf-messen: 3 -> 16 Messungen, und drei eigene Fehler behoben,
die alle dieselbe Form hatten -- zu frueh hingesehen:
1. Sie mass NUR uebersicht.html. Die laedt bereich.css nicht und war
fuer diesen Fehler blind.
2. Sie mass nur 320/390/430px. Unter 720px versteckt gate.css das
Wort "Teilen"; der Knopf bleibt klein, auch falsch angeordnet.
Filipes Bild war 1366px breit.
3. Sie wartete 300ms. kopf.js haengt Teile erst nach `/api/ich` ein
und hat ein Netz bei 1200ms. Zweiter Versuch: warten, bis `#wer`
Text hat -- SOFORT wahr, dort steht `…` als Platzhalter. Dritter:
auf Stabilitaet warten -- nach 0ms und 500ms gleich gross, also
"fertig". Erst die Mindestwartezeit (1200 aus kopf.js plus Luft)
davor machte die Messung echt.
Bewiesen an der Gegenprobe: mit dem alten Fehler meldet sie jetzt
"kopf-teilen ist 77px -- die anderen im Schnitt 43px", vorher blieb sie
gruen.
Statt einer festen Hoehe wird gefragt, ob EIN Teil aus der Reihe faellt
(> 1,6x der Schnitt seiner Nachbarn). Das waechst mit, wenn die Leiste
groesser wird, und muss bei keinem neuen Knopf nachgezogen werden.
Gruen: namen, kopf-messen, sicht, css-klassen, struktur.
Co-Authored-By: Claude Opus 5 <[email protected]>
178 lines
7.7 KiB
HTML
178 lines
7.7 KiB
HTML
<!doctype html>
|
||
<html lang="de">
|
||
<head>
|
||
<meta charset="utf-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
|
||
<title>Automationen · 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=202609171858" />
|
||
<link rel="apple-touch-icon" href="/assets/img/app-symbole/workspace-180.png?v=202609171858" />
|
||
<link rel="stylesheet" href="assets/css/gate.css?v=202609171858" />
|
||
<link rel="stylesheet" href="assets/css/start.css?v=202609171858" />
|
||
<link rel="stylesheet" href="assets/css/aufgaben.css?v=202609171858" />
|
||
<link rel="stylesheet" href="assets/css/automation.css?v=202609171858" />
|
||
<link rel="stylesheet" href="assets/css/module.css?v=202609171858" />
|
||
<!-- 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=202609171858" />
|
||
</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 Workspace</a> · Automationen</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 inhalt--breit">
|
||
|
||
<section class="kopf-zeile">
|
||
<div>
|
||
<p class="marke">Was von allein passiert</p>
|
||
<h1 class="titel">Automationen</h1>
|
||
<p class="unterzeile">
|
||
Alles hier läuft ohne Zutun. Diese Seite zeigt, was gerade greift –
|
||
und wo du es abschalten kannst.
|
||
</p>
|
||
</div>
|
||
</section>
|
||
|
||
<p class="fehler" id="fehler" role="alert" aria-live="polite"></p>
|
||
|
||
<!-- Die KI ist die einzige Automation mit Schalter: Sie kostet
|
||
Rechenzeit, die der Website gehört. -->
|
||
<section class="ki-kasten" id="ki-kasten">
|
||
<div class="ki-kasten__kopf">
|
||
<div>
|
||
<p class="marke">Lokale KI</p>
|
||
<h2 class="ki-kasten__titel">Vorschläge in Calls, Start-Check und Report</h2>
|
||
<p class="ki-kasten__text" id="ki-text">Zustand wird geprüft …</p>
|
||
</div>
|
||
<label class="schalter" id="ki-schalter-block" hidden>
|
||
<input type="checkbox" id="ki-schalter" />
|
||
<span class="schalter__gleis"><span class="schalter__punkt"></span></span>
|
||
<span class="schalter__text"><strong id="ki-schalter-text">Angeschaltet</strong></span>
|
||
</label>
|
||
</div>
|
||
<ul class="ki-kasten__daten" id="ki-daten"></ul>
|
||
</section>
|
||
|
||
<!-- Was gerade tatsächlich anliegt: dieselbe Quelle wie auf dem
|
||
Dashboard, hier aber vollständig statt gekürzt. -->
|
||
<section class="block">
|
||
<div class="block__kopf">
|
||
<h2 class="block__titel">Was gerade anliegt</h2>
|
||
<span class="block__zahl" id="hinweis-zahl">–</span>
|
||
</div>
|
||
<p class="block__frage">
|
||
Dieselben Hinweise wie auf der Übersicht, hier vollständig. Sie führen keine
|
||
eigene Liste – jeder verschwindet, sobald die Sache erledigt ist.
|
||
</p>
|
||
<div id="hinweise"><p class="leise">Wird geprüft …</p></div>
|
||
</section>
|
||
|
||
<!-- Sicherung und Zustand. Steht bewusst weit oben: Es ist die einzige
|
||
Automation, deren Ausfall alles auf einmal kosten würde. -->
|
||
<section class="zustand" id="zustand-kasten">
|
||
<div class="zustand__kopf">
|
||
<div>
|
||
<p class="marke">Sicherung & Zustand</p>
|
||
<h2 class="zustand__titel" id="zustand-titel">Wird geprüft …</h2>
|
||
<p class="zustand__text" id="zustand-text"></p>
|
||
</div>
|
||
<button type="button" class="knopf knopf--klein" id="jetzt-sichern">Jetzt sichern</button>
|
||
</div>
|
||
<ul class="zustand__daten" id="zustand-daten"></ul>
|
||
<div class="klapp-kopf zustand__listenkopf">
|
||
<p class="feldschild">Vorhandene Sicherungen</p>
|
||
<button type="button" class="knopf-still" id="sicherungen-schalter"
|
||
aria-expanded="false" aria-controls="sicherungen" hidden>
|
||
<span id="sicherungen-schalter-text">Alle zeigen</span>
|
||
<svg class="klapp-pfeil" viewBox="0 0 24 24" aria-hidden="true">
|
||
<path d="m6 9.5 6 6 6-6" />
|
||
</svg>
|
||
</button>
|
||
</div>
|
||
<div id="sicherungen" data-klapp="zu"></div>
|
||
</section>
|
||
|
||
<section class="block">
|
||
<div class="block__kopf">
|
||
<h2 class="block__titel">Läuft dauerhaft im Hintergrund</h2>
|
||
</div>
|
||
<div class="regeln" id="regeln"></div>
|
||
</section>
|
||
|
||
<!-- ==== DAS LÖSCHKONZEPT (15.09.2026) =========================
|
||
Stufe 8 aus dem Plan. Es steht auf DIESER Seite, weil hier
|
||
alles steht, was ohne Zutun läuft – und weil es genau das ist:
|
||
eine Automatik, die täglich Daten entfernt.
|
||
|
||
Sichtbar zu sein ist die halbe Sache. Ein Löschkonzept, von dem
|
||
niemand weiß, ob es greift, ist ein Dokument; eines mit Zahlen
|
||
daneben ist eine Zusicherung. Deshalb steht bei jeder Zeile,
|
||
wie viele Datensätze sie gerade betrifft. -->
|
||
<section class="block">
|
||
<div class="block__kopf">
|
||
<h2 class="block__titel">Was gelöscht wird – und was bleibt</h2>
|
||
<button type="button" class="knopf-still" id="aufb-jetzt">Jetzt aufräumen</button>
|
||
</div>
|
||
<p class="block__frage">
|
||
Personenbezogene Daten werden nicht aufgehoben, weil Platz da ist, sondern
|
||
solange es einen Grund gibt. Läuft täglich von selbst.
|
||
</p>
|
||
<div id="aufbewahrung"><p class="leise">Wird geladen …</p></div>
|
||
</section>
|
||
|
||
<section class="block">
|
||
<!-- Wie im Personen-Bereich: zugeklappt stehen nur die vier
|
||
neuesten Zeilen da, alles Weitere auf Knopfdruck. -->
|
||
<div class="block__kopf klapp-kopf">
|
||
<h2 class="block__titel">Zuletzt automatisch passiert</h2>
|
||
<button type="button" class="knopf-still" id="verlauf-schalter"
|
||
aria-expanded="false" aria-controls="verlauf" hidden>
|
||
<span id="verlauf-schalter-text">Alle zeigen</span>
|
||
<svg class="klapp-pfeil" viewBox="0 0 24 24" aria-hidden="true">
|
||
<path d="m6 9.5 6 6 6-6" />
|
||
</svg>
|
||
</button>
|
||
</div>
|
||
<p class="block__frage">Aus dem Protokoll – damit nachvollziehbar bleibt, was ohne Zutun geschah.</p>
|
||
<div id="verlauf"><p class="leise">Wird geladen …</p></div>
|
||
</section>
|
||
|
||
</main>
|
||
|
||
<script src="assets/js/wahl.js?v=202609171858" defer></script>
|
||
<script src="assets/js/bereiche.js?v=202609171858" defer></script>
|
||
<script src="assets/js/kopf.js?v=202609171858" defer></script>
|
||
<script src="assets/js/glocke.js?v=202609171858" defer></script>
|
||
<script src="assets/js/automation.js?v=202609171858" defer></script>
|
||
</body>
|
||
</html>
|