`public/admin/index.html`

25 lines
<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">
<title>RENTV — 10 Admin Versions</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)}}
.hd{padding:44px 0 6px;text-align:center}.hd h1{font-family:'Playfair Display',serif;font-size:clamp(28px,5vw,48px)}.hd h1 span{color:var(--a)}.hd p{color:var(--sub);margin-top:8px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px;padding:28px 0 60px}
.vc{background:var(--pan);border:1px solid var(--ln);border-radius:10px;padding:20px;transition:.2s}
.vc:hover{transform:translateY(-4px);border-color:var(--a);box-shadow:0 16px 40px rgba(0,0,0,.5)}
.tag{font-size:10px;text-transform:uppercase;letter-spacing:.14em;color:var(--a);font-weight:800}.vc h3{font-size:20px;margin:6px 0}.vc p{color:var(--sub);font-size:14px;min-height:40px}.vc .go{color:var(--a);font-weight:800;font-size:12px;text-transform:uppercase;letter-spacing:.06em}</style></head>
<body><div class="abar"><div class="wrap"><div class="abrand">REN<span>TV</span> Admin</div><a href="/">← main site</a></div></div>
<header class="hd"><div class="wrap"><h1>REN<span>TV</span> · 10 Admin Versions</h1><p>Ten complete back-office directions over the real subscriber / feed / video / market data. Open each and pick the one to run.</p></div></header>
<div class="wrap"><div class="grid"><a class="vc" href="/admin/classic"><div class="tag">Admin</div><h3>Classic Dashboard</h3><p>KPI cards up top, two data tables below. The safe, familiar admin.</p><span class="go">Open →</span></a><a class="vc" href="/admin/sidebar"><div class="tag">Admin</div><h3>Sidebar Console</h3><p>Left nav rail + main panel — the SaaS-standard admin shell.</p><span class="go">Open →</span></a><a class="vc" href="/admin/console"><div class="tag">Admin</div><h3>Ops Console</h3><p>Monospace metrics row + a live activity log. For the data-desk operator.</p><span class="go">Open →</span></a><a class="vc" href="/admin/cards"><div class="tag">Admin</div><h3>Module Grid</h3><p>Independent widget cards you can scan at a glance.</p><span class="go">Open →</span></a><a class="vc" href="/admin/table"><div class="tag">Admin</div><h3>Data Table</h3><p>Dense spreadsheet-style rows — power-user, keyboard-first feel.</p><span class="go">Open →</span></a><a class="vc" href="/admin/analytics"><div class="tag">Admin</div><h3>Analytics First</h3><p>One giant headline metric, then supporting stats and a table.</p><span class="go">Open →</span></a><a class="vc" href="/admin/split"><div class="tag">Admin</div><h3>Master–Detail</h3><p>Scrollable list on the left, KPI rail on the right.</p><span class="go">Open →</span></a><a class="vc" href="/admin/kanban"><div class="tag">Admin</div><h3>Kanban Board</h3><p>Stories grouped into columns by sector — editorial pipeline view.</p><span class="go">Open →</span></a><a class="vc" href="/admin/minimal"><div class="tag">Admin</div><h3>Minimal</h3><p>Quiet single-column stat sheet. No chrome, just the numbers.</p><span class="go">Open →</span></a><a class="vc" href="/admin/command"><div class="tag">Admin</div><h3>Command Center</h3><p>Multi-panel grid — every surface (subs, feed, video, market) at once.</p><span class="go">Open →</span></a></div></div></body></html>