`public/admin/cards.html`

23 lines
<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">
<title>RENTV Admin — Module Grid</title><link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800&family=Playfair+Display:wght@700&display=swap" rel="stylesheet"><style>
:root{--a:#c8102e;--bg:#0e1116;--pan:#161b22;--ln:#242b34;--sub:#8b949e;--ink:#e6edf3}
*{box-sizing:border-box;margin:0;padding:0}body{font-family:'Inter',system-ui,sans-serif;background:var(--bg);color:var(--ink);line-height:1.5}
a{color:inherit;text-decoration:none}.wrap{max-width:1240px;margin:0 auto;padding:0 22px}
.abar{background:#0a0d11;border-bottom:1px solid var(--ln)}.abar .wrap{display:flex;justify-content:space-between;align-items:center;height:52px}
.abrand{font-family:'Playfair Display',serif;font-size:20px}.abrand span{color:var(--a)}.abrand small{font-family:'Inter';font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--sub);margin-left:8px}
.abar a{font-size:12px;color:var(--sub)}.abar a:hover{color:var(--ink)}
.ah{padding:20px 0 4px}.ah h1{font-size:20px}.ah p{color:var(--sub);font-size:13px}
#app{padding:18px 0 60px;min-height:60vh}
.anav{background:var(--pan);border-bottom:1px solid var(--ln);position:sticky;top:0;z-index:20}
.anav .wrap{display:flex;gap:2px;align-items:center;height:44px}
.aham{display:none;background:none;border:0;font-size:22px;line-height:1;color:var(--ink);cursor:pointer;margin-left:auto;padding:6px 10px 6px 0}
.anl{display:flex;gap:4px;align-items:center;overflow-x:auto}
.anav a{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--sub);padding:11px 12px;white-space:nowrap;border-bottom:3px solid transparent}
.anav a:hover{color:var(--a);border-color:var(--a)}
@media(max-width:820px){.aham{display:block}.anl{display:none;position:absolute;top:44px;left:0;right:0;background:var(--pan);flex-direction:column;align-items:stretch;border-bottom:1px solid var(--ln);box-shadow:0 12px 26px rgba(0,0,0,.4);z-index:30}.anl.open{display:flex}.anl a{padding:13px 20px;border-bottom:1px solid var(--ln)}}</style></head>
<body data-ver="cards" class="ver-cards">
<div class="abar"><div class="wrap"><div class="abrand">REN<span>TV</span> Admin<small>Module Grid</small></div><a href="/admin">← all 10 admin versions</a></div></div>
<div class="anav"><div class="wrap"><button class="aham" id="ahb" aria-label="Menu" aria-expanded="false">☰</button><div class="anl" id="anl"><a href="/admin">Dashboards</a><a href="/admin/publish">Publish</a><a href="/blog">Blog</a><a href="/">Main site ↗</a></div></div></div>
<div class="wrap"><div class="ah"><h1>Module Grid</h1><p>Independent widget cards you can scan at a glance. · live gated data</p></div><main id="app"><p style="color:var(--sub);padding:30px">Loading admin data…</p></main></div>
<script>var ahb=document.getElementById('ahb');if(ahb)ahb.addEventListener('click',function(){var o=document.getElementById('anl').classList.toggle('open');ahb.setAttribute('aria-expanded',o);});</script>
<script src="/admin/render.js"></script></body></html>