`public/embed.html`

64 lines
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Age Theme Slider — embed</title>
<style>
  *{box-sizing:border-box} html,body{margin:0;padding:0;background:transparent}
  body{font-family:-apple-system,BlinkMacSystemFont,sans-serif;color:#fff}
  .shell{position:fixed;inset:0;background:rgba(15,17,21,0.96);backdrop-filter:blur(12px);padding:14px 18px;display:grid;grid-template-columns:auto 1fr auto auto;gap:8px 14px;align-items:center}
  .age{font-size:24px;font-weight:700;color:#c9a96e;min-width:78px;text-align:center;line-height:1}
  .age small{display:block;font-size:10px;font-weight:500;color:rgba(255,255,255,0.7);letter-spacing:1.5px;margin-top:4px;text-transform:uppercase}
  input[type=range]{width:100%;accent-color:#c9a96e}
  button{background:transparent;color:rgba(255,255,255,0.7);border:1px solid rgba(255,255,255,0.18);border-radius:8px;padding:7px 12px;font-size:13px;cursor:pointer;min-height:36px}
  button:hover{color:#fff;border-color:rgba(255,255,255,0.4)}
  .close{width:36px;height:36px;border-radius:50%;padding:0;font-size:18px;line-height:1}
  .tag{grid-column:1/-1;font-size:11px;color:rgba(255,255,255,0.5);text-align:center;font-style:italic}
</style>
</head>
<body>
<div class="shell">
  <div class="age"><span id="ageNum">30</span><small id="bandLabel">Adult</small></div>
  <input type="range" id="ageSlider" min="3" max="95" value="30">
  <button id="resetBtn">Reset</button>
  <button class="close" id="closeBtn" aria-label="Close">×</button>
  <div class="tag" id="tagline">Modern dashboard.</div>
</div>
<script>
(async () => {
  const bands = await fetch('/api/bands').then(r => r.json()).catch(() => null);
  function bandFor(age) {
    const taglines = { toddler:'Primary colors. One face = good.', kid:'Friendly emoji and clear names.', tween:'Brighter palette, full info.', teen:'Dense, dark, neon.', adult:'Modern dashboard.', mature:'Serif, calmer pacing.', senior:'High contrast, large text.', elder:'Yellow on black. Just essentials.' };
    let id;
    if (age <= 5) id = 'toddler'; else if (age <= 9) id = 'kid'; else if (age <= 12) id = 'tween';
    else if (age <= 19) id = 'teen'; else if (age <= 44) id = 'adult'; else if (age <= 59) id = 'mature';
    else if (age <= 79) id = 'senior'; else id = 'elder';
    const b = (bands && bands.bands || []).find(x => x.id === id) || {};
    return { id, label: b.label || id, tagline: taglines[id] || '' };
  }
  const $ = (id) => document.getElementById(id);
  function apply(age) {
    const info = bandFor(age);
    $('ageNum').textContent = age;
    $('bandLabel').textContent = info.label;
    $('tagline').textContent = info.tagline;
    localStorage.setItem('age-pref', age);
    if (window.parent !== window) {
      window.parent.postMessage({ type: 'age-theme:band', age, band: info.id, label: info.label }, '*');
    }
  }
  const s = $('ageSlider');
  s.value = parseInt(localStorage.getItem('age-pref') || '30', 10);
  apply(parseInt(s.value, 10));
  s.addEventListener('input', e => apply(parseInt(e.target.value, 10)));
  $('resetBtn').addEventListener('click', () => { s.value = 30; apply(30); });
  $('closeBtn').addEventListener('click', () => {
    if (window.parent !== window) window.parent.postMessage({ type: 'age-theme:close' }, '*');
    document.body.style.display = 'none';
  });
})();
</script>
</body>
</html>