← back to Nationalrealestate
public/commercial.html
140 lines
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect width='16' height='16' rx='3' fill='%230a0d13'/%3E%3Ctext x='8' y='12' font-size='10' text-anchor='middle' fill='%23c8a24b'%3ECR%3C/text%3E%3C/svg%3E">
<title>USRealEstate — LA Commercial</title>
<style>
:root{--bg:#0a0d13;--panel:#11151d;--line:#222936;--fg:#e8ecf2;--muted:#8a93a3;--gold:#c8a24b;--cols:4;}
*{box-sizing:border-box;}
html,body{margin:0;background:var(--bg);color:var(--fg);font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;}
#topbar{display:flex;align-items:center;gap:14px;padding:10px 18px;background:rgba(17,21,29,.94);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20;backdrop-filter:blur(6px);}
.brand{font-size:16px;font-weight:700;white-space:nowrap;} .brand b{color:var(--gold);}
nav{display:flex;gap:14px;font-size:13px;} nav a{color:var(--muted);text-decoration:none;} nav a:hover,nav a.active{color:var(--gold);}
main{padding:16px 18px 60px;max-width:1500px;margin:0 auto;}
h2{font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:22px 0 10px;font-weight:600;}
/* marquee */
#marquee{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px;}
.mq{background:linear-gradient(160deg,#141a24,#0d1119);border:1px solid var(--line);border-radius:10px;padding:14px;}
.mq .val{font-size:20px;font-weight:700;color:var(--gold);}
.mq .addr{font-size:13px;margin-top:4px;} .mq .sub{font-size:11px;color:var(--muted);margin-top:6px;}
.mq .brief{font-size:12px;color:#c3ccd8;margin-top:8px;line-height:1.4;font-style:italic;}
/* controls */
#controls{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:6px 0 4px;}
#seg{display:inline-flex;flex-wrap:wrap;border:1px solid var(--line);border-radius:8px;overflow:hidden;}
#seg button{background:var(--panel);color:var(--muted);border:0;border-right:1px solid var(--line);padding:7px 11px;font-size:12px;cursor:pointer;}
#seg button:last-child{border-right:0;} #seg button.active{background:var(--gold);color:var(--bg);font-weight:700;}
input,select{background:var(--panel);color:var(--fg);border:1px solid var(--line);border-radius:8px;padding:7px 10px;font-size:13px;}
#controls label{font-size:12px;color:var(--muted);display:flex;align-items:center;gap:6px;}
#count{font-size:12px;color:var(--muted);margin-left:auto;}
/* grid */
#grid{display:grid;grid-template-columns:repeat(var(--cols),1fr);gap:10px;margin-top:8px;}
.card{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:12px;cursor:pointer;transition:border-color .12s;}
.card:hover{border-color:var(--gold);}
.card .t{font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--gold);}
.card .a{font-size:14px;font-weight:600;margin:4px 0 2px;line-height:1.25;}
.card .c{font-size:12px;color:var(--muted);}
.card .v{font-size:16px;font-weight:700;margin-top:8px;}
.card .m{font-size:11px;color:var(--muted);margin-top:6px;display:flex;flex-wrap:wrap;gap:8px;}
.when{color:var(--muted);}
#loading{padding:50px;text-align:center;color:var(--muted);}
</style>
<link rel="stylesheet" href="/nav-drawer.css">
<link rel="stylesheet" href="/geo-search.css">
</head>
<body>
<div id="topbar">
<div class="brand"><b>USRealEstate</b> — LA Commercial</div>
<nav>
<a href="/">Map</a><a href="/markets.html">Markets</a>
<a href="/commercial.html" class="active">Commercial</a>
<a href="/commercial-feed.html">Feed</a>
<a href="/commercial-brokers.html">Brokers</a>
</nav>
</div>
<main>
<h2>Marquee LA Commercial Assets</h2>
<div id="marquee"></div>
<h2>Explore</h2>
<div id="controls">
<div id="seg"></div>
<input id="q" placeholder="Search address / city…" style="width:200px">
<select id="city"><option value="">All cities</option></select>
<select id="sort">
<option value="value_desc">Assessed ↓</option>
<option value="value_asc">Assessed ↑</option>
<option value="recent">Recently recorded</option>
<option value="sqft_desc">Size ↓</option>
</select>
<label>Density <input id="density" type="range" min="2" max="7" value="4"></label>
<span id="count"></span>
</div>
<div id="grid"></div>
<div id="loading">Loading…</div>
</main>
<script>
const $=s=>document.querySelector(s), usd=n=>n==null?'—':'$'+Number(n).toLocaleString();
const state={type:'',city:'',q:'',sort:localStorage.getItem('cre_sort')||'value_desc'};
function whenStr(d){ if(!d) return ''; const dt=new Date(d);
return '🕓 '+dt.toLocaleString(undefined,{year:'numeric',month:'short',day:'numeric'}); }
$('#sort').value=state.sort;
const dens=$('#density'); dens.value=localStorage.getItem('cre_density')||4;
document.documentElement.style.setProperty('--cols',dens.value);
dens.oninput=()=>{document.documentElement.style.setProperty('--cols',dens.value);localStorage.setItem('cre_density',dens.value);};
async function j(u){const r=await fetch(u);return r.json();}
async function loadTypes(){
const d=await j('/api/commercial/types');
const seg=$('#seg');
seg.innerHTML=`<button data-t="" class="active">All ${d.total.toLocaleString()}</button>`+
d.types.filter(t=>t.count).map(t=>`<button data-t="${t.key}">${t.label} ${t.count.toLocaleString()}</button>`).join('');
seg.querySelectorAll('button').forEach(b=>b.onclick=()=>{
seg.querySelectorAll('button').forEach(x=>x.classList.remove('active'));
b.classList.add('active'); state.type=b.dataset.t; load();
});
}
async function loadCities(){
const d=await j('/api/commercial/cities');
$('#city').innerHTML='<option value="">All cities</option>'+
d.cities.map(c=>`<option value="${c.city}">${c.city} (${c.count.toLocaleString()})</option>`).join('');
$('#city').onchange=()=>{state.city=$('#city').value;load();};
}
async function loadMarquee(){
const d=await j('/api/commercial/marquee?limit=6'+(state.type?`&type=${state.type}`:''));
$('#marquee').innerHTML=d.results.map(r=>`<div class="mq" style="cursor:pointer" onclick="location.href='/commercial-property.html?ain='+encodeURIComponent('${r.ain}')">
<div class="val">${usd(r.assessed_total)}</div>
<div class="addr">${r.address||'—'}</div>
<div class="sub">${r.type_label} · ${r.city||''} · ${r.use_desc||''}</div>
${r.brief?`<div class="brief">${r.brief}</div>`:''}</div>`).join('');
}
async function load(){
$('#loading').style.display='block';
const p=new URLSearchParams({sort:state.sort,limit:120});
if(state.type)p.set('type',state.type); if(state.city)p.set('city',state.city); if(state.q)p.set('q',state.q);
const d=await j('/api/commercial/search?'+p);
$('#count').textContent=d.total.toLocaleString()+' properties';
$('#grid').innerHTML=d.results.map(r=>`<div class="card" onclick="location.href='/commercial-property.html?ain='+encodeURIComponent('${r.ain}')">
<div class="t">${r.type_label}</div>
<div class="a">${r.address||'—'}</div>
<div class="c">${r.city||''} ${r.zip||''}</div>
<div class="v">${usd(r.assessed_total)}</div>
<div class="m">
${r.sqft?`<span>${Number(r.sqft).toLocaleString()} sqft</span>`:''}
${r.year_built?`<span>built ${r.year_built}</span>`:''}
${r.recording_date?`<span class="when" title="${r.recording_date}">${whenStr(r.recording_date)}</span>`:''}
</div></div>`).join('');
loadMarquee();
$('#loading').style.display='none';
}
$('#q').oninput=()=>{state.q=$('#q').value;clearTimeout(window._t);window._t=setTimeout(load,250);};
$('#sort').onchange=()=>{state.sort=$('#sort').value;localStorage.setItem('cre_sort',state.sort);load();};
(async()=>{ await loadTypes(); await loadCities(); await load(); })();
</script>
<script src="/nav-drawer.js"></script>
<script src="/geo-search.js"></script>
</body>
</html>