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 Time Table</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; color: #2c3e50; }9 #render-target {10 width: 1080px;11 height: 2400px;12 position: relative;13 overflow: hidden;14 background: #ffffff;15 }16 17 /* Top blue header */18 .topbar {19 position: relative;20 background: #0b5ea8;21 color: #fff;22 height: 250px;23 box-shadow: 0 2px 0 rgba(0,0,0,0.08) inset;24 }25 .status-row {26 height: 60px;27 display: flex;28 align-items: center;29 padding: 0 32px;30 font-size: 32px;31 letter-spacing: 0.2px;32 opacity: 0.95;33 }34 .status-right {35 margin-left: auto;36 display: flex;37 align-items: center;38 gap: 18px;39 }40 .nav-row {41 display: flex;42 align-items: center;43 padding: 16px 32px 0 32px;44 gap: 18px;45 }46 .train-title {47 font-size: 44px;48 font-weight: 600;49 white-space: nowrap;50 }51 .info-box {52 margin-left: auto;53 padding-left: 28px;54 border-left: 2px solid rgba(255,255,255,0.5);55 color: #e9f3ff;56 text-align: right;57 }58 .info-box .big {59 font-size: 36px;60 font-weight: 600;61 }62 .info-box .small {63 font-size: 28px;64 opacity: 0.9;65 }66 67 /* Tabs */68 .tabs {69 height: 95px;70 background: #ffffff;71 display: flex;72 align-items: flex-end;73 padding: 0 24px;74 gap: 24px;75 border-bottom: 1px solid #e3e6ea;76 }77 .tab {78 color: #9ea7b3;79 font-size: 32px;80 padding: 0 18px 22px 18px;81 }82 .tab.active {83 color: #234fba;84 font-weight: 600;85 position: relative;86 }87 .tab.active::after {88 content: "";89 position: absolute;90 left: 12px;91 right: 12px;92 bottom: 10px;93 height: 8px;94 border-radius: 4px;95 background: #5ea2ff;96 }97 98 /* Header row for table */99 .table-head {100 display: grid;101 grid-template-columns: 250px 1fr 220px;102 background: #9aa0a6;103 color: #fff;104 font-size: 30px;105 letter-spacing: 0.3px;106 padding: 12px 28px 12px 28px;107 }108 .table-head div { opacity: 0.95; }109 110 /* Timeline area */111 .timeline {112 position: relative;113 height: 1680px;114 overflow: hidden;115 background: #f5fbf6;116 }117 .timeline .vline {118 position: absolute;119 top: 0;120 bottom: 0;121 left: 320px;122 width: 4px;123 background: #c8cbd1;124 }125 126 .day-pill {127 position: absolute;128 top: 34px;129 left: 72px;130 background: #d5d8dc;131 color: #ffffff;132 font-weight: 600;133 padding: 10px 22px;134 border-radius: 14px;135 font-size: 28px;136 }137 138 .stop {139 position: relative;140 padding: 42px 28px 42px 380px;141 min-height: 240px;142 border-bottom: 1px solid #eceff3;143 }144 .stop .left {145 position: absolute;146 left: 60px;147 top: 46px;148 width: 220px;149 text-align: left;150 }151 .code {152 color: #2f6fd7;153 font-weight: 700;154 font-size: 36px;155 }156 .time {157 color: #7b8794;158 margin-top: 10px;159 font-size: 30px;160 }161 .dot {162 position: absolute;163 left: 312px;164 top: 80px;165 width: 20px;166 height: 20px;167 background: #8f939b;168 border-radius: 50%;169 }170 .content h3 {171 margin: 0;172 font-size: 44px;173 font-weight: 700;174 color: #374957;175 }176 .meta {177 margin-top: 8px;178 color: #7b8794;179 font-size: 30px;180 }181 .status-ok { color: #3bb273; font-weight: 600; margin-top: 8px; }182 .status-bad { color: #d9534f; font-weight: 600; margin-top: 8px; }183 .depart {184 position: absolute;185 right: 28px;186 top: 54px;187 color: #7b8794;188 font-size: 32px;189 }190 191 .btn-food {192 margin-top: 16px;193 display: inline-flex;194 align-items: center;195 gap: 14px;196 background: #ffffff;197 border: 1px solid #e1e5ea;198 border-radius: 12px;199 padding: 14px 18px;200 box-shadow: 0 3px 6px rgba(0,0,0,0.08);201 font-size: 32px;202 color: #374957;203 }204 .btn-food svg { width: 30px; height: 30px; }205 206 .chip {207 display: inline-block;208 margin-top: 12px;209 background: #e5e7ea;210 color: #495057;211 border-radius: 20px;212 padding: 10px 18px;213 font-size: 26px;214 }215 216 .region-tag {217 margin: 26px 0 6px 0;218 display: inline-block;219 padding: 12px 20px;220 border-radius: 12px;221 font-size: 30px;222 font-weight: 600;223 color: #2c3e50;224 }225 .region-green { background: #dff4df; color: #25603d; }226 .region-pink { background: #fde7e9; color: #9b3a4a; }227 228 /* Bottom banner */229 .promo {230 position: absolute;231 left: 0;232 right: 0;233 bottom: 72px;234 background: #0b3764;235 color: #ffffff;236 padding: 28px 28px;237 display: flex;238 align-items: center;239 gap: 24px;240 border-top-left-radius: 22px;241 border-top-right-radius: 22px;242 }243 .promo .text {244 font-size: 40px;245 font-weight: 700;246 flex: 1;247 line-height: 1.2;248 }249 .promo .action {250 background: #ffc944;251 color: #1f2d3d;252 border: none;253 font-size: 34px;254 font-weight: 700;255 padding: 22px 30px;256 border-radius: 14px;257 white-space: nowrap;258 box-shadow: 0 3px 6px rgba(0,0,0,0.2);259 }260 .home-indicator {261 position: absolute;262 left: 340px;263 right: 340px;264 bottom: 22px;265 height: 10px;266 background: #0f0f0f;267 opacity: 0.15;268 border-radius: 8px;269 }270 271 /* Simple icon styles */272 .icon {273 display: inline-flex;274 width: 46px;275 height: 46px;276 align-items: center;277 justify-content: center;278 }279 .nav-title {280 display: flex;281 align-items: center;282 gap: 12px;283 color: #fff;284 }285</style>286</head>287<body>288<div id="render-target">289 290 <div class="topbar">291 <div class="status-row">292 <div>9:52</div>293 <div class="status-right">294 <!-- Wifi icon -->295 <svg width="36" height="36" viewBox="0 0 24 24" fill="none">296 <path d="M12 18.5a1.6 1.6 0 1 0 0 3.2 1.6 1.6 0 0 0 0-3.2Z" fill="#fff"/>297 <path d="M4 12.5a11 11 0 0 1 16 0" stroke="#fff" stroke-width="2" stroke-linecap="round"/>298 <path d="M7.5 15.5a7 7 0 0 1 9 0" stroke="#fff" stroke-width="2" stroke-linecap="round"/>299 </svg>300 <!-- Battery icon -->301 <svg width="42" height="42" viewBox="0 0 28 18" fill="none">302 <rect x="1" y="3" width="22" height="12" rx="2" stroke="#fff" stroke-width="2"/>303 <rect x="3" y="5" width="10" height="8" rx="1.5" fill="#fff"/>304 <rect x="24" y="7" width="3" height="6" rx="1" fill="#fff"/>305 </svg>306 </div>307 </div>308 <div class="nav-row">309 <div class="nav-title">310 <span class="icon">311 <svg width="36" height="36" viewBox="0 0 24 24" fill="none">312 <path d="M15 6l-6 6 6 6" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>313 </svg>314 </span>315 <div class="train-title">12616 - Grand Trunk Express</div>316 </div>317 <div class="info-box">318 <div class="big">36hr:20min</div>319 <div class="small">Runs Daily</div>320 </div>321 </div>322 </div>323 324 <div class="tabs">325 <div class="tab">Train Status</div>326 <div class="tab">Map View</div>327 <div class="tab active">Time Table</div>328 <div class="tab">Coach Position</div>329 <div class="tab">Media</div>330 </div>331 332 <div class="table-head">333 <div>Arrival</div>334 <div>Station</div>335 <div style="text-align:right">Departure</div>336 </div>337 338 <div class="timeline">339 <div class="vline"></div>340 <div class="day-pill">Day 1</div>341 342 <!-- Stop 1 -->343 <div class="stop" style="background:#f1fbf2;">344 <div class="left">345 <div class="code">NDLS</div>346 <div class="time">--</div>347 </div>348 <div class="dot"></div>349 <div class="content">350 <h3>New Delhi<span style="font-size:24px; vertical-align:super;"> 01</span></h3>351 <div class="meta">0 km | PF #3</div>352 <div class="status-ok">Mostly Ontime</div>353 <div class="btn-food">354 <svg viewBox="0 0 24 24">355 <path d="M4 3v10m4-10v10M8 3c0 2-4 2-4 0" stroke="#5b6674" stroke-width="2" stroke-linecap="round"/>356 <path d="M14 3v7m6-7v7M20 3c0 2-6 2-6 0" stroke="#5b6674" stroke-width="2" stroke-linecap="round"/>357 </svg>358 <span>Order Food</span>359 </div>360 <div class="chip">+ 24 No-Halt stations</div>361 <div class="region-tag region-green">Delhi</div>362 </div>363 <div class="depart">16:10</div>364 </div>365 366 <!-- Decorative region break (Uttar Pradesh) -->367 <div class="stop" style="background:#fdefee; padding-top:24px;">368 <div class="left">369 <div class="code" style="color:#2f6fd7;">MTJ</div>370 <div class="time">17:40</div>371 </div>372 <div class="dot"></div>373 <div class="content">374 <h3>Mathura Jn<span style="font-size:24px; vertical-align:super;"> 02</span></h3>375 <div class="meta">141 km | PF #1</div>376 <div class="status-bad">Mostly Delayed</div>377 <div class="btn-food">378 <svg viewBox="0 0 24 24">379 <path d="M4 3v10m4-10v10M8 3c0 2-4 2-4 0" stroke="#5b6674" stroke-width="2" stroke-linecap="round"/>380 <path d="M14 3v7m6-7v7M20 3c0 2-6 2-6 0" stroke="#5b6674" stroke-width="2" stroke-linecap="round"/>381 </svg>382 <span>Order Food</span>383 </div>384 <div class="chip">+ 7 No-Halt stations</div>385 <div class="region-tag region-pink">Uttar pradesh</div>386 </div>387 <div class="depart">17:45</div>388 </div>389 390 <!-- Stop 3 -->391 <div class="stop" style="background:#fff7f7;">392 <div class="left">393 <div class="code">RKM</div>394 <div class="time">18:18</div>395 </div>396 <div class="dot"></div>397 <div class="content">398 <h3>Raja Ki Mandi<span style="font-size:24px; vertical-align:super;"> 03</span></h3>399 <div class="meta">191 km | PF #2</div>400 <div class="status-bad">Mostly Delayed</div>401 <div class="btn-food">402 <svg viewBox="0 0 24 24">403 <path d="M4 3v10m4-10v10M8 3c0 2-4 2-4 0" stroke="#5b6674" stroke-width="2" stroke-linecap="round"/>404 <path d="M14 3v7m6-7v7M20 3c0 2-6 2-6 0" stroke="#5b6674" stroke-width="2" stroke-linecap="round"/>405 </svg>406 <span>Order Food</span>407 </div>408 </div>409 <div class="depart">18:20</div>410 </div>411 412 <!-- Stop 4 -->413 <div class="stop" style="background:#fffafa;">414 <div class="left">415 <div class="code">AGC</div>416 <div class="time">18:30</div>417 </div>418 <div class="dot"></div>419 <div class="content">420 <h3>Agra Cantt<span style="font-size:24px; vertical-align:super;"> 04</span></h3>421 <div class="meta">195 km | PF #1</div>422 </div>423 <div class="depart">18:35</div>424 </div>425 </div>426 427 <div class="promo">428 <div class="text">Book instant train tickets in just 2 easy steps.</div>429 <button class="action">Book Now</button>430 </div>431 432 <div class="home-indicator"></div>433</div>434</body>435</html>