GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html>3<head>4<meta charset="UTF-8">5<title>Alarm Time Picker Mock</title>6<style>7 body {8 margin: 0;9 padding: 0;10 background: transparent;11 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;12 }13 #render-target {14 position: relative;15 overflow: hidden;16 width: 1080px;17 height: 2400px;18 background: #0f1215;19 color: #e6e8ea;20 }21 22 /* Status bar */23 .status-bar {24 position: absolute;25 top: 0;26 left: 0;27 width: 1080px;28 height: 120px;29 color: #e6e8ea;30 font-weight: 600;31 padding: 0 40px;32 display: flex;33 align-items: center;34 justify-content: space-between;35 box-sizing: border-box;36 }37 .status-left { font-size: 44px; opacity: 0.95; }38 .status-right {39 display: flex;40 gap: 28px;41 align-items: center;42 }43 .status-icon svg { fill: #e6e8ea; opacity: 0.85; }44 45 /* Header */46 .page-title {47 position: absolute;48 top: 150px;49 left: 40px;50 font-size: 72px;51 letter-spacing: 0.3px;52 color: #c9cdd1;53 opacity: 0.9;54 }55 56 /* Alarm card behind modal */57 .alarm-card {58 position: absolute;59 left: 40px;60 top: 360px;61 width: 1000px;62 height: 520px;63 background: #14171b;64 border-radius: 44px;65 box-shadow: 0 12px 30px rgba(0,0,0,0.55) inset;66 padding: 40px;67 box-sizing: border-box;68 color: #cfd3d7;69 }70 .alarm-card .chip {71 display: inline-flex;72 align-items: center;73 gap: 14px;74 color: #9aa0a6;75 font-size: 34px;76 opacity: 0.9;77 }78 .alarm-time {79 font-size: 168px;80 font-weight: 700;81 letter-spacing: 2px;82 margin-top: 30px;83 color: #e9ecef;84 }85 .alarm-time .am {86 font-size: 48px;87 font-weight: 700;88 margin-left: 14px;89 color: #cfd3d7;90 vertical-align: top;91 }92 .alarm-card .days {93 position: absolute;94 bottom: 36px;95 left: 40px;96 font-size: 38px;97 color: #aeb4bb;98 }99 .alarm-toggle {100 position: absolute;101 right: 40px;102 bottom: 40px;103 width: 120px;104 height: 64px;105 background: #1f2430;106 border-radius: 40px;107 }108 109 /* Floating Action Button (behind modal) */110 .fab {111 position: absolute;112 bottom: 340px;113 left: 50%;114 transform: translateX(-50%);115 width: 180px;116 height: 180px;117 background: #495a6d;118 border-radius: 50%;119 display: flex;120 align-items: center;121 justify-content: center;122 color: #dbe2ea;123 font-size: 120px;124 font-weight: 300;125 z-index: 2;126 opacity: 0.85;127 }128 129 /* Modal time picker */130 .modal {131 position: absolute;132 left: 70px;133 top: 640px;134 width: 940px;135 height: 1100px;136 background: #2e3741;137 border-radius: 60px;138 box-shadow: 0 24px 60px rgba(0,0,0,0.6);139 z-index: 10;140 }141 .modal .header {142 position: absolute;143 top: 32px;144 left: 48px;145 font-size: 44px;146 color: #d6dde4;147 opacity: 0.95;148 }149 .time-row {150 position: absolute;151 top: 120px;152 left: 48px;153 right: 48px;154 display: flex;155 align-items: center;156 gap: 36px;157 }158 .time-box {159 width: 240px;160 height: 160px;161 border-radius: 28px;162 display: flex;163 align-items: center;164 justify-content: center;165 font-size: 120px;166 font-weight: 700;167 letter-spacing: 2px;168 }169 .hour-box { background: #4b515a; color: #f0f4f8; }170 .minute-box { background: #215790; color: #ecf3fb; }171 .colon {172 font-size: 120px;173 font-weight: 700;174 color: #cfd6dd;175 opacity: 0.9;176 }177 .ampm {178 margin-left: auto;179 display: grid;180 grid-template-rows: 1fr 1fr;181 gap: 18px;182 }183 .ampm .opt {184 width: 150px;185 height: 74px;186 border-radius: 18px;187 display: flex;188 align-items: center;189 justify-content: center;190 font-size: 44px;191 font-weight: 700;192 border: 2px solid #7b7f86;193 }194 .ampm .am { background: #7a5888; color: #f2ecf7; border-color: #9b86a8; }195 .ampm .pm { background: #1d2228; color: #e9edf1; }196 197 /* Dial */198 .dial {199 position: absolute;200 left: 70px;201 top: 320px;202 width: 800px;203 height: 800px;204 border-radius: 50%;205 background: #3a424b;206 box-shadow: inset 0 0 0 2px rgba(255,255,255,0.03);207 }208 .dial .num {209 position: absolute;210 color: #c1c7ce;211 font-size: 42px;212 opacity: 0.9;213 }214 .dial .num.dim { color: #b1b7bf; opacity: 0.85; }215 /* approximate positions around circle */216 .n00 { top: 34px; left: 360px; }217 .n05 { top: 110px; left: 660px; }218 .n10 { top: 368px; left: 750px; }219 .n15 { top: 640px; left: 660px; }220 .n20 { top: 740px; left: 548px; }221 .n25 { top: 810px; left: 430px; }222 .n30 { top: 840px; left: 372px; }223 .n35 { top: 810px; left: 266px; }224 .n40 { top: 740px; left: 156px; }225 .n45 { top: 640px; left: 68px; }226 .n50 { top: 368px; left: 28px; }227 .n55 { top: 110px; left: 68px; }228 229 /* Dial hand */230 .dial .hand-line {231 position: absolute;232 left: 399px;233 top: 160px;234 width: 6px;235 height: 300px;236 background: #a6c6f3;237 border-radius: 3px;238 }239 .dial .hand-dot {240 position: absolute;241 left: 390px;242 top: 428px;243 width: 24px;244 height: 24px;245 background: #a6c6f3;246 border-radius: 50%;247 }248 .dial .hand-bubble {249 position: absolute;250 left: 338px;251 top: 40px;252 width: 120px;253 height: 120px;254 background: #9fc1f0;255 color: #0f1215;256 font-weight: 800;257 border-radius: 50%;258 display: flex;259 align-items: center;260 justify-content: center;261 font-size: 48px;262 }263 264 /* Modal bottom actions */265 .modal-actions {266 position: absolute;267 left: 48px;268 right: 48px;269 bottom: 40px;270 display: flex;271 align-items: center;272 justify-content: space-between;273 }274 .kb-icon {275 display: inline-flex;276 align-items: center;277 gap: 14px;278 color: #cfd6de;279 font-size: 34px;280 }281 .kb-icon .box {282 width: 72px;283 height: 60px;284 border-radius: 12px;285 background: rgba(255,255,255,0.06);286 display: flex;287 align-items: center;288 justify-content: center;289 }290 .modal-actions .buttons {291 display: flex;292 gap: 42px;293 font-size: 44px;294 color: #9fc1f0;295 }296 297 /* Bottom navigation bar */298 .bottom-bar {299 position: absolute;300 bottom: 0;301 left: 0;302 width: 1080px;303 height: 220px;304 background: #101317;305 border-top: 1px solid rgba(255,255,255,0.06);306 display: flex;307 align-items: center;308 justify-content: space-around;309 padding-bottom: 40px;310 box-sizing: border-box;311 }312 .nav-item {313 display: flex;314 flex-direction: column;315 align-items: center;316 gap: 18px;317 color: #aab1b9;318 font-size: 36px;319 }320 .nav-item .icon-wrap {321 width: 120px;322 height: 120px;323 border-radius: 60px;324 background: transparent;325 display: flex;326 align-items: center;327 justify-content: center;328 }329 .nav-item.active .icon-wrap {330 background: #1d232a;331 box-shadow: inset 0 0 0 2px rgba(255,255,255,0.06);332 }333 .nav-item.active { color: #d7dce1; }334 .nav-item svg { fill: none; stroke: #aab1b9; stroke-width: 6; }335 336 /* Gesture pill */337 .gesture-pill {338 position: absolute;339 bottom: 238px;340 left: 50%;341 transform: translateX(-50%);342 width: 220px;343 height: 18px;344 background: #eaeef2;345 border-radius: 12px;346 opacity: 0.85;347 }348</style>349</head>350<body>351<div id="render-target">352 353 <!-- Status Bar -->354 <div class="status-bar">355 <div class="status-left">11:32</div>356 <div class="status-right">357 <div class="status-icon">358 <!-- simple wifi icon -->359 <svg width="40" height="40" viewBox="0 0 24 24">360 <path d="M2 9c5-4 15-4 20 0M6 12c3-2 9-2 12 0M10 15c2-1 4-1 6 0"/>361 <circle cx="12" cy="18" r="1.8" fill="#e6e8ea"></circle>362 </svg>363 </div>364 <div class="status-icon">365 <!-- battery -->366 <svg width="44" height="44" viewBox="0 0 24 24">367 <rect x="3" y="7" width="16" height="10" rx="2" stroke="#e6e8ea"></rect>368 <rect x="4.5" y="8.5" width="12.5" height="7" fill="#e6e8ea"></rect>369 <rect x="20" y="10" width="2" height="4" fill="#e6e8ea"></rect>370 </svg>371 </div>372 </div>373 </div>374 375 <!-- Page Title -->376 <div class="page-title">Alarm</div>377 378 <!-- Alarm card behind modal -->379 <div class="alarm-card">380 <div class="chip">381 <svg width="36" height="36" viewBox="0 0 24 24">382 <rect x="3" y="4" width="18" height="14" rx="3" stroke="#9aa0a6" fill="none"></rect>383 </svg>384 Wakeup385 </div>386 <div class="alarm-time">6:10 <span class="am">AM</span></div>387 <div class="days">Sun, Sat</div>388 <div class="alarm-toggle"></div>389 </div>390 391 <!-- Floating Action Button -->392 <div class="fab">+</div>393 394 <!-- Modal Time Picker -->395 <div class="modal">396 <div class="header">Select time</div>397 <div class="time-row">398 <div class="time-box hour-box">08</div>399 <div class="colon">:</div>400 <div class="time-box minute-box">00</div>401 <div class="ampm">402 <div class="opt am">AM</div>403 <div class="opt pm">PM</div>404 </div>405 </div>406 407 <div class="dial">408 <div class="num n00">00</div>409 <div class="num n05 dim">05</div>410 <div class="num n10 dim">10</div>411 <div class="num n15 dim">15</div>412 <div class="num n20 dim">20</div>413 <div class="num n25 dim">25</div>414 <div class="num n30 dim">30</div>415 <div class="num n35 dim">35</div>416 <div class="num n40 dim">40</div>417 <div class="num n45 dim">45</div>418 <div class="num n50 dim">50</div>419 <div class="num n55 dim">55</div>420 421 <div class="hand-bubble">00</div>422 <div class="hand-line"></div>423 <div class="hand-dot"></div>424 </div>425 426 <div class="modal-actions">427 <div class="kb-icon">428 <div class="box">429 <!-- keyboard icon -->430 <svg width="40" height="28" viewBox="0 0 40 28">431 <rect x="1" y="1" width="38" height="26" rx="5" stroke="#cfd6de" fill="none" stroke-width="2"></rect>432 <rect x="6" y="8" width="6" height="4" fill="#cfd6de"></rect>433 <rect x="16" y="8" width="6" height="4" fill="#cfd6de"></rect>434 <rect x="26" y="8" width="6" height="4" fill="#cfd6de"></rect>435 <rect x="8" y="16" width="24" height="4" fill="#cfd6de"></rect>436 </svg>437 </div>438 </div>439 <div class="buttons">440 <div>Cancel</div>441 <div>OK</div>442 </div>443 </div>444 </div>445 446 <!-- Bottom Navigation -->447 <div class="bottom-bar">448 <div class="nav-item active">449 <div class="icon-wrap">450 <!-- alarm clock -->451 <svg width="64" height="64" viewBox="0 0 24 24">452 <circle cx="12" cy="13" r="7"></circle>453 <path d="M12 13V9M12 13l4 2"></path>454 <path d="M5 5l3 2M19 5l-3 2"></path>455 </svg>456 </div>457 <div>Alarm</div>458 </div>459 <div class="nav-item">460 <div class="icon-wrap">461 <!-- clock -->462 <svg width="64" height="64" viewBox="0 0 24 24">463 <circle cx="12" cy="12" r="8"></circle>464 <path d="M12 12V8M12 12l4 3"></path>465 </svg>466 </div>467 <div>Clock</div>468 </div>469 <div class="nav-item">470 <div class="icon-wrap">471 <!-- timer/hourglass -->472 <svg width="64" height="64" viewBox="0 0 24 24">473 <path d="M6 3h12M6 21h12M7 4c0 4 5 5 5 8s-5 4-5 8M17 4c0 4-5 5-5 8s5 4 5 8"></path>474 </svg>475 </div>476 <div>Timer</div>477 </div>478 <div class="nav-item">479 <div class="icon-wrap">480 <!-- stopwatch -->481 <svg width="64" height="64" viewBox="0 0 24 24">482 <circle cx="12" cy="13" r="7"></circle>483 <path d="M9 2h6M12 5v2M12 13l3-3"></path>484 </svg>485 </div>486 <div>Stopwatch</div>487 </div>488 <div class="nav-item">489 <div class="icon-wrap">490 <!-- bed -->491 <svg width="64" height="64" viewBox="0 0 24 24">492 <rect x="2" y="10" width="20" height="7" rx="1"></rect>493 <rect x="4" y="12" width="6" height="3" rx="1"></rect>494 <rect x="12" y="12" width="8" height="3" rx="1"></rect>495 </svg>496 </div>497 <div>Bedtime</div>498 </div>499 </div>500 501 <!-- Gesture pill -->502 <div class="gesture-pill"></div>503 504</div>505</body>506</html>