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: Arial, Helvetica, sans-serif; }9 #render-target {10 width: 1080px;11 height: 2400px;12 position: relative;13 overflow: hidden;14 background: #121212;15 color: #E0E0E0;16 }17 18 /* Status bar */19 .status-bar {20 position: absolute;21 top: 0;22 left: 0;23 height: 96px;24 width: 100%;25 padding: 0 32px;26 box-sizing: border-box;27 display: flex;28 align-items: center;29 justify-content: space-between;30 color: #EAEAEA;31 font-weight: 600;32 letter-spacing: 0.5px;33 }34 .status-right {35 display: flex; align-items: center; gap: 18px;36 }37 .status-icon { width: 34px; height: 34px; opacity: 0.95; }38 39 /* Page title */40 .page-title {41 position: absolute;42 top: 140px;43 left: 48px;44 font-size: 64px;45 font-weight: 500;46 color: #B0BEC5;47 }48 49 /* Alarm card in background */50 .alarm-card {51 position: absolute;52 top: 360px;53 left: 48px;54 width: 984px;55 height: 540px;56 background: #1C1C1F;57 border-radius: 36px;58 box-shadow: 0 20px 40px rgba(0,0,0,0.35);59 padding: 40px;60 box-sizing: border-box;61 color: #A7A7A7;62 }63 .alarm-card .subtle { color: #9FA4AA; font-size: 34px; }64 .alarm-time {65 margin-top: 24px;66 font-size: 160px;67 font-weight: 700;68 color: #EAEAEA;69 }70 .alarm-time .amp {71 font-size: 52px; font-weight: 700; vertical-align: top; margin-left: 14px; color: #CFCFCF;72 }73 74 /* Floating action button (behind modal) */75 .fab {76 position: absolute;77 bottom: 370px;78 left: 50%;79 transform: translateX(-50%);80 width: 180px;81 height: 180px;82 background: #5F78A8;83 border-radius: 50%;84 box-shadow: 0 14px 38px rgba(0,0,0,0.5);85 display: flex;86 align-items: center;87 justify-content: center;88 }89 .fab svg { width: 80px; height: 80px; }90 91 /* Time picker modal */92 .modal {93 position: absolute;94 left: 70px;95 top: 600px;96 width: 940px;97 height: 1200px;98 background: #2A3037;99 border-radius: 48px;100 box-shadow: 0 30px 90px rgba(0,0,0,0.6);101 }102 .modal .header {103 padding: 40px 48px 0 48px;104 font-size: 38px;105 color: #C9D1D9;106 }107 .modal .time-row {108 display: flex; align-items: center;109 gap: 28px;110 padding: 28px 48px;111 }112 .time-box {113 width: 260px; height: 160px;114 border-radius: 24px;115 display: flex; align-items: center; justify-content: center;116 font-size: 120px; font-weight: 700;117 letter-spacing: 2px;118 }119 .hour-active { background: #1D4D8A; color: #FFFFFF; }120 .minute-box { background: #4A4E55; color: #DADADA; }121 .colon {122 font-size: 140px; color: #CDCDCD; font-weight: 600; margin-top: -10px;123 }124 .ampm {125 display: flex; flex-direction: column; gap: 12px;126 }127 .ampm .btn {128 width: 130px; height: 72px;129 border-radius: 16px;130 border: 2px solid #7A7D82;131 display: flex; align-items: center; justify-content: center;132 font-size: 34px; font-weight: 600;133 color: #E0E0E0;134 background: #1F2227;135 }136 .ampm .pm {137 background: #6E5A87;138 border-color: #9884B0;139 }140 141 /* Clock face */142 .clock-wrap {143 position: relative;144 margin: 18px auto 0 auto;145 width: 780px; height: 780px;146 background: #333940;147 border-radius: 50%;148 box-shadow: inset 0 0 0 8px rgba(255,255,255,0.06);149 }150 .clock-number {151 position: absolute;152 color: #D4D4D4;153 font-size: 40px;154 font-weight: 500;155 }156 /* Place numbers roughly */157 .n12 { top: 22px; left: 50%; transform: translateX(-50%); }158 .n1 { top: 90px; right: 160px; }159 .n2 { top: 180px; right: 80px; }160 .n3 { top: 360px; right: 38px; }161 .n4 { bottom: 180px; right: 80px; }162 .n5 { bottom: 90px; right: 160px; }163 .n6 { bottom: 22px; left: 50%; transform: translateX(-50%); }164 .n7 { bottom: 90px; left: 160px; }165 .n8 { bottom: 180px; left: 90px; }166 .n9 { top: 360px; left: 36px; }167 .n10 { top: 180px; left: 90px; }168 .n11 { top: 90px; left: 160px; }169 170 /* Hour hand pointing to 12 */171 .hand-center {172 position: absolute;173 top: 50%; left: 50%;174 transform: translate(-50%, -50%);175 width: 0; height: 0;176 }177 .hand {178 position: absolute;179 top: -300px; left: -4px;180 width: 8px; height: 300px;181 background: #9FC2F6;182 border-radius: 4px;183 }184 .knob {185 position: absolute;186 width: 96px; height: 96px;187 background: #9FC2F6;188 border-radius: 50%;189 top: -96px; left: -48px;190 box-shadow: 0 8px 16px rgba(0,0,0,0.25);191 }192 .center-dot {193 position: absolute;194 width: 22px; height: 22px;195 background: #9FC2F6;196 border-radius: 50%;197 top: -10px; left: -11px;198 }199 200 /* Modal footer */201 .modal-footer {202 position: absolute;203 left: 0; right: 0; bottom: 40px;204 padding: 0 48px;205 display: flex; align-items: center; justify-content: space-between;206 }207 .kbd {208 display: inline-flex; align-items: center; gap: 12px; color: #C9D1D9; font-size: 32px;209 }210 .actions { display: flex; gap: 40px; }211 .action {212 font-size: 42px; color: #8AB4F8; font-weight: 600; cursor: default;213 }214 215 /* Bottom navigation bar */216 .bottom-bar {217 position: absolute;218 bottom: 0;219 left: 0;220 width: 100%;221 height: 210px;222 background: #181818;223 border-top-left-radius: 28px;224 border-top-right-radius: 28px;225 box-shadow: 0 -12px 24px rgba(0,0,0,0.5);226 display: flex;227 align-items: center;228 justify-content: space-around;229 color: #BDBDBD;230 }231 .nav-item { display: flex; flex-direction: column; align-items: center; gap: 16px; font-size: 34px; }232 .nav-icon { width: 72px; height: 72px; opacity: 0.9; }233 .nav-item.active { color: #E0E0E0; }234 .gesture {235 position: absolute;236 bottom: 10px; left: 50%; transform: translateX(-50%);237 width: 360px; height: 10px; background: #E0E0E0; opacity: 0.5; border-radius: 6px;238 }239</style>240</head>241<body>242<div id="render-target">243 <!-- Status Bar -->244 <div class="status-bar">245 <div class="status-left">11:26</div>246 <div class="status-right">247 <!-- Simple status icons -->248 <svg class="status-icon" viewBox="0 0 24 24">249 <path d="M3 8h18v8H3z" fill="#9FA8B0"/>250 <path d="M5 10h14v4H5z" fill="#121212"/>251 </svg>252 <svg class="status-icon" viewBox="0 0 24 24">253 <path d="M12 3L2 13h20z" fill="#C0D1FF"/>254 </svg>255 <svg class="status-icon" viewBox="0 0 24 24">256 <rect x="4" y="4" width="16" height="16" rx="2" fill="#D6D6D6"/>257 <rect x="6" y="6" width="12" height="12" rx="1" fill="#121212"/>258 </svg>259 <svg class="status-icon" viewBox="0 0 24 24">260 <path d="M20 8c-2-2-5-3-8-3s-6 1-8 3l2 2c1.5-1.5 4-2.5 6-2.5s4.5 1 6 2.5l2-2z" fill="#EAEAEA"/>261 </svg>262 <svg class="status-icon" viewBox="0 0 24 24">263 <rect x="3" y="7" width="16" height="10" rx="2" fill="#EAEAEA"/>264 <rect x="5" y="9" width="12" height="6" rx="1" fill="#121212"/>265 <rect x="20" y="9" width="2" height="6" rx="1" fill="#EAEAEA"/>266 </svg>267 </div>268 </div>269 270 <!-- Title -->271 <div class="page-title">Alarm</div>272 273 <!-- Background alarm card -->274 <div class="alarm-card">275 <div class="subtle">wake up</div>276 <div class="alarm-time">6:00 <span class="amp">AM</span></div>277 </div>278 279 <!-- Floating Action Button (behind modal) -->280 <div class="fab">281 <svg viewBox="0 0 100 100">282 <rect x="45" y="20" width="10" height="60" rx="4" fill="#FFFFFF"/>283 <rect x="20" y="45" width="60" height="10" rx="4" fill="#FFFFFF"/>284 </svg>285 </div>286 287 <!-- Modal Time Picker -->288 <div class="modal">289 <div class="header">Select time</div>290 <div class="time-row">291 <div class="time-box hour-active">12</div>292 <div class="colon">:</div>293 <div class="time-box minute-box">00</div>294 <div class="ampm">295 <div class="btn">AM</div>296 <div class="btn pm">PM</div>297 </div>298 </div>299 300 <div class="clock-wrap">301 <!-- Numbers around clock -->302 <div class="clock-number n12">12</div>303 <div class="clock-number n1">1</div>304 <div class="clock-number n2">2</div>305 <div class="clock-number n3">3</div>306 <div class="clock-number n4">4</div>307 <div class="clock-number n5">5</div>308 <div class="clock-number n6">6</div>309 <div class="clock-number n7">7</div>310 <div class="clock-number n8">8</div>311 <div class="clock-number n9">9</div>312 <div class="clock-number n10">10</div>313 <div class="clock-number n11">11</div>314 315 <!-- Hand pointing at 12 -->316 <div class="hand-center">317 <div class="hand"></div>318 <div class="knob"></div>319 <div class="center-dot"></div>320 </div>321 </div>322 323 <div class="modal-footer">324 <div class="kbd">325 <svg width="48" height="36" viewBox="0 0 24 16">326 <rect x="1" y="1" width="22" height="14" rx="2" fill="#C9D1D9"/>327 <rect x="2.5" y="4" width="3.5" height="3" fill="#2A3037"/>328 <rect x="7" y="4" width="3.5" height="3" fill="#2A3037"/>329 <rect x="11.5" y="4" width="3.5" height="3" fill="#2A3037"/>330 <rect x="16" y="4" width="3.5" height="3" fill="#2A3037"/>331 <rect x="5" y="9" width="14" height="3" fill="#2A3037"/>332 </svg>333 <!-- Label intentionally omitted (icon only) -->334 </div>335 <div class="actions">336 <div class="action">Cancel</div>337 <div class="action">OK</div>338 </div>339 </div>340 </div>341 342 <!-- Bottom navigation -->343 <div class="bottom-bar">344 <div class="nav-item active">345 <svg class="nav-icon" viewBox="0 0 24 24">346 <circle cx="12" cy="13" r="7" fill="#3A3A3A"/>347 <rect x="6" y="3" width="4" height="4" rx="1" fill="#3A3A3A"/>348 <rect x="14" y="3" width="4" height="4" rx="1" fill="#3A3A3A"/>349 </svg>350 <div>Alarm</div>351 </div>352 <div class="nav-item">353 <svg class="nav-icon" viewBox="0 0 24 24">354 <circle cx="12" cy="12" r="10" fill="#3A3A3A"/>355 <rect x="11" y="6" width="2" height="7" fill="#999"/>356 <rect x="11" y="13" width="5" height="2" fill="#999"/>357 </svg>358 <div>Clock</div>359 </div>360 <div class="nav-item">361 <svg class="nav-icon" viewBox="0 0 24 24">362 <path d="M8 3h8v5l-3 4 3 4v5H8v-5l3-4-3-4V3z" fill="#3A3A3A"/>363 </svg>364 <div>Timer</div>365 </div>366 <div class="nav-item">367 <svg class="nav-icon" viewBox="0 0 24 24">368 <circle cx="12" cy="12" r="9" fill="#3A3A3A"/>369 <rect x="10.5" y="2.5" width="3" height="4" fill="#3A3A3A"/>370 </svg>371 <div>Stopwatch</div>372 </div>373 <div class="nav-item">374 <svg class="nav-icon" viewBox="0 0 24 24">375 <rect x="2" y="11" width="20" height="7" rx="2" fill="#3A3A3A"/>376 <rect x="2" y="8" width="10" height="3" rx="1" fill="#3A3A3A"/>377 </svg>378 <div>Bedtime</div>379 </div>380 <div class="gesture"></div>381 </div>382</div>383</body>384</html>