`mockups/index.html`

62 lines
<!doctype html><html lang="en"><head>
<meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">
<title>RENTV — 10 Layout Concepts · pick & choose</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;--ink:#14171a}
  *{box-sizing:border-box;margin:0}
  body{font-family:'Inter',system-ui,sans-serif;background:#0b0e12;color:#e7ecf1}
  header{padding:34px 26px 20px;max-width:1300px;margin:0 auto}
  h1{font-family:'Playfair Display',serif;font-size:40px;font-weight:900}h1 span{color:var(--red)}
  .lede{color:#aab2ba;max-width:820px;margin-top:10px;line-height:1.6;font-size:15px}
  .rules{display:flex;flex-wrap:wrap;gap:12px;margin-top:18px}
  .rule{background:#12161c;border:1px solid #232a32;border-radius:10px;padding:12px 15px;font-size:13px;max-width:400px}
  .rule b{color:#fff}.rule .n{color:var(--red);font-weight:800}
  .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:#fff;overflow:hidden}
  .framew iframe{width:1440px;height:1100px;border:0;transform:scale(.55);transform-origin:top left}
  .open{position:absolute;right:12px;bottom:12px;background:var(--ink);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> · 10 Layout Concepts</h1>
  <p class="lede">Ten genuinely distinct front-page structures for <b style="color:#fff">rentv-v1.agentabrams.com</b> — different skeletons, not palette swaps. Every one renders the <b style="color:#fff">real live data</b> (today's 30 rentv.com headlines, the $995.8M Beverly Center marquee, the CA-DRE brokerage table). Open any layout, then <b style="color:#fff">click the ▦ number badge on any element</b> to drop it into "My Picks" — mix the masthead from one, the ticker from another, the map from a third, and hand me the list.</p>
  <div class="rules">
    <div class="rule">🍔 <b>Global chrome (all 10):</b> a modern <b>hamburger upper-left</b> holds <b>every</b> nav tab + all live data points.</div>
    <div class="rule">👤 <b>Upper-right = user icon only</b>, and it does exactly one thing: <b>sign in</b>. Nothing else lives up there.</div>
    <div class="rule"><span class="n">L#·##</span> <b>Every element is numbered.</b> Turn numbers on (they're on by default), click a badge to pick it.</div>
  </div>
</header>
<div class="grid" id="grid"></div>
<footer>Built on the live prod data snapshot · rentv-v1 (:9704) — the canonical fork rentv.agentabrams.com now serves.</footer>
<script>
const L=[
  ['L01','Trading Desk','dark · dense · monospace','A Bloomberg-style terminal: a live metric rail, a news blotter tape, an LA "watchlist", a brokerage league table and a video tape — maximum data density.'],
  ['L02','Editorial Magazine','light · serif · airy','A glossy magazine front: one giant serif lead with photo, secondary features, a section river, and a dark LA-intelligence editorial block. Calm and premium.'],
  ['L03','Brutalist Grid','raw · bold · hard rules','Oversized black type, 3px rules, a hard 4-column cell grid where the lead story and the $995.8M value block dominate. Loud and confident.'],
  ['L04','Card Masonry','image-forward · filterable','A Pinterest-style masonry of image cards with section filter chips — the most visual, browse-y option; assets and firms become cards too.'],
  ['L05','Split-Screen','news left · LA sticky right','A hard 50/50 split: the live newsroom scrolls on the left while a dark LA-Commercial intelligence panel stays pinned on the right.'],
  ['L06','Broadcast','ticker-first · "on air"','A scrolling headline tape, an ON-AIR video hero, a BREAKING band, then three section columns — the most TV-news, urgent feel.'],
  ['L07','Map-Anchored','LA map hero · interactive','The hero is an LA map with clickable pins for each marquee asset; clicking a pin drives a live detail panel. News wraps below.'],
  ['L08','Timeline Feed','chronological · single spine','One vertical timeline interleaving live news, marquee-asset callouts and recorded transfers — reads like a running market ticker of events.'],
  ['L09','Broadsheet','newspaper · "RENTV Daily"','A full newspaper front page — flag, dateline, a two-column lead, a 4-column news river, a Property-of-the-Day box and brokerage standings.'],
  ['L10','Swiss Index','minimal · numbered · tabular','Extreme restraint: a numbered index of every story, an LA-by-value table and tabular market data. The "index of the market" — nothing wasted.'],
];
document.getElementById('grid').innerHTML=L.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>