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, height=2400, initial-scale=1.0">6<title>Alarm Time Picker</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }9 #render-target {10 position: relative;11 overflow: hidden;12 width: 1080px;13 height: 2400px;14 background: #121417;15 border-radius: 24px;16 box-shadow: 0 20px 60px rgba(0,0,0,0.35);17 color: #e8eaed;18 }19 20 /* Status bar */21 .status-bar {22 position: absolute;23 top: 0;24 left: 0;25 width: 1080px;26 height: 120px;27 padding: 0 36px;28 box-sizing: border-box;29 display: flex;30 align-items: center;31 justify-content: space-between;32 color: #FFFFFF;33 font-size: 40px;34 letter-spacing: 1px;35 }36 .status-icons {37 display: flex;38 align-items: center;39 gap: 26px;40 }41 .status-icon {42 width: 40px; height: 40px;43 opacity: 0.9;44 }45 46 /* Page title */47 .page-title {48 position: absolute;49 top: 170px;50 left: 48px;51 font-size: 64px;52 color: #bfc7d1;53 letter-spacing: 0.5px;54 }55 56 /* Background alarm card (dimmed behind dialog) */57 .alarm-card {58 position: absolute;59 top: 360px;60 left: 48px;61 width: 984px;62 height: 520px;63 background: #171a1f;64 border-radius: 36px;65 box-shadow: inset 0 0 0 1px rgba(255,255,255,0.05);66 opacity: 0.55;67 }68 .alarm-card .sub {69 position: absolute; top: 32px; left: 36px;70 font-size: 30px; color: #a9afb8;71 }72 .alarm-card .time {73 position: absolute; top: 110px; left: 36px;74 font-size: 120px; font-weight: 600; color: #e8eaed;75 }76 .alarm-card .ampm {77 position: absolute; top: 130px; left: 430px; font-size: 50px; color: #cfd6dd;78 }79 80 /* Floating action button behind dialog */81 .fab {82 position: absolute;83 bottom: 400px;84 left: 50%;85 transform: translateX(-50%);86 width: 180px; height: 180px;87 background: #3f5168;88 border-radius: 50%;89 display: flex; align-items: center; justify-content: center;90 color: #d8e6ff;91 font-size: 120px;92 opacity: 0.75;93 box-shadow: 0 12px 30px rgba(0,0,0,0.45);94 }95 96 /* Bottom nav bar */97 .nav-bar {98 position: absolute;99 bottom: 140px;100 left: 0;101 width: 1080px;102 height: 200px;103 background: #0e1216;104 display: flex;105 align-items: center;106 justify-content: space-around;107 color: #c9ced6;108 }109 .nav-item {110 width: 180px;111 height: 160px;112 display: flex;113 flex-direction: column;114 gap: 18px;115 align-items: center;116 justify-content: center;117 font-size: 32px;118 }119 .nav-item .icon {120 width: 64px; height: 64px; opacity: 0.9;121 }122 .nav-item.active {123 color: #dfe7f2;124 }125 .nav-item.active .pill {126 width: 120px; height: 80px; background: #243246; border-radius: 40px; display:flex; align-items:center; justify-content:center;127 }128 129 /* Dialog overlay */130 .dialog {131 position: absolute;132 left: 60px;133 top: 760px;134 width: 960px;135 height: 1060px;136 background: #2b333d;137 border-radius: 48px;138 box-shadow: 0 24px 80px rgba(0,0,0,0.6);139 padding: 36px 40px;140 box-sizing: border-box;141 }142 .dialog-title {143 font-size: 34px; color: #cfd6df;144 margin-bottom: 36px;145 }146 .time-row {147 display: flex; align-items: center; gap: 28px;148 }149 .time-box {150 width: 240px; height: 170px; border-radius: 28px;151 display:flex; align-items:center; justify-content:center;152 font-size: 110px; font-weight: 600;153 color: #e8eaed;154 }155 .time-box.hour { background: #4a5058; }156 .time-box.min { background: #274b7a; color: #b9d2ff; }157 .colon {158 font-size: 120px; font-weight: 700; color: #cfd6df; line-height: 1;159 }160 161 /* AM/PM vertical toggle */162 .ampm-toggle {163 margin-left: auto;164 width: 160px; height: 250px;165 border: 2px solid #aab3be;166 border-radius: 18px;167 overflow: hidden;168 display: flex; flex-direction: column;169 }170 .ampm-toggle .slot {171 flex: 1; display:flex; align-items:center; justify-content:center;172 font-size: 50px; font-weight: 600;173 }174 .ampm-toggle .am { background: #6a5a78; color: #ffffff; }175 .ampm-toggle .pm { background: #1f2328; color: #d6dde6; }176 177 /* Dial */178 .dial-wrap {179 margin-top: 30px;180 width: 100%;181 display:flex; align-items:center; justify-content:center;182 }183 .dial {184 position: relative;185 width: 760px; height: 760px;186 background: radial-gradient(closest-side, #3a414a 0%, #333a43 70%, #2f3540 100%);187 border-radius: 50%;188 box-shadow: inset 0 0 0 2px rgba(255,255,255,0.05);189 }190 .dial .mark {191 position: absolute;192 font-size: 38px;193 color: rgba(220,225,232,0.85);194 }195 .dial .center-dot {196 position: absolute; left: 50%; top: 50%;197 transform: translate(-50%, -50%);198 width: 24px; height: 24px; border-radius: 50%;199 background: #a8c2ff;200 }201 .dial .hand {202 position: absolute; left: 50%; top: 50%;203 transform: translate(-50%, -100%) rotate(60deg); /* 10 minutes */204 transform-origin: 50% 100%;205 width: 6px; height: 260px; background: #9cc0ff; border-radius: 3px;206 }207 .dial .knob {208 position: absolute; left: 50%; top: 50%;209 width: 110px; height: 110px; border-radius: 50%;210 background: #8fbeff;211 transform: translate(-50%, -50%) rotate(60deg);212 transform-origin: center;213 }214 .dial .knob::after {215 content: '10';216 position: absolute; left: 50%; top: 50%;217 transform: translate(-50%, -50%);218 color: #13233b; font-size: 46px; font-weight: 700;219 }220 /* Place knob at hand end using offset container */221 .dial .knob-wrap {222 position: absolute; left: 50%; top: 50%;223 width: 0; height: 0;224 transform: translate(-50%, -50%);225 }226 .dial .knob-wrap .knob {227 /* move to hand end: radius ~300px from center along 60deg */228 transform: translate(260px, -300px) rotate(0deg);229 background: #9fc5ff;230 }231 .dial .hand-wrap {232 position: absolute; left: 50%; top: 50%;233 width: 0; height: 0;234 transform: translate(-50%, -50%);235 }236 .dial .hand-wrap .hand {237 transform: rotate(60deg);238 height: 310px;239 border-radius: 3px;240 }241 242 /* Bottom actions inside dialog */243 .dialog-actions {244 position: absolute; bottom: 32px; left: 40px; right: 40px;245 display: flex; align-items: center; justify-content: space-between;246 }247 .keyboard {248 display: flex; align-items: center; gap: 16px; color: #cfd6df; font-size: 34px;249 }250 .btns {251 display: flex; gap: 40px; font-size: 42px; color: #8fb6ff;252 }253</style>254</head>255<body>256<div id="render-target">257 258 <!-- Status bar -->259 <div class="status-bar">260 <div>11:27</div>261 <div class="status-icons">262 <!-- Simple placeholders for status icons -->263 <svg class="status-icon" viewBox="0 0 24 24">264 <circle cx="12" cy="12" r="10" fill="#fff"></circle>265 </svg>266 <svg class="status-icon" viewBox="0 0 24 24">267 <rect x="3" y="4" width="18" height="16" rx="3" ry="3" fill="#fff"></rect>268 </svg>269 <svg class="status-icon" viewBox="0 0 24 24">270 <rect x="5" y="3" width="14" height="18" rx="2" fill="#fff"></rect>271 </svg>272 <svg class="status-icon" viewBox="0 0 24 24">273 <rect x="10" y="2" width="4" height="20" fill="#fff"></rect>274 </svg>275 <svg class="status-icon" viewBox="0 0 24 24">276 <path d="M4 9c0-3 4-7 8-7s8 4 8 7v7l-3 3H7l-3-3V9z" fill="#fff"></path>277 </svg>278 </div>279 </div>280 281 <!-- Title -->282 <div class="page-title">Alarm</div>283 284 <!-- Background alarm card -->285 <div class="alarm-card">286 <div class="sub">wake up</div>287 <div class="time">6:00</div>288 <div class="ampm">AM</div>289 </div>290 291 <!-- Dialog overlay -->292 <div class="dialog">293 <div class="dialog-title">Select time</div>294 295 <div class="time-row">296 <div class="time-box hour">06</div>297 <div class="colon">:</div>298 <div class="time-box min">10</div>299 300 <div class="ampm-toggle">301 <div class="slot am">AM</div>302 <div class="slot pm">PM</div>303 </div>304 </div>305 306 <div class="dial-wrap">307 <div class="dial">308 <!-- Numbers around the dial -->309 <div class="mark" style="left:360px; top:40px;">00</div>310 <div class="mark" style="left:600px; top:110px;">05</div>311 <div class="mark" style="left:690px; top:220px;">10</div>312 <div class="mark" style="left:720px; top:360px;">15</div>313 <div class="mark" style="left:680px; top:500px;">20</div>314 <div class="mark" style="left:600px; top:610px;">25</div>315 <div class="mark" style="left:370px; top:680px;">30</div>316 <div class="mark" style="left:150px; top:610px;">35</div>317 <div class="mark" style="left:60px; top:500px;">40</div>318 <div class="mark" style="left:30px; top:360px;">45</div>319 <div class="mark" style="left:60px; top:220px;">50</div>320 <div class="mark" style="left:150px; top:110px;">55</div>321 322 <div class="center-dot"></div>323 324 <div class="hand-wrap">325 <div class="hand"></div>326 </div>327 328 <div class="knob-wrap">329 <div class="knob"></div>330 </div>331 </div>332 </div>333 334 <div class="dialog-actions">335 <div class="keyboard">336 <svg width="56" height="56" viewBox="0 0 24 24">337 <rect x="2" y="4" width="20" height="16" rx="2" ry="2" fill="none" stroke="#cfd6df" stroke-width="2"></rect>338 <rect x="5" y="7" width="3" height="3" fill="#cfd6df"></rect>339 <rect x="10" y="7" width="3" height="3" fill="#cfd6df"></rect>340 <rect x="15" y="7" width="3" height="3" fill="#cfd6df"></rect>341 <rect x="5" y="12" width="13" height="3" fill="#cfd6df"></rect>342 </svg>343 </div>344 <div class="btns">345 <div>Cancel</div>346 <div>OK</div>347 </div>348 </div>349 </div>350 351 <!-- Floating action button -->352 <div class="fab">+</div>353 354 <!-- Bottom navigation -->355 <div class="nav-bar">356 <div class="nav-item active">357 <div class="pill">358 <svg class="icon" viewBox="0 0 24 24">359 <circle cx="12" cy="12" r="8" fill="#dfe7f2"></circle>360 <rect x="11.5" y="6" width="1.5" height="6" fill="#243246"></rect>361 <rect x="12" y="12" width="5" height="1.5" fill="#243246"></rect>362 </svg>363 </div>364 <div>Alarm</div>365 </div>366 <div class="nav-item">367 <svg class="icon" viewBox="0 0 24 24">368 <circle cx="12" cy="12" r="9" fill="none" stroke="#c9ced6" stroke-width="2"></circle>369 <rect x="11" y="6" width="2" height="7" fill="#c9ced6"></rect>370 <rect x="12" y="12" width="5" height="2" fill="#c9ced6"></rect>371 </svg>372 <div>Clock</div>373 </div>374 <div class="nav-item">375 <svg class="icon" viewBox="0 0 24 24">376 <path d="M6 6h12l-5 12H11L6 6z" fill="#c9ced6"></path>377 </svg>378 <div>Timer</div>379 </div>380 <div class="nav-item">381 <svg class="icon" viewBox="0 0 24 24">382 <circle cx="12" cy="12" r="10" fill="none" stroke="#c9ced6" stroke-width="2"></circle>383 <circle cx="12" cy="12" r="4" fill="#c9ced6"></circle>384 </svg>385 <div>Stopwatch</div>386 </div>387 <div class="nav-item">388 <svg class="icon" viewBox="0 0 24 24">389 <rect x="3" y="9" width="18" height="9" rx="2" fill="#c9ced6"></rect>390 <rect x="6" y="6" width="6" height="3" fill="#c9ced6"></rect>391 </svg>392 <div>Bedtime</div>393 </div>394 </div>395 396</div>397</body>398</html>