`mockups/admin/index.html`

53 lines
<!doctype html><html lang="en"><head>
<meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">
<title>RENTV Admin — 10 Back-Office Layouts</title>
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700;900&family=Inter:wght@400;600;700;800&display=swap" rel="stylesheet">
<style>
  :root{--red:#c8102e}*{box-sizing:border-box;margin:0}
  body{font-family:'Inter',system-ui,sans-serif;background:#0b0e12;color:#e7ecf1}
  header{padding:34px 26px 18px;max-width:1300px;margin:0 auto}
  h1{font-family:'Playfair Display',serif;font-size:38px;font-weight:900}h1 span{color:var(--red)}
  .lede{color:#aab2ba;max-width:860px;margin-top:10px;line-height:1.6;font-size:15px}
  .rule{background:#12161c;border:1px solid #232a32;border-radius:10px;padding:12px 15px;font-size:13px;margin-top:16px;max-width:860px}
  .rule b{color:#fff}
  .grid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;max-width:1300px;margin:22px auto 60px;padding:0 26px}
  .cardw{background:#11151b;border:1px solid #232a32;border-radius:14px;overflow:hidden;display:flex;flex-direction:column}
  .cap{display:flex;align-items:baseline;gap:10px;padding:14px 16px 10px}
  .cap .id{font:800 13px ui-monospace,monospace;color:#fff;background:var(--red);border-radius:6px;padding:3px 9px}
  .cap h3{font-size:17px;font-weight:800}.cap .style{font-size:12px;color:#8b939b;margin-left:auto}
  .desc{padding:0 16px 12px;color:#aab2ba;font-size:13px;line-height:1.5}
  .framew{position:relative;height:440px;border-top:1px solid #232a32;background:#0d1014;overflow:hidden}
  .framew iframe{width:1600px;height:1000px;border:0;transform:scale(.55);transform-origin:top left}
  .open{position:absolute;right:12px;bottom:12px;background:#14171a;color:#fff;border:1px solid #333;border-radius:22px;padding:9px 16px;font-weight:800;font-size:13px;text-decoration:none;box-shadow:0 4px 14px rgba(0,0,0,.4)}
  .open:hover{background:var(--red)}
  footer{max-width:1300px;margin:0 auto;padding:0 26px 60px;color:#6b747d;font-size:13px}
  @media(max-width:960px){.grid{grid-template-columns:1fr}}
</style></head>
<body>
<header>
  <h1>REN<span>TV</span> Admin · 10 Back-Office Layouts</h1>
  <p class="lede">Ten genuinely distinct back-office designs over the <b style="color:#fff">same real data</b> — the California DRE registry (380,944 brokers · 34,727 firms) plus the LA marquee assets, synced from the usrealestate back-end. Different structures, not recolors. In <b style="color:#fff">every one</b>, each record is clickable out to <b style="color:#fff">LinkedIn, the firm's website, the map, the firm page, and the CA-DRE license</b> — the CRCP pattern.</p>
  <div class="rule">🍔 Same global chrome as the front end: nav + live data in the upper-left hamburger; upper-right is sign-in only. Turn on <b>Numbers</b> to pick components across layouts.</div>
</header>
<div class="grid" id="grid"></div>
<footer>Back-office set · pairs with the 10 front-end layouts (../index.html). Data live via the usrealestate broker API on deploy.</footer>
<script>
const A=[
  ['A01','DataGrid','spreadsheet · sortable','A dense sortable table with sticky headers and row-expand actions — the analyst’s spreadsheet view across brokers, firms and owners.'],
  ['A02','Pipeline Board','kanban · grouped','A kanban board where brokers are grouped into columns by license type — scan the whole registry as a pipeline, expand any card for actions.'],
  ['A03','Master-Detail','list + panel · classic CRM','The classic CRM split: a searchable list on the left drives a full detail panel on the right with the click-outs and key facts.'],
  ['A04','Rolodex','contact cards · avatars','An image-forward rolodex of broker cards with initials avatars and every action on the face of the card.'],
  ['A05','Map Desk','LA map · pinned assets','A map-anchored desk — marquee assets are pins; click one to drive a detail rail with Map, Street View and Assessor links.'],
  ['A06','Command','search-first · keyboard','A command-palette: one big search over 380k brokers, rich result rows, Enter opens the top result’s actions.'],
  ['A07','Firm Tree','org hierarchy · expandable','A firm org-tree — brokerages are parent nodes; expand to see their brokers, with actions at both the firm and person level.'],
  ['A08','Activity Feed','timeline · chronological','A vertical activity spine interleaving recorded property transfers with registry records, newest first.'],
  ['A09','Analytics','KPIs + charts · drill-down','A dashboard: KPI tiles, a top-brokerages bar chart and a license-type mix — click a bar to reach that firm.'],
  ['A10','Triage Inbox','three-pane · email-style','An email-client triage view: folders, a message list of records, and a preview pane with the full action toolbar.'],
];
document.getElementById('grid').innerHTML=A.map(([id,name,style,desc])=>`
  <div class="cardw"><div class="cap"><span class="id">${id}</span><h3>${name}</h3><span class="style">${style}</span></div>
  <div class="desc">${desc}</div>
  <div class="framew"><iframe src="${id}.html" loading="lazy" scrolling="no"></iframe><a class="open" href="${id}.html" target="_blank">Open ${id} full →</a></div></div>`).join('');
</script>
</body></html>