GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html>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 {9 margin: 0;10 padding: 0;11 background: transparent;12 }13 #render-target {14 width: 1080px;15 height: 2400px;16 position: relative;17 overflow: hidden;18 background: #0D2B1A; /* deep green */19 color: #D9E7D3;20 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;21 }22 23 /* Status bar */24 .status-bar {25 position: absolute;26 top: 0;27 left: 0;28 width: 1080px;29 height: 120px;30 padding: 0 36px;31 box-sizing: border-box;32 display: flex;33 align-items: center;34 justify-content: space-between;35 color: #EAF5E8;36 font-weight: 600;37 font-size: 42px;38 letter-spacing: 0.5px;39 }40 .status-icons {41 display: flex;42 gap: 26px;43 align-items: center;44 }45 .icon-dot { width: 16px; height: 16px; border-radius: 50%; background: #D9E7D3; opacity: 0.85; }46 .icon-rect { width: 28px; height: 18px; border: 3px solid #D9E7D3; border-radius: 4px; }47 .icon-battery {48 width: 42px; height: 24px; border: 3px solid #D9E7D3; border-radius: 6px; position: relative;49 }50 .icon-battery::after {51 content: ""; position: absolute; right: -8px; top: 8px; width: 6px; height: 8px; background: #D9E7D3; border-radius: 2px;52 }53 .icon-battery::before {54 content: ""; position: absolute; left: 4px; top: 4px; width: 28px; height: 14px; background: #D9E7D3;55 }56 .wifi {57 width: 30px; height: 30px;58 background: conic-gradient(from 180deg, transparent 0 60%, #D9E7D3 0 70%, transparent 0);59 border-radius: 50%;60 transform: rotate(-35deg);61 opacity: 0.9;62 }63 64 /* Header */65 .header {66 position: absolute;67 top: 140px;68 left: 42px;69 right: 42px;70 display: flex;71 align-items: center;72 justify-content: space-between;73 }74 .title {75 font-size: 80px;76 font-weight: 600;77 color: #D9E7D3;78 }79 .menu {80 width: 72px; height: 72px; display: inline-flex; align-items: center; justify-content: center;81 }82 .menu svg circle { fill: #9BB8A1; }83 84 /* Cards */85 .card {86 position: absolute;87 left: 36px;88 right: 36px;89 background: #12361F; /* slightly lighter green */90 border-radius: 56px;91 padding: 44px;92 box-sizing: border-box;93 color: #CFE3CD;94 }95 .card .top-row {96 display: flex; align-items: center; justify-content: space-between;97 margin-bottom: 22px;98 }99 .label-row {100 display: inline-flex; gap: 20px; align-items: center; color: #CFE3CD; opacity: 0.9; font-size: 42px;101 }102 .chip-icon {103 width: 56px; height: 40px;104 }105 .chevron-pill {106 width: 64px; height: 64px; border-radius: 32px; background: #2A3E33; display: flex; align-items: center; justify-content: center;107 }108 .chevron-pill svg path { stroke: #B9CDB9; stroke-width: 6; fill: none; }109 110 .time-row {111 display: flex; align-items: baseline; gap: 14px; margin: 18px 0 18px 0;112 }113 .time {114 font-size: 160px; line-height: 1; font-weight: 700; color: #E2F1E0;115 letter-spacing: -2px;116 }117 .ampm {118 font-size: 54px; font-weight: 700; color: #D3E6D1; margin-bottom: 26px;119 }120 121 .subrow {122 display: flex; align-items: center; justify-content: space-between; margin-top: 10px;123 }124 .subtext { font-size: 48px; color: #BFD3BE; }125 126 /* Toggle */127 .toggle {128 width: 190px; height: 94px; border-radius: 48px; background: #11442A; position: relative; box-shadow: inset 0 0 0 2px rgba(255,255,255,0.06);129 }130 .toggle.on { background: #106838; }131 .toggle .knob {132 width: 78px; height: 78px; border-radius: 50%; background: #31F56A; position: absolute; right: 8px; top: 8px;133 box-shadow: 0 6px 12px rgba(0,0,0,0.25);134 }135 136 /* Weekdays */137 .weekdays { display: flex; gap: 22px; margin: 28px 0; }138 .day {139 width: 90px; height: 90px; border-radius: 45px; border: 3px solid #5F7765; color: #A9C7AE;140 display: flex; align-items: center; justify-content: center; font-size: 40px; font-weight: 600;141 }142 143 /* Rows with icons */144 .list { margin-top: 6px; }145 .list-item {146 display: flex; align-items: center; justify-content: space-between;147 padding: 22px 0; border-bottom: 1px solid rgba(255,255,255,0.05);148 font-size: 48px; color: #D0E3CE;149 }150 .list-item:last-child { border-bottom: none; }151 .left-icon-text { display: flex; align-items: center; gap: 26px; }152 .li-icon { width: 60px; height: 60px; opacity: 0.9; }153 .trailing {154 width: 68px; height: 68px; border-radius: 34px; background: #1E3B2C; display: flex; align-items: center; justify-content: center;155 }156 .trailing svg { width: 40px; height: 40px; }157 .trailing.green { background: #0E5C34; }158 .trailing.green svg path { stroke: #2CF86A; stroke-width: 8; }159 .trailing.plus svg path { stroke: #CFE3CD; stroke-width: 8; }160 161 /* Second/third cards spacing */162 .card2 { top: 1180px; }163 .card3 { top: 1620px; padding-top: 34px; padding-bottom: 34px; }164 165 /* First card placement */166 .card1 { top: 360px; }167 168 /* Floating Action Button */169 .fab {170 position: absolute; left: 50%; transform: translateX(-50%);171 top: 1420px;172 width: 260px; height: 260px; border-radius: 130px;173 background: #22F061;174 box-shadow: 0 18px 36px rgba(0,0,0,0.35);175 display: flex; align-items: center; justify-content: center;176 }177 .fab svg line { stroke: #063019; stroke-width: 18; stroke-linecap: round; }178 179 /* Bottom navigation */180 .bottom-nav {181 position: absolute; left: 0; bottom: 80px; width: 1080px; height: 220px;182 background: #152F20; border-top-left-radius: 36px; border-top-right-radius: 36px;183 display: flex; align-items: center; justify-content: space-around; color: #CFE3CD;184 }185 .nav-item {186 display: flex; flex-direction: column; align-items: center; gap: 16px; font-size: 38px;187 }188 .nav-icon {189 width: 72px; height: 72px; opacity: 0.95;190 }191 .selected {192 position: relative;193 }194 .selected::before {195 content: ""; position: absolute; top: -6px; left: 50%; transform: translateX(-50%);196 width: 120px; height: 64px; background: #1D4730; border-radius: 32px; z-index: -1;197 }198 .gesture {199 position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%);200 width: 360px; height: 16px; border-radius: 8px; background: rgba(255,255,255,0.45);201 }202</style>203</head>204<body>205<div id="render-target">206 207 <!-- Status bar -->208 <div class="status-bar">209 <div>12:24</div>210 <div class="status-icons">211 <div class="icon-rect"></div>212 <div class="icon-dot"></div>213 <div class="icon-dot"></div>214 <div class="icon-dot"></div>215 <div class="icon-dot"></div>216 <div class="wifi"></div>217 <div class="icon-battery"></div>218 </div>219 </div>220 221 <!-- Header -->222 <div class="header">223 <div class="title">Alarm</div>224 <div class="menu">225 <svg width="40" height="40" viewBox="0 0 40 40">226 <circle cx="20" cy="8" r="4"></circle>227 <circle cx="20" cy="20" r="4"></circle>228 <circle cx="20" cy="32" r="4"></circle>229 </svg>230 </div>231 </div>232 233 <!-- First Alarm Card -->234 <div class="card card1">235 <div class="top-row">236 <div class="label-row">237 <svg class="chip-icon" viewBox="0 0 60 40">238 <path d="M6 6 h32 l16 14 -16 14 H6 Z" fill="none" stroke="#93AF9B" stroke-width="4"/>239 <circle cx="44" cy="20" r="5" fill="#93AF9B"/>240 </svg>241 <span>yoga session</span>242 </div>243 <div class="chevron-pill">244 <svg width="34" height="34" viewBox="0 0 34 34">245 <path d="M8 22 L17 12 L26 22"></path>246 </svg>247 </div>248 </div>249 250 <div class="time-row">251 <div class="time">7:00</div>252 <div class="ampm">AM</div>253 </div>254 255 <div class="subrow">256 <div class="subtext">Tomorrow</div>257 <div class="toggle on"><div class="knob"></div></div>258 </div>259 260 <div class="weekdays">261 <div class="day">S</div><div class="day">M</div><div class="day">T</div><div class="day">W</div><div class="day">T</div><div class="day">F</div><div class="day">S</div>262 </div>263 264 <div class="list">265 <div class="list-item">266 <div class="left-icon-text">267 <svg class="li-icon" viewBox="0 0 60 60">268 <rect x="10" y="18" width="40" height="32" rx="6" ry="6" fill="none" stroke="#A7C6AD" stroke-width="5"/>269 <rect x="18" y="10" width="24" height="8" rx="2" fill="#A7C6AD"/>270 </svg>271 <span>Schedule alarm</span>272 </div>273 <div class="trailing plus">274 <svg viewBox="0 0 40 40">275 <path d="M20 8 V32 M8 20 H32" stroke-linecap="round" fill="none"/>276 </svg>277 </div>278 </div>279 280 <div class="list-item">281 <div class="left-icon-text">282 <svg class="li-icon" viewBox="0 0 60 60">283 <path d="M30 14 C18 14 18 28 18 28 H12 V34 H48 V28 H42 C42 28 42 14 30 14 Z" fill="none" stroke="#A7C6AD" stroke-width="5"/>284 <rect x="26" y="38" width="8" height="4" fill="#A7C6AD"/>285 </svg>286 <span>Full of Wonder</span>287 </div>288 </div>289 290 <div class="list-item">291 <div class="left-icon-text">292 <svg class="li-icon" viewBox="0 0 60 60">293 <rect x="8" y="18" width="10" height="24" rx="3" fill="#A7C6AD"/>294 <rect x="42" y="18" width="10" height="24" rx="3" fill="#A7C6AD"/>295 <path d="M22 20 L38 16 M22 40 L38 44" stroke="#A7C6AD" stroke-width="4"/>296 </svg>297 <span>Vibrate</span>298 </div>299 <div class="trailing green">300 <svg viewBox="0 0 40 40">301 <path d="M8 22 L16 30 L32 14" fill="none"/>302 </svg>303 </div>304 </div>305 306 <div class="list-item">307 <div class="left-icon-text">308 <svg class="li-icon" viewBox="0 0 60 60">309 <circle cx="18" cy="36" r="6" fill="#A7C6AD"/>310 <circle cx="30" cy="24" r="4" fill="#A7C6AD"/>311 <circle cx="40" cy="34" r="3" fill="#A7C6AD"/>312 </svg>313 <span>Google Assistant Routine</span>314 </div>315 <div class="trailing plus">316 <svg viewBox="0 0 40 40">317 <path d="M20 8 V32 M8 20 H32" stroke-linecap="round" fill="none"/>318 </svg>319 </div>320 </div>321 322 <div class="list-item">323 <div class="left-icon-text">324 <svg class="li-icon" viewBox="0 0 60 60">325 <rect x="16" y="22" width="28" height="24" rx="4" fill="none" stroke="#A7C6AD" stroke-width="5"/>326 <rect x="22" y="16" width="16" height="6" rx="2" fill="#A7C6AD"/>327 </svg>328 <span>Delete</span>329 </div>330 </div>331 </div>332 </div>333 334 <!-- Second Alarm Card -->335 <div class="card card2">336 <div class="top-row">337 <div class="chevron-pill">338 <svg width="34" height="34" viewBox="0 0 34 34">339 <path d="M8 12 L17 22 L26 12"></path>340 </svg>341 </div>342 </div>343 344 <div class="time-row" style="margin-top:-6px;">345 <div class="time">7:00</div>346 <div class="ampm">AM</div>347 </div>348 349 <div class="subrow" style="margin-top:0;">350 <div class="subtext">Sun, Sat</div>351 <div class="toggle on"><div class="knob"></div></div>352 </div>353 </div>354 355 <!-- Floating Action Button -->356 <div class="fab">357 <svg width="160" height="160" viewBox="0 0 160 160">358 <line x1="80" y1="36" x2="80" y2="124"></line>359 <line x1="36" y1="80" x2="124" y2="80"></line>360 </svg>361 </div>362 363 <!-- Third Alarm Card (collapsed) -->364 <div class="card card3">365 <div class="top-row" style="margin-bottom:8px;">366 <div class="label-row">367 <span style="font-size:44px;">wakeup</span>368 </div>369 <div class="chevron-pill">370 <svg width="34" height="34" viewBox="0 0 34 34">371 <path d="M8 12 L17 22 L26 12"></path>372 </svg>373 </div>374 </div>375 376 <div class="time-row" style="margin-top:0;">377 <div class="time" style="font-size:140px;">7:00</div>378 <div class="ampm">AM</div>379 </div>380 </div>381 382 <!-- Bottom Navigation -->383 <div class="bottom-nav">384 <div class="nav-item selected">385 <svg class="nav-icon" viewBox="0 0 72 72">386 <circle cx="36" cy="40" r="20" fill="none" stroke="#CFE3CD" stroke-width="5"/>387 <rect x="32" y="20" width="8" height="10" fill="#CFE3CD"/>388 </svg>389 <div>Alarm</div>390 </div>391 <div class="nav-item">392 <svg class="nav-icon" viewBox="0 0 72 72">393 <circle cx="36" cy="36" r="26" fill="none" stroke="#CFE3CD" stroke-width="5"/>394 <line x1="36" y1="36" x2="36" y2="18" stroke="#CFE3CD" stroke-width="5"/>395 <line x1="36" y1="36" x2="52" y2="36" stroke="#CFE3CD" stroke-width="5"/>396 </svg>397 <div>Clock</div>398 </div>399 <div class="nav-item">400 <svg class="nav-icon" viewBox="0 0 72 72">401 <path d="M26 16 L46 16 L36 40 Z" fill="none" stroke="#CFE3CD" stroke-width="5"/>402 </svg>403 <div>Timer</div>404 </div>405 <div class="nav-item">406 <svg class="nav-icon" viewBox="0 0 72 72">407 <circle cx="36" cy="36" r="26" fill="none" stroke="#CFE3CD" stroke-width="5"/>408 <circle cx="36" cy="36" r="8" fill="#CFE3CD"/>409 </svg>410 <div>Stopwatch</div>411 </div>412 <div class="nav-item">413 <svg class="nav-icon" viewBox="0 0 72 72">414 <rect x="12" y="34" width="48" height="18" rx="4" fill="none" stroke="#CFE3CD" stroke-width="5"/>415 <rect x="12" y="24" width="18" height="10" rx="2" fill="#CFE3CD"/>416 </svg>417 <div>Bedtime</div>418 </div>419 </div>420 421 <!-- Gesture bar -->422 <div class="gesture"></div>423</div>424</body>425</html>