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 width: 1080px;10 height: 2400px;11 position: relative;12 overflow: hidden;13 background: #121316;14 border-radius: 0;15 box-shadow: none;16 }17 18 /* Status bar / header */19 .status-bar {20 position: absolute;21 top: 0;22 left: 0;23 width: 1080px;24 height: 140px;25 background: #0E2C5A;26 color: #FFFFFF;27 display: flex;28 align-items: center;29 padding: 0 36px;30 box-sizing: border-box;31 }32 .status-left { display: flex; align-items: center; gap: 24px; }33 .status-time { font-size: 44px; font-weight: 600; letter-spacing: 1px; }34 .status-pill {35 width: 74px; height: 54px;36 background: #FFFFFF; color: #0E2C5A;37 border-radius: 8px; display: flex; align-items: center; justify-content: center;38 font-size: 24px; font-weight: 700;39 }40 .status-dot { font-size: 42px; margin-left: 8px; margin-right: 8px; }41 .status-right { margin-left: auto; display: flex; align-items: center; gap: 28px; }42 .icon { width: 42px; height: 42px; fill: none; stroke: #FFFFFF; stroke-width: 3; }43 44 /* Modal card */45 .modal {46 position: absolute;47 left: 54px;48 top: 220px;49 width: 972px;50 background: #33363B;51 border-radius: 22px;52 box-shadow: 0 40px 80px rgba(0,0,0,0.6);53 color: #E8EAED;54 padding: 48px 54px 40px;55 box-sizing: border-box;56 }57 .modal-title {58 text-align: center;59 font-size: 56px;60 font-weight: 700;61 color: #4C7DFF;62 margin-bottom: 40px;63 }64 65 /* Time picker */66 .time-picker {67 display: grid;68 grid-template-columns: 1fr 80px 1fr 1fr;69 align-items: center;70 column-gap: 20px;71 margin-bottom: 20px;72 }73 .wheel {74 text-align: center;75 color: #9AA0A6;76 }77 .wheel .top, .wheel .bottom {78 font-size: 38px;79 color: #7C8288;80 }81 .wheel .selected {82 font-size: 68px;83 font-weight: 600;84 color: #E8EAED;85 line-height: 1.2;86 }87 .colon {88 text-align: center;89 font-size: 68px;90 color: #B0B6BC;91 font-weight: 600;92 }93 .period {94 text-align: left;95 font-size: 42px;96 color: #9AA0A6;97 font-weight: 600;98 }99 .underline-row {100 display: grid;101 grid-template-columns: 1fr 80px 1fr 1fr;102 column-gap: 20px;103 margin-top: 8px;104 margin-bottom: 30px;105 }106 .underline {107 height: 3px;108 background: #6E6E72;109 border-radius: 2px;110 margin: 0 40px;111 }112 .underline.colon { background: transparent; }113 .underline.period { margin-left: 0; margin-right: 140px; }114 115 /* Settings rows */116 .setting-label {117 font-size: 38px;118 margin: 26px 0 18px;119 color: #E8EAED;120 }121 122 .days {123 display: flex;124 gap: 20px;125 margin-bottom: 30px;126 flex-wrap: wrap;127 }128 .day-chip {129 width: 96px; height: 72px;130 background: #2E6BFF;131 color: #FFFFFF;132 border-radius: 14px;133 display: flex; align-items: center; justify-content: center;134 font-size: 32px; font-weight: 700;135 box-shadow: inset 0 0 0 1px rgba(255,255,255,0.1);136 }137 138 .row-between { display: flex; align-items: center; justify-content: space-between; margin: 18px 0 8px; }139 140 /* Switch */141 .switch {142 width: 120px; height: 60px; background: #1F2630;143 border-radius: 30px; position: relative;144 box-shadow: inset 0 0 0 2px #2C3239;145 }146 .switch.on { background: #2E6BFF; box-shadow: inset 0 0 0 2px #2E6BFF; }147 .switch .knob {148 position: absolute; top: 6px; right: 6px; width: 48px; height: 48px; background: #FFFFFF; border-radius: 24px;149 box-shadow: 0 2px 6px rgba(0,0,0,0.4);150 }151 152 /* Slider */153 .slider-wrap { margin: 12px 0 24px; }154 .slider-track {155 height: 6px; background: #4A4F57; border-radius: 3px; position: relative; margin: 0 20px;156 }157 .slider-active {158 position: absolute; left: 0; top: 0; height: 6px; width: 62%;159 background: #2E6BFF; border-radius: 3px;160 }161 .slider-thumb {162 position: absolute; left: 62%; top: -10px; width: 28px; height: 28px;163 background: #2E6BFF; border-radius: 50%; box-shadow: 0 2px 6px rgba(0,0,0,0.5);164 }165 166 /* Chips */167 .chips-row { display: flex; gap: 24px; align-items: center; margin: 26px 0; }168 .chip {169 display: inline-flex; align-items: center; gap: 18px;170 background: #D8D8D8; color: #2C2D30;171 border-radius: 16px; padding: 18px 22px; font-size: 32px; font-weight: 600;172 }173 .chip .chev {174 width: 30px; height: 30px; fill: none; stroke: #2C2D30; stroke-width: 5;175 }176 177 /* Actions */178 .actions { display: flex; justify-content: space-between; align-items: center; margin-top: 26px; }179 .action-cancel { font-size: 42px; color: #C8CACC; }180 .action-ok { font-size: 42px; color: #2E6BFF; font-weight: 700; }181 182 /* Numeric keyboard */183 .keyboard {184 position: absolute;185 left: 0;186 bottom: 0;187 width: 1080px;188 height: 940px;189 background: #191A1D;190 border-top-left-radius: 24px;191 border-top-right-radius: 24px;192 padding: 40px 40px 120px;193 box-sizing: border-box;194 }195 .keys {196 display: grid;197 grid-template-columns: repeat(4, 1fr);198 gap: 26px;199 }200 .key {201 height: 140px;202 background: #2A2B2E;203 border-radius: 70px;204 color: #ECECEC;205 font-size: 56px;206 display: flex; align-items: center; justify-content: center;207 }208 .key.pink { background: #F2D6D6; color: #262626; }209 .key.lavender { background: #E5D8FF; color: #262626; }210 .gesture {211 position: absolute; bottom: 40px; left: 50%; transform: translateX(-50%);212 width: 240px; height: 10px; background: #E6E6E6; border-radius: 8px;213 opacity: 0.92;214 }215</style>216</head>217<body>218<div id="render-target">219 220 <!-- Status bar -->221 <div class="status-bar">222 <div class="status-left">223 <div class="status-time">12:25</div>224 <div class="status-pill">TOI</div>225 <div class="status-pill">TOI</div>226 <div class="status-pill">TOI</div>227 <div class="status-dot">•</div>228 </div>229 <div class="status-right">230 <!-- Location icon -->231 <svg class="icon" viewBox="0 0 24 24">232 <path d="M12 3l6 6-6 12-6-12 6-6z"></path>233 </svg>234 <!-- WiFi icon -->235 <svg class="icon" viewBox="0 0 24 24">236 <path d="M2 8c5-4 15-4 20 0M5 12c3-3 11-3 14 0M9 16c2-2 6-2 8 0M12 19l2 2-2 2-2-2 2-2z"></path>237 </svg>238 <!-- Battery icon -->239 <svg class="icon" viewBox="0 0 24 24">240 <rect x="2" y="6" width="18" height="12" rx="2" ry="2" fill="none"></rect>241 <rect x="20" y="9" width="2" height="6" fill="none"></rect>242 <rect x="4" y="8" width="12" height="8" fill="#FFFFFF" stroke="none"></rect>243 </svg>244 </div>245 </div>246 247 <!-- Modal Card -->248 <div class="modal">249 <div class="modal-title">Set Alarm</div>250 251 <div class="time-picker">252 <div class="wheel">253 <div class="top">8</div>254 <div class="selected">9</div>255 <div class="bottom">10</div>256 </div>257 <div class="colon">:</div>258 <div class="wheel">259 <div class="top">20</div>260 <div class="selected">15</div>261 <div class="bottom">22</div>262 </div>263 <div class="period">AM</div>264 </div>265 <div class="underline-row">266 <div class="underline"></div>267 <div class="underline colon"></div>268 <div class="underline"></div>269 <div class="underline period"></div>270 </div>271 272 <div class="setting-label">Repeat Days</div>273 <div class="days">274 <div class="day-chip">M</div>275 <div class="day-chip">TU</div>276 <div class="day-chip">W</div>277 <div class="day-chip">TH</div>278 <div class="day-chip">F</div>279 <div class="day-chip">SA</div>280 <div class="day-chip">SU</div>281 </div>282 283 <div class="row-between">284 <div class="setting-label" style="margin:0;">Vibration</div>285 <div class="switch on"><div class="knob"></div></div>286 </div>287 288 <div class="setting-label" style="margin-top:26px;">Volume</div>289 <div class="slider-wrap">290 <div class="slider-track">291 <div class="slider-active"></div>292 <div class="slider-thumb"></div>293 </div>294 </div>295 296 <div class="chips-row">297 <div class="chip">Snooze <span style="font-weight:500; background:#EDEDED; padding:10px 18px; border-radius:12px;">5 mins</span>298 <svg class="chev" viewBox="0 0 24 24"><path d="M8 5l8 7-8 7" /></svg>299 </div>300 <div class="chip">Ringtone <span style="font-weight:500; background:#EDEDED; padding:10px 18px; border-radius:12px;">The Bi...</span>301 <svg class="chev" viewBox="0 0 24 24"><path d="M8 5l8 7-8 7" /></svg>302 </div>303 </div>304 305 <div class="actions">306 <div class="action-cancel">Cancel</div>307 <div class="action-ok">Set Alarm</div>308 </div>309 </div>310 311 <!-- Numeric Keyboard -->312 <div class="keyboard">313 <div class="keys">314 <div class="key">1</div>315 <div class="key">2</div>316 <div class="key">3</div>317 <div class="key">−</div>318 319 <div class="key">4</div>320 <div class="key">5</div>321 <div class="key">6</div>322 <div class="key">⌟</div>323 324 <div class="key">7</div>325 <div class="key">8</div>326 <div class="key">9</div>327 <div class="key pink">⌫</div>328 329 <div class="key">,</div>330 <div class="key">0</div>331 <div class="key">.</div>332 <div class="key lavender">→</div>333 </div>334 <div class="gesture"></div>335 </div>336 337</div>338</body>339</html>