`apps/mobile/scripts/vshots/chrome.js`

28 lines
// Injects the iOS status bar (9:41) + the app's real bottom tab bar.
// activeTab: 'browse'|'saved'|'map'|'alerts'; darkStatus=true => dark glyphs (light bg).
function injectChrome(activeTab, darkStatus){
  const signal = `<svg width="54" height="38" viewBox="0 0 54 38"><g fill="currentColor">
    <rect x="0" y="24" width="9" height="14" rx="2"/><rect x="15" y="16" width="9" height="22" rx="2"/>
    <rect x="30" y="8" width="9" height="30" rx="2"/><rect x="45" y="0" width="9" height="38" rx="2"/></g></svg>`;
  const wifi = `<svg width="50" height="38" viewBox="0 0 50 38"><g fill="currentColor">
    <path d="M25 8c9 0 17 3.5 23 9.5l-6 6C38 18.5 32 16 25 16S12 18.5 8 23.5l-6-6C8 11.5 16 8 25 8z"/>
    <path d="M25 20c5 0 9.5 2 13 5.5l-7 7C29.5 30 27.4 29 25 29s-4.5 1-6 3.5l-7-7C15.5 22 20 20 25 20z"/></g></svg>`;
  const batt = `<svg width="90" height="38" viewBox="0 0 90 38"><rect x="1" y="6" width="74" height="26" rx="7" fill="none" stroke="currentColor" stroke-width="3" opacity=".5"/>
    <rect x="6" y="11" width="58" height="16" rx="3" fill="currentColor"/><rect x="80" y="13" width="6" height="12" rx="3" fill="currentColor" opacity=".5"/></svg>`;
  const status = document.createElement('div');
  status.className = 'status' + (darkStatus ? ' dark' : '');
  status.innerHTML = `<div class="time">9:41</div><div class="right">${signal}${wifi}${batt}</div>`;
  document.body.appendChild(status);

  const tabs = [
    ['browse','🏠','Browse'], ['saved','♥','Saved'], ['map','🗺','Map'], ['alerts','🔔','Alerts'],
  ];
  const bar = document.createElement('div');
  bar.className = 'tabbar';
  bar.innerHTML = tabs.map(([k,ic,lb])=>
    `<div class="tab${k===activeTab?' active':''}"><div class="ico">${ic}</div><div class="lbl">${lb}</div></div>`
  ).join('');
  document.body.appendChild(bar);
  const hi = document.createElement('div'); hi.className='home-ind'; document.body.appendChild(hi);
}