GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Train Time Table</title>6<meta name="viewport" content="width=1080, initial-scale=1.0">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: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;16 color: #2e2e2e;17 }18 19 /* Top Bars */20 .status-bar {21 height: 100px;22 background: #0b57a0;23 color: #fff;24 display: flex;25 align-items: center;26 justify-content: space-between;27 padding: 0 34px;28 box-sizing: border-box;29 font-weight: 600;30 }31 .status-left { display: flex; align-items: center; gap: 18px; font-size: 36px; }32 .status-right { display: flex; align-items: center; gap: 26px; }33 .status-icon {34 width: 36px; height: 36px; opacity: 0.95;35 }36 37 .app-bar {38 height: 160px;39 background: #0b57a0;40 color: #fff;41 display: flex;42 align-items: center;43 justify-content: space-between;44 padding: 0 36px;45 box-sizing: border-box;46 }47 .app-title {48 display: flex;49 align-items: center;50 gap: 22px;51 font-size: 46px;52 font-weight: 600;53 }54 .back-icon { width: 44px; height: 44px; }55 .meta-box {56 display: flex;57 align-items: center;58 gap: 28px;59 }60 .meta-divider {61 width: 2px; height: 70px; background: rgba(255,255,255,0.45);62 }63 .meta-right {64 text-align: right;65 font-weight: 600;66 line-height: 1.2;67 }68 .meta-right .big { font-size: 40px; }69 .meta-right .small { font-size: 28px; opacity: 0.9; }70 71 .tabs {72 height: 110px;73 background: #ffffff;74 display: flex;75 align-items: flex-end;76 box-shadow: 0 2px 0 rgba(0,0,0,0.06);77 }78 .tab {79 flex: 1;80 text-align: center;81 padding-bottom: 24px;82 color: #b6b6b6;83 font-size: 40px;84 position: relative;85 }86 .tab.active {87 color: #1a73e8;88 font-weight: 700;89 }90 .tab.active::after {91 content: "";92 position: absolute;93 left: 50%;94 bottom: 10px;95 transform: translateX(-50%);96 width: 220px;97 height: 8px;98 background: #4f86ff;99 border-radius: 4px;100 }101 102 /* Content area */103 .content {104 position: absolute;105 left: 0; right: 0;106 top: 370px; /* 100 + 160 + 110 */107 bottom: 0;108 overflow: hidden;109 background: #ffffff;110 }111 .scroll {112 height: 2030px;113 overflow: hidden; /* static mock */114 position: relative;115 }116 117 /* State banner strip */118 .state-strip {119 background: #eef8fb;120 padding: 26px 40px 34px;121 position: relative;122 }123 .state-strip .note {124 display: inline-block;125 background: #efefef;126 color: #6b6b6b;127 padding: 12px 20px;128 border-radius: 24px;129 font-size: 30px;130 border: 1px solid #dadada;131 }132 .state-chip {133 display: inline-flex;134 align-items: center;135 gap: 18px;136 background: #d8f6ec;137 color: #2b6b51;138 padding: 18px 22px;139 border-radius: 18px;140 margin-top: 24px;141 font-size: 36px;142 }143 .img-ph {144 width: 86px; height: 60px;145 background: #E0E0E0;146 border: 1px solid #BDBDBD;147 display: flex; align-items: center; justify-content: center;148 color: #757575; font-size: 20px;149 }150 .state-strip .dash {151 position: absolute;152 left: 0; right: 0; bottom: -10px;153 border-bottom: 4px dashed #cfd8dc;154 }155 .state-right {156 position: absolute;157 right: 24px; bottom: -34px;158 transform: translateY(100%);159 background: #eaf3d2;160 color: #587436;161 display: inline-flex;162 align-items: center;163 gap: 18px;164 padding: 16px 22px;165 border-radius: 18px;166 font-size: 36px;167 }168 169 /* Timeline core */170 .timeline {171 position: relative;172 padding-top: 30px;173 padding-bottom: 30px;174 }175 .timeline .line {176 position: absolute;177 left: 340px; /* aligns with middle column */178 top: 0; bottom: 0;179 width: 6px; background: #cfcfcf; border-radius: 4px;180 }181 .row {182 display: grid;183 grid-template-columns: 220px 120px 1fr;184 column-gap: 0;185 padding: 28px 36px;186 align-items: start;187 }188 .left-code {189 text-align: right;190 padding-right: 40px;191 }192 .code {193 color: #2d7bd9;194 font-weight: 700;195 font-size: 44px;196 line-height: 1.1;197 }198 .left-time {199 color: #9f9f9f;200 font-size: 34px;201 margin-top: 8px;202 }203 .mid {204 position: relative;205 }206 .dot {207 width: 22px; height: 22px; background: #8a8a8a;208 border-radius: 50%;209 margin-top: 16px;210 margin-left: 47px; /* horizontally center in 120px col over line at 340px */211 box-shadow: 0 0 0 6px #efefef inset;212 }213 214 .right {215 padding-left: 20px;216 }217 .station {218 font-size: 44px;219 font-weight: 700;220 color: #3b3b3b;221 }222 .station sup { font-size: 26px; vertical-align: super; color: #6a6a6a; font-weight: 600; }223 .meta {224 display: flex; align-items: center; justify-content: space-between;225 font-size: 32px; color: #7a7a7a; margin-top: 8px;226 }227 .meta a { color: #4f86ff; text-decoration: none; }228 .status {229 margin-top: 10px; font-size: 34px; font-weight: 600;230 }231 .status.red { color: #e05252; }232 .status.orange { color: #f19b3b; }233 234 .badge {235 display: inline-block;236 background: #f2f2f2;237 color: #6a6a6a;238 border: 1px solid #d7d7d7;239 padding: 12px 18px;240 border-radius: 26px;241 font-size: 30px;242 margin-top: 16px;243 }244 245 .food {246 display: inline-flex; align-items: center; gap: 16px;247 background: #ffffff;248 border-radius: 14px;249 padding: 16px 22px;250 font-size: 38px; font-weight: 700; color: #4b4b4b;251 margin-top: 16px;252 box-shadow: 0 3px 6px rgba(0,0,0,0.16);253 border: 1px solid #ececec;254 }255 .food svg { width: 44px; height: 44px; }256 257 .section-alt {258 background: #fbf8ea;259 padding-top: 24px;260 padding-bottom: 24px;261 }262 263 .day-chip {264 display: inline-block;265 background: #7f7f7f; color: #fff;266 padding: 10px 18px; border-radius: 12px;267 font-weight: 700; font-size: 30px;268 margin-left: 160px; margin-top: 10px; margin-bottom: 10px;269 }270 271 /* Home indicator */272 .home-indicator {273 position: absolute; left: 50%; transform: translateX(-50%);274 bottom: 18px; width: 340px; height: 14px; background: #0f0f0f; border-radius: 10px; opacity: 0.85;275 }276</style>277</head>278<body>279<div id="render-target">280 281 <!-- Simulated status bar -->282 <div class="status-bar">283 <div class="status-left">9:54284 <svg class="status-icon" viewBox="0 0 24 24" fill="#fff"><path d="M12 2l4 4-4 4-4-4 4-4zm0 12l4 4-4 4-4-4 4-4z"/></svg>285 <svg class="status-icon" viewBox="0 0 24 24" fill="#fff"><path d="M2 4h20v2H2zm0 6h20v2H2zm0 6h12v2H2z"/></svg>286 </div>287 <div class="status-right">288 <svg class="status-icon" viewBox="0 0 24 24" fill="#fff"><path d="M2 22h20L12 2 2 22z"/></svg>289 <svg class="status-icon" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2"><rect x="3" y="7" width="18" height="10" rx="2"/><path d="M22 10v4"/></svg>290 </div>291 </div>292 293 <!-- App bar -->294 <div class="app-bar">295 <div class="app-title">296 <svg class="back-icon" viewBox="0 0 24 24" fill="#ffffff"><path d="M15.5 4l-8 8 8 8 1.5-1.5L10 12l7-6.5z"/></svg>297 <div>12616 - Grand Trunk Express</div>298 </div>299 <div class="meta-box">300 <div class="meta-divider"></div>301 <div class="meta-right">302 <div class="big">36hr:20min</div>303 <div class="small">Runs Daily</div>304 </div>305 </div>306 </div>307 308 <!-- Tabs -->309 <div class="tabs">310 <div class="tab">Train Status</div>311 <div class="tab">Map View</div>312 <div class="tab active">Time Table</div>313 <div class="tab">Coach Position</div>314 <div class="tab">Med...</div>315 </div>316 317 <!-- Content -->318 <div class="content">319 <div class="scroll">320 321 <!-- State info / banner -->322 <div class="state-strip">323 <div class="note">+ 3 No-Halt stations</div>324 <div class="state-chip">325 <div class="img-ph">[IMG]</div>326 Rajasthan327 </div>328 <div class="dash"></div>329 <div class="state-right">330 <div class="img-ph">[IMG]</div>331 Madhya pradesh332 </div>333 </div>334 335 <!-- Timeline -->336 <div class="timeline">337 <div class="line"></div>338 339 <!-- Morena -->340 <div class="row section-alt">341 <div class="left-code">342 <div class="code">MRA</div>343 <div class="left-time">20:21</div>344 </div>345 <div class="mid"><div class="dot"></div></div>346 <div class="right">347 <div class="station">Morena<sup>06</sup></div>348 <div class="meta">349 <div>275 km | <a href="#">PF #1</a></div>350 <div style="color:#9f9f9f;">20:23</div>351 </div>352 <div class="status orange">Irregular Ontime</div>353 <div class="badge">+ 5 No-Halt stations</div>354 </div>355 </div>356 357 <!-- Gwalior -->358 <div class="row">359 <div class="left-code">360 <div class="code">GWL</div>361 <div class="left-time">21:00</div>362 </div>363 <div class="mid"><div class="dot"></div></div>364 <div class="right">365 <div class="station">Gwalior Jn<sup>07</sup></div>366 <div class="meta">367 <div>313 km | <a href="#">PF #1</a></div>368 <div style="color:#9f9f9f;">21:02</div>369 </div>370 <div class="status red">Mostly Delayed</div>371 <div class="food">372 <svg viewBox="0 0 24 24" fill="none" stroke="#4b4b4b" stroke-width="2" stroke-linecap="round">373 <path d="M6 3v8M9 3v8M6 7h3M14 3v8a4 4 0 004 4h1"/>374 </svg>375 Order Food376 </div>377 <div class="badge">+ 9 No-Halt stations</div>378 </div>379 </div>380 381 <!-- Jhansi -->382 <div class="row section-alt">383 <div class="left-code">384 <div class="code">VGLJ</div>385 <div class="left-time">23:00</div>386 </div>387 <div class="mid"><div class="dot"></div></div>388 <div class="right">389 <div class="station">Veerangana Laxmibai Jhansi<sup>08</sup></div>390 <div class="meta">391 <div>410 km | <a href="#">PF #2</a></div>392 <div style="color:#9f9f9f;">23:08</div>393 </div>394 <div class="status orange">Irregular Ontime</div>395 <div class="food">396 <svg viewBox="0 0 24 24" fill="none" stroke="#4b4b4b" stroke-width="2" stroke-linecap="round">397 <path d="M6 3v8M9 3v8M6 7h3M14 3v8a4 4 0 004 4h1"/>398 </svg>399 Order Food400 </div>401 <div class="badge">+ 16 No-Halt stations</div>402 </div>403 </div>404 405 <!-- Day 2 -->406 <div class="day-chip">Day 2</div>407 408 <!-- Bina -->409 <div class="row">410 <div class="left-code">411 <div class="code">BINA</div>412 <div class="left-time">01:20</div>413 </div>414 <div class="mid"><div class="dot"></div></div>415 <div class="right">416 <div class="station">Bina Jn<sup>09</sup></div>417 <div class="meta">418 <div>563 km | <a href="#">PF #2</a></div>419 <div style="color:#9f9f9f;">01:25</div>420 </div>421 <div class="status orange">Irregular Ontime</div>422 </div>423 </div>424 425 </div>426 </div>427 </div>428 429 <div class="home-indicator"></div>430</div>431</body>432</html>