GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<title>Train List UI</title>5<style>6  body { margin:0; padding:0; background: transparent; font-family: Arial, Helvetica, sans-serif; }7  #render-target {8    position: relative;9    width: 1080px;10    height: 2400px;11    overflow: hidden;12    background: #f6f7fb;13    border-radius: 24px;14    box-shadow: 0 8px 24px rgba(0,0,0,0.15);15  }16 17  /* Top Bar */18  .topbar {19    position: absolute;20    top:0; left:0; right:0;21    height: 210px;22    background: #1e4ea6;23    color: #fff;24  }25  .status-row {26    height: 70px;27    display: flex;28    align-items: center;29    padding: 0 32px;30    font-size: 30px;31    opacity: 0.95;32  }33  .status-left { flex: 1; }34  .status-right { display: flex; gap: 28px; align-items: center; }35  .icon-small svg { width: 36px; height: 36px; fill: #fff; }36 37  .title-row {38    height: 140px;39    display: flex;40    align-items: center;41    padding: 0 32px;42    gap: 24px;43  }44  .back-btn {45    width: 64px; height: 64px; border-radius: 32px;46    display:flex; align-items:center; justify-content:center;47  }48  .back-btn svg { width: 42px; height: 42px; fill:#fff; }49  .title-text {50    font-size: 40px; font-weight: 700;51  }52  .edit-icon { margin-left: 12px; }53  .edit-icon svg { width: 36px; height: 36px; fill:#cfe0ff; }54  .whatsapp {55    margin-left: auto;56    width: 76px; height: 76px;57    border-radius: 38px;58    background: rgba(255,255,255,0.15);59    display:flex; align-items:center; justify-content:center;60  }61  .whatsapp svg { width: 44px; height: 44px; fill:#d9f9aa; }62 63  /* Date Tabs */64  .date-tabs {65    position: absolute;66    top: 210px;67    left: 0; right:0;68    height: 140px;69    background: #ffffff;70    display: flex;71    align-items: center;72    padding: 0 24px;73    gap: 18px;74    border-bottom: 1px solid #e3e7ef;75  }76  .month-strip {77    writing-mode: vertical-rl;78    transform: rotate(180deg);79    font-size: 26px;80    color: #8088a3;81    margin-right: 10px;82  }83  .tab {84    background:#edf2ff;85    color:#1e4ea6;86    border-radius: 16px;87    width: 140px;88    height: 110px;89    display:flex; flex-direction:column; align-items:center; justify-content:center;90    font-weight:700;91  }92  .tab.active { background:#2e62cf; color:#fff; }93  .tab .day { font-size: 34px; }94  .tab .date { font-size: 30px; opacity:0.9; }95 96  /* Filter/Search Row */97  .filter-row {98    position: absolute;99    top: 350px;100    left:0; right:0;101    padding: 24px;102    display: grid;103    grid-template-columns: 1fr auto auto auto auto;104    gap: 20px;105    align-items: center;106  }107  .search-box {108    background: #fff;109    border: 1px solid #d6dbe7;110    border-radius: 18px;111    height: 92px;112    display:flex; align-items:center; padding: 0 20px; gap: 16px;113    font-size: 32px; color:#5a6783;114  }115  .search-box .field { color:#9aa3b8; }116  .toggle {117    display:flex; align-items:center; gap: 12px; color:#5a6783; font-size: 28px;118  }119  .switch {120    width: 110px; height: 56px; border-radius: 30px; background:#e8edf7; position:relative;121    box-shadow: inset 0 0 0 1px #cfd7ea;122  }123  .switch::after {124    content:""; position:absolute; top:6px; left:8px; width:44px; height:44px; background:#fff; border-radius:22px; box-shadow:0 1px 3px rgba(0,0,0,0.2);125  }126  .action {127    display:flex; align-items:center; gap: 12px; color:#3f4f73; font-size: 28px;128  }129  .action svg { width: 36px; height: 36px; fill:#3f4f73; }130  .nearby-chip {131    display:flex; align-items:center; gap:10px;132    background:#f7f1cf; color:#7a6a16; border-radius:26px; padding: 12px 18px; font-size:26px;133  }134  .nearby-chip svg { width:26px; height:26px; fill:#7a6a16; }135 136  /* Train Cards */137  .content {138    position: absolute;139    top: 470px;140    left:0; right:0;141    padding: 24px;142    overflow: hidden;143  }144  .top-choice-tag {145    display:inline-block;146    background:#2f61ce;147    color:#fff;148    font-size:28px;149    font-weight:700;150    padding: 12px 18px;151    border-radius: 12px;152    margin-bottom: 12px;153  }154  .train-card {155    background:#fff;156    border:1px solid #e3e7ef;157    border-radius: 20px;158    padding: 24px;159    margin-bottom: 36px;160    box-shadow: 0 2px 6px rgba(0,0,0,0.04);161  }162  .train-head {163    display:grid;164    grid-template-columns: 1fr 320px 160px;165    align-items:center;166    gap: 10px;167    padding-bottom: 12px;168  }169  .train-title {170    font-size: 40px; font-weight: 800; color:#182545;171  }172  .sub { font-size: 34px; font-weight: 600; color:#36435f; }173  .timing { text-align:right; font-size: 40px; font-weight: 800; color:#000; }174  .stations { text-align:right; font-size: 34px; color:#000; font-weight:700; }175  .duration {176    font-size: 28px; color:#556181; margin-top: 8px; text-align:right; font-weight:600;177  }178  .days-row {179    display:flex; align-items:center; gap: 10px; margin-top: 12px;180  }181  .dot-day {182    width: 46px; height: 46px; border-radius: 23px; background:#e9edf7; color:#3a4a70;183    display:flex; align-items:center; justify-content:center; font-size:24px; font-weight:700;184  }185  .link { color:#2e62cf; font-weight:700; font-size:28px; margin-left: 12px; }186  .fare-row {187    display:grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 24px;188  }189  .fare-box {190    border:1px solid #e3e7ef; border-radius: 18px; overflow:hidden;191  }192  .fare-head {193    height: 90px; display:flex; align-items:center; padding:0 20px; gap:10px;194    font-size: 34px; font-weight:700; color:#182545; background:#f7f9ff;195  }196  .fare-body {197    padding: 16px 20px; height: 140px;198  }199  .wl { font-size: 34px; color:#1e8540; font-weight:800; }200  .chance { font-size: 26px; color:#4d855e; }201  .book-btn {202    height: 86px; display:flex; align-items:center; justify-content:center;203    background:#e8f0ff; color:#2e62cf; font-size: 34px; font-weight:700;204    border-top:1px solid #dde6f7;205  }206  .view-link { color:#2e62cf; font-weight:700; font-size:30px; margin-top:18px; }207 208  /* Second Train specific color variations */209  .wl.medium { color:#d1752f; }210 211</style>212</head>213<body>214<div id="render-target">215 216  <div class="topbar">217    <div class="status-row">218      <div class="status-left">11:25</div>219      <div class="status-right">220        <div class="icon-small">221          <svg viewBox="0 0 24 24"><path d="M10 20h4v2h-4zM4 8h16v2H4zm2 4h12v2H6zm3-10h6v2H9z"/></svg>222        </div>223        <div class="icon-small">224          <svg viewBox="0 0 24 24"><path d="M3 10l9-7 9 7-2 2-7-5-7 5-2-2zm2 4h14v8H5v-8z"/></svg>225        </div>226        <div class="icon-small">227          <svg viewBox="0 0 24 24"><path d="M2 18h20v2H2zm4-6h12v2H6zm3-6h6v2H9z"/></svg>228        </div>229        <div class="icon-small">230          <svg viewBox="0 0 24 24"><path d="M3 5h18v14H3zM5 7v10h14V7H5z"/></svg>231        </div>232      </div>233    </div>234    <div class="title-row">235      <div class="back-btn">236        <svg viewBox="0 0 24 24"><path d="M15 18l-6-6 6-6v12z"/></svg>237      </div>238      <div class="title-text">NDLS - GHY | 6 Trains | General</div>239      <div class="edit-icon">240        <svg viewBox="0 0 24 24"><path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04a1 1 0 0 0 0-1.41l-2.34-2.34a1 1 0 0 0-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"/></svg>241      </div>242      <div class="whatsapp">243        <svg viewBox="0 0 24 24"><path d="M12 2a10 10 0 0 0-8.94 14.56L2 22l5.58-1.98A10 10 0 1 0 12 2zm5.64 14.22c-.23.66-1.35 1.24-1.84 1.27-.49.03-1.09.04-1.75-.11-3.08-.71-5.4-2.69-6.8-5.59-.54-1.07-.59-1.97-.39-2.64.2-.66.94-1.48 1.35-1.52.35-.03.77.03.98.31.24.34.83 1.11.9 1.3.07.19.11.41-.02.63-.13.22-.2.35-.4.56-.2.21-.42.46-.6.62-.2.19-.41.39-.18.82.23.43 1.02 1.67 2.2 2.71 1.52 1.33 2.8 1.74 3.26 1.93.45.19.71.17.97-.1.26-.27 1.13-1.29 1.43-1.74.3-.45.62-.38 1.02-.22.4.16 2.51 1.18 2.56 1.4z"/></svg>244      </div>245    </div>246  </div>247 248  <div class="date-tabs">249    <div class="month-strip">JUL</div>250    <div class="tab active">251      <div class="day">Fri</div>252      <div class="date">30</div>253    </div>254    <div class="tab">255      <div class="day">Sat</div>256      <div class="date">1</div>257    </div>258    <div class="tab">259      <div class="day">Sun</div>260      <div class="date">2</div>261    </div>262    <div class="tab">263      <div class="day">Mon</div>264      <div class="date">3</div>265    </div>266    <div class="tab">267      <div class="day">Tue</div>268      <div class="date">4</div>269    </div>270    <div class="tab">271      <div class="day">Wed</div>272      <div class="date">5</div>273    </div>274  </div>275 276  <div class="filter-row">277    <div class="search-box">278      <svg width="40" height="40" viewBox="0 0 24 24"><path fill="#5a6783" d="M15.5 14h-.79l-.28-.27a6.5 6.5 0 1 0-.71.71l.27.28v.79l5 5 1.5-1.5-5-5zM10 15a5 5 0 1 1 0-10 5 5 0 0 1 0 10z"/></svg>279      <div class="field">Search</div>280    </div>281    <div class="toggle">282      <div class="switch"></div>283      <div>AC Only</div>284    </div>285    <div class="toggle">286      <div class="switch"></div>287      <div>AVBL Only</div>288    </div>289    <div class="action">290      <svg viewBox="0 0 24 24"><path d="M4 18h4V6H4v12zm6 0h4V10h-4v8zm6 0h4V14h-4v4z"/></svg>291      <div>Sort By</div>292    </div>293    <div class="action">294      <svg viewBox="0 0 24 24"><path d="M3 5h18l-7 8v6l-4-2v-4z"/></svg>295      <div>Filter By</div>296    </div>297    <div class="nearby-chip" style="grid-column: 1 / -1; width: fit-content; margin-top: 12px;">298      <svg viewBox="0 0 24 24"><path d="M12 2C8.7 2 6 4.7 6 8c0 5.2 6 12 6 12s6-6.8 6-12c0-3.3-2.7-6-6-6zm0 8.5a2.5 2.5 0 1 1 0-5 2.5 2.5 0 0 1 0 5z"/></svg>299      Nearby300    </div>301  </div>302 303  <div class="content">304    <div class="top-choice-tag">TOP CHOICE</div>305    <div class="train-card">306      <div class="train-head">307        <div>308          <div class="train-title">15657  OLD DELHI -</div>309          <div class="sub">KAMAKHYA Brahmaputra Express</div>310        </div>311        <div class="timing">23:40<br><span style="font-size:32px; color:#58627f;">13:20</span></div>312        <div class="stations">DLI<br><span style="font-size:32px;">KYQ</span></div>313      </div>314      <div class="duration">37h 40m</div>315 316      <div class="days-row">317        <div class="dot-day">S</div><div class="dot-day">M</div><div class="dot-day">T</div>318        <div class="dot-day">W</div><div class="dot-day">T</div><div class="dot-day">F</div><div class="dot-day">S</div>319        <div class="link">View Time Table ❯</div>320      </div>321 322      <div class="fare-row">323        <div class="fare-box">324          <div class="fare-head">SL | ₹765</div>325          <div class="fare-body">326            <div class="wl">50 WAITLIST</div>327            <div class="chance">High Chance</div>328          </div>329          <div class="book-btn">Book Now</div>330        </div>331        <div class="fare-box">332          <div class="fare-head">3A | ₹2025</div>333          <div class="fare-body">334            <div class="wl">29 WAITLIST</div>335            <div class="chance">High Chance</div>336          </div>337          <div class="book-btn">Book Now</div>338        </div>339        <div class="fare-box">340          <div class="fare-head">2A | ₹2950</div>341          <div class="fare-body">342            <div class="wl">5 WAITLIST</div>343            <div class="chance">High Chance</div>344          </div>345          <div class="book-btn">Book Now</div>346        </div>347      </div>348 349      <div class="view-link">View Future Availability ❯</div>350    </div>351 352    <div class="top-choice-tag">TOP CHOICE</div>353    <div class="train-card">354      <div class="train-head">355        <div>356          <div class="train-title">20504  NEW DELHI -</div>357          <div class="sub">DIBRUGARH Rajdhani Express</div>358        </div>359        <div class="timing">11:25<br><span style="font-size:32px; color:#58627f;">18:25</span></div>360        <div class="stations">NDLS<br><span style="font-size:32px;">GHY</span></div>361      </div>362      <div class="duration">31h 0m</div>363 364      <div class="days-row">365        <div class="dot-day">S</div><div class="dot-day">M</div><div class="dot-day">T</div>366        <div class="dot-day">W</div><div class="dot-day">T</div><div class="dot-day">F</div><div class="dot-day">S</div>367        <div class="link">View Time Table ❯</div>368      </div>369 370      <div class="fare-row">371        <div class="fare-box">372          <div class="fare-head">3A | ₹4020</div>373          <div class="fare-body">374            <div class="wl medium">40 WAITLIST</div>375            <div class="chance" style="color:#b56a2b;">Medium Chance</div>376          </div>377          <div class="book-btn">Book Now</div>378        </div>379        <div class="fare-box">380          <div class="fare-head">2A | ₹5455</div>381          <div class="fare-body">382            <div class="wl">15 WAITLIST</div>383            <div class="chance">High Chance</div>384          </div>385          <div class="book-btn">Book Now</div>386        </div>387        <div class="fare-box">388          <div class="fare-head">1A | ₹6870</div>389          <div class="fare-body">390            <div class="wl">4 WAITLIST</div>391            <div class="chance">High Chance</div>392          </div>393          <div class="book-btn">Book Now</div>394        </div>395      </div>396 397      <div class="view-link">View Future Availability ❯</div>398    </div>399 400    <div class="top-choice-tag">TOP CHOICE</div>401    <div class="train-card">402      <div class="train-head">403        <div>404          <div class="train-title">12424  NEW DELHI -</div>405          <div class="sub">DIBRUGARH Rajdhani Express</div>406        </div>407        <div class="timing">16:20<br><span style="font-size:32px; color:#58627f;">19:25</span></div>408        <div class="stations">NDLS<br><span style="font-size:32px;">GHY</span></div>409      </div>410      <div class="duration">27h 5m</div>411 412      <div class="days-row">413        <div class="dot-day">S</div><div class="dot-day">M</div><div class="dot-day">T</div>414        <div class="dot-day">W</div><div class="dot-day">T</div><div class="dot-day">F</div><div class="dot-day">S</div>415        <div class="link">View Time Table ❯</div>416      </div>417 418      <div class="fare-row">419        <div class="fare-box">420          <div class="fare-head">3A | ₹3735</div>421          <div class="fare-body">422            <div class="wl">—</div>423            <div class="chance">Availability Info</div>424          </div>425          <div class="book-btn">Book Now</div>426        </div>427        <div class="fare-box">428          <div class="fare-head">2A | ₹5140</div>429          <div class="fare-body">430            <div class="wl">—</div>431            <div class="chance">Availability Info</div>432          </div>433          <div class="book-btn">Book Now</div>434        </div>435        <div class="fare-box">436          <div class="fare-head">1A | ₹6445</div>437          <div class="fare-body">438            <div class="wl">—</div>439            <div class="chance">Availability Info</div>440          </div>441          <div class="book-btn">Book Now</div>442        </div>443      </div>444    </div>445 446  </div>447 448</div>449</body>450</html>