Arrival Countdown Widget
A dark flight tile showing minutes to arrival with a progress track, plane marker and two airport times.
Preview and code
index.html
<div class='fa'><small>Arrival in</small><b><span id='fam'>53</span>min</b><div class='tr'><i id='fap'></i><u>✈</u></div><div class='ft'><div><b>14:30</b><small>LHR London</small></div><div class='r'><b>16:30</b><small>IST Istanbul</small></div></div></div>
styles.css
.fa{width:210px;margin:auto;padding:16px;background:#161616;border-radius:26px;color:#fff;font-family:Inter,Arial,sans-serif;box-shadow:0 12px 32px rgba(0,0,0,.28)}.fa small{display:block;font-size:11px;color:#8a8a8a}.fa>b{display:block;margin:2px 0 26px;font-size:26px}.fa>b span{font-variant-numeric:tabular-nums}.tr{position:relative;height:4px;margin:0 6px 10px;background:#333;border-radius:3px}.tr i{display:block;height:100%;width:70%;border-radius:3px;background:linear-gradient(90deg,#ea580c,#fb923c);transition:width 1s}.tr u{position:absolute;left:70%;top:-9px;display:grid;place-items:center;width:22px;height:22px;margin-left:-11px;border-radius:50%;background:#2a2a2a;border:1px solid #444;font-size:10px;text-decoration:none;color:#fb923c;transition:left 1s}.ft{display:flex;justify-content:space-between}.ft b{font-size:12.5px}.ft .r{text-align:right}
script.js
let m=53;const e=document.getElementById('fam'),p=document.getElementById('fap'),u=document.querySelector('.tr u');setInterval(()=>{m=m>0?m-1:53;e.textContent=m;const v=Math.round((1-m/160)*100);p.style.width=v+'%';u.style.left=v+'%'},3000);
About
A compact trip tracker: Arrival in label, big minutes readout that counts down, an orange progress bar with a plane dot and departure and arrival columns.