GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Alarm Label Edit UI</title>6<style>7 body { margin: 0; padding: 0; background: transparent; font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; }8 #render-target {9 position: relative;10 width: 1080px;11 height: 2400px;12 overflow: hidden;13 background: #12161B;14 border-radius: 36px;15 box-shadow: 0 10px 30px rgba(0,0,0,0.4);16 color: #E7EAF0;17 }18 19 /* Status bar */20 .status-bar {21 position: absolute;22 top: 0;23 left: 0;24 right: 0;25 height: 120px;26 padding: 0 36px;27 display: flex;28 align-items: center;29 justify-content: space-between;30 color: #FFFFFF;31 opacity: 0.9;32 }33 .status-left { font-size: 42px; letter-spacing: 1px; }34 .status-right { display: flex; gap: 28px; align-items: center; }35 .status-icon svg { width: 32px; height: 32px; fill: none; stroke: #fff; stroke-width: 2.4; opacity: 0.9; }36 37 /* Header title and menu */38 .header {39 position: absolute;40 top: 140px;41 left: 36px;42 right: 36px;43 height: 110px;44 }45 .header-title {46 font-size: 68px;47 color: #B8C2CC;48 letter-spacing: 0.5px;49 }50 .menu-icon {51 position: absolute;52 right: 10px;53 top: 10px;54 width: 60px;55 height: 60px;56 display: flex;57 align-items: center;58 justify-content: center;59 opacity: 0.8;60 }61 .menu-icon svg { fill: #8E98A2; }62 63 /* Alarm card */64 .card {65 position: absolute;66 left: 36px;67 right: 36px;68 top: 260px;69 background: #161C22;70 border-radius: 44px;71 padding: 40px 36px 260px 36px;72 box-shadow: 0 6px 18px rgba(0,0,0,0.35) inset;73 }74 .add-label {75 display: flex;76 align-items: center;77 gap: 16px;78 color: #9AA7B2;79 font-size: 40px;80 }81 .add-label svg { width: 44px; height: 44px; fill: none; stroke: #9AA7B2; stroke-width: 2.2; }82 .collapse-chip {83 position: absolute;84 right: 28px;85 top: 28px;86 width: 72px;87 height: 72px;88 border-radius: 36px;89 background: #2A3036;90 display: flex;91 align-items: center;92 justify-content: center;93 }94 .collapse-chip svg { width: 32px; height: 32px; fill: none; stroke: #A1A8B0; stroke-width: 3; }95 96 .time-row {97 margin-top: 30px;98 display: flex;99 align-items: baseline;100 gap: 24px;101 }102 .time {103 font-size: 170px;104 font-weight: 700;105 color: #EAF0F6;106 line-height: 1;107 }108 .meridiem {109 font-size: 52px;110 color: #C7D0DA;111 margin-top: 22px;112 letter-spacing: 2px;113 }114 115 /* Overlay dialog for label */116 .overlay {117 position: absolute;118 left: 90px;119 top: 530px;120 width: 900px;121 height: 430px;122 background: #25303A;123 border-radius: 48px;124 box-shadow: 0 16px 40px rgba(0,0,0,0.6);125 padding: 32px;126 z-index: 5;127 }128 .overlay .label-caption {129 color: #A9C7FF;130 font-size: 38px;131 margin-left: 24px;132 margin-bottom: 16px;133 }134 .overlay .input {135 height: 190px;136 border-radius: 24px;137 border: 3px solid #7FB3FF;138 background: #2B3742;139 color: #DCE7F7;140 font-size: 64px;141 padding: 30px 28px;142 box-sizing: border-box;143 }144 .overlay .actions {145 position: absolute;146 bottom: 28px;147 right: 32px;148 display: flex;149 gap: 44px;150 align-items: center;151 }152 .overlay .btn {153 font-size: 46px;154 color: #9DB2C8;155 }156 .overlay .btn.primary { color: #A9C7FF; }157 158 /* List items under card */159 .list {160 position: absolute;161 left: 36px;162 right: 36px;163 top: 960px;164 padding-bottom: 36px;165 }166 .item {167 height: 120px;168 display: flex;169 align-items: center;170 gap: 26px;171 color: #C7CFD8;172 font-size: 44px;173 }174 .item + .item { margin-top: 8px; }175 .item .icon { width: 56px; height: 56px; display: inline-flex; align-items: center; justify-content: center; }176 .item .icon svg { width: 56px; height: 56px; fill: none; stroke: #9AA7B2; stroke-width: 2.6; }177 .spacer { flex: 1; }178 .chip {179 width: 64px; height: 64px; border-radius: 32px; background: #2C333A;180 display: flex; align-items: center; justify-content: center;181 }182 .chip svg { width: 34px; height: 34px; }183 .check-icon { stroke: #BBD3FF; stroke-width: 3; fill: none; }184 .plus-icon { stroke: #BAC3CD; stroke-width: 3; fill: none; }185 186 /* Keyboard */187 .keyboard {188 position: absolute;189 left: 0;190 right: 0;191 bottom: 120px;192 height: 800px;193 background: #1A1F25;194 border-top-left-radius: 36px;195 border-top-right-radius: 36px;196 box-shadow: 0 -8px 18px rgba(0,0,0,0.4);197 }198 .suggestions {199 height: 100px;200 border-bottom: 1px solid #2A3036;201 display: flex;202 align-items: center;203 padding: 0 28px;204 gap: 28px;205 color: #E3E8EF;206 font-size: 36px;207 }208 .suggestions .pill {209 background: #272D34;210 padding: 12px 24px;211 border-radius: 22px;212 color: #E6EBF2;213 }214 .keys {215 padding: 24px;216 display: grid;217 grid-template-columns: repeat(10, 1fr);218 grid-auto-rows: 120px;219 gap: 16px;220 }221 .key {222 background: #2A3036;223 border-radius: 22px;224 color: #E7EDF6;225 display: flex;226 align-items: center;227 justify-content: center;228 font-size: 46px;229 box-shadow: inset 0 -4px 0 rgba(255,255,255,0.03);230 }231 .key.small { font-size: 38px; color: #B8C2CC; }232 .key.light { background: #BAC5D9; color: #111820; }233 .key.blue { background: #C9D6FF; color: #1A2130; }234 .space-row {235 padding: 0 24px;236 height: 120px;237 display: grid;238 grid-template-columns: 1.2fr 0.8fr 5fr 0.8fr 1.2fr;239 gap: 16px;240 align-items: center;241 }242 .pill-key { background: #2A3036; color: #CAD2DA; border-radius: 22px; display: flex; align-items: center; justify-content: center; height: 100%; font-size: 38px; }243 .space { background: #2A3036; border-radius: 22px; height: 100%; }244 .enter { background: #C9D6FF; color: #1A2130; border-radius: 22px; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 42px; }245 246 /* Bottom gesture pill */247 .gesture-pill {248 position: absolute;249 bottom: 32px;250 left: 50%;251 transform: translateX(-50%);252 width: 420px;253 height: 12px;254 background: #E7E7EB;255 border-radius: 8px;256 opacity: 0.9;257 }258</style>259</head>260<body>261<div id="render-target">262 263 <!-- Status bar -->264 <div class="status-bar">265 <div class="status-left">11:28</div>266 <div class="status-right">267 <div class="status-icon">268 <!-- Notifications (bell) -->269 <svg viewBox="0 0 24 24"><path d="M12 3c-3 0-5 2-5 5v3c0 1-1.2 2-2 2v1h14v-1c-.8 0-2-1-2-2V8c0-3-2-5-5-5z"/><path d="M10 19a2 2 0 0 0 4 0"/></svg>270 </div>271 <div class="status-icon">272 <!-- Headphones -->273 <svg viewBox="0 0 24 24"><path d="M4 12a8 8 0 0 1 16 0"/><rect x="3" y="12" width="4" height="7" rx="2"/><rect x="17" y="12" width="4" height="7" rx="2"/></svg>274 </div>275 <div class="status-icon">276 <!-- Square icon -->277 <svg viewBox="0 0 24 24"><rect x="5" y="5" width="14" height="14" rx="2"/></svg>278 </div>279 <div class="status-icon">280 <!-- T icon -->281 <svg viewBox="0 0 24 24"><path d="M5 6h14M12 6v12"/></svg>282 </div>283 <div class="status-icon">284 <!-- Dot -->285 <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="2"/></svg>286 </div>287 <div class="status-icon">288 <!-- Wifi -->289 <svg viewBox="0 0 24 24"><path d="M2 8c5-4 15-4 20 0"/><path d="M5 12c3-3 11-3 14 0"/><path d="M8 15c2-2 6-2 8 0"/><circle cx="12" cy="18" r="2"/></svg>290 </div>291 <div class="status-icon">292 <!-- Battery -->293 <svg viewBox="0 0 24 24"><rect x="3" y="7" width="17" height="10" rx="2"/><rect x="21" y="10" width="2" height="4"/></svg>294 </div>295 </div>296 </div>297 298 <!-- Header -->299 <div class="header">300 <div class="header-title">Alarm</div>301 <div class="menu-icon">302 <!-- Vertical dots -->303 <svg viewBox="0 0 24 24">304 <circle cx="12" cy="5" r="2.2"/>305 <circle cx="12" cy="12" r="2.2"/>306 <circle cx="12" cy="19" r="2.2"/>307 </svg>308 </div>309 </div>310 311 <!-- Alarm Card -->312 <div class="card">313 <div class="collapse-chip">314 <svg viewBox="0 0 24 24"><path d="M8 14l4-4 4 4"/></svg>315 </div>316 <div class="add-label">317 <svg viewBox="0 0 24 24"><path d="M4 6h9l5 6-7 7-7-7z"/><path d="M7 6v-2"/></svg>318 <div>Add label</div>319 </div>320 321 <div class="time-row">322 <div class="time">6:10</div>323 <div class="meridiem">AM</div>324 </div>325 </div>326 327 <!-- Overlay dialog -->328 <div class="overlay">329 <div class="label-caption">Label</div>330 <div class="input">Wakeup</div>331 <div class="actions">332 <div class="btn">Cancel</div>333 <div class="btn primary">OK</div>334 </div>335 </div>336 337 <!-- List items -->338 <div class="list">339 <div class="item">340 <div class="icon">341 <!-- Bell/Ringtone -->342 <svg viewBox="0 0 24 24"><path d="M12 3c-3 0-5 2-5 5v3c0 1-1.2 2-2 2v1h14v-1c-.8 0-2-1-2-2V8c0-3-2-5-5-5z"/><path d="M10 19a2 2 0 0 0 4 0"/></svg>343 </div>344 <div>Full of Wonder</div>345 </div>346 347 <div class="item">348 <div class="icon">349 <!-- Vibrate -->350 <svg viewBox="0 0 24 24">351 <rect x="4" y="8" width="4" height="8" rx="1.5"/>352 <rect x="16" y="8" width="4" height="8" rx="1.5"/>353 </svg>354 </div>355 <div>Vibrate</div>356 <div class="spacer"></div>357 <div class="chip">358 <svg class="check-icon" viewBox="0 0 24 24"><path d="M5 12l4 4 10-10"/></svg>359 </div>360 </div>361 362 <div class="item">363 <div class="icon">364 <!-- Google Assistant dots -->365 <svg viewBox="0 0 24 24">366 <circle cx="7" cy="12" r="2.5"/>367 <circle cx="12" cy="9" r="2"/>368 <circle cx="16.5" cy="13.5" r="1.8"/>369 <circle cx="20" cy="10" r="1.2"/>370 </svg>371 </div>372 <div>Google Assistant Routine</div>373 <div class="spacer"></div>374 <div class="chip">375 <svg class="plus-icon" viewBox="0 0 24 24"><path d="M12 5v14M5 12h14"/></svg>376 </div>377 </div>378 379 <div class="item">380 <div class="icon">381 <!-- Trash/Delete -->382 <svg viewBox="0 0 24 24">383 <path d="M4 7h16"/>384 <rect x="6" y="7" width="12" height="12" rx="2"/>385 <path d="M10 3h4l1 2H9z"/>386 </svg>387 </div>388 <div>Delete</div>389 </div>390 </div>391 392 <!-- Keyboard -->393 <div class="keyboard">394 <div class="suggestions">395 <div class="pill">Wakeup</div>396 <div class="pill">Wake-up</div>397 <div class="pill">Wake up</div>398 <div style="margin-left:auto; display:flex; align-items:center; gap:14px;">399 <!-- Mic icon -->400 <svg viewBox="0 0 24 24" width="34" height="34" style="fill:none; stroke:#C9D6FF; stroke-width:2.4;">401 <rect x="8" y="4" width="8" height="10" rx="4"/>402 <path d="M5 11c0 4 3 7 7 7s7-3 7-7M12 18v3"/>403 </svg>404 </div>405 </div>406 407 <div class="keys">408 <!-- Row 1 -->409 <div class="key">q</div><div class="key">w</div><div class="key">e</div><div class="key">r</div><div class="key">t</div>410 <div class="key">y</div><div class="key">u</div><div class="key">i</div><div class="key">o</div><div class="key">p</div>411 <!-- Row 2 -->412 <div class="key small">a</div><div class="key small">s</div><div class="key small">d</div><div class="key small">f</div><div class="key small">g</div>413 <div class="key small">h</div><div class="key small">j</div><div class="key small">k</div><div class="key small">l</div><div class="key small">⌫</div>414 <!-- Row 3 -->415 <div class="key small">⇧</div><div class="key small">z</div><div class="key small">x</div><div class="key small">c</div><div class="key small">v</div>416 <div class="key small">b</div><div class="key small">n</div><div class="key small">m</div><div class="key small">.</div><div class="key small">✓</div>417 </div>418 419 <div class="space-row">420 <div class="pill-key">?123</div>421 <div class="pill-key">,</div>422 <div class="space"></div>423 <div class="pill-key">.</div>424 <div class="enter">425 <!-- Check icon -->426 <svg viewBox="0 0 24 24" width="34" height="34" style="fill:none; stroke:#1A2130; stroke-width:3;">427 <path d="M4 13l5 5 11-11"/>428 </svg>429 </div>430 </div>431 </div>432 433 <!-- Bottom gesture pill -->434 <div class="gesture-pill"></div>435 436</div>437</body>438</html>