DogFatherGitandClaude Opus 5
b46f75484f
Filipe mit dem Bildschirmfoto der Zeilen: „ich will das viel perfekter
und geiler. will dass es viel einfacher ist. am besten so wenig wie
moeglich zu tippen. fertige sachen, bereit um ab zu gehen."
GEZAEHLT, WAS EIN EINTRAG VORHER KOSTETE -- das war der Punkt:
Manager Meeting Knopf, Dialog, Speichern 2 Klicks + Fenster
Schulung dazu die Art waehlen 3 Klicks + Fenster
Werbung dazu den Link tippen 2 Klicks + tippen
Creator dazu den Namen tippen 2 Klicks + tippen
Ein Fenster fuer die Aussage „ich war heute im Meeting" sind drei
Handgriffe fuer null Angaben. Vier Aufgaben im Monat, acht Klicks,
acht Fenster.
JETZT
Manager Meeting EIN Klick („Heute eingetragen")
Schulung EIN Klick (zwei fertige Knoepfe)
Werbung Einfuegen + Eintragen, kein Tippen
Creator ein Klick je Lead -- oder mehrere Namen auf
einmal einwerfen
Am echten Bildschirm nachgemessen: 0/2 vorher, EIN Klick, 1/2 nachher,
„Rueckgaengig" bringt 0/2 zurueck. Nicht „der Knopf ist da", sondern
„danach steht eine andere Zahl dort".
DREI ENTSCHEIDUNGEN DAHINTER
1. DER WEG NIMMT EINE LISTE. „Drei Creator auf einmal" ist EIN
Vorgang. Wer drei Namen aus Discord kopiert, hat das Monatsziel in
einem Zug erledigt -- das ist der eigentliche Gewinn, nicht der
gesparte Klick.
JEDER EINTRAG WIRD EINZELN GEPRUEFT UND EINZELN BEANTWORTET. Die
ganze Liste zurueckzuweisen, weil ein Name schon dasteht, waere
die bequeme und die falsche Loesung: Dann weiss niemand, welcher
der drei das Problem war, und tippt alles noch einmal. Geprueft
wird genau dieser Fall -- zwei gehen durch, einer wird im Klartext
abgelehnt, mit Namen.
2. KEINE SICHERHEITSABFRAGE VORHER, SONDERN „RUECKGAENGIG" DANACH.
Eine Nachfrage bei jedem Klick waere der Handgriff, den wir gerade
abgeschafft haben, in neuer Verkleidung. Sie kostet jeden; das
Zuruecknehmen kostet nur den, der sich vertippt hat. Acht Sekunden
statt drei -- lang genug, um es mit einem Daumen zu treffen.
3. DIE ZULETZT GEWAEHLTE ART IST VORGEWAEHLT -- abgeleitet aus dem
letzten Eintrag, nicht in einer Einstellung gespeichert. Eine
Spalte „Lieblingsart" waere ein zweiter Bestand, der veralten
kann; der letzte Eintrag veraltet nie.
WAS MIR DABEI AUFGEFALLEN IST
Ein Ein-Klick-Knopf macht den Doppeltipper zur wahrscheinlichsten
Fehleingabe -- bei „Heute eingetragen" merkt man nichts davon, es gibt
ja keine Angabe. Zwei Meetings an einem Tag zu VERBIETEN waere aber
falsch, sie sind moeglich. Also ein Hinweis statt einer Sperre:
„Fuer diesen Tag stehen jetzt 2. War das Absicht?" -- und das
Zuruecknehmen liegt ohnehin daneben. Mit Gegenprobe, dass beim ERSTEN
keine Warnung kommt; sonst waere sie keine Warnung, sondern ein
Begleittext.
AUSSERDEM
* Die Zeilen bauen sich beim Eintragen nicht mehr neu, sondern
ziehen nur die Zahlen nach. Sonst verschwaende das Feld, in dem
man gerade tippt, unter der Hand.
* „Einfuegen" holt den Link aus der Zwischenablage -- mit drittem
Ausgang: Firefox gibt sie ohne Erweiterung nicht her, und dann
wird das gesagt, statt dass ein Knopf stumm bleibt.
* Im Dialog drei fertige Tage (Heute / Gestern / Vorgestern) statt
eines Kalenders. Was nicht mehr in diesen Monat gehoert, wird gar
nicht erst angeboten -- am 1. und 2. fallen welche weg.
* Der Dialog heisst jetzt „Mehr Angaben" und ist die Ausnahme fuer
Notiz oder altes Datum. Dass er fuer etwas Normales gebraucht
wurde, war sein Fehler.
GEPRUEFT: 194 Pruefungen, 0 Fehler (vorher 168)
Co-Authored-By: Claude Opus 5 <[email protected]>
193 lines
8.7 KiB
HTML
193 lines
8.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>Notizen · Team Dogi</title>
|
||
<meta name="robots" content="noindex, nofollow" />
|
||
<link rel="manifest" href="/workspace/app.webmanifest" />
|
||
<meta name="theme-color" content="#06090f" />
|
||
<link rel="icon" type="image/png" href="/assets/img/app-symbole/workspace-32.png?v=202610021748" />
|
||
<link rel="apple-touch-icon" href="/assets/img/app-symbole/workspace-180.png?v=202610021748" />
|
||
<link rel="stylesheet" href="assets/css/gate.css?v=202610021748" />
|
||
<link rel="stylesheet" href="assets/css/start.css?v=202610021748" />
|
||
<link rel="stylesheet" href="assets/css/notizen.css?v=202610021748" />
|
||
<link rel="stylesheet" href="assets/css/module.css?v=202610021748" />
|
||
<link rel="stylesheet" href="assets/css/haus.css?v=202610021748" />
|
||
</head>
|
||
|
||
<body class="start" data-ton="46">
|
||
|
||
<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">Team Dogi</a> · Notizen</span></p>
|
||
<div class="kopfleiste__rechts">
|
||
<span class="wer" id="wer">…</span>
|
||
<button type="button" class="abmelden" id="abmelden">Abmelden</button>
|
||
</div>
|
||
</header>
|
||
|
||
<!-- ======================================================================
|
||
DER BLOCK (26.09.2026)
|
||
|
||
Filipe: „ich will dass du das auch wie ein notizblock erstellst.
|
||
ich will dass es übelst geil und einzigartig ist."
|
||
|
||
ZWEI SPALTEN AUF DEM RECHNER, EINE AUF DEM HANDY. Links der
|
||
Stapel, rechts das aufgeschlagene Blatt. Auf dem Handy wäre
|
||
nebeneinander beides zu schmal; dort ist der Stapel die Seite,
|
||
und ein Blatt legt sich darüber. Der Zurück-Knopf der Kopfleiste
|
||
schließt es wieder — das ist die Geste, die jeder kennt.
|
||
|
||
KEIN SPEICHERN-KNOPF. Nirgends. Wer einen Block aufschlägt und
|
||
lostippt, drückt hinterher nicht auf „sichern"; er klappt ihn zu.
|
||
Die Anzeige unten rechts sagt, was gerade passiert, und ist der
|
||
einzige Ort, an dem das Thema überhaupt vorkommt.
|
||
====================================================================== -->
|
||
<main class="inhalt inhalt--breit notizblock" id="block">
|
||
|
||
<!-- ---------- Die Kopfzeile der Seite ---------------------------- -->
|
||
<section class="kopf-zeile n-kopf">
|
||
<div>
|
||
<p class="marke">Notizen</p>
|
||
<h1 class="titel">Dein Block</h1>
|
||
<p class="unterzeile">
|
||
Schreib hinein, was dir einfällt. Es sichert sich von selbst —
|
||
und niemand außer dir sieht es.
|
||
</p>
|
||
</div>
|
||
<div class="n-kopf__griffe">
|
||
<label class="n-suche" for="suche">
|
||
<svg class="n-suche__zeichen" viewBox="0 0 24 24" aria-hidden="true">
|
||
<circle cx="10.5" cy="10.5" r="6" />
|
||
<path d="M15.2 15.2 20 20" />
|
||
</svg>
|
||
<input type="search" id="suche" class="n-suche__feld" placeholder="Suchen"
|
||
autocomplete="off" spellcheck="false" />
|
||
</label>
|
||
<button type="button" class="knopf n-neu" id="neu">
|
||
<span aria-hidden="true">+</span> Neues Blatt
|
||
</button>
|
||
</div>
|
||
</section>
|
||
|
||
<p class="fehler" id="fehler" role="alert" aria-live="polite" hidden></p>
|
||
|
||
<div class="n-raum">
|
||
|
||
<!-- ---------- Links: der Stapel ------------------------------- -->
|
||
<aside class="n-stapel" id="stapel-spalte" aria-label="Deine Blätter">
|
||
<div class="n-stapel__kopf">
|
||
<h2 class="n-stapel__titel">Blätter <span class="n-zahl" id="anzahl">–</span></h2>
|
||
<button type="button" class="n-korb-knopf" id="korb-auf" hidden>
|
||
Papierkorb <span class="n-zahl" id="korb-zahl">0</span>
|
||
</button>
|
||
</div>
|
||
<ol class="n-liste" id="liste" aria-live="polite"></ol>
|
||
<p class="n-leer" id="leer" hidden>
|
||
Noch nichts drauf. <button type="button" class="n-leer__knopf" id="leer-neu">Fang an</button>
|
||
</p>
|
||
</aside>
|
||
|
||
<!-- ---------- Rechts: das aufgeschlagene Blatt ---------------- -->
|
||
<section class="n-blatt" id="blatt" hidden aria-label="Das aufgeschlagene Blatt">
|
||
|
||
<!-- Die Perforation. Reine Zierde, deshalb aria-hidden — sie
|
||
sagt dem Auge „Block", einer Vorlesefunktion nichts. -->
|
||
<div class="n-blatt__perforation" aria-hidden="true"></div>
|
||
|
||
<header class="n-blatt__kopf">
|
||
<h2 class="n-blatt__titel" id="blatt-titel">Ohne Titel</h2>
|
||
<div class="n-blatt__griffe">
|
||
<!-- Die Haken-Bilanz. Sie erscheint nur, wenn es welche
|
||
gibt: Eine Null neben einer Notiz ohne Aufgaben wäre
|
||
eine Zahl, die etwas behauptet. -->
|
||
<span class="n-haken-stand" id="haken-stand" hidden></span>
|
||
<button type="button" class="n-griff" id="anheften" aria-pressed="false"
|
||
title="Oben anheften">
|
||
<svg viewBox="0 0 24 24" aria-hidden="true">
|
||
<path d="M9 3.6h6l-.9 5.2 3.4 3.1H6.5l3.4-3.1z" />
|
||
<path d="M12 11.9v8.5" />
|
||
</svg>
|
||
<span class="n-griff__text">Anheften</span>
|
||
</button>
|
||
<div class="n-farben" id="farben" role="group" aria-label="Papierfarbe"></div>
|
||
<button type="button" class="n-griff n-griff--weg" id="wegtun" title="In den Papierkorb">
|
||
<svg viewBox="0 0 24 24" aria-hidden="true">
|
||
<path d="M5.5 7h13" />
|
||
<path d="M7.5 7V5.2h9V7" />
|
||
<path d="M6.8 7.6 7.7 20h8.6l.9-12.4" />
|
||
</svg>
|
||
<span class="n-griff__text">Wegtun</span>
|
||
</button>
|
||
</div>
|
||
</header>
|
||
|
||
<!-- ==================================================================
|
||
DAS BLATT SELBST — ein Schreibfeld mit einer Deckschicht
|
||
|
||
Das Feld trägt den Text und den Cursor, sieht ihn aber
|
||
nicht: `color: transparent`. Sichtbar ist die Deckschicht
|
||
darüber, die denselben Text noch einmal zeichnet — nur mit
|
||
Haken, Überschriften, Strichen und Links.
|
||
|
||
WARUM DIESER UMWEG: Ein `contenteditable` kann all das
|
||
direkt, bricht aber beim Einfügen aus fremden Programmen,
|
||
beim Rückgängigmachen und bei jeder Tastatur, die über
|
||
eine Zwischenzeile schreibt. Ein Schreibfeld tut nichts
|
||
davon — es ist das Bauteil, das der Browser seit dreißig
|
||
Jahren richtig hinbekommt.
|
||
|
||
DAMIT DAS AUFGEHT, müssen beide Schichten auf den Pixel
|
||
gleich fließen: gleiche Schrift, gleiche Zeilenhöhe,
|
||
gleicher Innenabstand, gleicher Umbruch. Und die Auszeichnung
|
||
darf die BREITE eines Zeichens nie ändern — kein Fettdruck,
|
||
keine andere Schriftgröße, kein Sperren. Erlaubt sind nur
|
||
Farbe, Durchstreichen, Schatten und Rahmen. Genau danach
|
||
ist die Gestaltung gebaut, und pruef-notizen misst es nach.
|
||
================================================================== -->
|
||
<div class="n-papier" id="papier">
|
||
<div class="n-papier__deck" id="deck" aria-hidden="true"></div>
|
||
<textarea class="n-papier__feld" id="feld" spellcheck="true"
|
||
autocomplete="off" autocapitalize="sentences"
|
||
aria-label="Text dieses Blattes"></textarea>
|
||
</div>
|
||
|
||
<footer class="n-blatt__fuss">
|
||
<span class="n-stand" id="stand" aria-live="polite"></span>
|
||
<span class="n-wann" id="wann"></span>
|
||
</footer>
|
||
</section>
|
||
|
||
<!-- ---------- Der Papierkorb ---------------------------------- -->
|
||
<section class="n-korb" id="korb" hidden aria-label="Papierkorb">
|
||
<header class="n-korb__kopf">
|
||
<h2 class="n-blatt__titel">Papierkorb</h2>
|
||
<button type="button" class="knopf-still" id="korb-zu">Zurück zum Block</button>
|
||
</header>
|
||
<p class="n-korb__satz" id="korb-satz"></p>
|
||
<ol class="n-liste n-liste--korb" id="korb-liste" aria-live="polite"></ol>
|
||
</section>
|
||
|
||
</div>
|
||
</main>
|
||
|
||
<!-- bereiche.js VOR kopf.js: Dort steht `window.Bereiche`, und kopf.js
|
||
liest daraus die Leitungsrollen. -->
|
||
<script src="assets/js/bereiche.js?v=202610021748" defer></script>
|
||
<script src="assets/js/wahl.js?v=202610021748" defer></script>
|
||
<script src="assets/js/nachfrage.js?v=202610021748" defer></script>
|
||
<script src="assets/js/installieren.js?v=202610021748" defer></script>
|
||
<script src="assets/js/kopf.js?v=202610021748" defer></script>
|
||
<script src="assets/js/glocke.js?v=202610021748" defer></script>
|
||
<script src="assets/js/notizen.js?v=202610021748" defer></script>
|
||
</body>
|
||
</html>
|