Xenon、PC用の無料タッチダッシュボード

{
  "api": 1,
  "id": "neon-clock",
  "name": "Neon Clock",
  "entry": "index.html",
  "streams": [],
  "actions": []
}

<!doctype html>
<meta charset="utf-8">
<style>
  :root { --accent:#b57bff; --text:#f1ecfa; }
  body { margin:0; display:grid; place-items:center; height:100vh;
         background:transparent; color:var(--text); font-family:system-ui; }
  #t  { font-size:16vw; font-weight:700; color:var(--accent);
         text-shadow:0 0 22px color-mix(in srgb,var(--accent),transparent 50%); }
</style>
<div id="t">--:--</div>
<script>
  // use this tile's complete, contrast-checked palette
  function applyTheme(theme) {
    const p = theme && (theme.palette || theme); // fallback for older Xenon
    if (!p) return;
    if (p.accent) document.documentElement.style.setProperty('--accent', p.accent);
    if (p.text) document.documentElement.style.setProperty('--text', p.text);
  }
  addEventListener('message', e => {
    const m = e.data;
    if (m && m.xenonSdk === 1 &&
        (m.type === 'init' || m.type === 'theme')) applyTheme(m.theme);
  });
  // tick the clock every second
  const pad = n => String(n).padStart(2,'0');
  setInterval(() => {
    const d = new Date();
    document.getElementById('t').textContent = pad(d.getHours())+':'+pad(d.getMinutes());
  }, 1000);
  // say hello so Xenon starts talking to us
  parent.postMessage({ xenonSdk:1, type:'hello' }, '*');
</script>