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 - Mock</title>7<style>8 :root{9 --bg:#1f2428;10 --card:#262b30;11 --card-2:#22272c;12 --text:#e8edf2;13 --muted:#aeb6c2;14 --outline:#3c434c;15 --accent:#2f5d8f;16 --accent-2:#9fc2ff;17 }18 body{ margin:0; padding:0; background:transparent; font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";}19 #render-target{20 width:1080px; height:2400px;21 position:relative; overflow:hidden;22 background:var(--bg);23 color:var(--text);24 }25 26 /* Status bar */27 .statusbar{28 height:110px; padding:0 40px;29 display:flex; align-items:center; justify-content:space-between;30 color:#e8edf2;31 font-weight:600; font-size:40px;32 }33 .status-icons{ display:flex; gap:26px; align-items:center; }34 .dot{ width:10px; height:10px; background:#98a0aa; border-radius:50%; display:inline-block;}35 .sig{ width:40px; height:34px; border:3px solid #98a0aa; border-top:none; border-left:none; transform:skewX(-15deg); border-radius:4px; }36 .bat{ width:42px; height:26px; border:3px solid #98a0aa; border-radius:6px; position:relative;}37 .bat:after{ content:""; position:absolute; right:-8px; top:6px; width:6px; height:14px; background:#98a0aa; border-radius:2px;}38 .menu-dots{ width:10px; height:10px; background:#98a0aa; border-radius:50%; box-shadow:0 18px 0 #98a0aa, 0 -18px 0 #98a0aa;}39 40 /* Header title */41 .title{ font-size:78px; font-weight:600; padding:6px 40px 10px; letter-spacing:0.5px; }42 43 /* Cards */44 .card{45 background:var(--card);46 border-radius:40px;47 margin:14px 28px;48 box-shadow:0 4px 0 rgba(0,0,0,0.18) inset;49 }50 .card.compact{ padding:36px 40px 30px; }51 .time-row{ display:flex; align-items:center; justify-content:space-between; }52 .time{ font-size:132px; font-weight:700; letter-spacing:2px; }53 .ampm{ font-size:48px; margin-left:12px; font-weight:700; opacity:0.95; }54 .sub{ color:var(--muted); font-size:44px; margin-top:14px; }55 56 /* Toggle */57 .toggle{58 position:relative; width:190px; height:96px; border-radius:56px;59 background:#214e7d;60 }61 .toggle .knob{62 position:absolute; top:10px; left:12px; width:76px; height:76px; border-radius:50%;63 background:#c6d6ff;64 transition:left .2s;65 }66 .toggle.on .knob{ left:102px; }67 68 /* Expanded card */69 .card.expanded{ padding:36px 40px 44px; position:relative; }70 .row{ display:flex; align-items:center; gap:26px; }71 .row.space{ justify-content:space-between; }72 .label{ font-size:44px; }73 .chip-days{ display:flex; gap:22px; margin:26px 0 10px; }74 .day{75 width:96px; height:96px; border-radius:50%; border:2px solid var(--outline);76 display:flex; align-items:center; justify-content:center;77 color:#cdd3db; font-weight:600; font-size:42px;78 }79 .caret-circle{80 position:absolute; right:26px; top:26px;81 width:64px; height:64px; background:#3a424b; border-radius:50%;82 display:flex; align-items:center; justify-content:center;83 }84 .settings{ margin-top:8px; }85 .setting{86 display:flex; align-items:center; justify-content:space-between;87 padding:26px 6px; border-top:1px solid rgba(255,255,255,0.04);88 font-size:44px;89 }90 .setting:first-child{ border-top:none; }91 .lead{ display:flex; align-items:center; gap:28px; color:#e8edf2;}92 .trail{93 width:58px; height:58px; border-radius:50%; border:2px solid var(--outline);94 display:flex; align-items:center; justify-content:center; color:#cfd7e2; font-size:44px;95 }96 .trail.check{ background:#2e5f93; color:#d9e7ff; border-color:#2e5f93; }97 .muted{ color:var(--muted); }98 99 /* Floating action button */100 .fab{101 position:absolute; left:50%; transform:translateX(-50%);102 bottom:320px; width:240px; height:240px; border-radius:50%;103 background:#b3ceff; color:#1c2a3a;104 display:flex; align-items:center; justify-content:center;105 font-size:130px; font-weight:500;106 box-shadow:0 10px 24px rgba(0,0,0,0.35);107 }108 109 /* Bottom navigation */110 .nav{111 position:absolute; left:0; right:0; bottom:0;112 height:240px; background:#2a3037; padding-top:20px;113 box-shadow:0 -2px 0 rgba(0,0,0,0.24) inset;114 }115 .nav .items{116 height:100%; display:flex; align-items:flex-start; justify-content:space-around;117 padding:28px 16px 0;118 }119 .nav .item{ text-align:center; color:#aeb6c2; font-size:38px; }120 .nav .icon{121 width:96px; height:96px; margin:0 auto 10px; display:flex; align-items:center; justify-content:center;122 }123 .nav .active{124 color:#e8edf2;125 }126 .nav .active .icon{127 background:#3a424b; border-radius:100px; width:124px; height:76px;128 }129 130 /* Gesture bar */131 .gesture{132 position:absolute; left:50%; transform:translateX(-50%);133 bottom:260px; width:360px; height:12px; background:#e5e6eb; border-radius:12px; opacity:0.85;134 }135 136 /* Simple icon styles */137 svg{ display:block; }138 .ico{ fill:none; stroke:#cfd7e2; stroke-width:6; stroke-linecap:round; stroke-linejoin:round; }139 .ico-solid{ fill:#cfd7e2; }140</style>141</head>142<body>143<div id="render-target">144 145 <!-- Status bar -->146 <div class="statusbar">147 <div>11:36</div>148 <div class="status-icons">149 <span class="dot"></span>150 <span class="dot" style="width:18px;height:18px;border-radius:6px;background:#cfd7e2;"></span>151 <span class="dot" style="width:22px;height:22px;border-radius:4px;background:#cfd7e2;"></span>152 <span class="dot"></span>153 <div class="sig"></div>154 <div class="bat"></div>155 </div>156 </div>157 158 <!-- Title -->159 <div class="title">Alarm</div>160 161 <!-- Top (partially visible) previous alarm card -->162 <div class="card compact" style="margin-top:-6px;">163 <div class="time-row">164 <div style="display:flex; align-items:flex-end;">165 <div class="time" style="font-size:124px;">7:00</div>166 <div class="ampm">AM</div>167 </div>168 <div class="toggle on"><div class="knob"></div></div>169 </div>170 <div class="sub">Sun, Sat</div>171 </div>172 173 <!-- Expanded Wakeup card -->174 <div class="card expanded">175 <div class="caret-circle">176 <svg width="28" height="28" viewBox="0 0 24 24">177 <path class="ico" d="M6 14l6-6 6 6"/>178 </svg>179 </div>180 181 <div class="row space" style="margin-bottom:18px;">182 <div class="row">183 <!-- Tag icon -->184 <svg width="54" height="54" viewBox="0 0 24 24">185 <path class="ico" d="M4 7v6l7 7 9-9-7-7H7z"/>186 </svg>187 <div class="label">Wakeup</div>188 </div>189 </div>190 191 <div class="time-row" style="margin:4px 0 6px;">192 <div style="display:flex; align-items:flex-end;">193 <div class="time">8:00</div>194 <div class="ampm">AM</div>195 </div>196 <div class="toggle on"><div class="knob"></div></div>197 </div>198 199 <div class="sub" style="margin-top:10px;">Tomorrow</div>200 201 <!-- Days row -->202 <div class="chip-days">203 <div class="day">S</div>204 <div class="day">M</div>205 <div class="day">T</div>206 <div class="day">W</div>207 <div class="day">T</div>208 <div class="day">F</div>209 <div class="day">S</div>210 </div>211 212 <!-- Settings list -->213 <div class="settings">214 <div class="setting">215 <div class="lead">216 <svg width="54" height="54" viewBox="0 0 24 24">217 <circle class="ico" cx="12" cy="13" r="7"/>218 <path class="ico" d="M12 6V3M12 13l3 2"/>219 </svg>220 <div>Schedule alarm</div>221 </div>222 <div class="trail">+</div>223 </div>224 225 <div class="setting">226 <div class="lead">227 <svg width="54" height="54" viewBox="0 0 24 24">228 <path class="ico" d="M12 5a5 5 0 00-5 5v3l-2 2h14l-2-2v-3a5 5 0 00-5-5z"/>229 <path class="ico" d="M9 20h6"/>230 </svg>231 <div>Full of Wonder</div>232 </div>233 <div class="trail">+</div>234 </div>235 236 <div class="setting">237 <div class="lead">238 <svg width="54" height="54" viewBox="0 0 24 24">239 <rect class="ico" x="8" y="8" width="8" height="8" rx="2"/>240 <path class="ico" d="M5 9v6M19 9v6"/>241 </svg>242 <div>Vibrate</div>243 </div>244 <div class="trail check">245 <svg width="34" height="34" viewBox="0 0 24 24">246 <path class="ico" stroke="#e6f0ff" d="M5 12l4 4 10-10"/>247 </svg>248 </div>249 </div>250 251 <div class="setting">252 <div class="lead">253 <svg width="54" height="54" viewBox="0 0 24 24">254 <circle class="ico" cx="6.5" cy="12" r="2"/>255 <circle class="ico" cx="12" cy="12" r="2"/>256 <circle class="ico" cx="17.5" cy="12" r="2"/>257 </svg>258 <div>Google Assistant Routine</div>259 </div>260 <div class="trail">+</div>261 </div>262 263 <div class="setting">264 <div class="lead muted">265 <svg width="54" height="54" viewBox="0 0 24 24">266 <rect class="ico" x="6" y="3" width="12" height="18" rx="2"/>267 <path class="ico" d="M9 7h6M9 11h6M9 15h6"/>268 </svg>269 <div>Delete</div>270 </div>271 <div style="width:58px;height:58px;"></div>272 </div>273 </div>274 </div>275 276 <!-- FAB -->277 <div class="fab">+</div>278 279 <!-- Gesture bar -->280 <div class="gesture"></div>281 282 <!-- Bottom navigation -->283 <div class="nav">284 <div class="items">285 <div class="item active">286 <div class="icon">287 <svg width="48" height="48" viewBox="0 0 24 24">288 <circle class="ico" cx="12" cy="13" r="6"/>289 <path class="ico" d="M12 7V4M5 8l2 2M19 8l-2 2"/>290 </svg>291 </div>292 <div>Alarm</div>293 </div>294 295 <div class="item">296 <div class="icon">297 <svg width="48" height="48" viewBox="0 0 24 24">298 <circle class="ico" cx="12" cy="12" r="8"/>299 <path class="ico" d="M12 8v5l3 2"/>300 </svg>301 </div>302 <div>Clock</div>303 </div>304 305 <div class="item">306 <div class="icon">307 <svg width="48" height="48" viewBox="0 0 24 24">308 <path class="ico" d="M6 7h12M8 7v10a4 4 0 004 4 4 4 0 004-4V7"/>309 </svg>310 </div>311 <div>Timer</div>312 </div>313 314 <div class="item">315 <div class="icon">316 <svg width="48" height="48" viewBox="0 0 24 24">317 <circle class="ico" cx="12" cy="12" r="9"/>318 <path class="ico" d="M12 7v6l4 2"/>319 </svg>320 </div>321 <div>Stopwatch</div>322 </div>323 324 <div class="item">325 <div class="icon">326 <svg width="48" height="48" viewBox="0 0 24 24">327 <path class="ico" d="M3 12h18M5 12v6h6v-6M17 12v6h2a2 2 0 002-2v-4"/>328 </svg>329 </div>330 <div>Bedtime</div>331 </div>332 </div>333 </div>334 335</div>336</body>337</html>