Created
May 7, 2026 03:03
-
-
Save nazt/277dbc97d9268a584afc015f09a9f322 to your computer and use it in GitHub Desktop.
🕰️ Journey — Cinematic travel timeline with animated map, glowing trail, battery tracking (171 GPS points)
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="th"> | |
| <head> | |
| <meta charset="utf-8"/> | |
| <meta name="viewport" content="width=device-width,initial-scale=1"> | |
| <title>Journey · Wed 06 May 2026</title> | |
| <link rel="preconnect" href="https://fonts.googleapis.com"> | |
| <link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,600;1,300&family=JetBrains+Mono:wght@300;500&display=swap" rel="stylesheet"> | |
| <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"/> | |
| <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script> | |
| <style> | |
| :root { | |
| --gold: #e0c097; | |
| --gold-dim: #e0c09730; | |
| --gold-mid: #e0c09770; | |
| --bg: #08080f; | |
| --card: rgba(14,14,26,0.75); | |
| --glass: rgba(255,255,255,0.04); | |
| --text: #c8c8d0; | |
| --dim: #555; | |
| --danger: #e05555; | |
| --warn: #e0a030; | |
| --ok: #50b060; | |
| } | |
| *{box-sizing:border-box;margin:0;padding:0} | |
| body{background:var(--bg);color:var(--text);font-family:'JetBrains Mono',monospace;overflow-x:hidden} | |
| ::selection{background:var(--gold);color:var(--bg)} | |
| /* MAP */ | |
| #map{height:100vh;width:100%;position:fixed;top:0;left:0;z-index:0} | |
| .leaflet-control-attribution{display:none!important} | |
| .leaflet-control-zoom{display:none!important} | |
| /* OVERLAY */ | |
| .overlay{position:fixed;top:0;left:0;right:0;bottom:0;z-index:10;pointer-events:none; | |
| background:linear-gradient(180deg, rgba(8,8,15,0.3) 0%, transparent 30%, transparent 60%, rgba(8,8,15,0.85) 100%)} | |
| /* HEADER */ | |
| .header{position:fixed;top:0;left:0;right:0;z-index:20;padding:24px 32px; | |
| display:flex;justify-content:space-between;align-items:flex-start} | |
| .title{font-family:'Cormorant Garamond',serif;font-weight:300;font-size:clamp(1.2rem,3vw,1.8rem); | |
| color:var(--gold);letter-spacing:0.08em;text-transform:uppercase;opacity:0;animation:fadeIn 1.5s ease 0.3s forwards} | |
| .title em{font-style:italic;font-weight:300;color:var(--text);font-size:0.7em;display:block; | |
| letter-spacing:0.15em;margin-top:4px} | |
| .clock{font-size:clamp(2rem,6vw,4rem);font-weight:300;color:var(--gold); | |
| font-family:'Cormorant Garamond',serif;letter-spacing:0.05em; | |
| text-shadow:0 0 40px rgba(224,192,151,0.3);opacity:0;animation:fadeIn 1.5s ease 0.6s forwards} | |
| /* BOTTOM PANEL */ | |
| .panel{position:fixed;bottom:0;left:0;right:0;z-index:20;padding:0 24px 24px;pointer-events:all} | |
| /* PLACE NAME */ | |
| .place-wrap{text-align:center;margin-bottom:16px} | |
| .place{font-family:'Cormorant Garamond',serif;font-size:clamp(1rem,2.5vw,1.4rem); | |
| font-weight:600;color:#fff;letter-spacing:0.06em; | |
| transition:opacity 0.6s ease;opacity:0;animation:fadeIn 1s ease 1s forwards} | |
| .place-sub{font-size:0.7rem;color:var(--dim);margin-top:2px;letter-spacing:0.1em} | |
| /* DEVICES */ | |
| .devices{display:flex;justify-content:center;gap:12px;margin-bottom:16px; | |
| opacity:0;animation:fadeIn 1s ease 1.2s forwards} | |
| .dev{background:var(--card);backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,0.06); | |
| border-radius:12px;padding:10px 16px;min-width:110px;text-align:center; | |
| transition:border-color 0.4s} | |
| .dev.charging{border-color:var(--gold-dim)} | |
| .dev-icon{font-size:1.2rem;margin-bottom:4px} | |
| .dev-bat{font-size:1.6rem;font-weight:500;font-family:'Cormorant Garamond',serif; | |
| transition:color 0.5s} | |
| .dev-bat.dead{color:var(--danger)} | |
| .dev-bat.low{color:var(--warn)} | |
| .dev-bat.ok{color:var(--ok)} | |
| .dev-bat.full{color:var(--gold)} | |
| .bat-track{height:3px;background:rgba(255,255,255,0.08);border-radius:2px;margin-top:6px;overflow:hidden} | |
| .bat-fill{height:100%;border-radius:2px;transition:width 0.8s cubic-bezier(0.4,0,0.2,1),background 0.5s} | |
| /* SCRUBBER */ | |
| .scrubber{display:flex;align-items:center;gap:12px; | |
| background:var(--card);backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,0.06); | |
| border-radius:16px;padding:12px 20px;opacity:0;animation:fadeIn 1s ease 1.4s forwards} | |
| .play-btn{width:36px;height:36px;border-radius:50%;border:1px solid var(--gold-mid); | |
| background:transparent;color:var(--gold);cursor:pointer;display:flex;align-items:center; | |
| justify-content:center;font-size:0.9rem;transition:all 0.3s;flex-shrink:0} | |
| .play-btn:hover{background:var(--gold);color:var(--bg);transform:scale(1.1)} | |
| .play-btn.active{background:var(--gold);color:var(--bg)} | |
| .track-wrap{flex:1;position:relative;height:24px;display:flex;align-items:center;cursor:pointer} | |
| .track{width:100%;height:3px;background:rgba(255,255,255,0.08);border-radius:2px;position:relative} | |
| .track-progress{position:absolute;left:0;top:0;height:100%;background:linear-gradient(90deg,var(--gold-mid),var(--gold)); | |
| border-radius:2px;transition:width 0.15s linear} | |
| .track-thumb{position:absolute;top:50%;width:14px;height:14px;border-radius:50%; | |
| background:var(--gold);transform:translate(-50%,-50%); | |
| box-shadow:0 0 16px rgba(224,192,151,0.4);transition:left 0.15s linear} | |
| input[type=range]{position:absolute;width:100%;height:24px;opacity:0;cursor:pointer;z-index:5} | |
| .speed-btns{display:flex;gap:4px;flex-shrink:0} | |
| .spd{padding:4px 8px;border-radius:6px;border:1px solid rgba(255,255,255,0.08); | |
| background:transparent;color:var(--dim);cursor:pointer;font-family:inherit;font-size:0.65rem; | |
| transition:all 0.3s;letter-spacing:0.05em} | |
| .spd.active{color:var(--gold);border-color:var(--gold-mid)} | |
| .spd:hover{color:var(--gold)} | |
| .time-ends{font-size:0.65rem;color:var(--dim);flex-shrink:0;letter-spacing:0.05em} | |
| /* POINT COUNTER */ | |
| .counter{position:fixed;bottom:100px;right:32px;z-index:20;font-size:0.6rem; | |
| color:var(--dim);letter-spacing:0.15em;text-transform:uppercase; | |
| opacity:0;animation:fadeIn 1s ease 1.6s forwards} | |
| .counter span{color:var(--gold);font-size:0.8rem} | |
| /* GLOW MARKER */ | |
| .glow-marker{width:18px;height:18px;position:relative} | |
| .glow-marker::before{content:'';position:absolute;inset:-8px;border-radius:50%; | |
| background:radial-gradient(circle,rgba(224,192,151,0.4),transparent 70%); | |
| animation:pulse 2s ease-in-out infinite} | |
| .glow-marker-inner{width:18px;height:18px;border-radius:50%; | |
| background:radial-gradient(circle at 35% 35%,#fff,var(--gold)); | |
| box-shadow:0 0 12px var(--gold),0 0 30px rgba(224,192,151,0.3);border:2px solid rgba(255,255,255,0.5)} | |
| @keyframes pulse{0%,100%{opacity:0.6;transform:scale(1)}50%{opacity:1;transform:scale(1.3)}} | |
| @keyframes fadeIn{to{opacity:1}} | |
| /* RESPONSIVE */ | |
| @media(max-width:600px){ | |
| .header{padding:16px} | |
| .panel{padding:0 12px 16px} | |
| .devices{gap:6px} | |
| .dev{padding:8px 10px;min-width:90px} | |
| .scrubber{padding:10px 14px} | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div id="map"></div> | |
| <div class="overlay"></div> | |
| <div class="header"> | |
| <div class="title">Journey<em>Wed 06 May 2026 · Chiang Mai</em></div> | |
| <div class="clock" id="clock">09:10</div> | |
| </div> | |
| <div class="counter"><span id="ptCount">1</span> / <span id="ptTotal">171</span> points · every 5 min</div> | |
| <div class="panel"> | |
| <div class="place-wrap"> | |
| <div class="place" id="placeName">—</div> | |
| <div class="place-sub" id="placeSub"></div> | |
| </div> | |
| <div class="devices"> | |
| <div class="dev" id="dIpad"> | |
| <div class="dev-icon">📱</div> | |
| <div class="dev-bat ok" id="bIpad">98</div> | |
| <div class="bat-track"><div class="bat-fill" id="fIpad" style="width:98%;background:var(--ok)"></div></div> | |
| </div> | |
| <div class="dev" id="dIphone"> | |
| <div class="dev-icon">📲</div> | |
| <div class="dev-bat ok" id="bIphone">36</div> | |
| <div class="bat-track"><div class="bat-fill" id="fIphone" style="width:36%;background:var(--ok)"></div></div> | |
| </div> | |
| <div class="dev" id="dMac"> | |
| <div class="dev-icon">💻</div> | |
| <div class="dev-bat full" id="bMac">100</div> | |
| <div class="bat-track"><div class="bat-fill" id="fMac" style="width:100%;background:var(--gold)"></div></div> | |
| </div> | |
| </div> | |
| <div class="scrubber"> | |
| <button class="play-btn" id="playBtn" onclick="togglePlay()">▶</button> | |
| <span class="time-ends" id="tStart">09:10</span> | |
| <div class="track-wrap"> | |
| <div class="track"> | |
| <div class="track-progress" id="trackProg"></div> | |
| <div class="track-thumb" id="trackThumb"></div> | |
| </div> | |
| <input type="range" id="slider" min="0" max="170" value="0" oninput="seek(this.value)"> | |
| </div> | |
| <span class="time-ends" id="tEnd">23:20</span> | |
| <div class="speed-btns"> | |
| <button class="spd active" id="x1" onclick="setSpd(1)">1×</button> | |
| <button class="spd" id="x3" onclick="setSpd(3)">3×</button> | |
| <button class="spd" id="x10" onclick="setSpd(10)">10×</button> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| const D=[["09:10", 18.778176, 99.051547, 95, "San Kamphaeng District", 18.77823, 99.051447, 50, 18.797438, 99.073023, 0], ["09:15", 18.763491, 99.038982, 93, "Mueang Chiang Mai District", 18.76336, 99.038872, 56, 18.797438, 99.073023, 0], ["09:20", 18.761192, 99.019903, 92, "Mueang Chiang Mai District", 18.760973, 99.019263, 62, 18.797438, 99.073023, 0], ["09:25", 18.767848, 99.005625, 90, "Mueang Chiang Mai District", 18.767896, 99.005707, 68, 18.797438, 99.073023, 0], ["09:30", 18.774644, 99.007796, 83, "Mueang Chiang Mai District", 18.774553, 99.007792, 69, 18.797438, 99.073023, 0], ["09:35", 18.77465, 99.007793, 79, "Mueang Chiang Mai District", 18.77457, 99.007796, 69, 18.797438, 99.073023, 0], ["09:40", 18.77465, 99.007793, 75, "Mueang Chiang Mai District", 18.774843, 99.00794, 69, 18.774576, 99.007663, 88], ["09:45", 18.774652, 99.007787, 75, "Mueang Chiang Mai District", 18.774566, 99.007706, 69, 18.774571, 99.007753, 87], ["09:50", 18.77465, 99.007795, 75, "Mueang Chiang Mai District", 18.774588, 99.007682, 69, 18.774526, 99.007776, 86], ["09:55", 18.77465, 99.007796, 75, "Mueang Chiang Mai District", 18.774581, 99.007735, 69, 18.774232, 99.007347, 84], ["10:00", 18.77465, 99.007796, 75, "Mueang Chiang Mai District", 18.774611, 99.00772, 69, 18.774526, 99.007776, 83], ["10:05", 18.77465, 99.007796, 75, "Mueang Chiang Mai District", 18.774592, 99.007745, 69, 18.774443, 99.007688, 82], ["10:10", 18.77465, 99.007796, 75, "Mueang Chiang Mai District", 18.774599, 99.007746, 69, 18.77448, 99.007688, 80], ["10:15", 18.77465, 99.007796, 75, "Mueang Chiang Mai District", 18.774593, 99.007744, 69, 18.774514, 99.007673, 79], ["10:20", 18.77465, 99.007796, 75, "Mueang Chiang Mai District", 18.774583, 99.007757, 69, 18.77438, 99.007587, 77], ["10:25", 18.77465, 99.007796, 74, "Mueang Chiang Mai District", 18.774582, 99.007759, 68, 18.774471, 99.007687, 76], ["10:30", 18.77465, 99.007796, 73, "Mueang Chiang Mai District", 18.774575, 99.007756, 68, 18.774294, 99.007426, 75], ["10:35", 18.774642, 99.007777, 68, "Mueang Chiang Mai District", 18.774579, 99.007758, 68, 18.774395, 99.00754, 73], ["10:40", 18.774598, 99.007752, 65, "Mueang Chiang Mai District", 18.774581, 99.007759, 68, 18.774475, 99.00769, 72], ["10:45", 18.774642, 99.007777, 62, "Mueang Chiang Mai District", 18.774582, 99.007759, 68, 18.774523, 99.00773, 71], ["10:50", 18.774642, 99.007777, 61, "Mueang Chiang Mai District", 18.774582, 99.007759, 68, 18.774523, 99.00773, 70], ["10:55", 18.774642, 99.007746, 61, "Mueang Chiang Mai District", 18.774582, 99.007759, 68, 18.774503, 99.007628, 69], ["11:00", 18.774642, 99.007748, 57, "Mueang Chiang Mai District", 18.774683, 99.007616, 67, 18.774376, 99.007627, 67], ["11:05", 18.774622, 99.007723, 52, "Mueang Chiang Mai District", 18.774593, 99.007728, 67, 18.774397, 99.007476, 66], ["11:10", 18.774579, 99.007675, 51, "Mueang Chiang Mai District", 18.774587, 99.007744, 67, 18.774325, 99.007607, 65], ["11:15", 18.774618, 99.007718, 51, "Mueang Chiang Mai District", 18.774596, 99.007715, 67, 18.774522, 99.007691, 64], ["11:20", 18.774623, 99.007664, 52, "Mueang Chiang Mai District", 18.774585, 99.007749, 67, 18.774233, 99.007415, 68], ["11:25", 18.774623, 99.007671, 53, "Mueang Chiang Mai District", 18.774582, 99.007759, 66, 18.774675, 99.007788, 73], ["11:30", 18.774623, 99.007674, 54, "Mueang Chiang Mai District", 18.774582, 99.007759, 66, 18.774538, 99.007773, 79], ["11:35", 18.774624, 99.007679, 55, "Mueang Chiang Mai District", 18.774634, 99.007701, 66, 18.774564, 99.007749, 83], ["11:40", 18.774624, 99.007687, 53, "Mueang Chiang Mai District", 18.77459, 99.00775, 66, 18.774628, 99.007803, 87], ["11:45", 18.774624, 99.007687, 53, "Mueang Chiang Mai District", 18.774629, 99.00772, 66, 18.774578, 99.007781, 90], ["11:50", 18.774618, 99.00762, 53, "Mueang Chiang Mai District", 18.77463, 99.0077, 65, 18.774599, 99.007828, 92], ["11:55", 18.774617, 99.007612, 59, "Mueang Chiang Mai District", 18.77454, 99.007718, 68, 18.77452, 99.00776, 92], ["12:00", 18.774624, 99.007683, 65, "Mueang Chiang Mai District", 18.774592, 99.007589, 74, 18.774536, 99.007753, 92], ["12:05", 18.774619, 99.00763, 69, "Mueang Chiang Mai District", 18.774582, 99.007704, 79, 18.774512, 99.007749, 91], ["12:10", 18.774624, 99.007684, 72, "Mueang Chiang Mai District", 18.774634, 99.00772, 84, 18.774479, 99.007722, 89], ["12:15", 18.774624, 99.007687, 70, "Mueang Chiang Mai District", 18.774614, 99.007683, 87, 18.774525, 99.007711, 88], ["12:20", 18.774624, 99.007687, 69, "Mueang Chiang Mai District", 18.77461, 99.00769, 91, 18.774513, 99.007735, 86], ["12:25", 18.774434, 99.007581, 65, "Mueang Chiang Mai District", 18.774558, 99.007809, 93, 18.774577, 99.007791, 86], ["12:30", 18.774624, 99.007687, 63, "Mueang Chiang Mai District", 18.774646, 99.007602, 95, 18.774479, 99.007697, 85], ["12:35", 18.774678, 99.007814, 63, "Mueang Chiang Mai District", 18.774641, 99.007616, 97, 18.774506, 99.007735, 84], ["12:40", 18.774595, 99.007648, 65, "Mueang Chiang Mai District", 18.774626, 99.007702, 98, 18.774567, 99.007767, 83], ["12:45", 18.77453, 99.007616, 69, "Mueang Chiang Mai District", 18.77458, 99.007664, 99, 18.774551, 99.007759, 83], ["12:50", 18.774608, 99.007608, 73, "Mueang Chiang Mai District", 18.774581, 99.007722, 100, 18.774562, 99.007779, 82], ["12:55", 18.774624, 99.007686, 76, "Mueang Chiang Mai District", 18.774574, 99.00771, 100, 18.774522, 99.007734, 80], ["13:00", 18.774624, 99.007687, 76, "Mueang Chiang Mai District", 18.774543, 99.007658, 100, 18.774619, 99.00759, 81], ["13:05", 18.774624, 99.007687, 74, "Mueang Chiang Mai District", 18.774551, 99.007689, 100, 18.774318, 99.007611, 84], ["13:10", 18.774624, 99.007687, 77, "Mueang Chiang Mai District", 18.774571, 99.007756, 100, 18.774523, 99.007716, 85], ["13:15", 18.774624, 99.007687, 80, "Mueang Chiang Mai District", 18.774581, 99.007756, 100, 18.774553, 99.00777, 85], ["13:20", 18.774624, 99.007687, 80, "Mueang Chiang Mai District", 18.774579, 99.007717, 100, 18.774678, 99.007829, 85], ["13:25", 18.774563, 99.007617, 82, "Mueang Chiang Mai District", 18.774582, 99.007755, 100, 18.774504, 99.00772, 83], ["13:30", 18.774597, 99.007656, 84, "Mueang Chiang Mai District", 18.774604, 99.007695, 100, 18.774452, 99.007681, 82], ["13:35", 18.774626, 99.007684, 88, "Mueang Chiang Mai District", 18.774597, 99.007741, 100, 18.77437, 99.007464, 80], ["13:40", 18.774612, 99.007674, 90, "Mueang Chiang Mai District", 18.774575, 99.007771, 100, 18.774496, 99.007701, 79], ["13:45", 18.774622, 99.007685, 92, "Mueang Chiang Mai District", 18.774581, 99.007761, 100, 18.77446, 99.007728, 78], ["13:50", 18.774624, 99.007687, 92, "Mueang Chiang Mai District", 18.774582, 99.007759, 100, 18.774689, 99.007904, 81], ["13:55", 18.774624, 99.007687, 92, "Mueang Chiang Mai District", 18.774582, 99.007759, 100, 18.774427, 99.007509, 85], ["14:00", 18.774624, 99.007687, 90, "Mueang Chiang Mai District", 18.774563, 99.007687, 100, 18.774571, 99.007753, 89], ["14:05", 18.774624, 99.007687, 89, "Mueang Chiang Mai District", 18.774584, 99.007756, 100, 18.774395, 99.007557, 92], ["14:10", 18.774624, 99.007687, 88, "Mueang Chiang Mai District", 18.774584, 99.007757, 100, 18.774581, 99.007823, 94], ["14:15", 18.774624, 99.007687, 88, "Mueang Chiang Mai District", 18.774583, 99.007758, 100, 18.774503, 99.007628, 96], ["14:20", 18.774624, 99.007687, 85, "Mueang Chiang Mai District", 18.774583, 99.007758, 100, 18.774669, 99.007798, 97], ["14:25", 18.774624, 99.007687, 84, "Mueang Chiang Mai District", 18.774555, 99.007747, 100, 18.774678, 99.007829, 97], ["14:30", 18.774624, 99.007687, 82, "Mueang Chiang Mai District", 18.774621, 99.007714, 100, 18.774427, 99.007509, 98], ["14:35", 18.774624, 99.007687, 80, "Mueang Chiang Mai District", 18.774597, 99.007742, 100, 18.774495, 99.007594, 99], ["14:40", 18.774624, 99.007687, 80, "Mueang Chiang Mai District", 18.774587, 99.007754, 100, 18.774524, 99.007787, 100], ["14:45", 18.774624, 99.007687, 80, "Mueang Chiang Mai District", 18.774586, 99.007755, 100, 18.774601, 99.007787, 100], ["14:50", 18.774624, 99.007687, 80, "Mueang Chiang Mai District", 18.774585, 99.007756, 100, 18.774465, 99.007732, 100], ["14:55", 18.774624, 99.007687, 80, "Mueang Chiang Mai District", 18.774584, 99.007757, 100, 18.774321, 99.007458, 100], ["15:00", 18.774624, 99.007687, 80, "Mueang Chiang Mai District", 18.774565, 99.007714, 100, 18.774368, 99.007415, 100], ["15:05", 18.774624, 99.007687, 80, "Mueang Chiang Mai District", 18.774566, 99.007717, 100, 18.774269, 99.00741, 100], ["15:10", 18.774624, 99.007687, 80, "Mueang Chiang Mai District", 18.774567, 99.00772, 100, 18.77437, 99.007504, 100], ["15:15", 18.774624, 99.007687, 80, "Mueang Chiang Mai District", 18.774569, 99.007724, 100, 18.774495, 99.00772, 100], ["15:20", 18.774624, 99.007687, 78, "Mueang Chiang Mai District", 18.774563, 99.007638, 100, 18.774533, 99.007751, 100], ["15:25", 18.774624, 99.007687, 75, "Mueang Chiang Mai District", 18.774571, 99.007689, 100, 18.774381, 99.007534, 100], ["15:30", 18.774615, 99.007662, 72, "Mueang Chiang Mai District", 18.774563, 99.007714, 100, 18.774581, 99.007823, 100], ["15:35", 18.774624, 99.007685, 71, "Mueang Chiang Mai District", 18.774564, 99.007716, 100, 18.774316, 99.007453, 100], ["15:40", 18.774624, 99.007685, 68, "Mueang Chiang Mai District", 18.774576, 99.007742, 100, 18.774524, 99.007787, 100], ["15:45", 18.774624, 99.007685, 67, "Mueang Chiang Mai District", 18.774583, 99.007757, 100, 18.774555, 99.007758, 100], ["15:50", 18.774624, 99.007685, 67, "Mueang Chiang Mai District", 18.774583, 99.007757, 100, 18.774532, 99.007755, 100], ["15:55", 18.774624, 99.007685, 67, "Mueang Chiang Mai District", 18.774583, 99.007758, 100, 18.774549, 99.007774, 100], ["16:00", 18.774624, 99.007685, 65, "Mueang Chiang Mai District", 18.774583, 99.007758, 100, 18.774501, 99.007759, 100], ["16:05", 18.774616, 99.00768, 65, "Mueang Chiang Mai District", 18.774583, 99.007758, 100, 18.774557, 99.00763, 100], ["16:10", 18.774624, 99.007685, 64, "Mueang Chiang Mai District", 18.77458, 99.007751, 100, 18.774675, 99.007813, 100], ["16:15", 18.774624, 99.007685, 64, "Mueang Chiang Mai District", 18.774583, 99.007754, 100, 18.774601, 99.007787, 100], ["16:20", 18.774485, 99.007609, 63, "Mueang Chiang Mai District", 18.774417, 99.007635, 100, 18.774546, 99.007763, 100], ["16:25", 18.768047, 99.012267, 59, "Mueang Chiang Mai District", 18.768114, 99.012251, 100, 18.774546, 99.007763, 100], ["16:30", 18.777682, 99.017391, 58, "Mueang Chiang Mai District", 18.777617, 99.017322, 100, 18.774546, 99.007763, 0], ["16:35", 18.780165, 99.02817, 56, "Mueang Chiang Mai District", 18.780109, 99.02833, 100, 18.774546, 99.007763, 0], ["16:40", 18.780071, 99.027871, 54, "Mueang Chiang Mai District", 18.780068, 99.02764, 100, 18.774546, 99.007763, 0], ["16:45", 18.75988, 99.016398, 54, "Mueang Chiang Mai District", 18.75987, 99.016156, 100, 18.774546, 99.007763, 0], ["16:50", 18.781478, 98.97735, 53, "Mueang Chiang Mai District", 18.782227, 98.977378, 100, 18.774546, 99.007763, 0], ["16:55", 18.797202, 98.980759, 53, "Mueang Chiang Mai District", 18.797208, 98.980763, 100, 18.774546, 99.007763, 0], ["17:00", 18.796412, 98.979393, 48, "Mueang Chiang Mai District", 18.797425, 98.980863, 100, 18.797187, 98.980904, 100], ["17:05", 18.796412, 98.979393, 48, "Mueang Chiang Mai District", 18.797171, 98.980848, 100, 18.797195, 98.980887, 100], ["17:10", 18.797358, 98.981117, 48, "Mueang Chiang Mai District", 18.797173, 98.980785, 99, 18.797161, 98.980842, 98], ["17:15", 18.797358, 98.981118, 48, "Mueang Chiang Mai District", 18.797213, 98.980862, 97, 18.79717, 98.980873, 95], ["17:20", 18.79714, 98.980889, 48, "Mueang Chiang Mai District", 18.797145, 98.980907, 96, 18.797202, 98.980949, 93], ["17:25", 18.79714, 98.980889, 48, "Mueang Chiang Mai District", 18.796637, 98.980858, 94, 18.797222, 98.98076, 90], ["17:30", 18.797324, 98.980898, 48, "Mueang Chiang Mai District", 18.796979, 98.980887, 93, 18.797161, 98.98092, 88], ["17:35", 18.79731, 98.980752, 48, "Mueang Chiang Mai District", 18.797172, 98.980872, 92, 18.797151, 98.980899, 85], ["17:40", 18.797172, 98.980649, 48, "Mueang Chiang Mai District", 18.797164, 98.980902, 91, 18.797146, 98.980882, 84], ["17:45", 18.797319, 98.980958, 48, "Mueang Chiang Mai District", 18.7972, 98.980841, 89, 18.797164, 98.980811, 84], ["17:50", 18.797183, 98.981125, 48, "Mueang Chiang Mai District", 18.797179, 98.980884, 88, 18.797157, 98.980834, 83], ["17:55", 18.797351, 98.980658, 48, "Mueang Chiang Mai District", 18.79714, 98.980918, 87, 18.797147, 98.980881, 83], ["18:00", 18.797303, 98.980676, 48, "Mueang Chiang Mai District", 18.797152, 98.980913, 86, 18.797147, 98.980881, 83], ["18:05", 18.797235, 98.9806, 48, "Mueang Chiang Mai District", 18.797157, 98.980913, 86, 18.797147, 98.980881, 0], ["18:10", 18.797327, 98.980951, 48, "Mueang Chiang Mai District", 18.797178, 98.980877, 84, 18.797147, 98.980881, 0], ["18:15", 18.797327, 98.980951, 48, "Mueang Chiang Mai District", 18.797211, 98.980866, 82, 18.797147, 98.980881, 0], ["18:20", 18.797344, 98.980964, 48, "Mueang Chiang Mai District", 18.797196, 98.980863, 82, 18.797147, 98.980881, 0], ["18:25", 18.797344, 98.980964, 48, "Mueang Chiang Mai District", 18.79715, 98.980944, 79, 18.797197, 98.980936, 80], ["18:30", 18.797226, 98.980923, 48, "Mueang Chiang Mai District", 18.797155, 98.980913, 78, 18.797167, 98.980916, 79], ["18:35", 18.796764, 98.981359, 48, "Mueang Chiang Mai District", 18.795833, 98.983469, 76, 18.797043, 98.980897, 77], ["18:40", 18.784023, 98.98185, 48, "Mueang Chiang Mai District", 18.784085, 98.981832, 75, 18.788293, 98.98253, 77], ["18:45", 18.772775, 98.980043, 48, "Mueang Chiang Mai District", 18.772764, 98.980053, 73, 18.775582, 98.980859, 76], ["18:50", 18.762635, 98.973066, 48, "CNX Airport", 18.762265, 98.972796, 70, 18.767464, 98.976302, 76], ["18:55", 18.743613, 98.959853, 48, "Mueang Chiang Mai District", 18.743624, 98.959878, 68, 18.751366, 98.965243, 76], ["19:00", 18.732499, 98.952245, 48, "Hang Dong District", 18.732575, 98.952353, 67, 18.751366, 98.965243, 76], ["19:05", 18.717361, 98.953138, 48, "Hang Dong District", 18.716789, 98.952665, 65, 18.751366, 98.965243, 0], ["19:10", 18.707732, 98.949672, 48, "Hang Dong District", 18.707798, 98.949677, 64, 18.751366, 98.965243, 0], ["19:15", 18.707673, 98.949714, 48, "Hang Dong District", 18.707665, 98.949782, 63, 18.751366, 98.965243, 0], ["19:20", 18.707673, 98.949714, 48, "Hang Dong District", 18.707698, 98.94959, 62, 18.751366, 98.965243, 0], ["19:25", 18.70765, 98.949692, 48, "Hang Dong District", 18.707685, 98.949656, 61, 18.751366, 98.965243, 0], ["19:30", 18.70765, 98.949693, 48, "Hang Dong District", 18.707718, 98.949641, 60, 18.751366, 98.965243, 0], ["19:35", 18.707709, 98.949688, 48, "Hang Dong District", 18.707608, 98.949575, 59, 18.751366, 98.965243, 0], ["19:40", 18.707753, 98.949597, 48, "Hang Dong District", 18.707613, 98.949622, 59, 18.751366, 98.965243, 0], ["19:45", 18.707789, 98.949594, 48, "Hang Dong District", 18.707646, 98.949559, 58, 18.751366, 98.965243, 0], ["19:50", 18.707773, 98.949604, 48, "Hang Dong District", 18.707676, 98.949641, 58, 18.751366, 98.965243, 0], ["19:55", 18.707773, 98.949604, 48, "Hang Dong District", 18.707799, 98.949663, 57, 18.751366, 98.965243, 0], ["20:00", 18.707818, 98.949563, 48, "Hang Dong District", 18.707863, 98.949564, 57, 18.751366, 98.965243, 0], ["20:05", 18.707817, 98.949564, 48, "Hang Dong District", 18.707747, 98.949502, 56, 18.751366, 98.965243, 0], ["20:10", 18.707727, 98.949608, 48, "Hang Dong District", 18.707835, 98.949473, 55, 18.751366, 98.965243, 0], ["20:15", 18.70778, 98.949762, 47, "Hang Dong District", 18.707777, 98.949538, 55, 18.751366, 98.965243, 0], ["20:20", 18.70778, 98.949763, 47, "Hang Dong District", 18.707733, 98.949578, 54, 18.751366, 98.965243, 0], ["20:25", 18.707739, 98.949693, 47, "Hang Dong District", 18.707676, 98.94963, 54, 18.751366, 98.965243, 0], ["20:30", 18.707739, 98.949693, 46, "Hang Dong District", 18.707789, 98.949631, 54, 18.751366, 98.965243, 0], ["20:35", 18.707734, 98.949734, 46, "Hang Dong District", 18.707701, 98.949644, 53, 18.751366, 98.965243, 0], ["20:40", 18.708757, 98.950491, 46, "Hang Dong District", 18.707615, 98.949493, 53, 18.751366, 98.965243, 0], ["20:45", 18.707786, 98.949615, 46, "Hang Dong District", 18.707727, 98.949698, 52, 18.751366, 98.965243, 0], ["20:50", 18.707785, 98.949615, 46, "Hang Dong District", 18.707774, 98.949561, 51, 18.751366, 98.965243, 0], ["20:55", 18.707788, 98.949616, 46, "Hang Dong District", 18.707777, 98.949632, 50, 18.751366, 98.965243, 0], ["21:00", 18.707788, 98.949617, 45, "Hang Dong District", 18.707668, 98.949731, 50, 18.751366, 98.965243, 0], ["21:05", 18.707786, 98.949616, 45, "Hang Dong District", 18.707737, 98.949641, 49, 18.751366, 98.965243, 0], ["21:10", 18.707785, 98.949616, 45, "Hang Dong District", 18.707767, 98.94957, 49, 18.751366, 98.965243, 0], ["21:15", 18.707786, 98.949726, 45, "Hang Dong District", 18.707685, 98.949674, 48, 18.751366, 98.965243, 0], ["21:20", 18.707788, 98.949727, 45, "Hang Dong District", 18.70769, 98.949644, 47, 18.751366, 98.965243, 0], ["21:25", 18.707788, 98.949727, 44, "Hang Dong District", 18.707781, 98.949593, 44, 18.751366, 98.965243, 0], ["21:30", 18.707796, 98.949711, 44, "Hang Dong District", 18.707656, 98.949617, 42, 18.751366, 98.965243, 0], ["21:35", 18.707797, 98.949712, 44, "Hang Dong District", 18.707775, 98.949621, 41, 18.751366, 98.965243, 0], ["21:40", 18.707797, 98.949712, 44, "Hang Dong District", 18.707883, 98.949621, 41, 18.751366, 98.965243, 0], ["21:45", 18.707792, 98.949697, 44, "Hang Dong District", 18.707857, 98.949583, 40, 18.751366, 98.965243, 0], ["21:50", 18.707792, 98.949697, 43, "Hang Dong District", 18.707848, 98.949619, 39, 18.751366, 98.965243, 0], ["21:55", 18.707792, 98.949698, 43, "Hang Dong District", 18.70781, 98.949626, 38, 18.751366, 98.965243, 0], ["22:00", 18.707703, 98.949577, 38, "Hang Dong District", 18.70769, 98.949642, 37, 18.751366, 98.965243, 0], ["22:05", 18.707725, 98.949678, 36, "Hang Dong District", 18.707689, 98.949611, 36, 18.751366, 98.965243, 0], ["22:10", 18.707684, 98.949655, 35, "Hang Dong District", 18.707684, 98.949631, 35, 18.751366, 98.965243, 0], ["22:15", 18.707736, 98.949629, 34, "Hang Dong District", 18.707724, 98.949632, 34, 18.751366, 98.965243, 0], ["22:20", 18.707769, 98.94967, 33, "Hang Dong District", 18.707688, 98.949641, 34, 18.751366, 98.965243, 0], ["22:25", 18.707693, 98.949608, 33, "Hang Dong District", 18.707673, 98.949641, 33, 18.751366, 98.965243, 0], ["22:30", 18.707702, 98.949634, 33, "Hang Dong District", 18.707667, 98.949667, 33, 18.751366, 98.965243, 0], ["22:35", 18.707605, 98.949726, 33, "Hang Dong District", 18.70623, 98.948943, 32, 18.751366, 98.965243, 0], ["22:40", 18.694012, 98.946135, 33, "Hang Dong District", 18.694304, 98.944926, 31, 18.751366, 98.965243, 0], ["22:45", 18.703908, 98.933144, 33, "Hang Dong District", 18.704182, 98.933064, 30, 18.751366, 98.965243, 0], ["22:50", 18.726527, 98.948016, 33, "Hang Dong District", 18.726547, 98.948032, 29, 18.751366, 98.965243, 0], ["22:55", 18.748425, 98.986224, 33, "Mueang Chiang Mai District", 18.746125, 98.981234, 28, 18.751366, 98.965243, 0], ["23:00", 18.764311, 99.002037, 33, "Mueang Chiang Mai District", 18.763134, 99.00129, 26, 18.751366, 98.965243, 0], ["23:05", 18.774485, 99.00782, 33, "Mueang Chiang Mai District", 18.774517, 99.007845, 22, 18.751366, 98.965243, 0], ["23:10", 18.787644, 99.005569, 33, "Mueang Chiang Mai District", 18.787649, 99.005223, 19, 18.751366, 98.965243, 0], ["23:15", 18.784485, 99.021828, 33, "Mueang Chiang Mai District", 18.78457, 99.021442, 17, 18.751366, 98.965243, 0], ["23:20", 18.779105, 99.047724, 33, "San Kamphaeng District", 18.779192, 99.047556, 15, 18.751366, 98.965243, 0]]; | |
| const map=L.map('map',{zoomControl:false,attributionControl:false}).setView([18.76,99.01],12); | |
| L.tileLayer('https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png',{maxZoom:19}).addTo(map); | |
| const trailCoords=D.map(p=>[p[1],p[2]]); | |
| const ghostTrail=L.polyline(trailCoords,{color:'rgba(224,192,151,0.08)',weight:2,dashArray:'4,8'}).addTo(map); | |
| const activeTrail=L.polyline([],{color:'var(--gold)',weight:3,opacity:0.6}).addTo(map); | |
| const glowTrail=L.polyline([],{color:'rgba(224,192,151,0.15)',weight:10}).addTo(map); | |
| const markerIcon=L.divIcon({className:'',html:'<div class="glow-marker"><div class="glow-marker-inner"></div></div>',iconSize:[18,18],iconAnchor:[9,9]}); | |
| const marker=L.marker([D[0][1],D[0][2]],{icon:markerIcon,zIndexOffset:1000}).addTo(map); | |
| document.getElementById('ptTotal').textContent=D.length; | |
| document.getElementById('tStart').textContent=D[0][0]; | |
| document.getElementById('tEnd').textContent=D[D.length-1][0]; | |
| document.getElementById('slider').max=D.length-1; | |
| function batClass(v){return v<=0?'dead':v<20?'low':v<80?'ok':'full'} | |
| function batColor(v){return v<=0?'var(--danger)':v<20?'var(--warn)':v<80?'var(--ok)':'var(--gold)'} | |
| let prevPlace=''; | |
| function update(i){ | |
| const p=D[i]; | |
| document.getElementById('clock').textContent=p[0]; | |
| document.getElementById('ptCount').textContent=i+1; | |
| const pct=(i/(D.length-1))*100; | |
| document.getElementById('trackProg').style.width=pct+'%'; | |
| document.getElementById('trackThumb').style.left=pct+'%'; | |
| if(p[4]!==prevPlace){ | |
| const el=document.getElementById('placeName'); | |
| el.style.opacity='0'; | |
| setTimeout(()=>{el.textContent=p[4]||'—';el.style.opacity='1'},300); | |
| prevPlace=p[4]; | |
| } | |
| marker.setLatLng([p[1],p[2]]); | |
| const trail=D.slice(0,i+1).map(q=>[q[1],q[2]]); | |
| activeTrail.setLatLngs(trail); | |
| glowTrail.setLatLngs(trail); | |
| [[3,'Ipad'],[7,'Iphone'],[10,'Mac']].forEach(([bi,name])=>{ | |
| const v=p[bi]; | |
| const el=document.getElementById('b'+name); | |
| el.textContent=v<=0?'💀':v; | |
| el.className='dev-bat '+batClass(v); | |
| const fill=document.getElementById('f'+name); | |
| fill.style.width=Math.max(v,2)+'%'; | |
| fill.style.background=batColor(v); | |
| }); | |
| if(i%8===0)map.panTo([p[1],p[2]],{animate:true,duration:1,easeLinearity:0.3}); | |
| } | |
| function seek(v){v=parseInt(v);document.getElementById('slider').value=v;update(v)} | |
| let playing=false,speed=1,interval; | |
| function togglePlay(){ | |
| playing=!playing; | |
| const btn=document.getElementById('playBtn'); | |
| btn.textContent=playing?'⏸':'▶'; | |
| btn.classList.toggle('active',playing); | |
| if(playing){ | |
| interval=setInterval(()=>{ | |
| let v=parseInt(document.getElementById('slider').value)+1; | |
| if(v>=D.length)v=0; | |
| document.getElementById('slider').value=v; | |
| update(v); | |
| },250/speed); | |
| }else clearInterval(interval); | |
| } | |
| function setSpd(s){ | |
| speed=s; | |
| document.querySelectorAll('.spd').forEach(b=>b.classList.remove('active')); | |
| document.getElementById('x'+s).classList.add('active'); | |
| if(playing){clearInterval(interval);playing=false;togglePlay()} | |
| } | |
| update(0); | |
| setTimeout(()=>map.flyTo([D[0][1],D[0][2]],13,{duration:2}),500); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment