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: "Roboto", Arial, sans-serif; }9 #render-target {10 width: 1080px; height: 2400px;11 position: relative; overflow: hidden;12 background: #2B3137; color: #EAEFF5;13 }14 15 /* Top status area */16 .statusbar {17 height: 120px;18 padding: 0 36px;19 display: flex;20 align-items: center;21 justify-content: space-between;22 color: #DDE3EA;23 font-size: 32px;24 opacity: 0.9;25 }26 .status-icons { display: flex; gap: 22px; align-items: center; }27 .dot, .battery {28 width: 26px; height: 26px; border-radius: 50%; background: rgba(255,255,255,0.75);29 }30 .battery {31 width: 28px; height: 42px; border-radius: 6px; background: transparent;32 border: 3px solid rgba(255,255,255,0.8); position: relative;33 }34 .battery::after {35 content: ""; position: absolute; left: 50%; transform: translateX(-50%);36 top: -12px; width: 14px; height: 6px; background: rgba(255,255,255,0.8); border-radius: 2px;37 }38 .wifi {39 width: 36px; height: 36px; position: relative;40 }41 .wifi::before, .wifi::after {42 content: ""; position: absolute; left: 50%; transform: translateX(-50%);43 border: 3px solid rgba(255,255,255,0.9); border-color: rgba(255,255,255,0.9) transparent transparent transparent;44 border-radius: 50%;45 }46 .wifi::before { width: 32px; height: 32px; top: 2px; }47 .wifi::after { width: 22px; height: 22px; top: 8px; }48 49 /* Page title */50 .header {51 padding: 10px 36px 24px 36px;52 display: flex; align-items: center; justify-content: space-between;53 }54 .title { font-size: 86px; font-weight: 500; letter-spacing: 0.5px; color: #E6EBF2; }55 .kebab { width: 64px; height: 64px; position: relative; }56 .kebab span {57 position: absolute; left: 50%; transform: translateX(-50%);58 width: 12px; height: 12px; background: #C9D1D9; border-radius: 50%;59 }60 .kebab span:nth-child(1){ top: 10px; }61 .kebab span:nth-child(2){ top: 26px; }62 .kebab span:nth-child(3){ top: 42px; }63 64 /* Cards */65 .card {66 margin: 24px 32px;67 background: #1F252B;68 border-radius: 40px;69 padding: 36px;70 box-sizing: border-box;71 }72 .card .top-row {73 display: flex; align-items: center; justify-content: space-between;74 margin-bottom: 22px;75 }76 .label {77 display: flex; align-items: center; gap: 18px; color: #D5DBE2; font-size: 36px;78 text-transform: none;79 }80 .tag-icon {81 width: 40px; height: 34px;82 border: 3px solid #9AA3AD; border-radius: 8px; position: relative;83 }84 .tag-icon::before {85 content: ""; position: absolute; right: -10px; top: 12px;86 width: 12px; height: 12px; border-radius: 50%; background: #9AA3AD;87 }88 .chevron-btn {89 width: 60px; height: 60px; border-radius: 50%;90 background: #3B4046; display: flex; align-items: center; justify-content: center;91 }92 .chevron-up, .chevron-down {93 width: 0; height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent;94 }95 .chevron-up { border-bottom: 16px solid #C8CFD7; }96 .chevron-down { border-top: 16px solid #C8CFD7; }97 98 .time {99 font-size: 140px; font-weight: 700; letter-spacing: 1px; color: #FFFFFF; display: flex; align-items: baseline; gap: 18px;100 }101 .time .ampm { font-size: 48px; font-weight: 700; color: #D3DAE2; }102 103 .subline { margin-top: 12px; font-size: 38px; color: #B7C0C9; }104 105 .header-line {106 display: flex; align-items: center; justify-content: space-between; margin-top: 18px;107 }108 109 /* Toggle */110 .toggle { width: 160px; height: 86px; background: #234C78; border-radius: 48px; position: relative; }111 .toggle .knob { width: 74px; height: 74px; background: #D6E2F6; border-radius: 50%; position: absolute; top: 6px; left: 80px; }112 .toggle.off .knob { left: 8px; background: #9AA3AD; }113 114 /* Day chips */115 .days { margin-top: 24px; display: flex; align-items: center; gap: 22px; }116 .day-chip {117 width: 92px; height: 92px; border-radius: 50%;118 display: flex; align-items: center; justify-content: center;119 font-size: 42px; font-weight: 600;120 background: #B8CFF8; color: #0E1A2A;121 }122 .day-chip.muted {123 background: transparent; border: 3px solid #56606B; color: #8B95A1;124 font-weight: 500;125 }126 127 /* Option rows within card */128 .option { display: flex; align-items: center; justify-content: space-between; padding: 22px 0; border-top: 1px solid rgba(255,255,255,0.05); }129 .option:first-of-type { border-top: none; }130 .opt-left { display: flex; align-items: center; gap: 26px; }131 .opt-text { font-size: 40px; color: #DCE2E9; }132 .opt-icon { width: 50px; height: 50px; border-radius: 50%; border: 3px solid #9AA3AD; display: flex; align-items: center; justify-content: center; color: #9AA3AD; }133 .opt-icon svg { width: 34px; height: 34px; }134 .circle-action {135 width: 68px; height: 68px; border-radius: 50%;136 border: 3px solid #B9C3CF; display: flex; align-items: center; justify-content: center; color: #B9C3CF;137 }138 .circle-check {139 width: 68px; height: 68px; border-radius: 50%;140 background: #B7CCF7; display: flex; align-items: center; justify-content: center; color: #0D1A2A;141 }142 143 /* Second card variations */144 .big-add {145 width: 260px; height: 260px; border-radius: 50%;146 background: #B7CCF7; color: #0D1A2A;147 display: flex; align-items: center; justify-content: center;148 font-size: 120px; font-weight: 500;149 margin: 40px auto;150 }151 152 /* Bottom navigation */153 .bottom-bar {154 position: absolute; left: 0; bottom: 0;155 width: 100%; height: 240px; background: #2D3339; border-top-left-radius: 28px; border-top-right-radius: 28px;156 padding-top: 26px; box-sizing: border-box;157 }158 .nav-items { display: flex; justify-content: space-around; align-items: center; padding: 0 24px; }159 .nav-item { display: flex; flex-direction: column; align-items: center; gap: 18px; color: #C7CFD7; }160 .nav-item .label { font-size: 34px; color: #C7CFD7; }161 .nav-icon { width: 88px; height: 88px; display: flex; align-items: center; justify-content: center; }162 .selected .nav-icon {163 background: #3A4150; border-radius: 48px; width: 120px; height: 88px;164 }165 .gesture {166 position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%);167 width: 360px; height: 14px; background: #D7DDE3; border-radius: 8px; opacity: 0.9;168 }169 170 /* Small helpers */171 .spacer-8 { height: 8px; }172 .spacer-16 { height: 16px; }173</style>174</head>175<body>176<div id="render-target">177 178 <!-- Status bar -->179 <div class="statusbar">180 <div>11:31</div>181 <div class="status-icons">182 <div class="dot"></div>183 <div class="dot"></div>184 <div class="dot"></div>185 <div class="dot"></div>186 <div class="wifi"></div>187 <div class="battery"></div>188 </div>189 </div>190 191 <!-- Header -->192 <div class="header">193 <div class="title">Alarm</div>194 <div class="kebab">195 <span></span><span></span><span></span>196 </div>197 </div>198 199 <!-- Card 1 -->200 <div class="card" style="padding-bottom: 38px;">201 <div class="top-row">202 <div class="label">203 <div class="tag-icon"></div>204 <div>Wakeup</div>205 </div>206 <div class="chevron-btn"><div class="chevron-up"></div></div>207 </div>208 209 <div class="time">210 <div>6:10</div>211 <div class="ampm">AM</div>212 </div>213 214 <div class="header-line">215 <div class="subline">Mon, Tue, Wed, Thu, Fri</div>216 <div class="toggle"><div class="knob"></div></div>217 </div>218 219 <div class="days">220 <div class="day-chip muted">S</div>221 <div class="day-chip">M</div>222 <div class="day-chip">T</div>223 <div class="day-chip">W</div>224 <div class="day-chip">T</div>225 <div class="day-chip">F</div>226 <div class="day-chip muted">S</div>227 </div>228 229 <div class="spacer-8"></div>230 231 <div class="option">232 <div class="opt-left">233 <div class="opt-icon">234 <svg viewBox="0 0 24 24">235 <circle cx="12" cy="12" r="8" fill="none" stroke="#9AA3AD" stroke-width="2"></circle>236 <rect x="9" y="7" width="2" height="10" fill="#9AA3AD"></rect>237 <rect x="13" y="7" width="2" height="10" fill="#9AA3AD"></rect>238 </svg>239 </div>240 <div class="opt-text">Pause alarm</div>241 </div>242 <div class="circle-action">243 <svg viewBox="0 0 24 24">244 <path d="M12 5v14M5 12h14" stroke="#B9C3CF" stroke-width="2" fill="none"/>245 </svg>246 </div>247 </div>248 249 <div class="option">250 <div class="opt-left">251 <div class="opt-icon">252 <svg viewBox="0 0 24 24">253 <path d="M4 12h16" stroke="#9AA3AD" stroke-width="2" />254 <path d="M8 8h8M8 16h8" stroke="#9AA3AD" stroke-width="2" />255 </svg>256 </div>257 <div class="opt-text">Full of Wonder</div>258 </div>259 </div>260 261 <div class="option">262 <div class="opt-left">263 <div class="opt-icon">264 <svg viewBox="0 0 24 24">265 <rect x="4" y="7" width="4" height="10" fill="#9AA3AD"></rect>266 <rect x="16" y="7" width="4" height="10" fill="#9AA3AD"></rect>267 </svg>268 </div>269 <div class="opt-text">Vibrate</div>270 </div>271 <div class="circle-check">272 <svg viewBox="0 0 24 24">273 <path d="M5 13l4 4 10-10" stroke="#0D1A2A" stroke-width="3" fill="none"/>274 </svg>275 </div>276 </div>277 278 <div class="option">279 <div class="opt-left">280 <div class="opt-icon">281 <svg viewBox="0 0 24 24">282 <circle cx="7" cy="12" r="3" fill="#9AA3AD"></circle>283 <circle cx="14" cy="9" r="2" fill="#9AA3AD"></circle>284 <circle cx="18" cy="14" r="2" fill="#9AA3AD"></circle>285 </svg>286 </div>287 <div class="opt-text">Google Assistant Routine</div>288 </div>289 <div class="circle-action">290 <svg viewBox="0 0 24 24">291 <path d="M12 5v14M5 12h14" stroke="#B9C3CF" stroke-width="2" fill="none"/>292 </svg>293 </div>294 </div>295 296 <div class="option">297 <div class="opt-left">298 <div class="opt-icon">299 <svg viewBox="0 0 24 24">300 <rect x="7" y="8" width="10" height="10" fill="none" stroke="#9AA3AD" stroke-width="2"></rect>301 <rect x="10" y="5" width="4" height="3" fill="#9AA3AD"></rect>302 </svg>303 </div>304 <div class="opt-text">Delete</div>305 </div>306 </div>307 </div>308 309 <!-- Card 2 -->310 <div class="card" style="padding-bottom: 48px;">311 <div class="top-row">312 <div class="label" style="text-transform: lowercase;">313 <div style="width:38px;height:32px;border:3px solid #9AA3AD;border-radius:6px;"></div>314 <div>wakeup</div>315 </div>316 <div class="chevron-btn"><div class="chevron-down"></div></div>317 </div>318 319 <div class="time">320 <div>7:00</div>321 <div class="ampm">AM</div>322 </div>323 324 <div class="header-line">325 <div class="subline">Sun, Sat</div>326 <div class="toggle"><div class="knob"></div></div>327 </div>328 329 <div class="big-add">+</div>330 </div>331 332 <!-- Bottom Navigation -->333 <div class="bottom-bar">334 <div class="nav-items">335 <div class="nav-item selected">336 <div class="nav-icon">337 <svg viewBox="0 0 24 24" width="44" height="44">338 <path d="M12 4l4 4M12 4l-4 4" stroke="#DDE3EA" stroke-width="2" fill="none"/>339 <path d="M6 11v8h12v-8H6z" stroke="#DDE3EA" stroke-width="2" fill="none"/>340 </svg>341 </div>342 <div class="label">Alarm</div>343 </div>344 <div class="nav-item">345 <div class="nav-icon">346 <svg viewBox="0 0 24 24" width="44" height="44">347 <circle cx="12" cy="12" r="8" stroke="#C7CFD7" stroke-width="2" fill="none"></circle>348 <path d="M12 12l4 2" stroke="#C7CFD7" stroke-width="2"/>349 </svg>350 </div>351 <div class="label">Clock</div>352 </div>353 <div class="nav-item">354 <div class="nav-icon">355 <svg viewBox="0 0 24 24" width="44" height="44">356 <path d="M8 4h8l-2 12H10L8 4z" stroke="#C7CFD7" stroke-width="2" fill="none"/>357 </svg>358 </div>359 <div class="label">Timer</div>360 </div>361 <div class="nav-item">362 <div class="nav-icon">363 <svg viewBox="0 0 24 24" width="44" height="44">364 <circle cx="12" cy="12" r="8" stroke="#C7CFD7" stroke-width="2" fill="none"></circle>365 <rect x="11" y="7" width="2" height="10" fill="#C7CFD7"></rect>366 </svg>367 </div>368 <div class="label">Stopwatch</div>369 </div>370 <div class="nav-item">371 <div class="nav-icon">372 <svg viewBox="0 0 24 24" width="44" height="44">373 <rect x="4" y="8" width="16" height="10" stroke="#C7CFD7" stroke-width="2" fill="none"></rect>374 <rect x="4" y="6" width="6" height="3" fill="#C7CFD7"></rect>375 </svg>376 </div>377 <div class="label">Bedtime</div>378 </div>379 </div>380 </div>381 382 <div class="gesture"></div>383 384</div>385</body>386</html>