Day 11: details, dialog, progress & data-*

<style>details{border:1px solid #fcd9c8;border-radius:8px;padding:8px 12px;margin:6px 0;font-family:system-ui}
summary{cursor:pointer;font-weight:600;color:#9a3412}</style>
<details open>
  <summary>Are your sweets eggless?</summary>
  <p>Yes. All our mithai is 100% vegetarian and eggless, made in pure desi ghee.</p>
</details>
<details name="faq">
  <summary>Do you deliver outside Jaipur?</summary>
  <p>We ship dry sweets (kaju katli, soan papdi) across India in 3–5 days.</p>
</details>
<details name="faq">
  <summary>How long do they stay fresh?</summary>
  <p>Milk sweets: 2 days in the fridge. Dry sweets: up to 15 days.</p>
</details>

<style>dialog{border:none;border-radius:12px;padding:20px;max-width:280px;font-family:system-ui;box-shadow:0 10px 40px #0004}
dialog::backdrop{background:#0006}</style>
<button type="button" onclick="offer.showModal()">🎁 See Diwali offer</button>
<dialog id="offer" aria-labelledby="ot">
  <h2 id="ot">Diwali Special 🪔</h2>
  <p>Flat 10% off on gift boxes above ₹2,000 till 1 November.</p>
  <form method="dialog"><button>Close</button></form>
</dialog>

<button popovertarget="info">ℹ️ Ingredients</button>
<div id="info" popover style="padding:12px;border-radius:8px;font-family:system-ui">
  Cashew 60%, sugar 38%, ghee 2%, silver vark.
</div>

<div style="font-family:system-ui">
<p>Bulk order status: <progress value="3" max="5">3 of 5</progress> 3 / 5 steps (packing)</p>
<p>Uploading photo: <progress>loading…</progress> (no value = busy)</p>
<p>Box filled: <meter min="0" max="1" low="0.3" high="0.8" optimum="1" value="0.65">65%</meter> 65%</p>
<p>Shop rating: <meter min="0" max="5" value="4.6">4.6/5</meter> 4.6 / 5</p>
<form oninput="total.value = (+kg.value) * 900">
  <label>Kaju katli kg <input id="kg" type="number" value="2" min="1" style="width:60px"></label>
  = ₹<output name="total" for="kg">1800</output>
</form>
<p>Search result: Fresh <mark>ghewar</mark> available today.</p>
</div>

<style>.card{display:inline-block;border:1px solid #ddd;border-radius:8px;padding:8px;margin:4px;font-family:system-ui;cursor:pointer}
.card[data-stock="low"]{border-color:#e34f26}</style>
<div class="card" data-name="Kaju Katli" data-price="900" data-stock="low">Kaju Katli</div>
<div class="card" data-name="Ghewar" data-price="650" data-stock="ok">Ghewar</div>
<p id="out">Click a card…</p>
<script>
document.querySelectorAll('.card').forEach(function (c) {
  c.onclick = function () { out.textContent = c.dataset.name + ': ₹' + c.dataset.price + '/kg, stock ' + c.dataset.stock; };
});
</script>

<ul id="list" style="font-family:system-ui"></ul>
<template id="row"><li><b class="n"></b> – ₹<span class="p"></span>/kg</li></template>
<script>
var sweets = [['Ladoo', 500], ['Rasmalai', 700], ['Ghewar', 650]];
sweets.forEach(function (s) {
  var li = row.content.cloneNode(true);
  li.querySelector('.n').textContent = s[0];
  li.querySelector('.p').textContent = s[1];
  list.appendChild(li);
});
</script>