GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html>3<head>4<meta charset="utf-8">5<title>Time Picker Modal - Mock</title>6<style>7 body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; }8 #render-target {9 width: 1080px;10 height: 2400px;11 position: relative;12 overflow: hidden;13 background: #f4f5f7;14 }15 16 /* Status bar */17 .status-bar {18 position: absolute;19 top: 0; left: 0; right: 0;20 height: 96px;21 padding: 0 28px;22 display: flex;23 align-items: center;24 justify-content: space-between;25 color: #000;26 font-size: 36px;27 font-weight: 600;28 }29 .status-right {30 display: flex; align-items: center; gap: 18px; font-weight: 700;31 }32 .app-bar {33 position: absolute;34 top: 96px; left: 0; right: 0;35 height: 120px;36 display: flex; align-items: center; justify-content: center;37 color: #111;38 font-size: 44px; font-weight: 700;39 }40 .app-bar .left, .app-bar .right {41 position: absolute; top: 0; height: 120px; display: flex; align-items: center;42 }43 .app-bar .left { left: 24px; gap: 28px; }44 .app-bar .right { right: 24px; }45 46 /* Page content (beneath dialog) */47 .sheet {48 position: absolute;49 top: 172px;50 left: 0; right: 0;51 background: #ffffff;52 height: 2228px;53 border-top-left-radius: 36px;54 border-top-right-radius: 36px;55 box-shadow: 0 2px 8px rgba(0,0,0,0.06);56 padding: 56px 56px 120px;57 }58 .label { color: #6b6f76; font-size: 32px; letter-spacing: .8px; }59 .title {60 font-size: 96px; font-weight: 800; color: #121212; margin: 12px 0 44px;61 }62 .row { display: flex; align-items: center; justify-content: space-between; margin: 26px 0; }63 .value { font-size: 42px; font-weight: 700; color: #111; }64 .divider { height: 1px; background: #e5e7eb; margin: 32px 0; }65 .location-card {66 width: 420px; height: 260px;67 background: #E0E0E0; border: 1px solid #BDBDBD;68 border-radius: 20px; display: flex; align-items: center; justify-content: center;69 color: #757575; font-size: 28px;70 }71 .invitee {72 width: 420px; height: 260px; border-radius: 20px;73 background: linear-gradient(#efefef, #e6e6e6);74 display: flex; align-items: center; justify-content: center; color: #8a8a8a; border: 1px solid #d8d8d8;75 }76 77 /* Dim overlay */78 .scrim {79 position: absolute; inset: 0;80 background: rgba(0,0,0,0.54);81 }82 83 /* Dialog */84 .dialog {85 position: absolute;86 width: 820px;87 height: 1120px;88 left: 50%; top: 52%;89 transform: translate(-50%, -50%);90 background: #fff;91 border-radius: 8px;92 box-shadow: 0 18px 40px rgba(0,0,0,0.35);93 overflow: hidden;94 }95 .dlg-head {96 background: #3f86f9;97 height: 220px;98 padding: 28px 36px;99 color: #fff;100 position: relative;101 }102 .time-display {103 position: absolute; left: 36px; bottom: 30px;104 display: flex; align-items: flex-end; gap: 18px;105 }106 .time-hours {107 font-size: 140px; line-height: 1; color: rgba(255,255,255,0.75); font-weight: 700;108 }109 .time-colon, .time-mins {110 font-size: 140px; line-height: 1; font-weight: 800;111 }112 .ampm {113 display: flex; flex-direction: column; gap: 8px; margin-left: 8px;114 }115 .ampm span { font-size: 40px; font-weight: 800; }116 .ampm .pm { color: rgba(255,255,255,0.7); }117 118 .dlg-body {119 padding: 40px 40px 24px;120 }121 .clock {122 width: 660px; height: 660px; margin: 0 auto;123 background: #f3f3f3;124 border-radius: 50%;125 position: relative;126 box-shadow: inset 0 0 0 8px #f0f0f0;127 }128 .clock .center-dot {129 position: absolute; left: 50%; top: 50%;130 transform: translate(-50%, -50%);131 width: 18px; height: 18px; background: #3f86f9; border-radius: 50%;132 }133 .minute-hand {134 position: absolute; left: 50%; top: calc(50% - 280px);135 width: 4px; height: 280px; background: #3f86f9;136 transform: translateX(-50%);137 transform-origin: bottom center;138 }139 .minute-bubble {140 position: absolute; left: 50%; bottom: -34px;141 transform: translateX(-50%);142 width: 120px; height: 120px; background: #3f86f9; color: #fff;143 border-radius: 60px; display: flex; align-items: center; justify-content: center;144 font-size: 44px; font-weight: 800;145 }146 .tick {147 position: absolute; color: #222; font-size: 36px; font-weight: 700;148 }149 /* place minute labels */150 .t00 { left: 50%; top: 22px; transform: translateX(-50%); }151 .t05 { right: 130px; top: 96px; }152 .t10 { right: 40px; top: 220px; }153 .t15 { right: 10px; top: 330px; }154 .t20 { right: 40px; bottom: 330px; }155 .t25 { right: 110px; bottom: 200px; }156 .t30 { left: 50%; bottom: 22px; transform: translateX(-50%); opacity: 0.0001; } /* hidden, represented by bubble */157 .t35 { left: 110px; bottom: 200px; }158 .t40 { left: 40px; bottom: 330px; }159 .t45 { left: 10px; top: 330px; }160 .t50 { left: 40px; top: 220px; }161 .t55 { left: 130px; top: 96px; }162 163 .dlg-actions {164 display: flex; justify-content: space-between; align-items: center;165 padding: 20px 48px 34px;166 }167 .action {168 font-size: 44px; font-weight: 800; color: #3f86f9; letter-spacing: 1px;169 }170 171 /* Bottom home indicator */172 .home-indicator {173 position: absolute; bottom: 32px; left: 50%;174 transform: translateX(-50%);175 width: 280px; height: 10px; border-radius: 6px; background: #0a0a0a;176 opacity: .8;177 }178 179 /* simple small helper */180 .caret {181 display: inline-block; width: 0; height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; border-top: 14px solid #7a7a7a; margin-left: 10px;182 }183 .muted { color: #9aa0a6; }184</style>185</head>186<body>187<div id="render-target">188 189 <!-- Status bar -->190 <div class="status-bar">191 <div>8:58</div>192 <div class="status-right">193 <!-- WiFi icon -->194 <svg width="44" height="44" viewBox="0 0 24 24" fill="#000"><path d="M12 20l2-2h-4l2 2zm6-6l-1.4 1.4C14.6 12.4 9.4 12.4 7.4 15.4L6 14c3.3-3.3 8.7-3.3 12 0zm4-4l-1.4 1.4c-5.4-5.4-14.2-5.4-19.6 0L0 10c6.6-6.6 17.4-6.6 24 0z"/></svg>195 <!-- Battery icon -->196 <svg width="48" height="48" viewBox="0 0 24 24" fill="#000"><path d="M16 7h2a2 2 0 0 1 2 2v6a2 2 0 0 1-2 2h-2v1h-2v-1H6a2 2 0 0 1-2-2V9a2 2 0 0 1 2-2h10z"/></svg>197 <div>100%</div>198 </div>199 </div>200 201 <!-- App bar -->202 <div class="app-bar">203 <div class="left">204 <!-- Small square with dot -->205 <div style="position: relative; width: 56px; height: 56px; border-radius: 12px; border: 2px solid #9aa0a6;">206 <span style="position:absolute; top:-6px; left:-6px; width:14px; height:14px; background:#d32f2f; border-radius:50%;"></span>207 </div>208 <!-- Hamburger -->209 <svg width="56" height="56" viewBox="0 0 24 24" fill="#757575"><path d="M3 6h18v2H3V6zm0 5h18v2H3v-2zm0 5h18v2H3v-2z"/></svg>210 </div>211 <div>Aug 2023 <span class="caret"></span></div>212 <div class="right">213 <svg width="60" height="60" viewBox="0 0 24 24" fill="#9aa0a6"><circle cx="12" cy="5" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="12" cy="19" r="2"/></svg>214 </div>215 </div>216 217 <!-- Content sheet -->218 <div class="sheet">219 <div class="row">220 <div class="label">EVENT TITLE</div>221 <div class="value muted">SAVE</div>222 </div>223 <div class="title">HR meeting</div>224 225 <div class="label">EVENT TIME</div>226 <div class="row">227 <div class="value">Fri, Aug 25 — 11:30 AM</div>228 <div class="value muted">11:30 AM</div>229 </div>230 <div class="row">231 <div class="value">Fri, Aug 25 — 12:30 AM</div>232 <div class="value muted">12:30 AM</div>233 </div>234 <div class="row">235 <div class="label">ALL DAY</div>236 <div>237 <!-- simple toggle look -->238 <div style="width:96px;height:54px;background:#e1e1e1;border-radius:28px;position:relative;">239 <div style="width:48px;height:48px;background:#cfcfcf;border-radius:24px;position:absolute;top:3px;left:3px;"></div>240 </div>241 </div>242 </div>243 244 <div class="divider"></div>245 246 <div class="label">LOCATION</div>247 <div style="display:flex; gap:36px; margin-top:24px;">248 <div class="location-card">[IMG: Map Preview]</div>249 <div class="location-card">[IMG: Map Preview]</div>250 </div>251 252 <div class="divider" style="margin-top:48px;"></div>253 254 <div class="label">INVITEES</div>255 <div style="margin-top:24px;">256 <div class="invitee">+ Add Invitee</div>257 </div>258 259 <div class="divider" style="margin:48px 0;"></div>260 261 <div class="label">ALARM</div>262 <div class="title" style="font-size:64px;">30 minutes before</div>263 </div>264 265 <!-- Scrim -->266 <div class="scrim"></div>267 268 <!-- Dialog -->269 <div class="dialog">270 <div class="dlg-head">271 <div class="time-display">272 <div class="time-hours">11</div>273 <div class="time-colon">:</div>274 <div class="time-mins">30</div>275 <div class="ampm">276 <span>AM</span>277 <span class="pm">PM</span>278 </div>279 </div>280 </div>281 <div class="dlg-body">282 <div class="clock">283 <div class="tick t55">55</div>284 <div class="tick t00">00</div>285 <div class="tick t05">05</div>286 <div class="tick t10">10</div>287 <div class="tick t15">15</div>288 <div class="tick t20">20</div>289 <div class="tick t25">25</div>290 <div class="tick t35">35</div>291 <div class="tick t40">40</div>292 <div class="tick t45">45</div>293 <div class="tick t50">50</div>294 295 <!-- minute hand aimed at 30 -->296 <div class="minute-hand"></div>297 <div class="center-dot"></div>298 <div class="minute-bubble">30</div>299 </div>300 </div>301 <div class="dlg-actions">302 <div class="action">CANCEL</div>303 <div class="action">OK</div>304 </div>305 </div>306 307 <!-- Home indicator -->308 <div class="home-indicator"></div>309</div>310</body>311</html>