GD-ML/AndroidCode
13.4k
1<html>2<head>3<meta charset="UTF-8">4<title>Train Booking 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:#0f1f54; /* dark header background */13 color:#0e1a3a;14 }15 16 /* Status bar */17 .status-bar{18 position:absolute;19 top:0;20 left:0;21 width:100%;22 height:110px;23 padding:0 44px;24 box-sizing:border-box;25 display:flex;26 align-items:center;27 justify-content:space-between;28 color:#E8EDFF;29 font-weight:600;30 letter-spacing:1px;31 font-size:38px;32 }33 .status-icons{34 display:flex;35 gap:28px;36 }37 .dot{38 width:22px;height:22px;border-radius:50%;background:#E8EDFF;opacity:.9;39 }40 .battery{41 width:28px;height:44px;border:3px solid #E8EDFF;border-radius:6px; position:relative;42 }43 .battery:after{44 content:""; position:absolute; right:-8px; top:8px; width:6px; height:14px; background:#E8EDFF; border-radius:2px;45 }46 47 /* Nav bar */48 .nav{49 position:absolute;50 top:110px;51 left:0;52 width:100%;53 height:210px;54 padding:0 40px;55 box-sizing:border-box;56 display:flex;57 align-items:center;58 justify-content:space-between;59 color:#e9f0ff;60 }61 .nav-title{62 margin-left:10px;63 }64 .title{65 font-size:56px; font-weight:700;66 }67 .subtitle{68 margin-top:6px;69 font-size:36px; opacity:.85;70 }71 .nav-left{72 display:flex; align-items:center; gap:22px;73 }74 .icon-btn{75 width:72px; height:72px; display:flex; align-items:center; justify-content:center;76 }77 .nav svg{ fill:#e9f0ff; }78 79 /* Main content area (light) */80 .content{81 position:absolute;82 top:320px;83 left:0;84 width:100%;85 height:2080px;86 background:#F3F6F9;87 border-top-left-radius:28px;88 border-top-right-radius:28px;89 padding:32px 36px 36px 36px;90 box-sizing:border-box;91 }92 93 /* transport row */94 .modes{95 display:flex; gap:70px; align-items:flex-end; color:#22335a;96 }97 .mode{98 width:280px;99 }100 .mode-top{101 display:flex; align-items:center; gap:18px; color:#1c2d57;102 }103 .mode-top svg{ width:48px; height:48px; fill:#1c2d57; }104 .price{105 font-size:46px; font-weight:800; color:#0e2d7a; margin-top:8px;106 }107 .duration{108 font-size:34px; margin-top:6px; color:#6b7a99;109 border-bottom:6px solid #ef4b4b;110 width:190px;111 padding-bottom:6px;112 }113 .dash{114 font-size:42px; color:#94a0bb; margin-top:10px;115 }116 117 /* green banner */118 .banner{119 margin-top:32px;120 background:#E0F5E8;121 border:2px solid #7BC69D;122 color:#1b6c4d;123 padding:28px;124 border-radius:20px;125 display:flex; align-items:center; gap:22px;126 font-size:40px;127 }128 .qricon{129 width:56px; height:56px; border:4px solid #1b6c4d; border-radius:8px; position:relative;130 }131 .qricon:before, .qricon:after{132 content:""; position:absolute; width:10px; height:10px; background:#1b6c4d;133 }134 .qricon:before{ left:8px; top:8px;}135 .qricon:after{ right:8px; bottom:8px;}136 137 /* filter chips */138 .filters{139 display:flex; gap:24px; margin-top:28px;140 }141 .chip{142 background:#fff; border-radius:44px; padding:22px 34px; font-size:38px; color:#1a2d59; box-shadow:0 2px 0 rgba(0,0,0,0.05);143 display:flex; align-items:center; gap:14px;144 }145 .chip svg{ width:40px; height:40px; fill:#1a2d59; opacity:.85; }146 147 /* button earlier trains */148 .btn-outline{149 margin-top:28px;150 width:100%;151 text-align:center;152 background:#fff;153 border-radius:18px;154 padding:30px 0;155 font-size:46px;156 color:#1a2d59;157 border:3px solid #c8d3e8;158 font-weight:700;159 }160 161 /* card list */162 .card{163 margin-top:32px;164 background:#fff;165 border-radius:22px;166 padding:30px;167 box-shadow:0 3px 0 rgba(0,0,0,0.05);168 }169 .tag{170 color:#20a063; font-weight:800; letter-spacing:2px; font-size:34px; margin-bottom:18px;171 }172 .ticket-row{173 display:flex; align-items:center; justify-content:space-between; color:#071b57;174 }175 .ticket-left{176 display:flex; align-items:center; gap:22px;177 }178 .circle{179 width:64px; height:64px; border-radius:50%; background:#18306e;180 }181 .time-seg{182 display:flex; align-items:center; gap:20px; color:#1a2d59; font-size:48px; font-weight:800;183 }184 .smallmuted{ color:#9aa6c3; font-weight:600; font-size:34px; }185 186 /* Bottom sheet */187 .sheet{188 position:absolute;189 left:0;190 bottom:0;191 width:100%;192 height:930px;193 background:#ffffff;194 border-top-left-radius:28px;195 border-top-right-radius:28px;196 box-shadow:0 -6px 30px rgba(0,0,0,0.2);197 padding:26px 36px 36px 36px;198 box-sizing:border-box;199 }200 .grabber{201 width:160px; height:14px; background:#E5E7EE; border-radius:8px; margin:10px auto 28px;202 }203 .sheet-title{204 text-align:left; color:#9aa2ba; font-weight:800; letter-spacing:3px; font-size:40px;205 padding:12px 10px;206 }207 .wheel{208 margin-top:32px;209 display:flex; justify-content:center; gap:100px; align-items:flex-end;210 }211 .col{212 width:220px; text-align:center; color:#c0c6d8; font-size:96px; font-weight:700; line-height:1.1;213 }214 .col .active{ color:#0e2b78; font-size:120px; }215 .colon{216 font-size:120px; color:#0e2b78; font-weight:800; padding-bottom:16px;217 }218 .period{219 width:220px; text-align:center; font-size:96px; color:#c0c6d8; font-weight:700;220 }221 .period .active{ color:#0e2b78; font-size:120px; }222 .apply{223 position:absolute; left:36px; right:36px; bottom:36px;224 background:#e57368;225 color:#fff; font-weight:800; font-size:48px;226 text-align:center; padding:34px 0; border-radius:20px;227 }228</style>229</head>230<body>231<div id="render-target">232 233 <!-- Status bar -->234 <div class="status-bar">235 <div>12:05</div>236 <div class="status-icons">237 <div class="dot"></div>238 <div class="dot"></div>239 <div class="battery"></div>240 </div>241 </div>242 243 <!-- Navigation -->244 <div class="nav">245 <div class="nav-left">246 <div class="icon-btn">247 <svg width="52" height="52" viewBox="0 0 24 24"><path d="M15.5 3.5 7 12l8.5 8.5-2 2L3 12 13.5 1.5z"/></svg>248 </div>249 <div class="nav-title">250 <div class="title">Aalst > Brussels-Central</div>251 <div class="subtitle">Tue, Nov 28, 1 passenger</div>252 </div>253 </div>254 <div class="icon-btn">255 <svg width="56" height="56" viewBox="0 0 24 24"><path d="M17 8a3 3 0 1 0-2.6-4.5L7 7.1A3 3 0 1 0 7 13l7.4 3.6A3 3 0 1 0 17 8z"/></svg>256 </div>257 </div>258 259 <!-- Light content area -->260 <div class="content">261 262 <!-- Transport row -->263 <div class="modes">264 <div class="mode">265 <div class="mode-top">266 <svg viewBox="0 0 24 24"><path d="M7 16h10l1 3H6l1-3zm-1-6V6a4 4 0 0 1 4-4h4a4 4 0 0 1 4 4v4a5 5 0 0 1-5 5H11a5 5 0 0 1-5-5zm3-3h6v4H9V7z"/></svg>267 <div class="price">$11</div>268 </div>269 <div class="duration">0h34m</div>270 </div>271 <div class="mode">272 <div class="mode-top">273 <svg viewBox="0 0 24 24"><path d="M4 13h16l-2 7H6l-2-7zm3-9h10l2 7H5l2-7z"/></svg>274 <div class="dash">-</div>275 </div>276 </div>277 <div class="mode">278 <div class="mode-top">279 <svg viewBox="0 0 24 24"><path d="M2 16l20-8-9 10v4l-3-3-8-3z"/></svg>280 <div class="dash">-</div>281 </div>282 </div>283 </div>284 285 <!-- Green banner -->286 <div class="banner">287 <div class="qricon"></div>288 <div>This icon means you’ve found a mobile ticket</div>289 </div>290 291 <!-- Filter chips -->292 <div class="filters">293 <div class="chip">294 <svg viewBox="0 0 24 24"><path d="M11 7V3h2v4h5v2h-5v5h-2V9H6V7h5z"/></svg>295 <span>Time: Depart at 8:00 AM</span>296 </div>297 <div class="chip">298 <svg viewBox="0 0 24 24"><path d="M3 13h6v-2H3v2zm12 0h6v-2h-6v2zM7 7h10v10H7z"/></svg>299 <span>Stops</span>300 </div>301 <div class="chip">302 <svg viewBox="0 0 24 24"><path d="M3 11h18v2H3z"/></svg>303 <span>Duration</span>304 </div>305 </div>306 307 <div class="btn-outline">Load earlier trains</div>308 309 <!-- Card list -->310 <div class="card">311 <div class="tag">CHEAPEST</div>312 <div class="ticket-row">313 <div class="ticket-left">314 <div class="circle"></div>315 <div>316 <div class="time-seg">317 <div>6:09 AM</div>318 <div class="smallmuted">— 1h05m —</div>319 <div>7:14 AM</div>320 </div>321 </div>322 </div>323 <div class="qricon" style="border-color:#2aa36e;"></div>324 </div>325 </div>326 327 </div>328 329 <!-- Bottom sheet -->330 <div class="sheet">331 <div class="grabber"></div>332 <div class="sheet-title">TRAVEL TIME - DEPART AT</div>333 334 <div class="wheel">335 <div class="col">336 <div>6</div>337 <div class="active">7</div>338 <div>8</div>339 </div>340 341 <div class="colon">:</div>342 343 <div class="col">344 <div>45</div>345 <div class="active">00</div>346 <div>15</div>347 </div>348 349 <div class="period">350 <div>PM</div>351 <div class="active">AM</div>352 <div style="opacity:.2">PM</div>353 </div>354 </div>355 356 <div class="apply">Apply</div>357 </div>358 359</div>360</body>361</html>