`apps/mobile/scripts/vshots/shot-native.html`

91 lines
<!DOCTYPE html><html><head><meta charset="utf-8">
<link rel="stylesheet" href="common.css"/>
<style>
  .body{ position:absolute; top:262px; bottom:252px; left:0; right:0; overflow:hidden; }
  .scroll{ padding:36px 40px 40px; }
  /* ---- listing / saved card ---- */
  .card{ background:#fff; border:2px solid var(--line); border-radius:34px; padding:44px 46px; margin-bottom:38px;
    box-shadow:0 6px 18px rgba(17,24,39,.05); }
  .card .top{ display:flex; justify-content:space-between; align-items:flex-start; }
  .card .ttl{ font-size:52px; font-weight:800; color:var(--ink); line-height:1.15; max-width:920px; }
  .card .x{ font-size:44px; color:#c0c4cc; }
  .card .loc{ font-size:38px; color:var(--muted); margin-top:20px; }
  .card .foot{ display:flex; align-items:center; gap:26px; margin-top:34px; flex-wrap:wrap; }
  .card .foot .price{ font-size:58px; }
  .card .foot .pill{ font-size:30px; padding:12px 26px; }
  .card .foot .bl{ font-size:34px; color:#374151; font-weight:600; }
  .card .foot .sv{ font-size:30px; color:#9ca3af; margin-left:auto; }
  .listhdr{ font-size:40px; font-weight:800; color:var(--brand); margin:8px 6px 30px; }
  /* ---- alerts ---- */
  .hero{ text-align:center; padding:70px 60px 40px; }
  .hero .ic{ font-size:150px; } .hero h1{ font-size:70px; font-weight:800; color:var(--brand); margin-top:20px; }
  .hero p{ font-size:38px; color:var(--muted); margin-top:24px; line-height:1.4; }
  .togcard{ background:#fff; border:2px solid var(--line); border-radius:34px; padding:52px 50px; margin:20px 40px;
    display:flex; align-items:center; box-shadow:0 6px 18px rgba(17,24,39,.05); }
  .togcard .l{ flex:1; } .togcard .t{ font-size:48px; font-weight:800; color:var(--ink); }
  .togcard .d{ font-size:34px; color:var(--muted); margin-top:14px; }
  .switch{ width:150px; height:88px; border-radius:44px; background:var(--brand); position:relative; }
  .switch .knob{ position:absolute; top:8px; right:8px; width:72px; height:72px; border-radius:50%; background:#fff; box-shadow:0 3px 8px rgba(0,0,0,.25); }
  .banner{ margin:8px 40px; background:#dcfce7; border-radius:28px; padding:40px 46px; }
  .banner p{ font-size:36px; color:#166534; line-height:1.4; }
  .section{ margin:44px 46px 0; } .section h3{ font-size:34px; font-weight:800; color:var(--brand); text-transform:uppercase; letter-spacing:2px; }
  .feat{ display:flex; gap:22px; margin-top:34px; } .feat .dot{ font-size:44px; color:var(--accent); line-height:1; }
  .feat .ft{ font-size:44px; font-weight:700; color:var(--ink); } .feat .fd{ font-size:34px; color:var(--muted); margin-top:8px; }
</style></head>
<body>
<div class="frame">
  <div class="appbar"><div class="title" id="hdr"></div></div>
  <div class="body"><div class="scroll" id="scroll"></div></div>
</div>
<script src="data.js"></script>
<script src="chrome.js"></script>
<script>
const screen = new URLSearchParams(location.search).get('screen') || 'browse';
const LBL={MOVE_IN_READY:'Move-In Ready',UNDER_CONSTRUCTION:'Under Construction',PLANNED:'Planned'};
const CLS={MOVE_IN_READY:'badge-green',UNDER_CONSTRUCTION:'badge-orange',PLANNED:'badge-indigo'};
const fmt=p=>p==null?'—':(p>=1e6?'$'+(p/1e6).toFixed(1)+'M':'$'+Math.round(p/1e3)+'k'+(p%1000?'':''));
const S=document.getElementById('scroll'); const H=document.getElementById('hdr');

function listingCard(c, withX){
  return `<div class="card"><div class="top">
     <div class="ttl">${c.title}</div>${withX?'<div class="x">✕</div>':''}</div>
     <div class="loc">📍 ${c.c||c.location}</div>
     <div class="foot"><span class="price">${fmt(c.p||c.price)}</span>
       <span class="pill ${CLS[c.s||c.status]}">${LBL[c.s||c.status]}</span>
       <span class="bl">${c.bl||c.builderName||''}</span>
       ${c.savedAt?`<span class="sv">Saved Aug ${new Date(c.savedAt).getDate()}</span>`:''}</div></div>`;
}

if(screen==='browse'){
  H.textContent='Browse';
  S.innerHTML = `<div class="listhdr">${HOS.total.toLocaleString()} new-construction homes</div>` +
    HOS.cards.map(c=>listingCard(c,false)).join('');
  injectChrome('browse', false);
}
else if(screen==='saved'){
  H.textContent='Saved Homes';
  S.innerHTML = `<div class="listhdr">${HOS.saved.length} saved homes</div>` +
    HOS.saved.map(c=>listingCard(c,true)).join('');
  injectChrome('saved', false);
}
else if(screen==='alerts'){
  H.textContent='Alerts';
  S.innerHTML = `
    <div class="hero"><div class="ic">🔔</div><h1>New Listing Alerts</h1>
      <p>Turn on notifications now so you're ready the moment new-listing alerts go live. We're rolling delivery out builder by builder.</p></div>
    <div class="togcard"><div class="l"><div class="t">Enable Alerts</div>
      <div class="d">Notifications are enabled on this device</div></div>
      <div class="switch"><div class="knob"></div></div></div>
    <div class="banner"><p>You're set up to receive new-listing alerts as we roll delivery out, builder by builder.</p></div>
    <div class="section"><h3>Coming soon</h3>
      ${[['New listings','Alert when a builder publishes a matching home'],
         ['Price drops','When a saved home drops in price'],
         ['Move-in ready','When a home you are watching becomes move-in ready']]
        .map(([t,d])=>`<div class="feat"><div class="dot">•</div><div><div class="ft">${t}</div><div class="fd">${d}</div></div></div>`).join('')}
    </div>`;
  injectChrome('alerts', false);
}
window.__READY__ = true;
</script>
</body></html>