27 lines
1.1 KiB
HTML
27 lines
1.1 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="de">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Alchemie Labor</title>
|
|
<link rel="stylesheet" href="style.css">
|
|
</head>
|
|
<body>
|
|
<div id="sidebar">
|
|
<h2>Elemente</h2>
|
|
<p>Klicke, um Atome zu spawnen.</p>
|
|
<div class="spawn-btn" data-element="H" data-color="#ff9999">Wasserstoff (H)</div>
|
|
<div class="spawn-btn" data-element="O" data-color="#99ccff">Sauerstoff (O)</div>
|
|
<div class="spawn-btn" data-element="C" data-color="#bdc3c7">Kohlenstoff (C)</div>
|
|
<div class="spawn-btn" data-element="N" data-color="#cc99ff">Stickstoff (N)</div>
|
|
<div class="spawn-btn" data-element="Na" data-color="#ffcc99">Natrium (Na)</div>
|
|
<div class="spawn-btn" data-element="Cl" data-color="#99ff99">Chlor (Cl)</div>
|
|
</div>
|
|
<div id="lab-desk">
|
|
<h2>Labor-Tisch</h2>
|
|
<p>Ziehe Atome übereinander (z.B. 2x H und 1x O), um Reaktionen auszulösen!</p>
|
|
<div id="workspace"></div>
|
|
</div>
|
|
<script src="app.js"></script>
|
|
</body>
|
|
</html> |