<!doctype html>
<html lang="cs">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>Kalkulace matrace</title>
<style>
body { font-family: system-ui, sans-serif; max-width: 900px; margin: 40px auto; padding: 0 16px; }
.grid { display:grid; grid-template-columns: 1fr 1fr; gap: 12px; }
label { display:block; margin-top: 10px; }
input, select { width: 100%; padding: 10px; margin-top: 6px; }
button { margin-top: 14px; padding: 12px 16px; cursor:pointer; }
.out { margin-top: 14px; padding: 12px; border: 1px solid #ddd; border-radius: 8px; }
.layers { margin-top: 10px; padding: 10px; border: 1px dashed #ccc; border-radius: 8px; }
small { color:#555; }
</style>
</head>
<body>
<h1>Kalkulace matrace (black box)</h1>
<p><small>Obchodník zadá parametry → server spočítá cenu. Náklady zůstávají skryté.</small></p>
<label>API klíč
<input id="apiKey" type="password" placeholder="interní klíč" />
</label>
<div class="grid">
<label>Šířka (cm)
<input id="w" type="number" value="90" min="50" max="250">
</label>
<label>Délka (cm)
<input id="l" type="number" value="200" min="150" max="250">
</label>
</div>
<div class="grid">
<label>Výška (cm)
<input id="h" type="number" value="25" min="5" max="60">
</label>
<label>Náročnost (1–5)
<input id="c" type="number" value="3" min="1" max="5">
</label>
</div>
<div class="grid">
<label>Potah
<select id="cover">
<option value="basic">Basic</option>
<option value="premium_zip">Premium zip</option>
<option value="coolprotect_zip">CoolProtect zip</option>
</select>
</label>
<label>Počet vrstev lepidla
<input id="glue" type="number" value="2" min="0" max="10">
</label>
</div>
<div class="layers">
<b>Vrstvy</b>
<div class="grid">
<label>Vrstva 1 – materiál
<select id="m1">
<option value="hr35">HR35</option>
<option value="hr40">HR40</option>
<option value="visco">VISCO</option>
<option value="latex">LATEX</option>
</select>
</label>
<label>Vrstva 1 – výška (cm)
<input id="mh1" type="number" value="10" min="1" max="40">
</label>
</div>
<div class="grid">
<label>Vrstva 2 – materiál
<select id="m2">
<option value="hr35">HR35</option>
<option value="hr40">HR40</option>
<option value="visco" selected>VISCO</option>
<option value="latex">LATEX</option>
</select>
</label>
<label>Vrstva 2 – výška (cm)
<input id="mh2" type="number" value="5" min="1" max="40">
</label>
</div>
<div class="grid">
<label>Vrstva 2 – CNC?
<select id="cnc2">
<option value="no">Ne</option>
<option value="yes" selected>Ano</option>
</select>
</label>
<label>Vrstva 2 – CNC intenzita
<select id="int2">
<option value="low">low</option>
<option value="med" selected>med</option>
<option value="high">high</option>
</select>
</label>
</div>
<div class="grid">
<label>Vrstva 3 – materiál
<select id="m3">
<option value="hr35">HR35</option>
<option value="hr40" selected>HR40</option>
<option value="visco">VISCO</option>
<option value="latex">LATEX</option>
</select>
</label>
<label>Vrstva 3 – výška (cm)
<input id="mh3" type="number" value="10" min="1" max="40">
</label>
</div>
</div>
<button id="btn">Spočítat</button>
<div class="out" id="out">Výsledek…</div>
<script>
const API_URL = "https://mattress-quote-api.daniel-obid.workers.dev/api/quote";
const $ = (id) => document.getElementById(id);
$("btn").addEventListener("click", async () => {
$("out").textContent = "Počítám…";
const layers = [
{ material: $("m1").value, height_cm: Number($("mh1").value), cnc: false, cnc_intensity: "low" },
{ material: $("m2").value, height_cm: Number($("mh2").value), cnc: $("cnc2").value === "yes", cnc_intensity: $("int2").value },
{ material: $("m3").value, height_cm: Number($("mh3").value), cnc: false, cnc_intensity: "low" },
];
const payload = {
width_cm: Number($("w").value),
length_cm: Number($("l").value),
height_cm: Number($("h").value),
complexity: Number($("c").value),
cover_type: $("cover").value,
glue_layers: Number($("glue").value),
layers
};
try {
const res = await fetch(API_URL, {
method: "POST",
headers: {
"Content-Type": "application/json",
"X-API-Key": $("apiKey").value.trim()
},
body: JSON.stringify(payload)
});
const data = await res.json();
if (!res.ok) {
$("out").textContent = "Chyba: " + (data.error || res.statusText);
return;
}
$("out").innerHTML =
`<b>Doporučená cena:</b> ${data.recommended_price} Kč<br>` +
`<b>Minimální cena:</b> ${data.minimum_price} Kč<br>` +
`<b>Zóna:</b> ${data.zone}`;
} catch (e) {
$("out").textContent = "Chyba spojení: " + e.message;
}
});
</script>
</body>
</html>