Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"> | |
| <title>Follow the Trip · Wheelie</title> | |
| <meta name="theme-color" content="#000000"> | |
| <link rel="icon" type="image/png" href="wheelie-icon.png?v=2"> | |
| <link rel="apple-touch-icon" href="wheelie-icon.png?v=2"> | |
| <link rel="stylesheet" href="https://unpkg.com/maplibre-gl@4.7.1/dist/maplibre-gl.css"> | |
| <style> | |
| :root{--pink:#FF6FB5;--blue:#5BC0F8;--ok:#1fd1a0;--warn:#ffb03c;--bad:#ff5a5a;--card:rgba(18,18,24,.94);--line:rgba(255,255,255,.12);--dim:#a1a1aa;color-scheme:dark} | |
| *{box-sizing:border-box;-webkit-tap-highlight-color:transparent} | |
| html,body{margin:0;height:100%;background:#000;color:#fff;font:16px/1.4 -apple-system,BlinkMacSystemFont,"SF Pro Text",system-ui,sans-serif;overflow:hidden} | |
| #map{position:fixed;inset:0;background:#07070b} | |
| .maplibregl-ctrl-attrib{font-size:10px;background:rgba(0,0,0,.55);color:#888} | |
| #top{position:fixed;left:12px;right:12px;top:calc(env(safe-area-inset-top) + 12px);z-index:5;display:flex;align-items:center;gap:12px;background:var(--card);border:1px solid var(--line);border-radius:22px;padding:12px 14px} | |
| .av{flex:0 0 46px;height:46px;border-radius:50%;padding:3px;background:conic-gradient(var(--pink) 0 50%,var(--blue) 50% 100%)} | |
| .av img{width:100%;height:100%;border-radius:50%;object-fit:cover;border:2px solid #000;display:block} | |
| #top b{display:block;font-size:18px} | |
| #top small{display:block;color:var(--dim);font-size:14px} | |
| #card{position:fixed;left:12px;right:12px;bottom:calc(env(safe-area-inset-bottom) + 12px);z-index:5;background:var(--card);border:1px solid var(--line);border-radius:24px;padding:16px} | |
| #st{font-size:22px;font-weight:800;line-height:1.25;margin:0 0 6px} | |
| #sub{color:#ddd;font-size:16px;margin:0} | |
| #upd{color:var(--dim);font-size:14px;margin-top:6px} | |
| #alert{display:none;margin-top:12px;border-radius:16px;padding:12px 14px;font-weight:700;font-size:17px;line-height:1.3} | |
| #alert.on{display:block} | |
| #alert.warn{background:rgba(255,176,60,.16);border:1px solid var(--warn);color:#ffd69a} | |
| #alert.bad{background:rgba(255,90,90,.16);border:1px solid var(--bad);color:#ffb3b3} | |
| #alert.good{background:rgba(31,209,160,.16);border:1px solid var(--ok);color:#b8f5e3} | |
| .btns{display:flex;gap:10px;margin-top:12px} | |
| .btn{flex:1;height:54px;border-radius:16px;border:0;font:800 16px -apple-system,system-ui;display:flex;align-items:center;justify-content:center;gap:6px;text-decoration:none} | |
| #snd{background:#2a2a32;color:#fff} | |
| #ctr{background:var(--blue);color:#000} | |
| .wm{width:52px;height:52px;border-radius:50%;padding:3px;background:conic-gradient(var(--pink) 0 50%,var(--blue) 50% 100%);box-shadow:0 0 22px rgba(255,111,181,.55)} | |
| .wm img{width:100%;height:100%;border-radius:50%;object-fit:cover;border:2px solid #000;display:block} | |
| #empty{position:fixed;inset:0;z-index:9;display:none;align-items:center;justify-content:center;text-align:center;padding:24px;background:#000} | |
| #empty.on{display:flex} | |
| #empty b{display:block;font-size:22px;margin:14px 0 6px} | |
| #empty p{color:var(--dim);margin:0} | |
| </style> | |
| </head> | |
| <body> | |
| <div id="map" role="img" aria-label="Map showing where they are"></div> | |
| <div id="top"><div class="av"><img src="wheelie.jpg" alt=""></div><div><b id="who">Following a trip</b><small>Live with Wheelie</small></div></div> | |
| <div id="card" aria-live="polite"> | |
| <p id="st">Finding them…</p> | |
| <p id="sub"></p> | |
| <div id="upd"></div> | |
| <div id="alert" role="alert"></div> | |
| <div class="btns"><button class="btn" id="snd" aria-pressed="false">🔔 Alert sound off</button><button class="btn" id="ctr">📍 Show them</button></div> | |
| </div> | |
| <div id="empty"><div><div class="av" style="width:80px;height:80px;margin:0 auto"><img src="wheelie.jpg" alt=""></div><b>This trip link isn't active</b><p>The trip may have ended more than 2 days ago, or the link is incomplete. Ask them to send it again.</p></div></div> | |
| <script src="https://unpkg.com/maplibre-gl@4.7.1/dist/maplibre-gl.js"></script> | |
| <script> | |
| (function(){ | |
| ; | |
| var SBU='https://yzzxvjrzniuhxebqqrsy.supabase.co/rest/v1/rpc/share_get',SBK='sb_publishable_DKyw5S1dkCuu_g98yfx1xA_FgeTNtyJ'; | |
| var $=function(i){return document.getElementById(i)}; | |
| var id=new URLSearchParams(location.search).get('t')||''; | |
| var map=null,mk=null,first=true,last=null,soundOn=false,alerted='',ac=null; | |
| try{map=new maplibregl.Map({container:'map',style:'https://tiles.openfreemap.org/styles/dark',center:[-117.8265,33.6846],zoom:12,pitch:45,attributionControl:{compact:true}})}catch(e){map=null} | |
| function ago(ms){var m=Math.round(ms/60000);return m<1?'just now':m===1?'1 minute ago':m<60?m+' minutes ago':Math.round(m/60)+' hr ago'} | |
| function beep(){try{ac=ac||new (window.AudioContext||window.webkitAudioContext)();[0,0.35].forEach(function(t){var o=ac.createOscillator(),g=ac.createGain();o.frequency.value=880;o.connect(g);g.connect(ac.destination);g.gain.setValueAtTime(.0001,ac.currentTime+t);g.gain.exponentialRampToValueAtTime(.4,ac.currentTime+t+.02);g.gain.exponentialRampToValueAtTime(.0001,ac.currentTime+t+.3);o.start(ac.currentTime+t);o.stop(ac.currentTime+t+.32)})}catch(e){}try{navigator.vibrate&&navigator.vibrate([300,150,300])}catch(e){}} | |
| function alertBox(cls,txt){var a=$('alert');a.className=cls?'on '+cls:'';a.textContent=txt||'';} | |
| function show(d){ | |
| var name=d.name||'They';$('who').textContent='Following '+(d.name?d.name+'’s':'a')+' trip'; | |
| var now=new Date(d.server_now).getTime(),upd=now-new Date(d.updated_at).getTime(),still=d.last_moved_at?now-new Date(d.last_moved_at).getTime():0; | |
| if(d.status==='arrived'){$('st').textContent='🏁 '+name+' made it'+(d.dest?' to '+d.dest:'')+'!';$('sub').textContent='The trip is done. Wheelie got them there.';alertBox('good','Arrived safely.');if(alerted!=='arrived'){alerted='arrived';if(soundOn)beep()}} | |
| else if(d.status==='ended'){$('st').textContent='Trip ended';$('sub').textContent=name+' stopped sharing'+(d.dest?' on the way to '+d.dest:'')+'.';alertBox('','')} | |
| else{ | |
| $('st').textContent=name+(name==='They'?' are':' is')+' on the way'+(d.dest?' to '+d.dest:''); | |
| $('sub').textContent=d.eta?'Should get there around '+d.eta+'.':''; | |
| if(upd>4*60000){alertBox('warn','No update from '+name+'’s phone in '+Math.round(upd/60000)+' minutes. The phone may be offline or out of battery.');if(alerted!=='off'){alerted='off';if(soundOn)beep()}} | |
| else if(still>=10*60000){alertBox('bad','⚠️ '+name+' hasn’t moved in '+Math.round(still/60000)+' minutes. They may just be waiting for the bus. You might want to call and check in.');if(alerted!=='still'){alerted='still';if(soundOn)beep()}} | |
| else{alertBox('','');alerted=''} | |
| } | |
| $('upd').textContent='Updated '+ago(upd); | |
| if(map&&d.lat!=null){var ll=[d.lon,d.lat];if(!mk){var el=document.createElement('div');el.className='wm';el.innerHTML='<img src="wheelie.jpg" alt="Their location">';mk=new maplibregl.Marker({element:el}).setLngLat(ll).addTo(map)}else mk.setLngLat(ll); | |
| if(first){first=false;map.jumpTo({center:ll,zoom:15.5,pitch:55})}} | |
| last=d; | |
| } | |
| function poll(){ | |
| if(!id){$('empty').classList.add('on');return} | |
| fetch(SBU,{method:'POST',headers:{'Content-Type':'application/json',apikey:SBK},body:JSON.stringify({p_id:id})}).then(function(r){return r.json()}).then(function(R){ | |
| if(!R||!R.length){$('empty').classList.add('on');return} | |
| $('empty').classList.remove('on');show(R[0]); | |
| }).catch(function(){$('upd').textContent='Can’t reach the trip right now. Trying again…'}); | |
| } | |
| $('snd').onclick=function(){soundOn=!soundOn;this.textContent=soundOn?'🔔 Alert sound on':'🔔 Alert sound off';this.setAttribute('aria-pressed',soundOn);if(soundOn)beep()}; | |
| $('ctr').onclick=function(){if(map&&last&&last.lat!=null)map.flyTo({center:[last.lon,last.lat],zoom:16,pitch:55})}; | |
| poll();setInterval(poll,10000); | |
| document.addEventListener('visibilitychange',function(){if(!document.hidden)poll()}); | |
| })(); | |
| </script> | |
| <script src="wicons.js?v=1"></script> | |
| </body> | |
| </html> | |