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">6<title>Alarm UI</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; }9 #render-target {10 width: 1080px;11 height: 2400px;12 position: relative;13 overflow: hidden;14 background: #0c2a1d; /* deep green */15 color: #d6e6d6;16 }17 18 /* Top status area */19 .status-bar {20 position: absolute;21 top: 0;22 left: 0;23 width: 1080px;24 height: 120px;25 padding: 28px 36px;26 box-sizing: border-box;27 color: #cfe3cf;28 display: flex;29 justify-content: space-between;30 align-items: center;31 font-weight: 600;32 }33 .status-icons { display: flex; gap: 22px; align-items: center; }34 .dot { width: 14px; height: 14px; background: #cfe3cf; border-radius: 50%; opacity: .8; }35 36 /* Page title */37 .page-title {38 position: absolute;39 top: 140px;40 left: 44px;41 font-size: 72px;42 font-weight: 600;43 letter-spacing: 0.5px;44 color: #e1f2e1;45 }46 47 /* Menu dots */48 .menu-dots {49 position: absolute;50 top: 150px;51 right: 36px;52 width: 60px;53 height: 60px;54 display: flex;55 align-items: center;56 justify-content: center;57 }58 .menu-dots svg circle { fill: #b8d6b8; }59 60 /* Cards */61 .card {62 position: relative;63 width: 980px;64 margin: 0 50px;65 margin-top: 40px;66 background: #112e21;67 border-radius: 42px;68 padding: 42px;69 box-sizing: border-box;70 color: #d6e6d6;71 box-shadow: inset 0 0 0 1px rgba(255,255,255,0.03);72 }73 74 .card-header {75 display: flex;76 align-items: center;77 justify-content: space-between;78 margin-bottom: 16px;79 }80 .tag {81 display: flex;82 align-items: center;83 gap: 16px;84 color: #c8dcc8;85 font-size: 36px;86 }87 .chevron-pill {88 width: 70px;89 height: 70px;90 border-radius: 36px;91 background: #1b3b2c;92 display: flex;93 align-items: center;94 justify-content: center;95 opacity: .85;96 }97 .time-row {98 display: flex;99 align-items: flex-end;100 gap: 16px;101 margin-top: 12px;102 margin-bottom: 28px;103 }104 .time {105 font-size: 160px;106 line-height: 1;107 font-weight: 700;108 letter-spacing: 2px;109 color: #e7f6e7;110 }111 .ampm {112 font-size: 48px;113 font-weight: 700;114 margin-bottom: 18px;115 color: #d0e8d0;116 }117 .sub {118 font-size: 44px;119 color: #c3d9c3;120 margin-bottom: 26px;121 }122 123 /* days + toggle row */124 .days-toggle {125 display: flex;126 align-items: center;127 justify-content: space-between;128 margin-bottom: 24px;129 }130 .days {131 display: flex;132 gap: 22px;133 }134 .day {135 width: 84px;136 height: 84px;137 border-radius: 42px;138 border: 2px solid #415e4c;139 color: #cfe1cf;140 display: flex;141 align-items: center;142 justify-content: center;143 font-size: 40px;144 opacity: .9;145 }146 .toggle {147 width: 170px; height: 86px; border-radius: 50px;148 background: #13422f;149 position: relative;150 box-shadow: inset 0 0 0 2px rgba(255,255,255,0.05);151 }152 .toggle.on { background: #0d4d2f; }153 .toggle .knob {154 position: absolute; top: 10px; right: 10px;155 width: 66px; height: 66px; border-radius: 50%;156 background: #17e46a;157 box-shadow: 0 4px 10px rgba(23,228,106,0.3);158 }159 160 /* list items */161 .list { margin-top: 10px; }162 .list-item {163 display: flex; align-items: center; justify-content: space-between;164 padding: 22px 6px;165 font-size: 40px;166 color: #d6e6d6;167 }168 .list-left { display: flex; align-items: center; gap: 26px; }169 .circle-btn {170 width: 64px; height: 64px; border-radius: 32px; border: 2px solid #5c7b68;171 display: flex; align-items: center; justify-content: center; color: #b7d1b7;172 }173 .check {174 width: 60px; height: 60px; border-radius: 30px; background: #19e56c;175 display: flex; align-items: center; justify-content: center;176 }177 .check svg { fill: #0e2a1d; }178 179 /* Floating snackbar */180 .snackbar {181 position: absolute;182 left: 26px;183 top: 1180px;184 padding: 26px 36px;185 background: rgba(120,140,128,0.85);186 color: #f5f9f5;187 border-radius: 44px;188 font-size: 40px;189 box-shadow: 0 8px 24px rgba(0,0,0,0.35);190 }191 192 /* Floating action circle */193 .fab {194 position: absolute;195 left: 430px;196 top: 1460px;197 width: 220px; height: 220px; border-radius: 110px;198 background: #18f36b;199 box-shadow: 0 16px 40px rgba(24,243,107,0.35);200 display: flex; align-items: center; justify-content: center;201 color: #0c2a1d; font-size: 120px; font-weight: 700;202 }203 204 /* Bottom navigation */205 .bottom-nav {206 position: absolute; bottom: 0; left: 0;207 width: 1080px; height: 240px;208 background: #0e2f22;209 display: flex; align-items: center; justify-content: space-around;210 box-shadow: 0 -6px 16px rgba(0,0,0,0.35);211 }212 .nav-item {213 width: 180px; height: 170px;214 display: flex; flex-direction: column; align-items: center; justify-content: center;215 color: #cfe3cf;216 gap: 16px;217 font-size: 34px;218 }219 .nav-item .icon { width: 60px; height: 60px; }220 .nav-item.active {221 background: #143a2b; border-radius: 60px; padding: 10px 18px;222 color: #e9f7e9;223 }224 225 /* collapsed card styling */226 .card.small { padding: 32px; }227 .small .title {228 font-size: 42px; color: #d6e6d6; margin-bottom: 24px;229 }230 .small .time-mini {231 font-size: 96px; font-weight: 700; color: #e7f6e7;232 }233 .small .ampm-mini {234 font-size: 34px; font-weight: 700; color: #d0e8d0; margin-left: 12px;235 }236 .small .sub-mini { font-size: 36px; color: #c3d9c3; margin-top: 12px; }237 238 /* simple icon base */239 .ico { width: 48px; height: 48px; }240 .ico svg { width: 100%; height: 100%; fill: none; stroke: #cfe3cf; stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; }241</style>242</head>243<body>244<div id="render-target">245 246 <!-- Status bar -->247 <div class="status-bar">248 <div style="font-size:36px;">12:25</div>249 <div class="status-icons">250 <!-- signal -->251 <svg width="44" height="44" viewBox="0 0 24 24"><rect x="2" y="14" width="3" height="8" fill="#cfe3cf"/><rect x="7" y="10" width="3" height="12" fill="#cfe3cf"/><rect x="12" y="6" width="3" height="16" fill="#cfe3cf"/><rect x="17" y="2" width="3" height="20" fill="#cfe3cf"/></svg>252 <!-- wifi -->253 <svg width="44" height="44" viewBox="0 0 24 24"><path d="M2 8c5-5 15-5 20 0" stroke="#cfe3cf" stroke-width="2" fill="none"/><path d="M5 12c3-3 11-3 14 0" stroke="#cfe3cf" stroke-width="2" fill="none"/><path d="M9 16c2-2 4-2 6 0" stroke="#cfe3cf" stroke-width="2" fill="none"/><circle cx="12" cy="19" r="1.8" fill="#cfe3cf"/></svg>254 <!-- notifications placeholder squares -->255 <svg width="44" height="44" viewBox="0 0 24 24"><rect x="4" y="4" width="6" height="6" fill="#cfe3cf"/><rect x="14" y="4" width="6" height="6" fill="#cfe3cf"/></svg>256 <div class="dot"></div>257 <!-- battery -->258 <svg width="60" height="44" viewBox="0 0 30 18">259 <rect x="1" y="3" width="24" height="12" rx="3" fill="none" stroke="#cfe3cf" stroke-width="2"/>260 <rect x="3" y="5" width="16" height="8" rx="2" fill="#cfe3cf"/>261 <rect x="26" y="7" width="3" height="4" rx="1" fill="#cfe3cf"/>262 </svg>263 </div>264 </div>265 266 <!-- Title -->267 <div class="page-title">Alarm</div>268 269 <!-- Menu dots -->270 <div class="menu-dots">271 <svg width="30" height="30" viewBox="0 0 24 24">272 <circle cx="12" cy="4" r="2.2"/>273 <circle cx="12" cy="12" r="2.2"/>274 <circle cx="12" cy="20" r="2.2"/>275 </svg>276 </div>277 278 <!-- First alarm expanded card -->279 <div class="card" style="top: 220px;">280 <div class="card-header">281 <div class="tag">282 <svg class="ico" viewBox="0 0 24 24"><path d="M4 7h8l8 8-6 6-8-8V7z"/><circle cx="9" cy="12" r="2"/></svg>283 <div>yoga session</div>284 </div>285 <div class="chevron-pill">286 <svg width="32" height="32" viewBox="0 0 24 24"><path d="M6 14l6-6 6 6" stroke="#cfe3cf" stroke-width="2" fill="none" stroke-linecap="round"/></svg>287 </div>288 </div>289 290 <div class="time-row">291 <div class="time">8:00</div>292 <div class="ampm">AM</div>293 </div>294 295 <div class="sub">Tomorrow</div>296 297 <div class="days-toggle">298 <div class="days">299 <div class="day">S</div>300 <div class="day">M</div>301 <div class="day">T</div>302 <div class="day">W</div>303 <div class="day">T</div>304 <div class="day">F</div>305 <div class="day">S</div>306 </div>307 <div class="toggle on"><div class="knob"></div></div>308 </div>309 310 <div class="list">311 <div class="list-item">312 <div class="list-left">313 <!-- calendar icon -->314 <span class="ico">315 <svg viewBox="0 0 24 24">316 <path d="M4 6h16v14H4z"/>317 <path d="M4 10h16"/>318 <path d="M7 3v4M17 3v4"/>319 </svg>320 </span>321 <span>Schedule alarm</span>322 </div>323 <div class="circle-btn">+</div>324 </div>325 326 <div class="list-item">327 <div class="list-left">328 <!-- bell icon -->329 <span class="ico">330 <svg viewBox="0 0 24 24">331 <path d="M12 4c-3 0-5 2-5 5v4l-2 2h14l-2-2V9c0-3-2-5-5-5z"/>332 <path d="M9 18c0 1.7 1.3 3 3 3s3-1.3 3-3"/>333 </svg>334 </span>335 <span>Full of Wonder</span>336 </div>337 </div>338 339 <div class="list-item">340 <div class="list-left">341 <!-- vibrate icon -->342 <span class="ico">343 <svg viewBox="0 0 24 24">344 <path d="M6 8l-2 8M10 6l-2 12M14 6l2 12M18 8l2 8"/>345 </svg>346 </span>347 <span>Vibrate</span>348 </div>349 <div class="check">350 <svg viewBox="0 0 24 24"><path d="M5 13l4 4 10-10" stroke="#0c2a1d" stroke-width="3" fill="none" stroke-linecap="round"/></svg>351 </div>352 </div>353 354 <div class="list-item">355 <div class="list-left">356 <!-- assistant routine icon: dots/lines -->357 <span class="ico">358 <svg viewBox="0 0 24 24">359 <circle cx="7" cy="14" r="2"/>360 <circle cx="12" cy="9" r="2"/>361 <circle cx="17" cy="14" r="2"/>362 <path d="M8.5 12.5l3-3 3 3" />363 </svg>364 </span>365 <span>Google Assistant Routine</span>366 </div>367 <div class="circle-btn">+</div>368 </div>369 370 <div class="list-item">371 <div class="list-left">372 <!-- trash icon -->373 <span class="ico">374 <svg viewBox="0 0 24 24">375 <path d="M4 7h16"/>376 <path d="M9 3h6l1 2H8z"/>377 <path d="M6 7l1 13h10l1-13"/>378 <path d="M10 12v6M14 12v6"/>379 </svg>380 </span>381 <span>Delete</span>382 </div>383 </div>384 </div>385 </div>386 387 <!-- Snackbar message -->388 <div class="snackbar">Alarm set for 19 hours and 35 minutes from now.</div>389 390 <!-- Second alarm card (partially visible, with big FAB overlay) -->391 <div class="card small" style="top: 1220px;">392 <div class="card-header">393 <div class="title">wakeup</div>394 <div class="chevron-pill">395 <svg width="32" height="32" viewBox="0 0 24 24"><path d="M6 10l6 6 6-6" stroke="#cfe3cf" stroke-width="2" fill="none" stroke-linecap="round"/></svg>396 </div>397 </div>398 <div style="display:flex; align-items:flex-end; justify-content: space-between;">399 <div style="display:flex; align-items:flex-end; gap:12px;">400 <div class="time-mini">8:00</div>401 <div class="ampm-mini">AM</div>402 </div>403 <div class="toggle on"><div class="knob"></div></div>404 </div>405 <div class="sub-mini">Sun, Sat</div>406 </div>407 408 <!-- Third alarm collapsed header -->409 <div class="card small" style="top: 1660px;">410 <div class="card-header">411 <div class="title">wakeup</div>412 <div class="chevron-pill">413 <svg width="32" height="32" viewBox="0 0 24 24"><path d="M6 10l6 6 6-6" stroke="#cfe3cf" stroke-width="2" fill="none" stroke-linecap="round"/></svg>414 </div>415 </div>416 </div>417 418 <!-- Floating action button -->419 <div class="fab">+</div>420 421 <!-- Bottom navigation -->422 <div class="bottom-nav">423 <div class="nav-item active">424 <svg class="icon" viewBox="0 0 24 24">425 <circle cx="12" cy="8" r="4" fill="none" stroke="#e7f6e7" stroke-width="2"/>426 <path d="M8 21c0-3 2-5 4-5s4 2 4 5" stroke="#e7f6e7" stroke-width="2" fill="none"/>427 <path d="M4 7l2-2M20 7l-2-2" stroke="#e7f6e7" stroke-width="2" fill="none"/>428 </svg>429 <div>Alarm</div>430 </div>431 <div class="nav-item">432 <svg class="icon" viewBox="0 0 24 24">433 <circle cx="12" cy="12" r="9" fill="none" stroke="#cfe3cf" stroke-width="2"/>434 <path d="M12 6v7l4 2" stroke="#cfe3cf" stroke-width="2"/>435 </svg>436 <div>Clock</div>437 </div>438 <div class="nav-item">439 <svg class="icon" viewBox="0 0 24 24">440 <path d="M6 3h12l-2 18H8L6 3z" fill="none" stroke="#cfe3cf" stroke-width="2"/>441 <path d="M9 8h6M8.5 12h7" stroke="#cfe3cf" stroke-width="2"/>442 </svg>443 <div>Timer</div>444 </div>445 <div class="nav-item">446 <svg class="icon" viewBox="0 0 24 24">447 <circle cx="12" cy="12" r="9" fill="none" stroke="#cfe3cf" stroke-width="2"/>448 <path d="M12 12l5-3" stroke="#cfe3cf" stroke-width="2"/>449 <path d="M7 4l2 2M17 4l-2 2" stroke="#cfe3cf" stroke-width="2"/>450 </svg>451 <div>Stopwatch</div>452 </div>453 <div class="nav-item">454 <svg class="icon" viewBox="0 0 24 24">455 <path d="M3 14h18v4H3z" fill="none" stroke="#cfe3cf" stroke-width="2"/>456 <path d="M5 10h8v4H5z" fill="none" stroke="#cfe3cf" stroke-width="2"/>457 <path d="M15 10h4" stroke="#cfe3cf" stroke-width="2"/>458 </svg>459 <div>Bedtime</div>460 </div>461 </div>462 463</div>464</body>465</html>