GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html>3<head>4<meta charset="utf-8">5<meta name="viewport" content="width=1080, initial-scale=1">6<title>Alarm Set UI</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: "Roboto", Arial, sans-serif; }9 #render-target {10 width: 1080px;11 height: 2400px;12 position: relative;13 overflow: hidden;14 background: #0f1216;15 color: #fff;16 }17 18 /* Status bar */19 .status-bar {20 position: absolute;21 top: 0;22 left: 0;23 width: 1080px;24 height: 120px;25 background: #0e3565;26 display: flex;27 align-items: center;28 padding: 0 36px;29 box-sizing: border-box;30 font-weight: 600;31 }32 .status-left {33 font-size: 46px;34 letter-spacing: 1px;35 }36 .status-right {37 margin-left: auto;38 display: flex;39 align-items: center;40 gap: 28px;41 color: #E0E6F6;42 }43 .tiny-pill {44 width: 60px;45 height: 46px;46 border-radius: 8px;47 background: #e9edf6;48 color: #1a2a4a;49 display: inline-flex;50 align-items: center;51 justify-content: center;52 font-size: 28px;53 font-weight: 700;54 }55 .dot {56 width: 10px;57 height: 10px;58 background: #eaf0ff;59 border-radius: 50%;60 display: inline-block;61 margin: 0 8px;62 }63 .icon {64 width: 40px;65 height: 40px;66 fill: #eaf0ff;67 }68 69 /* Top ad */70 .top-ad {71 position: absolute;72 top: 120px;73 left: 0;74 width: 1080px;75 height: 180px;76 display: flex;77 align-items: center;78 justify-content: center;79 }80 .img-placeholder {81 width: 1040px;82 height: 160px;83 background: #E0E0E0;84 border: 1px solid #BDBDBD;85 color: #555;86 display: flex;87 align-items: center;88 justify-content: center;89 font-size: 36px;90 border-radius: 8px;91 }92 93 /* App bar */94 .app-bar {95 position: absolute;96 top: 300px;97 left: 0;98 width: 1080px;99 height: 140px;100 background: #0e5db3;101 display: flex;102 align-items: center;103 padding: 0 40px;104 box-sizing: border-box;105 }106 .app-title {107 font-size: 72px;108 font-weight: 700;109 margin-left: 24px;110 }111 .app-bar-right {112 margin-left: auto;113 display: flex;114 gap: 28px;115 }116 .hex-icon, .moon-icon {117 width: 62px;118 height: 62px;119 fill: #ffd54f;120 }121 122 /* Dialog */123 .dialog {124 position: absolute;125 top: 520px;126 left: 30px;127 width: 1020px;128 height: 1220px;129 background: #33373c;130 border-radius: 26px;131 box-shadow: 0 20px 60px rgba(0,0,0,0.5);132 padding: 40px 50px;133 box-sizing: border-box;134 }135 .dialog-title {136 text-align: center;137 font-size: 64px;138 color: #3e85ff;139 font-weight: 700;140 margin-bottom: 40px;141 }142 143 .time-picker {144 margin: 20px 0 50px;145 color: #c2c5cc;146 }147 .time-row {148 display: grid;149 grid-template-columns: 1fr 120px 1fr 180px;150 align-items: center;151 gap: 26px;152 }153 .time-block, .ampm-block {154 text-align: center;155 }156 .time-number {157 font-size: 46px;158 opacity: 0.6;159 }160 .time-selected {161 font-size: 72px;162 color: #e9ecf2;163 font-weight: 700;164 margin: 12px 0;165 }166 .underline {167 height: 2px;168 background: #9aa0a6;169 margin: 16px 0;170 }171 .colon {172 font-size: 72px;173 color: #e9ecf2;174 text-align: center;175 font-weight: 700;176 }177 178 .section {179 margin-top: 40px;180 }181 .section-title {182 font-size: 44px;183 color: #e9ecf2;184 margin-bottom: 24px;185 }186 187 .days {188 display: flex;189 gap: 20px;190 flex-wrap: wrap;191 }192 .day-pill {193 width: 96px;194 height: 80px;195 background: #3e85ff;196 border-radius: 16px;197 display: flex;198 align-items: center;199 justify-content: center;200 font-weight: 700;201 color: #fff;202 font-size: 36px;203 }204 .toggle-row {205 display: flex;206 align-items: center;207 justify-content: space-between;208 margin: 40px 0;209 }210 .toggle {211 width: 148px;212 height: 64px;213 background: #2c2f34;214 border-radius: 32px;215 position: relative;216 box-shadow: inset 0 0 0 2px #4c4f55;217 }218 .toggle.on {219 background: #3e85ff;220 }221 .toggle.on .knob {222 left: 84px;223 background: #fff;224 }225 .knob {226 position: absolute;227 top: 6px;228 left: 8px;229 width: 52px;230 height: 52px;231 border-radius: 26px;232 background: #bfc7d7;233 transition: left 0.2s ease;234 }235 236 .slider-row {237 margin: 24px 0 10px;238 }239 .slider-label {240 font-size: 44px;241 margin-bottom: 24px;242 }243 .slider {244 height: 6px;245 background: #5a5f66;246 border-radius: 3px;247 position: relative;248 }249 .slider .fill {250 width: 68%;251 height: 6px;252 background: #3e85ff;253 border-radius: 3px;254 }255 .slider .thumb {256 position: absolute;257 left: 68%;258 top: -10px;259 width: 28px;260 height: 28px;261 background: #3e85ff;262 border-radius: 50%;263 box-shadow: 0 2px 6px rgba(0,0,0,0.5);264 }265 266 .chips-row {267 display: flex;268 gap: 28px;269 margin-top: 40px;270 }271 .chip {272 display: flex;273 align-items: center;274 gap: 20px;275 background: #d9d9dc;276 color: #21242a;277 padding: 20px 26px;278 border-radius: 20px;279 font-size: 40px;280 font-weight: 600;281 }282 .chip .value {283 background: #efeff3;284 padding: 12px 22px;285 border-radius: 14px;286 font-size: 36px;287 font-weight: 700;288 }289 .chev {290 width: 28px;291 height: 28px;292 border-right: 4px solid #43474d;293 border-top: 4px solid #43474d;294 transform: rotate(45deg);295 margin-left: 6px;296 }297 298 .dialog-actions {299 position: absolute;300 bottom: 40px;301 left: 50px;302 right: 50px;303 display: flex;304 justify-content: space-between;305 font-size: 48px;306 align-items: center;307 }308 .action-cancel {309 color: #e9ecf2;310 }311 .action-set {312 color: #3e85ff;313 font-weight: 700;314 }315 316 /* Bottom ad */317 .bottom-ad {318 position: absolute;319 bottom: 216px;320 left: 0;321 width: 1080px;322 height: 180px;323 display: flex;324 align-items: center;325 justify-content: center;326 }327 328 /* Bottom navigation */329 .bottom-nav {330 position: absolute;331 bottom: 90px;332 left: 0;333 width: 1080px;334 height: 126px;335 background: #0f1216;336 border-top: 1px solid #2b2e34;337 display: flex;338 align-items: center;339 justify-content: space-around;340 color: #b6bac3;341 }342 .nav-item {343 display: flex;344 flex-direction: column;345 align-items: center;346 gap: 10px;347 font-size: 32px;348 }349 .nav-item .nav-icon {350 width: 54px;351 height: 54px;352 fill: #9aa0a6;353 }354 .nav-item.active {355 color: #3e85ff;356 font-weight: 700;357 }358 .nav-item.active .nav-icon { fill: #3e85ff; }359 360 /* Gesture bar */361 .gesture {362 position: absolute;363 bottom: 24px;364 left: 50%;365 transform: translateX(-50%);366 width: 220px;367 height: 10px;368 border-radius: 6px;369 background: #e7e7ea;370 opacity: 0.9;371 }372</style>373</head>374<body>375<div id="render-target">376 377 <!-- Status Bar -->378 <div class="status-bar">379 <div class="status-left">12:21</div>380 <div class="status-right">381 <div class="tiny-pill">TH</div>382 <div class="tiny-pill">TOI</div>383 <div class="tiny-pill">TOI</div>384 <span class="dot"></span>385 <!-- Location -->386 <svg class="icon" viewBox="0 0 24 24">387 <path d="M12 2c3.3 0 6 2.7 6 6 0 4.5-6 14-6 14S6 12.5 6 8c0-3.3 2.7-6 6-6zm0 8a2 2 0 1 0 0-4 2 2 0 0 0 0 4z"/>388 </svg>389 <!-- Wifi -->390 <svg class="icon" viewBox="0 0 24 24">391 <path d="M12 18l2.5 2.5L12 23l-2.5-2.5L12 18zm-7-7c4.7-4.7 12.3-4.7 17 0l-2 2c-3.6-3.6-9.4-3.6-13 0l-2-2zm3.5 3.5c3.3-3.3 8.7-3.3 12 0l-2 2c-2.2-2.2-5.8-2.2-8 0l-2-2z"/>392 </svg>393 <!-- Battery -->394 <svg class="icon" viewBox="0 0 24 24">395 <path d="M18 7h2v10h-2V7zM4 7h12v10H4V7zm2 2v6h8V9H6z"/>396 </svg>397 </div>398 </div>399 400 <!-- Top Ad -->401 <div class="top-ad">402 <div class="img-placeholder">[IMG: Top Banner Ad - Kohler bathroom makeover]</div>403 </div>404 405 <!-- App Bar -->406 <div class="app-bar">407 <!-- Settings/Hex icon -->408 <svg class="hex-icon" viewBox="0 0 24 24">409 <path d="M12 2l8 4v12l-8 4-8-4V6l8-4zm0 5a5 5 0 1 0 .001 10.001A5 5 0 0 0 12 7z"/>410 </svg>411 <div class="app-title">Alarm</div>412 <div class="app-bar-right">413 <svg class="hex-icon" viewBox="0 0 24 24">414 <path d="M12 2l8 4v12l-8 4-8-4V6l8-4z"/>415 </svg>416 <svg class="moon-icon" viewBox="0 0 24 24">417 <path d="M21 12.7A9 9 0 1 1 11.3 3a7 7 0 1 0 9.7 9.7z"/>418 </svg>419 </div>420 </div>421 422 <!-- Dialog: Set Alarm -->423 <div class="dialog">424 <div class="dialog-title">Set Alarm</div>425 426 <!-- Time Picker -->427 <div class="time-picker">428 <div class="time-row">429 <div class="time-block">430 <div class="time-number">11</div>431 <div class="underline"></div>432 <div class="time-selected">12</div>433 <div class="underline"></div>434 <div class="time-number">1</div>435 </div>436 <div class="colon">:</div>437 <div class="time-block">438 <div class="time-number">20</div>439 <div class="underline"></div>440 <div class="time-selected">21</div>441 <div class="underline"></div>442 <div class="time-number">22</div>443 </div>444 <div class="ampm-block">445 <div class="time-number">AM</div>446 <div class="underline"></div>447 <div class="time-selected">PM</div>448 <div class="underline"></div>449 </div>450 </div>451 </div>452 453 <!-- Repeat Days -->454 <div class="section">455 <div class="section-title">Repeat Days</div>456 <div class="days">457 <div class="day-pill">M</div>458 <div class="day-pill">TU</div>459 <div class="day-pill">W</div>460 <div class="day-pill">TH</div>461 <div class="day-pill">F</div>462 <div class="day-pill">SA</div>463 <div class="day-pill">SU</div>464 </div>465 </div>466 467 <!-- Vibration -->468 <div class="toggle-row">469 <div class="section-title" style="margin:0;">Vibration</div>470 <div class="toggle on">471 <div class="knob"></div>472 </div>473 </div>474 475 <!-- Volume -->476 <div class="slider-row">477 <div class="slider-label">Volume</div>478 <div class="slider">479 <div class="fill"></div>480 <div class="thumb"></div>481 </div>482 </div>483 484 <!-- Snooze and Ringtone Chips -->485 <div class="chips-row">486 <div class="chip">487 <span>Snooze</span>488 <span class="value">5 mins</span>489 <span class="chev"></span>490 </div>491 <div class="chip">492 <span>Ringtone</span>493 <span class="value">The Bi...</span>494 <span class="chev"></span>495 </div>496 </div>497 498 <!-- Actions -->499 <div class="dialog-actions">500 <div class="action-cancel">Cancel</div>501 <div class="action-set">Set Alarm</div>502 </div>503 </div>504 505 <!-- Bottom Ad -->506 <div class="bottom-ad">507 <div class="img-placeholder">[IMG: Bottom Banner Ad - Booking.com Install CTA]</div>508 </div>509 510 <!-- Bottom Navigation -->511 <div class="bottom-nav">512 <div class="nav-item">513 <svg class="nav-icon" viewBox="0 0 24 24">514 <path d="M12 2a8 8 0 1 0 8 8 8 8 0 0 0-8-8zm1 8h5v2h-7V5h2v5z"/>515 </svg>516 <div>World Clock</div>517 </div>518 <div class="nav-item active">519 <svg class="nav-icon" viewBox="0 0 24 24">520 <path d="M12 2a10 10 0 1 0 .001 20.001A10 10 0 0 0 12 2zm1 11h6v2H11V7h2v6z"/>521 </svg>522 <div>Alarm</div>523 </div>524 <div class="nav-item">525 <svg class="nav-icon" viewBox="0 0 24 24">526 <path d="M5 3h14v4H5V3zm2 6h10l2 12H5l2-12z"/>527 </svg>528 <div>Timer</div>529 </div>530 <div class="nav-item">531 <svg class="nav-icon" viewBox="0 0 24 24">532 <path d="M7 2h10v3H7V2zm5 4a8 8 0 1 0 .001 16.001A8 8 0 0 0 12 6zm1 4v5l4 2-1 2-5-3V10h2z"/>533 </svg>534 <div>Stop Watch</div>535 </div>536 </div>537 538 <!-- Gesture bar -->539 <div class="gesture"></div>540</div>541</body>542</html>