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; height:2400px;9 position:relative; overflow:hidden;10 background:#1c1614;11 color:#f5e9e6;12 }13 /* Status bar */14 .status-bar {15 position:absolute; top:0; left:0; right:0;16 height:100px;17 padding:20px 30px;18 display:flex; align-items:center; justify-content:space-between;19 color:#e9d9d3;20 font-size:36px; letter-spacing:1px;21 }22 .status-right { display:flex; gap:24px; align-items:center; }23 .dot { width:10px; height:10px; background:#c9b8b3; border-radius:50%; display:inline-block; margin:0 6px; }24 /* Page title */25 .page-title {26 position:absolute; top:140px; left:40px;27 font-size:68px; font-weight:700; color:#f3e6e2;28 }29 .menu-btn {30 position:absolute; top:150px; right:40px; width:48px; height:48px;31 }32 33 /* Cards container */34 .cards { position:absolute; top:260px; left:30px; right:30px; }35 .alarm-card {36 background:#211817;37 border-radius:40px;38 padding:38px 40px 46px 40px;39 margin-bottom:34px;40 box-shadow: 0 8px 20px rgba(0,0,0,0.25);41 }42 .card-header {43 display:flex; align-items:center; justify-content:space-between;44 margin-bottom:14px;45 }46 .title {47 font-size:42px; color:#e9d9d3; font-weight:600;48 }49 .chevron { width:56px; height:56px; }50 .time-row {51 display:flex; align-items:flex-end; gap:16px;52 margin-top:10px; margin-bottom:28px;53 }54 .time {55 font-size:160px; line-height:0.9; font-weight:800; color:#fff7f4;56 }57 .ampm {58 font-size:64px; color:#e9d9d3; margin-bottom:22px;59 }60 .sub-row {61 display:flex; align-items:center; gap:20px; color:#e9d9d3;62 font-size:40px;63 margin-bottom:26px;64 }65 .accent { color:#f0a28f; }66 .dismiss {67 color:#f49d8b; font-size:42px; margin-top:8px;68 }69 70 /* Toggle */71 .toggle {72 margin-left:auto;73 width:190px; height:84px; border-radius:44px;74 background:#6a372e; position:relative;75 box-shadow: inset 0 0 0 2px rgba(255,255,255,0.06);76 }77 .toggle .knob {78 position:absolute; top:12px; right:12px;79 width:60px; height:60px; border-radius:50%;80 background:#ffd3c7;81 box-shadow:0 2px 6px rgba(0,0,0,0.35);82 }83 84 /* Icons base */85 .icon {86 width:48px; height:48px;87 }88 .row-end { display:flex; align-items:center; justify-content:flex-end; }89 90 /* Day chips */91 .chip-row { display:flex; gap:24px; margin:22px 0 16px 0; }92 .day-chip {93 width:90px; height:90px; border-radius:50%;94 border:2px solid #3a2a27; color:#cfc1bc;95 display:flex; align-items:center; justify-content:center;96 font-size:42px;97 background:#231a18;98 }99 100 /* Extra rows on third card */101 .list-row {102 display:flex; align-items:center; gap:18px; font-size:40px; color:#e9d9d3;103 margin:22px 0;104 }105 .minus {106 margin-left:auto;107 width:72px; height:72px; border-radius:36px; background:#3a2825;108 display:flex; align-items:center; justify-content:center;109 color:#f7b6a6; font-size:58px; line-height:0;110 }111 .bell-row { display:flex; align-items:center; gap:18px; font-size:40px; color:#e9d9d3; margin-top:16px; }112 113 /* Floating Action Button */114 .fab {115 position:absolute; left:50%; transform:translateX(-50%);116 top:1530px; width:300px; height:300px; border-radius:50%;117 background:#ffc2b6; color:#3a1e1a;118 display:flex; align-items:center; justify-content:center;119 font-size:160px; font-weight:700;120 box-shadow: 0 12px 26px rgba(0,0,0,0.35);121 }122 123 /* Bottom nav */124 .bottom-nav {125 position:absolute; bottom:0; left:0; right:0;126 height:210px; background:#1f1513;127 border-top-left-radius:40px; border-top-right-radius:40px;128 box-shadow:0 -8px 18px rgba(0,0,0,0.35);129 padding-top:18px;130 }131 .nav-items { display:flex; justify-content:space-around; align-items:center; padding:18px 40px 0 40px; }132 .nav-item { display:flex; flex-direction:column; align-items:center; color:#cdbfb9; gap:14px; }133 .nav-item .label { font-size:38px; }134 .nav-item.active .label { color:#f5ddd5; font-weight:700; }135 .pill {136 width:116px; height:86px; border-radius:24px; background:#3a2a27;137 display:flex; align-items:center; justify-content:center;138 }139</style>140</head>141<body>142<div id="render-target">143 144 <!-- Status Bar -->145 <div class="status-bar">146 <div>5:14</div>147 <div class="status-right">148 <!-- a few minimalistic status icons -->149 <svg class="icon" viewBox="0 0 24 24">150 <rect x="2" y="4" width="20" height="16" rx="3" fill="#d8c9c3"/>151 <rect x="6" y="8" width="12" height="8" rx="2" fill="#1c1614"/>152 </svg>153 <svg class="icon" viewBox="0 0 24 24">154 <path d="M3 16l9-12 9 12H3z" fill="#d8c9c3"/>155 </svg>156 <svg class="icon" viewBox="0 0 24 24">157 <circle cx="12" cy="12" r="10" stroke="#d8c9c3" stroke-width="2" fill="none"/>158 <circle cx="12" cy="12" r="4" fill="#d8c9c3"/>159 </svg>160 <svg class="icon" viewBox="0 0 24 24">161 <rect x="3" y="5" width="14" height="14" rx="2" fill="#d8c9c3"/>162 <rect x="19" y="10" width="2" height="4" fill="#d8c9c3"/>163 </svg>164 <div class="dot"></div>165 <svg class="icon" viewBox="0 0 24 24">166 <path d="M4 10h16v8a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2v-8z" fill="#d8c9c3"/>167 <path d="M8 6h8v4H8z" fill="#d8c9c3"/>168 </svg>169 </div>170 </div>171 172 <!-- Title and menu -->173 <div class="page-title">Alarm</div>174 <svg class="menu-btn" viewBox="0 0 24 24">175 <rect x="3" y="5" width="18" height="2" fill="#d8c9c3"/>176 <rect x="3" y="11" width="18" height="2" fill="#d8c9c3"/>177 <rect x="3" y="17" width="18" height="2" fill="#d8c9c3"/>178 </svg>179 180 <div class="cards">181 <!-- Card 1 -->182 <div class="alarm-card">183 <div class="card-header">184 <div class="title">Grocery</div>185 <svg class="chevron" viewBox="0 0 24 24">186 <path d="M6 9l6 6 6-6" stroke="#d8c9c3" stroke-width="2" fill="none" stroke-linecap="round"/>187 </svg>188 </div>189 <div class="time-row">190 <div class="time">5:00</div>191 <div class="ampm">pm</div>192 <div class="toggle"><div class="knob"></div></div>193 </div>194 <div class="sub-row">195 <svg class="icon" viewBox="0 0 24 24">196 <rect x="3" y="4" width="18" height="16" rx="3" stroke="#d8c9c3" stroke-width="2" fill="none"/>197 <rect x="7" y="2" width="10" height="4" rx="2" fill="#d8c9c3"/>198 </svg>199 <div>Scheduled for tomorrow</div>200 </div>201 </div>202 203 <!-- Card 2 -->204 <div class="alarm-card">205 <div class="card-header">206 <div class="title">Gym</div>207 <svg class="chevron" viewBox="0 0 24 24">208 <path d="M6 9l6 6 6-6" stroke="#d8c9c3" stroke-width="2" fill="none" stroke-linecap="round"/>209 </svg>210 </div>211 <div class="time-row">212 <div class="time">6:00</div>213 <div class="ampm">pm</div>214 <div class="toggle"><div class="knob"></div></div>215 </div>216 <div class="sub-row">217 <div>Today</div>218 </div>219 <div class="dismiss">Dismiss</div>220 </div>221 222 <!-- Card 3 -->223 <div class="alarm-card">224 <div class="card-header">225 <div class="title">Party</div>226 <svg class="chevron" viewBox="0 0 24 24">227 <path d="M6 9l6 6 6-6" stroke="#d8c9c3" stroke-width="2" fill="none" stroke-linecap="round"/>228 </svg>229 </div>230 <div class="time-row">231 <div class="time">11:00</div>232 <div class="ampm">pm</div>233 <div class="toggle"><div class="knob"></div></div>234 </div>235 236 <div class="sub-row">237 <svg class="icon" viewBox="0 0 24 24">238 <rect x="3" y="4" width="18" height="16" rx="3" stroke="#d8c9c3" stroke-width="2" fill="none"/>239 <rect x="7" y="2" width="10" height="4" rx="2" fill="#d8c9c3"/>240 </svg>241 <div>Scheduled for 30 September</div>242 </div>243 244 <div class="chip-row">245 <div class="day-chip">S</div>246 <div class="day-chip">M</div>247 <div class="day-chip">T</div>248 <div class="day-chip">T</div>249 <div class="day-chip">F</div>250 <div class="day-chip">S</div>251 </div>252 253 <div class="list-row">254 <svg class="icon" viewBox="0 0 24 24">255 <circle cx="12" cy="12" r="10" stroke="#d8c9c3" stroke-width="2" fill="none"/>256 <path d="M6 12h12" stroke="#d8c9c3" stroke-width="2" stroke-linecap="round"/>257 </svg>258 <div>Schedule alarm • 30 September</div>259 <div class="minus">−</div>260 </div>261 262 <div class="bell-row">263 <svg class="icon" viewBox="0 0 24 24">264 <path d="M12 3c-3 0-5 2-5 5v4l-2 3h14l-2-3V8c0-3-2-5-5-5z" fill="#d8c9c3"/>265 <circle cx="12" cy="19" r="2" fill="#d8c9c3"/>266 </svg>267 <div>Default (Fresh Start)</div>268 </div>269 </div>270 </div>271 272 <!-- Floating action button -->273 <div class="fab">+</div>274 275 <!-- Bottom Navigation -->276 <div class="bottom-nav">277 <div class="nav-items">278 <div class="nav-item active">279 <div class="pill">280 <svg viewBox="0 0 24 24" width="60" height="60">281 <circle cx="12" cy="12" r="10" stroke="#f5ddd5" stroke-width="2" fill="none"/>282 <path d="M12 6v6l4 2" stroke="#f5ddd5" stroke-width="2" fill="none" stroke-linecap="round"/>283 </svg>284 </div>285 <div class="label">Alarm</div>286 </div>287 <div class="nav-item">288 <svg class="icon" viewBox="0 0 24 24">289 <circle cx="12" cy="12" r="10" stroke="#cdbfb9" stroke-width="2" fill="none"/>290 <path d="M12 6v6l4 2" stroke="#cdbfb9" stroke-width="2" fill="none" stroke-linecap="round"/>291 </svg>292 <div class="label">Clock</div>293 </div>294 <div class="nav-item">295 <svg class="icon" viewBox="0 0 24 24">296 <path d="M6 19l6-12 6 12H6z" fill="#cdbfb9"/>297 </svg>298 <div class="label">Timer</div>299 </div>300 <div class="nav-item">301 <svg class="icon" viewBox="0 0 24 24">302 <circle cx="12" cy="12" r="10" stroke="#cdbfb9" stroke-width="2" fill="none"/>303 <rect x="10" y="6" width="4" height="12" fill="#cdbfb9"/>304 </svg>305 <div class="label">Stopwatch</div>306 </div>307 <div class="nav-item">308 <svg class="icon" viewBox="0 0 24 24">309 <rect x="3" y="8" width="18" height="10" rx="2" fill="#cdbfb9"/>310 <rect x="6" y="5" width="12" height="3" fill="#cdbfb9"/>311 </svg>312 <div class="label">Bedtime</div>313 </div>314 </div>315 </div>316 317</div>318</body>319</html>