GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html>3<head>4<meta charset="UTF-8">5<title>Time Picker Modal UI</title>6<style>7 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }8 #render-target {9 width: 1080px;10 height: 2400px;11 position: relative;12 overflow: hidden;13 background: #ffffff;14 }15 16 /* Status bar */17 .status-bar {18 position: absolute;19 top: 0;20 left: 0;21 width: 1080px;22 height: 110px;23 display: flex;24 align-items: center;25 padding: 0 40px;26 box-sizing: border-box;27 color: #ffffff;28 z-index: 2;29 }30 .status-bar .time { font-size: 40px; font-weight: 600; letter-spacing: 1px; }31 .status-icons { margin-left: auto; display: flex; align-items: center; gap: 28px; }32 .dot {33 width: 36px; height: 36px; border-radius: 50%; background: #ffffff; opacity: 0.9;34 }35 .wifi svg, .battery svg { height: 40px; width: 50px; }36 .wifi svg path, .battery svg rect { fill: #ffffff; }37 38 /* Hero background */39 .hero {40 position: absolute;41 top: 0; left: 0;42 width: 1080px; height: 560px;43 background: #E0E0E0;44 border-bottom: 1px solid #BDBDBD;45 display: flex; align-items: flex-end; padding: 0 40px 40px; box-sizing: border-box;46 color: rgba(255,255,255,0.9);47 z-index: 1;48 }49 .hero::before {50 content: '';51 position: absolute; inset: 0;52 background: linear-gradient(to bottom, rgba(0,0,0,0.25), rgba(0,0,0,0.1) 40%, rgba(0,0,0,0.35));53 pointer-events: none;54 }55 .hero-label {56 position: absolute; inset: 0;57 display: flex; justify-content: center; align-items: center; color: #757575;58 font-size: 28px;59 }60 .hero h1 {61 position: relative;62 margin: 0;63 font-size: 80px;64 font-weight: 700;65 color: rgba(255,255,255,0.9);66 text-shadow: 0 2px 6px rgba(0,0,0,0.35);67 }68 69 /* Underlying content preview */70 .search-card {71 position: absolute;72 top: 580px; left: 40px;73 width: 1000px; height: 260px;74 background: #ffffff;75 border-radius: 24px;76 box-shadow: 0 8px 28px rgba(0,0,0,0.15);77 display: flex; align-items: center; padding: 30px; box-sizing: border-box;78 gap: 24px;79 z-index: 0;80 }81 .search-field {82 flex: 1;83 height: 100px;84 border: 1px solid #E2E2E2;85 border-radius: 18px;86 display: flex; align-items: center; justify-content: center;87 color: #666;88 font-size: 36px;89 }90 .cta-side {91 position: absolute;92 top: 900px; left: 40px;93 width: 1000px; height: 280px;94 background: linear-gradient(#f2e7d8, #eadcca);95 border-radius: 28px;96 box-shadow: inset 0 0 0 1px rgba(0,0,0,0.06), 0 12px 26px rgba(0,0,0,0.12);97 padding: 40px; box-sizing: border-box;98 }99 .cta-button {100 position: absolute; bottom: 40px; left: 40px;101 background: #22183f; color: #ffffff;102 height: 110px; width: 360px;103 border-radius: 18px;104 display: flex; align-items: center; justify-content: center;105 font-size: 36px; font-weight: 600;106 }107 108 /* Bottom navigation */109 .bottom-nav {110 position: absolute; bottom: 0; left: 0;111 width: 1080px; height: 160px; background: #f7f7f9; border-top: 1px solid #e6e6ea;112 display: flex; justify-content: space-around; align-items: center;113 color: #7c7c90;114 }115 .nav-item { display: flex; flex-direction: column; align-items: center; gap: 14px; font-size: 30px; }116 .nav-item svg { width: 56px; height: 56px; }117 .nav-active { color: #2E254D; font-weight: 700; }118 119 /* Modal */120 .modal {121 position: absolute;122 top: 700px; left: 60px;123 width: 960px; height: 1060px;124 background: #ffffff;125 border-radius: 18px;126 box-shadow: 0 18px 48px rgba(0,0,0,0.25);127 z-index: 3;128 padding: 40px;129 box-sizing: border-box;130 }131 .modal-header {132 display: flex; justify-content: space-between; align-items: center;133 padding: 8px 0 24px; box-sizing: border-box;134 }135 .tab {136 font-size: 44px; font-weight: 700; color: #4b4b56;137 }138 .tab.active { color: #2E254D; }139 .tab-underline {140 height: 8px; width: 360px; background: #2E254D; margin-top: 24px;141 }142 .time-picker {143 margin-top: 30px;144 display: flex; align-items: center; gap: 28px;145 }146 .column {147 width: 220px;148 display: flex; flex-direction: column; align-items: center; gap: 38px;149 }150 .num-faded { color: #b7bac9; font-size: 44px; }151 .num-active { color: #2E254D; font-size: 66px; font-weight: 700; }152 .underline {153 width: 160px; height: 8px; background: #2E254D; border-radius: 4px;154 }155 .colon { font-size: 66px; color: #2E254D; font-weight: 700; margin: 0 8px; }156 .now-btn {157 margin-left: auto;158 background: #FFC233; color: #3b2f00;159 height: 90px; width: 180px;160 border-radius: 14px; display: flex; align-items: center; justify-content: center;161 font-size: 36px; font-weight: 700;162 box-shadow: 0 6px 12px rgba(255,194,51,0.35);163 }164 .divider { margin: 40px 0 30px; height: 2px; background: #ececf1; }165 166 .date-row {167 display: flex; align-items: center; justify-content: space-between;168 padding: 10px 10px 20px;169 }170 .date-text { font-size: 44px; color: #1c2140; font-weight: 700; }171 .chev {172 width: 60px; height: 60px;173 display: flex; align-items: center; justify-content: center;174 }175 .chev svg { width: 40px; height: 40px; }176 .chev path { stroke: #FFC233; stroke-width: 8; fill: none; stroke-linecap: round; stroke-linejoin: round; }177 178 .footer-divider { margin: 24px 0 20px; height: 2px; background: #ececf1; }179 180 .modal-actions {181 display: flex; justify-content: flex-end; gap: 24px; align-items: center;182 }183 .btn {184 height: 110px; padding: 0 46px; border-radius: 16px; font-size: 40px; font-weight: 800;185 display: inline-flex; align-items: center; justify-content: center; cursor: default;186 }187 .btn-outline {188 color: #2E254D; border: 2px solid #dedde7; background: #ffffff;189 box-shadow: 0 2px 0 rgba(0,0,0,0.03) inset;190 }191 .btn-primary {192 background: #FFC233; color: #2E254D; border: none;193 box-shadow: 0 10px 18px rgba(255,194,51,0.35);194 }195 196 /* Image placeholder style */197 .img-ph {198 position: absolute;199 inset: 0;200 background: #E0E0E0;201 border: 1px solid #BDBDBD;202 display: flex; justify-content: center; align-items: center;203 color: #757575; font-size: 28px; font-weight: 600;204 }205</style>206</head>207<body>208<div id="render-target">209 <div class="hero">210 <div class="img-ph">[IMG: Scenic landscape with train]</div>211 <h1>Where to next?</h1>212 </div>213 214 <div class="status-bar">215 <div class="time">11:32</div>216 <div class="status-icons">217 <div class="dot"></div>218 <div class="dot"></div>219 <div class="dot"></div>220 <div class="dot"></div>221 <div class="wifi">222 <svg viewBox="0 0 24 24">223 <path d="M12 18c.6 0 1 .4 1 1s-.4 1-1 1-1-.4-1-1 .4-1 1-1zm-4-4c2.2-2.2 5.8-2.2 8 0l-1.4 1.4c-1.4-1.4-3.8-1.4-5.2 0L8 14zm-4-4c4.4-4.4 11.6-4.4 16 0l-1.4 1.4c-3.6-3.6-9.6-3.6-13.2 0L4 10z"/>224 </svg>225 </div>226 <div class="battery">227 <svg viewBox="0 0 26 24">228 <rect x="1" y="6" width="18" height="12" rx="2"></rect>229 <rect x="20" y="9" width="4" height="6" rx="1"></rect>230 </svg>231 </div>232 </div>233 </div>234 235 <div class="search-card">236 <div class="search-field">From / To</div>237 <div class="search-field">Passengers</div>238 <div class="search-field" style="width: 220px;">Date</div>239 </div>240 241 <div class="cta-side">242 <div style="color:#3a2e1f; font-size: 36px; font-weight: 700;">Best deals</div>243 <div class="cta-button">Book seats</div>244 </div>245 246 <!-- Modal -->247 <div class="modal">248 <div class="modal-header">249 <div>250 <div class="tab active">DEPARTURE</div>251 <div class="tab-underline"></div>252 </div>253 <div class="tab" style="color:#8a8a92;">ARRIVAL</div>254 </div>255 256 <div class="time-picker">257 <div class="column">258 <div class="num-faded">10</div>259 <div class="underline"></div>260 <div class="num-active">11</div>261 <div class="underline"></div>262 <div class="num-faded">12</div>263 </div>264 265 <div class="colon">:</div>266 267 <div class="column">268 <div class="num-faded">36</div>269 <div class="underline"></div>270 <div class="num-active">37</div>271 <div class="underline"></div>272 <div class="num-faded">38</div>273 </div>274 275 <div class="now-btn">Now</div>276 </div>277 278 <div class="divider"></div>279 280 <div class="date-row">281 <div class="chev">282 <svg viewBox="0 0 24 24"><path d="M15 6l-6 6 6 6"/></svg>283 </div>284 <div class="date-text">Mon 25 Sep 2023</div>285 <div class="chev">286 <svg viewBox="0 0 24 24"><path d="M9 6l6 6-6 6"/></svg>287 </div>288 </div>289 290 <div class="footer-divider"></div>291 292 <div class="modal-actions">293 <div class="btn btn-outline">CANCEL</div>294 <div class="btn btn-primary">DONE</div>295 </div>296 </div>297 298 <!-- Bottom navigation -->299 <div class="bottom-nav">300 <div class="nav-item nav-active">301 <svg viewBox="0 0 24 24">302 <circle cx="12" cy="12" r="9" fill="none" stroke="#2E254D" stroke-width="2"></circle>303 <path d="M12 6v6l4 2" stroke="#2E254D" stroke-width="2" fill="none" stroke-linecap="round"></path>304 </svg>305 <div>Planner</div>306 </div>307 <div class="nav-item">308 <svg viewBox="0 0 24 24">309 <path d="M12 2l4 7-4 13-4-13 4-7z" fill="none" stroke="#7c7c90" stroke-width="2"></path>310 </svg>311 <div>My Trip</div>312 </div>313 <div class="nav-item">314 <svg viewBox="0 0 24 24">315 <rect x="5" y="4" width="14" height="16" rx="2" fill="none" stroke="#7c7c90" stroke-width="2"></rect>316 <circle cx="12" cy="12" r="3" stroke="#7c7c90" stroke-width="2" fill="none"></circle>317 </svg>318 <div>My Pass</div>319 </div>320 <div class="nav-item">321 <svg viewBox="0 0 24 24">322 <path d="M3 6h18M3 12h18M3 18h18" stroke="#7c7c90" stroke-width="2" stroke-linecap="round"></path>323 </svg>324 <div>More</div>325 </div>326 </div>327</div>328</body>329</html>