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 Mock</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; }9 #render-target {10 width: 1080px; height: 2400px;11 position: relative; overflow: hidden;12 background: #fafafa;13 border-radius: 0;14 }15 16 /* Background app (blurred-like) */17 .hero {18 position: relative;19 height: 560px;20 }21 .hero .img {22 position: absolute; inset: 0;23 background: #E0E0E0;24 border: 1px solid #BDBDBD;25 display: flex; align-items: center; justify-content: center;26 color: #757575; font-size: 36px; letter-spacing: 0.5px;27 }28 .hero .title {29 position: absolute; bottom: 48px; left: 48px;30 font-size: 92px; font-weight: 700; color: rgba(255,255,255,0.85);31 text-shadow: 0 2px 8px rgba(0,0,0,0.35);32 }33 34 /* Status bar */35 .status-bar {36 position: absolute; top: 18px; left: 24px; right: 24px;37 height: 44px; display: flex; align-items: center; justify-content: space-between;38 color: #fff; font-weight: 600; font-size: 38px;39 mix-blend-mode: normal;40 }41 .status-right { display: flex; gap: 18px; align-items: center; }42 .dot { width: 24px; height: 24px; background: #fff; border-radius: 50%; display: inline-block; opacity: 0.9; }43 44 /* Page content (behind modal) */45 .content {46 padding: 24px 36px 120px;47 }48 .card {49 margin-top: 16px;50 background: #ffffff;51 border-radius: 20px;52 box-shadow: 0 4px 20px rgba(0,0,0,0.08);53 padding: 28px;54 }55 .ghost-btn {56 margin-top: 20px;57 height: 96px;58 background: #1f1a3f;59 color: #fff;60 border-radius: 18px;61 display: inline-flex; align-items: center; gap: 20px;62 padding: 0 32px; font-size: 42px; font-weight: 600;63 }64 .ghost-icon {65 width: 56px; height: 56px; border: 3px solid #fff; border-radius: 8px;66 display: inline-block;67 }68 69 /* Backdrop */70 .backdrop {71 position: absolute; inset: 0;72 background: rgba(0,0,0,0.46);73 }74 75 /* Dialog */76 .dialog {77 position: absolute; left: 80px; right: 80px; top: 560px;78 background: #fff; border-radius: 18px;79 box-shadow: 0 24px 60px rgba(0,0,0,0.35);80 padding: 44px 40px 36px;81 }82 .dialog-header {83 display: flex; justify-content: space-between; align-items: flex-end;84 padding: 12px 8px 24px;85 }86 .tab {87 font-size: 44px; font-weight: 700; letter-spacing: 1px; color: #1e1b3a;88 }89 .tab.inactive { color: #8b8897; }90 .tab-underline {91 margin-top: 16px; width: 44%;92 height: 4px; background: #2b244b; border-radius: 2px;93 }94 95 /* Time selector area */96 .time-area {97 padding: 40px 8px 28px;98 }99 .time-row {100 display: grid; grid-template-columns: 1fr 40px 1fr auto; align-items: center;101 gap: 24px;102 }103 .time-col {104 text-align: center;105 }106 .time-col .rail {107 height: 4px; background: #2b244b; border-radius: 2px; margin: 18px 60px;108 }109 .time-value {110 font-size: 88px; font-weight: 700; color: #1f1a3f; line-height: 1.1;111 letter-spacing: 2px;112 }113 .time-muted {114 text-align: center; color: #b8bbc7; font-size: 44px; font-weight: 600;115 letter-spacing: 2px; margin-top: 8px;116 }117 .colon {118 font-size: 88px; font-weight: 800; color: #1f1a3f; text-align: center;119 }120 .now-btn {121 justify-self: end;122 background: #f3b41c; color: #1f1a3f; border: none; border-radius: 16px;123 padding: 26px 34px; font-size: 44px; font-weight: 800;124 box-shadow: 0 2px 0 rgba(0,0,0,0.08);125 }126 127 /* Date row */128 .divider { height: 2px; background: #eee; margin: 12px 0 20px; }129 .date-row {130 display: grid; grid-template-columns: 80px 1fr 80px; align-items: center;131 padding: 8px 0 22px;132 }133 .date-text {134 text-align: center; color: #1f1a3f; font-size: 48px; font-weight: 700;135 }136 .chev {137 width: 46px; height: 46px; display: inline-flex; align-items: center; justify-content: center;138 margin: 0 auto;139 }140 .chev svg path { stroke: #f3b41c; stroke-width: 16; fill: none; stroke-linecap: round; stroke-linejoin: round; }141 142 /* Footer buttons */143 .footer {144 display: flex; justify-content: flex-end; gap: 24px; padding-top: 24px;145 }146 .btn {147 padding: 26px 46px; border-radius: 16px; font-size: 44px; font-weight: 800; border: 2px solid transparent;148 }149 .btn-cancel { background: #fff; color: #2b244b; border-color: #e4e4e4; }150 .btn-done { background: #f3b41c; color: #1f1a3f; }151 152 /* Bottom nav & gesture bar */153 .bottom-nav {154 position: absolute; bottom: 72px; left: 0; right: 0;155 display: flex; justify-content: space-around; align-items: center;156 padding: 18px 20px; color: #9898a7; font-weight: 700; font-size: 34px;157 }158 .nav-item { display: flex; flex-direction: column; align-items: center; gap: 10px; }159 .nav-item.active { color: #1f1a3f; }160 .gesture {161 position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%);162 width: 320px; height: 12px; background: #d9d9d9; border-radius: 8px;163 }164 165 /* Dim everything behind modal slightly to emulate blur */166 .dimmed *:not(.backdrop):not(.dialog) { filter: saturate(80%) brightness(0.92); }167</style>168</head>169<body>170<div id="render-target">171 <!-- Background app UI -->172 <div class="status-bar">173 <div>1:10</div>174 <div class="status-right">175 <span class="dot"></span><span class="dot"></span>176 <span style="color:#fff; font-weight:800;">ayo</span>177 <svg width="44" height="44" viewBox="0 0 24 24" fill="none">178 <path d="M2 18c4-6 8-6 12 0 2-3 4-4 8 0" stroke="#fff" stroke-width="2" stroke-linecap="round"/>179 <circle cx="20" cy="18" r="1.5" fill="#fff"/>180 </svg>181 <svg width="44" height="44" viewBox="0 0 24 24" fill="none">182 <rect x="3" y="6" width="16" height="12" rx="2" stroke="#fff" stroke-width="2"/>183 <rect x="5" y="8" width="12" height="8" fill="#fff"/>184 </svg>185 </div>186 </div>187 188 <div class="hero">189 <div class="img">[IMG: Mountain railway landscape]</div>190 <div class="title">Where to next?</div>191 </div>192 193 <div class="content">194 <div class="card" style="height: 320px;">195 <div style="height: 100px; background:#f2f0f7; border-radius:12px; margin-bottom:18px;"></div>196 <div style="height: 100px; background:#f2f0f7; border-radius:12px;"></div>197 </div>198 <div class="card" style="margin-top: 28px;">199 <div style="height: 160px; background: linear-gradient(180deg,#fff7e0,#f4e9d4); border-radius:16px; padding:24px;">200 <div style="color:#1f1a3f; font-weight:800; font-size:40px;">Best price</div>201 <div style="color:#6c6a78; font-size:34px; margin-top:8px;">Lorem ipsum dolor sit amet, book your seats below.</div>202 </div>203 <div class="ghost-btn"><span class="ghost-icon"></span> Book seats</div>204 </div>205 </div>206 207 <!-- Modal overlay -->208 <div class="backdrop"></div>209 210 <div class="dialog">211 <div class="dialog-header">212 <div style="width:100%;">213 <div class="tab">DEPARTURE</div>214 <div class="tab-underline"></div>215 </div>216 <div class="tab inactive">ARRIVAL</div>217 </div>218 219 <div class="time-area">220 <div class="time-muted" style="display:grid; grid-template-columns:1fr 40px 1fr auto; gap:24px; align-items:center;">221 <div>12</div><div></div><div>00</div><div></div>222 </div>223 224 <div class="time-row">225 <div class="time-col">226 <div class="rail"></div>227 <div class="time-value">13</div>228 <div class="rail"></div>229 </div>230 <div class="colon">:</div>231 <div class="time-col">232 <div class="rail"></div>233 <div class="time-value">01</div>234 <div class="rail"></div>235 </div>236 <button class="now-btn">Now</button>237 </div>238 239 <div class="time-muted" style="display:grid; grid-template-columns:1fr 40px 1fr auto; gap:24px; align-items:center;">240 <div>14</div><div></div><div>02</div><div></div>241 </div>242 </div>243 244 <div class="divider"></div>245 246 <div class="date-row">247 <div class="chev">248 <svg viewBox="0 0 24 24">249 <path d="M14.5 5.5L7.5 12l7 6.5"/>250 </svg>251 </div>252 <div class="date-text">Sun 27 Aug 2023</div>253 <div class="chev">254 <svg viewBox="0 0 24 24">255 <path d="M9.5 5.5L16.5 12l-7 6.5"/>256 </svg>257 </div>258 </div>259 260 <div class="divider" style="margin-top: 10px;"></div>261 262 <div class="footer">263 <button class="btn btn-cancel">CANCEL</button>264 <button class="btn btn-done">DONE</button>265 </div>266 </div>267 268 <!-- Bottom nav and gesture bar -->269 <div class="bottom-nav">270 <div class="nav-item active">271 <svg width="52" height="52" viewBox="0 0 24 24" fill="none">272 <circle cx="12" cy="12" r="9" stroke="currentColor" stroke-width="2"/>273 <path d="M12 7v5l3 2" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>274 </svg>275 <div>Planner</div>276 </div>277 <div class="nav-item">278 <svg width="52" height="52" viewBox="0 0 24 24" fill="none">279 <path d="M3 8l9-5 9 5v9a3 3 0 0 1-3 3H6a3 3 0 0 1-3-3V8z" stroke="currentColor" stroke-width="2"/>280 </svg>281 <div>My Trip</div>282 </div>283 <div class="nav-item">284 <svg width="52" height="52" viewBox="0 0 24 24" fill="none">285 <rect x="6" y="3" width="12" height="18" rx="2" stroke="currentColor" stroke-width="2"/>286 <circle cx="12" cy="17" r="1" fill="currentColor"/>287 </svg>288 <div>My Pass</div>289 </div>290 <div class="nav-item">291 <svg width="52" height="52" viewBox="0 0 24 24" fill="none">292 <path d="M4 6h16M4 12h16M4 18h16" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>293 </svg>294 <div>More</div>295 </div>296 </div>297 <div class="gesture"></div>298</div>299</body>300</html>