DogFatherGitandClaude Opus 5
dd1f561f3b
DIE SYMBOLE IN DER TAGESKACHEL WAREN DIESELBEN -- OHNE IHRE GESTALTUNG
Sie kommen vom selben Bauer wie alle anderen, bekamen aber nie dessen
Aussehen: Alle Lagenregeln waren auf `.kachel__svg` eingegrenzt, und
dieses Zeichen heisst `.dran__svg`. Uebrig blieb eine flache Kontur --
daneben, auf derselben Seite, dieselben Zeichen mit drei Lichtern,
Tiefe und Randlicht. Die Regeln gelten jetzt fuer beide Traeger, und
das Feld darum ist dasselbe gefasste Schild wie auf den Kacheln.
"UNDEFINED" IM CHAT -- DERSELBE FEHLER WIE HEUTE FRUEH, NUR ALS OBJEKT
Ueber Cigdems Namen stand woertlich "UNDEFINED". Die Rollennamen
standen als Objekt in FUENF Skripten (chat.js zweimal, dateien.js,
kalender.js zweimal), in keinem davon 'spicy'.
Heute Frueh war es dieselbe Sache als Menge (`new Set([...])`), und
seitdem sucht `pruef-css-klassen.mjs` danach. Ein Muster, das nur eine
Schreibweise kennt, findet auch nur eine -- die Pruefung sucht jetzt
auch nach Rollen-OBJEKTEN, mit Gegenprobe. Die Namen stehen an EINER
Stelle in bereiche.js.
DOGFATHER UND SPICY MEDIA SIND IM CHAT FUER JEDEN ERREICHBAR
DogFather kam bisher als Nebeneffekt ueber die Betreuungskette mit
hinein, Spicy Media gar nicht -- die Rolle steht in keiner Kette, sie
steht daneben. Beide werden jetzt ausdruecklich hinzugefuegt: Eine
Zustaendigkeit, die nur zufaellig aus einer anderen Regel herausfaellt,
faellt beim naechsten Umbau genauso zufaellig wieder heraus.
Gemessen aus der Sicht eines Creators -- wer bei ihm ankommt, kommt
ueberall an.
DIE PERSONENLISTE: SPICY MEDIA SIEHT ALLES AUSSER DOGFATHER
Der Abschnitt "Spicy Media" fehlte in der Liste komplett -- die Rolle
gibt es seit heute Frueh, die Personenseite kannte sie nicht. Und Spicy
Media selbst sah dort bisher nur das Anlegen-Formular; sie bekommt
jetzt die Liste, ohne DogFathers Zeile, und weiterhin ohne Codes,
Sperren, Loeschen und Protokoll. Ueberblick ist nicht Verwaltung.
ZWEI FOLGEFEHLER, BEIDE VON DEN PRUEFUNGEN GEFUNDEN
* `next("route")` TUT DAS GEGENTEIL VON DEM, WONACH ES KLINGT. Mein
erster Versuch war eine Ausnahme-Route VOR der Schranke, die mit
`next("route")` weiterreicht -- das ueberspringt aber die restlichen
Handler DIESER Route und geht zur naechsten Schicht, also genau zur
Schranke. Spicy bekam weiter 404, die Oberflaeche verstand das als
"nicht erlaubt" und sprang zur Startseite. Gemessen: Auf
personen.html standen die Kategorien der STARTSEITE.
* DAS PROTOKOLL WARF SIE VON DER SEITE. Es bleibt bei DogFather und
antwortet ihr mit 404 -- und `hole()` versteht ein 404 unter
`/verwaltung/` als "nicht erlaubt". Die Seite baute sich auf und
sprang im naechsten Atemzug weg. Eine Abfrage, von der man weiss,
dass sie 404 gibt, stellt man nicht.
UND EINE MEINER EIGENEN NEUEN PRUEFUNGEN WAR WERTLOS
"bei ihr fehlt der Abschnitt DogFather" -- gruen, mit dem Zusatz
"(keine Abschnitte)". Sie war gruen, weil die Liste bei ihr GAR NICHT
DA war. Genau der Haken, der nichts beweist. Er steht jetzt neben einem
Ergebnis, das etwas enthaelt: "Spicy Media | Manager | ...".
18 Pruefungen gelaufen, alle gruen. pruef-spicy von 49 auf 57.
Co-Authored-By: Claude Opus 5 <[email protected]>
330 lines
17 KiB
HTML
330 lines
17 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>Dogfather Universe · Creator Workspace</title>
|
||
<meta name="robots" content="noindex, nofollow" />
|
||
<link rel="manifest" href="/workspace/app.webmanifest" />
|
||
<meta name="theme-color" content="#0674b9" />
|
||
<link rel="icon" type="image/png" href="/assets/img/app-symbole/workspace-32.png" />
|
||
<link rel="apple-touch-icon" href="/assets/img/app-symbole/workspace-180.png" />
|
||
<link rel="stylesheet" href="assets/css/gate.css?v=202609071638" />
|
||
<link rel="stylesheet" href="assets/css/start.css?v=202609071638" />
|
||
<!-- Nur die Startseite: Begrüßungskachel, Uhr, Glockenmulde. Siehe
|
||
den Hinweis in start.css -- dort stand es bis zum 07.09.2026. -->
|
||
<link rel="stylesheet" href="assets/css/heim.css?v=202609071638" />
|
||
<link rel="stylesheet" href="assets/css/module.css?v=202609071638" />
|
||
</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">
|
||
<p class="marke"><span class="marke__text">Dogfather Universe · Creator Workspace</span></p>
|
||
<div class="kopfleiste__rechts">
|
||
<span class="wer" id="wer">…</span>
|
||
<button type="button" class="abmelden" id="abmelden">Abmelden</button>
|
||
</div>
|
||
</header>
|
||
|
||
<!-- Volle Breite: Bei 880 px waren drei Kacheln je 285 px breit, und in
|
||
den groesseren Schriften brach der Text ab. Mehr Breite ist hier die
|
||
ehrlichere Loesung als kleinere Schrift. -->
|
||
<main class="inhalt inhalt--breit">
|
||
<!-- Die Begrüßung sagt jetzt etwas. "Angemeldet" stand vorher da, obwohl
|
||
man das oben rechts ohnehin sieht – die Zeile war verschenkt. An
|
||
ihrer Stelle steht der Tag, die Kalenderwoche und, wenn der Tag
|
||
einen Charakter hat, ein kurzes Wort dazu (neue Woche, Endspurt,
|
||
Wochenende). Darunter die Lage in einem Satz. -->
|
||
<section class="willkommen">
|
||
<p class="marke willkommen__datum">
|
||
<span id="datum">…</span>
|
||
<span class="willkommen__marker" id="tagesmarker" hidden></span>
|
||
</p>
|
||
<div class="willkommen__reihe">
|
||
<span class="willkommen__plakette" id="plakette" aria-hidden="true"></span>
|
||
<div class="willkommen__text">
|
||
<h1 class="titel" id="gruss">Willkommen</h1>
|
||
<p class="unterzeile">
|
||
<span id="rollentext">…</span>
|
||
<span class="willkommen__lage" id="lage" hidden></span>
|
||
</p>
|
||
</div>
|
||
|
||
<!-- ==== Rechts in der Kachel: Glocke und Uhr ==================
|
||
Die Glocke stand bisher in der Kopfleiste. Dort ist sie eine
|
||
von sechs Schaltflächen; hier ist sie das, was sie ist -- eine
|
||
Einstellung zum eigenen Tag, neben der Uhrzeit.
|
||
glocke.js setzt sie in `#glocke-platz`, wenn es den Platz auf
|
||
der Seite gibt, sonst weiterhin in die Leiste. -->
|
||
<div class="willkommen__rechts">
|
||
<div class="glocke-platz" id="glocke-platz"></div>
|
||
|
||
<!-- Die Uhr ist eine ANZEIGE, kein Bedienelement: role="timer"
|
||
mit aria-live="off". Eine Uhr, die sich jede Sekunde
|
||
vorlesen lässt, macht jede Vorleseausgabe unbenutzbar. -->
|
||
<!-- ROT UND BABYBLAU (07.09.2026, Wunsch Filipe: "soll eine
|
||
mischung von rot und babyblau haben").
|
||
|
||
Die beiden Farben sind nicht frei gewählt: Rot ist Spicy
|
||
Media, Babyblau ist DogFather -- dieselben zwei, die oben
|
||
im Kopf der Anmeldekarte nebeneinanderstehen und die im
|
||
Motiv den Neonrahmen bilden. Die Uhr trägt damit dieselbe
|
||
Handschrift wie alles andere, statt eine dritte einzuführen.
|
||
|
||
Zwei Verläufe, absichtlich GEGENLÄUFIG: Der Stundenring
|
||
geht von Rot nach Babyblau, der Sekundenring zurück. Wo der
|
||
eine warm ist, ist der andere kühl -- so bleiben die beiden
|
||
Ringe auseinanderzuhalten, auch wenn sie sich überlagern. -->
|
||
<!-- DREI RINGE (07.09.2026, Wunsch Filipe).
|
||
|
||
Aussen die STUNDE in Schwarzsilber, in der Mitte die MINUTE
|
||
in Blau, innen die SEKUNDE in Rot. Von aussen nach innen
|
||
immer schneller -- so liest man eine Uhr, ohne nachzudenken:
|
||
Der aeussere Ring bewegt sich fast nie, der innere staendig.
|
||
|
||
ALLES SCHARF. Kein blur() und kein drop-shadow auf den
|
||
Boegen. Ein Weichzeichner auf einer Linie macht sie nicht
|
||
edler, sondern unscharf -- und genau das war der Vorwurf.
|
||
Der Glanz im Silber entsteht aus dem VERLAUF selbst (hell,
|
||
dunkel, hell), nicht aus einem Schein darum herum. Genau so
|
||
glaenzt echtes Metall.
|
||
|
||
`shape-rendering="geometricPrecision"` steht bewusst dran:
|
||
Ohne das rastert der Browser duenne Boegen mit einer
|
||
schnelleren, groberen Methode. -->
|
||
<div class="uhr" id="uhr" role="timer" aria-live="off">
|
||
<svg class="uhr__ring" viewBox="0 0 100 100" aria-hidden="true"
|
||
shape-rendering="geometricPrecision">
|
||
<defs>
|
||
<!-- Schwarzsilber: vier Stopps, nicht zwei. Ein Verlauf von
|
||
Hell nach Dunkel ist ein Farbverlauf; erst der Wechsel
|
||
hell-dunkel-hell-dunkel liest sich als geschliffenes
|
||
Metall, weil eine gebogene Flaeche das Licht genau so
|
||
zurueckwirft. -->
|
||
<linearGradient id="uhr-silber" x1="0" y1="0" x2="1" y2="1">
|
||
<stop offset="0%" stop-color="#f2f6fa" />
|
||
<stop offset="26%" stop-color="#7d8794" />
|
||
<stop offset="48%" stop-color="#dfe7ef" />
|
||
<stop offset="70%" stop-color="#5b646f" />
|
||
<stop offset="100%" stop-color="#c8d2dc" />
|
||
</linearGradient>
|
||
<linearGradient id="uhr-blau" x1="0" y1="1" x2="1" y2="0">
|
||
<stop offset="0%" stop-color="#2f7fd4" />
|
||
<stop offset="50%" stop-color="#63b8f5" />
|
||
<stop offset="100%" stop-color="#a8ddff" />
|
||
</linearGradient>
|
||
<linearGradient id="uhr-rot" x1="1" y1="0" x2="0" y2="1">
|
||
<stop offset="0%" stop-color="#ff8a91" />
|
||
<stop offset="50%" stop-color="#ff4d5c" />
|
||
<stop offset="100%" stop-color="#c22636" />
|
||
</linearGradient>
|
||
</defs>
|
||
|
||
<!-- Die Bahnen. Sie stehen immer da, damit man sieht, wie
|
||
weit ein Ring noch zu laufen hat -- ein Bogen ohne Bahn
|
||
ist ein Strich ohne Bezug. -->
|
||
<circle class="uhr__bahn" cx="50" cy="50" r="45.5" />
|
||
<circle class="uhr__bahn" cx="50" cy="50" r="38.5" />
|
||
<circle class="uhr__bahn" cx="50" cy="50" r="31.5" />
|
||
|
||
<!-- REIHENFOLGE GEDREHT (07.09.2026, Wunsch Filipe: "die
|
||
minuten in der mitte und sekunden aussen").
|
||
|
||
Aussen die SEKUNDE, in der Mitte die MINUTE, innen die
|
||
STUNDE. Das ist die Anordnung eines Chronographen: Der
|
||
schnellste Zeiger laeuft auf der laengsten Bahn, weil
|
||
man dort die Bewegung am besten sieht -- und der
|
||
langsamste innen, wo eine kleine Drehung schon viel
|
||
heisst. Die alte Anordnung war die eines
|
||
Fortschrittsbalkens, nicht die einer Uhr. -->
|
||
<!-- ==== JEDER RING IST DREI LAGEN (07.09.2026) ==============
|
||
|
||
Filipe: "ich will dass der rand mit den sekunden minuten
|
||
und stunden viel krasser und geiler ist ... ultra modern,
|
||
ultra speziell, ultra profissionell, ultra phaenomenal."
|
||
|
||
Ein einzelner Strich ist eine LINIE. Ein Ring ist ein
|
||
KOERPER, und ein Koerper hat drei Merkmale, die man
|
||
zeichnen muss, sonst bleibt es eine Linie:
|
||
|
||
SCHATTEN Er liegt ueber dem Zifferblatt, also wirft
|
||
er einen. Dieselbe Bahn, dunkel, ein halbes
|
||
Rastermass nach UNTEN geschoben.
|
||
KOERPER Der Bogen selbst in seiner Farbe.
|
||
OBERKANTE Ein duennerer, hellerer Bogen, ein Drittel
|
||
nach OBEN geschoben. Weil er verschoben
|
||
ist, schaut er oben hervor und verschwindet
|
||
unten -- genau das tut eine gewoelbte Kante
|
||
bei Licht von oben.
|
||
|
||
Alle drei tragen `data-ring` und werden vom Skript
|
||
gemeinsam gesetzt. Eine Lage, die nicht mitwandert,
|
||
waere ein Schatten, der stehen bleibt -- das faellt
|
||
sofort auf und sieht kaputt aus.
|
||
|
||
KEIN Weichzeichner, nirgends: Die Tiefe entsteht aus
|
||
dem Versatz, nicht aus Unschaerfe. -->
|
||
<g class="uhr__schatten" transform="translate(0 0.55)">
|
||
<circle class="uhr__sekunde" data-ring="sekunde" cx="50" cy="50" r="45.5" />
|
||
<circle class="uhr__minute" data-ring="minute" cx="50" cy="50" r="38.5" />
|
||
<circle class="uhr__stunde" data-ring="stunde" cx="50" cy="50" r="31.5" />
|
||
</g>
|
||
|
||
<circle class="uhr__sekunde" data-ring="sekunde" cx="50" cy="50" r="45.5" id="uhr-sekunde" />
|
||
<circle class="uhr__minute" data-ring="minute" cx="50" cy="50" r="38.5" id="uhr-minute" />
|
||
<circle class="uhr__stunde" data-ring="stunde" cx="50" cy="50" r="31.5" id="uhr-stunde" />
|
||
|
||
<g class="uhr__kante" transform="translate(0 -0.4)">
|
||
<circle class="uhr__sekunde" data-ring="sekunde" cx="50" cy="50" r="45.5" />
|
||
<circle class="uhr__minute" data-ring="minute" cx="50" cy="50" r="38.5" />
|
||
<circle class="uhr__stunde" data-ring="stunde" cx="50" cy="50" r="31.5" />
|
||
</g>
|
||
</svg>
|
||
<span class="uhr__skala" aria-hidden="true"></span>
|
||
<!-- DER AUFGESETZTE ZWOELF-INDEX. Auf einem echten Zifferblatt
|
||
ist die Zwoelf nie nur ein Strich wie die anderen -- sie ist
|
||
das, woran das Auge sich ausrichtet. Ein aufgesetzter Keil
|
||
in Hausrot, mit heller Metallkante. -->
|
||
<span class="uhr__zwoelf" aria-hidden="true"></span>
|
||
<!-- DIE PERLE AM KOPF DES SEKUNDENBOGENS. Sie laeuft einmal je
|
||
Minute herum und ist das Einzige an der Uhr, das sich
|
||
BEWEGT statt nur zu wachsen. Ein Bogen zeigt einen Stand,
|
||
eine laufende Perle zeigt LEBEN -- und genau das ist der
|
||
Unterschied zwischen einer Anzeige und einem Instrument. -->
|
||
<span class="uhr__perle" id="uhr-perle" aria-hidden="true"></span>
|
||
<!-- Dieselbe Kappe fuer Minute und Stunde, auf ihren eigenen
|
||
Bahnen. Drei Koepfe statt einem: Erst dadurch liest man
|
||
die drei Ringe als drei ZEIGER und nicht als drei
|
||
Fortschrittsbalken. -->
|
||
<span class="uhr__perle uhr__perle--minute" id="uhr-perle-minute" aria-hidden="true"></span>
|
||
<span class="uhr__perle uhr__perle--stunde" id="uhr-perle-stunde" aria-hidden="true"></span>
|
||
<span class="uhr__glas" aria-hidden="true"></span>
|
||
<div class="uhr__mitte">
|
||
<span class="uhr__zeit" id="uhr-zeit">--:--</span>
|
||
<span class="uhr__sek" id="uhr-sek">--</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Was ist dran? Steht VOR den Zahlen, weil es der Unterschied
|
||
zwischen "wie viel liegt an" und "was muss ich jetzt tun" ist.
|
||
Bleibt komplett weg, wenn nichts anliegt. -->
|
||
<!-- DER TAGESBLICK (05.09.2026).
|
||
Wunsch: "eine ganze kachel, links die sachen die du da siehst und
|
||
rechts die termine vom tag, in der mitte gesplittet."
|
||
|
||
WARUM DIE BEIDEN ZUSAMMENGEHÖREN: Links steht, was zu TUN ist,
|
||
rechts, was schon FESTSTEHT. Zusammen ergeben sie die einzige
|
||
Frage, die man morgens hat -- wie sieht mein Tag aus. Getrennt
|
||
untereinander musste man scrollen, um sie zu beantworten.
|
||
|
||
Eine Kachel und nicht zwei nebeneinander: Zwei Kacheln mit Rand
|
||
und Abstand lesen sich als zwei Themen. Der Trenner in der Mitte
|
||
sagt "zwei Seiten derselben Sache".
|
||
|
||
<section> mit Überschrift je Hälfte, damit ein Vorleseprogramm
|
||
die beiden Bereiche ansagen und anspringen kann -- ein Raster
|
||
allein ist für ihn nur eine Reihenfolge. -->
|
||
<!-- PLATZ WIRD VORHER RESERVIERT, nicht nachträglich genommen.
|
||
|
||
Die Kachel war zuerst `hidden` und erschien erst, wenn ihre
|
||
Daten da waren. Sie ist aber hoch -- alles darunter sprang
|
||
dadurch nach unten. Gemessen von pruef-tempo-workspace: Der
|
||
Layout-Sprung von start.html stieg von 0 auf 0,96, zweimal
|
||
hintereinander bestätigt.
|
||
|
||
Ein Sprung ist kein Schönheitsfehler: Er ist der Grund, warum
|
||
man auf den falschen Knopf drückt. Man zielt auf etwas, und im
|
||
Moment des Klicks rutscht es weg.
|
||
|
||
Deshalb steht die Kachel von Anfang an da und hält ihre Höhe
|
||
(data-laedt="ja" → min-height im CSS). Erst wenn feststeht, dass
|
||
BEIDE Hälften leer sind, verschwindet sie -- und dieser Sprung
|
||
ist klein, weil sie dann nur die Platzhalterhöhe hatte. -->
|
||
<section class="tagesblick" id="dran-block" data-laedt="ja"
|
||
aria-labelledby="tagesblick-titel">
|
||
<h2 class="tagesblick__titel" id="tagesblick-titel">Dein Tag</h2>
|
||
|
||
<div class="tagesblick__seite tagesblick__seite--dran" id="dran-seite">
|
||
<div class="klapp-kopf tagesblick__kopf">
|
||
<p class="feldschild" id="dran-titel">Was ist dran</p>
|
||
<button type="button" class="knopf-still" id="dran-schalter"
|
||
aria-expanded="false" aria-controls="dran" hidden>
|
||
<span id="dran-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>
|
||
<ul class="dran__liste" id="dran" data-klapp="zu"
|
||
aria-labelledby="dran-titel"></ul>
|
||
<!-- Steht nur da, wenn wirklich nichts offen ist. Eine leere
|
||
Hälfte ohne Wort sieht aus wie ein Ladefehler. -->
|
||
<p class="tagesblick__leer" id="dran-leer" hidden>
|
||
Nichts offen – der Tag ist frei von Rückständen.
|
||
</p>
|
||
</div>
|
||
|
||
<div class="tagesblick__seite tagesblick__seite--heute" id="heute-seite">
|
||
<div class="klapp-kopf tagesblick__kopf">
|
||
<p class="feldschild" id="heute-titel">Heute</p>
|
||
<a class="knopf-still tagesblick__mehr" href="kalender.html">
|
||
<span>Kalender</span>
|
||
<svg class="klapp-pfeil tagesblick__mehr-pfeil" viewBox="0 0 24 24" aria-hidden="true">
|
||
<path d="m9.5 6 6 6-6 6" />
|
||
</svg>
|
||
</a>
|
||
</div>
|
||
<ol class="tagesliste" id="tagestermine" aria-labelledby="heute-titel"></ol>
|
||
<p class="tagesblick__leer" id="heute-leer" hidden>
|
||
Heute steht nichts an.
|
||
</p>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Zahlen zuerst: Das Konzept will "Prioritäten statt Datenfriedhof".
|
||
Sind alle sechs null, steht dort ein Satz statt sechs Nullen. -->
|
||
<section class="zahlen-block" id="zahlen-block">
|
||
<p class="feldschild">Deine Aufgaben</p>
|
||
<ul class="zahlen" id="zahlen"></ul>
|
||
<!-- Kein Grau-in-Grau, wenn alles erledigt ist: Ein leerer Posteingang
|
||
ist eine gute Nachricht und darf auch so aussehen. -->
|
||
<div class="zahlen-leer" id="zahlen-leer" hidden>
|
||
<span class="zahlen-leer__haken" aria-hidden="true">
|
||
<svg viewBox="0 0 24 24"><path d="m5 12.6 4.4 4.4L19 7.4" /></svg>
|
||
</span>
|
||
<span>
|
||
<strong>Nichts offen.</strong>
|
||
<span class="zahlen-leer__still">Alles abgearbeitet – gönn dir was.</span>
|
||
</span>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Die Bereiche, in drei Gruppen: was man täglich braucht, was zu
|
||
einem Creator gehört, was den Laden am Laufen hält. Aufgebaut von
|
||
start.js – dort steht auch, warum. -->
|
||
<div id="bereiche"></div>
|
||
|
||
<p class="fuss">
|
||
„Was ist dran" führt keine eigene Liste, sondern zeigt, was in den Bereichen
|
||
schon liegt – ein Punkt verschwindet von selbst, sobald die Sache erledigt ist.
|
||
Angezeigt wird nur, was du ohnehin sehen darfst.
|
||
</p>
|
||
</main>
|
||
|
||
<script src="assets/js/wahl.js?v=202609071638" defer></script>
|
||
<script src="assets/js/bereiche.js?v=202609071638" defer></script>
|
||
<script src="assets/js/kopf.js?v=202609071638" defer></script>
|
||
<script src="assets/js/glocke.js?v=202609071638" defer></script>
|
||
<script src="assets/js/start.js?v=202609071638" defer></script>
|
||
</body>
|
||
</html>
|