GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Alarm Time Picker UI</title>6<meta name="viewport" content="width=device-width, initial-scale=1.0">7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: "Arial", sans-serif; }9 #render-target {10 position: relative;11 width: 1080px;12 height: 2400px;13 overflow: hidden;14 background: #0f0c12;15 }16 17 /* Status bar */18 .status-bar {19 position: absolute;20 top: 26px;21 left: 36px;22 right: 36px;23 height: 60px;24 color: #ffffff;25 opacity: 0.95;26 display: flex;27 align-items: center;28 justify-content: space-between;29 font-size: 40px;30 }31 .status-icons { display: flex; gap: 26px; align-items: center; }32 .icon-wifi, .icon-battery {33 width: 44px; height: 44px;34 }35 .icon-wifi svg, .icon-battery svg { width: 100%; height: 100%; fill: #ffffff; }36 37 /* Title and background content */38 .title {39 position: absolute;40 top: 150px;41 left: 48px;42 font-size: 72px;43 color: rgba(255,255,255,0.32);44 letter-spacing: 0.5px;45 }46 .alarm-card {47 position: absolute;48 top: 290px;49 left: 48px;50 width: 984px;51 height: 220px;52 background: #141118;53 border-radius: 40px;54 box-shadow: inset 0 0 0 1px rgba(255,255,255,0.04);55 opacity: 0.65;56 }57 .alarm-time-faint {58 position: absolute;59 top: 318px;60 left: 80px;61 color: rgba(255,255,255,0.12);62 font-size: 140px;63 letter-spacing: 1px;64 }65 66 /* Floating Action Button (under dialog, slightly visible) */67 .fab {68 position: absolute;69 left: 50%;70 transform: translateX(-50%);71 top: 1560px;72 width: 210px; height: 210px;73 background: #5e4a71;74 border-radius: 50%;75 box-shadow: 0 10px 28px rgba(0,0,0,0.5), inset 0 0 0 2px rgba(255,255,255,0.05);76 display: flex; align-items: center; justify-content: center;77 }78 .fab span { font-size: 140px; color: rgba(255,255,255,0.85); line-height: 1; margin-top: -10px; }79 80 /* Bottom navigation */81 .bottom-nav {82 position: absolute;83 left: 0; bottom: 120px;84 width: 100%;85 height: 220px;86 background: #151218;87 box-shadow: 0 -8px 30px rgba(0,0,0,0.6);88 }89 .nav-items {90 height: 100%;91 display: flex;92 align-items: center;93 justify-content: space-around;94 color: rgba(255,255,255,0.55);95 font-size: 36px;96 }97 .nav-item {98 display: flex; flex-direction: column; align-items: center; gap: 10px;99 }100 .nav-item .ico {101 width: 112px; height: 88px; border-radius: 44px;102 display: flex; align-items: center; justify-content: center;103 background: transparent;104 }105 .nav-item.active .ico {106 background: rgba(130, 103, 158, 0.18);107 border: 2px solid rgba(163,136,189,0.22);108 }109 .nav-item.active span { color: #c7a7f2; }110 .nav-item svg { width: 48px; height: 48px; fill: currentColor; }111 112 /* Gesture bar */113 .gesture {114 position: absolute; bottom: 48px; left: 50%; transform: translateX(-50%);115 width: 360px; height: 10px; background: #ffffff; border-radius: 8px; opacity: 0.9;116 }117 118 /* Time picker dialog */119 .dialog {120 position: absolute;121 left: 50%;122 top: 540px;123 transform: translateX(-50%);124 width: 930px;125 height: 1200px;126 background: #322a37;127 border-radius: 46px;128 box-shadow: 0 20px 60px rgba(0,0,0,0.6);129 color: #f2e9ff;130 }131 .dialog-header {132 padding: 40px 48px 24px 48px;133 font-size: 44px;134 color: rgba(255,255,255,0.9);135 }136 .time-row {137 display: flex; align-items: center; gap: 30px;138 padding: 0 48px;139 }140 .digit-box {141 height: 180px;142 border-radius: 26px;143 display: flex; align-items: center; justify-content: center;144 font-size: 120px; font-weight: 600;145 }146 .hours {147 width: 240px;148 background: #6a3a8e;149 color: #f7e6ff;150 }151 .minutes {152 width: 340px;153 background: #5b545f;154 color: #e7e1ee;155 }156 .colon {157 font-size: 150px; color: #ded1ea; margin: 0 10px;158 }159 .ampm {160 margin-left: auto;161 width: 160px;162 height: 182px;163 border-radius: 18px;164 border: 2px solid rgba(255,255,255,0.35);165 overflow: hidden;166 display: grid;167 grid-template-rows: 1fr 1fr;168 }169 .ampm div {170 display: flex; align-items: center; justify-content: center;171 font-size: 42px; letter-spacing: 2px;172 }173 .ampm .am { background: #6b3e43; color: #f6e9ec; }174 .ampm .pm { background: #1f1a22; color: #e9e1f6; }175 176 /* Clock face */177 .clock-wrap {178 position: relative;179 margin: 36px auto 0 auto;180 width: 840px; height: 840px;181 background: radial-gradient(circle at 50% 50%, #4b4450 0%, #3f3745 60%, #3a3340 100%);182 border-radius: 50%;183 box-shadow: inset 0 0 0 4px rgba(255,255,255,0.03);184 }185 .clock-number {186 position: absolute; color: rgba(255,255,255,0.72); font-size: 44px; user-select: none;187 }188 /* approximate positions */189 .n12 { left: 50%; transform: translateX(-50%); top: 36px; }190 .n1 { right: 182px; top: 120px; }191 .n2 { right: 90px; top: 250px; }192 .n3 { right: 50px; top: 400px; }193 .n4 { right: 90px; bottom: 250px; }194 .n5 { right: 182px; bottom: 120px; }195 .n6 { left: 50%; transform: translateX(-50%); bottom: 36px; }196 .n7 { left: 182px; bottom: 120px; }197 .n8 { left: 90px; bottom: 250px; }198 .n9 { left: 50px; top: 400px; }199 .n10 { left: 90px; top: 250px; }200 .n11 { left: 182px; top: 120px; }201 202 /* Hour hand and selection */203 .center-dot {204 position: absolute; left: 50%; top: 50%;205 width: 18px; height: 18px; background: #e5c7fb; border-radius: 50%;206 transform: translate(-50%,-50%);207 }208 .hour-hand {209 position: absolute; left: 50%; top: 50%;210 width: 4px; height: 300px; background: #e2c3fb;211 transform-origin: 50% 100%;212 transform: translate(-50%,-100%) rotate(-30deg);213 border-radius: 4px;214 }215 .hand-tip {216 position: absolute; left: 50%; top: 50%;217 width: 22px; height: 22px; background: #e2c3fb; border-radius: 50%;218 transform: translate(-50%,-100%) rotate(-30deg);219 transform-origin: 50% 100%;220 margin-top: -300px;221 }222 .big-thumb {223 position: absolute;224 width: 140px; height: 140px; background: #d8b8fb; color: #3a2c47;225 border-radius: 50%;226 display: flex; align-items: center; justify-content: center; font-size: 52px; font-weight: 700;227 /* approximate position for 11 o'clock along the ring */228 top: 150px; left: 230px;229 box-shadow: 0 6px 18px rgba(0,0,0,0.25);230 }231 232 /* Dialog footer */233 .dialog-footer {234 position: absolute; left: 0; right: 0; bottom: 22px; height: 110px;235 display: flex; align-items: center;236 padding: 0 48px;237 }238 .kbd {239 display: flex; align-items: center; gap: 14px; color: #e6d3fb; opacity: 0.9;240 font-size: 36px;241 }242 .kbd svg { width: 54px; height: 54px; fill: #e6d3fb; }243 .actions { margin-left: auto; display: flex; gap: 50px; font-size: 46px; }244 .actions .btn { color: #e3c7ff; }245</style>246</head>247<body>248<div id="render-target">249 250 <!-- Status bar -->251 <div class="status-bar">252 <div>10:08</div>253 <div class="status-icons">254 <!-- simple indicators -->255 <div class="icon-wifi">256 <svg viewBox="0 0 24 24"><path d="M12 20a2 2 0 1 0 0-4 2 2 0 0 0 0 4zm6.6-6.6-1.4 1.4A8 8 0 0 0 6.8 14l-1.4-1.4a10 10 0 0 1 13.2 0zM12 6c-3 0-5.8 1.1-7.9 3.1L2.7 7.7A12 12 0 0 1 21.3 7.7L19.9 9A11.9 11.9 0 0 0 12 6z"/></svg>257 </div>258 <div class="icon-battery">259 <svg viewBox="0 0 24 24"><path d="M16 7h1a2 2 0 0 1 2 2v6a2 2 0 0 1-2 2h-1v1h-2v-1H6a2 2 0 0 1-2-2V9a2 2 0 0 1 2-2h8V6h2v1zM6 9v6h10V9H6z"/></svg>260 </div>261 </div>262 </div>263 264 <!-- Background app content (faded) -->265 <div class="title">Alarm</div>266 <div class="alarm-card"></div>267 <div class="alarm-time-faint">8:30</div>268 269 <!-- Dialog -->270 <div class="dialog">271 <div class="dialog-header">Select time</div>272 273 <div class="time-row">274 <div class="digit-box hours">11</div>275 <div class="colon">:</div>276 <div class="digit-box minutes">00</div>277 <div class="ampm">278 <div class="am">AM</div>279 <div class="pm">PM</div>280 </div>281 </div>282 283 <div class="clock-wrap">284 <div class="clock-number n12">12</div>285 <div class="clock-number n1">1</div>286 <div class="clock-number n2">2</div>287 <div class="clock-number n3">3</div>288 <div class="clock-number n4">4</div>289 <div class="clock-number n5">5</div>290 <div class="clock-number n6">6</div>291 <div class="clock-number n7">7</div>292 <div class="clock-number n8">8</div>293 <div class="clock-number n9">9</div>294 <div class="clock-number n10">10</div>295 <div class="clock-number n11">11</div>296 297 <div class="hour-hand"></div>298 <div class="hand-tip"></div>299 <div class="center-dot"></div>300 <div class="big-thumb">11</div>301 </div>302 303 <div class="dialog-footer">304 <div class="kbd">305 <svg viewBox="0 0 24 24"><path d="M3 6h18a2 2 0 0 1 2 2v6a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2zm0 2v6h18V8H3zm2 1h2v2H5V9zm3 0h2v2H8V9zm3 0h2v2h-2V9zm3 0h2v2h-2V9zm3 0h2v2h-2V9zM5 12h2v2H5v-2zm3 0h2v2H8v-2zm3 0h2v2h-2v-2zm3 0h2v2h-2v-2z"/></svg>306 </div>307 <div class="actions">308 <div class="btn">Cancel</div>309 <div class="btn">OK</div>310 </div>311 </div>312 </div>313 314 <!-- Floating action button -->315 <div class="fab"><span>+</span></div>316 317 <!-- Bottom navigation -->318 <div class="bottom-nav">319 <div class="nav-items">320 <div class="nav-item active">321 <div class="ico">322 <svg viewBox="0 0 24 24"><path d="M12 8a4 4 0 1 1 0 8 4 4 0 0 1 0-8zm0-6a1 1 0 0 1 1 1v1h3l1 2h-6V3a1 1 0 0 1 1-1z"/></svg>323 </div>324 <span>Alarm</span>325 </div>326 <div class="nav-item">327 <div class="ico"><svg viewBox="0 0 24 24"><path d="M12 20a8 8 0 1 1 0-16 8 8 0 0 1 0 16zm1-8V7h-2v7h6v-2h-4z"/></svg></div>328 <span>Clock</span>329 </div>330 <div class="nav-item">331 <div class="ico"><svg viewBox="0 0 24 24"><path d="M7 2h10l1 4H6l1-4zm-1 6h12v12H6V8zm4 2v8h2v-8h-2z"/></svg></div>332 <span>Timer</span>333 </div>334 <div class="nav-item">335 <div class="ico"><svg viewBox="0 0 24 24"><path d="M12 5a7 7 0 1 1 0 14A7 7 0 0 1 12 5zm1 3h-2v4.5l3.5 2.1 1-1.7-2.5-1.5V8z"/></svg></div>336 <span>Stopwatch</span>337 </div>338 <div class="nav-item">339 <div class="ico"><svg viewBox="0 0 24 24"><path d="M3 11h18v7H3v-7zm2-6h6v4H5V5zm8 0h6v4h-6V5z"/></svg></div>340 <span>Bedtime</span>341 </div>342 </div>343 </div>344 345 <div class="gesture"></div>346</div>347</body>348</html>