GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Train Search Listing</title>6<meta name="viewport" content="width=1080, initial-scale=1">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: #1b1f24;16 }17 18 /* Status bar */19 .status-bar {20 height: 120px;21 background: #0a56a6;22 color: #e9f3ff;23 padding: 24px 36px 0 36px;24 font-weight: 600;25 font-size: 44px;26 display: flex;27 align-items: center;28 justify-content: space-between;29 }30 .status-icons {31 display: flex;32 gap: 22px;33 align-items: center;34 }35 .status-icons .wifi, .status-icons .battery {36 width: 36px; height: 36px; border-radius: 6px; border: 2px solid #e9f3ff;37 }38 39 /* App bar */40 .app-bar {41 background: #0a3d6f;42 height: 170px;43 padding: 24px 30px;44 display: flex;45 align-items: center;46 gap: 18px;47 color: #fff;48 }49 .search-chip {50 background: rgba(255,255,255,0.15);51 border-radius: 18px;52 padding: 18px 22px;53 display: inline-flex;54 align-items: center;55 gap: 16px;56 color: #dbe9ff;57 font-size: 38px;58 letter-spacing: 0.2px;59 }60 .chip-icon {61 width: 40px; height: 40px; border-radius: 6px; border: 2px solid #dbe9ff;62 display: inline-block;63 }64 .icon-btn {65 margin-left: auto;66 width: 60px; height: 60px; display: flex; align-items: center; justify-content: center;67 }68 .icon-btn svg { width: 52px; height: 52px; fill: #dbe9ff; }69 70 /* Top cards section */71 .top-cards {72 background: #0a3d6f;73 padding: 22px 24px 26px 24px;74 display: flex;75 gap: 22px;76 }77 .card-pill {78 flex: 1;79 border-radius: 22px;80 padding: 26px;81 background: #f8fbff;82 box-shadow: 0 4px 8px rgba(0,0,0,0.12);83 color: #0e2a47;84 }85 .card-pill.dark {86 background: #173b63;87 color: #e4f0ff;88 }89 .pill-title {90 font-size: 42px; font-weight: 700; line-height: 1.1;91 }92 .pill-sub {93 margin-top: 10px; font-size: 30px; color: #3b7d3e; background: #e9f6e7; padding: 6px 12px; border-radius: 12px; display: inline-block;94 }95 .pill-sub.dark { color: #cfe2ff; background: rgba(255,255,255,0.12); }96 97 /* Date strip */98 .date-strip {99 height: 132px;100 background: #ffffff;101 border-bottom: 1px solid #e6e6e6;102 display: flex;103 align-items: center;104 position: relative;105 }106 .month-tab {107 position: absolute; left: 0; top: -8px;108 width: 66px; height: 150px; background: #f4f7fb; border-top-right-radius: 10px; border-bottom-right-radius: 10px;109 border: 1px solid #d6dce6; border-left: none;110 display: flex; align-items: center; justify-content: center; color: #2d5fa8; writing-mode: vertical-rl; text-orientation: mixed; font-weight: 700;111 }112 .day-list {113 margin-left: 86px; width: calc(100% - 86px); display: flex; gap: 12px; padding: 0 18px;114 }115 .day {116 flex: 1; min-width: 130px; text-align: center; padding: 18px 0; border-bottom: 6px solid transparent; font-size: 32px; color: #606f7d;117 }118 .day.active {119 color: #0b5bd3; background: #eaf3ff; border-bottom-color: #0b5bd3; border-top-left-radius: 10px; border-top-right-radius: 10px;120 box-shadow: inset 0 -2px 0 rgba(11,91,211,0.35);121 }122 .day small { display: block; margin-top: 4px; font-size: 26px; color: #2c7d3a; background: #e9f6e7; border-radius: 10px; padding: 2px 8px; width: fit-content; margin-left: auto; margin-right: auto; }123 124 /* Filter row */125 .filters {126 height: 156px;127 background: #ffffff;128 display: flex;129 align-items: center;130 justify-content: space-around;131 border-bottom: 1px solid #e5e5e5;132 box-shadow: 0 4px 8px rgba(0,0,0,0.04);133 }134 .filter-item { text-align: center; font-size: 28px; color: #48525a; }135 .filter-item svg { width: 56px; height: 56px; fill: #6b7680; display: block; margin: 0 auto 8px; }136 .toggle {137 width: 110px; height: 54px; background: #e1e6ec; border-radius: 28px; margin: 0 auto 8px; position: relative;138 }139 .toggle::after {140 content: ""; width: 48px; height: 48px; background: #3e3f42; border-radius: 50%; position: absolute; top: 3px; left: 58px;141 }142 .toggle.on { background: #d8e7ff; }143 .toggle.on::after { left: 4px; background: #0b5bd3; }144 145 /* List area */146 .list-area { padding: 20px 26px 140px 26px; background: #f6f7f9; height: calc(2400px - 120px - 170px - 160px - 156px); overflow: hidden; }147 .train-card {148 background: #ffffff;149 border-radius: 22px;150 padding: 28px;151 margin-bottom: 28px;152 box-shadow: 0 2px 8px rgba(0,0,0,0.08);153 }154 .tag {155 display: inline-block; font-size: 26px; color: #3e63d4; border: 2px solid #d8e1ff; background: #f2f5ff; border-radius: 18px; padding: 6px 14px; margin-right: 10px;156 }157 .tag.nearby { color: #8a6f00; border-color: #ffe9a6; background: #fff7d6; }158 .card-top {159 display: flex; justify-content: space-between; align-items: center; margin-top: 6px;160 }161 .title {162 font-size: 46px; font-weight: 800; color: #1c2430;163 }164 .number { color: #8c949e; font-weight: 600; letter-spacing: 2px; margin-right: 10px; }165 .link-blue { color: #2a6ce6; font-weight: 700; font-size: 32px; }166 .timeline {167 margin: 18px 0 16px 0; display: flex; align-items: center; gap: 24px; color: #1c2430;168 font-size: 36px; font-weight: 700;169 }170 .timeline .sub {171 font-size: 28px; color: #68727d; font-weight: 600; margin-top: 6px;172 }173 .line {174 flex: 1; height: 4px; background: #e2e6ea; position: relative; margin: 0 18px;175 }176 .line::before, .line::after {177 content: ""; position: absolute; top: -7px; width: 14px; height: 14px; border-radius: 50%; background: #c9d1d9;178 }179 .line::before { left: 0; }180 .line::after { right: 0; }181 .meta {182 display: flex; justify-content: space-between; align-items: baseline; color: #6b7680; font-size: 28px;183 margin-top: 6px;184 }185 186 .fare-row {187 margin-top: 18px;188 display: grid;189 grid-template-columns: repeat(3, 1fr);190 gap: 18px;191 }192 .fare {193 border: 2px solid #e1e5ea; border-radius: 18px; overflow: hidden; background: #fff;194 }195 .fare .header {196 padding: 14px 18px; display: flex; justify-content: space-between; align-items: center; font-weight: 700; color: #2b333b; font-size: 30px;197 background: #fafbfc;198 }199 .badge-dark {200 font-size: 22px; background: #3e4145; color: #fff; padding: 6px 12px; border-radius: 10px;201 }202 .fare .body {203 padding: 14px 18px;204 }205 .avail-green { color: #2f9d45; font-weight: 800; font-size: 40px; }206 .sub-green { color: #2f9d45; font-size: 26px; }207 .waitlist { color: #2f9d45; }208 .refresh { color: #2a6ce6; font-size: 26px; margin-left: 10px; }209 .cta {210 background: #e2efff; color: #1363e6; text-align: center; font-weight: 700; padding: 18px; font-size: 32px; border-top: 2px solid #e1e5ea;211 }212 213 .future-link { font-size: 34px; color: #2a6ce6; font-weight: 700; margin: 18px 0 6px 6px; }214 215 /* Bottom gesture bar (for visual parity) */216 .gesture {217 position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%); width: 360px; height: 12px; background: #0b0b0c; border-radius: 12px; opacity: 0.5;218 }219</style>220</head>221<body>222<div id="render-target">223 <!-- Status Bar -->224 <div class="status-bar">225 <div>9:51</div>226 <div class="status-icons">227 <div class="wifi"></div>228 <div class="battery"></div>229 </div>230 </div>231 232 <!-- App Bar -->233 <div class="app-bar">234 <div class="search-chip">235 <span class="chip-icon"></span>236 <span>NDLS — MTJ | General</span>237 <svg viewBox="0 0 24 24" width="34" height="34" style="margin-left:10px; fill:#dbe9ff;">238 <path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41L18.37 3.29a.9959.9959 0 0 0-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"/>239 </svg>240 </div>241 <div class="icon-btn">242 <svg viewBox="0 0 24 24"><path d="M15.5 14h-.79l-.28-.27A6.471 6.471 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 5 1.5-1.5-5-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/></svg>243 </div>244 </div>245 246 <!-- Top cards -->247 <div class="top-cards">248 <div class="card-pill">249 <div class="pill-title">46 Trains</div>250 <div class="pill-sub">Get Free Cancellation</div>251 </div>252 <div class="card-pill dark">253 <div class="pill-title">7 AC Buses</div>254 <div class="pill-sub dark">Sleeper Cabin ₹993</div>255 </div>256 </div>257 258 <!-- Date strip -->259 <div class="date-strip">260 <div class="month-tab">NOV</div>261 <div class="day-list">262 <div class="day active">Fri, 3</div>263 <div class="day">Sat, 4<small>Tatkal open</small></div>264 <div class="day">Sun, 5</div>265 <div class="day">Mon, 6</div>266 <div class="day">Tue, 7</div>267 <div class="day">Wed, 8</div>268 </div>269 </div>270 271 <!-- Filter row -->272 <div class="filters">273 <div class="filter-item">274 <svg viewBox="0 0 24 24"><path d="M3 3h18v2H3V3zm2 4h14v12l-7-3-7 3V7z"/></svg>275 Quota276 </div>277 <div class="filter-item">278 <div class="toggle on"></div>279 AC Only280 </div>281 <div class="filter-item">282 <div class="toggle"></div>283 Available284 </div>285 <div class="filter-item">286 <svg viewBox="0 0 24 24"><path d="M10 18h4v-2h-4v2zM3 6h18v2H3V6zm3 6h12v-2H6v2z"/></svg>287 Filter By288 </div>289 <div class="filter-item">290 <svg viewBox="0 0 24 24"><path d="M3 18h6v-2H3v2zm0-5h12v-2H3v2zm0-7v2h18V6H3z"/></svg>291 Sort By292 </div>293 </div>294 295 <!-- List area -->296 <div class="list-area">297 <!-- Card 1 -->298 <div class="train-card">299 <div>300 <span class="tag">Popular</span>301 </div>302 <div class="card-top">303 <div class="title"><span class="number">12616</span>Grand Trunk Express ›</div>304 <div class="link-blue">Time Table</div>305 </div>306 <div class="timeline">307 <div>308 <div>NDLS <strong>16:10</strong></div>309 <div class="sub">New Delhi</div>310 </div>311 <div class="line"></div>312 <div style="text-align:center; color:#6b7680; font-size:32px;">313 <svg viewBox="0 0 24 24" width="30" height="30" style="vertical-align:middle; fill:#6b7680;"><path d="M12 1a11 11 0 1 0 11 11A11.012 11.012 0 0 0 12 1zm1 11h5v-2h-4V6h-2v6z"/></svg>314 01h 30m315 <div class="sub">2 halts | 141 kms</div>316 </div>317 <div class="line"></div>318 <div style="text-align:right;">319 <div><strong>17:40</strong> MTJ</div>320 <div class="sub">Mathura Jn</div>321 </div>322 </div>323 324 <div class="fare-row">325 <div class="fare">326 <div class="header">327 <span>SL | ₹175</span>328 <span style="display:flex;align-items:center;color:#2a6ce6;font-weight:600;">Refresh</span>329 </div>330 <div class="body">331 <div class="avail-green">71 WAITLIST</div>332 <div class="sub-green">High Chance</div>333 </div>334 <div class="cta">Book Now</div>335 </div>336 337 <div class="fare">338 <div class="header">339 <span>SL | ₹425</span>340 <span class="badge-dark">TATKAL</span>341 </div>342 <div class="body">343 <div class="avail-green">22 AVAILABLE <span class="refresh">Refresh</span></div>344 </div>345 <div class="cta">Book Now</div>346 </div>347 348 <div class="fare">349 <div class="header">350 <span>3A | ₹555</span>351 </div>352 <div class="body">353 <div class="avail-green">100 AVAILABLE <span class="refresh">Refresh</span></div>354 </div>355 <div class="cta">Book Now</div>356 </div>357 </div>358 359 <div class="future-link">View Future Availability</div>360 </div>361 362 <!-- Card 2 -->363 <div class="train-card">364 <div>365 <span class="tag">Popular</span>366 <span class="tag nearby">Nearby</span>367 </div>368 <div class="card-top">369 <div class="title"><span class="number">12060</span>Jan Shatabdi Express ›</div>370 <div class="link-blue">Time Table</div>371 </div>372 <div class="timeline">373 <div>374 <div>NZM <strong>12:45</strong></div>375 <div class="sub">Delhi Hazrat Nizam...</div>376 </div>377 <div class="line"></div>378 <div style="text-align:center; color:#6b7680; font-size:32px;">379 <svg viewBox="0 0 24 24" width="30" height="30" style="vertical-align:middle; fill:#6b7680;"><path d="M12 1a11 11 0 1 0 11 11A11.012 11.012 0 0 0 12 1zm1 11h5v-2h-4V6h-2v6z"/></svg>380 01h 35m381 <div class="sub">3 halts | 134 kms</div>382 </div>383 <div class="line"></div>384 <div style="text-align:right;">385 <div><strong>14:20</strong> MTJ</div>386 <div class="sub">Mathura Jn</div>387 </div>388 </div>389 390 <div class="fare-row">391 <div class="fare">392 <div class="header">393 <span>2S | ₹110</span>394 <span style="display:flex;align-items:center;color:#2a6ce6;font-weight:600;">Refresh</span>395 </div>396 <div class="body">397 <div class="avail-green">366 AVAILABLE</div>398 </div>399 <div class="cta">Book Now</div>400 </div>401 402 <div class="fare">403 <div class="header">404 <span>2S | ₹120</span>405 <span class="badge-dark">TATKAL</span>406 </div>407 <div class="body">408 <div class="avail-green">96 AVAILABLE <span class="refresh">Refresh</span></div>409 </div>410 <div class="cta">Book Now</div>411 </div>412 413 <div class="fare">414 <div class="header">415 <span>CC | ₹335</span>416 </div>417 <div class="body">418 <div class="avail-green">28 AVAILABLE <span class="refresh">Refresh</span></div>419 </div>420 <div class="cta">Book Now</div>421 </div>422 </div>423 424 <div class="future-link">View Future Availability</div>425 </div>426 427 <!-- Card 3 (partial) -->428 <div class="train-card">429 <div>430 <span class="tag">Popular</span>431 </div>432 <div class="card-top">433 <div class="title"><span class="number">14212</span>Intercity Express ›</div>434 <div class="link-blue">Time Table</div>435 </div>436 <div class="timeline">437 <div>438 <div>NDLS <strong>17:40</strong></div>439 <div class="sub">New Delhi</div>440 </div>441 <div class="line"></div>442 <div style="text-align:center; color:#6b7680; font-size:32px;">443 <svg viewBox="0 0 24 24" width="30" height="30" style="vertical-align:middle; fill:#6b7680;"><path d="M12 1a11 11 0 1 0 11 11A11.012 11.012 0 0 0 12 1zm1 11h5v-2h-4V6h-2v6z"/></svg>444 02h 33m445 <div class="sub">15 halts | 141 kms</div>446 </div>447 <div class="line"></div>448 <div style="text-align:right;">449 <div><strong>20:13</strong> MTJ</div>450 <div class="sub">Mathura Jn</div>451 </div>452 </div>453 </div>454 </div>455 456 <!-- bottom gesture bar -->457 <div class="gesture"></div>458</div>459</body>460</html>