GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html>3<head>4<meta charset="utf-8">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: #f6f6f8;14 border-radius: 0;15 }16 17 /* Status bar */18 .status-bar {19 position: absolute;20 top: 20px;21 left: 24px;22 right: 24px;23 height: 48px;24 display: flex;25 align-items: center;26 justify-content: space-between;27 color: white;28 z-index: 2;29 font-family: Arial, sans-serif;30 font-size: 34px;31 font-weight: 600;32 letter-spacing: 0.5px;33 }34 .status-right {35 display: flex;36 align-items: center;37 gap: 20px;38 }39 .status-dot {40 width: 26px;41 height: 26px;42 background: #fff;43 border-radius: 50%;44 margin-left: 18px;45 }46 .wifi-icon svg, .battery-icon svg { display:block; }47 48 /* Background content */49 .hero {50 position: absolute;51 top: 0;52 left: 0;53 width: 1080px;54 height: 620px;55 }56 .hero .img {57 width: 100%;58 height: 100%;59 background: #E0E0E0;60 border: 1px solid #BDBDBD;61 display: flex;62 justify-content: center;63 align-items: center;64 color: #757575;65 font-family: Arial, sans-serif;66 font-size: 38px;67 }68 .hero-title {69 position: absolute;70 bottom: 36px;71 left: 36px;72 font-family: Arial, sans-serif;73 font-size: 88px;74 font-weight: 700;75 color: rgba(255,255,255,0.85);76 text-shadow: 0 2px 8px rgba(0,0,0,0.35);77 }78 79 .content-card {80 position: absolute;81 top: 640px;82 left: 28px;83 width: 1024px;84 height: 920px;85 background: #ffffff;86 border-radius: 22px;87 box-shadow: 0 8px 24px rgba(0,0,0,0.15);88 opacity: 0.6;89 }90 .cta-strip {91 position: absolute;92 top: 1540px;93 left: 60px;94 width: 960px;95 height: 360px;96 background: #f0e2cc;97 border-radius: 28px;98 }99 .book-btn {100 position: absolute;101 top: 1810px;102 left: 90px;103 width: 420px;104 height: 100px;105 background: #221a3f;106 color: #fff;107 border-radius: 20px;108 font-family: Arial, sans-serif;109 font-size: 40px;110 display: flex;111 align-items: center;112 justify-content: center;113 }114 115 /* Bottom nav */116 .bottom-nav {117 position: absolute;118 bottom: 90px;119 left: 0;120 width: 1080px;121 height: 130px;122 background: #ffffff;123 box-shadow: 0 -4px 12px rgba(0,0,0,0.08);124 display: flex;125 justify-content: space-around;126 align-items: center;127 font-family: Arial, sans-serif;128 }129 .nav-item {130 display: flex;131 flex-direction: column;132 align-items: center;133 gap: 12px;134 color: #3c385f;135 font-size: 34px;136 }137 .nav-icon {138 width: 70px; height: 70px; border-radius: 16px; background:#eee; border:1px solid #bbb;139 display:flex; align-items:center; justify-content:center; color:#757575; font-size:26px;140 }141 142 /* Overlay for modal */143 .overlay {144 position: absolute;145 top: 0; left: 0;146 width: 1080px; height: 2400px;147 background: rgba(0,0,0,0.35);148 z-index: 5;149 }150 151 /* Modal */152 .modal {153 position: absolute;154 top: 720px;155 left: 80px;156 width: 920px;157 background: #ffffff;158 border-radius: 18px;159 box-shadow: 0 16px 32px rgba(0,0,0,0.35);160 z-index: 6;161 padding: 48px 52px 40px;162 font-family: Arial, sans-serif;163 }164 .tab-row {165 display: flex;166 justify-content: space-between;167 align-items: center;168 margin-bottom: 26px;169 }170 .tab {171 font-size: 46px;172 font-weight: 800;173 letter-spacing: 1px;174 color: #2c264d;175 }176 .tab.inactive { color: #9a98a5; font-weight: 700; }177 .tab-underline {178 width: 380px;179 height: 4px;180 background: #2c264d;181 margin-top: 14px;182 }183 184 .time-area {185 margin-top: 40px;186 position: relative;187 }188 .time-grid {189 display: grid;190 grid-template-columns: 1fr 160px 1fr auto;191 align-items: center;192 column-gap: 24px;193 }194 .time-col {195 display: flex;196 flex-direction: column;197 align-items: center;198 width: 260px;199 }200 .time-faint {201 color: #c6c8d2;202 font-size: 48px;203 margin: 12px 0;204 }205 .time-selected {206 font-size: 86px;207 font-weight: 800;208 color: #2c264d;209 line-height: 1.1;210 margin: 10px 0;211 }212 .time-underline {213 width: 240px;214 height: 6px;215 background: #2c264d;216 border-radius: 4px;217 margin-top: 14px;218 }219 .colon {220 font-size: 86px;221 font-weight: 800;222 color: #2c264d;223 text-align: center;224 }225 .now-btn {226 width: 170px;227 height: 80px;228 background: #FFC533;229 color: #2c264d;230 border-radius: 16px;231 font-size: 40px;232 font-weight: 800;233 display: flex;234 align-items: center;235 justify-content: center;236 margin-left: 10px;237 }238 239 .divider {240 height: 2px;241 background: #eee;242 margin: 38px 0;243 }244 245 .date-row {246 display: flex;247 align-items: center;248 justify-content: space-between;249 padding: 0 6px;250 }251 .date-text {252 font-size: 46px;253 color: #2c264d;254 font-weight: 700;255 }256 .arrow-btn {257 width: 64px; height: 64px;258 border-radius: 16px;259 display:flex; align-items:center; justify-content:center;260 }261 .arrow-btn svg { width: 38px; height: 38px; }262 .arrow-left svg path, .arrow-right svg path { stroke: #FFC533; stroke-width: 8; fill: none; stroke-linecap: round; stroke-linejoin: round; }263 264 .actions {265 display: flex;266 justify-content: space-between;267 margin-top: 26px;268 }269 .btn-outline {270 width: 290px; height: 96px;271 border: 2px solid #e4e4ea;272 border-radius: 18px;273 color: #2c264d;274 font-size: 42px;275 font-weight: 800;276 display:flex; align-items:center; justify-content:center;277 background:#fff;278 }279 .btn-primary {280 width: 290px; height: 96px;281 background: #FFC533;282 border-radius: 18px;283 color: #2c264d;284 font-size: 42px;285 font-weight: 800;286 display:flex; align-items:center; justify-content:center;287 }288 289 /* Gesture bar */290 .gesture {291 position: absolute;292 bottom: 24px;293 left: 50%;294 transform: translateX(-50%);295 width: 300px;296 height: 12px;297 background: #e6e6e6;298 border-radius: 8px;299 }300</style>301</head>302<body>303<div id="render-target">304 305 <!-- Status bar -->306 <div class="status-bar">307 <div class="status-left">308 1:10309 <span class="status-dot"></span>310 <span class="status-dot"></span>311 <span style="font-size:28px; margin-left:12px;">ovo</span>312 </div>313 <div class="status-right">314 <div class="wifi-icon">315 <svg width="48" height="40" viewBox="0 0 48 40">316 <path d="M4 12c10-8 30-8 40 0" stroke="#fff" stroke-width="4" fill="none" stroke-linecap="round"/>317 <path d="M10 18c7-5 21-5 28 0" stroke="#fff" stroke-width="4" fill="none" stroke-linecap="round"/>318 <path d="M18 24c4-3 8-3 12 0" stroke="#fff" stroke-width="4" fill="none" stroke-linecap="round"/>319 <circle cx="24" cy="30" r="3" fill="#fff"/>320 </svg>321 </div>322 <div class="battery-icon">323 <svg width="54" height="28" viewBox="0 0 54 28">324 <rect x="2" y="4" width="44" height="20" rx="4" stroke="#fff" stroke-width="3" fill="none"/>325 <rect x="6" y="8" width="28" height="12" rx="2" fill="#fff"/>326 <rect x="48" y="10" width="4" height="8" rx="2" fill="#fff"/>327 </svg>328 </div>329 </div>330 </div>331 332 <!-- Background hero image -->333 <div class="hero">334 <div class="img">[IMG: Scenic mountain railway]</div>335 <div class="hero-title">Where to next?</div>336 </div>337 338 <!-- Faint content cards below the hero (non-interactive placeholder) -->339 <div class="content-card"></div>340 <div class="cta-strip"></div>341 <div class="book-btn">Book seats</div>342 343 <!-- Dim overlay -->344 <div class="overlay"></div>345 346 <!-- Modal dialog -->347 <div class="modal">348 <div class="tab-row">349 <div>350 <div class="tab">DEPARTURE</div>351 <div class="tab-underline"></div>352 </div>353 <div class="tab inactive">ARRIVAL</div>354 </div>355 356 <div class="time-area">357 <div class="time-grid">358 <div class="time-col">359 <div class="time-faint">11</div>360 <div class="time-selected">12</div>361 <div class="time-underline"></div>362 <div class="time-faint">13</div>363 </div>364 365 <div class="colon">:</div>366 367 <div class="time-col">368 <div class="time-faint">00</div>369 <div class="time-selected">01</div>370 <div class="time-underline"></div>371 <div class="time-faint">02</div>372 </div>373 374 <div class="now-btn">Now</div>375 </div>376 </div>377 378 <div class="divider"></div>379 380 <div class="date-row">381 <div class="arrow-btn arrow-left">382 <svg viewBox="0 0 40 40">383 <path d="M26 8 L14 20 L26 32"/>384 </svg>385 </div>386 <div class="date-text">Sun 27 Aug 2023</div>387 <div class="arrow-btn arrow-right">388 <svg viewBox="0 0 40 40">389 <path d="M14 8 L26 20 L14 32"/>390 </svg>391 </div>392 </div>393 394 <div class="divider"></div>395 396 <div class="actions">397 <div class="btn-outline">CANCEL</div>398 <div class="btn-primary">DONE</div>399 </div>400 </div>401 402 <!-- Bottom navigation bar -->403 <div class="bottom-nav">404 <div class="nav-item">405 <div class="nav-icon">🕘</div>406 <div>Planner</div>407 </div>408 <div class="nav-item">409 <div class="nav-icon">🗺️</div>410 <div>My Trip</div>411 </div>412 <div class="nav-item">413 <div class="nav-icon">🎫</div>414 <div>My Pass</div>415 </div>416 <div class="nav-item">417 <div class="nav-icon">≡</div>418 <div>More</div>419 </div>420 </div>421 422 <div class="gesture"></div>423</div>424</body>425</html>