GD-ML/AndroidCode
13.4k
1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Train Search UI</title>5<style>6 body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }7 #render-target {8 width: 1080px; height: 2400px; position: relative; overflow: hidden;9 background: #0E1A36; /* top bar color behind */10 }11 12 /* General helpers */13 .row { display: flex; align-items: center; }14 .col { display: flex; flex-direction: column; }15 .muted { color: #8FA0C2; }16 .text-white { color: #fff; }17 .pill {18 background: #E9EEF6;19 color: #1A2B4A;20 padding: 28px 36px;21 border-radius: 60px;22 font-weight: 600;23 display: inline-flex; align-items: center; gap: 20px;24 box-shadow: inset 0 0 0 2px rgba(26,43,74,0.05);25 }26 .chip-icon { width: 40px; height: 40px; }27 .section { padding: 38px 48px; }28 .title { font-size: 48px; font-weight: 700; color: #fff; }29 .subtitle { font-size: 36px; color: #B7C2DD; margin-top: 8px; }30 31 /* Status bar */32 .status-bar {33 height: 120px; padding: 0 36px;34 display: flex; align-items: center; justify-content: space-between;35 color: #fff; font-weight: 700; font-size: 42px;36 }37 38 /* Header */39 .header {40 height: 220px; padding: 0 36px;41 display: flex; align-items: center; justify-content: space-between;42 color: #fff;43 }44 .header .left { gap: 28px; }45 .back-btn {46 width: 92px; height: 92px; border-radius: 24px;47 display: flex; align-items: center; justify-content: center;48 background: rgba(255,255,255,0.08);49 }50 .share-btn {51 width: 92px; height: 92px; border-radius: 24px;52 display: flex; align-items: center; justify-content: center;53 background: rgba(255,255,255,0.08);54 }55 56 /* Content area */57 .content {58 position: absolute; left: 0; top: 340px; right: 0; bottom: 0;59 background: #F5F7FA; border-top-left-radius: 36px; border-top-right-radius: 36px;60 overflow-y: auto;61 }62 63 /* Transport row */64 .transport-row {65 display: flex; gap: 80px; padding: 40px 48px 24px;66 color: #1A2B4A;67 }68 .mode { display: flex; align-items: center; gap: 20px; }69 .mode .icon {70 width: 72px; height: 72px; border-radius: 18px;71 display: flex; align-items: center; justify-content: center;72 background: #E9EEF6;73 }74 .mode .price { font-weight: 800; font-size: 44px; }75 .mode .dash { font-weight: 800; font-size: 44px; color: #9AA9C4; }76 .duration { font-size: 34px; color: #6C7B99; margin-top: 6px; }77 78 /* Info banner */79 .info-banner {80 margin: 12px 48px; background: #DDF5E6; border: 2px solid #B9E4C5;81 color: #0E6A41; border-radius: 24px; padding: 26px 28px;82 display: flex; align-items: center; gap: 24px; font-size: 38px; font-weight: 700;83 }84 85 /* Filter chips */86 .filters { padding: 18px 48px; display: flex; gap: 24px; }87 .filters .pill { font-size: 36px; }88 89 /* Load earlier button */90 .earlier-btn {91 margin: 36px 48px 0; color: #1A2B4A;92 border-radius: 22px; border: 3px solid #BCC7DB;93 padding: 36px; text-align: center; font-size: 42px; font-weight: 800;94 background: #fff;95 }96 97 /* Train card */98 .card {99 margin: 36px 48px; background: #fff; border-radius: 28px;100 box-shadow: 0 8px 24px rgba(20,30,60,0.06); padding: 40px;101 }102 .card .badge { color: #20A36D; font-weight: 900; letter-spacing: 2px; font-size: 36px; }103 .brand { display: flex; align-items: center; gap: 24px; margin-top: 24px; color: #243453; font-weight: 900; font-size: 42px; }104 .brand .b-logo {105 width: 92px; height: 72px; border: 2px solid #243453; border-radius: 50px;106 display: flex; align-items: center; justify-content: center; font-weight: 900;107 }108 .times { margin-top: 20px; display: flex; align-items: center; gap: 22px; color: #132245; font-size: 52px; font-weight: 800; }109 .duration-small { margin-left: 16px; color: #7B8AA8; font-size: 34px; font-weight: 700; }110 .qr-indicator {111 margin-left: auto; width: 72px; height: 72px; border-radius: 12px;112 background: #E7F6EE; display: flex; align-items: center; justify-content: center;113 border: 2px solid #BDE6CE;114 }115 116 /* Bottom sheet */117 .sheet {118 position: absolute; left: 0; right: 0; bottom: 0;119 height: 900px; background: #fff; border-top-left-radius: 36px; border-top-right-radius: 36px;120 box-shadow: 0 -14px 40px rgba(0,0,0,0.2);121 padding: 36px 42px;122 }123 .sheet .handle { width: 160px; height: 16px; border-radius: 8px; background: #E4E8F0; margin: 0 auto 28px; }124 .sheet .heading { text-align: center; color: #8A94B2; font-size: 44px; font-weight: 800; letter-spacing: 2px; margin-bottom: 36px; }125 .picker-row { display: flex; justify-content: space-around; align-items: center; margin: 20px 0 40px; }126 .picker {127 width: 280px; height: 340px; border-bottom: 3px solid #E7ECF5; border-top: 3px solid #E7ECF5;128 display: flex; align-items: center; justify-content: center;129 }130 .picker .value { font-size: 120px; font-weight: 900; color: #1A2B4A; }131 .sep { font-size: 120px; font-weight: 900; color: #1A2B4A; }132 .picker-hint-row { display: flex; justify-content: space-around; margin-top: -12px; color: #B5BCD2; font-size: 56px; font-weight: 700; }133 .apply-btn {134 position: absolute; bottom: 36px; left: 42px; right: 42px;135 background: #E77B73; color: #fff; font-size: 48px; font-weight: 900;136 text-align: center; padding: 32px; border-radius: 24px;137 }138 139 /* Home indicator */140 .home-indicator {141 position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%);142 width: 500px; height: 10px; background: #C7CFDD; border-radius: 8px;143 }144 145 /* Icon SVG styles */146 svg { display: block; }147</style>148</head>149<body>150<div id="render-target">151 152 <!-- Status bar -->153 <div class="status-bar">154 <div class="row" style="gap:22px;">155 <div>12:04</div>156 <div class="row" style="gap:10px; font-size: 34px;">157 <div style="transform: translateY(-6px);">^</div>158 <div style="transform: translateY(-6px);">^</div>159 </div>160 </div>161 <div class="row" style="gap:24px;">162 <!-- Wi-Fi -->163 <svg width="48" height="48" viewBox="0 0 24 24">164 <path fill="#fff" d="M12 20l-2-2h4l-2 2zm8-9a12 12 0 0 0-16 0l2 2a9 9 0 0 1 12 0l2-2zm-4 4a8 8 0 0 0-8 0l2 2a5 5 0 0 1 4 0l2-2z"/>165 </svg>166 <!-- Battery -->167 <svg width="64" height="48" viewBox="0 0 28 16">168 <rect x="1" y="3" width="22" height="10" rx="2" fill="none" stroke="#fff" stroke-width="2"/>169 <rect x="3" y="5" width="14" height="6" rx="1" fill="#fff"/>170 <rect x="24" y="6" width="3" height="4" rx="1" fill="#fff"/>171 </svg>172 </div>173 </div>174 175 <!-- Header -->176 <div class="header">177 <div class="row left">178 <div class="back-btn">179 <svg width="44" height="44" viewBox="0 0 24 24">180 <path fill="#fff" d="M15.5 3.5L7 12l8.5 8.5-2 2L3 12l10.5-10.5 2 2z"/>181 </svg>182 </div>183 <div class="col">184 <div class="title">Aalst › Brussels-Central</div>185 <div class="subtitle">Tue, Nov 28, 1 passenger</div>186 </div>187 </div>188 <div class="share-btn">189 <svg width="44" height="44" viewBox="0 0 24 24">190 <path fill="#fff" d="M18 16a3 3 0 0 0-2.6 1.5L8.9 14a3.1 3.1 0 0 0 0-4l6.5-3.5A3 3 0 1 0 16 5a3 3 0 0 0 .1.7L9.6 9.2a3 3 0 1 0 0 5.6l6.5 3.5A3 3 0 1 0 18 16z"/>191 </svg>192 </div>193 </div>194 195 <!-- Content -->196 <div class="content">197 198 <!-- Transport modes -->199 <div class="transport-row">200 <div class="col" style="gap:8px;">201 <div class="mode">202 <div class="icon">203 <!-- Train icon -->204 <svg width="48" height="48" viewBox="0 0 24 24">205 <rect x="5" y="5" width="14" height="10" rx="2" fill="#1A2B4A"/>206 <circle cx="8" cy="17" r="2" fill="#1A2B4A"/>207 <circle cx="16" cy="17" r="2" fill="#1A2B4A"/>208 </svg>209 </div>210 <div class="price">$11</div>211 </div>212 <div class="duration">0h34m</div>213 </div>214 215 <div class="col" style="gap:8px;">216 <div class="mode">217 <div class="icon">218 <!-- Bus icon -->219 <svg width="48" height="48" viewBox="0 0 24 24">220 <rect x="3" y="6" width="18" height="8" rx="2" fill="#1A2B4A"/>221 <circle cx="7" cy="17" r="2" fill="#1A2B4A"/>222 <circle cx="17" cy="17" r="2" fill="#1A2B4A"/>223 </svg>224 </div>225 <div class="dash">-</div>226 </div>227 </div>228 229 <div class="col" style="gap:8px;">230 <div class="mode">231 <div class="icon">232 <!-- Plane icon -->233 <svg width="48" height="48" viewBox="0 0 24 24">234 <path d="M2 12l9-2 8-6-2 8 5 4-6 0-6 6-1-5-7-3z" fill="#1A2B4A"/>235 </svg>236 </div>237 <div class="dash">-</div>238 </div>239 </div>240 </div>241 242 <!-- Info banner -->243 <div class="info-banner">244 <!-- QR icon -->245 <svg width="48" height="48" viewBox="0 0 24 24">246 <rect x="3" y="3" width="8" height="8" fill="#0E6A41"/>247 <rect x="13" y="3" width="8" height="4" fill="#0E6A41"/>248 <rect x="13" y="9" width="4" height="2" fill="#0E6A41"/>249 <rect x="3" y="13" width="4" height="8" fill="#0E6A41"/>250 <rect x="9" y="13" width="4" height="4" fill="#0E6A41"/>251 <rect x="15" y="13" width="6" height="8" fill="#0E6A41"/>252 </svg>253 <div>This icon means you’ve found a mobile ticket</div>254 </div>255 256 <!-- Filters -->257 <div class="filters">258 <div class="pill">259 <svg class="chip-icon" viewBox="0 0 24 24">260 <path d="M12 3l-4 4h3v7h2V7h3l-4-4zm0 14l-4 4h10l-4-4h-2z" fill="#1A2B4A"/>261 </svg>262 <span>Time: Depart at 8:00 AM</span>263 </div>264 <div class="pill">Stops</div>265 <div class="pill">Duration</div>266 </div>267 268 <!-- Load earlier button -->269 <div class="earlier-btn">Load earlier trains</div>270 271 <!-- Train card -->272 <div class="card">273 <div class="row" style="align-items:center;">274 <div class="badge">CHEAPEST</div>275 <div class="qr-indicator" style="margin-left:auto;">276 <svg width="36" height="36" viewBox="0 0 24 24">277 <rect x="3" y="3" width="7" height="7" fill="#20A36D"/>278 <rect x="14" y="3" width="7" height="3" fill="#20A36D"/>279 <rect x="3" y="14" width="3" height="7" fill="#20A36D"/>280 <rect x="8" y="15" width="5" height="5" fill="#20A36D"/>281 </svg>282 </div>283 </div>284 <div class="brand">285 <div class="b-logo">B</div>286 <div>IC</div>287 </div>288 <div class="times">289 <div>6:09 AM</div>290 <div class="duration-small">——— 1h05m ———</div>291 <div>7:14 AM</div>292 </div>293 </div>294 295 <!-- Bottom sheet picker -->296 <div class="sheet">297 <div class="handle"></div>298 <div class="heading">TRAVEL TIME - DEPART AT</div>299 300 <div class="picker-row">301 <div class="picker"><div class="value">8</div></div>302 <div class="sep">:</div>303 <div class="picker"><div class="value">00</div></div>304 <div class="picker"><div class="value">AM</div></div>305 </div>306 307 <div class="picker-hint-row">308 <div>9</div>309 <div>15</div>310 <div>PM</div>311 </div>312 313 <div class="apply-btn">Apply</div>314 </div>315 316 <div class="home-indicator"></div>317 </div>318</div>319</body>320</html>