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 UI Mock</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: "Roboto", Arial, sans-serif; }9 #render-target {10 width: 1080px; height: 2400px; position: relative; overflow: hidden;11 background: #2D3035; color: #E7E9EC;12 }13 14 /* Status bar */15 .status-bar {16 height: 110px; padding: 0 36px; display: flex; align-items: center; justify-content: space-between;17 color: #E7E9EC; font-size: 34px; letter-spacing: 0.5px;18 }19 .sb-left { display: flex; align-items: center; gap: 24px; }20 .sb-center { display: flex; align-items: center; gap: 22px; opacity: 0.9; }21 .sb-center .dot { width: 10px; height: 10px; background:#C7CCD1; border-radius:50%; }22 .sb-icon { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; }23 .sb-right { display: flex; align-items: center; gap: 22px; }24 25 /* Header */26 .header { padding: 8px 36px 24px; display: flex; align-items: center; justify-content: space-between; }27 .title { font-size: 72px; font-weight: 500; color: #EEF1F4; }28 .menu { width: 84px; height: 84px; display: flex; align-items: center; justify-content: center; }29 .menu svg circle { fill: #AEB4BB; }30 31 /* Cards */32 .card {33 width: 1008px; margin: 20px auto; background: #1F2227; border-radius: 42px;34 box-shadow: 0 8px 18px rgba(0,0,0,0.35);35 padding: 40px;36 }37 .card .top-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; }38 .label { display: flex; align-items: center; gap: 18px; color: #C3C9CE; font-size: 36px; text-transform: none; }39 .arrow-pill {40 width: 68px; height: 68px; border-radius: 34px; background: #3A3F45; display:flex; align-items:center; justify-content:center;41 opacity: 0.9;42 }43 44 .time-row { display: flex; align-items: flex-end; justify-content: space-between; margin: 10px 0 26px; }45 .time-left { display: flex; align-items: flex-end; gap: 14px; }46 .time-big { font-size: 172px; font-weight: 700; letter-spacing: 2px; color: #F2F5F7; line-height: 160px; }47 .ampm { font-size: 44px; font-weight: 600; margin-bottom: 18px; color: #D0D5DA; }48 49 /* Switch */50 .switch { width: 172px; height: 82px; border-radius: 41px; position: relative; }51 .switch.on { background: #244E83; }52 .switch.off { background: #465058; }53 .switch .knob {54 width: 74px; height: 74px; background: #C9D7F9; border-radius: 37px; position: absolute; top: 4px; right: 6px;55 box-shadow: inset 0 0 0 3px rgba(255,255,255,0.2);56 }57 .switch.off .knob { left: 6px; right: auto; background:#99A2AA; }58 59 .secondary { font-size: 40px; color: #B4BBC1; margin-bottom: 22px; }60 61 /* Days row */62 .days { display: flex; gap: 22px; margin-bottom: 28px; }63 .day {64 width: 86px; height: 86px; border-radius: 43px; border: 2px solid #5B6268;65 color: #C6CCD1; display: flex; align-items: center; justify-content: center; font-size: 36px;66 }67 68 /* Settings list inside card */69 .setting { display: flex; align-items: center; justify-content: space-between; padding: 18px 0; }70 .setting .left { display: flex; align-items: center; gap: 22px; font-size: 40px; color: #E7E9EC; }71 .setting .right { display: flex; align-items: center; gap: 18px; }72 .icon-box { width: 56px; height: 56px; display:flex; align-items:center; justify-content:center; color:#D7DCE1; }73 .pill-circle {74 width: 60px; height: 60px; border-radius: 30px; background: #AFC8FF; display:flex; align-items:center; justify-content:center; color:#1D2A46;75 }76 .outline-plus {77 width: 58px; height: 58px; border-radius: 29px; border: 3px solid #AEB4BB; display:flex; align-items:center; justify-content:center; color:#AEB4BB; font-size: 40px;78 }79 80 /* Collapsed card specifics */81 .small-label { font-size: 32px; color: #B8BFC5; text-transform: lowercase; }82 .small-secondary { font-size: 36px; color: #B8BFC5; margin-top: 20px; }83 84 /* Floating action button */85 .fab {86 position: absolute; width: 220px; height: 220px; border-radius: 110px; background: #B9D0FF; color:#123A6A;87 display:flex; align-items:center; justify-content:center; font-size: 96px; font-weight: 500;88 left: 430px; top: 1500px; box-shadow: 0 14px 30px rgba(0,0,0,0.35);89 }90 91 /* Bottom navigation */92 .bottom-nav {93 position: absolute; left: 0; bottom: 0; width: 1080px; height: 250px; background: #373B41; border-top-left-radius: 24px; border-top-right-radius: 24px;94 padding-top: 30px;95 }96 .nav-items { display:flex; justify-content: space-around; align-items: flex-start; padding: 0 28px; }97 .nav-item { display:flex; flex-direction: column; align-items:center; gap: 14px; color:#C9CFD5; }98 .nav-item .label { font-size: 36px; }99 .nav-icon { width: 84px; height: 84px; display:flex; align-items:center; justify-content:center; }100 .selected .nav-icon { background:#465267; border-radius: 42px; }101 .selected .label { color:#E8EDF1; font-weight: 600; }102 103 /* Gesture bar */104 .gesture {105 position: absolute; left: 50%; transform: translateX(-50%); bottom: 20px;106 width: 520px; height: 16px; background: #ECEDEF; border-radius: 8px; opacity: 0.85;107 }108 109 /* SVG helpers */110 svg { display: block; }111</style>112</head>113<body>114<div id="render-target">115 116 <!-- Status Bar -->117 <div class="status-bar">118 <div class="sb-left">119 <div>11:28</div>120 </div>121 <div class="sb-center">122 <div class="sb-icon">123 <!-- bell/simple icon -->124 <svg width="36" height="36" viewBox="0 0 36 36">125 <path d="M18 32a4 4 0 0 0 4-4H14a4 4 0 0 0 4 4zm-10-7h20c-3-3-5-6-5-11a7 7 0 1 0-14 0c0 5-2 8-5 11z" fill="#C7CCD1"/>126 </svg>127 </div>128 <div class="sb-icon">129 <!-- headphones -->130 <svg width="36" height="36" viewBox="0 0 36 36">131 <path d="M6 22v6h6v-8H8a10 10 0 0 1 20 0h-4v8h6v-6a14 14 0 0 0-28 0z" fill="#C7CCD1"/>132 </svg>133 </div>134 <div class="sb-icon">135 <!-- square -->136 <svg width="36" height="36" viewBox="0 0 36 36">137 <rect x="9" y="9" width="18" height="18" rx="3" fill="#C7CCD1"/>138 </svg>139 </div>140 <div class="sb-icon">141 <!-- text T -->142 <svg width="36" height="36" viewBox="0 0 36 36">143 <path d="M8 10h20v4h-8v12h-4V14H8z" fill="#C7CCD1"/>144 </svg>145 </div>146 <div class="dot"></div>147 </div>148 <div class="sb-right">149 <div class="sb-icon">150 <!-- wifi -->151 <svg width="34" height="34" viewBox="0 0 34 34">152 <path d="M5 13c7-7 17-7 24 0l-3 3c-5-5-13-5-18 0l-3-3zm6 6c4-4 8-4 12 0l-3 3c-2-2-4-2-6 0l-3-3zm6 9l-4-4 4-4 4 4-4 4z" fill="#E7E9EC"/>153 </svg>154 </div>155 <div class="sb-icon">156 <!-- battery -->157 <svg width="40" height="40" viewBox="0 0 40 40">158 <rect x="6" y="12" width="24" height="16" rx="3" fill="#E7E9EC"/>159 <rect x="31" y="16" width="3" height="8" rx="1" fill="#E7E9EC"/>160 <rect x="8" y="14" width="18" height="12" rx="2" fill="#2D3035"/>161 </svg>162 </div>163 </div>164 </div>165 166 <!-- Header -->167 <div class="header">168 <div class="title">Alarm</div>169 <div class="menu">170 <svg width="28" height="76" viewBox="0 0 28 76">171 <circle cx="14" cy="12" r="6"/>172 <circle cx="14" cy="38" r="6"/>173 <circle cx="14" cy="64" r="6"/>174 </svg>175 </div>176 </div>177 178 <!-- Card 1: Expanded -->179 <div class="card">180 <div class="top-row">181 <div class="label">182 <svg width="44" height="44" viewBox="0 0 44 44">183 <path d="M8 10h18l8 8-18 18-8-8V10zm6 6v10l6 6 12-12-6-6H14z" fill="#C3C9CE"/>184 </svg>185 <span>Wakeup</span>186 </div>187 <div class="arrow-pill">188 <svg width="30" height="30" viewBox="0 0 30 30">189 <path d="M8 18l7-7 7 7" stroke="#D6DBE0" stroke-width="3" fill="none" stroke-linecap="round"/>190 </svg>191 </div>192 </div>193 194 <div class="time-row">195 <div class="time-left">196 <div class="time-big">6:10</div>197 <div class="ampm">AM</div>198 </div>199 <div class="switch on"><div class="knob"></div></div>200 </div>201 202 <div class="secondary">Tomorrow</div>203 204 <div class="days">205 <div class="day">S</div>206 <div class="day">M</div>207 <div class="day">T</div>208 <div class="day">W</div>209 <div class="day">T</div>210 <div class="day">F</div>211 <div class="day">S</div>212 </div>213 214 <div class="setting">215 <div class="left">216 <div class="icon-box">217 <!-- calendar + clock -->218 <svg width="40" height="40" viewBox="0 0 40 40">219 <rect x="6" y="10" width="20" height="16" rx="2" fill="#D1D6DB"/>220 <rect x="6" y="8" width="20" height="4" fill="#D1D6DB"/>221 <circle cx="30" cy="24" r="8" fill="#D1D6DB"/>222 <path d="M30 19v6l4 2" stroke="#1F2227" stroke-width="2" fill="none" stroke-linecap="round"/>223 </svg>224 </div>225 <span>Schedule alarm</span>226 </div>227 <div class="right"><div class="outline-plus">+</div></div>228 </div>229 230 <div class="setting">231 <div class="left">232 <div class="icon-box">233 <!-- bell -->234 <svg width="40" height="40" viewBox="0 0 40 40">235 <path d="M20 36a4 4 0 0 0 4-4h-8a4 4 0 0 0 4 4zm-12-7h24c-3-3-6-7-6-12a8 8 0 1 0-16 0c0 5-3 9-6 12z" fill="#D1D6DB"/>236 </svg>237 </div>238 <span>Full of Wonder</span>239 </div>240 <div class="right">241 <div class="pill-circle">242 <svg width="34" height="34" viewBox="0 0 34 34">243 <path d="M8 18l5 5 13-13" stroke="#123A6A" stroke-width="4" fill="none" stroke-linecap="round"/>244 </svg>245 </div>246 </div>247 </div>248 249 <div class="setting">250 <div class="left">251 <div class="icon-box">252 <!-- vibration -->253 <svg width="40" height="40" viewBox="0 0 40 40">254 <rect x="16" y="10" width="8" height="20" rx="2" fill="#D1D6DB"/>255 <path d="M8 12l-4 8 4 8M36 12l4 8-4 8" stroke="#D1D6DB" stroke-width="2" fill="none" stroke-linecap="round"/>256 </svg>257 </div>258 <span>Vibrate</span>259 </div>260 <div class="right"></div>261 </div>262 263 <div class="setting">264 <div class="left">265 <div class="icon-box">266 <!-- Assistant dots -->267 <svg width="40" height="40" viewBox="0 0 40 40">268 <circle cx="12" cy="22" r="5" fill="#D1D6DB"/>269 <circle cx="20" cy="14" r="4" fill="#D1D6DB"/>270 <circle cx="24" cy="24" r="3" fill="#D1D6DB"/>271 <circle cx="30" cy="18" r="2.5" fill="#D1D6DB"/>272 </svg>273 </div>274 <span>Google Assistant Routine</span>275 </div>276 <div class="right"><div class="outline-plus">+</div></div>277 </div>278 279 <div class="setting">280 <div class="left">281 <div class="icon-box">282 <!-- delete -->283 <svg width="40" height="40" viewBox="0 0 40 40">284 <rect x="12" y="16" width="16" height="18" rx="2" fill="#D1D6DB"/>285 <rect x="10" y="12" width="20" height="4" rx="2" fill="#D1D6DB"/>286 <rect x="18" y="20" width="4" height="10" fill="#1F2227"/>287 </svg>288 </div>289 <span>Delete</span>290 </div>291 <div class="right"></div>292 </div>293 </div>294 295 <!-- Card 2: Collapsed -->296 <div class="card" style="padding-bottom: 40px;">297 <div class="top-row" style="margin-bottom: 0;">298 <div class="small-label">wakeup</div>299 <div class="arrow-pill">300 <svg width="30" height="30" viewBox="0 0 30 30">301 <path d="M8 12l7 7 7-7" stroke="#D6DBE0" stroke-width="3" fill="none" stroke-linecap="round"/>302 </svg>303 </div>304 </div>305 306 <div class="time-row" style="margin-top: 6px;">307 <div class="time-left">308 <div class="time-big">7:00</div>309 <div class="ampm">AM</div>310 </div>311 <div class="switch on"><div class="knob"></div></div>312 </div>313 314 <div class="small-secondary">Sun, Sat</div>315 </div>316 317 <!-- Floating Add Button -->318 <div class="fab">+</div>319 320 <!-- Bottom Navigation -->321 <div class="bottom-nav">322 <div class="nav-items">323 <div class="nav-item selected">324 <div class="nav-icon">325 <svg width="44" height="44" viewBox="0 0 44 44">326 <circle cx="22" cy="22" r="18" stroke="#E8EDF1" stroke-width="3" fill="none"/>327 <path d="M22 12v12l8 4" stroke="#E8EDF1" stroke-width="3" fill="none" stroke-linecap="round"/>328 </svg>329 </div>330 <div class="label">Alarm</div>331 </div>332 <div class="nav-item">333 <div class="nav-icon">334 <svg width="44" height="44" viewBox="0 0 44 44">335 <circle cx="22" cy="22" r="18" stroke="#C9CFD5" stroke-width="3" fill="none"/>336 <line x1="22" y1="6" x2="22" y2="10" stroke="#C9CFD5" stroke-width="3"/>337 <line x1="22" y1="34" x2="22" y2="38" stroke="#C9CFD5" stroke-width="3"/>338 </svg>339 </div>340 <div class="label">Clock</div>341 </div>342 <div class="nav-item">343 <div class="nav-icon">344 <svg width="44" height="44" viewBox="0 0 44 44">345 <path d="M12 32l10-20 10 20H12z" fill="none" stroke="#C9CFD5" stroke-width="3"/>346 </svg>347 </div>348 <div class="label">Timer</div>349 </div>350 <div class="nav-item">351 <div class="nav-icon">352 <svg width="44" height="44" viewBox="0 0 44 44">353 <circle cx="22" cy="22" r="18" stroke="#C9CFD5" stroke-width="3" fill="none"/>354 <rect x="20" y="14" width="4" height="16" fill="#C9CFD5"/>355 </svg>356 </div>357 <div class="label">Stopwatch</div>358 </div>359 <div class="nav-item">360 <div class="nav-icon">361 <svg width="44" height="44" viewBox="0 0 44 44">362 <rect x="10" y="20" width="24" height="12" rx="2" stroke="#C9CFD5" stroke-width="3" fill="none"/>363 <rect x="10" y="16" width="12" height="4" fill="#C9CFD5"/>364 </svg>365 </div>366 <div class="label">Bedtime</div>367 </div>368 </div>369 </div>370 371 <div class="gesture"></div>372</div>373</body>374</html>