Adminator/geograsim
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
f22c5ebbfe442258ee65a840864bc1fe410f35b7
geograsim/App/stilauswahl.html
T
Adminator f22c5ebbfe Stand 2026-04-13: PHP/MySQL Infrastruktur, Flussmanagement, Stadt-Prototyp 
- PHP/MySQL Backend (XAMPP + Produktionsserver)
- Front-Controller, API-Endpunkte, Session-Management
- Flussmanagement-Simulation (Echtzeit, Punkt-basierter Fluss)
- Stadt & Raumplanung (Prototyp, Top-Down Kachelsystem)
- Klimawaechter 3D: Deiche kleiner, Baeume kippen, Budget angepasst
- persistence.ts: Dualer Speicher (localStorage + Server-API)
- 6 Unit-Test-Dateien fuer bestehende Simulationen

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-04-13 16:43:42 +02:00

216 lines
28 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.0">
<title>GeoGraSim — Alle 40 Stilvarianten</title>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap" rel="stylesheet">
<style>
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Inter',system-ui,sans-serif;background:#f7f6f3;color:#1a1a1a;line-height:1.6}
header{text-align:center;padding:3rem 2rem 1rem}
header h1{font-size:2.5rem;font-weight:900;letter-spacing:-0.03em}
header h1 span{color:#4a7c8a}
header .sub{color:#5a5a5a;font-size:.95rem;margin-top:.3rem}
header .count{display:inline-flex;align-items:center;gap:.4rem;margin-top:.8rem;padding:.4rem 1rem;background:#fff;border:1px solid rgba(0,0,0,0.06);border-radius:99px;font-size:.8rem;font-weight:600;color:#4a7c8a;box-shadow:0 2px 8px rgba(0,0,0,0.04)}
.filter-bar{display:flex;justify-content:center;gap:.5rem;flex-wrap:wrap;padding:1rem 2rem 2rem}
.filter-btn{padding:.4rem 1rem;border-radius:8px;font-size:.8rem;font-weight:600;border:1.5px solid rgba(0,0,0,0.08);background:#fff;color:#5a5a5a;cursor:pointer;transition:all .2s}
.filter-btn:hover,.filter-btn.active{background:#4a7c8a;color:#fff;border-color:#4a7c8a}
h2{font-size:1.4rem;font-weight:800;max-width:1200px;margin:2rem auto .8rem;padding:0 2rem;color:#4a7c8a;border-bottom:2px solid #dae8ec;padding-bottom:.4rem}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;max-width:1200px;margin:0 auto;padding:0 2rem}
.card{background:#fff;border:2px solid rgba(0,0,0,0.04);border-radius:16px;overflow:hidden;transition:all .3s;cursor:pointer;position:relative}
.card:hover{border-color:#4a7c8a;transform:translateY(-4px);box-shadow:0 10px 30px rgba(74,124,138,0.12)}
.card.selected{border-color:#4a7c8a;box-shadow:0 0 0 3px rgba(74,124,138,0.2)}
.card.selected::after{content:'✓';position:absolute;top:.7rem;right:.7rem;background:#4a7c8a;color:#fff;width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.85rem;font-weight:700;z-index:2}
.card-img{width:100%;aspect-ratio:1;object-fit:cover;display:block;transition:transform .5s}
.card:hover .card-img{transform:scale(1.04)}
.card-body{padding:1rem}
.card-body h3{font-size:.92rem;font-weight:700;margin-bottom:.2rem;display:flex;align-items:center;gap:.4rem}
.letter{display:inline-flex;align-items:center;justify-content:center;min-width:24px;height:24px;padding:0 5px;background:#dae8ec;color:#4a7c8a;border-radius:5px;font-size:.65rem;font-weight:800;flex-shrink:0}
.card-body p{font-size:.78rem;color:#5a5a5a;margin-bottom:.4rem}
.tags{display:flex;gap:.3rem;flex-wrap:wrap}
.tag{font-size:.65rem;padding:2px 7px;border-radius:5px;font-weight:600}
.tag-pro{background:#dceadd;color:#3a6b3e}
.tag-con{background:#f2ddd8;color:#8a3a2a}
footer{text-align:center;padding:2rem;color:#8a8a8a;font-size:.78rem;max-width:800px;margin:2rem auto 0;border-top:1px solid rgba(0,0,0,0.06)}
@media(max-width:900px){.grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:550px){.grid{grid-template-columns:1fr}}
</style>
</head>
<body>
<header>
<h1>🎨 Alle <span>Stilvarianten</span></h1>
<p class="sub">Welcher visuelle Stil passt am besten für ein Geografie-Lernprogramm für Jugendliche (10–14)?</p>
<div class="count">50 Stile · Klicke deine Favoriten</div>
</header>
<div class="filter-bar">
<button class="filter-btn active" onclick="filterAll()">Alle 40</button>
<button class="filter-btn" onclick="filter('hell')">☀️ Hell</button>
<button class="filter-btn" onclick="filter('dunkel')">🌙 Dunkel</button>
<button class="filter-btn" onclick="filter('kunst')">🎭 Künstlerisch</button>
<button class="filter-btn" onclick="filter('wild')">🧪 Wild & Ungewöhnlich</button>
<button class="filter-btn" onclick="filter('hand')">🧶 Handarbeit</button>
</div>
<!-- ============ HELLE STILE ============ -->
<h2 id="hell">☀️ Helle Stile (16)</h2>
<div class="grid" data-cat="hell">
<div class="card" onclick="sel(this)"><img class="card-img" src="assets/img/style-a.png" alt=""><div class="card-body"><h3><span class="letter">A</span> Isometric Low-Poly</h3><p>Geometrische 3D-Blöcke, Pastellfarben, Monument Valley trifft Schulbuch.</p><div class="tags"><span class="tag tag-pro">✓ Spielerisch</span><span class="tag tag-pro">✓ Einzigartig</span><span class="tag tag-con">✗ Zu „gamig"?</span></div></div></div>
<div class="card" onclick="sel(this)"><img class="card-img" src="assets/img/style-b.png" alt=""><div class="card-body"><h3><span class="letter">B</span> Flat Vector</h3><p>Kräftige Farben, klare Outlines. Notion/Stripe-Ästhetik.</p><div class="tags"><span class="tag tag-pro">✓ Modern</span><span class="tag tag-pro">✓ Skalierbar</span><span class="tag tag-con">✗ Nüchtern</span></div></div></div>
<div class="card" onclick="sel(this)"><img class="card-img" src="assets/img/style-d.png" alt=""><div class="card-body"><h3><span class="letter">D</span> Paper Cut-Out</h3><p>Geschichtete Papierlagen, weiche Pastelltöne, taktil. Pop-Up-Buch.</p><div class="tags"><span class="tag tag-pro">✓ Warm</span><span class="tag tag-pro">✓ Inklusiv</span><span class="tag tag-con">✗ Zu jung?</span></div></div></div>
<div class="card" onclick="sel(this)"><img class="card-img" src="assets/img/style-g.png" alt=""><div class="card-body"><h3><span class="letter">G</span> 3D Clay / Claymation</h3><p>Knete-Formen, runde Ecken, warme Beleuchtung. Apple-Ästhetik.</p><div class="tags"><span class="tag tag-pro">✓ Zugänglich</span><span class="tag tag-pro">✓ Trend 2026</span><span class="tag tag-con">✗ Aufwändig</span></div></div></div>
<div class="card" onclick="sel(this)"><img class="card-img" src="assets/img/style-h.png" alt=""><div class="card-body"><h3><span class="letter">H</span> Minimal Line Art</h3><p>Feine schwarze Linien, ein Akzentton, viel Weißraum. Infografik-Charakter.</p><div class="tags"><span class="tag tag-pro">✓ Elegant</span><span class="tag tag-pro">✓ Barrierefrei</span><span class="tag tag-con">✗ Zu erwachsen?</span></div></div></div>
<div class="card" onclick="sel(this)"><img class="card-img" src="assets/img/style-i.png" alt=""><div class="card-body"><h3><span class="letter">I</span> Soft Gradient / Bento</h3><p>Sanfte Verläufe, Apple Weather, luftig und leicht.</p><div class="tags"><span class="tag tag-pro">✓ Freundlich</span><span class="tag tag-pro">✓ Modern 2026</span><span class="tag tag-pro">✓ Lesbar</span></div></div></div>
<div class="card" onclick="sel(this)"><img class="card-img" src="assets/img/style-j.png" alt=""><div class="card-body"><h3><span class="letter">J</span> Scandinavian Minimal</h3><p>Weißraum, gedeckte Naturfarben, ruhig und vertrauenswürdig.</p><div class="tags"><span class="tag tag-pro">✓ Beruhigend</span><span class="tag tag-pro">✓ Zeitlos</span><span class="tag tag-pro">✓ Inklusiv</span></div></div></div>
<div class="card" onclick="sel(this)"><img class="card-img" src="assets/img/style-k.png" alt=""><div class="card-body"><h3><span class="letter">K</span> Friendly 3D Pastel</h3><p>Weiche 3D-Pastellformen, Headspace/Duolingo 2026.</p><div class="tags"><span class="tag tag-pro">✓ Positiv</span><span class="tag tag-pro">✓ Trend</span><span class="tag tag-pro">✓ Warm</span></div></div></div>
<div class="card" onclick="sel(this)"><img class="card-img" src="assets/img/style-l.png" alt=""><div class="card-body"><h3><span class="letter">L</span> Doodle / Sketch</h3><p>Handgezeichnet, Whiteboard-Notizen, nahbar und authentisch.</p><div class="tags"><span class="tag tag-pro">✓ Nahbar</span><span class="tag tag-pro">✓ Günstig</span><span class="tag tag-con">✗ Zu einfach?</span></div></div></div>
<div class="card" onclick="sel(this)"><img class="card-img" src="assets/img/style-m.png" alt=""><div class="card-body"><h3><span class="letter">M</span> Geometric Bauhaus</h3><p>Klare Formen, helle Farben, Mondrian trifft Schulatlas.</p><div class="tags"><span class="tag tag-pro">✓ Strukturiert</span><span class="tag tag-pro">✓ Bildend</span><span class="tag tag-con">✗ Zu abstrakt?</span></div></div></div>
<div class="card" onclick="sel(this)"><img class="card-img" src="assets/img/style-n.png" alt=""><div class="card-body"><h3><span class="letter">N</span> Botanical / Nature Journal</h3><p>Feine Linien, natürliche Farben, wie ein modernes Naturkundeheft.</p><div class="tags"><span class="tag tag-pro">✓ Wissenschaftlich</span><span class="tag tag-pro">✓ Edel</span><span class="tag tag-con">✗ Nicht „digital"</span></div></div></div>
<div class="card" onclick="sel(this)"><img class="card-img" src="assets/img/style-o.png" alt=""><div class="card-body"><h3><span class="letter">O</span> Glasmorphism Light</h3><p>Milchglas-Panels über Gradient. Premium, 2026.</p><div class="tags"><span class="tag tag-pro">✓ Sehr modern</span><span class="tag tag-pro">✓ Premium</span><span class="tag tag-con">✗ Lesbarkeit</span></div></div></div>
<div class="card" onclick="sel(this)"><img class="card-img" src="assets/img/style-p.png" alt=""><div class="card-body"><h3><span class="letter">P</span> Neubrutalism</h3><p>Dicke schwarze Rahmen, rohe Formen, kräftige Farben. Frech.</p><div class="tags"><span class="tag tag-pro">✓ Auffällig</span><span class="tag tag-pro">✓ Trendy</span><span class="tag tag-con">✗ Polarisierend</span></div></div></div>
<div class="card" onclick="sel(this)"><img class="card-img" src="assets/img/style-x.png" alt=""><div class="card-body"><h3><span class="letter">X</span> Origami Papier</h3><p>Gefaltete Papierlandschaften, präzise Knicke, sanfte Schatten.</p><div class="tags"><span class="tag tag-pro">✓ Einzigartig</span><span class="tag tag-pro">✓ Taktil</span><span class="tag tag-con">✗ Aufwändig</span></div></div></div>
<div class="card" onclick="sel(this)"><img class="card-img" src="assets/img/style-r.png" alt=""><div class="card-body"><h3><span class="letter">R</span> Pixel Art 16-bit</h3><p>Retro-Gaming SNES. Charmant, nostalgisch, fröhlich.</p><div class="tags"><span class="tag tag-pro">✓ Spielerisch</span><span class="tag tag-pro">✓ Günstig</span><span class="tag tag-con">✗ Nicht ernst genug?</span></div></div></div>
<div class="card" onclick="sel(this)"><img class="card-img" src="assets/img/style-aa.png" alt=""><div class="card-body"><h3><span class="letter">AA</span> Infographic Flat</h3><p>Dashboard-Ästhetik: Weltkarte mit Datenpunkten und Charts.</p><div class="tags"><span class="tag tag-pro">✓ Daten-affin</span><span class="tag tag-pro">✓ Klar</span><span class="tag tag-con">✗ Kalt</span></div></div></div>
</div>
<!-- ============ DUNKLE STILE ============ -->
<h2 id="dunkel">🌙 Dunkle Stile (5)</h2>
<div class="grid" data-cat="dunkel">
<div class="card" onclick="sel(this)"><img class="card-img" src="assets/img/style-e.png" alt=""><div class="card-body"><h3><span class="letter">E</span> Neon Glassmorphism</h3><p>Dunkler Grund, leuchtende Neon-Linien, Gaming-Generation.</p><div class="tags"><span class="tag tag-pro">✓ Cool</span><span class="tag tag-pro">✓ Energetisch</span><span class="tag tag-con">✗ Dunkel</span></div></div></div>
<div class="card" onclick="sel(this)"><img class="card-img" src="assets/img/style-s.png" alt=""><div class="card-body"><h3><span class="letter">S</span> Blueprint Technical</h3><p>Weiße Linien auf tiefem Blau. Ingenieur-Ästhetik.</p><div class="tags"><span class="tag tag-pro">✓ Wissenschaftlich</span><span class="tag tag-pro">✓ Einzigartig</span><span class="tag tag-con">✗ Einschüchternd</span></div></div></div>
<div class="card" onclick="sel(this)"><img class="card-img" src="assets/img/style-w.png" alt=""><div class="card-body"><h3><span class="letter">W</span> Chalkboard / Tafel</h3><p>Kreide auf dunkelgrüner Tafel. Nostalgisch, schulisch.</p><div class="tags"><span class="tag tag-pro">✓ Vertraut</span><span class="tag tag-con">✗ „Alte Schule"</span><span class="tag tag-con">✗ Lesbarkeit</span></div></div></div>
<div class="card" onclick="sel(this)"><img class="card-img" src="assets/img/style-ad.png" alt=""><div class="card-body"><h3><span class="letter">AD</span> Cyberpunk Holographic</h3><p>Holografisch-irideszent, Glitch, Neon. Futuristisch.</p><div class="tags"><span class="tag tag-pro">✓ Wow-Faktor</span><span class="tag tag-con">✗ Dunkel</span><span class="tag tag-con">✗ Ablenkend</span></div></div></div>
<div class="card" onclick="sel(this)"><img class="card-img" src="assets/img/style-z.png" alt=""><div class="card-body"><h3><span class="letter">Z</span> Satelliten-Realismus</h3><p>NASA-Fotografie. Die Erde aus dem All. Ehrfurchtgebietend.</p><div class="tags"><span class="tag tag-pro">✓ Real</span><span class="tag tag-pro">✓ Beeindruckend</span><span class="tag tag-con">✗ Kein eigener Stil</span></div></div></div>
</div>
<!-- ============ KÜNSTLERISCHE STILE ============ -->
<h2 id="kunst">🎭 Künstlerische Stile (13)</h2>
<div class="grid" data-cat="kunst">
<div class="card" onclick="sel(this)"><img class="card-img" src="assets/img/style-c.png" alt=""><div class="card-body"><h3><span class="letter">C</span> Retro-Futurismus / Risograph</h3><p>Körnige Texturen, 3–4 Farben, cooles Wissenschaftsposter.</p><div class="tags"><span class="tag tag-pro">✓ Cool-Faktor</span><span class="tag tag-pro">✓ Wiedererkennbar</span><span class="tag tag-con">✗ „Alt"?</span></div></div></div>
<div class="card" onclick="sel(this)"><img class="card-img" src="assets/img/style-f.png" alt=""><div class="card-body"><h3><span class="letter">F</span> Aquarell / Watercolor</h3><p>Weiche Texturen, natürliche Farben, Naturkunde-Ästhetik.</p><div class="tags"><span class="tag tag-pro">✓ Einzigartig</span><span class="tag tag-pro">✓ Beruhigend</span><span class="tag tag-con">✗ Wenig „digital"</span></div></div></div>
<div class="card" onclick="sel(this)"><img class="card-img" src="assets/img/style-q.png" alt=""><div class="card-body"><h3><span class="letter">Q</span> Japanischer Holzschnitt</h3><p>Hokusai-inspiriert: Wellen, Berge, traditionelle Palette.</p><div class="tags"><span class="tag tag-pro">✓ Einzigartig</span><span class="tag tag-pro">✓ Kulturbezug</span><span class="tag tag-con">✗ Aneignung?</span></div></div></div>
<div class="card" onclick="sel(this)"><img class="card-img" src="assets/img/style-t.png" alt=""><div class="card-body"><h3><span class="letter">T</span> Collage / Mixed Media</h3><p>Gerissenes Papier, Foto-Fragmente, Washi-Tape. Projektboard.</p><div class="tags"><span class="tag tag-pro">✓ Kreativ</span><span class="tag tag-con">✗ Unruhig</span><span class="tag tag-con">✗ Inkonsistent</span></div></div></div>
<div class="card" onclick="sel(this)"><img class="card-img" src="assets/img/style-u.png" alt=""><div class="card-body"><h3><span class="letter">U</span> Gradient Mesh</h3><p>Fließende Farbverläufe, keine harten Kanten. Abstrakt, meditativ.</p><div class="tags"><span class="tag tag-pro">✓ Modern</span><span class="tag tag-con">✗ Wenig konkret</span></div></div></div>
<div class="card" onclick="sel(this)"><img class="card-img" src="assets/img/style-v.png" alt=""><div class="card-body"><h3><span class="letter">V</span> Buntglas / Stained Glass</h3><p>Schwarze Bleilinien, Juwelenfarben. Mittelalter trifft Modern.</p><div class="tags"><span class="tag tag-pro">✓ Dekorativ</span><span class="tag tag-con">✗ Schwer für UI</span></div></div></div>
<div class="card" onclick="sel(this)"><img class="card-img" src="assets/img/style-y.png" alt=""><div class="card-body"><h3><span class="letter">Y</span> Linolschnitt / Block Print</h3><p>Kräftig geschnitzte Formen, 2–3 Farben, handgemacht.</p><div class="tags"><span class="tag tag-pro">✓ Markant</span><span class="tag tag-con">✗ Zu grob für Details</span></div></div></div>
<div class="card" onclick="sel(this)"><img class="card-img" src="assets/img/style-ab.png" alt=""><div class="card-body"><h3><span class="letter">AB</span> Art Nouveau / Jugendstil</h3><p>Fließende Linien, dekorative Rahmen, Mucha-Ästhetik.</p><div class="tags"><span class="tag tag-pro">✓ Elegant</span><span class="tag tag-con">✗ Aufwändig</span><span class="tag tag-con">✗ „Alt"?</span></div></div></div>
<div class="card" onclick="sel(this)"><img class="card-img" src="assets/img/style-ac.png" alt=""><div class="card-body"><h3><span class="letter">AC</span> Memphis Design (80er)</h3><p>Kräftige Geometrie, Squiggly Lines, Terrazzo. Retro-cool.</p><div class="tags"><span class="tag tag-pro">✓ Energetisch</span><span class="tag tag-con">✗ Visuell laut</span></div></div></div>
<div class="card" onclick="sel(this)"><img class="card-img" src="assets/img/style-ae.png" alt=""><div class="card-body"><h3><span class="letter">AE</span> Gouache Poster Paint</h3><p>Dicke Pinselstriche, lebendige matte Farben. Handgemaltes Reiseposter.</p><div class="tags"><span class="tag tag-pro">✓ Warm</span><span class="tag tag-pro">✓ Künstlerisch</span><span class="tag tag-pro">✓ Einladend</span></div></div></div>
<div class="card" onclick="sel(this)"><img class="card-img" src="assets/img/style-af.png" alt=""><div class="card-body"><h3><span class="letter">AF</span> Topografische Karte</h3><p>Höhenlinien, Elevation-Farben. Kartografie trifft Kunst.</p><div class="tags"><span class="tag tag-pro">✓ Geo-DNA</span><span class="tag tag-pro">✓ Elegant</span></div></div></div>
<div class="card" onclick="sel(this)"><img class="card-img" src="assets/img/style-ag.png" alt=""><div class="card-body"><h3><span class="letter">AG</span> Halftone / Rasterdruck</h3><p>Zeitungsdruck: Punktraster, CMYK-Versatz, editorial.</p><div class="tags"><span class="tag tag-pro">✓ Distinktiv</span><span class="tag tag-con">✗ Schwer lesbar klein</span></div></div></div>
<div class="card" onclick="sel(this)"><img class="card-img" src="assets/img/style-ah.png" alt=""><div class="card-body"><h3><span class="letter">AH</span> Studio Ghibli / Anime</h3><p>Saftige Hügel, dramatische Wolken, rote Dächer. Magisch und warm.</p><div class="tags"><span class="tag tag-pro">✓ Emotional</span><span class="tag tag-pro">✓ Beliebt</span><span class="tag tag-con">✗ Lizenz-Assoziation</span></div></div></div>
</div>
<!-- ============ WILDE / UNGEWÖHNLICHE STILE ============ -->
<h2 id="wild">🧪 Wild & Ungewöhnlich (6)</h2>
<div class="grid" data-cat="wild">
<div class="card" onclick="sel(this)"><img class="card-img" src="assets/img/style-ai.png" alt=""><div class="card-body"><h3><span class="letter">AI</span> Unterwasser-Perspektive</h3><p>Blick von UNTER der Wasseroberfläche nach oben. Küstenlinie durch Wasser verzerrt, Lichtbrechung, Korallen im Vordergrund. Niemand macht das.</p><div class="tags"><span class="tag tag-pro">✓ Völlig einzigartig</span><span class="tag tag-pro">✓ Immersiv</span><span class="tag tag-con">✗ Schwer für alle Themen</span></div></div></div>
<div class="card" onclick="sel(this)"><img class="card-img" src="assets/img/style-aj.png" alt=""><div class="card-body"><h3><span class="letter">AJ</span> Röntgen / X-Ray</h3><p>Die Erde wie ein medizinischer Scan: transluzente Schichten, Städte als leuchtende Knoten, biolumineszente Ästhetik. Die Welt durchleuchtet.</p><div class="tags"><span class="tag tag-pro">✓ Wissenschafts-Wow</span><span class="tag tag-pro">✓ Surreal</span><span class="tag tag-con">✗ Dunkel</span></div></div></div>
<div class="card" onclick="sel(this)"><img class="card-img" src="assets/img/style-ak.png" alt=""><div class="card-body"><h3><span class="letter">AK</span> Stickerei / Embroidery</h3><p>Weltkarte gestickt auf Leinen: Wälder als Knötchenstich, Ozeane als Plattstich, Berge als Kettenstich. Sichtbare Stofftextur, Fadenwerk. Wie Omas schönstes Stickbild.</p><div class="tags"><span class="tag tag-pro">✓ Überwältigend einzigartig</span><span class="tag tag-pro">✓ Warm</span><span class="tag tag-pro">✓ Handwerk</span></div></div></div>
<div class="card" onclick="sel(this)"><img class="card-img" src="assets/img/style-al.png" alt=""><div class="card-body"><h3><span class="letter">AL</span> Daten-Regen / Data Rain</h3><p>Die Weltkarte besteht aus fließenden Zahlenströmen: Amber für Wüste, Blau für Ozean, Grün für Wald. Die Welt IST Daten. Auf hellem Grund.</p><div class="tags"><span class="tag tag-pro">✓ Technik + Geo</span><span class="tag tag-pro">✓ Einzigartig</span><span class="tag tag-con">✗ Abstrakt</span></div></div></div>
<div class="card" onclick="sel(this)"><img class="card-img" src="assets/img/style-am.png" alt=""><div class="card-body"><h3><span class="letter">AM</span> Kinderzeichnung Deluxe</h3><p>Landschaft wie von einem talentierten 8-Jährigen mit Buntstiften. Wackelige aber selbstsichere Linien, große glückliche Sonne, Strichmännchen-Bäume — aber auf Premium-Papier als Kunst gerahmt. Maximal entwaffnend.</p><div class="tags"><span class="tag tag-pro">✓ Entwaffnend</span><span class="tag tag-pro">✓ Angstfrei</span><span class="tag tag-pro">✓ Einzigartig</span><span class="tag tag-con">✗ Nicht ernst genug?</span></div></div></div>
<div class="card" onclick="sel(this)"><img class="card-img" src="assets/img/style-an.png" alt=""><div class="card-body"><h3><span class="letter">AN</span> Thermografie / Wärmebild</h3><p>Infrarotkamera-Ansicht: Lila (kalt) über Blau, Grün, Gelb zu Rot/Weiß (heiß). Stadt als helle Hotspots, Fluss als kaltes blaues Band. Die Welt durch Temperatur sehen.</p><div class="tags"><span class="tag tag-pro">✓ Wissenschaftlich</span><span class="tag tag-pro">✓ Faszinierend</span><span class="tag tag-con">✗ Dunkel</span><span class="tag tag-con">✗ Einseitig</span></div></div></div>
</div>
<!-- ============ HANDARBEIT STILE ============ -->
<h2 id="hand">🧶 Handarbeit & Haptik (10)</h2>
<div class="grid" data-cat="hand">
<div class="card" onclick="sel(this)"><img class="card-img" src="assets/img/style-ao.png" alt=""><div class="card-body"><h3><span class="letter">AO</span> Zerrissene Papierfetzen</h3><p>Landschaft aus gerissenen Papierschnipseln auf weißem Grund. Sichtbare Risskanten, Klebereste, überlappende Lagen. Roh und ehrlich.</p><div class="tags"><span class="tag tag-pro">✓ Roh-authentisch</span><span class="tag tag-pro">✓ Taktil</span><span class="tag tag-con">✗ Unordentlich?</span></div></div></div>
<div class="card" onclick="sel(this)"><img class="card-img" src="assets/img/style-ap.png" alt=""><div class="card-body"><h3><span class="letter">AP</span> Washi Tape Landkarte</h3><p>Weltkarte aus bunten Washi-Tape-Streifen: Blumen-, Streifen-, Punkt-Muster. Tape-Kanten sichtbar. Bullet-Journal-Ästhetik.</p><div class="tags"><span class="tag tag-pro">✓ Zielgruppen-nah</span><span class="tag tag-pro">✓ Hübsch</span><span class="tag tag-pro">✓ Hell</span></div></div></div>
<div class="card" onclick="sel(this)"><img class="card-img" src="assets/img/style-aq.png" alt=""><div class="card-body"><h3><span class="letter">AQ</span> Filz & Stoff Applikation</h3><p>Berge aus grauem Wollfilz, Bäume aus grünen Filzkreisen, Fluss aus blauem Satinband. Sichtbare Nähte. Wie ein Quiet Book.</p><div class="tags"><span class="tag tag-pro">✓ Warm</span><span class="tag tag-pro">✓ Inklusiv</span><span class="tag tag-pro">✓ Einzigartig</span></div></div></div>
<div class="card" onclick="sel(this)"><img class="card-img" src="assets/img/style-ar.png" alt=""><div class="card-body"><h3><span class="letter">AR</span> Gepresste Blumen & Botanik</h3><p>Landschaft aus echten gepressten Blumen und Blättern: Farne als Berge, Lavendel als Himmel, Gräser als Felder. Herbarium-Ästhetik.</p><div class="tags"><span class="tag tag-pro">✓ Museumsreif</span><span class="tag tag-pro">✓ Naturverbunden</span><span class="tag tag-con">✗ Sehr speziell</span></div></div></div>
<div class="card" onclick="sel(this)"><img class="card-img" src="assets/img/style-as.png" alt=""><div class="card-body"><h3><span class="letter">AS</span> Buntstift auf Packpapier</h3><p>Landschaft mit Buntstiften auf Packpapier gezeichnet. Sichtbare Striche, warmer Braunton scheint durch. Ehrlich wie ein Schülerheft.</p><div class="tags"><span class="tag tag-pro">✓ Nahbar</span><span class="tag tag-pro">✓ Warm</span><span class="tag tag-pro">✓ Günstig</span></div></div></div>
<div class="card" onclick="sel(this)"><img class="card-img" src="assets/img/style-at.png" alt=""><div class="card-body"><h3><span class="letter">AT</span> Kartoffelstempel</h3><p>Landschaft aus gestempelten Formen: Kreise, Dreiecke, Quadrate. Ungleichmäßige Farbe, charmante Unperfektheit. Volksschul-Energie.</p><div class="tags"><span class="tag tag-pro">✓ Spielerisch</span><span class="tag tag-pro">✓ Fröhlich</span><span class="tag tag-con">✗ Zu kindlich?</span></div></div></div>
<div class="card" onclick="sel(this)"><img class="card-img" src="assets/img/style-au.png" alt=""><div class="card-body"><h3><span class="letter">AU</span> Pappmaché Relief</h3><p>3D-Reliefkarte aus Pappmaché, von oben fotografiert. Echte Schatten, Zeitungstext scheint durch die Farbe. Werkstatt-Ästhetik.</p><div class="tags"><span class="tag tag-pro">✓ Dreidimensional</span><span class="tag tag-pro">✓ Taktil</span><span class="tag tag-con">✗ Aufwändig</span></div></div></div>
<div class="card" onclick="sel(this)"><img class="card-img" src="assets/img/style-av.png" alt=""><div class="card-body"><h3><span class="letter">AV</span> Scherenschnitt</h3><p>Filigrane Silhouette aus einem Blatt geschnitten: Berge, Bäume, Häuser, Vögel — alles verbunden. Schweizer/deutsche Volkskunst-Tradition.</p><div class="tags"><span class="tag tag-pro">✓ Elegant</span><span class="tag tag-pro">✓ Kulturell</span><span class="tag tag-pro">✓ Wiedererkennbar</span></div></div></div>
<div class="card" onclick="sel(this)"><img class="card-img" src="assets/img/style-aw.png" alt=""><div class="card-body"><h3><span class="letter">AW</span> Aquarell-Skizzenbuch</h3><p>Offenes Skizzenbuch mit schnellen Aquarell-Feldskizzen. Bleistift-Unterzeichnung sichtbar, Wasserflecken am Rand. Authentisches Feldtagebuch.</p><div class="tags"><span class="tag tag-pro">✓ Authentisch</span><span class="tag tag-pro">✓ Wissenschaftlich</span><span class="tag tag-pro">✓ Warm</span></div></div></div>
<div class="card" onclick="sel(this)"><img class="card-img" src="assets/img/style-ax.png" alt=""><div class="card-body"><h3><span class="letter">AX</span> Makramee & Textilkunst</h3><p>Landschaft aus Makramee-Knoten und Webkunst. Berge aus Knotenmuster, Ozean aus blauer Garnfranse, Sonne aus goldenem Webkreis. Boho-Handwerk.</p><div class="tags"><span class="tag tag-pro">✓ Textur-reich</span><span class="tag tag-pro">✓ Modern-Handwerk</span><span class="tag tag-con">✗ Nische</span></div></div></div>
</div>
<footer>
<p>💡 <strong>Mein Ranking für Jugendliche (10–14):</strong></p>
<p>🥇 <strong>AH (Ghibli)</strong> — emotional, warm, bei der Zielgruppe extrem beliebt<br>
🥈 <strong>AK (Stickerei)</strong> — überwältigend einzigartig, warm, niemand hat sowas<br>
🥉 <strong>AE (Gouache)</strong> — handgemalt, einladend, hebt sich komplett ab<br>
4. <strong>J (Scandinavian)</strong> — zeitlos, inklusiv, unsere aktuelle Wahl für die UI<br>
5. <strong>AF (Topografisch)</strong> — fachlich perfekt, Geo-DNA pur<br>
6. <strong>AM (Kinderzeichnung)</strong> — der mutigste Move. Maximal angstfrei.</p>
<p style="margin-top:.8rem">Stile lassen sich kombinieren: z.B. Skandinavische UI + Ghibli-Themenbilder + Infografik-Daten.</p>
</footer>
<script>
function sel(el){el.classList.toggle('selected')}
function filter(cat){
document.querySelectorAll('.filter-btn').forEach(b=>b.classList.remove('active'));
event.target.classList.add('active');
document.querySelectorAll('h2, .grid').forEach(el=>{
const id = el.id || el.dataset.cat;
el.style.display = (id===cat) ? '' : 'none';
});
}
function filterAll(){
document.querySelectorAll('.filter-btn').forEach(b=>b.classList.remove('active'));
event.target.classList.add('active');
document.querySelectorAll('h2, .grid').forEach(el=>el.style.display='');
}
</script>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink