synapbus/internal/plugins/demo/ui/index.html

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>Demo Plugin — Notes</title>
<style>
  body{font-family:-apple-system,sans-serif;margin:2rem;max-width:760px;background:#0b0f17;color:#e6edf3}
  h1{color:#c4b5fd}
  .note{border:1px solid #1f2937;border-radius:10px;padding:12px 16px;margin:10px 0;background:#111827}
  .note h3{margin:0 0 6px;color:#67e8f9}
  .note small{color:#9aa4b2;font-family:monospace}
  button{background:#7c5cff;color:white;border:0;border-radius:8px;padding:8px 14px;cursor:pointer}
</style>
</head>
<body>
<h1>Demo Plugin · Notes</h1>
<p>Minimal panel served from <code>/ui/plugins/demo/</code>. The HTML is embedded
into the binary via <code>go:embed</code>; the list below is fetched from the
plugin's own REST route <code>/api/plugins/demo/notes</code>.</p>
<div id="notes"></div>
<button onclick="refresh()">refresh</button>
<script>
async function refresh(){
  const r = await fetch('/api/plugins/demo/notes');
  const data = await r.json();
  const el = document.getElementById('notes');
  el.innerHTML = (data.notes||[]).map(n =>
    '<div class="note"><h3>'+n.title+'</h3><small>'+n.slug+' · '+n.created_at+'</small><p>'+(n.body||'')+'</p></div>'
  ).join('') || '<em>(no notes yet — POST /api/plugins/demo/notes)</em>';
}
refresh();
</script>
</body>
</html>