`public/panels/sounds.html`

40 lines
<div class="muted-banner" id="snd-banner">Loading sounds & assets…</div>

<div class="card" style="margin-bottom:14px">
  <div class="row" style="gap:10px;align-items:center;flex-wrap:wrap">
    <input type="search" id="snd-search" placeholder="Filter sources…" style="flex:1;min-width:200px" autocomplete="off">
    <div id="snd-badgefilter" class="snd-badgefilter"></div>
  </div>
  <div class="muted" id="snd-legend" style="font-size:12px;margin-top:10px;line-height:1.6"></div>
</div>

<div id="snd-sections"><div class="muted">Loading…</div></div>

<style>
.snd-badgefilter{display:flex;gap:6px;flex-wrap:wrap}
.snd-bf{background:transparent;border:1px solid var(--line);border-radius:999px;padding:5px 11px;cursor:pointer;
 font:600 12px/1 Inter;color:var(--ink)}
.snd-bf:hover{background:var(--cream)}
.snd-bf.on{background:var(--accent);color:#fff;border-color:var(--accent)}
.snd-legend b{color:var(--ink)}
.snd-sec{margin-bottom:20px}
.snd-sechead{display:flex;align-items:baseline;gap:10px;margin:0 0 4px}
.snd-sechead h2{margin:0;font:600 20px/1.1 "Cormorant Garamond",Georgia,serif}
.snd-sechead .ct{font:700 11px/1 Inter;background:var(--cream);color:var(--accent);border-radius:999px;padding:3px 9px}
.snd-secblurb{font-size:12.5px;color:var(--mut);margin:0 0 12px}
.snd-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px}
.snd-card{border:1px solid var(--line);border-radius:12px;padding:14px;background:#fff;display:flex;flex-direction:column;gap:6px;
 text-decoration:none;color:inherit;transition:border-color .12s,transform .12s}
.snd-card:hover{border-color:var(--accent);transform:translateY(-1px)}
.snd-card .st{display:flex;align-items:center;gap:8px}
.snd-card .nm{font:600 14.5px/1.2 Inter;flex:1;min-width:0}
.snd-card .arr{color:var(--mut);font-size:13px}
.snd-card .bdg{font:700 9.5px/1 Inter;border-radius:999px;padding:3px 8px;white-space:nowrap}
.bdg-brandsafe{background:#e3efe0;color:#2f6b34}
.bdg-cc{background:#eaf0f7;color:#33578a}
.bdg-listen{background:#fdf3dc;color:#8a6a1e}
.bdg-tiktok{background:#f1e8f3;color:#7a3a8a}
.snd-card .nt{font-size:12px;line-height:1.45;color:#5a544b}
.snd-empty{color:var(--mut);font-size:12.5px;padding:8px 0}
</style>