GD-ML/AndroidCode
13.4k
1<html>2<head>3<meta charset="UTF-8">4<title>Alarm UI</title>5<style>6 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }7 #render-target {8 width: 1080px;9 height: 2400px;10 position: relative;11 overflow: hidden;12 background: #1f1916; /* deep dark brown */13 color: #f6efe7;14 }15 16 .status-bar {17 position: absolute;18 top: 0;19 left: 0;20 width: 1080px;21 height: 120px;22 color: #e8ded3;23 font-size: 38px;24 padding: 0 36px;25 display: flex;26 align-items: center;27 justify-content: space-between;28 }29 .status-right {30 display: flex;31 gap: 26px;32 align-items: center;33 }34 .icon {35 width: 42px; height: 42px;36 }37 .header {38 position: absolute;39 top: 140px;40 left: 40px;41 font-size: 76px;42 font-weight: 700;43 letter-spacing: 1px;44 color: #f1e6d8;45 }46 47 .card {48 position: absolute;49 left: 32px;50 width: 1016px;51 background: #2b231e;52 border-radius: 48px;53 box-shadow: 0 6px 24px rgba(0,0,0,0.35);54 padding: 40px;55 }56 .card.big { top: 240px; height: 980px; }57 .card.medium { top: 1290px; height: 470px; }58 59 .row { display: flex; align-items: center; justify-content: space-between; }60 .subtle { color: #d8cdbc; font-size: 42px; }61 .label-chip {62 display: inline-flex;63 align-items: center;64 gap: 18px;65 color: #e8ded2;66 font-size: 44px;67 }68 .tag-icon {69 width: 44px; height: 44px; border-radius: 8px; background: #463a31;70 }71 .caret {72 width: 64px; height: 64px; background: #3a2f27; border-radius: 50%;73 display: flex; align-items: center; justify-content: center;74 }75 76 .time-display {77 font-size: 160px;78 font-weight: 800;79 letter-spacing: 2px;80 color: #fbf6ef;81 }82 .time-display .ampm {83 font-size: 64px; margin-left: 12px; vertical-align: super;84 }85 86 .day-chips { display: flex; gap: 38px; margin-top: 24px; }87 .chip {88 width: 96px; height: 96px; border-radius: 50%;89 background: #f5b77f; color: #5e3a22; font-weight: 700;90 display: flex; align-items: center; justify-content: center;91 font-size: 44px;92 }93 94 .toggle {95 width: 172px; height: 86px; border-radius: 43px;96 background: #5a3c2a;97 position: relative;98 margin-left: 18px;99 }100 .toggle .knob {101 position: absolute; top: 10px; right: 10px;102 width: 66px; height: 66px; border-radius: 50%;103 background: #f3d1ae;104 }105 106 .settings-list { margin-top: 24px; }107 .settings-item {108 height: 110px; display: flex; align-items: center; justify-content: space-between;109 border-bottom: 1px solid rgba(255,255,255,0.06);110 }111 .settings-left { display: flex; align-items: center; gap: 26px; }112 .settings-left span { font-size: 46px; color: #efe4d8; }113 114 .check-badge, .plus-badge {115 width: 72px; height: 72px; border-radius: 50%;116 background: #f4b77f; color: #3b2617;117 display: flex; align-items: center; justify-content: center;118 }119 120 .trash-row { border-bottom: 0; }121 122 /* Second card styles */123 .small-note { color: #d9cfc0; font-size: 40px; margin-top: 18px; }124 .right-toggle { display: flex; align-items: center; gap: 18px; }125 126 /* Floating action button */127 .fab {128 position: absolute;129 top: 1580px;130 left: 414px;131 width: 252px; height: 252px;132 border-radius: 50%;133 background: #f5b77f;134 box-shadow: 0 16px 40px rgba(0,0,0,0.45);135 display: flex; align-items: center; justify-content: center;136 color: #3b2617; font-size: 92px; font-weight: 700;137 }138 139 /* Bottom navigation */140 .bottom-bar {141 position: absolute;142 bottom: 0; left: 0;143 width: 1080px; height: 190px;144 background: #2a221d;145 border-top-left-radius: 32px;146 border-top-right-radius: 32px;147 display: flex; align-items: center; justify-content: space-around;148 color: #e9dfd1;149 }150 .nav-item { display: flex; flex-direction: column; align-items: center; gap: 16px; font-size: 40px; }151 .nav-pil {152 width: 160px; height: 76px; border-radius: 38px; background: #41352c;153 display: flex; align-items: center; justify-content: center;154 }155 .nav-icon { width: 56px; height: 56px; }156 157 /* Simple icons using inline SVG fallback sizes */158 .i-bell, .i-pause, .i-vibrate, .i-assist, .i-trash { width: 54px; height: 54px; }159</style>160</head>161<body>162<div id="render-target">163 164 <!-- Status bar -->165 <div class="status-bar">166 <div>7:10</div>167 <div class="status-right">168 <!-- small icons -->169 <svg class="icon" viewBox="0 0 24 24" fill="#e8ded3"><path d="M12 3a9 9 0 0 0-9 9h3a6 6 0 0 1 6-6V3z"></path><path d="M21 12a9 9 0 0 0-9-9v3a6 6 0 0 1 6 6h3z"></path></svg>170 <svg class="icon" viewBox="0 0 24 24" fill="#e8ded3"><path d="M20 7H4v10h16V7zm-2 8H6V9h12v6z"></path></svg>171 <svg class="icon" viewBox="0 0 24 24" fill="#e8ded3"><path d="M15.67 4H8.33A3.33 3.33 0 0 0 5 7.33v9.34A3.33 3.33 0 0 0 8.33 20h7.34A3.33 3.33 0 0 0 19 16.67V7.33A3.33 3.33 0 0 0 15.67 4z"></path></svg>172 </div>173 </div>174 175 <!-- Header -->176 <div class="header">Alarm</div>177 178 <!-- Card: time to walk -->179 <div class="card big">180 <div class="row">181 <div class="label-chip">182 <div class="tag-icon"></div>183 <div style="font-weight:600;">time to walk</div>184 </div>185 <div class="caret">186 <svg width="28" height="28" viewBox="0 0 24 24" fill="#d9cfc0"><path d="M7 14l5-5 5 5H7z"/></svg>187 </div>188 </div>189 190 <div style="margin-top: 24px;">191 <span class="time-display">7:15 <span class="ampm">AM</span></span>192 </div>193 194 <div class="row" style="margin-top: 44px;">195 <span class="subtle">Every day</span>196 <div class="toggle"><div class="knob"></div></div>197 </div>198 199 <div class="day-chips">200 <div class="chip">S</div>201 <div class="chip">M</div>202 <div class="chip">T</div>203 <div class="chip">W</div>204 <div class="chip">T</div>205 <div class="chip">F</div>206 <div class="chip">S</div>207 </div>208 209 <div class="settings-list">210 <div class="settings-item">211 <div class="settings-left">212 <svg class="i-pause" viewBox="0 0 24 24" fill="#d9cfc0"><path d="M9 6h2v12H9zM13 6h2v12h-2z"/><circle cx="12" cy="12" r="10" fill="none" stroke="#d9cfc0" stroke-width="2"/></svg>213 <span>Pause alarm</span>214 </div>215 <div class="plus-badge">216 <svg width="34" height="34" viewBox="0 0 24 24" fill="#3b2617"><path d="M11 5h2v14h-2zM5 11h14v2H5z"/></svg>217 </div>218 </div>219 220 <div class="settings-item">221 <div class="settings-left">222 <svg class="i-bell" viewBox="0 0 24 24" fill="#d9cfc0"><path d="M12 22a2 2 0 0 0 2-2h-4a2 2 0 0 0 2 2zm6-6V9a6 6 0 1 0-12 0v7L4 18v2h16v-2l-2-2z"/></svg>223 <span>Default (Bright Morning)</span>224 </div>225 </div>226 227 <div class="settings-item">228 <div class="settings-left">229 <svg class="i-vibrate" viewBox="0 0 24 24" fill="#d9cfc0"><path d="M16 3H8a3 3 0 0 0-3 3v12a3 3 0 0 0 3 3h8a3 3 0 0 0 3-3V6a3 3 0 0 0-3-3zM1 9l2 2-2 2 2 2-2 2" stroke="#d9cfc0" stroke-width="2" fill="none"/></svg>230 <span>Vibrate</span>231 </div>232 <div class="check-badge">233 <svg width="36" height="36" viewBox="0 0 24 24" fill="#3b2617"><path d="M9 16.2l-3.5-3.5 1.4-1.4L9 13.4l7.1-7.1 1.4 1.4z"/></svg>234 </div>235 </div>236 237 <div class="settings-item">238 <div class="settings-left">239 <svg class="i-assist" viewBox="0 0 24 24" fill="#d9cfc0"><circle cx="6" cy="12" r="3"/><circle cx="12" cy="7" r="3"/><circle cx="12" cy="17" r="3"/><circle cx="18" cy="12" r="3"/></svg>240 <span>Google Assistant Routine</span>241 </div>242 <div class="plus-badge">243 <svg width="34" height="34" viewBox="0 0 24 24" fill="#3b2617"><path d="M11 5h2v14h-2zM5 11h14v2H5z"/></svg>244 </div>245 </div>246 247 <div class="settings-item trash-row">248 <div class="settings-left">249 <svg class="i-trash" viewBox="0 0 24 24" fill="#d9cfc0"><path d="M6 7h12l-1 14H7L6 7zm3-3h6l1 3H8l1-3z"/></svg>250 <span>Delete</span>251 </div>252 </div>253 </div>254 </div>255 256 <!-- Card: Office time -->257 <div class="card medium">258 <div class="row">259 <div style="font-size: 48px; color: #e8ded3; font-weight:600;">Office time</div>260 <div class="caret">261 <svg width="28" height="28" viewBox="0 0 24 24" fill="#d9cfc0"><path d="M7 10l5 5 5-5H7z"/></svg>262 </div>263 </div>264 265 <div style="margin-top: 20px;">266 <span class="time-display" style="font-size:148px;">8:00 <span class="ampm">AM</span></span>267 </div>268 269 <div class="row" style="margin-top: 26px;">270 <div class="small-note">Mon, Tue, Wed, Thu</div>271 <div class="right-toggle">272 <div class="toggle"><div class="knob"></div></div>273 </div>274 </div>275 </div>276 277 <!-- Floating Add Button -->278 <div class="fab">+</div>279 280 <!-- Bottom Navigation -->281 <div class="bottom-bar">282 <div class="nav-item">283 <div class="nav-pil">284 <svg class="nav-icon" viewBox="0 0 24 24" fill="#e9dfd1"><path d="M12 4l4 4H8l4-4zm-6 6h12v8H6v-8z"/></svg>285 </div>286 <div>Alarm</div>287 </div>288 <div class="nav-item">289 <svg class="nav-icon" viewBox="0 0 24 24" fill="#e9dfd1"><path d="M12 7v5l3 3 1-1-3-3V7h-1zM12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20z"/></svg>290 <div>Clock</div>291 </div>292 <div class="nav-item">293 <svg class="nav-icon" viewBox="0 0 24 24" fill="#e9dfd1"><path d="M12 2l4 8H8l4-8zm-4 10h8v10H8V12z"/></svg>294 <div>Timer</div>295 </div>296 <div class="nav-item">297 <svg class="nav-icon" viewBox="0 0 24 24" fill="#e9dfd1"><path d="M6 19h12v2H6zM7 4h10l-1 3H8L7 4zm0 5h10v8H7V9z"/></svg>298 <div>Stopwatch</div>299 </div>300 <div class="nav-item">301 <svg class="nav-icon" viewBox="0 0 24 24" fill="#e9dfd1"><path d="M3 12h18v8H3v-8zm2-6h14v4H5V6z"/></svg>302 <div>Bedtime</div>303 </div>304 </div>305 306</div>307</body>308</html>