GD-ML/AndroidCode
13.4k
1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Train Listing UI</title>5<meta name="viewport" content="width=1080, initial-scale=1.0">6<style>7 body { margin:0; padding:0; background:transparent; }8 #render-target {9 position: relative;10 width: 1080px;11 height: 2400px;12 overflow: hidden;13 background: #f3f6fb;14 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;15 color: #0b203b;16 }17 18 /* Top bars */19 .status-bar {20 height: 84px;21 background: #0f3d89;22 color: #ffffff;23 display: flex;24 align-items: center;25 padding: 0 30px;26 font-size: 34px;27 letter-spacing: 0.3px;28 }29 .status-bar .right {30 margin-left: auto;31 display: flex;32 align-items: center;33 gap: 26px;34 opacity: 0.9;35 }36 .icon-dot { width: 26px; height: 26px; border-radius: 50%; background:#fff; opacity:0.85; }37 .wifi {38 width: 42px; height: 42px;39 }40 41 .app-bar {42 height: 140px;43 background: #1a58a9;44 display: flex;45 align-items: center;46 padding: 0 30px;47 color: #eaf3ff;48 box-shadow: 0 2px 8px rgba(0,0,0,0.15);49 }50 .route-chip {51 background: rgba(255,255,255,0.12);52 border: 1px solid rgba(255,255,255,0.3);53 border-radius: 16px;54 padding: 20px 26px;55 font-size: 40px;56 display: inline-flex;57 align-items: center;58 gap: 14px;59 }60 .edit-icon, .wa-icon {61 width: 48px; height: 48px;62 }63 .app-bar .spacer { flex: 1; }64 .wa-bubble {65 margin-left: 20px;66 width: 84px; height: 84px;67 border-radius: 50%;68 background: #25d366;69 display: flex; align-items: center; justify-content: center;70 box-shadow: 0 6px 14px rgba(0,0,0,0.25);71 }72 73 /* Date tabs */74 .date-tabs {75 height: 120px;76 background: #ffffff;77 display: flex;78 align-items: center;79 padding: 0 24px;80 gap: 16px;81 border-bottom: 1px solid #e0e6ef;82 }83 .date-pill {84 height: 96px;85 min-width: 130px;86 padding: 0 22px;87 display: flex; align-items: center; justify-content: center;88 border-radius: 14px;89 border: 1px solid #e4e9f3;90 background: #f9fbff;91 color: #294a77;92 font-size: 36px;93 }94 .date-pill.active {95 background:#2d69c7;96 color:#fff;97 border-color:#2d69c7;98 }99 100 /* Search and filters row */101 .tools-row {102 height: 126px;103 background: #ffffff;104 display: flex;105 align-items: center;106 gap: 24px;107 padding: 0 24px 24px 24px;108 border-bottom: 1px solid #e3e9f4;109 }110 .search-box {111 flex: 1;112 height: 86px;113 background: #f1f5fb;114 border: 1px solid #d9e2ef;115 border-radius: 16px;116 display: flex; align-items: center;117 padding: 0 22px;118 gap: 18px;119 color: #6b819d;120 font-size: 36px;121 }122 .search-box svg { width: 42px; height: 42px; }123 .toggle {124 display: flex; align-items: center; gap: 16px; color: #647a97; font-size: 32px;125 }126 .switch {127 width: 132px; height: 56px; border-radius: 28px;128 background:#e9eef7; position: relative;129 box-shadow: inset 0 0 2px rgba(0,0,0,0.12);130 }131 .switch::after {132 content:"";133 width: 46px; height: 46px; border-radius: 23px;134 background:#ffffff; position:absolute; top:5px; left:6px;135 box-shadow: 0 2px 6px rgba(0,0,0,0.18);136 }137 .sort-filter {138 margin-left: auto;139 display: flex; align-items: center; gap: 26px;140 color:#304c78; font-size: 32px;141 }142 .icon-label {143 display: flex; align-items: center; gap: 10px;144 padding: 10px 12px;145 border-radius: 10px;146 }147 .icon-label svg { width: 40px; height: 40px; }148 149 /* Train card */150 .train-card {151 margin: 22px 24px;152 background: #ffffff;153 border: 1px solid #e3eaf5;154 border-radius: 18px;155 box-shadow: 0 2px 6px rgba(9,30,66,0.05);156 overflow: hidden;157 }158 .train-header {159 padding: 26px 24px 14px 24px;160 display: flex;161 align-items: flex-start;162 gap: 14px;163 }164 .train-title {165 flex: 1;166 color: #122b4f;167 }168 .train-title .number {169 font-weight: 700; font-size: 40px; margin-bottom: 6px;170 }171 .train-title .name {172 font-size: 40px; font-weight: 600;173 }174 .subtitle {175 font-size: 34px; color: #385b8e; margin-top: 4px;176 }177 178 .days-row {179 display: flex; align-items: center; gap: 10px; margin-top: 12px;180 }181 .day-dot {182 width: 40px; height: 40px; border-radius: 20px; background:#e8edf6;183 color:#5a7396; display:flex; align-items:center; justify-content:center; font-size: 26px;184 border:1px solid #d9e4f2;185 }186 .link {187 color:#2b69c7; font-size: 32px; margin-left: 18px;188 }189 190 .right-times {191 width: 300px;192 text-align: right;193 }194 .nearby-pill {195 display: inline-flex; align-items: center; gap: 10px;196 background: #f0e9c9;197 color: #6a6132;198 border: 1px solid #e4dcae;199 padding: 8px 16px; border-radius: 24px;200 font-size: 28px;201 margin-bottom: 8px;202 }203 .time-row { font-size: 46px; font-weight: 700; color:#122b4f; }204 .station-row { font-size: 34px; color:#3b587f; margin-top: 6px; }205 .duration { font-size: 32px; color:#153760; padding: 0 24px 22px 24px; }206 207 .fare-grid {208 display: grid;209 grid-template-columns: repeat(3, 1fr);210 gap: 16px;211 padding: 0 24px 24px 24px;212 }213 .fare-box {214 border: 1px solid #e1e9f5;215 border-radius: 16px;216 padding: 18px;217 height: 220px;218 display: flex; flex-direction: column;219 justify-content: space-between;220 background:#fafdff;221 }222 .fare-title { font-size: 36px; color:#0d2b51; }223 .fare-price { font-weight: 700; }224 .status-line { font-size: 32px; margin-top: 10px; }225 .status-orange { color: #e5731b; }226 .status-green { color: #1a9a3f; }227 .btn {228 align-self: center;229 background:#2d69c7; color:#fff; border:none;230 padding: 18px 34px; font-size: 34px; border-radius: 12px;231 box-shadow: 0 2px 6px rgba(23,86,163,0.3);232 }233 .future-link {234 padding: 0 24px 26px 24px;235 color:#2b69c7; font-size: 34px;236 }237 238 /* Small helpers */239 .muted { color:#7f93ad; }240 .thin-divider {241 height:1px; background:#e7edf7; margin: 0 24px;242 }243</style>244</head>245<body>246<div id="render-target">247 248 <!-- Status Bar -->249 <div class="status-bar">250 <div>1:25</div>251 <div class="right">252 <div class="icon-dot"></div>253 <div class="icon-dot"></div>254 <svg class="wifi" viewBox="0 0 24 24" fill="none">255 <path d="M2 8c5-4 15-4 20 0" stroke="#fff" stroke-width="2" stroke-linecap="round"/>256 <path d="M5 12c3-2 11-2 14 0" stroke="#fff" stroke-width="2" stroke-linecap="round"/>257 <path d="M9 16c2-1 4-1 6 0" stroke="#fff" stroke-width="2" stroke-linecap="round"/>258 <circle cx="12" cy="19" r="2" fill="#fff"/>259 </svg>260 </div>261 </div>262 263 <!-- App Bar -->264 <div class="app-bar">265 <div class="route-chip">266 <span>NDLS - SVM | 3 Trains | General</span>267 <svg class="edit-icon" viewBox="0 0 24 24">268 <path d="M3 17l2 4 4-2 10-10-4-4L5 15l-2 2z" fill="#eaf3ff"/>269 </svg>270 </div>271 <div class="spacer"></div>272 <div class="wa-bubble">273 <svg class="wa-icon" viewBox="0 0 24 24">274 <path d="M12 2a9 9 0 0 0-9 9c0 1.7.5 3.3 1.3 4.7L3 22l6.5-1.7A9 9 0 1 0 12 2z" fill="#fff" opacity="0.3"/>275 <path d="M12 4a7 7 0 1 1 0 14c-1.2 0-2.3-.3-3.3-.8L6 18l.9-2.6A6.9 6.9 0 0 1 5 11a7 7 0 0 1 7-7z" fill="#fff"/>276 </svg>277 </div>278 </div>279 280 <!-- Date Tabs -->281 <div class="date-tabs">282 <div class="date-pill active">Tue, 4</div>283 <div class="date-pill">Wed, 5</div>284 <div class="date-pill">Thu, 6</div>285 <div class="date-pill">Fri, 7</div>286 <div class="date-pill">Sat, 8</div>287 <div class="date-pill">Sun, 9</div>288 </div>289 290 <!-- Search / Tools Row -->291 <div class="tools-row">292 <div class="search-box">293 <svg viewBox="0 0 24 24">294 <circle cx="11" cy="11" r="7" stroke="#6b819d" stroke-width="2" fill="none"/>295 <path d="M20 20l-4-4" stroke="#6b819d" stroke-width="2" stroke-linecap="round"/>296 </svg>297 <span>Search</span>298 </div>299 300 <div class="toggle">301 <div class="switch"></div>302 <span>AC Only</span>303 </div>304 305 <div class="toggle">306 <div class="switch"></div>307 <span>AVBL Only</span>308 </div>309 310 <div class="sort-filter">311 <div class="icon-label">312 <svg viewBox="0 0 24 24">313 <path d="M4 6h16M6 12h12M10 18h8" stroke="#304c78" stroke-width="2" stroke-linecap="round"/>314 </svg>315 <span>Sort By</span>316 </div>317 <div class="icon-label">318 <svg viewBox="0 0 24 24">319 <path d="M3 5h18l-7 7v7l-4-2v-5L3 5z" fill="#304c78"/>320 </svg>321 <span>Filter By</span>322 </div>323 </div>324 </div>325 326 <!-- Train Card 1 -->327 <div class="train-card">328 <div class="train-header">329 <div class="train-title">330 <div class="number">12618</div>331 <div class="name">HAZRAT NIZAMUDDIN - ERNAKULAM Mangala Lakshadweep SF Exp</div>332 <div class="days-row">333 <div class="day-dot">S</div><div class="day-dot">M</div><div class="day-dot">T</div>334 <div class="day-dot">W</div><div class="day-dot">T</div><div class="day-dot">F</div>335 <div class="day-dot">S</div>336 <span class="link">View Time Table ›</span>337 </div>338 </div>339 <div class="right-times">340 <div class="nearby-pill">341 <svg width="26" height="26" viewBox="0 0 24 24">342 <path d="M12 2a7 7 0 0 0-7 7c0 5 7 13 7 13s7-8 7-13a7 7 0 0 0-7-7zm0 9a2 2 0 1 1 0-4 2 2 0 0 1 0 4z" fill="#6a6132"/>343 </svg>344 Nearby345 </div>346 <div class="time-row">05:40 • 17:25</div>347 <div class="station-row">NZM ➝ MAO</div>348 </div>349 </div>350 <div class="duration">35h 45m</div>351 <div class="fare-grid">352 <div class="fare-box">353 <div class="fare-title">SL <span class="fare-price">₹825</span></div>354 <div class="status-line status-orange">73 WAITLIST</div>355 <div class="muted">Medium Chance</div>356 <button class="btn">Book Now</button>357 </div>358 <div class="fare-box">359 <div class="fare-title">3A <span class="fare-price">₹2150</span></div>360 <div class="status-line status-green">16 WAITLIST</div>361 <div class="muted">High Chance</div>362 <button class="btn">Book Now</button>363 </div>364 <div class="fare-box">365 <div class="fare-title">2A</div>366 <div class="muted">Tap to Refresh</div>367 <button class="btn">Check</button>368 </div>369 </div>370 <div class="future-link">View Future Availability ›</div>371 </div>372 373 <!-- Train Card 2 -->374 <div class="train-card">375 <div class="train-header">376 <div class="train-title">377 <div class="number">12432</div>378 <div class="name">HAZRAT NIZAMUDDIN - TRIVANDRUM CENT Rajdhani Exp</div>379 <div class="days-row">380 <div class="day-dot">S</div><div class="day-dot">M</div><div class="day-dot">T</div>381 <div class="day-dot">W</div><div class="day-dot">T</div><div class="day-dot">F</div>382 <div class="day-dot">S</div>383 <span class="link">View Time Table ›</span>384 </div>385 </div>386 <div class="right-times">387 <div class="nearby-pill">388 <svg width="26" height="26" viewBox="0 0 24 24">389 <path d="M12 2a7 7 0 0 0-7 7c0 5 7 13 7 13s7-8 7-13a7 7 0 0 0-7-7zm0 9a2 2 0 1 1 0-4 2 2 0 0 1 0 4z" fill="#6a6132"/>390 </svg>391 Nearby392 </div>393 <div class="time-row">06:16 • 07:55</div>394 <div class="station-row">NZM ➝ MAO</div>395 </div>396 </div>397 <div class="duration">25h 39m</div>398 <div class="fare-grid">399 <div class="fare-box">400 <div class="fare-title">3A <span class="fare-price">₹3915</span></div>401 <div class="status-line status-green">4 WAITLIST</div>402 <div class="muted">High Chance</div>403 <button class="btn">Book Now</button>404 </div>405 <div class="fare-box">406 <div class="fare-title">2A <span class="fare-price">₹5365</span></div>407 <div class="status-line status-green">3 WAITLIST</div>408 <div class="muted">High Chance</div>409 <button class="btn">Book Now</button>410 </div>411 <div class="fare-box">412 <div class="fare-title">1A <span class="fare-price">₹6705</span></div>413 <div class="status-line status-green">3 WAITLIST</div>414 <div class="muted">High Chance</div>415 <button class="btn">Book Now</button>416 </div>417 </div>418 <div class="future-link">View Future Availability ›</div>419 </div>420 421 <!-- Train Card 3 -->422 <div class="train-card">423 <div class="train-header">424 <div class="train-title">425 <div class="number">12780</div>426 <div class="name">HAZRAT NIZAMUDDIN - VASCO DA GAMA Goa SF Exp</div>427 <div class="days-row">428 <div class="day-dot">S</div><div class="day-dot">M</div><div class="day-dot">T</div>429 <div class="day-dot">W</div><div class="day-dot">T</div><div class="day-dot">F</div>430 <div class="day-dot">S</div>431 <span class="link">View Time Table ›</span>432 </div>433 </div>434 <div class="right-times">435 <div class="nearby-pill">436 <svg width="26" height="26" viewBox="0 0 24 24">437 <path d="M12 2a7 7 0 0 0-7 7c0 5 7 13 7 13s7-8 7-13a7 7 0 0 0-7-7zm0 9a2 2 0 1 1 0-4 2 2 0 0 1 0 4z" fill="#6a6132"/>438 </svg>439 Nearby440 </div>441 <div class="time-row">15:15 • 05:01</div>442 <div class="station-row">NZM ➝ SVM</div>443 </div>444 </div>445 <div class="duration">37h 46m</div>446 <div class="fare-grid">447 <div class="fare-box">448 <div class="fare-title">SL <span class="fare-price">₹720</span></div>449 <div class="status-line status-orange">58 WAITLIST</div>450 <div class="muted">Medium Chance</div>451 <button class="btn">Book Now</button>452 </div>453 <div class="fare-box">454 <div class="fare-title">3A <span class="fare-price">₹2100</span></div>455 <div class="status-line status-green">10 WAITLIST</div>456 <div class="muted">High Chance</div>457 <button class="btn">Book Now</button>458 </div>459 <div class="fare-box">460 <div class="fare-title">2A <span class="fare-price">₹3150</span></div>461 <div class="status-line status-green">6 WAITLIST</div>462 <div class="muted">High Chance</div>463 <button class="btn">Book Now</button>464 </div>465 </div>466 </div>467 468</div>469</body>470</html>