79 lines
3.0 KiB
HTML
79 lines
3.0 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</h2>
|
|
<p>Atome spawnen & fusionieren</p>
|
|
</div>
|
|
|
|
<div id="elements-section">
|
|
<h3>Atome</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="O" data-color="#74b9ff" title="Sauerstoff">O</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="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">
|
|
<!-- Dynamisch gefüllt durch app.js -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="lab-desk">
|
|
<div class="desk-header">
|
|
<div>
|
|
<h2>Labor-Tisch</h2>
|
|
<p>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="clear-desk-btn">🧹 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>
|
|
</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>
|
|
|
|
<script src="app.js"></script>
|
|
</body>
|
|
</html>
|