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>Alarm UI</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }9 #render-target {10 position: relative;11 width: 1080px;12 height: 2400px;13 overflow: hidden;14 background: #23272b;15 border-radius: 0;16 color: #e6e6e6;17 }18 .status-bar {19 position: absolute;20 top: 0;21 left: 0;22 width: 1080px;23 height: 130px;24 background: #2a2f34;25 display: flex;26 align-items: center;27 padding: 0 36px;28 box-sizing: border-box;29 color: #dfe3e6;30 font-weight: 600;31 }32 .status-bar .left { font-size: 40px; }33 .status-icons { margin-left: 24px; display: flex; gap: 22px; align-items: center; }34 .status-bar .right { margin-left: auto; display: flex; gap: 18px; align-items: center; }35 .title-bar {36 position: absolute;37 top: 130px;38 left: 0;39 width: 1080px;40 height: 130px;41 background: #2a2f34;42 display: flex;43 align-items: center;44 padding: 0 44px;45 box-sizing: border-box;46 }47 .title-bar h1 {48 margin: 0;49 font-size: 70px;50 font-weight: 500;51 color: #e9ecef;52 }53 .more-btn {54 margin-left: auto;55 width: 70px; height: 70px; border-radius: 16px;56 display: flex; align-items: center; justify-content: center;57 color: #9aa3ab;58 }59 .card {60 position: absolute;61 left: 44px;62 top: 320px;63 width: 992px;64 background: #1e2226;65 border-radius: 48px;66 padding: 40px 44px 44px;67 box-sizing: border-box;68 }69 .card .row { display: flex; align-items: center; gap: 24px; }70 .label-row { color: #b7bec5; font-size: 36px; }71 .label-row .spacer { flex: 1; }72 .chip-circle {73 width: 70px; height: 70px; border-radius: 35px; background: #3a3f45;74 display: flex; align-items: center; justify-content: center;75 }76 .time-row { margin-top: 24px; display: flex; align-items: center; }77 .time-row .time {78 font-size: 180px; font-weight: 700; letter-spacing: 4px;79 }80 .time-row .ampm { font-size: 60px; margin-left: 12px; font-weight: 600; color: #cfd4d9; }81 .toggle {82 margin-left: auto;83 width: 160px; height: 80px;84 background: #274c78;85 border-radius: 40px;86 position: relative;87 }88 .toggle::after {89 content: "";90 position: absolute;91 right: 10px; top: 10px;92 width: 60px; height: 60px; border-radius: 30px;93 background: #c7d3ff;94 }95 .subtext { margin-top: 18px; color: #c3c9cf; font-size: 40px; }96 .days { margin-top: 24px; display: flex; gap: 24px; }97 .day {98 width: 94px; height: 94px; border-radius: 47px; border: 2px solid #4a5056;99 display: flex; align-items: center; justify-content: center; color: #b8bec4; font-size: 42px;100 }101 .divider { height: 24px; }102 .item {103 padding: 26px 0;104 display: flex;105 align-items: center;106 gap: 24px;107 border-bottom: 1px solid rgba(255,255,255,0.06);108 font-size: 44px;109 color: #e5e8ea;110 }111 .item:last-child { border-bottom: none; }112 .item .right { margin-left: auto; }113 .right .circle-btn {114 width: 68px; height: 68px; border-radius: 34px; border: 2px solid #aeb5bb;115 display: flex; align-items: center; justify-content: center; color: #aeb5bb;116 }117 .check-pill {118 width: 64px; height: 64px; border-radius: 32px; background: #87a8ff;119 display: flex; align-items: center; justify-content: center;120 }121 /* Second card */122 .card.secondary {123 top: 1240px;124 height: 580px;125 padding-top: 30px;126 }127 .small-header { color: #c3c9cf; font-size: 40px; display: flex; align-items: center; }128 .small-header .spacer { flex: 1; }129 .secondary .time-row .time { font-size: 160px; }130 .secondary .time-row .ampm { font-size: 54px; }131 .secondary .subtext { margin-top: 10px; font-size: 40px; }132 .secondary .toggle { width: 150px; height: 74px; }133 .secondary .toggle::after { width: 56px; height: 56px; }134 /* Snackbar */135 .snackbar {136 position: absolute;137 top: 1150px; left: 44px;138 width: 992px;139 background: #5a6167;140 color: #eaeef2;141 padding: 26px 36px;142 border-radius: 100px;143 font-size: 40px;144 box-shadow: 0 8px 24px rgba(0,0,0,0.35);145 }146 /* FAB */147 .fab {148 position: absolute;149 bottom: 540px;150 left: 50%;151 transform: translateX(-50%);152 width: 280px; height: 280px; border-radius: 140px;153 background: #bcd5ff;154 display: flex; align-items: center; justify-content: center;155 color: #274c78; font-size: 120px; font-weight: 700;156 box-shadow: 0 18px 40px rgba(0,0,0,0.5);157 }158 /* Bottom navigation */159 .bottom-nav {160 position: absolute;161 bottom: 140px;162 left: 0;163 width: 1080px;164 height: 240px;165 background: #2a2f34;166 display: flex;167 align-items: center;168 justify-content: space-around;169 color: #cfd4d9;170 padding: 0 24px;171 box-sizing: border-box;172 }173 .nav-item { display: flex; flex-direction: column; align-items: center; gap: 18px; font-size: 36px; }174 .nav-active {175 background: #3a4450;176 color: #e6ebf0;177 padding: 16px 24px;178 border-radius: 40px;179 }180 .home-indicator {181 position: absolute; bottom: 60px; left: 50%; transform: translateX(-50%);182 width: 320px; height: 12px; border-radius: 6px; background: #bfc6cc; opacity: 0.7;183 }184 /* Simple SVG icons style */185 svg { display: block; }186</style>187</head>188<body>189<div id="render-target">190 191 <!-- Status bar -->192 <div class="status-bar">193 <div class="left">11:27</div>194 <div class="status-icons">195 <!-- simple dots/icons -->196 <svg width="34" height="34"><circle cx="17" cy="17" r="7" fill="#cfd4d9"/></svg>197 <svg width="34" height="34"><rect x="6" y="8" width="22" height="18" rx="4" fill="#cfd4d9"/></svg>198 <svg width="34" height="34"><rect x="10" y="6" width="14" height="22" rx="2" fill="#cfd4d9"/></svg>199 <svg width="34" height="34"><rect x="16" y="6" width="6" height="22" rx="2" fill="#cfd4d9"/></svg>200 </div>201 <div class="right">202 <!-- Wi-Fi -->203 <svg width="42" height="42" viewBox="0 0 24 24">204 <path d="M2 8c5-4 15-4 20 0" stroke="#e2e6ea" stroke-width="2" fill="none"/>205 <path d="M5 12c3-3 11-3 14 0" stroke="#e2e6ea" stroke-width="2" fill="none"/>206 <circle cx="12" cy="17" r="2" fill="#e2e6ea"/>207 </svg>208 <!-- Battery -->209 <svg width="46" height="42" viewBox="0 0 28 20">210 <rect x="2" y="2" width="22" height="16" rx="3" stroke="#e2e6ea" stroke-width="2" fill="none"/>211 <rect x="4" y="4" width="14" height="12" rx="2" fill="#e2e6ea"/>212 <rect x="24" y="6" width="2" height="8" rx="1" fill="#e2e6ea"/>213 </svg>214 </div>215 </div>216 217 <!-- Title bar -->218 <div class="title-bar">219 <h1>Alarm</h1>220 <div class="more-btn">221 <svg width="36" height="36" viewBox="0 0 24 24">222 <circle cx="12" cy="5" r="2" fill="#9aa3ab"/>223 <circle cx="12" cy="12" r="2" fill="#9aa3ab"/>224 <circle cx="12" cy="19" r="2" fill="#9aa3ab"/>225 </svg>226 </div>227 </div>228 229 <!-- Main alarm card -->230 <div class="card">231 <div class="row label-row">232 <svg width="46" height="46" viewBox="0 0 24 24">233 <path d="M3 6v12a2 2 0 0 0 2 2h9l4-4V6a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2z" stroke="#b7bec5" stroke-width="2" fill="none"/>234 </svg>235 <div>Add label</div>236 <div class="spacer"></div>237 <div class="chip-circle">238 <svg width="32" height="32" viewBox="0 0 24 24">239 <path d="M7 14l5-5 5 5" stroke="#cfd4d9" stroke-width="2" fill="none" stroke-linecap="round"/>240 </svg>241 </div>242 </div>243 244 <div class="time-row">245 <div class="time">6:10</div>246 <div class="ampm">AM</div>247 <div class="toggle"></div>248 </div>249 250 <div class="subtext">Tomorrow</div>251 252 <div class="days" style="margin-top: 28px;">253 <div class="day">S</div>254 <div class="day">M</div>255 <div class="day">T</div>256 <div class="day">W</div>257 <div class="day">T</div>258 <div class="day">F</div>259 <div class="day">S</div>260 </div>261 262 <div class="divider"></div>263 264 <!-- Schedule Alarm -->265 <div class="item">266 <svg width="52" height="52" viewBox="0 0 24 24">267 <rect x="3" y="6" width="18" height="14" rx="2" stroke="#cfd4d9" stroke-width="2" fill="none"/>268 <path d="M7 3v6M17 3v6" stroke="#cfd4d9" stroke-width="2" stroke-linecap="round"/>269 </svg>270 <div>Schedule alarm</div>271 <div class="right">272 <div class="circle-btn">273 <svg width="24" height="24" viewBox="0 0 24 24">274 <path d="M12 5v14M5 12h14" stroke="#aeb5bb" stroke-width="2" stroke-linecap="round"/>275 </svg>276 </div>277 </div>278 </div>279 280 <!-- Sound -->281 <div class="item">282 <svg width="52" height="52" viewBox="0 0 24 24">283 <path d="M5 12h4l5-4v12l-5-4H5z" stroke="#cfd4d9" stroke-width="2" fill="none"/>284 <path d="M17 9c2 1 2 5 0 6" stroke="#cfd4d9" stroke-width="2" fill="none"/>285 </svg>286 <div>Full of Wonder</div>287 </div>288 289 <!-- Vibrate -->290 <div class="item">291 <svg width="52" height="52" viewBox="0 0 24 24">292 <rect x="9" y="6" width="6" height="12" rx="2" stroke="#cfd4d9" stroke-width="2" fill="none"/>293 <path d="M2 8l2 2M2 14l2-2M20 8l2 2M20 14l2-2" stroke="#cfd4d9" stroke-width="2" stroke-linecap="round"/>294 </svg>295 <div>Vibrate</div>296 <div class="right">297 <div class="check-pill">298 <svg width="28" height="28" viewBox="0 0 24 24">299 <path d="M5 12l4 4 10-10" stroke="#fff" stroke-width="3" fill="none" stroke-linecap="round"/>300 </svg>301 </div>302 </div>303 </div>304 305 <!-- Google Assistant Routine -->306 <div class="item">307 <svg width="52" height="52" viewBox="0 0 24 24">308 <circle cx="6" cy="15" r="3" fill="#cfd4d9"/>309 <circle cx="12" cy="10" r="3" fill="#cfd4d9"/>310 <circle cx="18" cy="15" r="2" fill="#cfd4d9"/>311 </svg>312 <div>Google Assistant Routine</div>313 <div class="right">314 <div class="circle-btn">315 <svg width="24" height="24" viewBox="0 0 24 24">316 <path d="M12 5v14M5 12h14" stroke="#aeb5bb" stroke-width="2" stroke-linecap="round"/>317 </svg>318 </div>319 </div>320 </div>321 322 <!-- Delete -->323 <div class="item">324 <svg width="52" height="52" viewBox="0 0 24 24">325 <path d="M6 7h12M9 7V5h6v2M7 9v9h10V9" stroke="#cfd4d9" stroke-width="2" fill="none" stroke-linecap="round"/>326 </svg>327 <div>Delete</div>328 </div>329 </div>330 331 <!-- Snackbar -->332 <div class="snackbar">Alarm set for 18 hours and 43 minutes from now.</div>333 334 <!-- Secondary card -->335 <div class="card secondary">336 <div class="small-header">337 <div>wakeup</div>338 <div class="spacer"></div>339 <div class="chip-circle">340 <svg width="32" height="32" viewBox="0 0 24 24">341 <path d="M7 10l5 5 5-5" stroke="#cfd4d9" stroke-width="2" fill="none" stroke-linecap="round"/>342 </svg>343 </div>344 </div>345 <div class="time-row" style="margin-top: 10px;">346 <div class="time">7:00</div>347 <div class="ampm">AM</div>348 <div class="toggle"></div>349 </div>350 <div class="subtext">Sun, Sat</div>351 </div>352 353 <!-- Floating Action Button -->354 <div class="fab">+</div>355 356 <!-- Bottom navigation -->357 <div class="bottom-nav">358 <div class="nav-item nav-active">359 <svg width="60" height="60" viewBox="0 0 24 24">360 <circle cx="12" cy="13" r="7" stroke="#e6ebf0" stroke-width="2" fill="none"/>361 <path d="M12 13l0-4M12 13l3 2" stroke="#e6ebf0" stroke-width="2" stroke-linecap="round"/>362 <path d="M8 5l1 2M16 5l-1 2" stroke="#e6ebf0" stroke-width="2" stroke-linecap="round"/>363 </svg>364 <div>Alarm</div>365 </div>366 <div class="nav-item">367 <svg width="60" height="60" viewBox="0 0 24 24">368 <circle cx="12" cy="12" r="8" stroke="#cfd4d9" stroke-width="2" fill="none"/>369 <path d="M12 12l4-2M12 6v6" stroke="#cfd4d9" stroke-width="2" stroke-linecap="round"/>370 </svg>371 <div>Clock</div>372 </div>373 <div class="nav-item">374 <svg width="60" height="60" viewBox="0 0 24 24">375 <path d="M7 4h10l-2 12H9L7 4z" stroke="#cfd4d9" stroke-width="2" fill="none"/>376 <rect x="9" y="18" width="6" height="2" fill="#cfd4d9"/>377 </svg>378 <div>Timer</div>379 </div>380 <div class="nav-item">381 <svg width="60" height="60" viewBox="0 0 24 24">382 <circle cx="12" cy="12" r="8" stroke="#cfd4d9" stroke-width="2" fill="none"/>383 <rect x="11" y="6" width="2" height="6" fill="#cfd4d9"/>384 <rect x="12" y="12" width="4" height="2" fill="#cfd4d9"/>385 </svg>386 <div>Stopwatch</div>387 </div>388 <div class="nav-item">389 <svg width="60" height="60" viewBox="0 0 24 24">390 <rect x="3" y="12" width="14" height="6" rx="2" stroke="#cfd4d9" stroke-width="2" fill="none"/>391 <rect x="17" y="12" width="4" height="6" rx="1" fill="#cfd4d9"/>392 <path d="M5 12V9h6v3" stroke="#cfd4d9" stroke-width="2" fill="none"/>393 </svg>394 <div>Bedtime</div>395 </div>396 </div>397 398 <div class="home-indicator"></div>399 400</div>401</body>402</html>