Adminator
2e9ad6a83f
- Komponente: Tempo-Steuerung an erste Aktions-Position (ganz links), Rest ans Ende. - Region: 🔔/🐢/🎯 durch eigene SVG-Icons ersetzt (logBadge erhalten). Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
178 lines
8.1 KiB
HTML
178 lines
8.1 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="../../assets/fonts/inter.css">
|
||
<link rel="stylesheet" href="../../assets/css/ggs-header.css">
|
||
<script src="../../assets/js/ggs-header.js"></script>
|
||
<link rel="stylesheet" href="css/style.css">
|
||
</head>
|
||
<body>
|
||
|
||
<canvas id="map"></canvas>
|
||
|
||
<header id="topbar" class="panel ggs-header" data-ggs-sim="tourismusregion" data-ggs-home="../../schueler.html">
|
||
<button id="btnHome" class="icon-btn" title="Zurück zur Übersicht">⌂</button>
|
||
<h1 class="ggs-header-module">Tourismusregion <span class="subtitle">entwickeln</span></h1>
|
||
<div id="waveStatus" class="wave-status">Welle 1 vorbereiten…</div>
|
||
<div class="top-right ggs-header-actions">
|
||
<div id="clock" class="clock">Welle 1/8</div>
|
||
<div class="speed ggs-speed" role="group" aria-label="Zeit">
|
||
<button data-speed="0" class="icon-btn speed-btn ggs-speed-btn" title="Pause">⏸</button>
|
||
<button data-speed="1" class="icon-btn speed-btn ggs-speed-btn active" title="Normal">1×</button>
|
||
<button data-speed="2" class="icon-btn speed-btn ggs-speed-btn" title="Doppelt">2×</button>
|
||
<button data-speed="3" class="icon-btn speed-btn ggs-speed-btn" title="Dreifach">3×</button>
|
||
<button data-speed="4" class="icon-btn speed-btn ggs-speed-btn" title="Vierfach">4×</button>
|
||
</div>
|
||
<button id="btnLog" class="icon-btn" title="Meldungen"><svg class="ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M18 8.5a6 6 0 0 0-12 0c0 6-2.5 7.5-2.5 7.5h17S18 14.5 18 8.5z"/><path d="M13.7 19a2 2 0 0 1-3.4 0"/></svg><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"><svg class="ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M4.5 15a5.5 4 0 0 1 11 0"/><path d="M15.4 13.7c1.4-.5 3-.1 3.5 1.1"/><circle cx="19.2" cy="13" r=".5" fill="currentColor" stroke="none"/><path d="M6.5 15.2v2M9.7 15.6v2.2M12.7 15.6v2.2M15.3 15.2v2"/></svg></button>
|
||
<button id="btnCamera" class="icon-btn" title="Ansicht zurücksetzen"><svg class="ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="7.5"/><circle cx="12" cy="12" r="3"/><path d="M12 2.5v3M12 18.5v3M2.5 12h3M18.5 12h3"/></svg></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>
|