`public/cities-inline.html`

35 lines
<!doctype html><html lang="en"><head><meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>CRCP · Cities (inline)</title>
<!-- Steve 2026-08-20: one login (steve/DW2024!) -> every city INLINE, no admin/DW2024! re-prompt.
     Each tab loads /city/<name>/ which the server proxies with the Basic creds injected server-side. -->
<style>
 :root{--bg:#0e1116;--panel:#161b22;--edge:#232a33;--ink:#e6edf3;--mut:#8b949e;--accent:#1f6feb}
 *{box-sizing:border-box} html,body{margin:0;height:100%;background:var(--bg);color:var(--ink);font-family:Inter,-apple-system,Helvetica,Arial,sans-serif}
 body{display:flex;flex-direction:column}
 header{display:flex;align-items:center;gap:14px;padding:10px 18px;border-bottom:1px solid var(--edge);background:var(--panel)}
 header b{font-size:15px} header .who{color:var(--mut);font-size:12px;margin-left:auto}
 nav{display:flex;gap:6px;flex-wrap:wrap;padding:9px 18px;border-bottom:1px solid var(--edge);background:var(--panel)}
 nav button{background:var(--bg);color:var(--mut);border:1px solid var(--edge);border-radius:20px;padding:6px 14px;font-size:12.5px;cursor:pointer;text-transform:capitalize}
 nav button:hover{color:var(--ink);border-color:var(--accent)}
 nav button.on{background:var(--accent);color:#fff;border-color:var(--accent)}
 .frame-wrap{flex:1;position:relative;min-height:0}
 iframe{position:absolute;inset:0;width:100%;height:100%;border:0;background:#fff}
 .loading{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:var(--mut);font-size:13px;pointer-events:none}
</style></head><body>
<header><b>◈ CRCP · Cities</b><span class="who" id="who">one login · all cities inline</span></header>
<nav id="tabs"></nav>
<div class="frame-wrap"><div class="loading" id="load">loading…</div><iframe id="frame" title="city"></iframe></div>
<script>
const CITIES=['pasadena','glendale','burbank','santa-monica','arcadia','torrance','long-beach','van-nuys'];
const tabs=document.getElementById('tabs'), frame=document.getElementById('frame'), load=document.getElementById('load');
// require the app session; the /city/* proxy also enforces it, this just gives a clean redirect
fetch('/api/me').then(r=>r.json()).then(m=>{ if(!m||!m.email){ location='/login.html?next=/cities-inline.html'; return; }
  document.getElementById('who').textContent='signed in · '+m.email+' · all cities inline'; });
frame.addEventListener('load',()=>{ load.style.display='none'; });
function open(c,btn){ [...tabs.children].forEach(x=>x.classList.remove('on')); btn.classList.add('on'); load.style.display='flex'; frame.src='/city/'+c+'/'; location.hash=c; }
CITIES.forEach((c,i)=>{ const b=document.createElement('button'); b.textContent=c.replace(/-/g,' '); b.onclick=()=>open(c,b); tabs.appendChild(b); });
const start=(location.hash||'').slice(1); const idx=Math.max(0,CITIES.indexOf(start));
open(CITIES[idx], tabs.children[idx]);
</script></body></html>