GD-ML/AndroidCode
13.4k
1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Train Results UI</title>5<style>6 body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; }7 #render-target {8 width: 1080px; height: 2400px;9 position: relative; overflow: hidden;10 background: #162a62; /* deep blue header background */11 border-radius: 0;12 }13 14 /* Status bar */15 .status-bar {16 height: 96px;17 color: #fff;18 display: flex;19 align-items: center;20 justify-content: space-between;21 padding: 0 36px;22 font-weight: 600;23 font-size: 38px;24 }25 .status-right { display: flex; align-items: center; gap: 28px; }26 .icon { width: 40px; height: 40px; display: inline-block; }27 28 /* Header */29 .header {30 color: #fff;31 padding: 18px 36px 32px;32 }33 .header-top {34 display: flex; align-items: center; justify-content: space-between;35 margin-bottom: 16px;36 }37 .nav-left { display: flex; align-items: center; gap: 16px; }38 .back-btn {39 width: 64px; height: 64px; border-radius: 16px;40 display: flex; align-items: center; justify-content: center;41 }42 .share-btn { width: 64px; height: 64px; display: flex; align-items: center; justify-content: center; }43 .title { font-size: 52px; font-weight: 700; letter-spacing: 0.2px; }44 .subtitle { font-size: 30px; opacity: 0.85; margin-top: 6px; }45 46 /* Modes strip */47 .modes {48 display: flex; align-items: stretch; justify-content: space-between;49 margin-top: 24px;50 padding: 18px 0;51 }52 .mode {53 flex: 1;54 color: #cdd3ea;55 text-align: center;56 }57 .mode .mode-icon { margin-bottom: 12px; }58 .mode .price { font-size: 36px; font-weight: 700; }59 .mode .sub { font-size: 30px; opacity: 0.75; }60 .mode.active { color: #ffffff; }61 .mode.active .underline {62 margin: 16px auto 0; width: 220px; height: 8px; background: #ff5a5f; border-radius: 6px;63 }64 65 /* White content panel */66 .content {67 position: absolute; left: 0; right: 0; top: 360px; bottom: 0;68 background: #f7f8fc;69 border-top-left-radius: 24px; border-top-right-radius: 24px;70 box-shadow: 0 -2px 0 rgba(255,255,255,0.2) inset;71 padding-bottom: 160px;72 }73 74 /* Cards */75 .card {76 width: 1004px; margin: 28px auto; background: #fff; border-radius: 24px;77 box-shadow: 0 6px 18px rgba(28, 42, 84, 0.12);78 padding: 36px;79 }80 .card-header {81 display: flex; align-items: center; justify-content: space-between; margin-bottom: 22px;82 }83 .cheap { color: #22B46B; font-weight: 800; letter-spacing: 1px; font-size: 34px; }84 .qr {85 width: 42px; height: 42px; border-radius: 8px; border: 2px solid #22B46B;86 display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; padding: 6px;87 }88 .qr div { background: #22B46B; border-radius: 2px; }89 90 .rail-row { display: flex; align-items: center; gap: 18px; color: #5b6a82; margin-bottom: 12px; }91 .logo-b {92 width: 64px; height: 64px; border-radius: 32px; border: 3px solid #0b1c49;93 display: flex; align-items: center; justify-content: center; color: #0b1c49; font-weight: 800; font-size: 32px;94 }95 .rail-code { font-size: 34px; color: #94a0b5; font-weight: 700; }96 97 .times {98 display: grid; grid-template-columns: 1fr auto 1fr; align-items: baseline; gap: 20px;99 margin-top: 6px; margin-bottom: 6px;100 }101 .time {102 font-size: 64px; color: #0b1c49; font-weight: 800;103 }104 .duration { color: #a9afc2; font-size: 34px; font-weight: 600; }105 .stations {106 display: grid; grid-template-columns: 1fr 1fr; margin-top: 4px;107 color: #2a3b61; font-size: 36px; font-weight: 600;108 }109 .stations .right { text-align: right; }110 111 .card-footer {112 display: grid; grid-template-columns: 1fr auto; align-items: center; margin-top: 26px;113 }114 .pill {115 background: #eaf0fb; color: #2a3b61; padding: 18px 26px; border-radius: 40px;116 font-size: 34px; display: inline-flex; align-items: center; gap: 18px;117 }118 .chev { width: 24px; height: 24px; border: solid #2a3b61; border-width: 0 6px 6px 0; transform: rotate(45deg); display: inline-block; }119 .price-block { text-align: right; }120 .price { font-size: 54px; font-weight: 800; color: #0b1c49; }121 .trip-meta { color: #2a3b61; font-size: 34px; display: inline-flex; align-items: center; gap: 14px; margin-left: 18px; }122 .person {123 width: 34px; height: 34px;124 background: radial-gradient(circle at 50% 40%, #0b1c49 72%, transparent 73%), linear-gradient(#0b1c49 0 0) 0 60%/100% 40% no-repeat;125 border-radius: 50%;126 display: inline-block;127 }128 129 /* Bottom home indicator bar */130 .home-bar {131 position: absolute; left: 0; right: 0; bottom: 0;132 height: 140px; background: #0b1c49;133 display: flex; align-items: center; justify-content: center;134 }135 .home-handle {136 width: 360px; height: 16px; background: #cfd5e6; border-radius: 12px; opacity: 0.7;137 }138</style>139</head>140<body>141<div id="render-target">142 143 <!-- Status bar -->144 <div class="status-bar">145 <div>12:06</div>146 <div class="status-right">147 <!-- simple "chevrons" to mimic small up arrows -->148 <div style="font-size:30px; opacity:0.8;">∧ ∧</div>149 <!-- WiFi icon -->150 <svg class="icon" viewBox="0 0 24 24" fill="none">151 <path d="M2 8c5-4 15-4 20 0" stroke="#fff" stroke-width="2" stroke-linecap="round"/>152 <path d="M6 12c3-3 9-3 12 0" stroke="#fff" stroke-width="2" stroke-linecap="round"/>153 <path d="M10 16c2-2 4-2 6 0" stroke="#fff" stroke-width="2" stroke-linecap="round"/>154 <circle cx="12" cy="19" r="1.5" fill="#fff"/>155 </svg>156 <!-- battery icon -->157 <svg class="icon" viewBox="0 0 26 16" fill="none">158 <rect x="1" y="2" width="20" height="12" rx="2" stroke="#fff" stroke-width="2"/>159 <rect x="3" y="4" width="14" height="8" rx="1" fill="#fff"/>160 <rect x="22" y="5" width="3" height="6" rx="1" fill="#fff"/>161 </svg>162 </div>163 </div>164 165 <!-- Header -->166 <div class="header">167 <div class="header-top">168 <div class="nav-left">169 <div class="back-btn">170 <svg width="44" height="44" viewBox="0 0 24 24">171 <path d="M15 18l-6-6 6-6" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>172 </svg>173 </div>174 <div class="title">Aalst › Brussels-Central</div>175 </div>176 <div class="share-btn">177 <svg width="44" height="44" viewBox="0 0 24 24">178 <path d="M18 8a3 3 0 1 0-2.8-4H15l-7 4a3 3 0 1 0 0 4l7 4a3 3 0 1 0 1-1.8l-7-4" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>179 </svg>180 </div>181 </div>182 <div class="subtitle">Tue, Nov 28, 1 passenger</div>183 184 <div class="modes">185 <div class="mode active">186 <div class="mode-icon">187 <svg width="48" height="48" viewBox="0 0 24 24">188 <rect x="3" y="7" width="18" height="9" rx="2" stroke="#fff" stroke-width="2" fill="none"/>189 <circle cx="8" cy="18" r="1.6" fill="#fff"/>190 <circle cx="16" cy="18" r="1.6" fill="#fff"/>191 </svg>192 </div>193 <div class="price">$11</div>194 <div class="sub">0h34m</div>195 <div class="underline"></div>196 </div>197 <div class="mode">198 <div class="mode-icon">199 <svg width="48" height="48" viewBox="0 0 24 24">200 <rect x="3" y="8" width="18" height="8" rx="2" stroke="#cdd3ea" stroke-width="2" fill="none"/>201 <rect x="5" y="14" width="4" height="3" fill="#cdd3ea"/>202 </svg>203 </div>204 <div class="price">-</div>205 <div class="sub">-</div>206 </div>207 <div class="mode">208 <div class="mode-icon">209 <svg width="48" height="48" viewBox="0 0 24 24">210 <path d="M2 13l20-4-9 6-2 5-3-7-6 0z" stroke="#cdd3ea" stroke-width="2" fill="none" stroke-linejoin="round"/>211 </svg>212 </div>213 <div class="price">-</div>214 <div class="sub">-</div>215 </div>216 </div>217 </div>218 219 <!-- Content panel with cards -->220 <div class="content">221 222 <!-- Card 1 -->223 <div class="card">224 <div class="card-header">225 <div class="cheap">CHEAPEST</div>226 <div class="qr"><div></div><div></div><div></div><div></div></div>227 </div>228 229 <div class="rail-row">230 <div class="logo-b">B</div>231 <div class="rail-code">IC</div>232 </div>233 234 <div class="times">235 <div class="time">6:54 AM</div>236 <div class="duration">0h53m</div>237 <div class="time" style="text-align:right;">7:47 AM</div>238 </div>239 <div class="stations">240 <div>Aalst</div>241 <div class="right">Brussels-Central</div>242 </div>243 244 <div class="card-footer">245 <div class="pill">1 Transfer <span class="chev"></span></div>246 <div class="price-block">247 <span class="price">$11</span>248 <span class="trip-meta"><span class="person"></span> 1 • One-way</span>249 </div>250 </div>251 </div>252 253 <!-- Card 2 -->254 <div class="card">255 <div class="card-header">256 <div class="cheap">CHEAPEST</div>257 <div class="qr"><div></div><div></div><div></div><div></div></div>258 </div>259 260 <div class="rail-row">261 <div class="logo-b">B</div>262 <div class="rail-code">IC</div>263 </div>264 265 <div class="times">266 <div class="time">7:09 AM</div>267 <div class="duration">1h05m</div>268 <div class="time" style="text-align:right;">8:14 AM</div>269 </div>270 <div class="stations">271 <div>Aalst</div>272 <div class="right">Brussels-Central</div>273 </div>274 275 <div class="card-footer">276 <div class="pill">1 Transfer <span class="chev"></span></div>277 <div class="price-block">278 <span class="price">$11</span>279 <span class="trip-meta"><span class="person"></span> 1 • One-way</span>280 </div>281 </div>282 </div>283 284 <!-- Card 3 -->285 <div class="card">286 <div class="card-header">287 <div class="cheap">CHEAPEST</div>288 <div class="qr"><div></div><div></div><div></div><div></div></div>289 </div>290 291 <div class="rail-row">292 <div class="logo-b">B</div>293 <div class="rail-code">IC</div>294 </div>295 296 <div class="times">297 <div class="time">7:43 AM</div>298 <div class="duration">0h35m</div>299 <div class="time" style="text-align:right;">8:18 AM</div>300 </div>301 <div class="stations">302 <div>Aalst</div>303 <div class="right">Brussels-Central</div>304 </div>305 306 <div class="card-footer">307 <div class="pill">0 Transfers <span class="chev"></span></div>308 <div class="price-block">309 <span class="price">$11</span>310 <span class="trip-meta"><span class="person"></span> 1 • One-way</span>311 </div>312 </div>313 </div>314 315 </div>316 317 <!-- bottom home indicator -->318 <div class="home-bar">319 <div class="home-handle"></div>320 </div>321</div>322</body>323</html>