DogFatherGit/dogfather-universe
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
094a69732b509a5a13e2acffcdd189b04d00aced
dogfather-universe/hasidog.html
T
DogFatherGitandClaude Sonnet 5 1f0ec994a9 Drei Handy-Nachbesserungen: Trio-Bild hinter dem Text, auffälliger Menü-Knopf, abgeschnittener Öffnen-Knopf 
Nutzer-Report mit drei Bildern vom Handy:

1. HERO-BILD SASS NICHT MEHR HINTER DEM TEXT (index.html)
   .hero-artwork hat "inset:0" -- füllt also die GESAMTE Höhe von
   .hero-cinematic, und diese Sektion umschließt nicht nur die Überschrift,
   sondern auch die 3 Welt-Kacheln darunter. Auf dem Handy wird die Sektion
   durch den 4-zeilig umbrechenden Titel + Kacheln riesig (~1570px bei
   390px Breite) -- das Trio-Bild (16:9, contain-skaliert an die Breite)
   wurde dadurch nur ~220px hoch und mittig in dieser riesigen Fläche
   zentriert, landete also als schmaler Streifen zwischen den Buttons und
   den Welt-Kacheln statt hinter der Überschrift.
   Fix: eigenes festes Seitenverhältnis (4:3) für die Bildbox auf dem
   Handy, von OBEN verankert statt zentriert, background-size auf "cover"
   -- Verlauf eigens für die neue, kürzere Box abgestimmt (die
   Desktop-Version wäre zu abrupt gewesen). Über 6 Breiten (320-768px)
   mit Playwright gegengeprüft.

2. MENÜ-KNOPF ZU UNAUFFÄLLIG (main.js + main.css, alle Seiten)
   "da soll auch menü stehen und die 3 striche" + "die kiste soll auch
   leicht eine andere farbe haben so dass sie auffällt, eine leicht blau
   tönung". Sichtbares "Menü" neben den drei Strichen ergänzt (neuer i18n-
   Schlüssel nav_toggle_label, alle 5 Sprachen) + dezente Babyblau-Tönung
   (8% Deckkraft, passend zur Markenfarbe --accent). Dabei einen
   unabhängigen, zweiten Bug gefunden und mitbehoben: durch die neue
   Knopfbreite/-höhe wurde ein Rechenfehler im geschlossenen Mobilmenü
   sichtbar -- "translateY(-110%)" reicht nur, wenn das Panel mindestens
   10x so hoch ist wie der Kopfbereich; war das nicht der Fall, ragte die
   Unterkante (der Sprachschalter) ein paar Pixel sichtbar ins Bild.
   Robusterer Ersatz: -100% + fester 200px-Puffer, unabhängig von Panel-
   und Kopfbereichshöhe. Über 3 Breiten gegengeprüft (Panel unsichtbar UND
   öffnet weiterhin normal).

3. "ÖFFNEN"-KNOPF AUF DER ZUGANGSSEITE ABGESCHNITTEN (gate.html)
   .gate-card trägt "flex: 1 1 220px" für die Desktop-Reihe (220px als
   BREITE gedacht). Sobald @media max-width:480px auf flex-direction:column
   umschaltet, gilt dieselbe Zahl als HÖHE -- die Karte wurde auf genau
   220px Höhe gequetscht. overflow:hidden setzt zusätzlich das normale
   Mindestmaß (min-height:auto) auf 0 herunter, wodurch nichts das
   Zusammenquetschen verhinderte -- der "Öffnen"-Knopf wurde unten
   abgeschnitten. Fix: flex:none in genau diesem Media-Block, Breite bleibt
   weiterhin über width:100%/max-width geregelt. An 4 Breiten x 3 Kacheln
   (Dogi/VanVan/Diene) gegengeprüft: Karten jetzt 258px statt 220px hoch,
   Knopf komplett sichtbar.

Vollständiger Regressionslauf: alle 34 Seiten bei 390px (kein Überlauf,
Menü-Knopf überall erreichbar und beschriftet), Desktop bei 1920px
unverändert (Hamburger weiterhin nur unter der bestehenden 1650px-
Schwelle sichtbar).

Cache-Busting-Version auf 20260821t erhöht.

Co-Authored-By: Claude Sonnet 5 <[email protected]>
2026-08-21 23:37:14 +02:00

193 lines
17 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" data-theme="hasidog">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>HasiDog-Welt — DOGFATHER UNIVERSE</title>
<meta name="description" content="HasiDog: Maskottchen, Musikprojekt und die verspielte, familiäre Seite von Team Dogi." />
<link rel="icon" type="image/png" href="assets/img/favicon.png" />
<link rel="manifest" href="/manifest.json" />
<meta name="theme-color" content="#0b0d10" />
<meta property="og:type" content="website" />
<meta property="og:site_name" content="DOGFATHER UNIVERSE" />
<meta property="og:title" content="HasiDog-Welt — DOGFATHER UNIVERSE" />
<meta property="og:description" content="HasiDog: Maskottchen, Musikprojekt und die verspielte, familiäre Seite von Team Dogi." />
<meta property="og:image" content="https://dogfather-universe.com/assets/img/og-cover.jpg" />
<meta property="og:url" content="https://dogfather-universe.com/hasidog.html" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="HasiDog-Welt — DOGFATHER UNIVERSE" />
<meta name="twitter:description" content="HasiDog: Maskottchen, Musikprojekt und die verspielte, familiäre Seite von Team Dogi." />
<meta name="twitter:image" content="https://dogfather-universe.com/assets/img/og-cover.jpg" />
<link rel="stylesheet" href="assets/css/main.css?v=20260821t" />
<link rel="stylesheet" href="assets/css/theme-dogfather.css?v=20260821t" />
<link rel="stylesheet" href="assets/css/theme-hasidog.css?v=20260821t" />
<link rel="stylesheet" href="assets/css/theme-spicymedia.css?v=20260821t" />
</head>
<body class="mit-hintergrund" style="--page-bg:url('/assets/img/bg-hasidog.jpg');--page-bg-mobile:url('/assets/img/bg-hasidog-mobile.jpg');">
<div id="site-header"></div>
<main>
<section class="hero page-bg">
<div class="hero-banner"><img src="/assets/img/bg-hasidog.jpg" alt="" loading="eager" /></div>
<div class="container">
<span class="eyebrow" data-i18n="hd_eyebrow">Welt 2 — HasiDog</span>
<h1 data-i18n="hd_h1">Willkommen in der HasiDog-Welt</h1>
<p class="lead worlds" data-i18n="hd_lead">Klein, Knuffig, Wuschig — verspielt, warm und familiär.</p>
</div>
</section>
<section class="section-tight">
<div class="container grid grid-2" style="align-items:center;">
<div class="collage-photo" style="aspect-ratio:1/1;border-radius:var(--radius);background:#fff;">
<img src="assets/img/sticker-hasidog-casper.png" alt="HasiDog &amp; Casper Sticker" style="width:100%;height:100%;object-fit:contain;padding:1rem;" />
</div>
<div>
<h2 data-i18n="hd_was_h2">Wer ist HasiDog?</h2>
<p data-i18n="hd_was_1">HasiDog ist mehr als ein Spitzname — es ist die verspielte, familiäre Marke rund um DogFathers Community. Unter dem Namen „Hasidog" erscheint auch die eigene Musik auf <a href="https://open.spotify.com/intl-de/artist/2INiE1VVJGUQdEURsltuJU" target="_blank" rel="noopener">Spotify</a>.</p>
<div class="btn-row">
<a class="btn-holo" href="streamer.html"><span class="btn-holo-spark" aria-hidden="true">💎</span><span class="btn-holo-text" data-i18n="hd_btn_erschaffer">Erschaffer</span><span class="btn-holo-spark" aria-hidden="true">💎</span></a>
</div>
</div>
</div>
</section>
<section class="section-tight">
<div class="container grid grid-2" style="align-items:center;">
<div>
<h2 data-i18n="hd_welt_h2">🐰 HasiDog – Eine eigene Welt voller Chaos, Herz und Fantasie</h2>
<!-- Eigener TikTok-Account von HasiDog (Nutzer-Wunsch 20.08.2026) -->
<p style="margin:.2rem 0 1.2rem;">
<a class="btn-tiktok" href="https://www.tiktok.com/@hasidog0804" target="_blank" rel="noopener"><span class="btn-tiktok-note" aria-hidden="true">♪</span><span class="btn-tiktok-text" data-i18n="hd_btn_tiktok">Zur HasiDog TikTok-Seite</span></a>
</p>
<p data-i18n="hd_welt_1">HasiDog ist mehr als nur eine Figur. Hinter HasiDog steckt eine eigene Welt aus Humor, Musik, Geschichten, Überraschungen und liebenswertem Chaos. 🩵</p>
<p data-i18n="hd_welt_2">Hier treffen freche Ideen auf große Gefühle, verrückte Momente auf echte Freundschaft und Fantasie auf Abenteuer. HasiDog steht vollkommen für sich – mit einem eigenen Charakter, einer eigenen Geschichte und einer eigenen Familie.</p>
<p class="quote" data-i18n="hd_welt_quote" style="margin-top:1.4rem;">Frech im Kopf. Chaotisch im Herzen. Einzigartig in jeder Geschichte.</p>
<p style="text-align:right;"><strong>– HasiDog 🐰</strong></p>
</div>
<div class="collage-photo frame-lila" style="aspect-ratio:auto;border-radius:var(--radius);">
<img src="assets/img/char-hasidog.jpg" alt="HasiDog — grauer Hase mit schwarzem Hoodie und Cap" style="width:100%;height:auto;display:block;" />
</div>
</div>
</section>
<section>
<div class="container">
<h2 class="text-center" data-i18n="hd_diewelt_h2">🎬 Die Welt von HasiDog</h2>
<div class="grid grid-3">
<div class="card"><span class="tag">🐰 Figur</span><h3>HasiDog</h3><p data-i18n="hd_diewelt_1">Der graue Hase mit den auffälligen blauen Augen, seinem eigenen Stil und einem Charakter, den man nicht vergisst. HasiDog ist frech, verspielt, neugierig und immer für eine Überraschung gut. 🩵</p></div>
<div class="card"><span class="tag">😂 Humor</span><h3 data-i18n="hd_diewelt_h3_2">Liebenswertes Chaos</h3><p data-i18n="hd_diewelt_2">Wo HasiDog auftaucht, bleibt selten alles ruhig. Missverständnisse, verrückte Ideen und spontane Aktionen sorgen dafür, dass niemals Langeweile entsteht.</p></div>
<div class="card"><span class="tag">🎭 Charakter</span><h3 data-i18n="hd_diewelt_h3_char">Frech, aber herzlich</h3><p data-i18n="hd_diewelt_3">HasiDog sagt, was er denkt, macht gerne Unsinn und überschreitet manchmal ganz bewusst die Grenzen des normalen Alltags. Hinter dem Chaos steckt jedoch immer ein großes Herz.</p></div>
<div class="card"><span class="tag">✨ Fantasie</span><h3 data-i18n="hd_diewelt_h3_4">Eine Welt ohne Grenzen</h3><p data-i18n="hd_diewelt_4">In der Welt von HasiDog ist alles möglich. Musik wird zum Abenteuer, Freundschaften werden zu Geschichten und aus kleinen Momenten entstehen große Erlebnisse.</p></div>
<div class="card"><span class="tag">🎉 Überraschung</span><h3 data-i18n="hd_diewelt_h3_5">Niemand weiß, was kommt</h3><p data-i18n="hd_diewelt_5">Bei HasiDog kann aus einer harmlosen Idee innerhalb weniger Sekunden ein vollkommen verrücktes Abenteuer werden. Genau diese Unberechenbarkeit macht den besonderen Charme aus.</p></div>
<div class="card"><span class="tag">🩵 Herz</span><h3 data-i18n="hd_diewelt_h3_6">Mehr als nur Spaß</h3><p data-i18n="hd_diewelt_6">Neben Humor und Chaos stehen Freundschaft, Vertrauen, Zusammenhalt und Loyalität im Mittelpunkt der HasiDog-Welt.</p></div>
</div>
</div>
</section>
<section class="section-tight">
<div class="container">
<h2 class="text-center" data-i18n="hd_familie_h2">👨‍👩‍👧‍👦 Die HasiDog-Familie</h2>
<div class="grid grid-2">
<div class="card">
<h3 data-i18n="hd_familie_h3_musik">🎵 Musik</h3>
<p data-i18n="hd_familie_musik1">Unter dem Namen HasiDog entstehen eigene Songs und musikalische Projekte auf <a href="https://open.spotify.com/intl-de/artist/2INiE1VVJGUQdEURsltuJU" target="_blank" rel="noopener">Spotify</a>. Die Musik erzählt von Spaß, Chaos, Gefühlen, Freundschaft und den besonderen Momenten dieser einzigartigen Welt. 🎧🐰</p>
<p data-i18n="hd_familie_musik2">Musik ist nicht nur Unterhaltung. Sie gibt HasiDog eine eigene Stimme und macht die Geschichten auf eine ganz neue Art erlebbar.</p>
</div>
<div class="card">
<h3 data-i18n="hd_familie_h3_casper">🐺 Casper</h3>
<p data-i18n="hd_familie_casper1"><a href="casper.html">Casper</a> ist der Husky, der zum festen Bestandteil der HasiDog-Welt geworden ist. Mit seinen zwei blauen Augen, seinem großen Herzen und seiner manchmal leicht verpeilten Art bringt er seine ganz eigene Persönlichkeit mit. 🩵🐾</p>
<p data-i18n="hd_familie_casper2">Er ist ruhig, treu, liebevoll und immer bereit, die Menschen und Freunde zu beschützen, die ihm wichtig sind. Gleichzeitig sorgt er mit seiner typischen Husky-Art für lustige, unerwartete und chaotische Momente.</p>
<p class="quote" data-i18n="hd_familie_casper_quote" style="margin-top:.6rem;">Zwei blaue Augen, ein riesiges Herz und immer mitten im Abenteuer.</p>
</div>
<div class="card">
<h3 data-i18n="hd_familie_h3_buch">📖 Das Buch — „HasiDog &amp; Casper"</h3>
<p data-i18n="hd_familie_buch">Die Geschichte von HasiDog und Casper wird auch in Buchform erzählt. Gemeinsam erleben sie Abenteuer, überwinden Herausforderungen und zeigen, wie wichtig Freundschaft, Mut und Zusammenhalt sind. 📚✨ Das Buch verbindet Fantasie, Humor und emotionale Momente zu einer Geschichte für alle, die außergewöhnliche Figuren und echte Freundschaft lieben.</p>
</div>
<div class="card">
<h3 data-i18n="hd_familie_h3_com">🩵 Die Community</h3>
<p data-i18n="hd_familie_com1">Die HasiDog-Familie besteht nicht nur aus Figuren und Geschichten. Auch die Menschen, die HasiDog begleiten, gehören zu dieser besonderen Welt.</p>
<p data-i18n="hd_familie_com2">Gemeinsam werden Ideen entwickelt, Momente gefeiert, Songs gehört und neue Abenteuer erlebt. Jeder darf lachen, träumen und ein Teil der Geschichte sein. 🤝🐰</p>
</div>
</div>
</div>
</section>
<section>
<div class="container">
<h2 class="text-center" data-i18n="hd_ausmacht_h2">🌟 Was HasiDog ausmacht</h2>
<div class="grid grid-3">
<div class="card"><h3 data-i18n="hd_ausmacht_h3_1">😂 Humorvoll</h3><p data-i18n="hd_ausmacht_1">HasiDog nimmt nicht alles zu ernst und findet selbst in gewöhnlichen Situationen einen Weg, vollkommenes Chaos entstehen zu lassen.</p></div>
<div class="card"><h3 data-i18n="hd_ausmacht_h3_2">🐰 Einzigartig</h3><p data-i18n="hd_ausmacht_2">Die Kombination aus Hase, Hund, Fantasie, Musik und Geschichten macht HasiDog zu etwas vollkommen Eigenständigem.</p></div>
<div class="card"><h3 data-i18n="hd_ausmacht_h3_3">🩵 Herzlich</h3><p data-i18n="hd_ausmacht_3">Trotz aller frechen Sprüche und verrückten Ideen besitzt HasiDog ein großes Herz und steht für Menschen und Freunde ein.</p></div>
<div class="card"><h3 data-i18n="hd_ausmacht_h3_4">🎨 Kreativ</h3><p data-i18n="hd_ausmacht_4">Songs, Geschichten, Figuren, Videos und neue Ideen machen HasiDog zu einer Welt, die sich ständig weiterentwickelt.</p></div>
<div class="card"><h3 data-i18n="hd_ausmacht_h3_5">🤝 Loyal</h3><p data-i18n="hd_ausmacht_5">Freundschaft und Zusammenhalt sind ein wichtiger Bestandteil jeder Geschichte. Wer zur HasiDog-Familie gehört, wird nicht allein gelassen.</p></div>
<div class="card"><h3 data-i18n="hd_ausmacht_h3_6">🤪 Unberechenbar</h3><p data-i18n="hd_ausmacht_6">Bei HasiDog weiß niemand genau, was als Nächstes passiert. Genau deshalb bleibt jedes Abenteuer spannend.</p></div>
</div>
</div>
</section>
<section class="section-tight">
<div class="container">
<h2 class="text-center" data-i18n="hd_inhalte_h2">🎥 Die HasiDog-Inhalte</h2>
<div class="grid grid-4">
<div class="card"><h3 data-i18n="hd_inhalte_h3_1">🐰 HasiDog-Videos</h3><p data-i18n="hd_inhalte_1">Freche Szenen, lustige Ideen, unerwartete Situationen und kleine Geschichten aus dem Leben von HasiDog.</p></div>
<div class="card"><h3 data-i18n="hd_inhalte_h3_2">🐺 Casper-Momente</h3><p data-i18n="hd_inhalte_2">Liebevolle, lustige und manchmal chaotische Augenblicke mit Casper, dem Husky mit den zwei blauen Augen.</p></div>
<div class="card"><h3 data-i18n="hd_inhalte_h3_3">🎵 Musikvideos</h3><p data-i18n="hd_inhalte_3">Visuelle Geschichten zu den HasiDog-Songs – mit Humor, Emotionen und einer eigenen kreativen Welt.</p></div>
<div class="card"><h3 data-i18n="hd_inhalte_h3_4">📖 Geschichten &amp; Abenteuer</h3><p data-i18n="hd_inhalte_4">Kurze und lange Erzählungen, in denen HasiDog und seine Freunde neue Orte entdecken und gemeinsame Herausforderungen bewältigen.</p></div>
<div class="card"><h3 data-i18n="hd_inhalte_h3_5">😂 Pranks &amp; Überraschungen</h3><p data-i18n="hd_inhalte_5">Spontane Ideen, freche Aktionen und Momente, bei denen niemand vorher weiß, wie sie enden werden.</p></div>
<div class="card"><h3 data-i18n="hd_inhalte_h3_6">🎬 Hinter den Kulissen</h3><p data-i18n="hd_inhalte_6">Einblicke in die Entstehung von Musik, Geschichten, Bildern, Videos und zukünftigen HasiDog-Projekten.</p></div>
<div class="card"><h3 data-i18n="hd_inhalte_h3_7">🩵 Emotionale Momente</h3><p data-i18n="hd_inhalte_7">Nicht jede Geschichte muss laut oder chaotisch sein. Manchmal geht es um Freundschaft, Vertrauen, Verlust, Hoffnung oder darum, füreinander da zu sein.</p></div>
<div class="card"><h3 data-i18n="hd_inhalte_h3_8">🎉 Spezialprojekte</h3><p data-i18n="hd_inhalte_8">Besondere Videos, neue Figuren, kreative Aktionen und größere Projekte, die die Welt von HasiDog Stück für Stück erweitern.</p></div>
</div>
</div>
</section>
<section>
<div class="container">
<h2 class="text-center" data-i18n="hd_hdwelt_h2">🌍 Die HasiDog-Welt</h2>
<div class="grid grid-3">
<div class="card"><h3 data-i18n="hd_hdwelt_h3_1">🏡 Zuhause</h3><p data-i18n="hd_hdwelt_1">Der Ort, an dem die meisten Ideen entstehen und aus kleinen Situationen große Abenteuer werden.</p></div>
<div class="card"><h3 data-i18n="hd_hdwelt_h3_2">🌲 Natur &amp; Freiheit</h3><p data-i18n="hd_hdwelt_2">Wälder, Wege und neue Orte bieten HasiDog und Casper den perfekten Raum für Entdeckungen und unerwartete Erlebnisse.</p></div>
<div class="card"><h3 data-i18n="hd_hdwelt_h3_3">🎧 Die Musikwelt</h3><p data-i18n="hd_hdwelt_3">Hier werden Gefühle, Humor und Geschichten in Songs verwandelt und bekommen ihren eigenen Klang.</p></div>
<div class="card"><h3 data-i18n="hd_hdwelt_h3_4">📚 Die Geschichtenwelt</h3><p data-i18n="hd_hdwelt_4">Jede Figur besitzt eine eigene Persönlichkeit, Vergangenheit und Rolle innerhalb der HasiDog-Familie.</p></div>
<div class="card"><h3 data-i18n="hd_hdwelt_h3_5">✨ Die Fantasiewelt</h3><p data-i18n="hd_hdwelt_5">Eine Welt, in der Regeln neu geschrieben werden und selbst die verrücktesten Ideen Wirklichkeit werden können.</p></div>
</div>
</div>
</section>
<section class="section-tight">
<div class="container text-center" style="max-width:70ch;">
<h2 data-i18n="hd_willkommen_h2">🩵 Willkommen in der Welt von HasiDog</h2>
<p data-i18n="hd_willkommen_1">Eine Welt voller Fantasie, Freundschaft, Musik und liebenswertem Chaos. Hier ist kein Abenteuer zu verrückt, keine Idee zu ungewöhnlich und niemand zu anders.</p>
<p data-i18n="hd_willkommen_2">Komm mit auf die Reise, lerne die HasiDog-Familie kennen und werde Teil einer Geschichte, die gerade erst begonnen hat. 🐰🐺✨</p>
<p class="quote" data-i18n="hd_willkommen_quote" style="margin-top:1.4rem;">Frech, herzlich und garantiert niemals langweilig</p>
<p><strong>– HasiDog 🩵</strong></p>
<div class="btn-row" style="justify-content:center;">
<a class="btn btn-primary" href="https://open.spotify.com/intl-de/artist/2INiE1VVJGUQdEURsltuJU" target="_blank" rel="noopener" data-i18n="hd_btn_musik">🎵 HasiDog-Musik entdecken</a>
<a class="btn btn-secondary" href="casper.html" data-i18n="hd_btn_casper2">🐺 Casper kennenlernen</a>
<a class="btn btn-outline" href="medien-hasidog.html#videos" data-i18n="hd_btn_videos">🎥 Videos ansehen</a>
<a class="btn btn-outline" href="medien-hasidog.html#fotos" data-i18n="hd_btn_galerie">📸 Galerie öffnen</a>
<a class="btn btn-outline" href="community.html" data-i18n="hd_btn_familie">👨‍👩‍👧‍👦 Die HasiDog-Familie entdecken</a>
</div>
</div>
</section>
<section class="section-tight">
<div class="container text-center">
<h2 data-i18n="hd_schlaf_h2">„Schlaft schön." 🩵</h2>
<p class="lead" data-i18n="hd_schlaf_lead" style="max-width:50ch;margin:0 auto 1.4rem;">Eine Szene aus der HasiDog-&amp;-Casper-Welt, wie sie im Buch lebendig wird.</p>
<div class="collage-photo frame-lila" style="max-width:640px;margin:0 auto;border-radius:var(--radius);aspect-ratio:1200/654;">
<img src="assets/img/hasidog-casper-book.jpg" alt="Schlaft schön — Team Dogi Illustration" style="width:100%;height:100%;object-fit:cover;" />
</div>
</div>
</section>
</main>
<div id="site-footer"></div>
<script src="assets/js/i18n-hasidog.js?v=20260821t"></script>
<script src="assets/js/main.js?v=20260821t"></script>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink