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 Time Picker 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 position: relative;11 overflow: hidden;12 width: 1080px;13 height: 2400px;14 background: #0f1216;15 color: #e8eaed;16 }17 18 /* Top status (subtle) */19 .status {20 position: absolute;21 top: 18px;22 left: 40px;23 right: 40px;24 height: 70px;25 color: #e8eaed;26 opacity: 0.9;27 display: flex;28 align-items: center;29 justify-content: space-between;30 font-size: 38px;31 }32 .status-icons { display: flex; gap: 26px; align-items: center; }33 .dot { width: 10px; height: 10px; background: #e8eaed; border-radius: 50%; display: inline-block; }34 35 /* Page title */36 .page-title {37 position: absolute;38 top: 160px;39 left: 48px;40 font-size: 92px;41 color: #9aa3ad;42 letter-spacing: 1px;43 font-weight: 500;44 }45 46 /* Background alarm card behind modal (subtle) */47 .alarm-card {48 position: absolute;49 top: 410px;50 left: 48px;51 width: 984px;52 height: 460px;53 background: #161a1f;54 border-radius: 36px;55 box-shadow: inset 0 0 0 1px rgba(255,255,255,0.04);56 opacity: 0.75;57 }58 .alarm-card .label {59 position: absolute;60 top: 36px; left: 36px;61 color: #8b949f; font-size: 36px;62 }63 .alarm-card .time {64 position: absolute;65 bottom: 36px; left: 36px;66 font-size: 128px; font-weight: 700;67 color: #d8dee6;68 }69 70 /* Floating action button behind modal */71 .fab {72 position: absolute;73 bottom: 330px;74 left: 50%;75 transform: translateX(-50%);76 width: 172px; height: 172px; border-radius: 50%;77 background: #5f7895;78 opacity: 0.45;79 display: flex; align-items: center; justify-content: center;80 font-size: 120px; color: #d5e3ff;81 }82 83 /* Bottom nav bar */84 .nav {85 position: absolute;86 bottom: 80px;87 left: 0; right: 0;88 height: 170px;89 display: flex;90 align-items: center;91 justify-content: space-around;92 color: #a5aeb8;93 }94 .nav-item {95 width: 180px;96 height: 120px;97 border-radius: 60px;98 display: flex; flex-direction: column;99 align-items: center; justify-content: center;100 gap: 10px;101 }102 .nav-item.active {103 background: #1b2430;104 color: #d6e1f0;105 }106 .nav-item span { font-size: 34px; }107 108 /* Time picker modal */109 .picker {110 position: absolute;111 left: 70px;112 top: 680px;113 width: 940px;114 height: 1120px;115 background: #2e3741;116 border-radius: 48px;117 box-shadow: 0 24px 80px rgba(0,0,0,0.55);118 }119 .picker-header {120 padding: 38px 44px 6px 44px;121 color: #cdd5de;122 font-size: 40px;123 }124 .time-row {125 display: flex;126 align-items: center;127 gap: 26px;128 padding: 18px 44px 8px 44px;129 }130 .tile {131 width: 240px; height: 180px;132 border-radius: 28px;133 display: flex; align-items: center; justify-content: center;134 font-size: 120px; font-weight: 700;135 letter-spacing: 4px;136 }137 .tile.hour { background: #3b444f; color: #e6ecf6; }138 .tile.min { background: #274b7b; color: #bcd3ff; }139 .colon {140 font-size: 130px; color: #99a7b7; margin: 0 6px;141 }142 .ampm {143 margin-left: auto;144 margin-right: 44px;145 width: 144px; height: 180px;146 border-radius: 22px;147 border: 3px solid #778391;148 overflow: hidden;149 display: flex; flex-direction: column;150 }151 .ampm div {152 flex: 1; display: flex; align-items: center; justify-content: center;153 font-size: 48px; font-weight: 600;154 }155 .ampm .am { background: #2a313a; color: #dfe7f1; }156 .ampm .pm { background: #5b4a63; color: #efe8ff; }157 158 /* Dial */159 .dial {160 position: absolute;161 left: 100px;162 top: 340px;163 width: 740px; height: 740px;164 border-radius: 50%;165 background: radial-gradient(circle at 50% 40%, #434c58 0%, #3a424d 60%, #2f3843 100%);166 }167 .num {168 position: absolute;169 color: #d0d7df;170 font-size: 44px;171 font-weight: 600;172 opacity: 0.9;173 }174 175 /* Precomputed positions for minute labels */176 .n00 { top: 36px; left: 348px; }177 .n05 { top: 106px; left: 520px; }178 .n10 { top: 220px; left: 630px; }179 .n15 { top: 352px; left: 680px; }180 .n20 { top: 500px; left: 630px; }181 .n25 { top: 612px; left: 520px; }182 .n30 { top: 670px; left: 352px; }183 .n35 { top: 612px; left: 180px; }184 .n40 { top: 500px; left: 72px; }185 .n45 { top: 352px; left: 28px; }186 .n50 { top: 220px; left: 70px; }187 .n55 { top: 106px; left: 178px; }188 189 /* Hand and knobs */190 .center-dot {191 position: absolute;192 width: 18px; height: 18px;193 border-radius: 50%;194 background: #a7c3ff;195 left: 371px; top: 371px;196 transform: translate(-50%, -50%);197 }198 .hand {199 position: absolute;200 left: 370px; top: 370px;201 width: 250px; height: 4px;202 background: #a7c3ff;203 transform-origin: 0 50%;204 transform: rotate(60deg);205 }206 .knob {207 position: absolute;208 width: 120px; height: 120px;209 border-radius: 50%;210 background: #9fc3ff;211 color: #1a2a45;212 display: flex; align-items: center; justify-content: center;213 font-size: 44px; font-weight: 800;214 left: 580px; top: 180px; /* around the "10" mark */215 box-shadow: 0 6px 0 rgba(0,0,0,0.1) inset;216 }217 218 /* Picker footer */219 .picker-footer {220 position: absolute;221 bottom: 36px; left: 36px; right: 36px;222 display: flex; align-items: center; justify-content: space-between;223 }224 .kbd {225 display: inline-flex; align-items: center; gap: 16px; color: #d1d9e2; opacity: 0.9;226 font-size: 36px;227 }228 .actions {229 display: flex; gap: 48px; font-size: 46px; font-weight: 600;230 }231 .link { color: #a6c4ff; }232 233 /* Three-dots menu on app background */234 .kebab {235 position: absolute;236 right: 36px;237 top: 280px;238 opacity: 0.6;239 }240</style>241</head>242<body>243<div id="render-target">244 245 <!-- Top status -->246 <div class="status">247 <div>11:26</div>248 <div class="status-icons">249 <span class="dot"></span>250 <span class="dot"></span>251 <span style="width:30px;height:30px;border:3px solid #e8eaed"></span>252 <svg width="42" height="42" viewBox="0 0 24 24" fill="none">253 <path d="M3 9h18v6H3z" stroke="#e8eaed" stroke-width="2"></path>254 </svg>255 <svg width="44" height="44" viewBox="0 0 24 24" fill="none">256 <path d="M18 8a4 4 0 0 1 0 8M6 8a4 4 0 0 0 0 8" stroke="#e8eaed" stroke-width="2" stroke-linecap="round"></path>257 </svg>258 <svg width="44" height="44" viewBox="0 0 24 24" fill="none">259 <path d="M20 8v8a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V8" stroke="#e8eaed" stroke-width="2"></path>260 </svg>261 </div>262 </div>263 264 <div class="page-title">Alarm</div>265 266 <!-- Background content -->267 <div class="alarm-card">268 <div class="label">wake up</div>269 <div class="time">6:00 AM</div>270 </div>271 272 <!-- Kebab menu -->273 <div class="kebab">274 <svg width="44" height="120" viewBox="0 0 24 64" fill="#7d8793">275 <circle cx="12" cy="10" r="3"></circle>276 <circle cx="12" cy="32" r="3"></circle>277 <circle cx="12" cy="54" r="3"></circle>278 </svg>279 </div>280 281 <!-- Floating action button behind modal -->282 <div class="fab">+</div>283 284 <!-- Time Picker Modal -->285 <div class="picker">286 <div class="picker-header">Select time</div>287 288 <div class="time-row">289 <div class="tile hour">06</div>290 <div class="colon">:</div>291 <div class="tile min">10</div>292 <div class="ampm">293 <div class="am">AM</div>294 <div class="pm">PM</div>295 </div>296 </div>297 298 <div class="dial">299 <div class="num n00">00</div>300 <div class="num n05">05</div>301 <div class="num n10">10</div>302 <div class="num n15">15</div>303 <div class="num n20">20</div>304 <div class="num n25">25</div>305 <div class="num n30">30</div>306 <div class="num n35">35</div>307 <div class="num n40">40</div>308 <div class="num n45">45</div>309 <div class="num n50">50</div>310 <div class="num n55">55</div>311 312 <div class="center-dot"></div>313 <div class="hand"></div>314 <div class="knob">10</div>315 </div>316 317 <div class="picker-footer">318 <div class="kbd">319 <svg width="52" height="52" viewBox="0 0 24 24" fill="none">320 <rect x="3" y="7" width="18" height="10" rx="2" stroke="#d1d9e2" stroke-width="2"></rect>321 <path d="M6 11h2M10 11h2M14 11h2M6 14h10" stroke="#d1d9e2" stroke-width="2" stroke-linecap="round"></path>322 </svg>323 </div>324 <div class="actions">325 <span class="link">Cancel</span>326 <span class="link">OK</span>327 </div>328 </div>329 </div>330 331 <!-- Bottom navigation -->332 <div class="nav">333 <div class="nav-item active">334 <svg width="48" height="48" viewBox="0 0 24 24" fill="none">335 <circle cx="12" cy="12" r="8" stroke="#cfe0ff" stroke-width="2"></circle>336 <path d="M12 8v5l3 2" stroke="#cfe0ff" stroke-width="2" stroke-linecap="round"></path>337 </svg>338 <span>Alarm</span>339 </div>340 <div class="nav-item">341 <svg width="48" height="48" viewBox="0 0 24 24" fill="none">342 <circle cx="12" cy="12" r="8" stroke="#a5aeb8" stroke-width="2"></circle>343 <path d="M12 6v6h5" stroke="#a5aeb8" stroke-width="2" stroke-linecap="round"></path>344 </svg>345 <span>Clock</span>346 </div>347 <div class="nav-item">348 <svg width="48" height="48" viewBox="0 0 24 24" fill="none">349 <path d="M6 6h12l-1 10H7L6 6z" stroke="#a5aeb8" stroke-width="2"></path>350 <path d="M9 6V4m6 2V4" stroke="#a5aeb8" stroke-width="2" stroke-linecap="round"></path>351 </svg>352 <span>Timer</span>353 </div>354 <div class="nav-item">355 <svg width="48" height="48" viewBox="0 0 24 24" fill="none">356 <circle cx="12" cy="12" r="8" stroke="#a5aeb8" stroke-width="2"></circle>357 <path d="M12 8v6" stroke="#a5aeb8" stroke-width="2" stroke-linecap="round"></path>358 <circle cx="12" cy="15" r="1.5" fill="#a5aeb8"></circle>359 </svg>360 <span>Stopwatch</span>361 </div>362 <div class="nav-item">363 <svg width="48" height="48" viewBox="0 0 24 24" fill="none">364 <path d="M3 12h18M5 12V8h6v4" stroke="#a5aeb8" stroke-width="2"></path>365 <path d="M4 16h16v2H4z" fill="#a5aeb8"></path>366 </svg>367 <span>Bedtime</span>368 </div>369 </div>370 371</div>372</body>373</html>