`public/section.html`

132 lines
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">
<title>RENTV.com — Section</title>
<meta name="description" content="Commercial real estate news by section — RENTV.com.">
<link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,700;1,400&family=Inter:wght@300;400;600;800&display=swap" rel="stylesheet">
<style>
  :root{--red:#c8102e;--ink:#14171a;--sub:#5b636b;--line:#e4e7ea;--bg:#fff;--wash:#f5f6f8;--sans:'Inter',system-ui,sans-serif;--serif:'Playfair Display',Georgia,serif}
  *{box-sizing:border-box;margin:0;padding:0}
  body{font-family:var(--sans);color:var(--ink);background:var(--bg);line-height:1.45}
  a{color:inherit;text-decoration:none}
  .wrap{max-width:1200px;margin:0 auto;padding:0 20px}
  .util{background:var(--ink);color:#cfd4d9;font-size:12px}
  .util .wrap{display:flex;justify-content:space-between;align-items:center;height:34px}
  .util .acts a{margin-left:14px;color:#cfd4d9}.util .acts a.sub{color:#fff;background:var(--red);padding:4px 12px;border-radius:3px;font-weight:700}
  .mast{border-bottom:2px solid var(--ink);padding:18px 0 12px}
  .mast .wrap{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:3px}
  .logo{font-family:var(--serif);font-weight:700;font-size:34px;letter-spacing:-1px}.logo span{color:var(--red)}
  .logo small{display:block;font-size:11px;font-weight:600;letter-spacing:3px;color:var(--sub);text-transform:uppercase;margin-top:2px;font-family:var(--sans)}
  .datebox{font-size:12px;color:var(--sub);text-align:center}
  nav{border-bottom:1px solid var(--line);position:sticky;top:0;background:#fff;z-index:10}
  nav .wrap{display:flex;gap:2px;align-items:center;height:46px}
  .ham{display:none;background:none;border:0;font-size:24px;line-height:1;color:var(--ink);cursor:pointer;padding:8px 12px 8px 0;margin-right:4px}
  .navlinks{display:flex;gap:2px;align-items:center;overflow-x:auto}
  nav a{font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;padding:14px 13px;border-bottom:3px solid transparent;white-space:nowrap;cursor:pointer}
  nav a:hover,nav a.on{color:var(--red);border-color:var(--red)}
  @media(max-width:860px){
    .ham{display:block;order:-1}
    nav .wrap{height:52px}
    .navlinks{display:none;position:absolute;top:52px;left:0;right:0;background:#fff;flex-direction:column;align-items:stretch;border-bottom:2px solid var(--ink);box-shadow:0 10px 24px rgba(0,0,0,.14);z-index:30;max-height:78vh;overflow-y:auto}
    .navlinks.open{display:flex}
    .navlinks a{padding:15px 20px;border-bottom:1px solid var(--line);border-left:4px solid transparent}
    .navlinks a:hover,.navlinks a.on{color:var(--red);border-bottom:1px solid var(--line);border-left-color:var(--red)}
  }
  .head{padding:30px 0 6px}
  .head .chip{display:inline-block;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--red);margin-bottom:4px}
  .head h1{font-family:var(--serif);font-size:34px;letter-spacing:-.5px}
  .head .sub{font-size:13px;color:var(--sub);margin-top:6px}
  .crumb{font-size:12px;color:var(--sub);padding:14px 0 0}.crumb a{color:var(--red);font-weight:700}
  .cards{display:grid;grid-template-columns:1fr 1fr 1fr;gap:22px;padding:22px 0 10px}
  .card{display:block}
  .card .img{aspect-ratio:16/10;border-radius:5px;background:linear-gradient(135deg,#475569,#94a3b8)}
  .card:nth-child(3n+2) .img{background:linear-gradient(135deg,#7c2d12,#c8102e)}
  .card:nth-child(3n) .img{background:linear-gradient(135deg,#0f766e,#14b8a6)}
  .card h4{font-family:var(--serif);font-size:18px;line-height:1.22;margin:10px 0 4px}
  .card .byl{font-size:12px;color:var(--sub);margin-top:6px}
  .live{display:inline-flex;align-items:center;gap:6px;font-size:11px;color:var(--sub);letter-spacing:.06em;text-transform:uppercase}
  .live .dot{width:7px;height:7px;border-radius:50%;background:#22c55e;animation:pulse 2s infinite}
  @keyframes pulse{0%{box-shadow:0 0 0 0 rgba(34,197,94,.6)}70%{box-shadow:0 0 0 7px rgba(34,197,94,0)}100%{box-shadow:0 0 0 0 rgba(34,197,94,0)}}
  .empty{color:var(--sub);padding:40px 0}
  .skl{background:linear-gradient(90deg,#eee,#f6f6f6,#eee);background-size:200% 100%;animation:sh 1.2s infinite;border-radius:4px;color:transparent}
  @keyframes sh{to{background-position:-200% 0}}
  footer{background:var(--ink);color:#aeb6bd;margin-top:36px;padding:40px 0 30px;font-size:13px}
  footer .cols{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:28px}
  footer .logo{color:#fff;font-size:26px;margin-bottom:8px}footer h5{color:#fff;font-size:12px;text-transform:uppercase;letter-spacing:.08em;margin-bottom:10px}footer a{display:block;padding:4px 0;color:#aeb6bd}
  footer .fine{border-top:1px solid #2a2f34;margin-top:26px;padding-top:16px;font-size:12px;color:#7c848b}
  @media(max-width:860px){.cards{grid-template-columns:1fr 1fr}}
</style>
</head>
<body>
  <div class="util"><div class="wrap">
    <div><a href="/">RENTV.com</a> · Commercial Real Estate News</div>
    <div class="acts"><a href="/">Home</a><a href="/review">The REview</a><a class="sub" href="/">Subscribe</a></div>
  </div></div>

  <header class="mast"><div class="wrap">
    <a href="/" class="logo">REN<span>TV</span>.com<small>Commercial Real Estate News</small></a>
    <div class="datebox"><span>Western U.S. Edition</span><br><span id="today"></span></div>
  </div></header>

  <nav><div class="wrap">
    <button class="ham" id="hamBtn" aria-label="Menu" aria-expanded="false">☰</button>
    <div class="navlinks" id="nav">
      <a href="/">Home</a><a href="/sales">Sales</a><a href="/leases">Leases</a><a href="/financing">Financing</a><a href="/development">Development</a><a href="/multifamily">Multifamily</a><a href="/industrial">Industrial</a><a href="/retail">Retail</a><a href="/review">The REview</a>
    </div>
  </div></nav>

  <div class="wrap">
    <div class="crumb"><a href="/">Home</a> › <span id="crumbcat">Section</span></div>
    <div class="head">
      <span class="chip" id="chip">Section</span>
      <h1 id="secname">Loading…</h1>
      <div class="sub"><span class="live"><span class="dot"></span><span id="count">live from rentv.com</span></span></div>
    </div>
    <div class="cards" id="cards">
      <div class="card"><div class="img skl"></div><h4 class="skl">&nbsp;</h4></div>
      <div class="card"><div class="img skl"></div><h4 class="skl">&nbsp;</h4></div>
      <div class="card"><div class="img skl"></div><h4 class="skl">&nbsp;</h4></div>
    </div>
  </div>

  <footer><div class="wrap"><div class="cols">
    <div><div class="logo">REN<span style="color:var(--red)">TV</span>.com</div><p style="max-width:34ch">Commercial real estate news, deals &amp; conferences across the Western United States since 1998.</p></div>
    <div><h5>Sections</h5><a href="/sales">Sales</a><a href="/leases">Leases</a><a href="/financing">Financing</a><a href="/development">Development</a></div>
    <div><h5>More</h5><a href="/multifamily">Multifamily</a><a href="/industrial">Industrial</a><a href="/retail">Retail</a><a href="/review">The REview</a></div>
    <div><h5>Company</h5><a href="/">Home</a><a href="/">Advertise</a><a href="/">Contact</a></div>
  </div><div class="fine">© 2026 RENTV.com · Headlines refreshed live from rentv.com</div></div></footer>

<script>
document.getElementById('today').textContent = new Date().toLocaleDateString(undefined,{weekday:'long',year:'numeric',month:'long',day:'numeric'});
const esc=s=>(s||'').replace(/[&<>"]/g,c=>({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;'}[c]));
// Category is the last path segment: /financing -> Financing
const slug=(location.pathname.split('/').filter(Boolean)[0]||'sales').toLowerCase();
const CAT=slug.charAt(0).toUpperCase()+slug.slice(1);
document.title='RENTV.com — '+CAT;
document.getElementById('secname').textContent=CAT;
document.getElementById('chip').textContent=CAT+' · Western U.S.';
document.getElementById('crumbcat').textContent=CAT;
// mark active nav
document.querySelectorAll('#nav a').forEach(a=>{if(a.getAttribute('href')==='/'+slug)a.classList.add('on');});
const hamBtn=document.getElementById('hamBtn');
hamBtn.addEventListener('click',()=>{const open=document.getElementById('nav').classList.toggle('open');hamBtn.setAttribute('aria-expanded',open);});
async function load(){
  try{
    const d=await (await fetch('/api/news')).json();
    const items=(d.items||[]).filter(x=>(x.cat||'').toLowerCase()===slug);
    const box=document.getElementById('cards');
    if(!items.length){box.className='';box.innerHTML='<p class="empty">No '+esc(CAT)+' stories in the live feed right now. <a href="/" style="color:var(--red);font-weight:700">Back to the homepage →</a></p>';return;}
    document.getElementById('count').textContent=items.length+' live '+(items.length===1?'story':'stories');
    box.className='cards';
    box.innerHTML=items.map(x=>'<a class="card" href="/news/'+encodeURIComponent(x.id)+'"><div class="img"'+((x.image)?(' style="background:#12161a url(\''+esc(x.image)+'\') center/cover"'):'')+'></div><h4>'+esc(x.title)+'</h4><div class="byl">RENTV Staff · read in-shell</div></a>').join('');
  }catch(e){
    document.getElementById('cards').innerHTML='<p class="empty">Live feed temporarily unavailable — <a href="/" style="color:var(--red);font-weight:700">back to homepage</a>.</p>';
  }
}
load();
</script>
</body>
</html>