Atlas: Infrastruktur + Team-Konventionen + Sprachregel Lernarbeit
- Design-System (assets/css/design-system.css) mit 21 Komponenten, iPad-Responsive-Breakpoints, Touch-Ziele 36px, Music-Player, Glossar-Tooltips - Templates (sims/template.html + student/teacher-Dashboard) - Docs: module-interface.md (inkl. 4a Sprachregel, 4b Leichte Sprache, 4c iPad), content-architecture.md, crash-recovery.md, music-registry.md - Admin-Infrastruktur: admin-modules.html + api/admin-modules.php (Titel, Emoji, Bild, Status, Dauer, Alter pro Modul) - Inbox-System: _inbox/README.md + _status.md fuer Atlas + Briefings an Klima, Glossar, Lehrplan, Fluss - Zentrale SFX-Pipeline (scripts/generate-sounds.py) - DALL-E-Bilder: 8 Badges + 5 Glossar-Repraesentationsbilder (Querformat) - Logo + Inter-Font lokal - PHP-APIs: admin, glossar, levels, licenses, progress, waypoints, assignments, profile, tickets - Spielsprache entfernt (admin-modules, admin-levels, schueler) - Landing-Page-Bearbeitungen (Boote sichtbarer, Button-Hintergrund) Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
+437
-339
@@ -4,8 +4,8 @@
|
||||
<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">
|
||||
<link rel="icon" type="image/png" href="favicon-96x96.png" sizes="96x96"><link rel="icon" type="image/svg+xml" href="favicon.svg">
|
||||
<link rel="stylesheet" href="assets/fonts/inter.css">
|
||||
<style>
|
||||
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
|
||||
|
||||
@@ -24,27 +24,27 @@
|
||||
|
||||
/* ===== 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.scrolled { backdrop-filter: blur(20px); background: rgba(247,246,243,0.92); 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-brand { display: flex; align-items: center; text-decoration: none; }
|
||||
.nav-brand img { height: 38px; }
|
||||
.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 { background: rgba(255,255,255,.85); color: var(--fjord); border: 1.5px solid rgba(74,124,138,.4); }
|
||||
.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 { min-height: 85vh; 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-content { position: relative; z-index: 2; max-width: 1200px; margin: 0 auto; padding: 6rem 2rem 3rem; 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-text .lead { font-size: 1.05rem; color: var(--text2); max-width: 440px; margin-bottom: 1.5rem; }
|
||||
.hero-btns { display: flex; gap: .6rem; flex-wrap: wrap; }
|
||||
.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); }
|
||||
@@ -58,43 +58,22 @@
|
||||
@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; }
|
||||
/* ===== SECTION ===== */
|
||||
.sec { padding: 4rem 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; }
|
||||
.sec-sub { color: var(--text2); max-width: 520px; 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 CARDS ===== */
|
||||
.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 { 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; text-decoration: none; color: inherit; display: block; }
|
||||
.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 h3 { font-size: .88rem; font-weight: 700; margin-bottom: .2rem; display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
|
||||
.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; }
|
||||
@@ -103,40 +82,66 @@
|
||||
.st3 { background: var(--sand-l); color: var(--sand); }
|
||||
.st4 { background: var(--coral-l); color: var(--coral); }
|
||||
.st-time { background: #f0eeea; color: var(--text3); }
|
||||
.badge-new { background: linear-gradient(135deg,#4a7c8a,#6aa8b8); color: #fff; font-size: .58rem; padding: 2px 6px; border-radius: 4px; font-weight: 800; letter-spacing: .04em; }
|
||||
.badge-free { background: linear-gradient(135deg,#5a8a5e,#7ab88a); color: #fff; font-size: .58rem; padding: 2px 6px; border-radius: 4px; font-weight: 800; letter-spacing: .04em; }
|
||||
|
||||
/* Locked sim cards */
|
||||
.sim-card.locked { opacity: .75; }
|
||||
.sim-card.locked:hover { transform: translateY(-3px); }
|
||||
.sim-card.locked .sim-card-img::after { content: ''; position: absolute; inset: 0; background: rgba(0,0,0,.15); border-radius: 10px; }
|
||||
.lock-overlay { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); background: rgba(255,255,255,.95); border-radius: 12px; padding: .6rem 1rem; font-size: .72rem; font-weight: 600; color: var(--fjord); box-shadow: 0 4px 15px rgba(0,0,0,.1); text-align: center; z-index: 2; }
|
||||
|
||||
/* ===== VALUE PROPOSITION (for teachers) ===== */
|
||||
.value-sec { background: var(--bg2); position: relative; }
|
||||
.value-sec::before { content: ''; position: absolute; top: -50px; left: 0; right: 0; height: 100px; background: var(--bg2); transform: skewY(-2deg); z-index: -1; }
|
||||
.value-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; margin-top: 2rem; align-items: center; }
|
||||
.value-text h3 { font-size: 1.5rem; font-weight: 800; margin-bottom: .8rem; letter-spacing: -.02em; }
|
||||
.value-text p { font-size: .9rem; color: var(--text2); margin-bottom: 1rem; line-height: 1.7; }
|
||||
.value-list { list-style: none; display: flex; flex-direction: column; gap: .5rem; }
|
||||
.value-list li { display: flex; align-items: flex-start; gap: .6rem; font-size: .85rem; color: var(--text2); }
|
||||
.value-list li .vi { font-size: 1.1rem; flex-shrink: 0; margin-top: .05rem; }
|
||||
|
||||
/* ===== 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 { background: var(--white); border-radius: var(--r); padding: 1.4rem; 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); }
|
||||
.feat-ico { font-size: 1.6rem; margin-bottom: .5rem; }
|
||||
.feat h3 { font-size: .85rem; font-weight: 700; margin-bottom: .2rem; }
|
||||
.feat p { font-size: .75rem; 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); }
|
||||
/* ===== SVG SCENE DECORATIONS ===== */
|
||||
.scene-deco { position: absolute; pointer-events: none; z-index: 1; opacity: .12; }
|
||||
.scene-deco svg { display: block; }
|
||||
.deco-mountains { bottom: 0; left: 0; right: 0; }
|
||||
.deco-float { animation: decoFloat 6s ease-in-out infinite; }
|
||||
.deco-drift { animation: decoDrift 20s linear infinite; }
|
||||
.deco-wave { animation: decoWave 3s ease-in-out infinite; }
|
||||
@keyframes decoFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
|
||||
@keyframes decoDrift { 0% { transform: translateX(-100px); } 100% { transform: translateX(calc(100vw + 100px)); } }
|
||||
@keyframes decoWave { 0%,100% { transform: translateY(0) rotate(0deg); } 25% { transform: translateY(-3px) rotate(2deg); } 75% { transform: translateY(2px) rotate(-1deg); } }
|
||||
|
||||
/* Section dividers with landscape SVG */
|
||||
.landscape-divider { position: relative; overflow: hidden; height: 80px; margin: -1px 0; }
|
||||
.landscape-divider svg { position: absolute; bottom: 0; width: 100%; height: 100%; }
|
||||
|
||||
/* Sailboat that drifts across sections */
|
||||
.sailboat-container { position: fixed; bottom: 15vh; z-index: 0; pointer-events: none; opacity: .25; animation: sailDrift 45s linear infinite; }
|
||||
@keyframes sailDrift { 0% { left: -80px; } 100% { left: calc(100vw + 80px); } }
|
||||
|
||||
/* ===== 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; }
|
||||
.cta p { color: var(--text2); margin: .5rem 0 1.5rem; max-width: 500px; margin-left: auto; margin-right: auto; }
|
||||
|
||||
/* ===== 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; }
|
||||
|
||||
/* ===== USER PILL (logged in state) ===== */
|
||||
.user-pill { display: flex; align-items: center; gap: .4rem; padding: .3rem .7rem .3rem .4rem; background: var(--fjord-l); border-radius: 99px; font-size: .75rem; font-weight: 600; color: var(--fjord); text-decoration: none; }
|
||||
.user-pill .emoji { font-size: 1.1rem; }
|
||||
|
||||
/* ===== SCROLL REVEAL ===== */
|
||||
.reveal { opacity: 0; transform: translateY(40px); transition: all .8s cubic-bezier(.22,1,.36,1); }
|
||||
.reveal.visible { opacity: 1; transform: translateY(0); }
|
||||
@@ -147,13 +152,17 @@
|
||||
.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; }
|
||||
.value-grid { grid-template-columns: 1fr; }
|
||||
.steps { grid-template-columns: repeat(2, 1fr); }
|
||||
.step::after { display: none; }
|
||||
.nav-links { gap: 0; }
|
||||
.nav-links .hide-m { display: none; }
|
||||
}
|
||||
@media (max-width: 550px) {
|
||||
.sim-grid { grid-template-columns: 1fr !important; }
|
||||
.steps { grid-template-columns: 1fr; }
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
@@ -162,12 +171,13 @@
|
||||
<!-- NAV -->
|
||||
<nav class="nav" id="nav">
|
||||
<div class="w">
|
||||
<a href="#" class="nav-brand"><img src="assets/img/logo.png" alt="">GeoGraSim</a>
|
||||
<a href="#" class="nav-brand"><img src="assets/img/geograsim_t.svg" 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>
|
||||
<a href="#sims" class="hide-m">Simulationen</a>
|
||||
<a href="#fuer-lehrkraefte" class="hide-m">Lehrperson</a>
|
||||
<a href="ueber.html" class="hide-m">Über</a>
|
||||
<a href="handbuch.html" class="hide-m">Handbuch</a>
|
||||
<span id="nav-auth"></span>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
@@ -178,394 +188,482 @@
|
||||
<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>
|
||||
<p class="lead">Interaktive Simulationen für den GW-Unterricht. Klimawandel verstehen. Städte planen. Flüsse managen. Evidenzbasiert und lehrplankonform.</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>
|
||||
<a href="#sims" class="btn btn-p">Jetzt ausprobieren</a>
|
||||
<a href="#fuer-lehrkraefte" class="btn btn-o">Für Lehrpersonen</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="hero-visual">
|
||||
<div class="hero-card">
|
||||
<img src="assets/img/card-climate.png" alt="">
|
||||
<img src="assets/img/card-climate.png" alt="Klimasimulation">
|
||||
<div class="hero-card-body">
|
||||
<h3>🌡️ Treibhauseffekt-Simulator</h3>
|
||||
<p>CO₂ verändern → Temperatur beobachten. 20 min.</p>
|
||||
<h3>Klimasimulator 3D</h3>
|
||||
<p>Inselstaat durch die Klimakrise fuehren. Kostenlos ausprobieren.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="hero-mini hero-mini-1">⚡ 24 Module</div>
|
||||
<div class="hero-mini hero-mini-2">📊 330 Quellen</div>
|
||||
<div class="hero-mini hero-mini-1">3 Module sofort testen</div>
|
||||
<div class="hero-mini hero-mini-2">Aktueller Stand didaktischer Forschung</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>
|
||||
<!-- SVG Landscape Divider: Mountains + Trees -->
|
||||
<div class="landscape-divider" style="background:var(--bg)">
|
||||
<svg viewBox="0 0 1440 80" preserveAspectRatio="none">
|
||||
<!-- Mountains -->
|
||||
<path d="M0,80 L120,25 L200,55 L320,10 L440,45 L520,20 L640,50 L720,15 L840,40 L960,8 L1080,35 L1160,18 L1280,42 L1360,12 L1440,38 L1440,80 Z" fill="#8a9a82" opacity=".15"/>
|
||||
<path d="M0,80 L80,45 L180,60 L280,30 L400,55 L500,35 L620,58 L740,28 L860,50 L980,32 L1100,52 L1200,38 L1320,55 L1440,40 L1440,80 Z" fill="#5a8a5e" opacity=".1"/>
|
||||
<!-- Trees -->
|
||||
<g fill="#5a8a5e" opacity=".12">
|
||||
<path d="M100,80 L108,55 L96,58 L104,40 L92,43 L100,28 L108,43 L96,40 L104,58 L92,55 Z"/>
|
||||
<path d="M300,80 L308,58 L296,61 L304,45 L292,48 L300,35 L308,48 L296,45 L304,61 L292,58 Z"/>
|
||||
<path d="M500,80 L507,60 L494,63 L502,48 L490,51 L500,38 L510,51 L498,48 L506,63 L494,60 Z"/>
|
||||
<path d="M750,80 L758,55 L746,58 L754,40 L742,43 L750,28 L758,43 L746,40 L754,58 L742,55 Z"/>
|
||||
<path d="M1000,80 L1007,62 L995,64 L1003,50 L991,52 L1000,40 L1009,52 L997,50 L1005,64 L993,62 Z"/>
|
||||
<path d="M1200,80 L1208,56 L1196,59 L1204,42 L1192,45 L1200,30 L1208,45 L1196,42 L1204,59 L1192,56 Z"/>
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- SIMULATIONS -->
|
||||
<section class="sec" id="sims" style="padding-top:2rem">
|
||||
<!-- Drifting sailboat (very subtle, fixed position) -->
|
||||
<div class="sailboat-container">
|
||||
<svg width="60" height="70" viewBox="0 0 60 70">
|
||||
<path d="M30,5 L30,50" stroke="#1f4e5a" stroke-width="2" opacity=".6"/>
|
||||
<path d="M30,8 L50,35 L30,30 Z" fill="#4a7c8a" opacity=".5"/>
|
||||
<path d="M30,12 L15,32 L30,28 Z" fill="#e8833a" opacity=".4"/>
|
||||
<path d="M10,52 Q30,45 50,52 Q40,58 30,56 Q20,58 10,52 Z" fill="#1f4e5a" opacity=".4"/>
|
||||
<!-- Water ripples -->
|
||||
<ellipse cx="30" cy="58" rx="22" ry="3" fill="none" stroke="#4a7c8a" stroke-width=".5" opacity=".3">
|
||||
<animate attributeName="rx" values="22;26;22" dur="2s" repeatCount="indefinite"/>
|
||||
<animate attributeName="opacity" values=".3;.1;.3" dur="2s" repeatCount="indefinite"/>
|
||||
</ellipse>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<!-- ======================== SIMULATIONEN ======================== -->
|
||||
<section class="sec" id="sims" style="padding-top:3rem">
|
||||
<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>
|
||||
<span class="label">Jetzt ausprobieren</span>
|
||||
<h2 class="sec-title">Drei Simulationen.<br>Sofort testen.</h2>
|
||||
<p class="sec-sub">Einfach starten und Geografie erleben.</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>
|
||||
<!-- FREE: Klimasimulator 3D -->
|
||||
<a href="game-3d.html" class="sim-card">
|
||||
<div class="sim-card-img"><img src="assets/img/card-climate.png" alt="Klimasimulator 3D"></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>
|
||||
<h3>Klimasimulator 3D <span class="badge-free">TESTEN</span></h3>
|
||||
<p>Führe einen Inselstaat durch 75 Jahre Klimakrise. Steigende Meeresspiegel, Extremwetter, politische Entscheidungen.</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>
|
||||
<!-- FREE: Flussmanagement -->
|
||||
<a href="fluss.html" class="sim-card">
|
||||
<div class="sim-card-img"><img src="assets/img/card-fluss.png" alt="Flussmanagement"></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>
|
||||
<h3>Flussmanagement <span class="badge-free">TESTEN</span></h3>
|
||||
<p>Deiche bauen, Fluss begradigen oder renaturieren? Finde die Balance zwischen Hochwasserschutz, Ö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></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>
|
||||
<!-- FREE: Stadt & Raumplanung -->
|
||||
<a href="stadt.html" class="sim-card">
|
||||
<div class="sim-card-img"><img src="assets/img/card-city.png" alt="Stadtsimulation"></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>
|
||||
<h3>Stadt & Raumplanung <span class="badge-free">TESTEN</span></h3>
|
||||
<p>Plane eine Stadt mit Wohngebieten, Gewerbe, Infrastruktur. Nutzungskonflikte und Standortentscheidungen erleben.</p>
|
||||
<div class="sim-card-tags"><span class="sim-tag st3">3. 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>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ======================== WEITERE MODULE ======================== -->
|
||||
<section class="sec" style="padding-top:1rem">
|
||||
<div class="w">
|
||||
<div class="reveal">
|
||||
<span class="label">Im Unterricht</span>
|
||||
<h2 class="sec-title">Alle Module —<br>mit Begleitung der Lehrperson.</h2>
|
||||
<p class="sec-sub">Diese Simulationen entfalten ihren vollen Wert im begleiteten Unterricht: mit Lernzielen, Assessment und Ergebnissicherung.</p>
|
||||
</div>
|
||||
<div class="sim-grid reveal">
|
||||
|
||||
<a href="login.html" class="sim-card locked">
|
||||
<div class="sim-card-img">
|
||||
<img src="assets/img/card-climate.png" alt="Klimawächter 2D">
|
||||
<div class="lock-overlay">Anmelden</div>
|
||||
</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>
|
||||
<h3>Klimasimulator 2D</h3>
|
||||
<p>Dieselbe Klimasimulation in 2D-Ansicht. Ideal für ältere Geräte und barrierefreien Unterricht.</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="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>
|
||||
<a href="login.html" class="sim-card locked">
|
||||
<div class="sim-card-img"><img src="assets/img/card-tectonic.png" alt="Erdbeben"></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>
|
||||
<h3>Erdbeben & Plattentektonik</h3>
|
||||
<p>50 Jahre Stadtplanung in einer Erdbebenzone. Bauqualität und Vorsorge entscheiden über Überleben.</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="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>
|
||||
<a href="login.html" class="sim-card locked">
|
||||
<div class="sim-card-img"><img src="assets/img/card-energy.png" alt="Energiemix"></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>
|
||||
<h3>Energiewende-Planer</h3>
|
||||
<p>Deine Region bis 2050 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="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>
|
||||
<a href="login.html" class="sim-card locked">
|
||||
<div class="sim-card-img"><img src="assets/img/card-globe.png" alt="Lieferketten"></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>
|
||||
<h3>Lieferketten-Planer</h3>
|
||||
<p>Was kostet dein T-Shirt wirklich? Bestelle aus aller Welt und finde die Balance aus Preis, CO2 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>
|
||||
|
||||
<div class="sim-card">
|
||||
<div class="sim-card-img"><img src="assets/img/card-city.png" alt=""></div>
|
||||
<a href="login.html" class="sim-card locked">
|
||||
<div class="sim-card-img"><img src="assets/img/card-climate.png" alt="Regenwald"></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>
|
||||
<h3>Regenwald-Expedition</h3>
|
||||
<p>Fahre mit dem Boot den Fluss hoch. Entdecke 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>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<div class="sim-card">
|
||||
<div class="sim-card-img"><img src="assets/img/card-population.png" alt=""></div>
|
||||
<a href="login.html" class="sim-card locked">
|
||||
<div class="sim-card-img"><img src="assets/img/card-heli.png" alt="Helikopter-Navigation"><div class="lock-overlay">Anmelden</div></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>
|
||||
<h3>🚁 Helikopter-Navigation <span class="badge-new">NEU</span></h3>
|
||||
<p>Steuere einen Rettungshubschrauber durch Österreich. Starten, navigieren, landen. Echte Geografie lernen.</p>
|
||||
<div class="sim-card-tags"><span class="sim-tag st1">1.–2. Klasse</span><span class="sim-tag st-time">15–30 min</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<div class="sim-card">
|
||||
<div class="sim-card-img"><img src="assets/img/card-globe.png" alt=""></div>
|
||||
<div class="sim-card locked" style="cursor:default;opacity:.5;border-style:dashed">
|
||||
<div class="sim-card-img" style="background:var(--bg2);display:flex;align-items:center;justify-content:center"><span style="font-size:2rem;color:var(--text3)">+ 18 weitere</span></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>
|
||||
<h3 style="color:var(--text3)">Weitere Module in Entwicklung</h3>
|
||||
<p>Bevölkerungsdynamik, Planetary Boundaries, Klimakonferenz, Urbanisierung und mehr.</p>
|
||||
</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>
|
||||
<p style="text-align:center;margin-top:1.5rem;font-size:.85rem;color:var(--text2)" class="reveal">
|
||||
Alle Module sind im begleiteten Unterricht verfügbar. <a href="login.html" style="color:var(--fjord);font-weight:600;text-decoration:none">Jetzt anmelden</a> oder <a href="handbuch.html" style="color:var(--fjord);font-weight:600;text-decoration:none">Handbuch lesen</a>.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- FEATURES -->
|
||||
<section class="sec feat-sec" id="features">
|
||||
<!-- SVG Divider: City Skyline + Water -->
|
||||
<div class="landscape-divider" style="height:100px;background:var(--bg)">
|
||||
<svg viewBox="0 0 1440 100" preserveAspectRatio="none">
|
||||
<!-- City skyline -->
|
||||
<g fill="#1f4e5a" opacity=".08">
|
||||
<rect x="80" y="40" width="25" height="60"/>
|
||||
<rect x="110" y="55" width="20" height="45"/>
|
||||
<rect x="135" y="30" width="15" height="70" rx="1"/>
|
||||
<rect x="155" y="50" width="22" height="50"/>
|
||||
<rect x="400" y="45" width="18" height="55"/>
|
||||
<rect x="422" y="35" width="12" height="65" rx="1"/>
|
||||
<rect x="438" y="55" width="25" height="45"/>
|
||||
<rect x="468" y="42" width="14" height="58"/>
|
||||
<rect x="800" y="38" width="20" height="62"/>
|
||||
<rect x="825" y="50" width="16" height="50"/>
|
||||
<rect x="845" y="28" width="12" height="72" rx="1"/>
|
||||
<rect x="862" y="48" width="22" height="52"/>
|
||||
<rect x="1100" y="52" width="18" height="48"/>
|
||||
<rect x="1122" y="40" width="14" height="60"/>
|
||||
<rect x="1140" y="55" width="24" height="45"/>
|
||||
<!-- Windows (tiny dots) -->
|
||||
<rect x="84" y="48" width="3" height="3" fill="#e8833a" opacity=".5"/>
|
||||
<rect x="92" y="48" width="3" height="3" fill="#e8833a" opacity=".3"/>
|
||||
<rect x="84" y="56" width="3" height="3" fill="#e8833a" opacity=".4"/>
|
||||
<rect x="92" y="56" width="3" height="3" fill="#e8833a" opacity=".6"/>
|
||||
<rect x="84" y="64" width="3" height="3" fill="#e8833a" opacity=".3"/>
|
||||
<rect x="406" y="52" width="2" height="2" fill="#e8833a" opacity=".5"/>
|
||||
<rect x="412" y="52" width="2" height="2" fill="#e8833a" opacity=".3"/>
|
||||
<rect x="406" y="58" width="2" height="2" fill="#e8833a" opacity=".4"/>
|
||||
<rect x="806" y="46" width="3" height="3" fill="#e8833a" opacity=".5"/>
|
||||
<rect x="813" y="46" width="3" height="3" fill="#e8833a" opacity=".3"/>
|
||||
<rect x="806" y="54" width="3" height="3" fill="#e8833a" opacity=".4"/>
|
||||
</g>
|
||||
<!-- Water waves -->
|
||||
<path d="M0,88 Q60,82 120,88 Q180,94 240,88 Q300,82 360,88 Q420,94 480,88 Q540,82 600,88 Q660,94 720,88 Q780,82 840,88 Q900,94 960,88 Q1020,82 1080,88 Q1140,94 1200,88 Q1260,82 1320,88 Q1380,94 1440,88 L1440,100 L0,100 Z" fill="#4a7c8a" opacity=".06">
|
||||
<animate attributeName="d" dur="4s" repeatCount="indefinite"
|
||||
values="M0,88 Q60,82 120,88 Q180,94 240,88 Q300,82 360,88 Q420,94 480,88 Q540,82 600,88 Q660,94 720,88 Q780,82 840,88 Q900,94 960,88 Q1020,82 1080,88 Q1140,94 1200,88 Q1260,82 1320,88 Q1380,94 1440,88 L1440,100 L0,100 Z;
|
||||
M0,90 Q60,84 120,90 Q180,96 240,90 Q300,84 360,90 Q420,96 480,90 Q540,84 600,90 Q660,96 720,90 Q780,84 840,90 Q900,96 960,90 Q1020,84 1080,90 Q1140,96 1200,90 Q1260,84 1320,90 Q1380,96 1440,90 L1440,100 L0,100 Z;
|
||||
M0,88 Q60,82 120,88 Q180,94 240,88 Q300,82 360,88 Q420,94 480,88 Q540,82 600,88 Q660,94 720,88 Q780,82 840,88 Q900,94 960,88 Q1020,82 1080,88 Q1140,94 1200,88 Q1260,82 1320,88 Q1380,94 1440,88 L1440,100 L0,100 Z"/>
|
||||
</path>
|
||||
<!-- Small sailboats -->
|
||||
<g opacity=".3">
|
||||
<g transform="translate(250,72)">
|
||||
<path d="M0,0 L0,-15" stroke="#1f4e5a" stroke-width="1"/>
|
||||
<path d="M0,-13 L10,-4 L0,-6 Z" fill="#4a7c8a"/>
|
||||
<path d="M0,-10 L-6,-3 L0,-5 Z" fill="#e8833a"/>
|
||||
<ellipse cx="0" cy="2" rx="8" ry="2" fill="#1f4e5a"/>
|
||||
<animateTransform attributeName="transform" type="translate" values="250,72;260,71;250,72" dur="5s" repeatCount="indefinite"/>
|
||||
</g>
|
||||
<g transform="translate(1050,75)">
|
||||
<path d="M0,0 L0,-12" stroke="#1f4e5a" stroke-width="1"/>
|
||||
<path d="M0,-10 L8,-3 L0,-5 Z" fill="#4a7c8a"/>
|
||||
<path d="M0,-8 L-5,-2 L0,-4 Z" fill="#e8833a"/>
|
||||
<ellipse cx="0" cy="2" rx="6" ry="1.5" fill="#1f4e5a"/>
|
||||
<animateTransform attributeName="transform" type="translate" values="1050,75;1058,74;1050,75" dur="7s" repeatCount="indefinite"/>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<!-- ======================== WERT-VERSPRECHEN (Lehrkraefte) ======================== -->
|
||||
<section class="sec value-sec" id="fuer-lehrkraefte">
|
||||
<div class="w">
|
||||
<div class="reveal">
|
||||
<span class="label">Für Lehrpersonen</span>
|
||||
<h2 class="sec-title">Simulationen wirken im Unterricht.<br>Nicht als Einzelerlebnis.</h2>
|
||||
</div>
|
||||
<div class="value-grid reveal">
|
||||
<div class="value-text">
|
||||
<p>
|
||||
Jede Simulation ist für eine 45-Minuten-Einheit konzipiert: mit Hinleitung, Vorhersage, Durchführung, Auswertung und Reflexion. Das didaktische Modell basiert auf <strong>Predict–Observe–Explain</strong> — Schüler*innen formulieren zuerst eine Hypothese, beobachten dann die Simulation und erklären abschließend die Abweichung.
|
||||
</p>
|
||||
<p>
|
||||
Der eigentliche Wert liegt nicht in der Software allein, sondern in der <strong>Einbettung im Unterricht</strong>: Lehrpersonen steuern, welche Module wann freigeschaltet sind, begleiten den Lernprozess und sichern Ergebnisse. Genau wie bei <em>Typewriter</em> — einem Werkzeug, das erst im schulischen Kontext seine volle Wirkung entfaltet.
|
||||
</p>
|
||||
<ul class="value-list">
|
||||
<li><span class="vi">📊</span> <span><strong>Dashboard:</strong> Echtzeit-Überblick über Fortschritt, Ergebnisse und Fehlkonzepte aller Schüler*innen</span></li>
|
||||
<li><span class="vi">🔒</span> <span><strong>Modulsteuerung:</strong> Module einzeln freischalten, sperren oder auf Knopfdruck starten</span></li>
|
||||
<li><span class="vi">👩🎓</span> <span><strong>Anonyme Zugänge:</strong> Automatisch generierte Benutzernamen — DSGVO-konform, kein Aufwand mit Schüler*innendaten</span></li>
|
||||
<li><span class="vi">🎫</span> <span><strong>Einladungstickets:</strong> PDF mit Zugangsdaten zum Ausdrucken und Verteilen</span></li>
|
||||
<li><span class="vi">📖</span> <span><strong>Didaktisches Handbuch:</strong> Zu jedem Modul ein fertiger Unterrichtsentwurf für 45 Minuten</span></li>
|
||||
<li><span class="vi">🎯</span> <span><strong>Lehrplan 2023:</strong> Alle Module auf den österreichischen GW-Lehrplan gemapped</span></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div style="display:flex;flex-direction:column;gap:1rem">
|
||||
<div class="feat"><div class="feat-ico">1.</div><h3>Registrieren</h3><p>E-Mail-Adresse als Benutzername. Kostenlos starten.</p></div>
|
||||
<div class="feat"><div class="feat-ico">2.</div><h3>Klasse anlegen</h3><p>Schüler*innen-Zugänge automatisch generieren oder Daten einzeln eingeben.</p></div>
|
||||
<div class="feat"><div class="feat-ico">3.</div><h3>Modul freischalten</h3><p>Bestimmen Sie, welche Simulation wann gespielt wird.</p></div>
|
||||
<div class="feat"><div class="feat-ico">4.</div><h3>Ergebnisse sichern</h3><p>Alle Entscheidungen, Vorhersagen und Reflexionen werden gespeichert.</p></div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="text-align:center;margin-top:2.5rem" class="reveal">
|
||||
<a href="login.html" class="btn btn-p" style="padding:.7rem 2rem;font-size:.9rem">Jetzt als Lehrperson registrieren</a>
|
||||
<a href="handbuch.html" class="btn btn-o" style="margin-left:.6rem">Handbuch lesen</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ======================== FEATURES ======================== -->
|
||||
<section class="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>
|
||||
<h2 class="sec-title">Für Schüler*innen und Lehrpersonen.</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 class="feat"><div class="feat-ico">📊</div><h3>Dashboard</h3><p>Echtzeit-Überblick, Ergebnisvergleich, Fehlkonzept-Erkennung.</p></div>
|
||||
<div class="feat"><div class="feat-ico">♿</div><h3>Inklusion</h3><p>Vereinfachte Sprache, flexible Zeiten, barrierefreie Bedienung.</p></div>
|
||||
<div class="feat"><div class="feat-ico">🎯</div><h3>Lehrplan 2023</h3><p>Alle 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 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 class="feat"><div class="feat-ico">🔐</div><h3>DSGVO-konform</h3><p>Anonyme Pseudonyme, keine personenbezogenen Daten nötig. Hosting in Europa.</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>
|
||||
<!-- SVG Divider: Mountain + Forest panorama -->
|
||||
<div class="landscape-divider" style="height:90px;background:var(--bg)">
|
||||
<svg viewBox="0 0 1440 90" preserveAspectRatio="none">
|
||||
<!-- Far mountains -->
|
||||
<path d="M0,90 L0,60 Q100,35 200,55 Q280,25 380,50 Q460,18 560,45 Q640,12 720,40 Q800,20 900,48 Q980,15 1060,42 Q1140,22 1240,50 Q1320,30 1440,55 L1440,90 Z" fill="#1f4e5a" opacity=".06"/>
|
||||
<!-- Near hills -->
|
||||
<path d="M0,90 L0,70 Q120,55 240,68 Q360,50 480,65 Q600,48 720,62 Q840,52 960,66 Q1080,50 1200,64 Q1320,55 1440,68 L1440,90 Z" fill="#5a8a5e" opacity=".08"/>
|
||||
<!-- Trees on hills -->
|
||||
<g fill="#5a8a5e" opacity=".1">
|
||||
<path d="M200,68 L206,52 L194,55 L200,42 L206,55 L194,52 Z"/>
|
||||
<path d="M215,70 L220,58 L210,60 L215,50 L220,60 L210,58 Z"/>
|
||||
<path d="M550,65 L556,50 L544,53 L550,40 L556,53 L544,50 Z"/>
|
||||
<path d="M565,67 L570,56 L560,58 L565,48 L570,58 L560,56 Z"/>
|
||||
<path d="M900,66 L906,51 L894,54 L900,41 L906,54 L894,51 Z"/>
|
||||
<path d="M920,68 L925,57 L915,59 L920,49 L925,59 L915,57 Z"/>
|
||||
<path d="M1250,64 L1256,50 L1244,53 L1250,40 L1256,53 L1244,50 Z"/>
|
||||
</g>
|
||||
<!-- Subtle cloud -->
|
||||
<ellipse cx="350" cy="25" rx="50" ry="10" fill="#fff" opacity=".15">
|
||||
<animate attributeName="cx" values="350;380;350" dur="12s" repeatCount="indefinite"/>
|
||||
</ellipse>
|
||||
<ellipse cx="1000" cy="20" rx="40" ry="8" fill="#fff" opacity=".1">
|
||||
<animate attributeName="cx" values="1000;1030;1000" dur="15s" repeatCount="indefinite"/>
|
||||
</ellipse>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<!-- 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>
|
||||
<!-- ======================== CTA ======================== -->
|
||||
<section class="cta reveal" style="position:relative;overflow:hidden">
|
||||
<!-- Decorative mini landscape behind CTA -->
|
||||
<svg style="position:absolute;bottom:0;left:0;right:0;height:60px;opacity:.05" viewBox="0 0 1440 60" preserveAspectRatio="none">
|
||||
<path d="M0,60 L0,40 Q200,20 400,35 Q600,10 800,30 Q1000,15 1200,32 Q1350,20 1440,35 L1440,60 Z" fill="#4a7c8a"/>
|
||||
<path d="M0,60 L0,48 Q300,35 600,45 Q900,30 1200,42 L1440,38 L1440,60 Z" fill="#5a8a5e"/>
|
||||
</svg>
|
||||
<h2 style="position:relative">Bereit, Geografie<br>zu <em>erleben</em>?</h2>
|
||||
<p style="position:relative">Drei Module sofort testen. Alle Module mit Lehrpersonen-Konto.</p>
|
||||
<div style="display:flex;gap:.6rem;justify-content:center;flex-wrap:wrap;position:relative">
|
||||
<a href="#sims" class="btn btn-p" style="padding:.7rem 2rem;font-size:.9rem">Module ausprobieren</a>
|
||||
<a href="login.html" class="btn btn-o">Anmelden / Registrieren</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>
|
||||
<div style="margin-bottom:.5rem"><img src="assets/img/bildLogo.png" alt="GeoGraSim" style="height:40px;opacity:.5"></div>
|
||||
<p>GeoGraSim — Schroffenegger & Mößlang, 2026 · <a href="ueber.html">Über</a> · <a href="handbuch.html">Handbuch</a> · <a href="impressum.html">Impressum</a> · <a href="datenschutz.html">Datenschutz</a> · <a href="barrierefreiheit.html">Barrierefreiheit</a></p>
|
||||
<p style="font-size:.62rem;margin-top:.3rem"><a href="../didaktik_geografie/standalone.html">Aktueller Forschungsstand GW-Didaktik</a> · <a href="../didaktik_simulation/standalone.html">Simulationen im Unterricht</a> · <a href="../didaktik_geografie/quellen.html">Literaturübersicht</a></p>
|
||||
</footer>
|
||||
|
||||
<script>
|
||||
var BASE = (window.__GGS__?.baseUrl) || '';
|
||||
if (!BASE) { var p = location.pathname, i = p.indexOf('/geograsim'); if (i !== -1) { var rest = p.substring(i + '/geograsim'.length); BASE = rest.indexOf('/App/') === 0 ? p.substring(0, i) + '/geograsim/App' : p.substring(0, i) + '/geograsim'; } }
|
||||
|
||||
// === AUTH STATE ===
|
||||
(async function() {
|
||||
try {
|
||||
var r = await fetch(BASE + '/api/auth', {
|
||||
method: 'POST', headers: {'Content-Type':'application/json'}, credentials: 'same-origin',
|
||||
body: JSON.stringify({action: 'status'})
|
||||
});
|
||||
var d = await r.json();
|
||||
var el = document.getElementById('nav-auth');
|
||||
if (d.role === 'teacher') {
|
||||
el.innerHTML = '<a href="teacher.html" class="user-pill"><span class="emoji">👩🏫</span>' + (d.user?.display_name || 'Lehrperson') + '</a>';
|
||||
// Unlock all sim cards for logged-in teachers
|
||||
document.querySelectorAll('.sim-card.locked').forEach(function(c) {
|
||||
var href = c.getAttribute('href');
|
||||
if (href === 'login.html') {
|
||||
// Map to actual sim pages
|
||||
var h3 = c.querySelector('h3');
|
||||
if (!h3) return;
|
||||
var t = h3.textContent;
|
||||
if (t.match(/2D/)) c.href = 'game.html';
|
||||
else if (t.match(/Erdbeben/)) c.href = 'erdbeben.html';
|
||||
else if (t.match(/Energie/)) c.href = 'energiemix.html';
|
||||
else if (t.match(/Liefer/)) c.href = 'lieferketten.html';
|
||||
else if (t.match(/Regenwald/)) c.href = 'regenwald.html';
|
||||
}
|
||||
c.classList.remove('locked');
|
||||
var ov = c.querySelector('.lock-overlay');
|
||||
if (ov) ov.remove();
|
||||
});
|
||||
} else if (d.role === 'student') {
|
||||
el.innerHTML = '<a href="profil.html" class="user-pill"><span class="emoji">🧑🎓</span>' + (d.session?.display_name || 'Schueler') + '</a>';
|
||||
// Check which modules are unlocked for student's class
|
||||
// For now, unlock all for logged-in students
|
||||
document.querySelectorAll('.sim-card.locked').forEach(function(c) {
|
||||
var href = c.getAttribute('href');
|
||||
if (href === 'login.html') {
|
||||
var h3 = c.querySelector('h3');
|
||||
if (!h3) return;
|
||||
var t = h3.textContent;
|
||||
if (t.match(/2D/)) c.href = 'game.html';
|
||||
else if (t.match(/Erdbeben/)) c.href = 'erdbeben.html';
|
||||
else if (t.match(/Energie/)) c.href = 'energiemix.html';
|
||||
else if (t.match(/Liefer/)) c.href = 'lieferketten.html';
|
||||
else if (t.match(/Regenwald/)) c.href = 'regenwald.html';
|
||||
}
|
||||
c.classList.remove('locked');
|
||||
var ov = c.querySelector('.lock-overlay');
|
||||
if (ov) ov.remove();
|
||||
});
|
||||
} else {
|
||||
el.innerHTML = '<a href="login.html" class="btn btn-p" style="margin-left:.3rem">Anmelden</a>';
|
||||
}
|
||||
} catch(e) {
|
||||
document.getElementById('nav-auth').innerHTML = '<a href="login.html" class="btn btn-p" style="margin-left:.3rem">Anmelden</a>';
|
||||
}
|
||||
})();
|
||||
|
||||
// === NAV SCROLL ===
|
||||
const nav = document.getElementById('nav');
|
||||
window.addEventListener('scroll', () => nav.classList.toggle('scrolled', scrollY > 50));
|
||||
var nav = document.getElementById('nav');
|
||||
window.addEventListener('scroll', function() { 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); } });
|
||||
var obs = new IntersectionObserver(function(entries) {
|
||||
entries.forEach(function(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);
|
||||
}
|
||||
document.querySelectorAll('.reveal').forEach(function(el) { obs.observe(el); });
|
||||
|
||||
// === SCENIC CANVAS ===
|
||||
const C = document.getElementById('sc'), X = C.getContext('2d');
|
||||
let W, H, t = 0;
|
||||
var C = document.getElementById('sc'), X = C.getContext('2d');
|
||||
var W, H, t = 0;
|
||||
function resize() {
|
||||
const dpr = devicePixelRatio || 1;
|
||||
var 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;
|
||||
var cls = [];
|
||||
for (var i = 0; i < 7; i++) cls.push({ x: Math.random()*1500, y: H*(.04+Math.random()*.18), w: 40+Math.random()*100, sp: .06+Math.random()*.14, op: .2+Math.random()*.4 });
|
||||
|
||||
function frame() {
|
||||
t += .016; X.clearRect(0,0,W,H);
|
||||
const wl = H * .56;
|
||||
var wl = H * .56;
|
||||
|
||||
// Sky
|
||||
const sk = X.createLinearGradient(0,0,0,wl);
|
||||
var 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);
|
||||
// Sun glow
|
||||
var 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 => {
|
||||
// Mountains
|
||||
[{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(function(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);
|
||||
var sw = W/m.p;
|
||||
for(var j=0;j<=m.p;j++){
|
||||
var px=j*sw, py=wl-wl*m.h*(.4+Math.sin(j*1.7+.3)*.3+Math.cos(j*.9)*m.r);
|
||||
j===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);
|
||||
var wg = X.createLinearGradient(0,wl,0,H);
|
||||
wg.addColorStop(0,'#9ab5a8'); wg.addColorStop(.4,'#7a9a8a'); wg.addColorStop(1,'#5a7a6a');
|
||||
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 shimmer
|
||||
X.globalAlpha = .08;
|
||||
for(var j=0;j<15;j++){
|
||||
var wy = wl+10+j*(H-wl)/15;
|
||||
X.beginPath(); X.moveTo(0,wy);
|
||||
for(var k=0;k<W;k+=30) X.lineTo(k,wy+Math.sin(k*.01+t*1.5+j)*.8);
|
||||
X.strokeStyle='#fff'; X.lineWidth=.5; X.stroke();
|
||||
}
|
||||
X.globalAlpha = 1;
|
||||
|
||||
// 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;
|
||||
// Clouds
|
||||
cls.forEach(function(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';
|
||||
X.beginPath(); X.ellipse(c.x,c.y,c.w*.5,c.w*.18,0,0,Math.PI*2); X.fill();
|
||||
X.beginPath(); X.ellipse(c.x+c.w*.2,c.y-c.w*.06,c.w*.35,c.w*.15,0,0,Math.PI*2); X.fill();
|
||||
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();
|
||||
|
||||
Reference in New Issue
Block a user