Adminator
f22c5ebbfe
- 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>
575 lines
31 KiB
HTML
575 lines
31 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="de">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>GeoGraSim — Geografie erleben</title>
|
||
<link rel="icon" type="image/png" href="assets/img/logo.png">
|
||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap" rel="stylesheet">
|
||
<style>
|
||
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
|
||
|
||
:root {
|
||
--bg: #f7f6f3; --bg2: #efeee9; --white: #fff;
|
||
--text: #1a1a1a; --text2: #4a4a4a; --text3: #9a9a9a;
|
||
--fjord: #4a7c8a; --fjord-l: #dae8ec; --fjord-d: #3a6470;
|
||
--moss: #5a8a5e; --moss-l: #dceadd;
|
||
--sand: #c4a35a; --sand-l: #f2eacc;
|
||
--coral: #c07a6b; --coral-l: #f2ddd8;
|
||
--r: 20px; --rs: 12px;
|
||
}
|
||
|
||
html { scroll-behavior: smooth; }
|
||
body { font-family: 'Inter', system-ui, sans-serif; background: var(--bg); color: var(--text); overflow-x: hidden; -webkit-font-smoothing: antialiased; line-height: 1.6; }
|
||
|
||
/* ===== NAV ===== */
|
||
.nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; padding: .7rem 0; transition: all .4s; }
|
||
.nav.scrolled { backdrop-filter: blur(20px); background: rgba(247,246,243,0.9); box-shadow: 0 1px 0 rgba(0,0,0,0.04); }
|
||
.nav .w { max-width: 1200px; margin: 0 auto; padding: 0 2rem; display: flex; justify-content: space-between; align-items: center; }
|
||
.nav-brand { display: flex; align-items: center; gap: .5rem; font-weight: 800; font-size: 1.05rem; color: var(--fjord); text-decoration: none; }
|
||
.nav-brand img { width: 30px; height: 30px; border-radius: 7px; }
|
||
.nav-links { display: flex; gap: .2rem; align-items: center; }
|
||
.nav-links a { color: var(--text2); text-decoration: none; padding: .4rem .8rem; border-radius: 8px; font-size: .82rem; font-weight: 500; transition: all .2s; }
|
||
.nav-links a:hover { background: rgba(0,0,0,0.04); }
|
||
.btn { display: inline-flex; align-items: center; gap: .4rem; padding: .55rem 1.3rem; border-radius: var(--rs); font-weight: 600; font-size: .82rem; text-decoration: none; border: none; cursor: pointer; transition: all .25s cubic-bezier(.22,1,.36,1); }
|
||
.btn-p { background: var(--fjord); color: #fff; box-shadow: 0 2px 10px rgba(74,124,138,.2); }
|
||
.btn-p:hover { background: var(--fjord-d); transform: translateY(-2px); box-shadow: 0 6px 20px rgba(74,124,138,.25); }
|
||
.btn-o { background: transparent; color: var(--fjord); border: 1.5px solid rgba(74,124,138,.3); }
|
||
.btn-o:hover { border-color: var(--fjord); background: var(--fjord-l); }
|
||
|
||
/* ===== HERO ===== */
|
||
.hero { height: 100vh; min-height: 700px; position: relative; overflow: hidden; display: flex; align-items: center; }
|
||
.hero canvas { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; }
|
||
.hero-content { position: relative; z-index: 2; max-width: 1200px; margin: 0 auto; padding: 0 2rem; width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; }
|
||
.hero-text h1 { font-size: clamp(2.2rem, 4.5vw, 3.8rem); font-weight: 900; line-height: 1.05; letter-spacing: -.04em; margin-bottom: .8rem; }
|
||
.hero-text h1 em { font-style: normal; color: var(--fjord); }
|
||
.hero-text .lead { font-size: 1.05rem; color: var(--text2); max-width: 420px; margin-bottom: 1.5rem; }
|
||
.hero-btns { display: flex; gap: .6rem; }
|
||
.hero-visual { display: flex; justify-content: center; perspective: 800px; }
|
||
.hero-card { width: 340px; background: var(--white); border-radius: var(--r); box-shadow: 0 20px 60px rgba(0,0,0,.1); overflow: hidden; transform: rotateY(-8deg) rotateX(3deg); transition: transform .5s cubic-bezier(.22,1,.36,1); }
|
||
.hero-card:hover { transform: rotateY(0) rotateX(0); }
|
||
.hero-card img { width: 100%; aspect-ratio: 1; object-fit: cover; }
|
||
.hero-card-body { padding: 1rem; }
|
||
.hero-card-body h3 { font-size: .9rem; font-weight: 700; }
|
||
.hero-card-body p { font-size: .75rem; color: var(--text3); }
|
||
.hero-mini { position: absolute; background: var(--white); border-radius: var(--rs); box-shadow: 0 8px 30px rgba(0,0,0,.08); padding: .6rem .9rem; font-size: .75rem; font-weight: 600; }
|
||
.hero-mini-1 { top: 10%; right: -10px; transform: rotate(3deg); animation: bobA 4s ease-in-out infinite; }
|
||
.hero-mini-2 { bottom: 15%; left: -20px; transform: rotate(-2deg); animation: bobB 5s ease-in-out infinite; }
|
||
@keyframes bobA { 0%,100% { transform: rotate(3deg) translateY(0); } 50% { transform: rotate(3deg) translateY(-8px); } }
|
||
@keyframes bobB { 0%,100% { transform: rotate(-2deg) translateY(0); } 50% { transform: rotate(-2deg) translateY(6px); } }
|
||
|
||
/* ===== TICKER ===== */
|
||
.ticker { background: var(--fjord); padding: .9rem 0; overflow: hidden; white-space: nowrap; }
|
||
.ticker-inner { display: inline-flex; animation: scroll 35s linear infinite; }
|
||
.ticker-item { color: rgba(255,255,255,.85); font-weight: 600; font-size: .8rem; padding: 0 1.8rem; }
|
||
@keyframes scroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
|
||
|
||
/* ===== SECTION UTILS ===== */
|
||
.sec { padding: 5rem 0; }
|
||
.w { max-width: 1200px; margin: 0 auto; padding: 0 2rem; }
|
||
.label { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--fjord); }
|
||
.sec-title { font-size: 2.2rem; font-weight: 900; letter-spacing: -.03em; margin: .3rem 0; }
|
||
.sec-sub { color: var(--text2); max-width: 460px; font-size: .95rem; }
|
||
|
||
/* ===== STATS ===== */
|
||
.stats { margin-top: 2rem; position: relative; z-index: 3; }
|
||
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: .8rem; }
|
||
.stat { background: var(--white); border-radius: var(--r); padding: 1.3rem; text-align: center; box-shadow: 0 6px 20px rgba(0,0,0,.05); border: 1px solid rgba(0,0,0,.04); }
|
||
.stat-n { font-size: 2rem; font-weight: 900; letter-spacing: -.03em; }
|
||
.stat-l { font-size: .72rem; color: var(--text3); margin-top: .1rem; }
|
||
|
||
/* ===== FLOATING EMOJIS ===== */
|
||
.emoji-layer { position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; overflow: hidden; }
|
||
.emoji-float { position: absolute; opacity: .06; animation: emojiDrift linear infinite; }
|
||
@keyframes emojiDrift {
|
||
0% { transform: translateY(105vh) rotate(0deg); }
|
||
100% { transform: translateY(-10vh) rotate(360deg); }
|
||
}
|
||
|
||
/* ===== SIM CARDS GRID ===== */
|
||
.sim-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: 2rem; }
|
||
.sim-card { background: var(--white); border-radius: 16px; overflow: hidden; position: relative; box-shadow: 0 4px 16px rgba(0,0,0,.06); border: 1.5px solid rgba(0,0,0,.05); transition: all .35s cubic-bezier(.22,1,.36,1); cursor: pointer; padding: .6rem; }
|
||
.sim-card:hover { transform: translateY(-5px); box-shadow: 0 12px 35px rgba(74,124,138,.12); border-color: rgba(74,124,138,.2); }
|
||
.sim-card-img { height: 150px; overflow: hidden; position: relative; border-radius: 10px; }
|
||
.sim-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
|
||
.sim-card:hover .sim-card-img img { transform: scale(1.06); }
|
||
.sim-card-body { padding: .8rem .4rem .4rem; }
|
||
.sim-card-body h3 { font-size: .88rem; font-weight: 700; margin-bottom: .2rem; }
|
||
.sim-card-body p { font-size: .75rem; color: var(--text2); margin-bottom: .5rem; }
|
||
.sim-card-tags { display: flex; gap: .3rem; flex-wrap: wrap; }
|
||
.sim-tag { font-size: .62rem; font-weight: 600; padding: 2px 8px; border-radius: 6px; }
|
||
.st1 { background: var(--fjord-l); color: var(--fjord); }
|
||
.st2 { background: var(--moss-l); color: var(--moss); }
|
||
.st3 { background: var(--sand-l); color: var(--sand); }
|
||
.st4 { background: var(--coral-l); color: var(--coral); }
|
||
.st-time { background: #f0eeea; color: var(--text3); }
|
||
|
||
/* ===== FEATURES ===== */
|
||
.feat-sec { background: var(--bg2); position: relative; }
|
||
.feat-sec::before { content: ''; position: absolute; top: -60px; left: 0; right: 0; height: 120px; background: var(--bg2); transform: skewY(-2.5deg); z-index: -1; }
|
||
.feat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: 2rem; }
|
||
.feat { background: var(--white); border-radius: var(--r); padding: 1.6rem; border: 1px solid rgba(0,0,0,.03); transition: all .3s; }
|
||
.feat:hover { transform: translateY(-4px); box-shadow: 0 8px 25px rgba(0,0,0,.06); }
|
||
.feat-ico { font-size: 1.8rem; margin-bottom: .6rem; }
|
||
.feat h3 { font-size: .88rem; font-weight: 700; margin-bottom: .2rem; }
|
||
.feat p { font-size: .78rem; color: var(--text2); }
|
||
|
||
/* ===== KLASSEN ===== */
|
||
.kl-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-top: 2rem; }
|
||
.kl { border-radius: var(--r); padding: 1.8rem 1.3rem; color: #fff; transition: all .3s; position: relative; overflow: hidden; }
|
||
.kl:hover { transform: translateY(-5px) rotate(0deg) !important; }
|
||
.kl h3 { font-size: 1.3rem; font-weight: 800; }
|
||
.kl .ksub { font-size: .82rem; opacity: .9; margin: .2rem 0 .6rem; }
|
||
.kl .kdet { font-size: .75rem; opacity: .7; line-height: 1.5; }
|
||
.kl::after { content: ''; position: absolute; top: -30px; right: -30px; width: 100px; height: 100px; background: rgba(255,255,255,.08); border-radius: 50%; }
|
||
.k1 { background: linear-gradient(135deg, #4a7c8a, #5a9aaa); transform: rotate(-1.2deg); }
|
||
.k2 { background: linear-gradient(135deg, #5a8a5e, #6aaa6e); transform: rotate(.8deg); }
|
||
.k3 { background: linear-gradient(135deg, #c4a35a, #d4b36a); transform: rotate(-.6deg); }
|
||
.k4 { background: linear-gradient(135deg, #c07a6b, #d08a7b); transform: rotate(1deg); }
|
||
|
||
/* ===== CTA ===== */
|
||
.cta { text-align: center; padding: 5rem 2rem; }
|
||
.cta h2 { font-size: 2.5rem; font-weight: 900; letter-spacing: -.03em; }
|
||
.cta h2 em { font-style: normal; color: var(--fjord); }
|
||
.cta p { color: var(--text2); margin: .5rem 0 1.5rem; }
|
||
|
||
/* ===== FOOTER ===== */
|
||
footer { padding: 1.5rem; text-align: center; color: var(--text3); font-size: .72rem; border-top: 1px solid rgba(0,0,0,.04); }
|
||
footer a { color: var(--fjord); text-decoration: none; }
|
||
|
||
/* ===== SCROLL REVEAL ===== */
|
||
.reveal { opacity: 0; transform: translateY(40px); transition: all .8s cubic-bezier(.22,1,.36,1); }
|
||
.reveal.visible { opacity: 1; transform: translateY(0); }
|
||
|
||
/* ===== RESPONSIVE ===== */
|
||
@media (max-width: 900px) {
|
||
.hero-content { grid-template-columns: 1fr; text-align: center; }
|
||
.hero-text .lead { margin: 0 auto .8rem; }
|
||
.hero-btns { justify-content: center; }
|
||
.hero-visual { display: none; }
|
||
.stats-grid, .kl-grid { grid-template-columns: repeat(2, 1fr); }
|
||
.feat-grid { grid-template-columns: 1fr; }
|
||
.sim-grid { grid-template-columns: repeat(2, 1fr) !important; }
|
||
.nav-links { display: none; }
|
||
}
|
||
@media (max-width: 550px) {
|
||
.sim-grid { grid-template-columns: 1fr !important; }
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<!-- NAV -->
|
||
<nav class="nav" id="nav">
|
||
<div class="w">
|
||
<a href="#" class="nav-brand"><img src="assets/img/logo.png" alt="">GeoGraSim</a>
|
||
<div class="nav-links">
|
||
<a href="#sims">Simulationen</a>
|
||
<a href="#features">Features</a>
|
||
<a href="#klassen">Klassen</a>
|
||
<a href="#" class="btn btn-p" style="margin-left:.3rem">Anmelden</a>
|
||
</div>
|
||
</div>
|
||
</nav>
|
||
|
||
<!-- HERO -->
|
||
<section class="hero">
|
||
<canvas id="sc"></canvas>
|
||
<div class="hero-content">
|
||
<div class="hero-text">
|
||
<h1>Geografie<br><em>erleben.</em><br>Nicht nur lesen.</h1>
|
||
<p class="lead">Interaktive Simulationen für den GW-Unterricht. Klimawandel verstehen. Erdbeben simulieren. Städte planen. Zukunft gestalten.</p>
|
||
<div class="hero-btns">
|
||
<a href="#sims" class="btn btn-p">🚀 Entdecken</a>
|
||
<a href="#features" class="btn btn-o">Für Lehrkräfte</a>
|
||
</div>
|
||
</div>
|
||
<div class="hero-visual">
|
||
<div class="hero-card">
|
||
<img src="assets/img/card-climate.png" alt="">
|
||
<div class="hero-card-body">
|
||
<h3>🌡️ Treibhauseffekt-Simulator</h3>
|
||
<p>CO₂ verändern → Temperatur beobachten. 20 min.</p>
|
||
</div>
|
||
</div>
|
||
<div class="hero-mini hero-mini-1">⚡ 24 Module</div>
|
||
<div class="hero-mini hero-mini-2">📊 330 Quellen</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- TICKER -->
|
||
<div class="ticker"><div class="ticker-inner">
|
||
<span class="ticker-item">🌡️ Treibhauseffekt</span><span class="ticker-item">🌋 Plattentektonik</span><span class="ticker-item">⚡ Energiemix</span><span class="ticker-item">🏗️ Raumplanung</span><span class="ticker-item">🌍 Planetary Boundaries</span><span class="ticker-item">🤝 Klimakonferenz</span><span class="ticker-item">📊 Bevölkerungsdynamik</span><span class="ticker-item">💧 Wasserkreislauf</span><span class="ticker-item">🏙️ Urbanisierung</span><span class="ticker-item">♻️ Nachhaltigkeit</span><span class="ticker-item">🗺️ Geomedien</span><span class="ticker-item">🇦🇹 Lehrplan 2023</span>
|
||
<span class="ticker-item">🌡️ Treibhauseffekt</span><span class="ticker-item">🌋 Plattentektonik</span><span class="ticker-item">⚡ Energiemix</span><span class="ticker-item">🏗️ Raumplanung</span><span class="ticker-item">🌍 Planetary Boundaries</span><span class="ticker-item">🤝 Klimakonferenz</span><span class="ticker-item">📊 Bevölkerungsdynamik</span><span class="ticker-item">💧 Wasserkreislauf</span><span class="ticker-item">🏙️ Urbanisierung</span><span class="ticker-item">♻️ Nachhaltigkeit</span><span class="ticker-item">🗺️ Geomedien</span><span class="ticker-item">🇦🇹 Lehrplan 2023</span>
|
||
</div></div>
|
||
|
||
<!-- FLOATING EMOJIS -->
|
||
<div class="emoji-layer" id="emojiLayer"></div>
|
||
|
||
<!-- STATS -->
|
||
<section class="sec" style="padding-top:3rem;padding-bottom:2rem">
|
||
<div class="w stats reveal">
|
||
<div class="stats-grid">
|
||
<div class="stat"><div class="stat-n" style="color:var(--fjord)">24</div><div class="stat-l">Simulationen</div></div>
|
||
<div class="stat"><div class="stat-n" style="color:var(--moss)">4</div><div class="stat-l">Schulstufen</div></div>
|
||
<div class="stat"><div class="stat-n" style="color:var(--sand)">~25'</div><div class="stat-l">pro Einsatz</div></div>
|
||
<div class="stat"><div class="stat-n" style="color:var(--coral)">330</div><div class="stat-l">Forschungsquellen</div></div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- SIMULATIONS -->
|
||
<section class="sec" id="sims" style="padding-top:2rem">
|
||
<div class="w">
|
||
<div class="reveal">
|
||
<span class="label">Simulationen</span>
|
||
<h2 class="sec-title">Lernziele, die man<br>erleben kann.</h2>
|
||
<p class="sec-sub">Jedes Modul: lehrplankonform, evidenzbasiert, 20–30 Minuten.</p>
|
||
</div>
|
||
<div class="sim-grid reveal">
|
||
|
||
<a href="game.html" class="sim-card" style="text-decoration:none;color:inherit">
|
||
<div class="sim-card-img"><img src="assets/img/card-climate.png" alt=""></div>
|
||
<div class="sim-card-body">
|
||
<h3>🌡️ Klimawächter (2D)</h3>
|
||
<p>Inselstaat bis 2100 durch die Klimakrise führen. 75 Jahre, echte Klimaphysik.</p>
|
||
<div class="sim-card-tags"><span class="sim-tag st1">1. Klasse</span><span class="sim-tag st-time">⏱ 20 min</span></div>
|
||
</div>
|
||
</a>
|
||
|
||
<a href="game-3d.html" class="sim-card" style="text-decoration:none;color:inherit">
|
||
<div class="sim-card-img"><img src="assets/img/card-climate.png" alt=""></div>
|
||
<div class="sim-card-body">
|
||
<h3>🌊 Klimawächter (3D) <span style="background:linear-gradient(135deg,#4a7c8a,#6aa8b8);color:#fff;font-size:.58rem;padding:2px 6px;border-radius:4px;font-weight:800;letter-spacing:.04em;vertical-align:middle">NEU</span></h3>
|
||
<p>Dieselbe Insel — jetzt in echtem 3D. Steigender Meeresspiegel wird sichtbar.</p>
|
||
<div class="sim-card-tags"><span class="sim-tag st1">1. Klasse</span><span class="sim-tag st-time">⏱ 20 min</span></div>
|
||
</div>
|
||
</a>
|
||
|
||
<a href="erdbeben.html" class="sim-card" style="text-decoration:none;color:inherit">
|
||
<div class="sim-card-img"><img src="assets/img/card-tectonic.png" alt=""></div>
|
||
<div class="sim-card-body">
|
||
<h3>🌋 Stadtplaner*in in Erdbebenregion</h3>
|
||
<p>50 Jahre Stadt in Erdbebenzone bauen. Naturgefahr ≠ Naturkatastrophe — Bauqualität entscheidet.</p>
|
||
<div class="sim-card-tags"><span class="sim-tag st1">1. Klasse</span><span class="sim-tag st-time">⏱ 25 min</span></div>
|
||
</div>
|
||
</a>
|
||
|
||
<a href="energiemix.html" class="sim-card" style="text-decoration:none;color:inherit">
|
||
<div class="sim-card-img"><img src="assets/img/card-energy.png" alt=""></div>
|
||
<div class="sim-card-body">
|
||
<h3>⚡ Energiewende-Planer*in</h3>
|
||
<p>Bis 2050 deine Region auf 80 % Erneuerbare bringen — ohne Blackout, ohne Pleite.</p>
|
||
<div class="sim-card-tags"><span class="sim-tag st2">2. Klasse</span><span class="sim-tag st-time">⏱ 25 min</span></div>
|
||
</div>
|
||
</a>
|
||
|
||
<a href="lieferketten.html" class="sim-card" style="text-decoration:none;color:inherit">
|
||
<div class="sim-card-img"><img src="assets/img/card-globe.png" alt=""></div>
|
||
<div class="sim-card-body">
|
||
<h3>👕 Lieferketten-Planer*in <span style="background:linear-gradient(135deg,#4a7c8a,#6aa8b8);color:#fff;font-size:.58rem;padding:2px 6px;border-radius:4px;font-weight:800;letter-spacing:.04em;vertical-align:middle">NEU</span></h3>
|
||
<p>Was kostet dein T-Shirt wirklich? Bestelle aus aller Welt — und finde die Balance aus Preis, CO₂ und fairen Bedingungen.</p>
|
||
<div class="sim-card-tags"><span class="sim-tag st2">2. Klasse</span><span class="sim-tag st-time">⏱ 15 min</span></div>
|
||
</div>
|
||
</a>
|
||
|
||
<a href="regenwald.html" class="sim-card" style="text-decoration:none;color:inherit">
|
||
<div class="sim-card-img"><img src="assets/img/card-climate.png" alt=""></div>
|
||
<div class="sim-card-body">
|
||
<h3>🌴 Forscher*in im Regenwald <span style="background:linear-gradient(135deg,#5a8a5e,#7ab88a);color:#fff;font-size:.58rem;padding:2px 6px;border-radius:4px;font-weight:800;letter-spacing:.04em;vertical-align:middle">NEU</span></h3>
|
||
<p>Fahre mit dem Boot den Fluss hoch. Entdecke 15 Tiere, Pflanzen und Menschen — vom Delta bis zum Nebelwald.</p>
|
||
<div class="sim-card-tags"><span class="sim-tag st1">1. Klasse</span><span class="sim-tag st-time">⏱ 10 min</span></div>
|
||
</div>
|
||
</a>
|
||
|
||
<a href="fluss.html" class="sim-card" style="text-decoration:none;color:inherit">
|
||
<div class="sim-card-img" style="background:linear-gradient(135deg,#87CEEB,#5a8a5e);display:flex;align-items:center;justify-content:center;"><span style="font-size:4rem">🏞️</span></div>
|
||
<div class="sim-card-body">
|
||
<h3>🏞️ Flussmanagement <span style="background:linear-gradient(135deg,#3a7ca5,#5ab8d8);color:#fff;font-size:.58rem;padding:2px 6px;border-radius:4px;font-weight:800;letter-spacing:.04em;vertical-align:middle">NEU</span></h3>
|
||
<p>Steuere ein Flusssystem: Deiche, Renaturierung, Bewässerung. Finde die Balance zwischen Schutz, Ökologie und Wirtschaft.</p>
|
||
<div class="sim-card-tags"><span class="sim-tag st1">1.–2. Klasse</span><span class="sim-tag st-time">⏱ 10–35 min</span><span class="sim-tag" style="background:var(--fjord-l);color:var(--fjord)">5 Levels</span></div>
|
||
</div>
|
||
</a>
|
||
|
||
<div class="sim-card">
|
||
<div class="sim-card-img"><img src="assets/img/card-city.png" alt=""></div>
|
||
<div class="sim-card-body">
|
||
<h3>🏗️ Raumplanung — Gemeinde</h3>
|
||
<p>Wohngebiete, Gewerbe und Parks platzieren. Nutzungskonflikte entstehen von selbst.</p>
|
||
<div class="sim-card-tags"><span class="sim-tag st3">3. Klasse</span><span class="sim-tag st-time">⏱ 45 min</span></div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="sim-card">
|
||
<div class="sim-card-img"><img src="assets/img/card-population.png" alt=""></div>
|
||
<div class="sim-card-body">
|
||
<h3>📊 Bevölkerungsdynamik</h3>
|
||
<p>Geburtenrate, Sterberate, Migration — Bevölkerungspyramiden über 100 Jahre.</p>
|
||
<div class="sim-card-tags"><span class="sim-tag st4">4. Klasse</span><span class="sim-tag st-time">⏱ 25 min</span></div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="sim-card">
|
||
<div class="sim-card-img"><img src="assets/img/card-globe.png" alt=""></div>
|
||
<div class="sim-card-body">
|
||
<h3>🌍 Planetary Boundaries</h3>
|
||
<p>Neun planetare Grenzen in Echtzeit. Überschreitest du die Kipppunkte?</p>
|
||
<div class="sim-card-tags"><span class="sim-tag st4">4. Klasse</span><span class="sim-tag st-time">⏱ 30 min</span></div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
<p style="text-align:center;margin-top:1.5rem;color:var(--text3);font-size:.82rem" class="reveal">+ 18 weitere Module für alle Kompetenzbereiche</p>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- FEATURES -->
|
||
<section class="sec feat-sec" id="features">
|
||
<div class="w">
|
||
<div class="reveal">
|
||
<span class="label">Features</span>
|
||
<h2 class="sec-title">Für Schüler*innen<br>und Lehrkräfte.</h2>
|
||
</div>
|
||
<div class="feat-grid reveal">
|
||
<div class="feat"><div class="feat-ico">📊</div><h3>Dashboard</h3><p>Echtzeit-Überblick, Ergebnisvergleich, Fehlkonzept-Erkennung, PDF-Export.</p></div>
|
||
<div class="feat"><div class="feat-ico">♿</div><h3>Inklusion</h3><p>Nachteilsausgleich, vereinfachte Sprache, Vorlesefunktion, flexible Zeiten.</p></div>
|
||
<div class="feat"><div class="feat-ico">🗳️</div><h3>Live-Abstimmung</h3><p>Polls starten — Ergebnis fließt in die Simulation ein.</p></div>
|
||
<div class="feat"><div class="feat-ico">🎯</div><h3>Lehrplan 2023</h3><p>Kompetenzziele und Basiskonzepte referenziert. DACH-kompatibel.</p></div>
|
||
<div class="feat"><div class="feat-ico">⚙️</div><h3>Steuerbar</h3><p>Module freischalten, Schwierigkeit und Zeitlimits pro Schüler*in anpassen.</p></div>
|
||
<div class="feat"><div class="feat-ico">📈</div><h3>Assessment</h3><p>Predict-Observe-Explain eingebaut. Prozess- und Ergebnisdaten.</p></div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- KLASSEN -->
|
||
<section class="sec" id="klassen">
|
||
<div class="w">
|
||
<div class="reveal">
|
||
<span class="label">Vier Jahre</span>
|
||
<h2 class="sec-title">Ein Lehrplan.<br>24 Simulationen.</h2>
|
||
<p class="sec-sub">Spiralcurricular — jedes Jahr hat eigene Themen und Module.</p>
|
||
</div>
|
||
<div class="kl-grid reveal">
|
||
<div class="kl k1"><h3>1. Klasse</h3><div class="ksub">Leben und Wirtschaften</div><div class="kdet">8 Simulationen · 2 WoStd.<br>Klima · Naturgefahren · Geomedien</div></div>
|
||
<div class="kl k2"><h3>2. Klasse</h3><div class="ksub">Nachhaltigkeit</div><div class="kdet">4 Simulationen · 1 WoStd.<br>Energie · Wasser · Lieferketten</div></div>
|
||
<div class="kl k3"><h3>3. Klasse</h3><div class="ksub">Österreich</div><div class="kdet">6 Simulationen · 2 WoStd.<br>Standort · Raumplanung · Wirtschaft</div></div>
|
||
<div class="kl k4"><h3>4. Klasse</h3><div class="ksub">Globalisierte Welt</div><div class="kdet">6 Simulationen · 2 WoStd.<br>Boundaries · Klima · EU</div></div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- CTA -->
|
||
<section class="cta reveal">
|
||
<h2>Bereit, Geografie<br>zu <em>erleben</em>?</h2>
|
||
<p>Evidenzbasiert · Lehrplan-kompatibel · Inklusiv</p>
|
||
<div style="display:flex;gap:.6rem;justify-content:center">
|
||
<a href="#" class="btn btn-p" style="padding:.7rem 2rem;font-size:.9rem">🚀 Jetzt starten</a>
|
||
<a href="../Konzept/lehrplan-simulation-mapping.html" class="btn btn-o">Lehrplan-Mapping</a>
|
||
</div>
|
||
</section>
|
||
|
||
<footer>
|
||
<p>GeoGraSim — Schroffenegger & Mößlang, 2026 · 330 Quellen · <a href="../claude-research-sim/standalone.html">Forschung</a> · <a href="../claude-research/standalone.html">Didaktik</a></p>
|
||
</footer>
|
||
|
||
<script>
|
||
// === NAV SCROLL ===
|
||
const nav = document.getElementById('nav');
|
||
window.addEventListener('scroll', () => nav.classList.toggle('scrolled', scrollY > 50));
|
||
|
||
// === SCROLL REVEAL ===
|
||
const obs = new IntersectionObserver((entries) => {
|
||
entries.forEach(e => { if (e.isIntersecting) { e.target.classList.add('visible'); obs.unobserve(e.target); } });
|
||
}, { threshold: 0.15 });
|
||
document.querySelectorAll('.reveal').forEach(el => obs.observe(el));
|
||
|
||
// === FLOATING EMOJIS ===
|
||
const emojis = ['🌍','🌎','🌏','🏔️','🌋','🌊','🌿','☀️','⛈️','🔥','💧','🌱','🏙️','🗺️','📊','🧭','⚡','♻️','🌡️','🤝','🏗️','📈','💨','🐟','⛵','🦅'];
|
||
const emojiLayer = document.getElementById('emojiLayer');
|
||
for (let i = 0; i < 30; i++) {
|
||
const el = document.createElement('span');
|
||
el.className = 'emoji-float';
|
||
el.textContent = emojis[Math.floor(Math.random() * emojis.length)];
|
||
el.style.left = Math.random() * 100 + '%';
|
||
el.style.fontSize = (1 + Math.random() * 2) + 'rem';
|
||
el.style.animationDuration = (18 + Math.random() * 30) + 's';
|
||
el.style.animationDelay = (-Math.random() * 35) + 's';
|
||
emojiLayer.appendChild(el);
|
||
}
|
||
|
||
// === SCENIC CANVAS ===
|
||
const C = document.getElementById('sc'), X = C.getContext('2d');
|
||
let W, H, t = 0;
|
||
function resize() {
|
||
const dpr = devicePixelRatio || 1;
|
||
W = C.parentElement.offsetWidth; H = C.parentElement.offsetHeight;
|
||
C.width = W * dpr; C.height = H * dpr; X.scale(dpr, dpr);
|
||
}
|
||
resize(); addEventListener('resize', resize);
|
||
|
||
// Clouds
|
||
const cls = Array.from({length:7}, () => ({
|
||
x: Math.random()*W*1.5, y: H*(.04+Math.random()*.18),
|
||
w: 40+Math.random()*100, sp: .06+Math.random()*.14, op: .2+Math.random()*.4
|
||
}));
|
||
// Birds
|
||
const bds = Array.from({length:5}, () => ({
|
||
x: Math.random()*W, y: H*(.06+Math.random()*.24),
|
||
sp: .25+Math.random()*.35, sz: 3+Math.random()*5,
|
||
wp: Math.random()*6.28, ws: 2.5+Math.random()*2, op: .15+Math.random()*.2
|
||
}));
|
||
// Boats
|
||
const boats = [
|
||
{ x: W*.15, sp: .22, ph: 0, sc: .9, op: .65 },
|
||
{ x: W*.6, sp: .12, ph: 2, sc: .45, op: .3 },
|
||
{ x: W*.85, sp: .08, ph: 4, sc: .3, op: .2 }
|
||
];
|
||
// Fish jumping
|
||
let fishTimer = 0, fishX = 0, fishY = 0, fishPhase = -1;
|
||
|
||
function frame() {
|
||
t += .016; X.clearRect(0,0,W,H);
|
||
const wl = H * .56;
|
||
|
||
// Sky
|
||
const sk = X.createLinearGradient(0,0,0,wl);
|
||
sk.addColorStop(0,'#e8ebe4'); sk.addColorStop(.5,'#dde3d8'); sk.addColorStop(1,'#ced8ca');
|
||
X.fillStyle = sk; X.fillRect(0,0,W,wl);
|
||
|
||
// Sun
|
||
const sg = X.createRadialGradient(W*.78,H*.1,0,W*.78,H*.1,H*.3);
|
||
sg.addColorStop(0,'rgba(255,235,200,.3)'); sg.addColorStop(1,'rgba(255,235,200,0)');
|
||
X.fillStyle = sg; X.fillRect(0,0,W,wl);
|
||
|
||
// Mountains (3 layers)
|
||
[{c:'#c0caba',p:6,r:.05,h:.3},{c:'#a8b5a0',p:9,r:.08,h:.4},{c:'#8a9a82',p:12,r:.11,h:.5}].forEach(m => {
|
||
X.beginPath(); X.moveTo(0,wl);
|
||
const sw = W/m.p;
|
||
for(let i=0;i<=m.p;i++){
|
||
const px=i*sw, py=wl-wl*m.h*(.4+Math.sin(i*1.7+.3)*.3+Math.cos(i*.9)*m.r);
|
||
i===0?X.lineTo(px,py):X.quadraticCurveTo(px-sw*.4,py-wl*m.r*.2,px,py);
|
||
}
|
||
X.lineTo(W,wl); X.closePath(); X.fillStyle=m.c; X.fill();
|
||
|
||
// Snow caps on nearest layer
|
||
if(m.h===.5){
|
||
X.save(); X.globalAlpha=.35;
|
||
for(let i=1;i<m.p;i++){
|
||
const px=i*sw, peak=wl-wl*m.h*(.4+Math.sin(i*1.7+.3)*.3+Math.cos(i*.9)*m.r);
|
||
if(peak<wl*.35){ X.beginPath(); X.ellipse(px,peak+5,12,8,0,0,Math.PI*2); X.fillStyle='#e8e8e0'; X.fill(); }
|
||
}
|
||
X.restore();
|
||
}
|
||
});
|
||
|
||
// Clouds
|
||
cls.forEach(c => {
|
||
c.x += c.sp; if(c.x>W+c.w*2){c.x=-c.w*2; c.y=H*(.04+Math.random()*.18);}
|
||
X.globalAlpha=c.op; X.fillStyle='#fff';
|
||
const s=c.w/80;
|
||
X.beginPath(); X.ellipse(c.x,c.y,32*s,13*s,0,0,Math.PI*2); X.fill();
|
||
X.beginPath(); X.ellipse(c.x-18*s,c.y+2*s,22*s,10*s,0,0,Math.PI*2); X.fill();
|
||
X.beginPath(); X.ellipse(c.x+20*s,c.y+3*s,24*s,9*s,0,0,Math.PI*2); X.fill();
|
||
X.globalAlpha=1;
|
||
});
|
||
|
||
// Birds
|
||
bds.forEach(b => {
|
||
b.x+=b.sp; b.wp+=b.ws*.016; b.y+=Math.sin(t*.4+b.wp)*.12;
|
||
if(b.x>W+60){b.x=-60; b.y=H*(.06+Math.random()*.24);}
|
||
X.globalAlpha=b.op; X.strokeStyle='#5a5a5a'; X.lineWidth=1.2; X.lineCap='round';
|
||
const w=Math.sin(b.wp)*.45;
|
||
X.beginPath(); X.moveTo(b.x-b.sz,b.y-w*b.sz);
|
||
X.quadraticCurveTo(b.x,b.y+1.5,b.x+b.sz,b.y-w*b.sz); X.stroke();
|
||
X.globalAlpha=1;
|
||
});
|
||
|
||
// Water
|
||
const wg = X.createLinearGradient(0,wl,0,H);
|
||
wg.addColorStop(0,'#9ab5b8'); wg.addColorStop(.4,'#88a8ab'); wg.addColorStop(1,'#7a9ea2');
|
||
X.fillStyle=wg; X.fillRect(0,wl,W,H-wl);
|
||
|
||
// Waves
|
||
for(let i=0;i<5;i++){
|
||
X.beginPath(); X.moveTo(0,wl);
|
||
for(let x=0;x<=W;x+=3) X.lineTo(x, wl+Math.sin(x*.005+t*(.25+i*.1)+i*2)*(1.2+i*1.1)+i*.3);
|
||
X.lineTo(W,H); X.lineTo(0,H); X.closePath();
|
||
X.fillStyle=`rgba(255,255,255,${.025+i*.008})`; X.fill();
|
||
}
|
||
|
||
// Water sparkles
|
||
for(let i=0;i<12;i++){
|
||
const rx=(W*.1+i*W*.08+Math.sin(t*.15+i)*15)%W;
|
||
const ry=wl+12+i*6+Math.sin(t*.4+i*2.5)*2.5;
|
||
X.globalAlpha=Math.sin(t*1.8+i*1.3)*.5+.5; X.globalAlpha*=.1;
|
||
X.fillStyle='#fff'; X.fillRect(rx,ry,8+Math.random()*10,1.2);
|
||
}
|
||
X.globalAlpha=1;
|
||
|
||
// Boats
|
||
boats.forEach(b => {
|
||
b.x+=b.sp; b.ph+=.015; if(b.x>W+120)b.x=-120;
|
||
const by=wl-5*b.sc+Math.sin(b.ph)*2.5*b.sc;
|
||
const tilt=Math.sin(b.ph+.5)*.03;
|
||
X.save(); X.translate(b.x,by); X.rotate(tilt); X.globalAlpha=b.op;
|
||
const s=b.sc;
|
||
// Hull
|
||
X.fillStyle='#b06a5a'; X.beginPath();
|
||
X.moveTo(-22*s,0); X.lineTo(-17*s,9*s); X.lineTo(17*s,9*s); X.lineTo(22*s,0); X.closePath(); X.fill();
|
||
// Water line
|
||
X.fillStyle='#8a4a3a'; X.fillRect(-17*s,7*s,34*s,2*s);
|
||
// Mast
|
||
X.strokeStyle='#4a4a4a'; X.lineWidth=1.5*s;
|
||
X.beginPath(); X.moveTo(0,0); X.lineTo(0,-28*s); X.stroke();
|
||
// Großsegel (achtern, in Fahrtrichtung — größer)
|
||
X.fillStyle='#f0ece5'; X.beginPath();
|
||
X.moveTo(1,-26*s); X.lineTo(16*s,-5*s); X.lineTo(1,-2*s); X.closePath(); X.fill();
|
||
// Vorsegel / Fock (vorn, kleiner)
|
||
X.fillStyle='#e8e3d8'; X.beginPath();
|
||
X.moveTo(-1,-22*s); X.lineTo(-11*s,-3*s); X.lineTo(-1,-1*s); X.closePath(); X.fill();
|
||
// Flag
|
||
X.fillStyle='#c07a6b'; X.beginPath();
|
||
X.moveTo(0,-28*s); X.lineTo(8*s,-25*s); X.lineTo(0,-22*s); X.closePath(); X.fill();
|
||
// Wake
|
||
X.globalAlpha=b.op*.4; X.strokeStyle='rgba(255,255,255,.3)'; X.lineWidth=1;
|
||
X.beginPath(); X.moveTo(-22*s,4*s);
|
||
X.quadraticCurveTo(-35*s,6*s,-50*s,3*s); X.stroke();
|
||
X.restore(); X.globalAlpha=1;
|
||
});
|
||
|
||
// Fish jumping
|
||
fishTimer-=.016;
|
||
if(fishTimer<=0){ fishTimer=4+Math.random()*6; fishX=W*.2+Math.random()*W*.6; fishY=wl+5; fishPhase=0; }
|
||
if(fishPhase>=0 && fishPhase<1){
|
||
fishPhase+=.02;
|
||
const fy=fishY-Math.sin(fishPhase*Math.PI)*30;
|
||
const rot=-Math.PI*.3+fishPhase*Math.PI*.6;
|
||
X.save(); X.translate(fishX,fy); X.rotate(rot); X.globalAlpha=.4;
|
||
X.fillStyle='#6a8a8e';
|
||
X.beginPath(); X.ellipse(0,0,6,2.5,0,0,Math.PI*2); X.fill();
|
||
// Tail
|
||
X.beginPath(); X.moveTo(-6,0); X.lineTo(-10,-3); X.lineTo(-10,3); X.closePath(); X.fill();
|
||
X.restore(); X.globalAlpha=1;
|
||
// Splash
|
||
if(fishPhase>.45 && fishPhase<.55){
|
||
X.globalAlpha=.15; X.fillStyle='#fff';
|
||
for(let i=0;i<5;i++){
|
||
X.beginPath(); X.arc(fishX+(Math.random()-.5)*15,fishY-2,1+Math.random()*2,0,Math.PI*2); X.fill();
|
||
}
|
||
X.globalAlpha=1;
|
||
}
|
||
}
|
||
|
||
// Bottom fade
|
||
const fd = X.createLinearGradient(0,H*.78,0,H);
|
||
fd.addColorStop(0,'rgba(247,246,243,0)'); fd.addColorStop(1,'rgba(247,246,243,1)');
|
||
X.fillStyle=fd; X.fillRect(0,H*.78,W,H*.22);
|
||
|
||
requestAnimationFrame(frame);
|
||
}
|
||
frame();
|
||
</script>
|
||
</body>
|
||
</html>
|