Files
dogfather-universe/workspace/teilen.html
T
DogFatherGitandClaude Opus 5 a0d9dc38e4 Teilen -> Workspace: aus fuenf Schritten wird ein Tipp
SCHRITT 4 AUS DEM VIDEO-PLAN
Filipe postet ein Video auf dem Handy. Bisher: Link kopieren, App
oeffnen, Bereich suchen, Feld finden, einfuegen. Fuenf Schritte, von
denen jeder einzelne der Grund sein kann, es "spaeter" zu machen -- und
spaeter heisst nie.

Jetzt: in TikTok auf "Teilen", DogFather waehlen, uebernehmen. Die neue
Seite workspace/teilen.html ist das Ziel dieses Tipps, eingetragen als
share_target in beiden Manifesten.

DER STOLPERSTEIN, DEN JEDE ANLEITUNG VERSCHWEIGT
Das Teilen-Ziel kennt drei Felder: title, text, url. Man baut es, testet
mit "?url=https://…" und ist fertig.

IM ECHTEN LEBEN KOMMT DER LINK IN `text`. Android-Apps -- TikTok
eingeschlossen -- teilen als reinen Text: "Sieh dir das an!
https://vm.tiktok.com/xyz/" steht dann in `text`, und `url` ist leer.
Wer nur `url` liest, hat eine Seite gebaut, die im Test funktioniert und
auf dem Handy eine leere Maske zeigt. Gesucht wird deshalb in allen drei
Feldern nach einem MUSTER, nicht nach einem Feldnamen -- und ein
Satzzeichen am Ende gehoert nicht zur Adresse.

SIE TRAEGT NICHT VON SELBST EIN. Die Seite kann nicht wissen, ob der
Griff in die Tasche gemeint war. Ein Video, das ungefragt in den
Highlights landet, muss jemand wieder loeschen -- das ist mehr Arbeit
als ein Tipp auf "Uebernehmen". Und wohin ist eine Frage, keine
Annahme: Highlights sind vorausgewaehlt, Treff und Anschlagbrett
stehen daneben.

GET UND NICHT POST. POST braeuchte einen Service Worker, der die
Anfrage abfaengt -- eine Stelle mehr, die kaputtgehen kann, und zwar
genau die unsichtbare: Man tippt auf Teilen und landet auf einer leeren
Seite. Hier wird nur ein Link geteilt, keine Datei.

GESEHEN, NICHT NUR GEZAEHLT
Das Bildschirmfoto auf 390 px zeigte einen Mangel, den keine Zahl
gemeldet haette: Das gewaehlte Ziel hob sich nur ueber Helligkeit ab.
Bei einer echten Wahl ist das zu wenig, und wer Farben schlecht
unterscheidet, sieht gar nichts. Jetzt: farbiger Streifen links,
deutlicherer Grund -- und ein HAKEN, der ohne jede Farbwahrnehmung
funktioniert.

EIN SICHERHEITSFUND NEBENBEI -- UND ER IST DER WICHTIGERE
pruef-alle-wege meldete: Von 126 schreibenden Wegen hatte genau EINER
keine Herkunftspruefung.

    POST /workspace/api/aufbewahrung/jetzt  ->  200

Eine beliebige fremde Seite kann im Browser eines angemeldeten
DogFather ein Formular dorthin abschicken; der Browser gibt das
Sitzungsplaetzchen mit, der Server fuehrt aus. Und ausgerechnet dieser
Weg: aufbewahrungLauf() LOESCHT abgelaufene Daten. Ein Aufruf zur
falschen Zeit loescht wirklich etwas, und im Protokoll sieht es aus,
als haette DogFather es selbst angestossen.

Die anderen 125 Wege hatten den Riegel -- dieser eine wurde beim
Hinzufuegen uebersehen. Genau dafuer geht die Pruefung ALLE Wege durch,
statt einer Liste zu glauben. Behoben, danach: "kein schreibender Weg
nimmt eine fremde Herkunft an".

DIE PRUEFUNG (server/pruef-teilen.mjs, 27 Pruefungen)
Auf 390 px gemessen -- diese Seite wird fast nur dort geoeffnet, eine
Messung auf 1400 px misst etwas, das niemand sieht. Geprueft wird der
Satz mit Link darin, das Satzzeichen am Ende, der Fall ohne Link
(Feld zum Einfuegen statt Fehlermeldung), das Eintragen, die Dublette,
das zweite Brett -- und dass share_target in BEIDEN Manifesten steht.
Ohne den Eintrag erscheint der Workspace gar nicht erst im Teilen-Menue,
und die ganze Seite waere unerreichbar, ohne dass eine der anderen
26 Pruefungen es merkt.

GEGENPROBE: nur `url` lesen statt aller drei Felder -- also genau die
naheliegende Fassung, die im Test funktioniert und auf dem Handy
versagt -> 8 Pruefungen rot.

Stempel 202609171416.

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

121 lines
4.9 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>Video übernehmen · Spicy &amp; 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=202609171416" />
<link rel="apple-touch-icon" href="/assets/img/app-symbole/workspace-180.png?v=202609171416" />
<link rel="stylesheet" href="assets/css/gate.css?v=202609171416" />
<link rel="stylesheet" href="assets/css/start.css?v=202609171416" />
<link rel="stylesheet" href="assets/css/bereich.css?v=202609171416" />
<link rel="stylesheet" href="assets/css/module.css?v=202609171416" />
<link rel="stylesheet" href="assets/css/haus.css?v=202609171416" />
</head>
<body class="start">
<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&nbsp;Dogi</a> · Video übernehmen</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">
<!-- ==================================================================
AUS „TEILEN" WIRD EIN TIPP (17.09.2026)
Schritt 4 aus dem Video-Plan.
Filipe postet ein Video auf dem Handy. Bisher hätte er den Link
kopieren, die App öffnen, den richtigen Bereich suchen und das
Feld finden müssen – fünf Schritte, von denen jeder einzelne der
Grund sein kann, es später zu machen. Und später heißt nie.
Jetzt: in TikTok auf „Teilen", „DogFather" wählen, fertig. Diese
Seite ist das Ziel dieses Tipps.
WARUM SIE NICHT SOFORT EINTRÄGT: Weil sie nicht wissen kann, ob
der Griff in die Tasche gemeint war. Ein Video, das ungefragt in
den Highlights landet, muss jemand wieder löschen – und das ist
mehr Arbeit als ein Tipp auf „Übernehmen". Sie zeigt also, was
sie verstanden hat, und wartet auf eine Bestätigung.
WOHIN, IST EINE FRAGE UND KEINE ANNAHME: Highlights sind
vorausgewählt, weil dort die Videos hingehören. Aber ein Clip
kann auch eine Antwort auf einen Wunsch sein.
============================================================== -->
<section class="kopf-zeile">
<div>
<p class="marke">Geteilt</p>
<h1 class="titel">Video übernehmen</h1>
<p class="unterzeile">
Titel und Coverbild werden von TikTok geholt – du musst nichts abtippen.
</p>
</div>
</section>
<p class="fehler" id="fehler" role="alert" aria-live="polite"></p>
<section class="teilen" id="teilen" aria-busy="true">
<p class="leise" id="ladezeile">einen Moment …</p>
<!-- Was angekommen ist. Steht ganz oben, weil es die erste Frage
beantwortet: „hat er den richtigen Link erwischt?" -->
<div class="teilen__fund" id="fund" hidden>
<p class="teilen__label">Dieser Link ist angekommen:</p>
<p class="teilen__url" id="url-text"></p>
</div>
<!-- Wohin. -->
<div class="teilen__wahl" id="wahl" hidden>
<p class="teilen__label" id="wohin-label">Wohin soll es?</p>
<div class="teilen__bretter" role="group" aria-labelledby="wohin-label" id="bretter"></div>
</div>
<div class="teilen__knoepfe" id="knoepfe" hidden>
<button type="button" class="knopf" id="uebernehmen">Übernehmen</button>
<a class="schritt" href="start.html" id="abbrechen">Doch nicht</a>
</div>
<!-- Wenn gar kein Link dabei war. Kein Formular als Strafe, sondern
ein Feld zum Einfügen – man ist ja schon hier. -->
<div class="teilen__haendisch" id="haendisch" hidden>
<label class="teilen__label" for="eingabe">Link zum Video</label>
<input type="url" id="eingabe" inputmode="url" autocomplete="off"
placeholder="https://www.tiktok.com/@dogfather0804/video/…" />
</div>
<!-- Das Ergebnis. -->
<div class="teilen__fertig" id="fertig" hidden>
<p class="teilen__fertig-satz" id="fertig-satz"></p>
<div class="teilen__knoepfe">
<a class="knopf" id="hin" href="start.html">Ansehen</a>
<a class="schritt" href="start.html">Fertig</a>
</div>
</div>
</section>
</main>
<script src="assets/js/wahl.js?v=202609171416" defer></script>
<script src="assets/js/bereiche.js?v=202609171416" defer></script>
<script src="assets/js/kopf.js?v=202609171416" defer></script>
<script src="assets/js/teilen.js?v=202609171416" defer></script>
</body>
</html>