GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<meta name="viewport" content="width=1080, initial-scale=1.0">6<title>Train Timetable Mock</title>7<style>8 body { margin: 0; padding: 0; background: transparent; }9 #render-target {10 width: 1080px;11 height: 2400px;12 position: relative;13 overflow: hidden;14 background: #ffffff;15 font-family: "Segoe UI", Arial, Helvetica, sans-serif;16 color: #333;17 }18 19 /* Status/header */20 .status-bar {21 height: 90px;22 background: #0b57a7;23 color: #fff;24 padding: 20px 32px 0 32px;25 display: flex;26 align-items: center;27 justify-content: space-between;28 font-size: 34px;29 letter-spacing: 0.5px;30 }31 .status-icons {32 display: flex; align-items: center; gap: 26px;33 }34 .title-bar {35 background: #0b57a7;36 color: #fff;37 display: flex;38 align-items: center;39 justify-content: space-between;40 padding: 18px 32px 28px 32px;41 }42 .title-left {43 display: flex; align-items: center; gap: 18px;44 font-size: 42px; font-weight: 500;45 white-space: nowrap;46 }47 .title-right {48 display: flex; align-items: center; gap: 24px;49 padding-left: 32px;50 border-left: 2px solid rgba(255,255,255,0.4);51 font-size: 30px; line-height: 1.2;52 text-align: right;53 }54 55 /* Tabs */56 .tabs {57 background: #fff;58 display: flex;59 gap: 46px;60 padding: 22px 32px 0 32px;61 border-bottom: 1px solid #e6e6e6;62 color: #9aa2a9;63 font-size: 32px;64 white-space: nowrap;65 }66 .tab { padding: 24px 6px; position: relative; }67 .tab.active { color: #1b66d1; font-weight: 600; }68 .tab.active::after {69 content: "";70 position: absolute; left: 0; right: 0; bottom: 0;71 height: 8px; background: #5da0ff; border-radius: 6px 6px 0 0;72 }73 74 /* Column header */75 .columns-header {76 background: #7f7f82;77 color: #fff;78 display: grid;79 grid-template-columns: 200px 160px auto 180px;80 gap: 24px;81 padding: 14px 32px;82 font-size: 28px;83 letter-spacing: 0.6px;84 }85 86 /* Timeline */87 .timeline {88 position: relative;89 height: 1950px;90 overflow: hidden;91 }92 /* Region backgrounds */93 .region.green {94 position: absolute; left: 0; top: 0; width: 100%; height: 820px;95 background: #eef8ee;96 }97 .region.pink {98 position: absolute; left: 0; top: 820px; width: 100%; height: 1200px;99 background: #fff2f2;100 border-top: 6px dashed #d7dbe0;101 }102 103 /* State labels */104 .state-pill {105 position: absolute;106 display: inline-flex; align-items: center; gap: 10px;107 padding: 16px 26px;108 border-radius: 16px;109 color: #2e6b3a; background: #cfeecf;110 font-size: 28px; font-weight: 600;111 }112 .state-pill.purple {113 right: 36px; top: 860px;114 background: #efe5ff; color: #6d4cc9;115 }116 .state-pill.green { left: 300px; top: 560px; }117 118 .rail-line {119 position: absolute;120 top: 0; bottom: 0;121 left: 290px; width: 8px;122 background: #d4d4d6; border-radius: 8px;123 }124 125 .day-badge {126 position: absolute; top: 40px; left: 130px;127 background: #e5e5e8; color: #555;128 padding: 12px 22px; border-radius: 12px;129 font-size: 28px; font-weight: 600;130 }131 132 .stop {133 position: relative;134 display: grid;135 grid-template-columns: 200px 160px auto 180px;136 gap: 24px;137 padding: 42px 32px 36px 32px;138 border-bottom: 1px solid #ececec;139 }140 .dot {141 position: absolute; left: 282px; top: 64px;142 width: 24px; height: 24px; background: #8c8c90; border-radius: 50%;143 }144 .left-col {145 text-align: right; padding-right: 18px;146 }147 .code {148 font-size: 40px; font-weight: 700; color: #2c78d9; line-height: 1.1;149 }150 .arr-time { color: #7a7a7a; font-size: 28px; margin-top: 6px; }151 152 .station-title { font-size: 42px; font-weight: 700; color: #444; }153 .meta { margin-top: 8px; font-size: 28px; color: #7a7a7a; }154 .meta a { color: #3f82ff; text-decoration: none; }155 .status-green { margin-top: 6px; color: #2bb24c; font-weight: 600; }156 .status-red { margin-top: 6px; color: #d85c59; font-weight: 700; }157 158 .right-time { font-size: 30px; color: #6b6b6b; text-align: right; padding-top: 6px; }159 160 .food-btn {161 display: inline-flex; align-items: center; gap: 12px;162 margin-top: 18px;163 background: #fff; border: 1px solid #e1e1e1;164 box-shadow: 0 2px 6px rgba(0,0,0,0.12);165 border-radius: 14px;166 padding: 14px 18px;167 font-size: 30px; color: #444;168 }169 170 .pill-small {171 display: inline-block;172 margin-top: 14px;173 background: #e6e6ea; color: #676a6f;174 font-size: 26px; padding: 10px 16px;175 border-radius: 18px;176 }177 178 .home-indicator {179 position: absolute; bottom: 18px; left: 50%;180 transform: translateX(-50%);181 width: 360px; height: 10px;182 background: #000; opacity: 0.6; border-radius: 8px;183 }184 185 /* Simple inline SVG sizing */186 .icon-24 { width: 28px; height: 28px; }187 .icon-36 { width: 40px; height: 40px; }188 .title-bar svg { fill: #fff; }189</style>190</head>191<body>192<div id="render-target">193 194 <!-- Status Bar -->195 <div class="status-bar">196 <div>9:50</div>197 <div class="status-icons">198 <!-- WiFi -->199 <svg class="icon-36" viewBox="0 0 24 24">200 <path fill="#fff" d="M12 20a2 2 0 1 0 0-4 2 2 0 0 0 0 4Zm-6-6 1.4 1.4A7 7 0 0 1 18.6 15L20 13.6A9 9 0 0 0 6 14Zm-3-3 1.4 1.4A12 12 0 0 1 19.6 11L21 9.6A14 14 0 0 0 3 11Z"/>201 </svg>202 <!-- Battery -->203 <svg class="icon-36" viewBox="0 0 24 24">204 <path fill="#fff" d="M2 8a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V8Zm18 3h2v2h-2v-2Z"/>205 </svg>206 </div>207 </div>208 209 <!-- Title Bar -->210 <div class="title-bar">211 <div class="title-left">212 <!-- Back arrow -->213 <svg class="icon-36" viewBox="0 0 24 24">214 <path d="M15.5 19 9 12l6.5-7 1.5 1.3L12.9 12l4.1 4.7-1.5 1.3Z"/>215 </svg>216 <div>12616 - Grand Trunk Express</div>217 </div>218 <div class="title-right">219 <div>220 <div style="font-size:36px;font-weight:700;">36hr:20min</div>221 <div style="opacity:.9;">Runs Daily</div>222 </div>223 </div>224 </div>225 226 <!-- Tabs -->227 <div class="tabs">228 <div class="tab">Train Status</div>229 <div class="tab">Map View</div>230 <div class="tab active">Time Table</div>231 <div class="tab">Coach Position</div>232 <div class="tab">Med</div>233 </div>234 235 <!-- Column Header -->236 <div class="columns-header">237 <div style="text-align:right;">Arrival</div>238 <div>Station</div>239 <div></div>240 <div style="text-align:right;">Departure</div>241 </div>242 243 <!-- Time line area -->244 <div class="timeline">245 <div class="region green"></div>246 <div class="region pink"></div>247 <div class="rail-line"></div>248 <div class="day-badge">Day 1</div>249 250 <div class="state-pill green">🏛️ Delhi</div>251 <div class="state-pill purple">🕌 Uttar pradesh</div>252 253 <!-- Stop: New Delhi -->254 <div class="stop">255 <div class="left-col">256 <div class="code">NDLS</div>257 <div class="arr-time">--</div>258 </div>259 <div></div>260 <div>261 <div class="station-title">New Delhi<span style="font-size:26px; vertical-align: super;">01</span></div>262 <div class="meta">0 km | <a href="#">PF #3</a></div>263 <div class="status-green">Mostly Ontime</div>264 <div class="food-btn">265 <!-- Fork/Knife -->266 <svg class="icon-24" viewBox="0 0 24 24">267 <path fill="#666" d="M7 2h2v8H7V7H6v3H4V2h2v3h1V2Zm7 0h2v7h2v2h-4V2Z"/>268 </svg>269 <span>Order Food</span>270 </div>271 <div class="pill-small">+ 24 No-Halt stations</div>272 </div>273 <div class="right-time">16:10</div>274 <div class="dot"></div>275 </div>276 277 <!-- Stop: Mathura Jn -->278 <div class="stop">279 <div class="left-col">280 <div class="code">MTJ</div>281 <div class="arr-time">17:40</div>282 </div>283 <div></div>284 <div>285 <div class="station-title">Mathura Jn<span style="font-size:26px; vertical-align: super;">02</span></div>286 <div class="meta">141 km | <a href="#">PF #1</a></div>287 <div class="status-red">Mostly Delayed</div>288 <div class="food-btn">289 <svg class="icon-24" viewBox="0 0 24 24">290 <path fill="#666" d="M7 2h2v8H7V7H6v3H4V2h2v3h1V2Zm7 0h2v7h2v2h-4V2Z"/>291 </svg>292 <span>Order Food</span>293 </div>294 <div class="pill-small">+ 7 No-Halt stations</div>295 </div>296 <div class="right-time">17:45</div>297 <div class="dot"></div>298 </div>299 300 <!-- Stop: Raja Ki Mandi -->301 <div class="stop">302 <div class="left-col">303 <div class="code">RKM</div>304 <div class="arr-time">18:18</div>305 </div>306 <div></div>307 <div>308 <div class="station-title">Raja Ki Mandi<span style="font-size:26px; vertical-align: super;">03</span></div>309 <div class="meta">191 km | <a href="#">PF #2</a></div>310 <div class="status-red">Mostly Delayed</div>311 <div class="food-btn">312 <svg class="icon-24" viewBox="0 0 24 24">313 <path fill="#666" d="M7 2h2v8H7V7H6v3H4V2h2v3h1V2Zm7 0h2v7h2v2h-4V2Z"/>314 </svg>315 <span>Order Food</span>316 </div>317 </div>318 <div class="right-time">18:20</div>319 <div class="dot"></div>320 </div>321 322 <!-- Stop: Agra Cantt -->323 <div class="stop" style="border-bottom:none;">324 <div class="left-col">325 <div class="code">AGC</div>326 <div class="arr-time">18:30</div>327 </div>328 <div></div>329 <div>330 <div class="station-title">Agra Cantt<span style="font-size:26px; vertical-align: super;">04</span></div>331 <div class="meta">195 km | <a href="#">PF #1</a></div>332 <div class="status-red">Mostly Delayed</div>333 <div class="food-btn">334 <svg class="icon-24" viewBox="0 0 24 24">335 <path fill="#666" d="M7 2h2v8H7V7H6v3H4V2h2v3h1V2Zm7 0h2v7h2v2h-4V2Z"/>336 </svg>337 <span>Order Food</span>338 </div>339 <div class="pill-small">+ 3 No-Halt stations</div>340 </div>341 <div class="right-time">18:35</div>342 <div class="dot"></div>343 </div>344 </div>345 346 <div class="home-indicator"></div>347</div>348</body>349</html>