GD-ML/AndroidCode

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 UI</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #ffffff;15    color: #2c2c2c;16  }17 18  /* Top app bar */19  .topbar { background: #0B5AAE; color: #fff; }20  .statusbar {21    height: 80px;22    padding: 0 36px;23    display: flex;24    align-items: center;25    justify-content: space-between;26    font-size: 34px;27    opacity: 0.95;28  }29  .status-icons { display: flex; gap: 24px; align-items: center; }30  .header {31    height: 180px;32    padding: 0 36px;33    display: grid;34    grid-template-columns: 1fr 380px;35    align-items: center;36    gap: 20px;37  }38  .title {39    display: flex;40    align-items: center;41    gap: 26px;42    font-size: 44px;43    font-weight: 600;44    white-space: nowrap;45  }46  .title svg { width: 42px; height: 42px; }47  .hdr-right {48    border-left: 2px solid rgba(255,255,255,0.4);49    padding-left: 28px;50    text-align: left;51    font-size: 34px;52    line-height: 1.25;53  }54 55  /* Tabs */56  .tabs {57    height: 110px;58    background: #ffffff;59    display: flex;60    align-items: flex-end;61    padding: 0 36px 0 36px;62    gap: 44px;63    border-bottom: 1px solid #e6e6e6;64  }65  .tab {66    color: #9E9E9E;67    font-size: 38px;68    padding: 28px 6px 22px;69    position: relative;70  }71  .tab.active {72    color: #2c2c2c;73    font-weight: 600;74  }75  .tab.active::after {76    content: "";77    position: absolute;78    left: 0; right: 0; bottom: 0;79    width: 220px;80    height: 6px;81    background: #4F86F7;82    border-radius: 4px;83    margin: 0 auto;84  }85 86  /* Content area */87  .content {88    position: absolute;89    left: 0; right: 0;90    top: 370px; /* statusbar(80)+header(180)+tabs(110) */91    bottom: 0;92    overflow: hidden;93    background: #f9fafb;94  }95  .scroll {96    height: 2030px;97    overflow: hidden;98    position: relative;99    background: #F6FCFF;100  }101 102  /* Region banners (semantic placeholders instead of images) */103  .region-strip {104    position: absolute;105    left: 300px;106    right: 60px;107    top: 120px;108    height: 100px;109    background: #DFFFF3;110    border: 1px solid #BDE8D8;111    border-radius: 18px;112    display: flex;113    align-items: center;114    padding: 0 26px;115    color: #207A61;116    font-size: 38px;117    gap: 16px;118  }119  .region-strip:nth-of-type(2) {120    top: 240px;121    left: 520px;122    right: 40px;123    background: #F2F8D9;124    border-color: #D8E6AE;125    color: #5E7A26;126  }127  .region-strip .img {128    width: 120px; height: 72px;129    background: #E0E0E0;130    border: 1px solid #BDBDBD;131    display: flex; justify-content: center; align-items: center;132    color: #757575; font-size: 26px; border-radius: 8px;133  }134 135  /* Timeline */136  .timeline {137    position: absolute;138    top: 0;139    left: 0; right: 0;140    padding: 90px 46px 40px;141  }142  .line {143    position: absolute;144    top: 0; bottom: 0;145    left: 290px;146    width: 6px;147    background: #D0D0D0;148    border-radius: 3px;149  }150  .station-row {151    position: relative;152    padding: 52px 24px 52px 0;153    min-height: 250px;154    display: grid;155    grid-template-columns: 230px 60px 1fr;156    align-items: start;157  }158  .station-row.alt-bg {159    background: #FEFDF3;160  }161  .station-row + .station-row { border-top: 1px solid rgba(0,0,0,0.04); }162 163  .left-col {164    text-align: right;165    padding-right: 26px;166  }167  .code {168    font-size: 42px;169    font-weight: 700;170    color: #2D79F6;171    letter-spacing: 1px;172  }173  .small-time {174    font-size: 34px;175    color: #9E9E9E;176    margin-top: 8px;177  }178 179  .dot {180    width: 26px; height: 26px;181    background: #9E9E9E;182    border-radius: 50%;183    margin-top: 12px;184    margin-left: 12px;185  }186 187  .right-col .name {188    font-size: 44px; font-weight: 700; color: #333;189  }190  .right-col .meta {191    margin-top: 8px;192    font-size: 34px; color: #7a7a7a;193  }194  .right-col .meta a { color: #4F86F7; text-decoration: none; }195  .arrive {196    float: right;197    color: #8c8c8c;198  }199  .status-red { color: #E04A4A; font-size: 32px; margin-top: 10px; }200  .status-orange { color: #E39A3A; font-size: 32px; margin-top: 10px; }201 202  .pill {203    display: inline-block;204    background: #EFEFEF;205    color: #6f6f6f;206    font-size: 30px;207    padding: 14px 22px;208    border-radius: 24px;209    margin-top: 16px;210  }211 212  .food {213    display: inline-flex;214    align-items: center;215    gap: 16px;216    background: #ffffff;217    border: 1px solid #E6E6E6;218    border-radius: 14px;219    box-shadow: 0 4px 8px rgba(0,0,0,0.08);220    padding: 16px 22px;221    margin-top: 22px;222    font-size: 34px;223    color: #4a4a4a;224  }225  .food svg { width: 40px; height: 40px; }226 227  .day-sep {228    display: inline-block;229    background: #9E9E9E;230    color: #fff;231    font-size: 32px;232    padding: 12px 22px;233    border-radius: 12px;234    margin: 14px 0 10px 120px;235  }236 237  /* Home indicator */238  .home-indicator {239    position: absolute;240    bottom: 18px;241    left: 50%;242    transform: translateX(-50%);243    width: 360px;244    height: 10px;245    background: #000;246    opacity: 0.8;247    border-radius: 6px;248  }249</style>250</head>251<body>252<div id="render-target">253 254  <div class="topbar">255    <div class="statusbar">256      <div>9:54</div>257      <div class="status-icons">258        <svg viewBox="0 0 24 24" width="38" height="38" fill="#fff" aria-hidden="true"><path d="M12 21c-1.6-3.2-4.1-5.7-7.3-7.3L3 12C7.5 9 12.5 9 21 12l-1.7 1.7C16.1 13.8 13.6 16.3 12 21z"/></svg>259        <svg viewBox="0 0 24 24" width="38" height="38" fill="#fff" aria-hidden="true"><path d="M16 6h2a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-2V6zm-10 0h8v12H6a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2z"/></svg>260      </div>261    </div>262    <div class="header">263      <div class="title">264        <svg viewBox="0 0 24 24" fill="#fff" aria-hidden="true">265          <path d="M15.5 3.5 7 12l8.5 8.5-1.4 1.4L4.2 12l9.9-9.9 1.4 1.4z"/>266        </svg>267        <div>12616 - Grand Trunk Express</div>268      </div>269      <div class="hdr-right">270        <div>36hr:20min</div>271        <div>Runs Daily</div>272      </div>273    </div>274  </div>275 276  <div class="tabs">277    <div class="tab">Train Status</div>278    <div class="tab">Map View</div>279    <div class="tab active">Time Table</div>280    <div class="tab">Coach Position</div>281    <div class="tab">Med...</div>282  </div>283 284  <div class="content">285    <div class="scroll">286      <!-- Region banners -->287      <div class="region-strip">288        <div class="img">[IMG: Rajasthan]</div>289        Rajasthan290      </div>291      <div class="region-strip">292        <div class="img">[IMG: Madhya Pradesh]</div>293        Madhya pradesh294      </div>295 296      <div class="timeline">297        <div class="line"></div>298 299        <!-- Morena -->300        <div class="station-row alt-bg" style="padding-top: 180px;">301          <div class="left-col">302            <div class="code">MRA</div>303            <div class="small-time">20:21</div>304          </div>305          <div class="dot"></div>306          <div class="right-col">307            <div class="name">Morena<sup>06</sup></div>308            <div class="meta">309              275 km | <a href="#">PF #1</a>310              <span class="arrive">20:23</span>311            </div>312            <div class="status-orange">Irregular Ontime</div>313            <div class="pill">+ 5 No-Halt stations</div>314          </div>315        </div>316 317        <!-- Gwalior -->318        <div class="station-row">319          <div class="left-col">320            <div class="code">GWL</div>321            <div class="small-time">21:00</div>322          </div>323          <div class="dot"></div>324          <div class="right-col">325            <div class="name">Gwalior Jn<sup>07</sup></div>326            <div class="meta">327              313 km | <a href="#">PF #1</a>328              <span class="arrive">21:02</span>329            </div>330            <div class="status-red">Mostly Delayed</div>331            <div class="food">332              <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M7 3h2v9H7V3zm4 0h2v9a2 2 0 0 1-2 2V3zM5 3h1v9H5a3 3 0 0 1 0-6V3zM16 5h3v8a3 3 0 0 1-3 3h-1V5z"/></svg>333              <span>Order Food</span>334            </div>335            <div class="pill">+ 9 No-Halt stations</div>336          </div>337        </div>338 339        <!-- Jhansi -->340        <div class="station-row alt-bg">341          <div class="left-col">342            <div class="code">VGLJ</div>343            <div class="small-time">23:00</div>344          </div>345          <div class="dot"></div>346          <div class="right-col">347            <div class="name">Veerangana Laxmibai Jhansi<sup>08</sup></div>348            <div class="meta">349              410 km | <a href="#">PF #2</a>350              <span class="arrive">23:08</span>351            </div>352            <div class="status-orange">Irregular Ontime</div>353            <div class="food">354              <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M7 3h2v9H7V3zm4 0h2v9a2 2 0 0 1-2 2V3zM5 3h1v9H5a3 3 0 0 1 0-6V3zM16 5h3v8a3 3 0 0 1-3 3h-1V5z"/></svg>355              <span>Order Food</span>356            </div>357            <div class="pill">+ 16 No-Halt stations</div>358          </div>359        </div>360 361        <!-- Day 2 separator -->362        <div class="station-row" style="min-height: 120px; padding-top: 10px; padding-bottom: 10px;">363          <div class="left-col">364            <span class="day-sep">Day 2</span>365          </div>366          <div class="dot" style="margin-top: 36px;"></div>367          <div></div>368        </div>369 370        <!-- Bina Jn -->371        <div class="station-row alt-bg">372          <div class="left-col">373            <div class="code">BINA</div>374            <div class="small-time">01:20</div>375          </div>376          <div class="dot"></div>377          <div class="right-col">378            <div class="name">Bina Jn<sup>09</sup></div>379            <div class="meta">380              563 km | <a href="#">PF #2</a>381              <span class="arrive">01:25</span>382            </div>383            <div class="status-orange">Irregular Ontime</div>384          </div>385        </div>386 387      </div>388    </div>389  </div>390 391  <div class="home-indicator"></div>392</div>393</body>394</html>