DogFatherGitandClaude Opus 5
37f1b4a8f5
Der wichtigste Fund: env(safe-area-inset-*) stand bereits im CSS, lieferte aber immer null -- viewport-fit=cover fehlte auf allen dreizehn Seiten. Der Code sah richtig aus und tat nichts. Zusammen mit apple-mobile-web-app-status-bar-style=black-translucent (schon gesetzt) hiess das: installiert lag die Kopfzeile auf einem iPhone hinter Uhr und Akkuanzeige. Behoben: - viewport-fit=cover auf allen 13 Seiten. - Vier Sicherheitsabstaende zentral benannt statt an jeder Stelle einzeln geschrieben. Kopfzeile weicht der Statusleiste, Container dem seitlichen Notch im Querformat, Fusszeile der Gestenleiste. - Der 'Ueberspringen'-Knopf des Vorspanns lag mit bottom:2rem praktisch AUF dem Entsperr-Strich (34px). Man haette die App verlassen statt uebersprungen. - Eigener Zweig fuer den installierten Betrieb: kein Gummiband- Nachfedern (sieht in einer App nach einem Fehler aus), kein Installations-Hinweis. - Die vier Sprungmarken auf der Rechtsseite waren 39px hoch -- fuenf unter dem Daumenmass. Ausgerechnet dort muss man zum Widerrufsrecht springen koennen. - 'Waehle links einen Verlauf aus': Auf dem Handy gibt es kein links, die Liste steht darueber. Richtungswort entfernt. - Sechs Reiter brauchten auf dem Handy drei Zeilen. Jetzt ein Wischstreifen mit Einrasten und Auslauf am Rand; der aktive Reiter wird herangeholt, wenn man ueber eine Kachel springt. - Uebersicht zweispaltig statt zwoelf Zeilen untereinander: 2635px -> 1924px. Eine Uebersicht, an der man vorbeiwischen muss, ist keine. Geprueft mit 55 neuen Handy-Pruefungen auf iPhone 14 Pro, Pixel 7 und 320px Breite, jeweils im Browser und im installierten Zweig. Drei Fehlalarme der eigenen Pruefung wurden begruendet ausgenommen (Honigtopf bei left:-9999px, Eingabefeld in einer Beschriftung, Inline-Link im Fliesstext -- WCAG 2.5.8 nimmt letztere ausdruecklich aus). Zwei Selbstkorrekturen an der Pruefung dokumentiert: Die Emulation von display-mode wirkt nicht (Chromium nimmt den Befehl an und ignoriert ihn) -- ohne das waeren die zwoelf 'installiert'-Zeilen ein zweiter Browser-Durchgang gewesen. Und die Messung gegen die Systemleisten mass zuerst die Kastenkante statt der Inhaltskante und meldete elf korrekte Seiten als fehlerhaft. Eine Selbstpruefung mit einem absichtlich falsch gesetzten Knopf belegt jetzt, dass die Messung echte Fehler findet. Co-Authored-By: Claude Opus 5 <[email protected]>
204 lines
10 KiB
HTML
204 lines
10 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="de" data-i18n-titel="seiten_titel">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<!-- viewport-fit=cover ist die Voraussetzung dafuer, dass env(safe-area-inset-*)
|
|
ueberhaupt einen Wert liefert. Ohne diese Angabe gibt jedes env() null zurueck
|
|
-- die Sicherheitsabstaende im CSS waeren totes Recht. Zusammen mit
|
|
apple-mobile-web-app-status-bar-style=black-translucent (siehe unten) laeuft
|
|
der Inhalt sonst installiert unter Uhr und Akkuanzeige. -->
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
|
|
<title>Portfolio — Dogfather Webdesign</title>
|
|
<meta name="description" content="Echte Projekte statt erfundener Beispiele: Dogfather Universe und Van's DIY & Bastelbedarf — mit Ausgangslage, Lösung und Ergebnis." />
|
|
<meta name="robots" content="noindex, nofollow, noarchive" />
|
|
<link rel="icon" type="image/png" href="/assets/img/favicon.png" />
|
|
<meta name="theme-color" content="#05070b" />
|
|
<link rel="manifest" href="/webdesign/app.webmanifest" />
|
|
<link rel="apple-touch-icon" href="/assets/img/wd-app-180.png" />
|
|
<meta name="apple-mobile-web-app-capable" content="yes" />
|
|
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
|
|
<meta name="apple-mobile-web-app-title" content="Dogfather Webdesign" />
|
|
<link rel="stylesheet" href="/assets/css/main.css?v=20260823wd20" />
|
|
<link rel="stylesheet" href="/assets/css/webdesign.css?v=20260823wd20" />
|
|
<style>
|
|
.pfo-projekt { overflow: hidden; padding: 0; margin-bottom: clamp(1.4rem, 3vw, 2.2rem); }
|
|
.pfo-bild {
|
|
width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top center;
|
|
border-bottom: 1px solid var(--wd-rand);
|
|
}
|
|
.pfo-inhalt { padding: clamp(1.3rem, 3vw, 2rem); }
|
|
.pfo-kopf { display: flex; flex-wrap: wrap; align-items: baseline; gap: .6rem 1rem; margin-bottom: 1rem; }
|
|
.pfo-kopf h2 { margin: 0; font-size: clamp(1.4rem, 3.2vw, 1.9rem); }
|
|
|
|
.pfo-block { margin-bottom: 1.1rem; }
|
|
.pfo-block h3 { font-size: 0.8rem; letter-spacing: .13em; text-transform: uppercase; color: var(--wd-blau); margin-bottom: .35em; }
|
|
.wd-karte--lila .pfo-block h3 { color: var(--wd-lila); }
|
|
.pfo-block p { margin: 0; }
|
|
|
|
/* Die Detailangaben stecken in einem aufklappbaren Bereich: die Karte
|
|
bleibt beim Überfliegen kurz, wer mehr will, klappt auf. Bewusst das
|
|
native Klapp-Element des Browsers, damit Tastatur und Screenreader
|
|
ohne Zusatzcode funktionieren.
|
|
(Der Tag-Name steht hier absichtlich nicht ausgeschrieben — sonst
|
|
zählt ihn die Tag-Balance-Prüfung in server/pruefe-webdesign-i18n.mjs
|
|
als öffnendes Element mit und meldet einen Fehler, den es nicht gibt.) */
|
|
.pfo-mehr { margin-top: .4rem; }
|
|
.pfo-mehr > summary {
|
|
cursor: pointer; list-style: none;
|
|
display: inline-flex; align-items: center; gap: .4rem;
|
|
min-height: 44px; padding: .5rem .1rem;
|
|
font-weight: 700; color: var(--wd-blau); font-size: .95rem;
|
|
}
|
|
.wd-karte--lila .pfo-mehr > summary { color: var(--wd-lila); }
|
|
.pfo-mehr > summary::-webkit-details-marker { display: none; }
|
|
.pfo-mehr > summary::after { content: "▾"; transition: transform var(--wd-zeit) ease; }
|
|
.pfo-mehr[open] > summary::after { transform: rotate(180deg); }
|
|
.pfo-mehr-inhalt { padding-top: .6rem; border-top: 1px solid var(--wd-rand); margin-top: .3rem; }
|
|
</style>
|
|
</head>
|
|
<body class="wd">
|
|
|
|
<div id="wd-kopf"></div>
|
|
|
|
<main id="wd-inhalt">
|
|
|
|
<section class="wd-abschnitt wd-abschnitt--eng" style="padding-top:clamp(2.4rem,6vw,4rem)">
|
|
<div class="wd-container">
|
|
<span class="wd-eyebrow" data-i18n="pf_eyebrow">Portfolio</span>
|
|
<h1 data-i18n="pf_h1">Zwei Projekte, die man anfassen kann</h1>
|
|
<p class="wd-lead" style="max-width:72ch" data-i18n="pf_lead">Beide Seiten laufen wirklich, unter ihrer eigenen Adresse, auf einem eigenen Server. Die Vorschaubilder sind echte Aufnahmen der laufenden Seiten — keine gezeichneten Entwürfe.</p>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="wd-abschnitt" style="padding-top:0">
|
|
<div class="wd-container">
|
|
|
|
<!-- ---------------- Projekt 1 ---------------- -->
|
|
<article class="wd-karte pfo-projekt wd-auf">
|
|
<img class="pfo-bild" src="/assets/img/wd-projekt-universe.jpg"
|
|
alt="Startseite von dogfather-universe.com" width="1200" height="750" loading="lazy" decoding="async"
|
|
data-i18n-attr="alt:p1_alt" />
|
|
<div class="pfo-inhalt">
|
|
<div class="pfo-kopf">
|
|
<h2 data-i18n="p1_h2">Dogfather Universe</h2>
|
|
<span class="wd-tag" data-i18n="p1_art">Umfangreiche Website</span>
|
|
</div>
|
|
|
|
<div class="pfo-block">
|
|
<h3 data-i18n="pf_ausgang">Ausgangslage</h3>
|
|
<p data-i18n="p1_ausgang">Drei getrennte Welten sollten unter ein Dach, ohne dass Besucher sich verlaufen.</p>
|
|
</div>
|
|
<div class="pfo-block">
|
|
<h3 data-i18n="pf_loesung">Umgesetzte Lösung</h3>
|
|
<p data-i18n="p1_loesung">Eine Seite mit drei farblich klar getrennten Welten, gemeinsamer Navigation und durchgängig fünf Sprachen.</p>
|
|
</div>
|
|
<div class="pfo-block">
|
|
<h3 data-i18n="pf_ergebnis">Ergebnis</h3>
|
|
<p data-i18n="p1_ergebnis">Seit August 2026 öffentlich und im täglichen Einsatz.</p>
|
|
</div>
|
|
|
|
<details class="pfo-mehr">
|
|
<summary data-i18n="pf_details">Details ansehen</summary>
|
|
<div class="pfo-mehr-inhalt">
|
|
<div class="pfo-block">
|
|
<h3 data-i18n="pf_funktionen">Wichtigste Funktionen</h3>
|
|
<ul class="wd-liste">
|
|
<li data-i18n="p1_f1">Fünf Sprachen, inklusive echtem Schweizerdeutsch</li>
|
|
<li data-i18n="p1_f2">Verwaltungsbereich mit Rollen und Rechten</li>
|
|
<li data-i18n="p1_f3">Bewerbungssystem mit Statusverfolgung</li>
|
|
<li data-i18n="p1_f4">Supporter-Abo mit Zahlungsanbindung</li>
|
|
<li data-i18n="p1_f5">Automatische Live-Erkennung des Streams</li>
|
|
<li data-i18n="p1_f6">Als App installierbar</li>
|
|
</ul>
|
|
</div>
|
|
<div class="pfo-block">
|
|
<h3 data-i18n="pf_stil">Stilrichtung</h3>
|
|
<p data-i18n="p1_stil">Dunkel und cinematisch, mit einer eigenen Leitfarbe je Welt.</p>
|
|
</div>
|
|
</div>
|
|
</details>
|
|
|
|
<div class="wd-btn-reihe" style="margin-top:1rem">
|
|
<a class="wd-btn wd-btn--zweit wd-btn--klein" href="https://dogfather-universe.com/" target="_blank" rel="noopener" data-i18n="pf_ansehen">Live ansehen</a>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
|
|
<!-- ---------------- Projekt 2 ---------------- -->
|
|
<article class="wd-karte wd-karte--lila pfo-projekt wd-auf">
|
|
<img class="pfo-bild" src="/assets/img/wd-projekt-vandiy.jpg"
|
|
alt="Startseite von vans-diy-bastelbedarf.com" width="1200" height="696" loading="lazy" decoding="async"
|
|
data-i18n-attr="alt:p2_alt" />
|
|
<div class="pfo-inhalt">
|
|
<div class="pfo-kopf">
|
|
<h2 data-i18n="p2_h2">Van's DIY & Bastelbedarf</h2>
|
|
<span class="wd-tag wd-tag--lila" data-i18n="p2_art">Onlineshop</span>
|
|
</div>
|
|
|
|
<div class="pfo-block">
|
|
<h3 data-i18n="pf_ausgang">Ausgangslage</h3>
|
|
<p data-i18n="p2_ausgang">Handgemachtes wurde bis dahin über Nachrichten verkauft.</p>
|
|
</div>
|
|
<div class="pfo-block">
|
|
<h3 data-i18n="pf_loesung">Umgesetzte Lösung</h3>
|
|
<p data-i18n="p2_loesung">Ein vollständiger Shop mit Kategorien, Artikeln, Warenkorb und Gutscheincodes.</p>
|
|
</div>
|
|
<div class="pfo-block">
|
|
<h3 data-i18n="pf_ergebnis">Ergebnis</h3>
|
|
<p data-i18n="p2_ergebnis">Artikel werden selbstständig angelegt und gepflegt, ohne Rückfrage und ohne Wartezeit.</p>
|
|
</div>
|
|
|
|
<details class="pfo-mehr">
|
|
<summary data-i18n="pf_details">Details ansehen</summary>
|
|
<div class="pfo-mehr-inhalt">
|
|
<div class="pfo-block">
|
|
<h3 data-i18n="pf_funktionen">Wichtigste Funktionen</h3>
|
|
<ul class="wd-liste">
|
|
<li data-i18n="p2_f1">Kategorien, Artikel und Varianten</li>
|
|
<li data-i18n="p2_f2">Warenkorb und Kasse, auf dem Handy geprüft</li>
|
|
<li data-i18n="p2_f3">Gutscheincodes und Versandregeln</li>
|
|
<li data-i18n="p2_f4">Adminbereich für die eigenständige Artikelpflege</li>
|
|
<li data-i18n="p2_f5">Mehrsprachig</li>
|
|
</ul>
|
|
</div>
|
|
<div class="pfo-block">
|
|
<h3 data-i18n="pf_stil">Stilrichtung</h3>
|
|
<p data-i18n="p2_stil">Dunkel mit warmen Violett- und Rosétönen, passend zum handgemachten Sortiment.</p>
|
|
</div>
|
|
</div>
|
|
</details>
|
|
|
|
<div class="wd-btn-reihe" style="margin-top:1rem">
|
|
<a class="wd-btn wd-btn--zweit wd-btn--klein" href="https://vans-diy-bastelbedarf.com/" target="_blank" rel="noopener" data-i18n="pf_ansehen">Live ansehen</a>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
|
|
<!-- Ehrliche Leerstelle statt erfundener Kundenstimmen. -->
|
|
<div class="wd-notiz wd-auf">
|
|
<p><strong data-i18n="pf_regeln_titel">Was hier bewusst fehlt</strong><br />
|
|
<span data-i18n="pf_regeln_text">Es steht kein einziges Kundenzitat auf dieser Seite. Nicht, weil es keine zufriedenen Kunden gäbe, sondern weil noch niemand ein Zitat geschrieben und freigegeben hat.</span></p>
|
|
</div>
|
|
|
|
</div>
|
|
</section>
|
|
|
|
<section class="wd-abschnitt wd-abschnitt--gehoben">
|
|
<div class="wd-container wd-container--schmal" style="text-align:center">
|
|
<h2 data-i18n="pf_cta_h2">Soll deins das dritte sein?</h2>
|
|
<p class="wd-lead" data-i18n="pf_cta_p">Ob dein Projekt hier später auftaucht, entscheidest ausschließlich du — die Aufnahme ins Portfolio ist von der Veröffentlichung deiner Seite getrennt und braucht deine ausdrückliche Erlaubnis.</p>
|
|
<div class="wd-btn-reihe" style="justify-content:center">
|
|
<a class="wd-btn wd-btn--haupt" href="/webdesign/anfrage.html" data-i18n="nav_anfrage">Projekt anfragen</a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
</main>
|
|
|
|
<div id="wd-fuss"></div>
|
|
|
|
<script src="/assets/js/i18n-wd-portfolio.js?v=20260823wd20"></script>
|
|
<script src="/assets/js/wd-core.js?v=20260823wd20"></script>
|
|
</body>
|
|
</html>
|