DogFatherGitandClaude Opus 5
cbaa529350
Filipe: "die seite eure aufgaben, ich will dass du die so krass perfektionierst, ich will dass du die so krass uebersichtlich machst." ERST GEMESSEN, DANN ANGEFASST. Mit sechs Leuten, so wie im echten Team: Handy, Person gewaehlt 8281 px = 10,6 Bildschirme Handy, Katalog offen 11636 px = 14,9 Bildschirme Und die Personenwahl -- der ERSTE Schritt -- begann am Handy bei Bildschirm 5,3. Man scrollte an allem vorbei, um anzufangen; und was man dabei ueberscrollte (Formular, Katalog), betraf genau die Person, die man noch gar nicht gewaehlt hatte. DER PLAN STAND SCHON DA. Im HTML steht seit dem 15.09. ein Kommentar: "1. Die Ampel. 2. Die Personen. 3. Die Karte." Genau so war es gedacht -- und genau so war es nicht mehr: Am 22.09. kam das Verteilen auf die Seite, am 23.09. der Katalog, und beide sind davor gerutscht. Der Kommentar beschrieb eine Ordnung, die es nicht mehr gab. Wieder eine Bestandsliste, die altert, waehrend jemand weiterarbeitet. Die Reihenfolge ist jetzt die, in der man denkt: Wie steht das Team? -> Wen nehme ich mir vor? -> Was gebe ich ihm? -> Was liegt schon bei ihm? -> Wie steht er da? Handy: Personenwahl beginnt bei Bildschirm 0,5 statt 5,3 Rechner: bei 0,4 statt 2,0 DIE KACHELN AM HANDY kosteten 1176 px fuer sechs Leute -- anderthalb Bildschirme nur fuer die Frage, wen man sich vornimmt. Grund war "min-width: 260px", und der Grund DAFUER steht daneben: Die drei Bilanz-Kaesten wurden sonst gequetscht. Das stimmt, solange sie NEBENEINANDER stehen. Am Handy stehen sie jetzt untereinander, jeder eine Zeile (Ziffer links, Wort rechts) -- so kommt die Kachel mit der halben Bildschirmbreite aus und zwei passen nebeneinander: 618 px. KEINE ZAHL FAELLT WEG. Wer verteilt, muss sehen, wer schon wie viel hat; das ist der Zweck dieser Kaesten. Sie werden kleiner, nicht weniger. Unter 380 px wieder eine Kachel je Zeile -- zwei haetten dort je 145 px, und "verschieden gesehen" waere nicht mehr zu lesen. DER SPRUNG BEIM KACHELKLICK IST WEG. Er war richtig, solange die Karte direkt unter der Auswahl stand. Jetzt liegen Formular, Katalog und ihre Aufgaben dazwischen -- ein Sprung zur Karte uebersaehe genau die drei Dinge, die man nach der Wahl zuerst braucht. (Filipe, 15.09.: "die seite soll sich nicht immer bewegen wenn ich auf was druecke.") Der Sprung von der Talentseite bleibt, dort ist er gemeint. UND DER CHAT KEHRT DAHIN ZURUECK, WO MAN AUFGEHOERT HAT. Die Linie "Ab hier neu" gibt es seit Tagen -- sie wurde gezeichnet und sofort ueberscrollt, weil der Verlauf beim Oeffnen ans Ende sprang. Wer nach zwei Tagen zurueckkam, landete unten und suchte die Stelle, indem er Uhrzeiten las. Jetzt springt er EINMAL beim Oeffnen dorthin, auf ein Viertel Hoehe: darueber der Zusammenhang, darunter das Neue. Danach gilt wieder die alte Regel, damit eine eintreffende Nachricht einen nicht aus dem Lesen reisst. Gemessen: entwicklung 48, entwicklung-kacheln 15, modi-katalog 133, bewerbung-aufgaben 101, chat-optik -- alle ohne Befund. NOCH NICHT FERTIG: Die Entwicklungskarte ist mit 5975 px weiterhin 72 % der Seite. Das ist der naechste Schritt. Co-Authored-By: Claude Opus 5 <[email protected]>
126 lines
5.1 KiB
HTML
126 lines
5.1 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>Video übernehmen · Spicy & 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=202609232306" />
|
||
<link rel="apple-touch-icon" href="/assets/img/app-symbole/workspace-180.png?v=202609232306" />
|
||
<link rel="stylesheet" href="assets/css/gate.css?v=202609232306" />
|
||
<link rel="stylesheet" href="assets/css/start.css?v=202609232306" />
|
||
<link rel="stylesheet" href="assets/css/bereich.css?v=202609232306" />
|
||
<link rel="stylesheet" href="assets/css/module.css?v=202609232306" />
|
||
<link rel="stylesheet" href="assets/css/haus.css?v=202609232306" />
|
||
</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 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="tl-seite" 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="tl-fund" id="fund" hidden>
|
||
<p class="tl-label">Dieser Link ist angekommen:</p>
|
||
<p class="tl-url" id="url-text"></p>
|
||
</div>
|
||
|
||
<!-- Wohin. -->
|
||
<div class="tl-wahl" id="wahl" hidden>
|
||
<p class="tl-label" id="wohin-label">Wohin soll es?</p>
|
||
<div class="tl-bretter" role="group" aria-labelledby="wohin-label" id="bretter"></div>
|
||
</div>
|
||
|
||
<div class="tl-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="tl-haendisch" id="haendisch" hidden>
|
||
<label class="tl-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="tl-fertig" id="fertig" hidden>
|
||
<p class="tl-fertig-satz" id="fertig-satz"></p>
|
||
<div class="tl-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/meldung.js?v=202609232306" defer></script>
|
||
<script src="assets/js/nachfrage.js?v=202609232306" defer></script>
|
||
|
||
|
||
<script src="assets/js/wahl.js?v=202609232306" defer></script>
|
||
<script src="assets/js/bereiche.js?v=202609232306" defer></script>
|
||
<script src="assets/js/installieren.js?v=202609232306" defer></script>
|
||
<script src="assets/js/kopf.js?v=202609232306" defer></script>
|
||
<script src="assets/js/teilen.js?v=202609232306" defer></script>
|
||
</body>
|
||
</html>
|