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: "Roboto", "Segoe UI", Arial, sans-serif; }7 #render-target {8 position: relative;9 overflow: hidden;10 width: 1080px;11 height: 2400px;12 background: #2b2322;13 color: #f3e7e4;14 }15 16 /* Status bar */17 .status {18 height: 90px;19 padding: 0 28px;20 display: flex;21 align-items: center;22 justify-content: space-between;23 color: #f6ebe8;24 font-weight: 600;25 letter-spacing: 0.5px;26 }27 .status-right { display:flex; align-items:center; gap:18px; }28 .status-icon {29 width: 24px; height: 24px;30 display:inline-flex; align-items:center; justify-content:center;31 }32 .status-icon svg { width:100%; height:100%; fill:#f6ebe8; }33 34 /* Title bar */35 .title-bar {36 padding: 8px 32px 20px 32px;37 display:flex; align-items:center; justify-content:space-between;38 }39 .title-text {40 font-size: 64px;41 font-weight: 700;42 }43 .kebab {44 width: 40px; height: 40px; display:flex; align-items:center; justify-content:center;45 }46 .kebab svg { fill:#e9dcd8; }47 48 /* Cards */49 .card {50 margin: 22px 30px;51 background: #1f1817;52 border-radius: 36px;53 padding: 34px;54 box-shadow: 0 10px 16px rgba(0,0,0,0.25) inset;55 }56 .card-header {57 display:flex; align-items:center; justify-content:space-between;58 }59 .card-title {60 font-size: 40px;61 display:flex; align-items:center; gap:12px;62 }63 .tag-icon {64 width: 34px; height: 26px;65 }66 .chevron-pill {67 width: 52px; height: 52px; border-radius: 26px;68 background:#332724; display:flex; align-items:center; justify-content:center;69 }70 .chevron-pill svg { width:24px; height:24px; fill:#e9dcd8; }71 72 /* Toggle */73 .toggle {74 width: 160px; height: 76px; border-radius: 38px;75 background:#7c3b32; position:relative; box-shadow: inset 0 0 0 2px rgba(255,255,255,0.05);76 }77 .toggle .dot {78 position:absolute; top:8px; right:8px;79 width:60px; height:60px; background:#f6b9b1; border-radius:50%;80 }81 82 .subtle-link { margin-top:20px; color:#e6a7a0; font-size:32px; }83 84 /* Big time */85 .time {86 font-size: 140px; font-weight: 800; letter-spacing: 2px; margin: 24px 0 10px 0;87 }88 .time small { font-size: 46px; font-weight: 700; margin-left: 10px; }89 90 .row { display:flex; align-items:center; justify-content:space-between; gap:16px; }91 .row-left { display:flex; align-items:center; gap:16px; }92 .row-right { display:flex; align-items:center; gap:16px; }93 94 .label {95 font-size: 36px;96 color:#e9dcd8;97 }98 .subtext {99 font-size: 34px;100 color:#c8bbb6;101 }102 103 /* Weekday circles */104 .weekdays { display:flex; gap:20px; margin:20px 0 10px 0; }105 .day {106 width:86px; height:86px; border-radius:43px;107 border: 2px solid #5a4c49; display:flex; align-items:center; justify-content:center;108 color:#d7cbc6; font-size:36px; font-weight:600;109 background:#241c1b;110 }111 112 /* Item rows with icons */113 .item {114 margin-top:22px; padding-top:16px;115 display:flex; align-items:center; justify-content:space-between;116 }117 .item-left { display:flex; align-items:center; gap:22px; }118 .item-icon {119 width:42px; height:42px; display:flex; align-items:center; justify-content:center;120 }121 .item-icon svg { width:100%; height:100%; fill:#d9ccc7; }122 123 .chip {124 padding: 10px 18px; border-radius: 24px; background:#332724; color:#e6dedb; font-size: 32px;125 }126 .action-pill {127 width:56px; height:56px; border-radius:28px; background:#332724;128 display:flex; align-items:center; justify-content:center;129 }130 .action-pill svg { width:28px; height:28px; fill:#e9dcd8; }131 132 .delete-row { margin-top:28px; padding-top:16px; }133 134 /* Floating add button */135 .fab {136 position:absolute; left:50%; transform:translateX(-50%);137 bottom:340px; width:260px; height:260px; border-radius:130px;138 background:#ffc2b9; display:flex; align-items:center; justify-content:center;139 color:#321a18; font-size:120px; font-weight:700;140 box-shadow: 0 12px 30px rgba(0,0,0,0.35);141 }142 143 /* Bottom navigation */144 .bottom-nav {145 position:absolute; bottom:0; left:0; right:0;146 height:170px; padding: 16px 20px 26px 20px;147 background:#241c20;148 display:flex; align-items:flex-end; justify-content:space-around;149 color:#cfc3be;150 }151 .nav-item {152 width:180px; height:120px; border-radius:60px;153 display:flex; flex-direction:column; align-items:center; justify-content:center;154 gap:10px;155 }156 .nav-item .icon { width:46px; height:46px; }157 .nav-item .icon svg { width:100%; height:100%; fill:#daccc7; }158 .nav-item .text { font-size:30px; }159 160 .nav-item.selected { background:#3a2d2b; color:#fff3ef; }161</style>162</head>163<body>164<div id="render-target">165 166 <!-- Status bar -->167 <div class="status">168 <div class="status-left">5:13</div>169 <div class="status-right">170 <div class="status-icon" title="Wi‑Fi">171 <svg viewBox="0 0 24 24"><path d="M12 18l-2 2 2 2 2-2-2-2zm-4-4l4 4 4-4c-2.2-2.2-5.8-2.2-8 0zm-4-4l8 8 8-8c-4.4-4.4-11.6-4.4-16 0z"/></svg>172 </div>173 <div class="status-icon" title="Battery">174 <svg viewBox="0 0 24 24"><path d="M17 6h2v2h1v8h-1v2h-2V6zM3 8h12v8H3V8z"/></svg>175 </div>176 </div>177 </div>178 179 <!-- Title bar -->180 <div class="title-bar">181 <div class="title-text">Alarm</div>182 <div class="kebab">183 <svg viewBox="0 0 24 24"><circle cx="12" cy="5" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="12" cy="19" r="2"/></svg>184 </div>185 </div>186 187 <!-- Small Today card -->188 <div class="card">189 <div class="card-header">190 <div class="label" style="font-size:42px;">Today</div>191 <div class="toggle"><div class="dot"></div></div>192 </div>193 <div class="subtle-link">Dismiss</div>194 </div>195 196 <!-- Big Party alarm card -->197 <div class="card" style="padding-bottom:36px;">198 <div class="card-header">199 <div class="card-title">200 <svg class="tag-icon" viewBox="0 0 24 24"><path d="M3 7v10l7 4 11-6V5L10 1 3 7zm9 2a3 3 0 110 6 3 3 0 010-6z"/></svg>201 <span>Party</span>202 </div>203 <div class="chevron-pill">204 <svg viewBox="0 0 24 24"><path d="M7 14l5-5 5 5H7z"/></svg>205 </div>206 </div>207 208 <div class="time">11:00 <small>pm</small></div>209 210 <div class="row" style="margin-top:8px;">211 <div class="row-left">212 <div class="item-icon">213 <svg viewBox="0 0 24 24"><path d="M12 7a5 5 0 100 10 5 5 0 000-10zm1-5h-2v3h2V2zm7 10h3v-2h-3v2zM2 12H-1v-2h3v2zm1.7-7.7L2 4l2.1 2.1 1.4-1.4L3.7 4.3zM18.5 4.7L17.1 6.1 19.2 8.2l1.4-1.4-2.1-2.1z"/></svg>214 </div>215 <div class="subtext">Scheduled for 30 September</div>216 </div>217 <div class="toggle" style="transform:scale(0.88);"><div class="dot"></div></div>218 </div>219 220 <div class="weekdays">221 <div class="day">S</div>222 <div class="day">M</div>223 <div class="day">T</div>224 <div class="day">W</div>225 <div class="day">T</div>226 <div class="day">F</div>227 <div class="day">S</div>228 </div>229 230 <div class="item">231 <div class="item-left">232 <div class="item-icon">233 <svg viewBox="0 0 24 24"><path d="M4 4h3V2h2v2h6V2h2v2h3v16H4V4zm2 4h12v10H6V8z"/></svg>234 </div>235 <div class="label">Schedule alarm</div>236 </div>237 <div class="row-right">238 <div class="chip">30 September</div>239 <div class="action-pill">240 <svg viewBox="0 0 24 24"><path d="M6 12h12v2H6z"/></svg>241 </div>242 </div>243 </div>244 245 <div class="item">246 <div class="item-left">247 <div class="item-icon">248 <svg viewBox="0 0 24 24"><path d="M12 3a6 6 0 00-6 6v4l-2 2v1h16v-1l-2-2V9a6 6 0 00-6-6zm0 18a2 2 0 002-2H10a2 2 0 002 2z"/></svg>249 </div>250 <div class="label">Default (Fresh Start)</div>251 </div>252 </div>253 254 <div class="item">255 <div class="item-left">256 <div class="item-icon">257 <svg viewBox="0 0 24 24"><path d="M2 6l2-2 3 3-2 2L2 6zm17-2l3 3-2 2-3-3 2-2zM6 10l2-2 10 10-2 2L6 10z"/></svg>258 </div>259 <div class="label">Vibrate</div>260 </div>261 <div class="action-pill" style="background:#7c3b32;">262 <svg viewBox="0 0 24 24"><path d="M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z"/></svg>263 </div>264 </div>265 266 <div class="item">267 <div class="item-left">268 <div class="item-icon">269 <svg viewBox="0 0 24 24"><circle cx="9" cy="10" r="3"/><circle cx="15" cy="8" r="2.4"/><circle cx="15.6" cy="14.5" r="1.8"/><circle cx="12.5" cy="16.5" r="1.5"/></svg>270 </div>271 <div class="label">Google Assistant Routine</div>272 </div>273 <div class="action-pill">274 <svg viewBox="0 0 24 24"><path d="M11 11V6h2v5h5v2h-5v5h-2v-5H6v-2h5z"/></svg>275 </div>276 </div>277 278 <div class="item delete-row">279 <div class="item-left">280 <div class="item-icon">281 <svg viewBox="0 0 24 24"><path d="M7 6h10l-1 14H8L7 6zm3-2h4l1 2H9l1-2z"/></svg>282 </div>283 <div class="label">Delete</div>284 </div>285 </div>286 </div>287 288 <!-- Floating Add Button -->289 <div class="fab">+</div>290 291 <!-- Bottom Navigation -->292 <div class="bottom-nav">293 <div class="nav-item selected">294 <div class="icon">295 <svg viewBox="0 0 24 24"><path d="M12 4a7 7 0 017 7v4l2 2v1H3v-1l2-2v-4a7 7 0 017-7zm0 15a2 2 0 100 4 2 2 0 000-4z"/></svg>296 </div>297 <div class="text">Alarm</div>298 </div>299 <div class="nav-item">300 <div class="icon">301 <svg viewBox="0 0 24 24"><path d="M12 20a8 8 0 100-16 8 8 0 000 16zm1-9h5v2h-7V6h2v5z"/></svg>302 </div>303 <div class="text">Clock</div>304 </div>305 <div class="nav-item">306 <div class="icon">307 <svg viewBox="0 0 24 24"><path d="M6 4h12v2H6V4zm2 4h8v12H8V8z"/></svg>308 </div>309 <div class="text">Timer</div>310 </div>311 <div class="nav-item">312 <div class="icon">313 <svg viewBox="0 0 24 24"><path d="M12 1l-4 4h3v4h2V5h3l-4-4zm0 6a9 9 0 100 18 9 9 0 000-18z"/></svg>314 </div>315 <div class="text">Stopwatch</div>316 </div>317 <div class="nav-item">318 <div class="icon">319 <svg viewBox="0 0 24 24"><path d="M3 12h18v8H3v-8zm13-7h4v5H4V5h4V3h8v2z"/></svg>320 </div>321 <div class="text">Bedtime</div>322 </div>323 </div>324 325</div>326</body>327</html>