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>Set Alarm UI</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }9 #render-target {10 width: 1080px;11 height: 2400px;12 position: relative;13 overflow: hidden;14 background: #121212;15 }16 17 /* Status bar */18 .status-bar {19 position: absolute;20 top: 0;21 left: 0;22 width: 1080px;23 height: 130px;24 background: #0E2F66;25 color: #fff;26 display: flex;27 align-items: center;28 padding: 0 36px;29 box-sizing: border-box;30 font-weight: 600;31 }32 .status-left { display: flex; align-items: center; gap: 22px; }33 .status-time { font-size: 42px; letter-spacing: 1px; }34 .status-chip {35 width: 70px; height: 54px; background: #fff; color: #0E2F66;36 display: flex; align-items: center; justify-content: center;37 border-radius: 6px; font-size: 28px; font-weight: 700;38 }39 .status-dot { font-size: 56px; line-height: 0; margin-left: 10px; margin-right: 10px; }40 .status-right { margin-left: auto; display: flex; align-items: center; gap: 28px; }41 .status-icon svg { width: 36px; height: 36px; fill: #fff; }42 43 /* Dialog */44 .dialog {45 position: absolute;46 left: 60px;47 top: 220px;48 width: 960px;49 background: #2d2d2f;50 border-radius: 20px;51 box-shadow: 0 18px 40px rgba(0,0,0,0.6);52 color: #e5e5e5;53 padding: 44px 44px 36px;54 box-sizing: border-box;55 }56 .dialog-title {57 text-align: center;58 font-size: 54px;59 color: #3d79ff;60 font-weight: 700;61 margin-bottom: 36px;62 }63 64 /* Time picker mock */65 .time-area { margin-top: 8px; }66 .tp-row {67 display: grid;68 grid-template-columns: 1fr 140px 1fr 180px;69 align-items: center;70 margin: 22px 0 8px;71 color: #8f8f93;72 font-size: 56px;73 letter-spacing: 2px;74 }75 .tp-row.center { color: #f0f0f0; font-weight: 700; }76 .tp-colon { text-align: center; font-weight: 700; }77 .tp-ampm { text-align: left; font-size: 40px; }78 .tp-value { text-align: right; padding-right: 30px; }79 .tp-min.selected {80 display: inline-block;81 padding: 6px 14px;82 border: 2px solid #3d79ff;83 border-radius: 8px;84 background: rgba(61,121,255,0.12);85 }86 .tp-line {87 height: 2px;88 background: #6c6c70;89 margin: 16px 0 8px;90 opacity: 0.45;91 }92 93 /* Repeat Days */94 .section-title {95 font-size: 40px;96 margin-top: 30px;97 margin-bottom: 20px;98 color: #eaeaea;99 }100 .day-chips {101 display: flex;102 gap: 18px;103 flex-wrap: wrap;104 }105 .chip {106 background: #3d79ff;107 color: #fff;108 font-weight: 700;109 font-size: 34px;110 padding: 14px 22px;111 border-radius: 12px;112 min-width: 80px;113 text-align: center;114 box-shadow: inset 0 -2px 0 rgba(255,255,255,0.15);115 }116 117 /* Toggle */118 .row-between {119 display: flex;120 align-items: center;121 justify-content: space-between;122 margin-top: 34px;123 margin-bottom: 8px;124 }125 .toggle {126 width: 120px; height: 56px; background: #3d79ff;127 border-radius: 28px; position: relative;128 }129 .toggle::after {130 content: "";131 position: absolute;132 width: 48px; height: 48px; background: #fff;133 border-radius: 50%;134 right: 4px; top: 4px;135 }136 137 /* Volume slider */138 .slider-wrap { margin-top: 8px; }139 .track {140 position: relative;141 width: 760px;142 height: 6px;143 background: #5d5d63;144 border-radius: 3px;145 }146 .track .fill {147 position: absolute; left: 0; top: 0; height: 6px; width: 520px; background: #3d79ff; border-radius: 3px;148 }149 .track .knob {150 position: absolute; left: 520px; top: -10px; width: 26px; height: 26px;151 background: #3d79ff; border-radius: 50%; box-shadow: 0 0 0 3px rgba(61,121,255,0.25);152 }153 154 /* Snooze & Ringtone */155 .options-row {156 display: flex; gap: 30px; align-items: center; margin-top: 36px;157 }158 .option {159 display: flex; align-items: center; gap: 18px;160 background: #e0e0e0; color: #222;161 padding: 18px 24px; border-radius: 14px;162 font-size: 34px; font-weight: 700;163 }164 .opt-label { color: #c9c9c9; font-weight: 600; margin-right: 10px; }165 .option svg { width: 32px; height: 32px; fill: #333; }166 167 /* Actions */168 .actions {169 margin-top: 36px;170 display: flex; justify-content: space-between; align-items: center;171 font-size: 40px;172 }173 .cancel { color: #cfcfcf; }174 .confirm { color: #3d79ff; font-weight: 700; }175 176 /* Keypad */177 .keypad {178 position: absolute;179 left: 50px;180 right: 50px;181 top: 1300px;182 display: grid;183 grid-template-columns: repeat(4, 1fr);184 gap: 26px;185 }186 .key {187 height: 170px;188 background: #2a2a2d;189 border-radius: 90px;190 display: flex;191 align-items: center;192 justify-content: center;193 color: #f6f6f6;194 font-size: 64px;195 font-weight: 600;196 }197 .key.pale-pink { background: #ffdfe0; color: #242424; }198 .key.pale-purple { background: #e9dbff; color: #242424; }199 .key.small { font-size: 52px; }200 .key svg { width: 54px; height: 54px; fill: #222; }201 202 /* Bottom handle */203 .bottom-ui {204 position: absolute;205 left: 0; width: 100%;206 bottom: 40px; text-align: center;207 }208 .caret { color: #bdbdbd; font-size: 44px; margin-bottom: 18px; }209 .home-bar {210 width: 320px; height: 10px; background: #e9e9e9; border-radius: 8px;211 margin: 0 auto;212 }213</style>214</head>215<body>216<div id="render-target">217 218 <!-- Status bar -->219 <div class="status-bar">220 <div class="status-left">221 <div class="status-time">12:24</div>222 <div class="status-chip">TOI</div>223 <div class="status-chip">TOI</div>224 <div class="status-chip">TOI</div>225 <div class="status-dot">•</div>226 </div>227 <div class="status-right">228 <div class="status-icon">229 <!-- Location pin -->230 <svg viewBox="0 0 24 24"><path d="M12 2a7 7 0 0 0-7 7c0 5 7 13 7 13s7-8 7-13a7 7 0 0 0-7-7zm0 9.5a2.5 2.5 0 1 1 0-5 2.5 2.5 0 0 1 0 5z"/></svg>231 </div>232 <div class="status-icon">233 <!-- WiFi -->234 <svg viewBox="0 0 24 24"><path d="M12 18l-2 2 2 2 2-2-2-2zm-7-7a13 13 0 0 1 14 0l-2 2a9 9 0 0 0-10 0l-2-2zm-3-4a17 17 0 0 1 20 0l-2 2a13 13 0 0 0-16 0L2 7z"/></svg>235 </div>236 <div class="status-icon">237 <!-- Battery -->238 <svg viewBox="0 0 24 24"><path d="M20 8h1v8h-1v2H4V6h16v2zM6 8v8h12V8H6z"/></svg>239 </div>240 </div>241 </div>242 243 <!-- Dialog -->244 <div class="dialog">245 <div class="dialog-title">Set Alarm</div>246 247 <div class="time-area">248 <div class="tp-row">249 <div class="tp-value">8</div>250 <div class="tp-colon"></div>251 <div style="text-align:left;">20</div>252 <div class="tp-ampm"></div>253 </div>254 <div class="tp-line"></div>255 256 <div class="tp-row center">257 <div class="tp-value">9</div>258 <div class="tp-colon">:</div>259 <div style="text-align:left;"><span class="tp-min selected">21</span></div>260 <div class="tp-ampm">AM</div>261 </div>262 <div class="tp-line"></div>263 264 <div class="tp-row">265 <div class="tp-value">10</div>266 <div class="tp-colon"></div>267 <div style="text-align:left;">22</div>268 <div class="tp-ampm">PM</div>269 </div>270 </div>271 272 <div class="section-title">Repeat Days</div>273 <div class="day-chips">274 <div class="chip">M</div>275 <div class="chip">TU</div>276 <div class="chip">W</div>277 <div class="chip">TH</div>278 <div class="chip">F</div>279 <div class="chip">SA</div>280 <div class="chip">SU</div>281 </div>282 283 <div class="row-between">284 <div class="section-title" style="margin:0;">Vibration</div>285 <div class="toggle"></div>286 </div>287 288 <div class="row-between" style="align-items:flex-end;">289 <div class="section-title" style="margin:0;">Volume</div>290 <div style="width: 120px;"></div>291 </div>292 <div class="slider-wrap">293 <div class="track">294 <div class="fill"></div>295 <div class="knob"></div>296 </div>297 </div>298 299 <div class="options-row">300 <div class="opt-label">Snooze</div>301 <div class="option">302 5 mins303 <svg viewBox="0 0 24 24"><path d="M9 6l6 6-6 6"/></svg>304 </div>305 <div class="opt-label">Ringtone</div>306 <div class="option">307 The Bi…308 <svg viewBox="0 0 24 24"><path d="M9 6l6 6-6 6"/></svg>309 </div>310 </div>311 312 <div class="actions">313 <div class="cancel">Cancel</div>314 <div class="confirm">Set Alarm</div>315 </div>316 </div>317 318 <!-- Keypad -->319 <div class="keypad">320 <div class="key">1</div>321 <div class="key">2</div>322 <div class="key">3</div>323 <div class="key small">-</div>324 325 <div class="key">4</div>326 <div class="key">5</div>327 <div class="key">6</div>328 <div class="key small">[</div>329 330 <div class="key">7</div>331 <div class="key">8</div>332 <div class="key">9</div>333 <div class="key pale-pink">334 <!-- Backspace icon -->335 <svg viewBox="0 0 24 24"><path d="M3 12l5-6h11v12H8l-5-6zm9 4l4-4-4-4-1.4 1.4L12.2 12l-1.6 1.6L12 16z"/></svg>336 </div>337 338 <div class="key small">,</div>339 <div class="key">0</div>340 <div class="key small">.</div>341 <div class="key pale-purple">342 <!-- Enter arrow -->343 <svg viewBox="0 0 24 24"><path d="M4 11h10V7l6 5-6 5v-4H4z"/></svg>344 </div>345 </div>346 347 <!-- Bottom gesture bar -->348 <div class="bottom-ui">349 <div class="caret">˅</div>350 <div class="home-bar"></div>351 </div>352 353</div>354</body>355</html>