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 :root{9 --purple:#241a4a;10 --purple-dark:#1d153d;11 --muted:#9aa0b6;12 --yellow:#ffc23a;13 --text:#1c1a30;14 --divider:#e9e9ee;15 }16 body{margin:0;padding:0;background:transparent;font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;color:var(--text);}17 #render-target{18 width:1080px;height:2400px;19 position:relative;overflow:hidden;20 background:#f6f6f8;21 }22 23 /* Background screen */24 .hero{25 position:absolute;left:0;top:0;width:1080px;height:720px;26 background:#E0E0E0;border:1px solid #BDBDBD;27 display:flex;align-items:flex-end;justify-content:flex-start;28 padding:40px;29 color:#757575;font-weight:600;font-size:26px;letter-spacing:.2px;30 }31 .hero::before{content:"[IMG: Mountain valley with train]";}32 .hero-title{33 position:absolute;left:48px;bottom:36px;34 font-size:72px;color:#ffffffcc;font-weight:700;35 }36 37 .content-card{38 position:absolute;left:48px;top:860px;width:984px;height:520px;39 background:#ffffff;box-shadow:0 6px 24px rgba(0,0,0,0.08);40 border-radius:24px;overflow:hidden;41 }42 .content-card .inner{43 position:absolute;left:32px;right:32px;top:32px;bottom:32px;44 background:linear-gradient(180deg,#fff 0%,#faf8f3 100%);45 border-radius:20px;padding:28px;46 }47 .book-row{48 position:absolute;left:36px;bottom:36px;width:420px;height:96px;49 background:#241a4a;border-radius:20px;50 display:flex;align-items:center;justify-content:center;51 color:#fff;font-size:40px;font-weight:700;52 box-shadow:0 6px 16px rgba(36,26,74,0.25);53 }54 .book-row svg{margin-right:18px}55 56 /* Overlay and modal */57 .overlay{58 position:absolute;inset:0;background:rgba(0,0,0,0.45);59 }60 .modal{61 position:absolute;left:80px;top:690px;width:920px;min-height:1160px;62 background:#fff;border-radius:22px;63 box-shadow:0 24px 60px rgba(0,0,0,0.35);64 }65 .modal-section{padding:64px 64px 40px 64px}66 .tab-row{67 display:flex;justify-content:space-between;align-items:flex-end;68 }69 .tab{70 font-size:46px;font-weight:800;letter-spacing:.8px;text-transform:uppercase;71 color:#7d7a86;72 }73 .tab.active{color:var(--purple)}74 .tab-underline{75 margin-top:22px;height:6px;width:360px;background:var(--purple);76 border-radius:3px;77 }78 79 /* Time picker visuals */80 .time-area{margin-top:34px;text-align:center}81 .time-faint{82 font-size:52px;color:#c2c5d4;letter-spacing:2px;margin:22px 0;83 }84 .time-selected{85 display:flex;align-items:center;justify-content:center;86 gap:24px;margin:20px 0;87 }88 .time-box{89 width:200px;90 display:flex;align-items:center;justify-content:center;91 position:relative;92 }93 .time-box .line{height:6px;background:var(--purple);border-radius:3px;margin-bottom:18px}94 .time-box .line.bottom{margin-top:18px;margin-bottom:0}95 .time-value{font-size:76px;color:var(--purple);font-weight:800;letter-spacing:4px}96 .colon{font-size:76px;color:var(--purple);font-weight:800;margin:0 4px}97 .now-btn{98 margin-left:28px;background:var(--yellow);color:#231a45;99 font-weight:800;border:none;border-radius:18px;padding:22px 36px;100 font-size:42px;box-shadow:0 6px 18px rgba(255,194,58,.35);101 }102 .divider{height:2px;background:var(--divider);margin:46px 0}103 104 /* Date row */105 .date-row{106 display:flex;align-items:center;justify-content:space-between;107 }108 .date-text{109 font-size:48px;color:var(--purple);font-weight:700;110 }111 .chev{112 width:56px;height:56px;113 }114 .chev path{fill:var(--yellow)}115 116 /* Footer buttons */117 .footer{118 display:flex;justify-content:flex-end;gap:30px;padding:36px 64px 60px 64px;119 }120 .btn{121 min-width:240px;height:104px;border-radius:18px;font-size:42px;font-weight:800;122 display:flex;align-items:center;justify-content:center;123 box-sizing:border-box;124 }125 .btn.cancel{border:2px solid #dcdbe5;color:var(--purple);background:#fff}126 .btn.done{background:var(--yellow);color:#231a45}127 128 /* Bottom navigation (behind modal) */129 .bottom-nav{130 position:absolute;left:0;bottom:80px;width:1080px;height:180px;131 background:#ffffff;box-shadow:0 -6px 20px rgba(0,0,0,0.06);132 display:flex;justify-content:space-around;align-items:center;133 }134 .nav-item{display:flex;flex-direction:column;align-items:center;gap:16px}135 .nav-item span{font-size:36px;color:#241a4a;opacity:.65}136 .nav-item.active span{opacity:1;color:#241a4a}137 .nav-icon{width:72px;height:72px}138 .nav-icon path{fill:#241a4a;opacity:.85}139 .nav-item.active .nav-icon path{fill:#241a4a}140 141 /* Safe area pill at the very bottom */142 .home-indicator{143 position:absolute;left:50%;transform:translateX(-50%);144 bottom:18px;width:300px;height:12px;background:#e0e0e5;border-radius:6px;145 }146</style>147</head>148<body>149<div id="render-target">150 151 <!-- Background content -->152 <div class="hero"></div>153 <div class="hero-title">Where to next?</div>154 155 <div class="content-card">156 <div class="inner">157 <!-- Placeholder inner content -->158 </div>159 <div class="book-row">160 <svg class="nav-icon" viewBox="0 0 24 24">161 <path d="M4 16h16v2H4v-2zm2-7h12l2 3H4l2-3zm2-4h8v2H8V5z"></path>162 </svg>163 Book seats164 </div>165 </div>166 167 <!-- Overlay and modal -->168 <div class="overlay"></div>169 170 <div class="modal">171 <div class="modal-section">172 <div class="tab-row">173 <div>174 <div class="tab active">Departure</div>175 <div class="tab-underline"></div>176 </div>177 <div class="tab">Arrival</div>178 </div>179 180 <div class="time-area">181 <div class="time-faint">09 00</div>182 183 <div class="time-selected">184 <div class="time-box">185 <div class="line"></div>186 <div class="time-value">10</div>187 <div class="line bottom"></div>188 </div>189 <div class="colon">:</div>190 <div class="time-box">191 <div class="line"></div>192 <div class="time-value">01</div>193 <div class="line bottom"></div>194 </div>195 <button class="now-btn">Now</button>196 </div>197 198 <div class="time-faint">11 02</div>199 </div>200 201 <div class="divider"></div>202 203 <div class="date-row">204 <svg class="chev" viewBox="0 0 24 24" aria-hidden="true">205 <path d="M15.5 5l-7 7 7 7-1.5 1.5L6.5 12l7.5-8.5z"></path>206 </svg>207 <div class="date-text">Sun 27 Aug 2023</div>208 <svg class="chev" viewBox="0 0 24 24" aria-hidden="true">209 <path d="M8.5 19l7-7-7-7L10 3.5 17.5 12 10 20.5z"></path>210 </svg>211 </div>212 213 <div class="divider"></div>214 </div>215 216 <div class="footer">217 <div class="btn cancel">CANCEL</div>218 <div class="btn done">DONE</div>219 </div>220 </div>221 222 <!-- Bottom navigation (behind modal) -->223 <div class="bottom-nav">224 <div class="nav-item active">225 <svg class="nav-icon" viewBox="0 0 24 24">226 <path d="M12 7a5 5 0 100 10 5 5 0 000-10zm1-7h-2v5h2V0z"></path>227 </svg>228 <span>Planner</span>229 </div>230 <div class="nav-item">231 <svg class="nav-icon" viewBox="0 0 24 24">232 <path d="M12 2C8.1 2 5 5.1 5 9c0 6 7 13 7 13s7-7 7-13c0-3.9-3.1-7-7-7zm0 9.5a2.5 2.5 0 110-5 2.5 2.5 0 010 5z"></path>233 </svg>234 <span>My Trip</span>235 </div>236 <div class="nav-item">237 <svg class="nav-icon" viewBox="0 0 24 24">238 <path d="M3 4h18v14H3V4zm2 2v10h14V6H5zm1 12h12v2H6v-2z"></path>239 </svg>240 <span>My Pass</span>241 </div>242 <div class="nav-item">243 <svg class="nav-icon" viewBox="0 0 24 24">244 <path d="M3 6h18v2H3V6zm0 5h18v2H3v-2zm0 5h18v2H3v-2z"></path>245 </svg>246 <span>More</span>247 </div>248 </div>249 250 <div class="home-indicator"></div>251</div>252</body>253</html>