GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Set Alarm UI Mock</title>6<style>7 body { margin: 0; padding: 0; background: transparent; font-family: Roboto, Arial, sans-serif; }8 #render-target {9 position: relative;10 overflow: hidden;11 width: 1080px;12 height: 2400px;13 background: #0e0e12;14 border-radius: 28px;15 box-shadow: 0 20px 40px rgba(0,0,0,0.6);16 color: #e6e6e6;17 }18 19 /* Status bar */20 .status-bar {21 position: absolute;22 top: 0;23 left: 0;24 width: 1080px;25 height: 126px;26 background: #0f2d5c;27 color: #ffffff;28 display: flex;29 align-items: center;30 padding: 0 36px;31 font-weight: 500;32 }33 .status-left { display: flex; align-items: center; gap: 24px; }34 .status-right { margin-left: auto; display: flex; align-items: center; gap: 24px; }35 .tag {36 background: #ffffff;37 color: #0f2d5c;38 border-radius: 6px;39 font-size: 28px;40 padding: 8px 10px;41 line-height: 1;42 box-shadow: inset 0 0 0 1px rgba(0,0,0,0.15);43 }44 .dot {45 width: 14px; height: 14px; border-radius: 50%; background: #b5c7ff;46 }47 .icon { width: 38px; height: 38px; display: inline-block; }48 49 /* Dim app content behind modal */50 .app-strip {51 position: absolute;52 top: 126px;53 left: 0;54 width: 1080px;55 height: 260px;56 background: #143764;57 }58 .app-card {59 position: absolute;60 top: 180px;61 left: 36px;62 width: 1008px;63 height: 120px;64 background: #e0e0e0;65 border: 1px solid #bdbdbd;66 border-radius: 18px;67 display: flex;68 align-items: center;69 padding: 0 24px;70 color: #757575;71 }72 73 /* Modal sheet */74 .modal {75 position: absolute;76 top: 260px;77 left: 36px;78 width: 1008px;79 background: #2b2d31;80 border-radius: 24px;81 box-shadow: 0 20px 50px rgba(0,0,0,0.75);82 padding: 34px 40px 40px;83 }84 .modal h1 {85 margin: 0;86 text-align: center;87 font-size: 54px;88 font-weight: 700;89 color: #4a7cf4;90 }91 92 /* Time picker */93 .time-picker {94 margin-top: 34px;95 height: 310px;96 position: relative;97 display: grid;98 grid-template-columns: 1fr 90px 1fr 1fr;99 column-gap: 24px;100 align-items: center;101 }102 .tp-col {103 display: flex; flex-direction: column; align-items: center; justify-content: center;104 gap: 26px;105 }106 .tp-faint { color: #80858c; font-size: 40px; }107 .tp-active { font-size: 86px; font-weight: 500; color: #e9eaec; }108 .tp-line { width: 100%; height: 4px; background: #64676d; border-radius: 2px; }109 .tp-colon { font-size: 86px; text-align: center; color: #9aa3ad; }110 111 /* Repeat days */112 .section-label {113 margin-top: 18px;114 font-size: 40px;115 color: #e6e6e6;116 }117 .day-chips {118 margin-top: 20px;119 display: flex; flex-wrap: wrap; gap: 22px;120 }121 .chip {122 background: #2f6be7;123 color: #ffffff;124 border-radius: 16px;125 padding: 18px 28px;126 font-size: 36px;127 font-weight: 700;128 width: 100px;129 text-align: center;130 box-shadow: inset 0 0 0 1px rgba(255,255,255,0.1);131 }132 133 /* Switch */134 .row {135 margin-top: 38px;136 display: flex;137 align-items: center;138 justify-content: space-between;139 }140 .row .label { font-size: 40px; }141 .switch {142 width: 136px; height: 68px; border-radius: 34px;143 background: #3b3e44; position: relative; box-shadow: inset 0 0 0 2px rgba(255,255,255,0.08);144 }145 .switch.on { background: #2f6be7; }146 .switch .knob {147 position: absolute; top: 8px; right: 8px; width: 52px; height: 52px; background: #ffffff; border-radius: 50%;148 box-shadow: 0 2px 6px rgba(0,0,0,0.35);149 }150 151 /* Slider */152 .slider-row { margin-top: 34px; }153 .slider-track {154 margin-top: 20px;155 height: 6px;156 background: #4b5157;157 border-radius: 3px;158 position: relative;159 }160 .slider-fill { position: absolute; left: 0; top: 0; height: 6px; width: 66%; background: #2f6be7; border-radius: 3px; }161 .slider-thumb {162 position: absolute; left: calc(66% - 16px); top: -10px;163 width: 32px; height: 32px; background: #2f6be7; border: 3px solid #b8caff; border-radius: 50%;164 box-shadow: 0 2px 8px rgba(0,0,0,0.45);165 }166 167 /* Snooze/Ringtone pills */168 .option-row {169 margin-top: 40px;170 display: flex; gap: 34px; align-items: center;171 }172 .pill {173 background: #d9d9db;174 color: #1f2125;175 border-radius: 18px;176 padding: 18px 24px;177 font-size: 36px;178 display: flex; align-items: center; gap: 18px;179 box-shadow: inset 0 0 0 1px rgba(0,0,0,0.2);180 }181 .pill .pill-label { color: #1f2125; font-weight: 600; }182 .pill .pill-value {183 background: #efefef; border-radius: 12px; padding: 12px 16px; font-weight: 600;184 color: #2f2f34;185 }186 .chev {187 width: 24px; height: 24px; display: inline-block;188 }189 190 /* Footer actions */191 .actions {192 margin-top: 36px;193 display: flex; justify-content: space-between; align-items: center;194 font-size: 42px;195 }196 .cancel { color: #c9c9cc; }197 .confirm { color: #4a7cf4; font-weight: 600; }198 199 /* Keyboard */200 .keyboard {201 position: absolute;202 left: 0;203 bottom: 0;204 width: 1080px;205 height: 950px;206 background: #121214;207 border-top: 1px solid rgba(255,255,255,0.06);208 padding: 32px 36px 120px;209 }210 .keys {211 display: grid;212 grid-template-columns: 1fr 1fr 1fr 1fr;213 gap: 26px;214 }215 .key {216 height: 168px;217 background: #2a282b;218 color: #f1f1f3;219 border-radius: 84px;220 font-size: 64px;221 display: flex; align-items: center; justify-content: center;222 box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06);223 }224 .key.small { font-size: 54px; }225 .key.pink { background: #f4d9d9; color: #2a282b; }226 .key.purple { background: #e8d6ff; color: #2a282b; }227 228 .gesture-bar {229 position: absolute; bottom: 40px; left: 50%; transform: translateX(-50%);230 width: 420px; height: 14px; background: #e5e5e5; border-radius: 8px;231 opacity: 0.85;232 }233 .chevron-down {234 position: absolute; bottom: 980px; left: 70px;235 width: 34px; height: 34px; color: #cfcfd4;236 }237</style>238</head>239<body>240<div id="render-target">241 242 <!-- Status bar -->243 <div class="status-bar">244 <div class="status-left">245 <div style="font-size:48px;">12:23</div>246 <div class="tag">TH</div>247 <div class="tag">TOI</div>248 <div class="tag">TOI</div>249 <div class="dot"></div>250 </div>251 <div class="status-right">252 <!-- location pin -->253 <svg class="icon" viewBox="0 0 24 24" fill="#ffffff"><path d="M12 2c3.3 0 6 2.7 6 6 0 4.6-6 12-6 12S6 12.6 6 8c0-3.3 2.7-6 6-6zm0 8a3 3 0 100-6 3 3 0 000 6z"/></svg>254 <!-- wifi -->255 <svg class="icon" viewBox="0 0 24 24" fill="#ffffff"><path d="M12 18l2 2-2 2-2-2 2-2zm-6-6a10 10 0 0112 0l-1.5 1.5a8 8 0 00-9 0L6 12zm-3-3a14 14 0 0120 0l-1.5 1.5a12 12 0 00-17 0L3 9z"/></svg>256 <!-- battery -->257 <svg class="icon" viewBox="0 0 24 24" fill="#ffffff"><path d="M18 7h2v10h-2V7z"/><path d="M3 8a2 2 0 012-2h10a2 2 0 012 2v8a2 2 0 01-2 2H5a2 2 0 01-2-2V8zm2 0v8h10V8H5z"/></svg>258 </div>259 </div>260 261 <div class="app-strip"></div>262 <div class="app-card">[IMG: App content strip behind modal]</div>263 264 <!-- Modal content -->265 <div class="modal">266 <h1>Set Alarm</h1>267 268 <div class="time-picker">269 <div class="tp-col">270 <div class="tp-faint">11</div>271 <div class="tp-line"></div>272 <div class="tp-active">9</div>273 <div class="tp-line"></div>274 <div class="tp-faint">1</div>275 </div>276 277 <div class="tp-colon">:</div>278 279 <div class="tp-col">280 <div class="tp-faint">20</div>281 <div class="tp-line"></div>282 <div class="tp-active">21</div>283 <div class="tp-line"></div>284 <div class="tp-faint">22</div>285 </div>286 287 <div class="tp-col">288 <div class="tp-faint"> </div>289 <div class="tp-line"></div>290 <div class="tp-active">AM</div>291 <div class="tp-line"></div>292 <div class="tp-faint">PM</div>293 </div>294 </div>295 296 <div class="section-label">Repeat Days</div>297 <div class="day-chips">298 <div class="chip">M</div>299 <div class="chip">TU</div>300 <div class="chip">W</div>301 <div class="chip">TH</div>302 <div class="chip">F</div>303 <div class="chip">SA</div>304 <div class="chip">SU</div>305 </div>306 307 <div class="row">308 <div class="label">Vibration</div>309 <div class="switch on">310 <div class="knob"></div>311 </div>312 </div>313 314 <div class="slider-row">315 <div class="label">Volume</div>316 <div class="slider-track">317 <div class="slider-fill"></div>318 <div class="slider-thumb"></div>319 </div>320 </div>321 322 <div class="option-row">323 <div class="pill">324 <div class="pill-label">Snooze</div>325 <div class="pill-value">5 mins</div>326 <svg class="chev" viewBox="0 0 24 24" fill="#333"><path d="M9 6l6 6-6 6z"/></svg>327 </div>328 <div class="pill">329 <div class="pill-label">Ringtone</div>330 <div class="pill-value">The Bi...</div>331 <svg class="chev" viewBox="0 0 24 24" fill="#333"><path d="M9 6l6 6-6 6z"/></svg>332 </div>333 </div>334 335 <div class="actions">336 <div class="cancel">Cancel</div>337 <div class="confirm">Set Alarm</div>338 </div>339 </div>340 341 <!-- Keyboard -->342 <div class="keyboard">343 <svg class="chevron-down" viewBox="0 0 24 24" fill="currentColor"><path d="M12 15l-6-6h12z"/></svg>344 <div class="keys">345 <div class="key">1</div>346 <div class="key">2</div>347 <div class="key">3</div>348 <div class="key small">-</div>349 350 <div class="key">4</div>351 <div class="key">5</div>352 <div class="key">6</div>353 <div class="key small">⌞</div>354 355 <div class="key">7</div>356 <div class="key">8</div>357 <div class="key">9</div>358 <div class="key pink small">359 <svg viewBox="0 0 24 24" width="44" height="44"><path d="M6 7l4 4-4 4v-8zm5 0h7v8h-7V7z" fill="#2a282b"/></svg>360 </div>361 362 <div class="key small">,</div>363 <div class="key">0</div>364 <div class="key small">.</div>365 <div class="key purple small">→</div>366 </div>367 <div class="gesture-bar"></div>368 </div>369 370</div>371</body>372</html>