GD-ML/AndroidCode
13.4k
1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Alarm UI</title>5<style>6 body { margin: 0; padding: 0; background: transparent; font-family: "Roboto", Arial, sans-serif; }7 #render-target {8 position: relative;9 width: 1080px;10 height: 2400px;11 overflow: hidden;12 background: #1e1919;13 color: #efe7e2;14 }15 16 /* Top status bar */17 .status-bar {18 position: absolute;19 top: 0;20 left: 0;21 height: 120px;22 width: 100%;23 padding: 20px 36px;24 box-sizing: border-box;25 color: #e9ddd7;26 font-size: 40px;27 display: flex;28 align-items: center;29 justify-content: space-between;30 }31 .status-icons { display: flex; gap: 26px; align-items: center; }32 .dot { width: 16px; height: 16px; background: #cdb8af; border-radius: 50%; }33 .icon-battery, .icon-wifi {34 width: 44px; height: 28px; border: 3px solid #cdb8af; border-radius: 6px; position: relative;35 }36 .icon-battery:after { content: ""; position: absolute; right: -10px; top: 8px; width: 6px; height: 12px; background: #cdb8af; border-radius: 2px; }37 .icon-wifi { border: none; }38 .icon-wifi:before {39 content: ""; position: absolute; left: 6px; right: 6px; top: 4px; height: 20px;40 border-top: 3px solid #cdb8af; border-radius: 20px;41 }42 43 /* Header title */44 .page-title {45 position: absolute;46 top: 150px;47 left: 40px;48 font-size: 72px;49 font-weight: 600;50 letter-spacing: 0.5px;51 }52 .menu-dots {53 position: absolute;54 top: 170px;55 right: 40px;56 width: 14px;57 height: 60px;58 display: flex; flex-direction: column; justify-content: space-between; align-items: center;59 }60 .menu-dots span { width: 14px; height: 14px; background: #cdb8af; border-radius: 50%; }61 62 /* Cards */63 .card {64 position: absolute;65 left: 40px;66 width: 1000px;67 background: #2a2222;68 border-radius: 48px;69 padding: 40px;70 box-sizing: border-box;71 }72 73 /* First card positioning */74 #card1 { top: 280px; }75 #card2 { top: 1480px; padding-bottom: 60px; }76 77 .card-header {78 display: flex; align-items: center; gap: 20px; font-size: 40px; color: #d7c9c3;79 }80 .folder-icon {81 width: 52px; height: 36px; border: 4px solid #d7c9c3; border-radius: 8px;82 position: relative;83 }84 .folder-icon:before {85 content: ""; position: absolute; left: 6px; top: -12px; width: 28px; height: 12px; background: #d7c9c3; border-radius: 4px;86 }87 .collapse-up, .collapse-down {88 margin-left: auto; width: 64px; height: 64px; border-radius: 50%; background: #3a2f2f;89 display: flex; align-items: center; justify-content: center;90 }91 .collapse-up svg, .collapse-down svg { width: 30px; height: 30px; fill: #d7c9c3; }92 93 .big-time { font-size: 160px; font-weight: 700; margin: 20px 0 0; line-height: 1; }94 .big-time small { font-size: 74px; font-weight: 600; margin-left: 12px; }95 96 .setting-row {97 margin-top: 40px;98 display: flex; align-items: center; gap: 24px; color: #d7c9c3; font-size: 44px;99 }100 .setting-row .label { flex: none; }101 .setting-row .spacer { flex: 1; }102 .setting-row .value { color: #f0d6ce; }103 .setting-row .circle-btn {104 width: 64px; height: 64px; border-radius: 50%; background: #f3b5a9; color: #2a2222;105 display: flex; align-items: center; justify-content: center; font-weight: 700;106 }107 108 .toggle {109 width: 152px; height: 72px; background: #6a352e; border-radius: 40px;110 position: relative; margin-left: auto;111 }112 .toggle:after {113 content: ""; position: absolute; right: 8px; top: 8px; width: 56px; height: 56px;114 background: #f3b5a9; border-radius: 50%;115 }116 117 .weekdays { display: flex; gap: 26px; margin-top: 26px; }118 .weekday {119 width: 92px; height: 92px; border-radius: 50%;120 border: 2px solid #504443; color: #d7c9c3;121 display: flex; align-items: center; justify-content: center; font-size: 46px;122 }123 124 /* small icons for rows */125 .row-icon {126 width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center;127 color: #d7c9c3;128 }129 .row-icon svg { width: 44px; height: 44px; fill: #d7c9c3; }130 131 /* Plus FAB in card 2 */132 .fab {133 width: 300px; height: 300px; border-radius: 50%;134 background: #f6b7ad; display: flex; align-items: center; justify-content: center;135 color: #2a2222; font-size: 160px; font-weight: 300; margin: 40px auto;136 box-shadow: 0 6px 0 rgba(0,0,0,0.2) inset;137 }138 139 /* Bottom nav bar */140 .bottom-bar {141 position: absolute; bottom: 0; left: 0; height: 220px; width: 100%;142 background: #271f20; display: flex; align-items: center; justify-content: space-around;143 color: #d7c9c3;144 }145 .nav-item { display: flex; flex-direction: column; align-items: center; font-size: 42px; gap: 12px; }146 .nav-icon {147 width: 120px; height: 84px; border-radius: 40px; background: transparent; display: flex; align-items: center; justify-content: center;148 }149 .nav-icon.active { background: #3b2f2f; }150 .nav-icon svg { width: 52px; height: 52px; fill: #d7c9c3; }151</style>152</head>153<body>154<div id="render-target">155 156 <!-- Status bar -->157 <div class="status-bar">158 <div>5:16</div>159 <div class="status-icons">160 <div class="dot"></div>161 <div class="dot"></div>162 <div class="dot"></div>163 <div class="icon-wifi"></div>164 <div class="icon-battery"></div>165 </div>166 </div>167 168 <!-- Title and menu -->169 <div class="page-title">Alarm</div>170 <div class="menu-dots"><span></span><span></span><span></span></div>171 172 <!-- Card 1 - Grocery -->173 <div id="card1" class="card">174 <div class="card-header">175 <div class="folder-icon"></div>176 <div>Grocery</div>177 <div class="collapse-up">178 <svg viewBox="0 0 24 24"><path d="M12 8l6 6H6z"/></svg>179 </div>180 </div>181 182 <div class="big-time">5:00 <small>pm</small></div>183 184 <div class="setting-row">185 <div class="row-icon">186 <!-- calendar icon -->187 <svg viewBox="0 0 24 24"><path d="M7 2h2v2h6V2h2v2h3v16H4V4h3V2zm0 6h10v10H7V8z"/></svg>188 </div>189 <div class="label">Scheduled for tomorrow</div>190 <div class="spacer"></div>191 <div class="toggle"></div>192 </div>193 194 <div class="weekdays">195 <div class="weekday">S</div>196 <div class="weekday">M</div>197 <div class="weekday">T</div>198 <div class="weekday">W</div>199 <div class="weekday">T</div>200 <div class="weekday">F</div>201 <div class="weekday">S</div>202 </div>203 204 <div class="setting-row">205 <div class="row-icon">206 <svg viewBox="0 0 24 24"><path d="M6 2h12v2H6v-2zm14 5H4v12h16V7zm-4 3h-8v2h8v-2z"/></svg>207 </div>208 <div class="label">Schedule alarm</div>209 <div class="spacer"></div>210 <div class="value">29 September</div>211 <div class="circle-btn">−</div>212 </div>213 214 <div class="setting-row">215 <div class="row-icon">216 <svg viewBox="0 0 24 24"><path d="M12 2l5 5v6l4 4v1H3v-1l4-4V7l5-5zm-2 7v5h4V9h-4z"/></svg>217 </div>218 <div class="label">Default (Fresh Start)</div>219 <div class="spacer"></div>220 <div class="circle-btn">✓</div>221 </div>222 223 <div class="setting-row">224 <div class="row-icon">225 <svg viewBox="0 0 24 24"><path d="M3 8l2-2 4 4-2 2-4-4zm12 0l4-4 2 2-4 4-2-2zM7 14l2-2 4 4-2 2-4-4zm10 0l2-2 4 4-2 2-4-4z"/></svg>226 </div>227 <div class="label">Vibrate</div>228 <div class="spacer"></div>229 <div class="circle-btn">✓</div>230 </div>231 232 <div class="setting-row">233 <div class="row-icon">234 <!-- assistant dots simplified -->235 <svg viewBox="0 0 24 24"><circle cx="6" cy="12" r="2"/><circle cx="11" cy="12" r="2"/><circle cx="16" cy="12" r="2"/><circle cx="21" cy="12" r="2"/></svg>236 </div>237 <div class="label">Google Assistant Routine</div>238 <div class="spacer"></div>239 <div class="circle-btn">+</div>240 </div>241 242 <div class="setting-row">243 <div class="row-icon">244 <svg viewBox="0 0 24 24"><path d="M6 7h12v14H6V7zm2-5h8v3H8V2z"/></svg>245 </div>246 <div class="label">Delete</div>247 </div>248 </div>249 250 <!-- Card 2 - Gym -->251 <div id="card2" class="card">252 <div class="card-header">253 <div style="width: 52px; height: 36px; border: 4px solid #d7c9c3; border-radius: 8px;"></div>254 <div>Gym</div>255 <div class="collapse-down" style="margin-left:auto;">256 <svg viewBox="0 0 24 24"><path d="M12 16l-6-6h12z"/></svg>257 </div>258 </div>259 260 <div class="big-time">6:00 <small>pm</small></div>261 262 <div class="setting-row" style="margin-top: 14px; color:#cdb8af;">263 <div class="label">Today</div>264 <div class="spacer"></div>265 <div class="toggle"></div>266 </div>267 268 <div class="fab">+</div>269 270 <div class="setting-row" style="margin-top: 10px;">271 <div class="label" style="color:#f3b5a9;">Dismiss</div>272 </div>273 </div>274 275 <!-- Bottom navigation bar -->276 <div class="bottom-bar">277 <div class="nav-item">278 <div class="nav-icon active">279 <svg viewBox="0 0 24 24"><path d="M12 4a6 6 0 016 6v6l2 2v2H4v-2l2-2v-6a6 6 0 016-6zm0 4a4 4 0 00-4 4v6h8v-6a4 4 0 00-4-4z"/></svg>280 </div>281 <div>Alarm</div>282 </div>283 <div class="nav-item">284 <div class="nav-icon">285 <svg viewBox="0 0 24 24"><path d="M12 2a10 10 0 100 20 10 10 0 000-20zm1 5h-2v6l5 3 1-1-4-2V7z"/></svg>286 </div>287 <div>Clock</div>288 </div>289 <div class="nav-item">290 <div class="nav-icon">291 <svg viewBox="0 0 24 24"><path d="M7 2h10v4H7V2zm-2 6h14v14H5V8zm4 2v10h2V10H9zm4 0v10h2V10h-2z"/></svg>292 </div>293 <div>Timer</div>294 </div>295 <div class="nav-item">296 <div class="nav-icon">297 <svg viewBox="0 0 24 24"><path d="M8 2h8v2H8V2zm4 4a9 9 0 110 18 9 9 0 010-18zm0 4h2v6h-6v-2h4V10z"/></svg>298 </div>299 <div>Stopwatch</div>300 </div>301 <div class="nav-item">302 <div class="nav-icon">303 <svg viewBox="0 0 24 24"><path d="M4 10h16v8H4v-8zm2-6h4l2 2h8v2H6V4z"/></svg>304 </div>305 <div>Bedtime</div>306 </div>307 </div>308 309</div>310</body>311</html>