Adminator
db4b75c5e6
- Startbildschirm: Name/Klasscode-Felder entfernt (Kinder sind über die Plattform-Session identifiziert). Klick auf eine Wegkarte startet die Partie sofort — separater „Partie starten"-Button entfernt. - Abschluss: „Ergebnis speichern"-Button entfernt; Speichern passiert schon automatisch am Partie-Ende (submitAssessment). Hinweis „automatisch gespeichert" ergänzt. btnSave-Listener null-sicher gemacht. - Seilbahn: Talstation (Baukörper + Satteldach + Umlenkrad) ergänzt — der Lift-Anfang wirkte vorher „transparent". - Responsive/iPad: Panels bekommen Höhen-Deckel + internes Scrollen (decken nie den ganzen Schirm zu). Neue Media-Query für iPad-Landscape (901–1200px / niedrige Höhe): kompaktere Panels, Graphen nach rechts-unten aus dem Info-Panel-Bereich. Sehr flache Screens blenden die Graphen aus. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
175 lines
6.9 KiB
HTML
175 lines
6.9 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="de">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
|
||
<meta name="apple-mobile-web-app-capable" content="yes">
|
||
<title>Tourismusregion entwickeln – GeoGraSim</title>
|
||
<script>/*__TOURISMUSREGION_INJECTION__*/</script>
|
||
<link rel="stylesheet" href="css/style.css">
|
||
</head>
|
||
<body>
|
||
|
||
<canvas id="map"></canvas>
|
||
|
||
<header id="topbar" class="panel">
|
||
<button id="btnHome" class="icon-btn" title="Zurück zur Übersicht">⌂</button>
|
||
<h1>Tourismusregion <span class="subtitle">entwickeln</span></h1>
|
||
<div id="waveStatus" class="wave-status">Welle 1 vorbereiten…</div>
|
||
<div class="top-right">
|
||
<div id="clock" class="clock">Welle 1/8</div>
|
||
<div class="speed" role="group" aria-label="Zeit">
|
||
<button data-speed="0" class="icon-btn speed-btn" title="Pause">⏸</button>
|
||
<button data-speed="1" class="icon-btn speed-btn active" title="Normal">1×</button>
|
||
<button data-speed="2" class="icon-btn speed-btn" title="Doppelt">2×</button>
|
||
<button data-speed="3" class="icon-btn speed-btn" title="Dreifach">3×</button>
|
||
<button data-speed="4" class="icon-btn speed-btn" title="Vierfach">4×</button>
|
||
</div>
|
||
<button id="btnLog" class="icon-btn" title="Meldungen">🔔<span id="logBadge" class="badge hidden">0</span></button>
|
||
<button id="btnSound" class="icon-btn" title="Sound an/aus">🔊</button>
|
||
<button id="btnMusic" class="icon-btn" title="Musik-Player">🎵</button>
|
||
<button id="btnAnim" class="icon-btn" title="Reduzierte Animationen">🐢</button>
|
||
<button id="btnCamera" class="icon-btn" title="Ansicht zurücksetzen">🎯</button>
|
||
<button id="btnHelp" class="icon-btn" title="Anleitung">?</button>
|
||
</div>
|
||
</header>
|
||
|
||
<aside id="kpis" class="panel">
|
||
<div class="kpi-season" id="seasonBadge">🌸 Frühling</div>
|
||
<div id="repRow">
|
||
<div class="rep-head"><span>🏆 Ruf der Region</span><b id="repVal">–</b></div>
|
||
<div class="rep-bar"><div id="repFill"></div></div>
|
||
</div>
|
||
<div class="kpi"><span>💰 Budget</span><b id="kMoney">500 €</b></div>
|
||
<div class="kpi"><span>🌲 Umwelt</span><b id="kEnv">75</b></div>
|
||
<div class="kpi"><span>🥾 Gäste jetzt</span><b id="kVisitors">0</b></div>
|
||
<div class="kpi"><span>🚗 Verkehr</span><b id="kTraffic">0</b></div>
|
||
<div class="kpi"><span>📈 Wertschöpfung</span><b id="kRevenue">0 €</b></div>
|
||
<div id="goals">
|
||
<h3>Ziele</h3>
|
||
<ul id="goalList"></ul>
|
||
</div>
|
||
<button id="btnStats" class="secondary slim">📊 Statistik</button>
|
||
<button id="btnNextWave" class="primary slim">⏩ Nächste Welle</button>
|
||
</aside>
|
||
|
||
<aside id="musicPanel" class="panel hidden">
|
||
<div class="music-row">
|
||
<button id="muPrev" class="icon-btn small" title="Voriger Titel">⏮</button>
|
||
<button id="muPlay" class="icon-btn small" title="Abspielen/Pause">▶</button>
|
||
<button id="muNext" class="icon-btn small" title="Nächster Titel">⏭</button>
|
||
<input id="muVol" type="range" min="0" max="1" step="0.05" value="0.28"
|
||
aria-label="Musik-Lautstärke">
|
||
</div>
|
||
<select id="muSelect" aria-label="Titel wählen"></select>
|
||
</aside>
|
||
|
||
<aside id="buildmenu" class="panel">
|
||
<h2>Bauen</h2>
|
||
<div id="buildItems"></div>
|
||
</aside>
|
||
|
||
<section id="infoPanel" class="panel hidden">
|
||
<div class="info-head">
|
||
<b id="infoTitle"></b>
|
||
<button id="infoClose" class="icon-btn small" title="Schließen">✕</button>
|
||
</div>
|
||
<div id="infoBody"></div>
|
||
<button id="btnUpgrade" class="primary slim hidden"></button>
|
||
<button id="btnDemolish" class="secondary slim">🧨 Abreißen (30 % zurück)</button>
|
||
</section>
|
||
|
||
<section id="graphMoney" class="panel graphbox">
|
||
<canvas id="graphMoneyCanvas"></canvas>
|
||
</section>
|
||
<section id="graphSat" class="panel graphbox">
|
||
<canvas id="graphSatCanvas"></canvas>
|
||
</section>
|
||
|
||
<div id="toast" class="panel hidden"></div>
|
||
|
||
<div id="cardOverlay" class="overlay hidden">
|
||
<div class="card panel">
|
||
<div id="cardIcon" class="card-icon"></div>
|
||
<h2 id="cardTitle"></h2>
|
||
<ul id="cardList" class="hidden"></ul>
|
||
<p id="cardText"></p>
|
||
<div class="card-buttons">
|
||
<button id="cardOk" class="primary">Weiter</button>
|
||
<button id="cardAlt" class="secondary hidden">Ablehnen</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="logOverlay" class="overlay hidden">
|
||
<div class="card panel">
|
||
<h2>📨 Meldungen</h2>
|
||
<ul id="logList"></ul>
|
||
<button id="logClose" class="primary">Schließen</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="statsOverlay" class="overlay hidden">
|
||
<div class="card panel end-card">
|
||
<h2>📊 Regions-Statistik</h2>
|
||
<div id="statsBody"></div>
|
||
<button id="statsClose" class="primary">Schließen</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="startOverlay" class="overlay">
|
||
<div class="card panel">
|
||
<div class="card-icon">🏞️</div>
|
||
<h2>Tourismusregion entwickeln</h2>
|
||
<p class="intro">Besuchergruppen kommen in <b>8 Wellen</b> durch dein Tal.
|
||
Baue in den Baupausen die passende Infrastruktur, mach jede Gruppe
|
||
glücklich und halte Wirtschaft, Umwelt und Budget im Gleichgewicht.</p>
|
||
<h3 class="map-title">Wegkarte wählen — tippe eine Karte, dann geht's los</h3>
|
||
<div id="mapList"></div>
|
||
<p class="start-hint">Tipp: Gebäude wirken nur auf Gäste in ihrer Reichweite –
|
||
baue nah an den Wegen!</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="endOverlay" class="overlay hidden">
|
||
<div class="card panel end-card">
|
||
<div id="endProfileIcon" class="card-icon"></div>
|
||
<h2 id="endProfileName"></h2>
|
||
<p id="endProfileText" class="intro"></p>
|
||
<div id="endStars" class="end-stars"></div>
|
||
<div id="endBars"></div>
|
||
<ul id="endGoals" class="end-goals"></ul>
|
||
<p id="endFacts" class="end-facts"></p>
|
||
<div id="endFeedback" class="end-feedback"></div>
|
||
<div id="endReflect" class="end-reflect"></div>
|
||
<p class="end-saved">💾 Dein Ergebnis wurde automatisch gespeichert.</p>
|
||
<div class="card-buttons">
|
||
<button id="btnRestart" class="secondary">🔄 Nochmal spielen</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<script type="module" src="js/main.js"></script>
|
||
<script>
|
||
// Fallback: Per Doppelklick geöffnet (file://) laden ES-Module nicht.
|
||
window.addEventListener('load', function () {
|
||
setTimeout(function () {
|
||
if (window.__ttLoaded) return;
|
||
var card = document.querySelector('#startOverlay .card');
|
||
if (!card) return;
|
||
var warn = document.createElement('p');
|
||
warn.style.cssText = 'background:#fdecea;color:#a33227;border-radius:12px;'
|
||
+ 'padding:12px;font-size:14px;text-align:left;line-height:1.5';
|
||
warn.textContent = location.protocol === 'file:'
|
||
? '⚠️ Die Seite wurde als Datei geöffnet – so kann die Simulation nicht '
|
||
+ 'starten. Bitte über einen Webserver aufrufen, z. B. XAMPP starten '
|
||
+ 'und http://localhost/DefensegeograSimMac/ öffnen.'
|
||
: '⚠️ Die Simulation konnte nicht geladen werden. Bitte Seite neu laden '
|
||
+ '(Strg/Cmd+R).';
|
||
card.appendChild(warn);
|
||
}, 1500);
|
||
});
|
||
</script>
|
||
</body>
|
||
</html>
|