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<style>7 body { margin: 0; padding: 0; background: transparent; font-family: "Roboto", Arial, sans-serif; }8 #render-target {9 width: 1080px;10 height: 2400px;11 position: relative;12 overflow: hidden;13 background: #0f1215;14 border-radius: 24px;15 box-shadow: 0 10px 40px rgba(0,0,0,0.35);16 color: #e7eaee;17 }18 19 /* Status bar */20 .status-bar {21 position: absolute;22 top: 0;23 left: 0;24 width: 1080px;25 height: 110px;26 color: #e7eaee;27 display: flex;28 align-items: center;29 padding: 0 28px;30 font-size: 40px;31 box-sizing: border-box;32 }33 .status-left { display: flex; align-items: center; gap: 22px; }34 .status-right { margin-left: auto; display: flex; align-items: center; gap: 22px; }35 .status-icon svg { width: 42px; height: 42px; fill: #e7eaee; opacity: 0.9; }36 37 /* Header */38 .page-title {39 position: absolute;40 top: 150px;41 left: 40px;42 font-size: 72px;43 letter-spacing: 0.5px;44 color: #b5bdc7;45 }46 47 /* Alarm card behind dialog */48 .alarm-card {49 position: absolute;50 top: 430px;51 left: 40px;52 width: 1000px;53 height: 760px;54 background: #12161a;55 border-radius: 48px;56 box-shadow: inset 0 0 0 1px rgba(255,255,255,0.04);57 }58 .alarm-card .label {59 position: absolute;60 top: 40px;61 left: 40px;62 color: #99a2ac;63 font-size: 42px;64 display: flex;65 align-items: center;66 gap: 18px;67 }68 .alarm-card .time {69 position: absolute;70 top: 140px;71 left: 40px;72 font-size: 170px;73 font-weight: 500;74 letter-spacing: 2px;75 color: #e7eaee;76 }77 .alarm-card .time .am { font-size: 68px; margin-left: 18px; color: #b7bcc3; vertical-align: top; }78 .toggle {79 position: absolute;80 right: 40px;81 bottom: 40px;82 width: 160px;83 height: 86px;84 border-radius: 48px;85 background: #0e436a;86 display: flex;87 align-items: center;88 justify-content: flex-end;89 padding: 0 10px;90 box-sizing: border-box;91 }92 .toggle .knob {93 width: 70px;94 height: 70px;95 background: #6aa1d7;96 border-radius: 50%;97 }98 .card-caret {99 position: absolute;100 right: 36px;101 top: 36px;102 width: 64px;103 height: 64px;104 border-radius: 50%;105 background: #1b1f24;106 display: flex;107 align-items: center;108 justify-content: center;109 }110 .card-caret svg { width: 30px; height: 30px; fill: #636c75; }111 112 /* Floating Add button (behind dialog) */113 .fab {114 position: absolute;115 top: 1440px;116 left: 480px;117 width: 220px;118 height: 220px;119 border-radius: 110px;120 background: #4c5c74;121 display: flex;122 align-items: center;123 justify-content: center;124 color: #e7eaee;125 font-size: 120px;126 font-weight: 300;127 }128 129 /* Bottom navigation */130 .bottom-nav {131 position: absolute;132 bottom: 90px;133 left: 0;134 width: 1080px;135 height: 230px;136 background: #0f1215;137 border-top: 1px solid rgba(255,255,255,0.06);138 display: flex;139 align-items: center;140 justify-content: space-around;141 color: #9aa3ad;142 font-size: 40px;143 }144 .nav-item {145 display: flex;146 flex-direction: column;147 align-items: center;148 gap: 18px;149 }150 .nav-item svg { width: 70px; height: 70px; fill: #9aa3ad; }151 .nav-item.active { color: #e7eaee; }152 .nav-item.active .pill {153 background: #1c232b;154 padding: 22px 34px;155 border-radius: 50px;156 display: flex;157 align-items: center;158 gap: 16px;159 }160 .nav-item.active svg { fill: #e7eaee; }161 .gesture-bar {162 position: absolute;163 bottom: 24px;164 left: 405px;165 width: 270px;166 height: 12px;167 background: #e7eaee;168 border-radius: 8px;169 opacity: 0.9;170 }171 172 /* Overlay and Time Picker Dialog */173 .overlay {174 position: absolute;175 inset: 0;176 background: rgba(15,18,21,0.65);177 }178 .dialog {179 position: absolute;180 top: 620px;181 left: 70px;182 width: 940px;183 height: 1130px;184 background: #242b33;185 border-radius: 48px;186 box-shadow: 0 18px 60px rgba(0,0,0,0.6);187 padding: 40px;188 box-sizing: border-box;189 color: #cfd7de;190 }191 .dialog-title {192 font-size: 46px;193 color: #cfd7de;194 }195 .time-row {196 margin-top: 24px;197 display: flex;198 align-items: center;199 gap: 28px;200 }201 .time-box {202 width: 260px;203 height: 200px;204 border-radius: 28px;205 display: flex;206 align-items: center;207 justify-content: center;208 font-size: 120px;209 font-weight: 500;210 letter-spacing: 3px;211 }212 .hour-box { background: #244e86; color: #cfe3ff; }213 .minute-box { background: #3b4047; color: #dfe3ea; }214 .colon {215 font-size: 120px;216 color: #cfd7de;217 margin-top: -12px;218 }219 .ampm-group {220 width: 160px;221 height: 200px;222 border-radius: 22px;223 overflow: hidden;224 border: 2px solid rgba(255,255,255,0.15);225 }226 .ampm {227 height: 50%;228 display: flex;229 align-items: center;230 justify-content: center;231 font-size: 54px;232 }233 .ampm.am { background: #1f2328; color: #d7dbe0; }234 .ampm.pm { background: #594363; color: #f3e9f8; }235 236 /* Clock dial */237 .dial-wrap {238 margin-top: 40px;239 width: 860px;240 height: 740px;241 background: transparent;242 display: flex;243 align-items: center;244 justify-content: center;245 }246 .dial {247 position: relative;248 width: 740px;249 height: 740px;250 background: #3b4047;251 border-radius: 50%;252 box-shadow: inset 0 0 0 8px rgba(255,255,255,0.04);253 }254 .dial .number {255 position: absolute;256 color: #cfd7de;257 font-size: 44px;258 opacity: 0.9;259 }260 /* Approximate positions around the circle */261 .n12 { top: 24px; left: 340px; }262 .n1 { top: 80px; left: 540px; }263 .n2 { top: 190px; left: 640px; }264 .n3 { top: 330px; left: 700px; }265 .n4 { top: 480px; left: 660px; }266 .n5 { top: 590px; left: 550px; }267 .n6 { top: 660px; left: 360px; }268 .n7 { top: 590px; left: 180px; }269 .n8 { top: 480px; left: 80px; }270 .n9 { top: 330px; left: 30px; }271 .n10 { top: 190px; left: 80px; }272 .n11 { top: 80px; left: 180px; }273 274 /* Hand to 12 o'clock */275 .dial .center {276 position: absolute;277 top: 310px;278 left: 310px;279 width: 120px;280 height: 120px;281 background: #98b8ff;282 border-radius: 50%;283 display: flex;284 align-items: center;285 justify-content: center;286 color: #1f2b3a;287 font-size: 48px;288 font-weight: 600;289 z-index: 2;290 }291 .dial .hand {292 position: absolute;293 top: 80px;294 left: 365px;295 width: 10px;296 height: 370px;297 background: #98b8ff;298 border-radius: 5px;299 }300 .dial .tip {301 position: absolute;302 top: 60px;303 left: 357px;304 width: 26px;305 height: 26px;306 background: #98b8ff;307 border-radius: 50%;308 }309 310 /* Dialog actions */311 .dialog-actions {312 position: absolute;313 left: 40px;314 bottom: 40px;315 right: 40px;316 display: flex;317 align-items: center;318 justify-content: space-between;319 }320 .action-left {321 display: flex;322 align-items: center;323 gap: 20px;324 color: #cfd7de;325 font-size: 40px;326 }327 .action-right {328 display: flex;329 align-items: center;330 gap: 50px;331 }332 .btn-text {333 font-size: 48px;334 color: #a9c3f4;335 }336</style>337</head>338<body>339<div id="render-target">340 <!-- Status bar -->341 <div class="status-bar">342 <div class="status-left">343 <div>11:31</div>344 <div class="status-icon">345 <!-- bell/message simple icon -->346 <svg viewBox="0 0 24 24"><path d="M12 22a2 2 0 0 0 2-2H10a2 2 0 0 0 2 2zM20 16v-5a8 8 0 1 0-16 0v5l-2 2v1h20v-1l-2-2z"/></svg>347 </div>348 <div class="status-icon">349 <!-- headphones -->350 <svg viewBox="0 0 24 24"><path d="M12 3a9 9 0 0 0-9 9v6h4v-6a5 5 0 0 1 10 0v6h4v-6a9 9 0 0 0-9-9z"/></svg>351 </div>352 <div class="status-icon">353 <!-- square -->354 <svg viewBox="0 0 24 24"><rect x="4" y="4" width="16" height="16" rx="3"/></svg>355 </div>356 <div class="status-icon">357 <!-- letter T -->358 <svg viewBox="0 0 24 24"><path d="M4 6h16v3H13v9h-2V9H4V6z"/></svg>359 </div>360 <div class="status-icon">361 <!-- dot -->362 <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="3"/></svg>363 </div>364 </div>365 <div class="status-right">366 <div class="status-icon">367 <!-- wifi -->368 <svg viewBox="0 0 24 24"><path d="M12 20l2.5-2.5a3.5 3.5 0 0 0-5 0L12 20zm-6.5-6.5a8.5 8.5 0 0 1 17 0l-2.6 2.6a5.9 5.9 0 0 0-11.8 0L5.5 13.5zm-3.7-3.7A13 13 0 0 1 24 10l-2.8 2.8A9.5 9.5 0 0 0 2.8 12.8L1 9.8z"/></svg>369 </div>370 <div class="status-icon">371 <!-- battery -->372 <svg viewBox="0 0 24 24"><path d="M20 7h2v10h-2V7zM2 7h17v10H2V7zm3 3v4h10v-4H5z"/></svg>373 </div>374 </div>375 </div>376 377 <!-- Header -->378 <div class="page-title">Alarm</div>379 380 <!-- Alarm card behind dialog -->381 <div class="alarm-card">382 <div class="label">383 <svg viewBox="0 0 24 24" width="44" height="44" fill="#99a2ac"><path d="M3 6h18v12H3V6zm2 2v8h14V8H5z"/></svg>384 Wakeup385 </div>386 <div class="time">6:10 <span class="am">AM</span></div>387 <div class="card-caret">388 <svg viewBox="0 0 24 24"><path d="M7 14l5-5 5 5H7z"/></svg>389 </div>390 <div class="toggle"><div class="knob"></div></div>391 </div>392 393 <!-- Floating Add button -->394 <div class="fab">+</div>395 396 <!-- Dark overlay + dialog -->397 <div class="overlay"></div>398 <div class="dialog">399 <div class="dialog-title">Select time</div>400 <div class="time-row">401 <div class="time-box hour-box">12</div>402 <div class="colon">:</div>403 <div class="time-box minute-box">00</div>404 <div class="ampm-group">405 <div class="ampm am">AM</div>406 <div class="ampm pm">PM</div>407 </div>408 </div>409 410 <div class="dial-wrap">411 <div class="dial">412 <div class="number n11">11</div>413 <div class="number n12">12</div>414 <div class="number n1">1</div>415 <div class="number n2">2</div>416 <div class="number n3">3</div>417 <div class="number n4">4</div>418 <div class="number n5">5</div>419 <div class="number n6">6</div>420 <div class="number n7">7</div>421 <div class="number n8">8</div>422 <div class="number n9">9</div>423 <div class="number n10">10</div>424 425 <div class="hand"></div>426 <div class="tip"></div>427 <div class="center">12</div>428 </div>429 </div>430 431 <div class="dialog-actions">432 <div class="action-left">433 <svg viewBox="0 0 24 24" width="56" height="56" fill="#cfd7de">434 <path d="M3 5h18v14H3V5zm2 2v10h14V7H5zm2 2h10v2H7V9zm0 4h7v2H7v-2z"/>435 </svg>436 </div>437 <div class="action-right">438 <div class="btn-text">Cancel</div>439 <div class="btn-text">OK</div>440 </div>441 </div>442 </div>443 444 <!-- Bottom navigation -->445 <div class="bottom-nav">446 <div class="nav-item active">447 <div class="pill">448 <svg viewBox="0 0 24 24"><path d="M6 7l2-2 3 3 3-3 2 2-3 3v7H9v-7L6 7z"/></svg>449 <div>Alarm</div>450 </div>451 </div>452 <div class="nav-item">453 <svg viewBox="0 0 24 24"><path d="M12 7v6l4 2-.8 1.8L10 13V7h2zM12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20z"/></svg>454 <div>Clock</div>455 </div>456 <div class="nav-item">457 <svg viewBox="0 0 24 24"><path d="M7 3h10v4H7V3zm0 6h10v12H7V9z"/></svg>458 <div>Timer</div>459 </div>460 <div class="nav-item">461 <svg viewBox="0 0 24 24"><path d="M12 2l3 3-1.4 1.4A7 7 0 1 1 5.6 6.8L4.2 5.4 7 2l3 3-1.4 1.4A5 5 0 1 0 13.4 6.4L12 5z"/></svg>462 <div>Stopwatch</div>463 </div>464 <div class="nav-item">465 <svg viewBox="0 0 24 24"><path d="M2 10h20v8H2v-8zm2 2v4h16v-4H4zm2-6h6v3H6V6z"/></svg>466 <div>Bedtime</div>467 </div>468 </div>469 <div class="gesture-bar"></div>470</div>471</body>472</html>