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, initial-scale=1.0">6<title>Set Alarm UI</title>7<style>8 body {9 margin: 0;10 padding: 0;11 background: transparent;12 font-family: "Roboto", Arial, sans-serif;13 }14 15 #render-target {16 width: 1080px;17 height: 2400px;18 position: relative;19 overflow: hidden;20 background: #0f1115;21 color: #FFFFFF;22 }23 24 /* Status bar */25 .status-bar {26 position: absolute;27 top: 0;28 left: 0;29 width: 1080px;30 height: 120px;31 background: #0F2A58;32 color: #E9EEF9;33 display: flex;34 align-items: center;35 padding: 0 36px;36 box-sizing: border-box;37 font-weight: 500;38 }39 .status-time {40 font-size: 44px;41 margin-right: 24px;42 }43 .badge {44 background: #F5F7FB;45 color: #1A2A44;46 border: 1px solid #B6C2D1;47 border-radius: 6px;48 font-size: 26px;49 padding: 6px 10px;50 margin-right: 10px;51 }52 .dot {53 width: 10px;54 height: 10px;55 background: #DDE6F5;56 border-radius: 50%;57 margin: 0 22px;58 }59 .status-icons {60 margin-left: auto;61 display: flex;62 align-items: center;63 gap: 26px;64 }65 .status-icons svg {66 width: 34px;67 height: 34px;68 fill: #E9EEF9;69 }70 71 /* Dialog */72 .dialog {73 position: absolute;74 left: 40px;75 top: 330px;76 width: 1000px;77 background: #2F3238;78 border-radius: 28px;79 box-shadow: 0 20px 60px rgba(0,0,0,0.6);80 padding: 42px 48px 36px;81 box-sizing: border-box;82 }83 .dialog h2 {84 text-align: center;85 margin: 0 0 28px 0;86 font-size: 52px;87 color: #4A78FF;88 font-weight: 600;89 }90 91 /* Time wheel mimic */92 .time-wheel {93 margin-top: 8px;94 margin-bottom: 36px;95 }96 .tw-row {97 display: flex;98 align-items: center;99 justify-content: space-between;100 color: #8A8F98;101 font-size: 40px;102 padding: 6px 12px;103 }104 .tw-lines {105 display: flex;106 gap: 40px;107 margin: 12px 6px;108 }109 .tw-lines .line {110 flex: 1;111 height: 4px;112 background: #6C727A;113 opacity: 0.6;114 border-radius: 2px;115 }116 .tw-selected {117 display: flex;118 align-items: center;119 justify-content: center;120 font-size: 54px;121 color: #DDE1E6;122 gap: 14px;123 margin: 18px 0;124 }125 .tw-pill {126 min-width: 110px;127 text-align: center;128 background: rgba(74,120,255,0.18);129 color: #4A78FF;130 border-radius: 8px;131 padding: 10px 16px;132 font-weight: 600;133 }134 .ampm {135 color: #C7CBD1;136 font-size: 42px;137 }138 139 /* Section labels */140 .section-label {141 font-size: 36px;142 color: #D5D8DE;143 margin: 32px 0 18px;144 }145 146 /* Day chips */147 .chips {148 display: flex;149 gap: 16px;150 flex-wrap: wrap;151 }152 .chip {153 background: #2E63FF;154 color: #FFFFFF;155 padding: 18px 22px;156 border-radius: 12px;157 font-size: 32px;158 font-weight: 600;159 min-width: 80px;160 text-align: center;161 box-shadow: inset 0 -2px 0 rgba(0,0,0,0.2);162 }163 164 /* Toggle */165 .toggle-row {166 display: flex;167 align-items: center;168 justify-content: space-between;169 margin-top: 34px;170 }171 .toggle {172 width: 120px;173 height: 64px;174 background: #2E63FF;175 border-radius: 32px;176 position: relative;177 box-shadow: inset 0 0 0 2px rgba(255,255,255,0.06);178 }179 .toggle::after {180 content: "";181 position: absolute;182 right: 6px;183 top: 6px;184 width: 52px;185 height: 52px;186 background: #FFFFFF;187 border-radius: 50%;188 }189 190 /* Slider */191 .slider-row {192 margin-top: 20px;193 }194 .slider-track {195 height: 8px;196 background: #48505A;197 border-radius: 4px;198 position: relative;199 margin-top: 12px;200 }201 .slider-progress {202 width: 70%;203 height: 8px;204 background: #2E63FF;205 border-radius: 4px 0 0 4px;206 }207 .slider-thumb {208 position: absolute;209 top: -10px;210 left: calc(70% - 12px);211 width: 28px;212 height: 28px;213 background: #2E63FF;214 border: 3px solid #B7C8FF;215 border-radius: 50%;216 }217 218 /* Options buttons */219 .options {220 display: flex;221 gap: 28px;222 margin-top: 28px;223 flex-wrap: wrap;224 }225 .option {226 background: #D7DADF;227 color: #0F1115;228 border-radius: 18px;229 padding: 18px 22px;230 display: flex;231 align-items: center;232 gap: 18px;233 font-size: 32px;234 min-width: 380px;235 box-shadow: inset 0 -2px 0 rgba(0,0,0,0.12);236 }237 .option .label {238 background: #E9ECF1;239 padding: 10px 16px;240 border-radius: 12px;241 font-weight: 600;242 }243 .option svg {244 width: 28px;245 height: 28px;246 fill: #333B44;247 margin-left: auto;248 }249 250 /* Actions */251 .actions {252 display: flex;253 justify-content: space-between;254 align-items: center;255 margin-top: 24px;256 padding-top: 10px;257 }258 .action-cancel {259 font-size: 40px;260 color: #B9BEC6;261 }262 .action-set {263 font-size: 40px;264 color: #2E63FF;265 font-weight: 600;266 }267 268 /* Keyboard */269 .keyboard {270 position: absolute;271 bottom: 0;272 left: 0;273 width: 1080px;274 background: #16171B;275 padding: 28px 36px 48px;276 box-sizing: border-box;277 border-top-left-radius: 24px;278 border-top-right-radius: 24px;279 }280 .keys {281 display: grid;282 grid-template-columns: repeat(4, 1fr);283 gap: 26px;284 }285 .key {286 height: 160px;287 background: #2A2B2F;288 border-radius: 90px;289 display: flex;290 align-items: center;291 justify-content: center;292 font-size: 64px;293 color: #EFEFEF;294 box-shadow: inset 0 -4px 0 rgba(0,0,0,0.3);295 }296 .key.func {297 background: #3A3B40;298 color: #EDEDED;299 }300 .key.back {301 background: #F5DADF;302 color: #2A2B2F;303 }304 .key.enter {305 background: #E8DAFF;306 color: #2A2B2F;307 }308 .key svg {309 width: 48px;310 height: 48px;311 fill: currentColor;312 }313 314 /* Gesture bar */315 .gesture {316 position: absolute;317 bottom: 16px;318 left: 50%;319 transform: translateX(-50%);320 width: 480px;321 height: 10px;322 background: #D6D8DC;323 border-radius: 6px;324 opacity: 0.6;325 }326</style>327</head>328<body>329<div id="render-target">330 331 <!-- Status Bar -->332 <div class="status-bar">333 <div class="status-time">12:23</div>334 <div class="badge">TH</div>335 <div class="badge">TOI</div>336 <div class="badge">TOI</div>337 <div class="dot"></div>338 <div class="status-icons">339 <!-- Location pin -->340 <svg viewBox="0 0 24 24"><path d="M12 2a7 7 0 0 0-7 7c0 5 7 13 7 13s7-8 7-13a7 7 0 0 0-7-7zm0 9a2 2 0 1 1 0-4 2 2 0 0 1 0 4z"/></svg>341 <!-- WiFi -->342 <svg viewBox="0 0 24 24"><path d="M2 8c5-5 15-5 20 0l-2 2c-4-4-12-4-16 0L2 8zm4 4c3-3 9-3 12 0l-2 2c-2-2-6-2-8 0l-2-2zm4 4 2 2 2-2-2-2-2 2z"/></svg>343 <!-- Battery -->344 <svg viewBox="0 0 24 24"><path d="M16 5h2v2h2v10h-2v2h-2V5zM2 7h12v10H2V7z"/></svg>345 </div>346 </div>347 348 <!-- Dialog -->349 <div class="dialog">350 <h2>Set Alarm</h2>351 352 <div class="time-wheel">353 <div class="tw-row">354 <div>11</div>355 <div>20</div>356 <div>PM</div>357 </div>358 <div class="tw-lines">359 <div class="line"></div>360 <div class="line"></div>361 <div class="line" style="max-width:180px;"></div>362 </div>363 <div class="tw-selected">364 <span class="tw-pill">12</span>365 <span>:</span>366 <span class="tw-pill">21</span>367 <span class="ampm">AM</span>368 </div>369 <div class="tw-lines">370 <div class="line"></div>371 <div class="line"></div>372 <div class="line" style="max-width:180px;"></div>373 </div>374 <div class="tw-row" style="opacity:.5;">375 <div>1</div>376 <div>22</div>377 <div>PM</div>378 </div>379 </div>380 381 <div class="section-label">Repeat Days</div>382 <div class="chips">383 <div class="chip">M</div>384 <div class="chip">TU</div>385 <div class="chip">W</div>386 <div class="chip">TH</div>387 <div class="chip">F</div>388 <div class="chip">SA</div>389 <div class="chip">SU</div>390 </div>391 392 <div class="toggle-row">393 <div class="section-label" style="margin:0;">Vibration</div>394 <div class="toggle" aria-label="Vibration On"></div>395 </div>396 397 <div class="slider-row">398 <div class="section-label" style="margin: 24px 0 6px;">Volume</div>399 <div class="slider-track">400 <div class="slider-progress"></div>401 <div class="slider-thumb"></div>402 </div>403 </div>404 405 <div class="options">406 <div class="option">407 <div>Snooze</div>408 <div class="label">5 mins</div>409 <svg viewBox="0 0 24 24"><path d="M9 6l6 6-6 6z"/></svg>410 </div>411 <div class="option">412 <div>Ringtone</div>413 <div class="label">The Bi...</div>414 <svg viewBox="0 0 24 24"><path d="M9 6l6 6-6 6z"/></svg>415 </div>416 </div>417 418 <div class="actions">419 <div class="action-cancel">Cancel</div>420 <div class="action-set">Set Alarm</div>421 </div>422 </div>423 424 <!-- Keyboard -->425 <div class="keyboard">426 <div class="keys">427 <div class="key">1</div>428 <div class="key">2</div>429 <div class="key">3</div>430 <div class="key func">−</div>431 432 <div class="key">4</div>433 <div class="key">5</div>434 <div class="key">6</div>435 <div class="key func">⟂</div>436 437 <div class="key">7</div>438 <div class="key">8</div>439 <div class="key">9</div>440 <div class="key back">441 <svg viewBox="0 0 24 24"><path d="M6 7l-4 5 4 5h12a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2H6zm5 2 3 3-3 3-1-1 2-2-2-2 1-1z"/></svg>442 </div>443 444 <div class="key func">,</div>445 <div class="key">0</div>446 <div class="key">.</div>447 <div class="key enter">448 <svg viewBox="0 0 24 24"><path d="M5 12h10V8l4 4-4 4v-4H5z"/></svg>449 </div>450 </div>451 </div>452 453 <div class="gesture"></div>454</div>455</body>456</html>