215 lines
9.8 KiB
HTML
215 lines
9.8 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="de">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Chemisches Alchemie Labor</title>
|
|
<link rel="stylesheet" href="style.css">
|
|
</head>
|
|
<body>
|
|
<div id="sidebar">
|
|
<div class="sidebar-header">
|
|
<h2>🧪 Labor-Zentrale</h2>
|
|
<p>Atome spawnen & fusionieren</p>
|
|
</div>
|
|
|
|
<div class="sidebar-tabs">
|
|
<button id="tab-sandbox-btn" class="tab-btn active">🧪 Sandbox</button>
|
|
<button id="tab-story-btn" class="tab-btn">🏆 Story</button>
|
|
</div>
|
|
|
|
<!-- SANDBOX CONTENT -->
|
|
<div id="sandbox-content" class="tab-content">
|
|
<div id="elements-section">
|
|
<h3>Atome spawnen</h3>
|
|
<div class="elements-grid">
|
|
<div class="spawn-btn" data-element="H" data-color="#ff7675" title="Wasserstoff">H</div>
|
|
<div class="spawn-btn" data-element="He" data-color="#e84393" title="Helium">He</div>
|
|
<div class="spawn-btn" data-element="C" data-color="#2d3436" title="Kohlenstoff">C</div>
|
|
<div class="spawn-btn" data-element="N" data-color="#a29bfe" title="Stickstoff">N</div>
|
|
<div class="spawn-btn" data-element="O" data-color="#74b9ff" title="Sauerstoff">O</div>
|
|
<div class="spawn-btn" data-element="Na" data-color="#ffeaa7" title="Natrium">Na</div>
|
|
<div class="spawn-btn" data-element="Cl" data-color="#55efc4" title="Chlor">Cl</div>
|
|
<div class="spawn-btn" data-element="S" data-color="#fdcb6e" title="Schwefel">S</div>
|
|
<div class="spawn-btn" data-element="Fe" data-color="#b2bec3" title="Eisen">Fe</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="book-section">
|
|
<div class="book-header">
|
|
<h3>📖 Lexikon</h3>
|
|
<span id="discovery-progress">0/18</span>
|
|
</div>
|
|
<div id="discovery-book" class="book-list">
|
|
<!-- Dynamisch gefüllt durch app.js -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- STORY CONTENT -->
|
|
<div id="story-content" class="tab-content hidden">
|
|
<div id="story-level-selector">
|
|
<div class="level-selector-header">
|
|
<h3>Kapitel-Auswahl</h3>
|
|
<span id="story-overall-progress">1/8</span>
|
|
</div>
|
|
<div class="level-dots-grid">
|
|
<!-- Level-Auswahlknöpfe [1] [2] etc. -->
|
|
</div>
|
|
</div>
|
|
|
|
<div id="story-quest-panel">
|
|
<div class="quest-card">
|
|
<div class="quest-header">
|
|
<span id="quest-level-title">Level 1: Suppensalz</span>
|
|
</div>
|
|
<div class="professor-dialog-box">
|
|
<div class="professor-avatar">👴</div>
|
|
<div class="professor-bubble">
|
|
<p id="quest-intro-text">Hallo Lehrling! Schön dich im Labor zu sehen...</p>
|
|
</div>
|
|
</div>
|
|
<div class="quest-objective-box">
|
|
<h4>Missionsziel:</h4>
|
|
<div class="objective-item">
|
|
<span class="objective-checkbox">⬜</span>
|
|
<span id="quest-goal-text">Erzeuge 1x NaCl (Speisesalz)</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="story-elements-section">
|
|
<h3>Verfügbare Labor-Atome</h3>
|
|
<div id="story-elements-grid" class="elements-grid">
|
|
<!-- Atome, die für dieses Level erlaubt sind -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="lab-desk">
|
|
<div class="desk-header">
|
|
<div>
|
|
<h2 id="desk-title">Labor-Tisch (Sandbox)</h2>
|
|
<p id="desk-subtitle">Ziehe Atome übereinander, um Reaktionen auszulösen!</p>
|
|
</div>
|
|
<div class="desk-controls">
|
|
<div id="stats">
|
|
Atome: <span id="atom-count">0</span> | Moleküle: <span id="molecule-count">0</span>
|
|
</div>
|
|
<button id="pse-toggle-btn" class="control-btn">📊 Periodensystem</button>
|
|
<button id="clear-desk-btn" class="control-btn danger">🧹 Tisch leeren</button>
|
|
</div>
|
|
</div>
|
|
<div id="workspace"></div>
|
|
</div>
|
|
|
|
<!-- Info-Modal für Entdeckungen -->
|
|
<div id="info-modal" class="modal hidden">
|
|
<div class="modal-overlay"></div>
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<span class="modal-emoji">🎉</span>
|
|
<h2 id="modal-title">Molekül entdeckt!</h2>
|
|
<button class="modal-close-icon">×</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<div id="modal-formula-badge">H₂O</div>
|
|
<h3 id="modal-molecule-name">Wasser</h3>
|
|
<p id="modal-description">Beschreibung...</p>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button id="modal-close-btn">Großartig!</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Story Success Modal -->
|
|
<div id="story-success-modal" class="modal hidden">
|
|
<div class="modal-overlay"></div>
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<span class="modal-emoji">🏆</span>
|
|
<h2>Level abgeschlossen!</h2>
|
|
<button class="modal-close-icon">×</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<div class="professor-avatarlarge">👴</div>
|
|
<h3 id="story-success-level-name">Level 1 abgeschlossen</h3>
|
|
<p id="story-success-text">Beschreibung des Erfolgs...</p>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button id="story-next-level-btn">Nächstes Level ➡️</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- INTERAKTIVES PERIODENSYSTEM (PSE) MODAL -->
|
|
<div id="pse-modal" class="modal hidden">
|
|
<div class="modal-overlay"></div>
|
|
<div class="modal-content pse-modal-content">
|
|
<div class="modal-header">
|
|
<span class="modal-emoji">📊</span>
|
|
<h2>Interaktives Periodensystem (PSE)</h2>
|
|
<button id="pse-close-icon" class="modal-close-icon">×</button>
|
|
</div>
|
|
<div class="pse-modal-body">
|
|
<div class="pse-grid-container">
|
|
<div id="pse-grid">
|
|
<!-- Dynamisch befüllt durch app.js -->
|
|
</div>
|
|
<div class="pse-legend">
|
|
<span class="legend-item"><span class="legend-color alkalimetall"></span>Alkalimetalle</span>
|
|
<span class="legend-item"><span class="legend-color erdalkali"></span>Erdalkali</span>
|
|
<span class="legend-item"><span class="legend-color uebergang"></span>Übergangsmetalle</span>
|
|
<span class="legend-item"><span class="legend-color metalloid"></span>Halbmetalle</span>
|
|
<span class="legend-item"><span class="legend-color nichtmetall"></span>Nichtmetalle</span>
|
|
<span class="legend-item"><span class="legend-color halogen"></span>Halogene</span>
|
|
<span class="legend-item"><span class="legend-color edelgas"></span>Edelgase</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="pse-steckbrief">
|
|
<div class="steckbrief-empty">
|
|
<p>Klicke auf ein leuchtendes Element im Periodensystem, um den wissenschaftlichen Steckbrief zu öffnen!</p>
|
|
</div>
|
|
<div class="steckbrief-card hidden">
|
|
<div class="steckbrief-header">
|
|
<div id="steckbrief-box">H</div>
|
|
<div>
|
|
<h3 id="steckbrief-name">Wasserstoff</h3>
|
|
<span id="steckbrief-category">Nichtmetall</span>
|
|
</div>
|
|
</div>
|
|
<div class="steckbrief-stats">
|
|
<div class="steckbrief-stat-box">
|
|
<span class="stat-label">Ordnungszahl</span>
|
|
<span id="steckbrief-number" class="stat-value">1</span>
|
|
</div>
|
|
<div class="steckbrief-stat-box">
|
|
<span class="stat-label">Atommasse</span>
|
|
<span id="steckbrief-mass" class="stat-value">1.008 u</span>
|
|
</div>
|
|
</div>
|
|
<div class="bohr-model-container">
|
|
<div class="bohr-nucleus"></div>
|
|
<div id="bohr-shells">
|
|
<!-- Shells und Elektronen werden per JS gerendert -->
|
|
</div>
|
|
</div>
|
|
<p id="steckbrief-desc">Das häufigste und leichteste Element im Universum. Es bildet den Brennstoff von Sternen.</p>
|
|
<button id="pse-spawn-btn">⚛️ Atom auf Tisch spawnen</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button id="pse-close-btn">Schließen</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="app.js"></script>
|
|
</body>
|
|
</html>
|