GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html lang="en">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: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; }9 #render-target {10 width: 1080px; height: 2400px;11 position: relative; overflow: hidden;12 background: #1f2429; /* dark app background */13 border-radius: 28px; box-shadow: 0 20px 40px rgba(0,0,0,0.45);14 color: #e7eaee;15 }16 17 .statusbar {18 height: 140px;19 padding: 34px 40px 0 40px;20 color: #e7eaee;21 font-weight: 600;22 font-size: 44px;23 display: flex;24 align-items: center;25 justify-content: space-between;26 opacity: 0.9;27 }28 .status-icons { display: flex; align-items: center; gap: 26px; }29 .dot { width: 10px; height: 10px; background: #a9afb7; border-radius: 50%; display: inline-block; }30 31 .page-title {32 font-size: 72px;33 font-weight: 600;34 padding: 26px 40px 18px 40px;35 color: #e7eaee;36 }37 38 .card {39 margin: 24px 28px;40 background: #262b31;41 border-radius: 30px;42 box-shadow: 0 8px 20px rgba(0,0,0,0.35);43 padding: 36px;44 position: relative;45 }46 .card.large { height: 1040px; }47 .card.compact { height: 520px; }48 49 .card-header {50 display: flex; align-items: center; justify-content: space-between;51 margin-bottom: 12px;52 }53 .label-row { display: flex; align-items: center; gap: 16px; color: #cbd1d8; font-size: 40px; }54 .corner-btn {55 width: 68px; height: 68px; border-radius: 50%;56 background: #3b4046; display: flex; align-items: center; justify-content: center;57 }58 .time-row {59 display: flex; align-items: baseline; justify-content: flex-start; gap: 16px;60 margin-top: 10px; margin-bottom: 20px;61 }62 .time-row .time { font-size: 160px; font-weight: 700; letter-spacing: -4px; }63 .time-row .ampm { font-size: 48px; font-weight: 700; opacity: 0.9; }64 65 .weekday-label { margin-top: 8px; font-size: 42px; color: #cbd1d8; }66 .day-toggle-area { position: absolute; right: 38px; top: 260px; }67 .toggle {68 width: 168px; height: 84px; background: #224e7c;69 border-radius: 84px; position: relative;70 }71 .toggle::after {72 content: ""; width: 74px; height: 74px; background: #bcd1ff;73 border-radius: 50%; position: absolute; right: 6px; top: 5px;74 box-shadow: 0 3px 6px rgba(0,0,0,0.25);75 }76 77 .days {78 display: flex; gap: 30px; margin: 22px 0 28px 0;79 }80 .day-chip {81 width: 92px; height: 92px; border-radius: 50%;82 border: 2px solid #50565d; color: #c9cfd6;83 display: flex; align-items: center; justify-content: center;84 font-size: 40px; font-weight: 600;85 }86 .day-chip.active {87 background: #aecdff; color: #183b61; border-color: transparent;88 }89 90 .option {91 display: flex; align-items: center; justify-content: space-between;92 padding: 22px 0; border-bottom: 1px solid rgba(255,255,255,0.06);93 font-size: 44px; color: #e7eaee;94 }95 .option:last-child { border-bottom: none; }96 .option .left { display: flex; align-items: center; gap: 24px; }97 .trailing {98 width: 68px; height: 68px; border-radius: 50%; border: 3px solid #cbd1d8;99 display: flex; align-items: center; justify-content: center; color: #cbd1d8;100 }101 .trailing.filled { border: none; background: #aecdff; color: #1a3c61; }102 103 .compact .time-row .time { font-size: 140px; }104 .compact .time-row .ampm { font-size: 46px; }105 .compact .weekday-label { margin-top: 8px; font-size: 40px; }106 107 .big-add {108 position: absolute; left: 50%; transform: translateX(-50%);109 bottom: 160px; width: 260px; height: 260px; border-radius: 50%;110 background: #aecdff; display: flex; align-items: center; justify-content: center;111 color: #163a60; font-size: 100px; font-weight: 700;112 box-shadow: 0 10px 20px rgba(0,0,0,0.35);113 }114 .toggle.small { width: 160px; height: 80px; }115 .toggle.small::after { width: 70px; height: 70px; top: 5px; right: 5px; }116 117 .snackbar {118 position: absolute;119 left: 34px; top: 1260px; width: 1012px; height: 120px;120 background: #4a4f55; color: #e9edf2;121 border-radius: 60px; display: flex; align-items: center;122 padding: 0 36px; font-size: 40px; box-shadow: 0 10px 24px rgba(0,0,0,0.35);123 }124 125 .bottom-nav {126 position: absolute; left: 0; bottom: 0;127 width: 100%; height: 240px; background: #242a30;128 box-shadow: 0 -8px 20px rgba(0,0,0,0.35);129 }130 .nav-content {131 height: 100%; display: flex; align-items: center; justify-content: space-around;132 padding: 0 24px;133 }134 .nav-item {135 width: 180px; height: 160px; display: flex; flex-direction: column;136 align-items: center; justify-content: center; gap: 16px; color: #cbd1d8;137 position: relative;138 }139 .nav-item .pill {140 position: absolute; top: 16px; width: 168px; height: 88px;141 background: #36414b; border-radius: 44px; z-index: 0;142 }143 .nav-item.active { color: #e7eaee; }144 .nav-item.active .label { font-weight: 600; }145 .nav-item .label { font-size: 34px; }146 .gesture {147 position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%);148 width: 420px; height: 12px; background: #e7eaee; border-radius: 8px; opacity: 0.85;149 }150 151 /* Simple icon sizing helpers */152 .icon { width: 46px; height: 46px; }153 .icon-md { width: 58px; height: 58px; }154 .icon-lg { width: 72px; height: 72px; }155 svg { display: block; }156</style>157</head>158<body>159<div id="render-target">160 161 <!-- Status bar -->162 <div class="statusbar">163 <div>11:30</div>164 <div class="status-icons">165 <!-- Simple status icons -->166 <svg class="icon" viewBox="0 0 24 24" fill="none"><circle cx="12" cy="12" r="9" stroke="#cbd1d8" stroke-width="2"/><path d="M12 7v5l4 2" stroke="#cbd1d8" stroke-width="2" stroke-linecap="round"/></svg>167 <svg class="icon" viewBox="0 0 24 24" fill="none"><rect x="3" y="5" width="18" height="14" rx="2" stroke="#cbd1d8" stroke-width="2"/><rect x="8" y="9" width="8" height="6" fill="#cbd1d8"/></svg>168 <svg class="icon" viewBox="0 0 24 24" fill="none"><rect x="6" y="4" width="12" height="16" rx="2" stroke="#cbd1d8" stroke-width="2"/></svg>169 <span class="dot"></span>170 <svg class="icon" viewBox="0 0 24 24" fill="none"><path d="M3 10h8l2-3 2 6h6" stroke="#cbd1d8" stroke-width="2" stroke-linecap="round"/></svg>171 <svg class="icon" viewBox="0 0 24 24" fill="none"><path d="M20 6v12" stroke="#cbd1d8" stroke-width="2"/><path d="M3 18l7-12v12l7-12" stroke="#cbd1d8" stroke-width="2"/></svg>172 </div>173 </div>174 175 <div class="page-title">Alarm</div>176 177 <!-- First alarm card -->178 <div class="card large">179 <div class="card-header">180 <div class="label-row">181 <!-- Label icon -->182 <svg class="icon-md" viewBox="0 0 24 24" fill="none">183 <path d="M3 6a2 2 0 012-2h9l4 4v8a2 2 0 01-2 2H5a2 2 0 01-2-2V6z" stroke="#cbd1d8" stroke-width="2"/>184 <circle cx="8" cy="12" r="2" fill="#cbd1d8"/>185 </svg>186 <span>Wakeup</span>187 </div>188 <div class="corner-btn">189 <svg width="24" height="24" viewBox="0 0 24 24">190 <path d="M6 14l6-6 6 6" stroke="#cbd1d8" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>191 </svg>192 </div>193 </div>194 195 <div class="time-row">196 <div class="time">6:10</div>197 <div class="ampm">AM</div>198 </div>199 200 <div class="weekday-label">Monday</div>201 202 <div class="day-toggle-area">203 <div class="toggle"></div>204 </div>205 206 <div class="days">207 <div class="day-chip">S</div>208 <div class="day-chip active">M</div>209 <div class="day-chip">T</div>210 <div class="day-chip">W</div>211 <div class="day-chip">T</div>212 <div class="day-chip">F</div>213 <div class="day-chip">S</div>214 </div>215 216 <!-- Options list -->217 <div class="option">218 <div class="left">219 <!-- Pause icon -->220 <svg class="icon-lg" viewBox="0 0 24 24" fill="none">221 <circle cx="12" cy="12" r="9" stroke="#cbd1d8" stroke-width="2"/>222 <rect x="9" y="8" width="2.4" height="8" fill="#cbd1d8"/>223 <rect x="12.6" y="8" width="2.4" height="8" fill="#cbd1d8"/>224 </svg>225 <span>Pause alarm</span>226 </div>227 <div class="trailing">+</div>228 </div>229 230 <div class="option">231 <div class="left">232 <!-- Bell icon -->233 <svg class="icon-lg" viewBox="0 0 24 24" fill="none">234 <path d="M12 4c-3 0-5 2-5 5v3l-2 3h14l-2-3V9c0-3-2-5-5-5z" stroke="#cbd1d8" stroke-width="2" fill="none"/>235 <circle cx="12" cy="19" r="2" fill="#cbd1d8"/>236 </svg>237 <span>Full of Wonder</span>238 </div>239 <div class="trailing filled">240 <svg width="28" height="28" viewBox="0 0 24 24">241 <path d="M20 6l-11 11-5-5" stroke="#173c61" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"/>242 </svg>243 </div>244 </div>245 246 <div class="option">247 <div class="left">248 <!-- Vibrate icon -->249 <svg class="icon-lg" viewBox="0 0 24 24" fill="none">250 <rect x="9" y="6" width="6" height="12" rx="2" stroke="#cbd1d8" stroke-width="2"/>251 <path d="M3 8l2 2M3 14l2-2M21 8l-2 2M21 14l-2-2" stroke="#cbd1d8" stroke-width="2" stroke-linecap="round"/>252 </svg>253 <span>Vibrate</span>254 </div>255 <div class="trailing filled">256 <svg width="28" height="28" viewBox="0 0 24 24">257 <path d="M20 6l-11 11-5-5" stroke="#173c61" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"/>258 </svg>259 </div>260 </div>261 262 <div class="option">263 <div class="left">264 <!-- Assistant dots -->265 <svg class="icon-lg" viewBox="0 0 24 24" fill="none">266 <circle cx="7" cy="14" r="2.4" fill="#cbd1d8"/>267 <circle cx="4" cy="10" r="1.8" fill="#cbd1d8"/>268 <circle cx="12" cy="10" r="3" fill="#cbd1d8"/>269 <circle cx="18" cy="14" r="2.2" fill="#cbd1d8"/>270 </svg>271 <span>Google Assistant Routine</span>272 </div>273 <div class="trailing">+</div>274 </div>275 276 <div class="option">277 <div class="left">278 <!-- Trash icon -->279 <svg class="icon-lg" viewBox="0 0 24 24" fill="none">280 <path d="M8 6h8l-1-2H9z" stroke="#cbd1d8" stroke-width="2"/>281 <rect x="6" y="8" width="12" height="12" rx="2" stroke="#cbd1d8" stroke-width="2"/>282 <path d="M10 12v6M14 12v6" stroke="#cbd1d8" stroke-width="2"/>283 </svg>284 <span>Delete</span>285 </div>286 </div>287 </div>288 289 <!-- Second alarm card (compact) -->290 <div class="card compact">291 <div class="card-header">292 <div class="label-row" style="text-transform: lowercase;">293 <span>wakeup</span>294 </div>295 <div class="corner-btn">296 <svg width="24" height="24" viewBox="0 0 24 24">297 <path d="M6 10l6 6 6-6" stroke="#cbd1d8" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>298 </svg>299 </div>300 </div>301 302 <div class="snackbar">Alarm set for 5 days, 18 hours, and 40 minutes from now.</div>303 304 <div class="time-row" style="margin-top: 40px;">305 <div class="time">7:00</div>306 <div class="ampm">AM</div>307 </div>308 309 <div class="weekday-label">Sun, Sat</div>310 311 <div class="big-add">+</div>312 313 <div class="day-toggle-area" style="top: 140px;">314 <div class="toggle small"></div>315 </div>316 </div>317 318 <!-- Bottom navigation -->319 <div class="bottom-nav">320 <div class="nav-content">321 <div class="nav-item active">322 <div class="pill"></div>323 <svg class="icon-lg" viewBox="0 0 24 24" fill="none" style="z-index:1">324 <circle cx="12" cy="12" r="8" stroke="#cbd1d8" stroke-width="2"/>325 <path d="M12 12l3 2M12 8v4" stroke="#cbd1d8" stroke-width="2" stroke-linecap="round"/>326 </svg>327 <div class="label" style="z-index:1">Alarm</div>328 </div>329 330 <div class="nav-item">331 <svg class="icon-lg" viewBox="0 0 24 24" fill="none">332 <circle cx="12" cy="12" r="8" stroke="#cbd1d8" stroke-width="2"/>333 <path d="M12 6v6l4 2" stroke="#cbd1d8" stroke-width="2" stroke-linecap="round"/>334 </svg>335 <div class="label">Clock</div>336 </div>337 338 <div class="nav-item">339 <svg class="icon-lg" viewBox="0 0 24 24" fill="none">340 <path d="M8 5l8 0-3 6 3 8-8 0 3-6-3-8z" stroke="#cbd1d8" stroke-width="2" fill="none" stroke-linejoin="round"/>341 </svg>342 <div class="label">Timer</div>343 </div>344 345 <div class="nav-item">346 <svg class="icon-lg" viewBox="0 0 24 24" fill="none">347 <circle cx="12" cy="12" r="8" stroke="#cbd1d8" stroke-width="2"/>348 <path d="M12 8v6M12 14h4" stroke="#cbd1d8" stroke-width="2" stroke-linecap="round"/>349 </svg>350 <div class="label">Stopwatch</div>351 </div>352 353 <div class="nav-item">354 <svg class="icon-lg" viewBox="0 0 24 24" fill="none">355 <rect x="3" y="10" width="18" height="8" rx="2" stroke="#cbd1d8" stroke-width="2"/>356 <rect x="6" y="8" width="6" height="4" fill="#cbd1d8"/>357 </svg>358 <div class="label">Bedtime</div>359 </div>360 </div>361 <div class="gesture"></div>362 </div>363 364</div>365</body>366</html>