{
    "id": "bhaskar/arrival-countdown-widget",
    "kind": "component",
    "title": "Arrival Countdown Widget",
    "summary": "A dark flight tile showing minutes to arrival with a progress track, plane marker and two airport times.",
    "author": "Admin",
    "stars": 0,
    "url": "https://ownlyplans.com/bhaskar/arrival-countdown-widget/",
    "stack": [],
    "tools": [
        "claude-code",
        "cursor",
        "lovable"
    ],
    "difficulty": "beginner",
    "license": "mit",
    "version": "1.0",
    "overview": "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.",
    "steps": [],
    "files": [],
    "install": "",
    "how_to_use": "Use the component code (html, css, js, or react) directly, or run the install command.",
    "component": {
        "category": "Other",
        "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>",
        "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}",
        "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);",
        "react": "",
        "dependencies": [],
        "install": "",
        "licence_notice": ""
    }
}