<!doctype html>
|
<html lang="de">
|
<head>
|
<meta charset="utf-8" />
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
<title>Baukasten Playground</title>
|
<style>
|
body { font-family: system-ui, sans-serif; margin: 24px; color: #222; }
|
h2 { margin: 0 0 12px; }
|
.bar { display: flex; gap: 8px; align-items: center; margin-bottom: 16px; }
|
baukasten-configuration-picker { display: block; max-width: 920px; }
|
.toolbar { margin: 16px 0; display: flex; gap: 8px; align-items: center; }
|
#status { color: #555; font-size: 0.9em; }
|
#results { max-width: 920px; }
|
.result { border: 1px solid #ccc; border-radius: 4px; margin-bottom: 8px; }
|
.result h4 { margin: 0; padding: 6px 8px; background: #f6f6f6; font: 600 0.9em/1.4 inherit; }
|
.result pre { margin: 0; padding: 8px; overflow-x: auto; font-size: 0.85em; }
|
button, input { font: inherit; padding: 4px 8px; }
|
</style>
|
</head>
|
<body>
|
<h2>Baukasten Playground</h2>
|
<div class="bar">
|
<label>Kundennummer: <input id="customer" value="77002" /></label>
|
<button id="reload">Katalog laden</button>
|
</div>
|
|
<baukasten-configuration-picker id="picker"></baukasten-configuration-picker>
|
|
<div class="toolbar">
|
<button id="load">Auswahl lesen & anzeigen</button>
|
<span id="status"></span>
|
</div>
|
|
<div id="results"></div>
|
|
<script type="module" src="/dist/baukasten-playground.mjs"></script>
|
</body>
|
</html>
|
