GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<meta name="viewport" content="width=1080, initial-scale=1.0">6<title>Time Picker Modal UI</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }9 #render-target {10 width: 1080px;11 height: 2400px;12 position: relative;13 overflow: hidden;14 background: #f6f6f9;15 border-radius: 0;16 }17 18 /* Status bar */19 .status-bar {20 position: absolute;21 top: 0;22 left: 0;23 width: 1080px;24 height: 80px;25 display: flex;26 align-items: center;27 justify-content: space-between;28 padding: 0 28px;29 color: #ffffff;30 font-weight: 600;31 font-size: 32px;32 z-index: 5;33 }34 .sb-left, .sb-right { display: flex; align-items: center; gap: 18px; }35 .dot { width: 26px; height: 26px; background: #fff; border-radius: 50%; opacity: 0.9; }36 .square { width: 26px; height: 26px; background: #fff; border-radius: 6px; opacity: 0.9; }37 .wifi svg, .battery svg { display: block; }38 .wifi svg path { fill: none; stroke: #fff; stroke-width: 6; stroke-linecap: round; }39 .battery svg rect, .battery svg line { fill: none; stroke: #fff; stroke-width: 6; }40 41 /* Hero image placeholder */42 .hero {43 position: absolute;44 top: 0;45 left: 0;46 width: 1080px;47 height: 720px;48 }49 .hero .img-placeholder {50 width: 100%;51 height: 100%;52 background: #E0E0E0;53 border: 1px solid #BDBDBD;54 color: #757575;55 display: flex;56 justify-content: center;57 align-items: flex-end;58 font-size: 36px;59 letter-spacing: 0.2px;60 position: relative;61 }62 .hero .img-placeholder::before {63 content: "";64 position: absolute;65 inset: 0;66 background: linear-gradient(180deg, rgba(0,0,0,0.25) 0%, rgba(0,0,0,0.25) 40%, rgba(0,0,0,0.15) 70%, rgba(0,0,0,0.05) 100%);67 pointer-events: none;68 }69 .hero-title {70 position: absolute;71 left: 36px;72 bottom: 42px;73 font-size: 72px;74 font-weight: 700;75 color: rgba(255,255,255,0.9);76 text-shadow: 0 3px 8px rgba(0,0,0,0.35);77 }78 79 /* Content glimpse behind modal */80 .under-content {81 position: absolute;82 top: 720px;83 left: 0;84 width: 1080px;85 height: 900px;86 background: #ffffff;87 box-shadow: inset 0 1px 0 rgba(0,0,0,0.05);88 }89 .under-card {90 position: absolute;91 left: 60px;92 top: 100px;93 width: 960px;94 height: 600px;95 background: #fff;96 border-radius: 20px;97 box-shadow: 0 6px 30px rgba(0,0,0,0.08);98 padding: 30px;99 }100 .under-btn {101 position: absolute;102 left: 84px;103 bottom: 80px;104 width: 350px;105 height: 92px;106 background: #201942;107 border-radius: 16px;108 color: #fff;109 font-size: 38px;110 display: flex;111 align-items: center;112 justify-content: center;113 gap: 18px;114 box-shadow: 0 8px 20px rgba(32,25,66,0.25);115 }116 117 /* Scrim overlay for modal */118 .scrim {119 position: absolute;120 inset: 0;121 background: rgba(0,0,0,0.35);122 z-index: 10;123 }124 125 /* Modal */126 .modal {127 position: absolute;128 left: 70px;129 top: 570px;130 width: 940px;131 background: #ffffff;132 border-radius: 18px;133 box-shadow: 0 20px 60px rgba(0,0,0,0.35);134 z-index: 11;135 overflow: hidden;136 }137 .modal-inner { padding: 44px 52px; }138 139 .modal-tabs {140 display: flex;141 justify-content: space-between;142 align-items: center;143 margin-bottom: 24px;144 }145 .tab {146 font-size: 42px;147 font-weight: 700;148 letter-spacing: 0.5px;149 color: #2C254D;150 }151 .tab.inactive { color: #9997A9; }152 .tab-underline {153 width: 340px;154 height: 4px;155 background: #2C254D;156 margin-top: 8px;157 border-radius: 2px;158 }159 160 /* Time scroller */161 .time-row {162 display: grid;163 grid-template-columns: 1fr 80px 1fr auto;164 column-gap: 32px;165 align-items: center;166 margin-top: 40px;167 }168 .time-col {169 display: flex;170 flex-direction: column;171 align-items: center;172 width: 280px;173 }174 .time-item {175 font-size: 40px;176 color: #C3C6D5;177 padding: 14px 0;178 }179 .time-selected {180 font-size: 56px;181 font-weight: 700;182 color: #2C254D;183 padding: 14px 0;184 }185 .time-underline {186 width: 280px;187 height: 6px;188 background: #2C254D;189 border-radius: 4px;190 margin: 10px 0 8px;191 }192 .colon {193 font-size: 56px;194 font-weight: 700;195 color: #2C254D;196 text-align: center;197 }198 .now-btn {199 width: 180px;200 height: 84px;201 background: #F6B726;202 color: #2C254D;203 border-radius: 14px;204 font-size: 40px;205 font-weight: 800;206 display: flex;207 align-items: center;208 justify-content: center;209 box-shadow: 0 8px 18px rgba(246,183,38,0.4);210 }211 212 .divider {213 height: 1px;214 background: #ECECEC;215 margin: 36px 0;216 }217 218 .date-row {219 display: flex;220 align-items: center;221 justify-content: space-between;222 padding: 6px 6px;223 }224 .date-text {225 font-size: 44px;226 font-weight: 700;227 color: #212047;228 }229 .chev {230 width: 56px;231 height: 56px;232 display: flex;233 align-items: center;234 justify-content: center;235 }236 .chev svg path { stroke: #F3B324; stroke-width: 10; fill: none; stroke-linecap: round; stroke-linejoin: round; }237 238 .footer-divider { height: 1px; background: #ECECEC; margin-top: 26px; }239 240 .modal-actions {241 display: flex;242 justify-content: flex-end;243 gap: 22px;244 padding: 26px 52px 36px;245 }246 .btn {247 height: 96px;248 min-width: 220px;249 border-radius: 14px;250 font-size: 40px;251 font-weight: 800;252 display: flex;253 align-items: center;254 justify-content: center;255 box-sizing: border-box;256 }257 .btn-cancel {258 background: #ffffff;259 color: #2C254D;260 border: 3px solid #E4E4E9;261 }262 .btn-done {263 background: #F6B726;264 color: #2C254D;265 border: none;266 box-shadow: 0 10px 22px rgba(246,183,38,0.45);267 min-width: 240px;268 }269 270 /* Bottom nav bar */271 .bottom-nav {272 position: absolute;273 bottom: 0;274 left: 0;275 width: 1080px;276 height: 180px;277 background: rgba(255,255,255,0.94);278 border-top: 1px solid #eaeaea;279 display: grid;280 grid-template-columns: repeat(4, 1fr);281 align-items: center;282 z-index: 8;283 }284 .nav-item {285 display: flex;286 flex-direction: column;287 align-items: center;288 gap: 14px;289 color: #8A8DA1;290 font-size: 32px;291 font-weight: 700;292 }293 .nav-item.active { color: #2C254D; }294 .nav-icon svg { width: 48px; height: 48px; stroke: currentColor; stroke-width: 7; fill: none; }295 296 /* Safe area pill */297 .home-pill {298 position: absolute;299 bottom: 20px;300 left: 50%;301 transform: translateX(-50%);302 width: 240px;303 height: 12px;304 background: #DADDE6;305 border-radius: 8px;306 z-index: 9;307 }308</style>309</head>310<body>311<div id="render-target">312 313 <!-- Status bar -->314 <div class="status-bar">315 <div class="sb-left">316 <div>1:11</div>317 <div class="dot"></div>318 <div class="square"></div>319 <div style="font-size:26px; opacity:0.9;">oyo</div>320 </div>321 <div class="sb-right">322 <div class="wifi">323 <svg width="60" height="40" viewBox="0 0 60 40">324 <path d="M6 14c8-8 40-8 48 0"></path>325 <path d="M12 22c6-6 30-6 36 0"></path>326 <path d="M20 30c4-4 16-4 20 0"></path>327 </svg>328 </div>329 <div class="battery">330 <svg width="70" height="36" viewBox="0 0 70 36">331 <rect x="4" y="6" width="54" height="24" rx="4"></rect>332 <rect x="60" y="12" width="6" height="12" rx="2"></rect>333 <line x1="8" y1="10" x2="50" y2="10"></line>334 </svg>335 </div>336 </div>337 </div>338 339 <!-- Hero image placeholder -->340 <div class="hero">341 <div class="img-placeholder">[IMG: Scenic mountain valley with train]</div>342 <div class="hero-title">Where to next?</div>343 </div>344 345 <!-- Background content glimpse -->346 <div class="under-content">347 <div class="under-card">348 <div style="width: 100%; height: 120px; background:#faf7ef; border-radius: 18px; margin-bottom: 20px;"></div>349 <div style="width: 100%; height: 120px; background:#f2f2f7; border-radius: 18px; margin-bottom: 20px;"></div>350 <div style="width: 100%; height: 180px; background:#f2f2f7; border-radius: 18px; margin-bottom: 20px;"></div>351 </div>352 <div class="under-btn">353 <svg width="46" height="46" viewBox="0 0 48 48" style="stroke:#fff; stroke-width:4; fill:none;">354 <rect x="8" y="14" width="32" height="22" rx="4"></rect>355 <line x1="16" y1="8" x2="16" y2="14"></line>356 <line x1="32" y1="8" x2="32" y2="14"></line>357 </svg>358 <span>Book seats</span>359 </div>360 </div>361 362 <!-- Scrim -->363 <div class="scrim"></div>364 365 <!-- Modal -->366 <div class="modal">367 <div class="modal-inner">368 <div class="modal-tabs">369 <div>370 <div class="tab">DEPARTURE</div>371 <div class="tab-underline"></div>372 </div>373 <div class="tab inactive">ARRIVAL</div>374 </div>375 376 <div class="time-row">377 <!-- Hours column -->378 <div class="time-col">379 <div class="time-item">07</div>380 <div class="time-underline"></div>381 <div class="time-selected">08</div>382 <div class="time-underline"></div>383 <div class="time-item">09</div>384 </div>385 386 <!-- Colon -->387 <div class="colon">:</div>388 389 <!-- Minutes column -->390 <div class="time-col">391 <div class="time-item">00</div>392 <div class="time-underline"></div>393 <div class="time-selected">01</div>394 <div class="time-underline"></div>395 <div class="time-item">02</div>396 </div>397 398 <!-- Now button -->399 <div class="now-btn">Now</div>400 </div>401 402 <div class="divider"></div>403 404 <div class="date-row">405 <div class="chev">406 <svg viewBox="0 0 56 56">407 <path d="M34 14 L20 28 L34 42"></path>408 </svg>409 </div>410 <div class="date-text">Sun 27 Aug 2023</div>411 <div class="chev">412 <svg viewBox="0 0 56 56">413 <path d="M22 14 L36 28 L22 42"></path>414 </svg>415 </div>416 </div>417 418 <div class="footer-divider"></div>419 420 <div class="modal-actions">421 <div class="btn btn-cancel">CANCEL</div>422 <div class="btn btn-done">DONE</div>423 </div>424 </div>425 </div>426 427 <!-- Bottom navigation bar -->428 <div class="bottom-nav">429 <div class="nav-item active">430 <div class="nav-icon">431 <svg viewBox="0 0 48 48">432 <circle cx="24" cy="24" r="16"></circle>433 <line x1="24" y1="12" x2="24" y2="24"></line>434 <line x1="24" y1="24" x2="32" y2="28"></line>435 </svg>436 </div>437 <div>Planner</div>438 </div>439 <div class="nav-item">440 <div class="nav-icon">441 <svg viewBox="0 0 48 48">442 <path d="M24 8c8 0 12 6 12 12 0 10-12 20-12 20S12 30 12 20c0-6 4-12 12-12z"></path>443 <circle cx="24" cy="20" r="4"></circle>444 </svg>445 </div>446 <div>My Trip</div>447 </div>448 <div class="nav-item">449 <div class="nav-icon">450 <svg viewBox="0 0 48 48">451 <rect x="10" y="10" width="28" height="20" rx="3"></rect>452 <line x1="10" y1="32" x2="38" y2="32"></line>453 </svg>454 </div>455 <div>My Pass</div>456 </div>457 <div class="nav-item">458 <div class="nav-icon">459 <svg viewBox="0 0 48 48">460 <line x1="10" y1="14" x2="38" y2="14"></line>461 <line x1="10" y1="24" x2="38" y2="24"></line>462 <line x1="10" y1="34" x2="38" y2="34"></line>463 </svg>464 </div>465 <div>More</div>466 </div>467 </div>468 469 <div class="home-pill"></div>470</div>471</body>472</html>