GD-ML/AndroidCode
13.4k
1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Alarm UI Mock</title>5<meta name="viewport" content="width=1080, initial-scale=1.0">6<style>7 body { margin: 0; padding: 0; background: transparent; font-family: "Segoe UI", Roboto, Arial, sans-serif; }8 #render-target {9 width: 1080px; height: 2400px; position: relative; overflow: hidden;10 background: #1d2227; color: #E8EAED;11 }12 13 /* Top app bar and status */14 .status-bar {15 height: 82px;16 padding: 0 32px;17 display: flex; align-items: center; justify-content: space-between;18 color: #cfd3d8; font-size: 28px;19 background: #22272c;20 }21 .status-icons span {22 display: inline-block; width: 18px; height: 18px; margin-left: 16px;23 background: #cfd3d8; border-radius: 4px; opacity: .85;24 }25 .appbar {26 height: 170px; background: #22272c; display: flex; align-items: flex-end;27 padding: 0 40px 20px; box-sizing: border-box;28 border-bottom: 1px solid #2b3138;29 }30 .title { font-size: 76px; font-weight: 700; letter-spacing: .5px; }31 .menu-dots {32 position: absolute; right: 32px; top: 140px; width: 44px; height: 44px;33 }34 .menu-dots:before, .menu-dots:after, .menu-dots i{35 content:""; display:block; width:8px; height:8px; background:#cfd3d8; border-radius:50%; margin:6px auto;36 }37 38 /* Content area */39 .content { padding: 28px; }40 .alarm-card {41 background: #24292f; border: 1px solid #2f353d; border-radius: 34px;42 margin: 22px 8px; padding: 34px; position: relative;43 box-shadow: inset 0 0 0 1px rgba(255,255,255,0.02);44 }45 .alarm-time { font-size: 120px; font-weight: 800; letter-spacing: 1px; }46 .alarm-time .ampm { font-size: 44px; font-weight: 700; margin-left: 10px; color:#cfd3d8; }47 .subtle { color:#a9b0b8; font-size: 38px; margin-top: 8px; }48 49 /* Toggle */50 .switch {51 position: absolute; right: 34px; top: 44px;52 width: 190px; height: 92px; border-radius: 60px; background:#2f3540;53 }54 .switch span {55 position:absolute; top: 8px; left: 10px; width: 76px; height: 76px; border-radius: 50%;56 background:#8e95a2; transition: all .2s ease;57 }58 .switch.on { background:#3c557c; }59 .switch.on span { left: 102px; background:#cfd6ff; }60 61 /* Expanded card elements */62 .top-row { display:flex; align-items:center; justify-content: space-between; margin-bottom: 8px; }63 .label-chip { display:flex; align-items:center; color:#cfd3d8; font-size: 40px; }64 .label-chip svg { width:44px; height:44px; margin-right:16px; opacity:.85; }65 .collapse {66 width: 60px; height: 60px; border-radius: 50%; background:#2d333a;67 display:flex; align-items:center; justify-content:center;68 }69 .weekday { margin-top: 8px; font-size: 42px; color:#cfd3d8; }70 71 .days { display:flex; gap: 26px; margin: 28px 0 8px; }72 .day {73 width: 90px; height: 90px; border-radius: 50%;74 border: 2px solid #3a414a; display:flex; align-items:center; justify-content:center;75 color:#c7cbd1; font-weight:700; font-size: 40px;76 }77 .day.active { background:#a8c1ff; color:#14203a; border-color: transparent; }78 .day.dim { opacity:.45; }79 80 .setting {81 display:flex; align-items: center; justify-content: space-between;82 padding: 26px 6px; border-top: 1px solid #2d333a; font-size: 42px;83 }84 .setting:first-of-type { border-top: 0; }85 .setting .left { display:flex; align-items:center; gap: 22px; color:#e6eaef; }86 .icon {87 width: 56px; height: 56px; border-radius: 14px; background:#303741;88 display:flex; align-items:center; justify-content:center;89 }90 .suffix {91 width: 66px; height: 66px; border-radius: 50%;92 display:flex; align-items:center; justify-content:center;93 background:#2e3640; color:#cfd6ff; font-weight:700;94 }95 .suffix.plus { border: 2px solid #5069a5; }96 .suffix.check { background:#3d557f; }97 .suffix.check:after {98 content:""; width: 24px; height: 12px; border-left: 4px solid #dce4ff; border-bottom:4px solid #dce4ff;99 transform: rotate(-45deg);100 }101 .suffix.plus:after {102 content:""; width: 28px; height: 28px; border-left: 4px solid #9fb2ff; border-top: 4px solid #9fb2ff;103 transform: translateY(1px) rotate(90deg);104 }105 .trash { width: 22px; height: 22px; background: #e6eaef; }106 107 /* Floating add button */108 .fab {109 position: absolute; left: 50%; transform: translateX(-50%);110 bottom: 310px; width: 220px; height: 220px; border-radius: 50%;111 background: #b2c7ff; color:#0f1c3d; display:flex; align-items:center; justify-content:center;112 box-shadow: 0 8px 24px rgba(0,0,0,.4);113 font-size: 120px; font-weight: 500;114 }115 116 /* Bottom navigation */117 .bottom-nav {118 position:absolute; left:0; right:0; bottom:0; height: 180px;119 background:#1f252b; border-top:1px solid #2b3138; display:flex; padding: 16px 20px; box-sizing: border-box;120 }121 .tab { flex:1; color:#c1c7ce; display:flex; align-items:center; justify-content:center; flex-direction:column; gap: 12px; }122 .tab .tab-icon {123 width: 60px; height: 60px; display:flex; align-items:center; justify-content:center; color:#c1c7ce;124 }125 .tab.active {126 color:#eaf0ff;127 }128 .tab.active .highlight {129 background:#2e3640; border-radius: 28px; padding: 12px 28px; display:flex; align-items:center; gap: 10px;130 }131 .tab-label { font-size: 34px; }132 /* Small helper svgs */133 svg { fill: currentColor; }134</style>135</head>136<body>137<div id="render-target">138 139 <!-- Top area -->140 <div class="status-bar">141 <div>11:08</div>142 <div class="status-icons">143 <span></span><span></span><span></span><span></span><span></span>144 </div>145 </div>146 <div class="appbar">147 <div class="title">Alarm</div>148 <div class="menu-dots"><i></i></div>149 </div>150 151 <div class="content">152 153 <!-- Collapsed alarm -->154 <div class="alarm-card">155 <div class="alarm-time" style="opacity:.9;">11:00 <span class="ampm">AM</span></div>156 <div class="subtle">Mon, Tue</div>157 <div class="switch"><span></span></div>158 </div>159 160 <!-- Expanded alarm -->161 <div class="alarm-card">162 <div class="top-row">163 <div class="label-chip">164 <svg viewBox="0 0 24 24">165 <path d="M3 7a2 2 0 0 1 2-2h8l8 7-8 7H5a2 2 0 0 1-2-2z"></path>166 </svg>167 meeting168 </div>169 <div class="collapse">170 <svg viewBox="0 0 24 24" width="26" height="26">171 <path d="M7 14l5-5 5 5z"></path>172 </svg>173 </div>174 </div>175 176 <div class="alarm-time">12:30 <span class="ampm">PM</span></div>177 <div class="weekday">Saturday</div>178 179 <div style="position:absolute; right:34px; top: 210px;">180 <div class="switch on"><span></span></div>181 </div>182 183 <div class="days">184 <div class="day dim">S</div>185 <div class="day">M</div>186 <div class="day">T</div>187 <div class="day">W</div>188 <div class="day">T</div>189 <div class="day">F</div>190 <div class="day active">S</div>191 </div>192 193 <div class="setting">194 <div class="left">195 <div class="icon">196 <svg viewBox="0 0 24 24" width="30" height="30">197 <path d="M12 4a7 7 0 1 1 0 14 7 7 0 0 1 0-14zm-5-1L5 1 3 3l2 2 2-2zM19 1l2 2-2 2-2-2 2-2zM9 9h2v6H9zm4 0h2v6h-2z"></path>198 </svg>199 </div>200 <div>Pause alarm</div>201 </div>202 <div class="suffix plus"></div>203 </div>204 205 <div class="setting">206 <div class="left">207 <div class="icon">208 <svg viewBox="0 0 24 24" width="30" height="30">209 <path d="M12 2a6 6 0 0 1 6 6v5l2 3H4l2-3V8a6 6 0 0 1 6-6zm-1 18h2v2h-2z"></path>210 </svg>211 </div>212 <div>Default (Bright Morning)</div>213 </div>214 <div style="width:10px;"></div>215 </div>216 217 <div class="setting">218 <div class="left">219 <div class="icon">220 <svg viewBox="0 0 24 24" width="30" height="30">221 <path d="M8 5l-3 3 3 3M16 5l3 3-3 3M8 13l-3 3 3 3M16 13l3 3-3 3"></path>222 </svg>223 </div>224 <div>Vibrate</div>225 </div>226 <div class="suffix check"></div>227 </div>228 229 <div class="setting">230 <div class="left">231 <div class="icon">232 <svg viewBox="0 0 24 24" width="30" height="30">233 <circle cx="8" cy="9" r="3"></circle>234 <circle cx="14" cy="6" r="2"></circle>235 <circle cx="16" cy="14" r="3"></circle>236 <circle cx="6" cy="16" r="2"></circle>237 </svg>238 </div>239 <div>Google Assistant Routine</div>240 </div>241 <div class="suffix plus"></div>242 </div>243 244 <div class="setting">245 <div class="left">246 <div class="icon">247 <svg viewBox="0 0 24 24" width="30" height="30">248 <path d="M7 6h10l-1 14H8L7 6zm1-3h8v2H8z"></path>249 </svg>250 </div>251 <div>Delete</div>252 </div>253 <div style="width:10px;"></div>254 </div>255 </div>256 257 </div>258 259 <!-- Floating Add Button -->260 <div class="fab">+</div>261 262 <!-- Bottom Navigation -->263 <div class="bottom-nav">264 <div class="tab active">265 <div class="highlight">266 <div class="tab-icon">267 <svg viewBox="0 0 24 24" width="36" height="36">268 <path d="M7 2l2 2h6l2-2 2 2-2 2H7L5 4 7 2zm5 4a7 7 0 1 1 0 14 7 7 0 0 1 0-14z"></path>269 </svg>270 </div>271 </div>272 <div class="tab-label">Alarm</div>273 </div>274 <div class="tab">275 <div class="tab-icon">276 <svg viewBox="0 0 24 24" width="36" height="36">277 <path d="M12 7a5 5 0 1 1 0 10 5 5 0 0 1 0-10zm0-5h1v3h-1zM4 11h3v1H4zm13 0h3v1h-3z"></path>278 </svg>279 </div>280 <div class="tab-label">Clock</div>281 </div>282 <div class="tab">283 <div class="tab-icon">284 <svg viewBox="0 0 24 24" width="36" height="36">285 <path d="M4 7h16v3H4zm0 7h16v3H4z"></path>286 </svg>287 </div>288 <div class="tab-label">Timer</div>289 </div>290 <div class="tab">291 <div class="tab-icon">292 <svg viewBox="0 0 24 24" width="36" height="36">293 <path d="M12 3a9 9 0 1 1 0 18 9 9 0 0 1 0-18zm-1 4h2v6h5v2h-7z"></path>294 </svg>295 </div>296 <div class="tab-label">Stopwatch</div>297 </div>298 <div class="tab">299 <div class="tab-icon">300 <svg viewBox="0 0 24 24" width="36" height="36">301 <path d="M3 12h18v6H3zM4 9h4l2 3H4z"></path>302 </svg>303 </div>304 <div class="tab-label">Bedtime</div>305 </div>306 </div>307 308</div>309</body>310</html>