Adminator
7c95a99612
- FREE-Sektion: 4 Cards mit Zwei-Button-Muster (Klima-3D, Fluss, Heli, Stadt — Reihenfolge nach Masstab abnehmend) - LOCKED-Sektion: 5 Cards analog mit "Mehr erfahren" + "Anmelden" - Neues CSS: .sim-btn-primary/secondary/disabled, .sim-card-cta - Heli aus LOCKED in FREE verschoben (hat module_info aktiv) - Quelle: Lehrplan-Diff 2026-04-19 09:45 Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
719 lines
42 KiB
HTML
719 lines
42 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="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; }
|
||
|
||
: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.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; 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: 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 { 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: 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: 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); }
|
||
.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); } }
|
||
|
||
/* ===== 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: 520px; font-size: .95rem; }
|
||
|
||
/* ===== 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; 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; 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; }
|
||
.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); }
|
||
.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; }
|
||
|
||
/* Card-Split: zwei CTAs statt Klick auf gesamte Card */
|
||
.sim-card-cta { display: flex; gap: .45rem; margin-top: .55rem; flex-wrap: wrap; }
|
||
.sim-btn { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: .3rem; padding: .55rem .7rem; min-height: 40px; border-radius: 10px; font-size: .78rem; font-weight: 700; text-decoration: none; border: 1.5px solid transparent; transition: all .2s cubic-bezier(.22,1,.36,1); min-width: 0; }
|
||
.sim-btn-primary { background: var(--fjord); color: #fff; }
|
||
.sim-btn-primary:hover { background: var(--fjord-d); transform: translateY(-1px); }
|
||
.sim-btn-secondary { background: var(--white); color: var(--fjord); border-color: var(--fjord); }
|
||
.sim-btn-secondary:hover { background: var(--fjord-l); }
|
||
.sim-btn-disabled { background: var(--bg2); color: var(--text3); border-color: rgba(0,0,0,.06); cursor: default; }
|
||
/* Cards sind nicht mehr als Ganze klickbar — nur noch Hover-Optik */
|
||
.sim-card.split { cursor: default; display: block; }
|
||
.sim-card.split:hover { transform: translateY(-3px); }
|
||
|
||
/* ===== 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-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: 2rem; }
|
||
.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.6rem; margin-bottom: .5rem; }
|
||
.feat h3 { font-size: .85rem; font-weight: 700; margin-bottom: .2rem; }
|
||
.feat p { font-size: .75rem; color: var(--text2); }
|
||
|
||
/* ===== 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; 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); }
|
||
|
||
/* ===== 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; }
|
||
.feat-grid { grid-template-columns: 1fr; }
|
||
.sim-grid { grid-template-columns: repeat(2, 1fr) !important; }
|
||
.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>
|
||
<body>
|
||
|
||
<!-- NAV -->
|
||
<nav class="nav" id="nav">
|
||
<div class="w">
|
||
<a href="#" class="nav-brand"><img src="assets/img/geograsim_t.svg" alt="GeoGraSim"></a>
|
||
<div class="nav-links">
|
||
<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>
|
||
|
||
<!-- 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. Städte planen. Flüsse managen. Evidenzbasiert und lehrplankonform.</p>
|
||
<div class="hero-btns">
|
||
<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="Klimasimulation">
|
||
<div class="hero-card-body">
|
||
<h3>Klimasimulator 3D</h3>
|
||
<p>Inselstaat durch die Klimakrise fuehren. Kostenlos ausprobieren.</p>
|
||
</div>
|
||
</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>
|
||
|
||
<!-- 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>
|
||
|
||
<!-- 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">Jetzt ausprobieren</span>
|
||
<h2 class="sec-title">Vier Simulationen.<br>Sofort testen.</h2>
|
||
<p class="sec-sub">Einfach starten und Geografie erleben — oder erst mehr über Lehrplan-Bezug und Lernziele lesen.</p>
|
||
</div>
|
||
<div class="sim-grid reveal">
|
||
|
||
<!-- FREE: Klimasimulator 3D -->
|
||
<div class="sim-card split">
|
||
<div class="sim-card-img"><img src="assets/img/card-climate.png" alt="Klimasimulator 3D"></div>
|
||
<div class="sim-card-body">
|
||
<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 class="sim-card-cta">
|
||
<a href="App/modul-klima" class="sim-btn sim-btn-secondary">📖 Mehr erfahren</a>
|
||
<a href="game-3d.html" class="sim-btn sim-btn-primary">▶ Sofort probieren</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- FREE: Flussmanagement -->
|
||
<div class="sim-card split">
|
||
<div class="sim-card-img"><img src="assets/img/card-fluss.png" alt="Flussmanagement"></div>
|
||
<div class="sim-card-body">
|
||
<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 class="sim-card-cta">
|
||
<a href="App/modul-fluss" class="sim-btn sim-btn-secondary">📖 Mehr erfahren</a>
|
||
<a href="fluss.html" class="sim-btn sim-btn-primary">▶ Sofort probieren</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- FREE: Heli-Navigation -->
|
||
<div class="sim-card split">
|
||
<div class="sim-card-img"><img src="assets/img/card-heli.png" alt="Heli-Navigation"></div>
|
||
<div class="sim-card-body">
|
||
<h3>Heli-Navigation <span class="badge-free">TESTEN</span></h3>
|
||
<p>Rettungsflüge in den Alpen: Koordinaten lesen, Höhenstufen interpretieren, Einsatzplanung unter Zeitdruck.</p>
|
||
<div class="sim-card-tags"><span class="sim-tag st2">2. Klasse</span><span class="sim-tag st-time">40 min</span></div>
|
||
<div class="sim-card-cta">
|
||
<a href="App/modul-heli" class="sim-btn sim-btn-secondary">📖 Mehr erfahren</a>
|
||
<a href="heli.html" class="sim-btn sim-btn-primary">▶ Sofort probieren</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- FREE: Stadt & Raumplanung -->
|
||
<div class="sim-card split">
|
||
<div class="sim-card-img"><img src="assets/img/card-city.png" alt="Stadtsimulation"></div>
|
||
<div class="sim-card-body">
|
||
<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 class="sim-card-cta">
|
||
<a href="App/modul-stadt" class="sim-btn sim-btn-secondary">📖 Mehr erfahren</a>
|
||
<a href="stadt.html" class="sim-btn sim-btn-primary">▶ Sofort probieren</a>
|
||
</div>
|
||
</div>
|
||
</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">
|
||
|
||
<div class="sim-card locked split">
|
||
<div class="sim-card-img"><img src="assets/img/card-climate.png" alt="Klimawächter 2D"></div>
|
||
<div class="sim-card-body">
|
||
<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 class="sim-card-cta">
|
||
<a href="App/modul-klima" class="sim-btn sim-btn-secondary">📖 Mehr erfahren</a>
|
||
<a href="login.html" class="sim-btn sim-btn-disabled">🔒 Anmelden</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="sim-card locked split">
|
||
<div class="sim-card-img"><img src="assets/img/card-tectonic.png" alt="Erdbeben"></div>
|
||
<div class="sim-card-body">
|
||
<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 class="sim-card-cta">
|
||
<a href="App/modul-erdbeben" class="sim-btn sim-btn-secondary">📖 Mehr erfahren</a>
|
||
<a href="login.html" class="sim-btn sim-btn-disabled">🔒 Anmelden</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="sim-card locked split">
|
||
<div class="sim-card-img"><img src="assets/img/card-energy.png" alt="Energiemix"></div>
|
||
<div class="sim-card-body">
|
||
<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 class="sim-card-cta">
|
||
<a href="App/modul-energiemix" class="sim-btn sim-btn-secondary">📖 Mehr erfahren</a>
|
||
<a href="login.html" class="sim-btn sim-btn-disabled">🔒 Anmelden</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="sim-card locked split">
|
||
<div class="sim-card-img"><img src="assets/img/card-globe.png" alt="Lieferketten"></div>
|
||
<div class="sim-card-body">
|
||
<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 class="sim-card-cta">
|
||
<a href="App/modul-lieferketten" class="sim-btn sim-btn-secondary">📖 Mehr erfahren</a>
|
||
<a href="login.html" class="sim-btn sim-btn-disabled">🔒 Anmelden</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="sim-card locked split">
|
||
<div class="sim-card-img"><img src="assets/img/card-climate.png" alt="Regenwald"></div>
|
||
<div class="sim-card-body">
|
||
<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 class="sim-card-cta">
|
||
<a href="App/modul-regenwald" class="sim-btn sim-btn-secondary">📖 Mehr erfahren</a>
|
||
<a href="login.html" class="sim-btn sim-btn-disabled">🔒 Anmelden</a>
|
||
</div>
|
||
</div>
|
||
</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 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;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>
|
||
|
||
<!-- 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 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.</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>
|
||
|
||
<!-- 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" 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>
|
||
<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 ===
|
||
var nav = document.getElementById('nav');
|
||
window.addEventListener('scroll', function() { nav.classList.toggle('scrolled', scrollY > 50); });
|
||
|
||
// === SCROLL REVEAL ===
|
||
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(function(el) { obs.observe(el); });
|
||
|
||
// === SCENIC CANVAS ===
|
||
var C = document.getElementById('sc'), X = C.getContext('2d');
|
||
var W, H, t = 0;
|
||
function resize() {
|
||
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);
|
||
|
||
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);
|
||
var wl = H * .56;
|
||
|
||
// Sky
|
||
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 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
|
||
[{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);
|
||
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();
|
||
});
|
||
|
||
// Water
|
||
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);
|
||
|
||
// 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;
|
||
|
||
// 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;
|
||
});
|
||
|
||
requestAnimationFrame(frame);
|
||
}
|
||
frame();
|
||
</script>
|
||
</body>
|
||
</html>
|