GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Planner UI</title>6<meta name="viewport" content="width=1080, initial-scale=1.0">7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif; }9 #render-target {10 width: 1080px;11 height: 2400px;12 position: relative;13 overflow: hidden;14 background: #ffffff;15 color: #1c1c28;16 }17 18 /* Header section */19 .header {20 background: #1b1540;21 color: #ffffff;22 padding: 40px 48px 32px 48px;23 }24 .statusbar {25 display: flex;26 align-items: center;27 justify-content: space-between;28 font-weight: 600;29 font-size: 36px;30 opacity: 0.95;31 margin-bottom: 40px;32 }33 .status-icons {34 display: flex;35 align-items: center;36 gap: 28px;37 }38 .dot {39 width: 26px; height: 26px; border-radius: 50%; background: #ffffff; opacity: 0.85;40 }41 .wifi {42 width: 40px; height: 28px;43 }44 .battery {45 width: 52px; height: 26px; border: 3px solid #fff; border-radius: 6px; position: relative;46 }47 .battery::after {48 content: ""; position: absolute; right: -10px; top: 8px; width: 6px; height: 10px; background: #fff; border-radius: 2px;49 }50 .battery .level {51 position: absolute; left: 3px; top: 3px; height: 16px; width: 34px; background: #fff;52 }53 54 .title-row {55 display: flex;56 align-items: center;57 gap: 24px;58 margin-bottom: 28px;59 }60 .title-row h1 {61 font-size: 64px;62 line-height: 72px;63 margin: 0;64 font-weight: 700;65 }66 .icon {67 width: 44px; height: 44px; fill: none; stroke: currentColor; stroke-width: 3.5px;68 }69 70 .card {71 background: #ffffff;72 border-radius: 26px;73 padding: 28px 32px;74 margin-top: 22px;75 box-shadow: 0 2px 0 rgba(255,255,255,0.08) inset;76 }77 .route-row {78 display: flex;79 align-items: center;80 justify-content: space-between;81 gap: 18px;82 }83 .route-left {84 display: flex;85 align-items: center;86 gap: 18px;87 flex: 1;88 min-width: 0;89 }90 .route-text {91 font-size: 42px;92 line-height: 52px;93 font-weight: 600;94 color: #2a2f55;95 white-space: nowrap;96 overflow: hidden;97 text-overflow: ellipsis;98 }99 .divider {100 height: 1px;101 background: #e7e7ee;102 margin: 18px -4px 18px -4px;103 }104 .swap-circle {105 width: 92px; height: 92px; border-radius: 50%;106 border: 2px solid #e7e7ee; display: flex; align-items: center; justify-content: center; color: #7f83a6;107 }108 109 .datetime-row {110 display: flex; align-items: center; gap: 18px; color: #2a2f55; font-size: 40px; font-weight: 600;111 }112 113 .chip-row {114 display: flex; gap: 18px; margin-top: 28px;115 }116 .chip {117 display: inline-flex;118 align-items: center;119 gap: 16px;120 border-radius: 18px;121 padding: 22px 28px;122 font-size: 36px;123 font-weight: 700;124 line-height: 1;125 }126 .chip.filter {127 background: #FFC107; color: #1b1540;128 }129 .chip.outline {130 color: #e7e3ff;131 border: 2px solid #3a2c6e;132 background: transparent;133 }134 135 /* Content area */136 .content {137 background: #ffffff;138 border-top-left-radius: 28px;139 border-top-right-radius: 28px;140 margin-top: 28px;141 padding-bottom: 160px;142 }143 .update {144 padding: 24px 48px 8px 48px;145 font-size: 34px;146 color: #585d7e;147 }148 .update .bold { color: #1b1540; font-weight: 800; }149 .earlier {150 margin-top: 26px;151 background: #f4f5f9;152 color: #3a3e5c;153 font-size: 38px;154 padding: 28px 48px;155 display: flex; align-items: center; justify-content: space-between;156 border-top: 1px solid #e7e7ee;157 border-bottom: 1px solid #e7e7ee;158 }159 160 .result {161 padding: 36px 48px;162 border-bottom: 1px solid #e7e7ee;163 position: relative;164 }165 .result .time {166 font-size: 56px;167 font-weight: 800;168 color: #171e48;169 letter-spacing: 0.2px;170 }171 .meta {172 margin-top: 18px;173 display: flex; align-items: center; gap: 32px; color: #6b728e; font-size: 36px; font-weight: 600;174 }175 .meta .meta-item { display: flex; align-items: center; gap: 12px; }176 .note {177 margin-top: 18px;178 font-size: 32px;179 font-weight: 700;180 color: #f06700;181 }182 .supplement {183 position: absolute;184 right: 48px;185 top: 52px;186 background: #ffffff;187 border: 2px solid #dddde7;188 color: #1b1540;189 border-radius: 16px;190 padding: 12px 18px;191 font-size: 30px;192 display: inline-flex; align-items: center; gap: 10px;193 box-shadow: 0 1px 0 rgba(0,0,0,0.04);194 }195 .refresh {196 position: absolute; right: 48px; top: 64px; color: #2cc180;197 }198 199 /* Bottom navigation */200 .bottom-nav {201 position: absolute;202 bottom: 70px;203 left: 0; right: 0;204 height: 160px;205 border-top: 1px solid #e7e7ee;206 background: #ffffff;207 display: flex;208 justify-content: space-around;209 align-items: center;210 padding: 12px 24px;211 }212 .nav-item {213 display: flex; flex-direction: column; align-items: center; gap: 14px;214 font-size: 32px;215 color: #9aa0b5;216 font-weight: 700;217 }218 .nav-item.active { color: #1b214d; }219 .nav-icon { width: 56px; height: 56px; color: currentColor; }220 221 /* Small helpers */222 .muted { color: #727799; }223</style>224</head>225<body>226<div id="render-target">227 <div class="header">228 <div class="statusbar">229 <div>11:33</div>230 <div class="status-icons">231 <div class="dot"></div>232 <div class="dot"></div>233 <div class="dot"></div>234 <svg class="wifi" viewBox="0 0 24 24" stroke="#fff" fill="none" stroke-width="2.5">235 <path d="M2 8c5-5 15-5 20 0M5 11c3-3 11-3 14 0M8 14c2-2 6-2 8 0M12 18l0.01 0"></path>236 </svg>237 <div class="battery"><div class="level"></div></div>238 </div>239 </div>240 241 <div class="title-row">242 <svg class="icon" viewBox="0 0 24 24" stroke="#fff" fill="none">243 <path d="M14 5L6 12l8 7" stroke-width="3.5" stroke-linecap="round" stroke-linejoin="round"/>244 </svg>245 <h1>Where to next?</h1>246 </div>247 248 <div class="card">249 <div class="route-row">250 <div class="route-left">251 <svg class="icon" viewBox="0 0 24 24" stroke="#7f83a6" fill="none">252 <path d="M12 22s7-7 7-12a7 7 0 10-14 0c0 5 7 12 7 12z" stroke-width="2.5"/>253 <circle cx="12" cy="10" r="3" stroke-width="2.5"/>254 </svg>255 <div class="route-text">Amsterdam Centraal (Netherlands)</div>256 </div>257 <div class="swap-circle">258 <svg width="48" height="48" viewBox="0 0 24 24" stroke="currentColor" fill="none">259 <path d="M7 16l-3-3 3-3M7 13h10M17 8l3 3-3 3M17 11H7" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>260 </svg>261 </div>262 </div>263 <div class="divider"></div>264 <div class="route-row">265 <div class="route-left">266 <svg class="icon" viewBox="0 0 24 24" stroke="#7f83a6" fill="none">267 <path d="M12 22s7-7 7-12a7 7 0 10-14 0c0 5 7 12 7 12z" stroke-width="2.5"/>268 <circle cx="12" cy="10" r="3" stroke-width="2.5"/>269 </svg>270 <div class="route-text">Brussels Airport - Zaventem (Belgium)</div>271 </div>272 </div>273 </div>274 275 <div class="card">276 <div class="datetime-row">277 <svg class="icon" viewBox="0 0 24 24" stroke="#7f83a6" fill="none">278 <rect x="3" y="5" width="18" height="16" rx="2" stroke-width="2.5"/>279 <path d="M8 3v4M16 3v4M3 10h18" stroke-width="2.5"/>280 </svg>281 <div>Dep: 25 Sep 11:45</div>282 </div>283 </div>284 285 <div class="chip-row">286 <div class="chip filter">287 <svg class="icon" viewBox="0 0 24 24" stroke="#1b1540" fill="none">288 <path d="M3 5h18M7 12h10M10 19h4" stroke-width="3" stroke-linecap="round"/>289 </svg>290 <span>Filters</span>291 </div>292 <div class="chip outline">No seat reservations</div>293 <div class="chip outline">Transfer time</div>294 </div>295 </div>296 297 <div class="content">298 <div class="update">Last timetable update: <span class="bold">31 August 2023</span></div>299 300 <div class="earlier">301 <div>Earlier</div>302 <svg class="icon" viewBox="0 0 24 24" stroke="#3a3e5c" fill="none">303 <path d="M8 5l8 7-8 7" stroke-width="3.5" stroke-linecap="round" stroke-linejoin="round"/>304 </svg>305 </div>306 307 <!-- Result 1 -->308 <div class="result">309 <div class="time">12:11 → 14:19</div>310 <div class="meta">311 <div class="meta-item">312 <svg class="icon" viewBox="0 0 24 24" stroke="#6b728e" fill="none">313 <circle cx="12" cy="12" r="9" stroke-width="2.5"/>314 <path d="M12 7v6l4 2" stroke-width="2.5" stroke-linecap="round"/>315 </svg>316 <span>2h 8m</span>317 </div>318 <div class="meta-item">319 <svg class="icon" viewBox="0 0 24 24" stroke="#6b728e" fill="none">320 <path d="M4 18l6-6-2-2M10 6h7l-3 3M20 18l-6-6 2-2" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>321 </svg>322 <span>1</span>323 </div>324 </div>325 <div class="note">Seat reservations required</div>326 <div class="refresh">327 <svg width="54" height="54" viewBox="0 0 24 24" stroke="currentColor" fill="none">328 <path d="M21 12a9 9 0 10-3.5 7M21 12l-3-3M21 12l-3 3" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>329 </svg>330 </div>331 </div>332 333 <!-- Result 2 -->334 <div class="result">335 <div class="time">12:28 → 14:50</div>336 <div class="meta">337 <div class="meta-item">338 <svg class="icon" viewBox="0 0 24 24" stroke="#6b728e" fill="none">339 <circle cx="12" cy="12" r="9" stroke-width="2.5"/>340 <path d="M12 7v6l4 2" stroke-width="2.5" stroke-linecap="round"/>341 </svg>342 <span>2h 22m</span>343 </div>344 </div>345 <div class="supplement">346 <svg width="28" height="28" viewBox="0 0 24 24" stroke="#f29d38" fill="none">347 <circle cx="12" cy="12" r="9" stroke-width="2.5"/>348 <path d="M12 7v6M12 17h0" stroke-width="2.5" stroke-linecap="round"/>349 </svg>350 <span>Supplement required</span>351 </div>352 </div>353 354 <!-- Result 3 -->355 <div class="result">356 <div class="time">13:11 → 15:19</div>357 <div class="meta">358 <div class="meta-item">359 <svg class="icon" viewBox="0 0 24 24" stroke="#6b728e" fill="none">360 <circle cx="12" cy="12" r="9" stroke-width="2.5"/>361 <path d="M12 7v6l4 2" stroke-width="2.5" stroke-linecap="round"/>362 </svg>363 <span>2h 8m</span>364 </div>365 <div class="meta-item">366 <svg class="icon" viewBox="0 0 24 24" stroke="#6b728e" fill="none">367 <path d="M4 18l6-6-2-2M10 6h7l-3 3M20 18l-6-6 2-2" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>368 </svg>369 <span>1</span>370 </div>371 </div>372 <div class="note">Seat reservations required</div>373 <div class="refresh">374 <svg width="54" height="54" viewBox="0 0 24 24" stroke="currentColor" fill="none">375 <path d="M21 12a9 9 0 10-3.5 7M21 12l-3-3M21 12l-3 3" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>376 </svg>377 </div>378 </div>379 380 <!-- Result 4 -->381 <div class="result">382 <div class="time">13:28 → 15:50</div>383 <div class="meta">384 <div class="meta-item">385 <svg class="icon" viewBox="0 0 24 24" stroke="#6b728e" fill="none">386 <circle cx="12" cy="12" r="9" stroke-width="2.5"/>387 <path d="M12 7v6l4 2" stroke-width="2.5" stroke-linecap="round"/>388 </svg>389 <span>2h 22m</span>390 </div>391 </div>392 <div class="supplement">393 <svg width="28" height="28" viewBox="0 0 24 24" stroke="#f29d38" fill="none">394 <circle cx="12" cy="12" r="9" stroke-width="2.5"/>395 <path d="M12 7v6M12 17h0" stroke-width="2.5" stroke-linecap="round"/>396 </svg>397 <span>Supplement required</span>398 </div>399 </div>400 401 <!-- Result 5 -->402 <div class="result">403 <div class="time">14:28 → 16:50</div>404 <div class="meta">405 <div class="meta-item">406 <svg class="icon" viewBox="0 0 24 24" stroke="#6b728e" fill="none">407 <circle cx="12" cy="12" r="9" stroke-width="2.5"/>408 <path d="M12 7v6l4 2" stroke-width="2.5" stroke-linecap="round"/>409 </svg>410 <span>2h 22m</span>411 </div>412 </div>413 <div class="supplement">414 <svg width="28" height="28" viewBox="0 0 24 24" stroke="#f29d38" fill="none">415 <circle cx="12" cy="12" r="9" stroke-width="2.5"/>416 <path d="M12 7v6M12 17h0" stroke-width="2.5" stroke-linecap="round"/>417 </svg>418 <span>Supplement required</span>419 </div>420 </div>421 </div>422 423 <!-- Bottom Navigation -->424 <div class="bottom-nav">425 <div class="nav-item active">426 <svg class="nav-icon" viewBox="0 0 24 24" stroke="currentColor" fill="none">427 <circle cx="12" cy="12" r="9" stroke-width="2.5"/>428 <path d="M12 7v6l4 2" stroke-width="2.5" stroke-linecap="round"/>429 </svg>430 <div>Planner</div>431 </div>432 <div class="nav-item">433 <svg class="nav-icon" viewBox="0 0 24 24" stroke="currentColor" fill="none">434 <path d="M12 22s7-7 7-12a7 7 0 10-14 0c0 5 7 12 7 12z" stroke-width="2.5"/>435 <circle cx="12" cy="10" r="3" stroke-width="2.5"/>436 </svg>437 <div>My Trip</div>438 </div>439 <div class="nav-item">440 <svg class="nav-icon" viewBox="0 0 24 24" stroke="currentColor" fill="none">441 <rect x="5" y="4" width="14" height="18" rx="2" stroke-width="2.5"/>442 <path d="M8 9h8M8 13h8" stroke-width="2.5"/>443 </svg>444 <div>My Pass</div>445 </div>446 <div class="nav-item">447 <svg class="nav-icon" viewBox="0 0 24 24" stroke="currentColor" fill="none">448 <path d="M4 7h16M4 12h16M4 17h16" stroke-width="2.5" stroke-linecap="round"/>449 </svg>450 <div>More</div>451 </div>452 </div>453</div>454</body>455</html>