GD-ML/AndroidCode
13.4k
1<html>2<head>3<meta charset="UTF-8">4<title>Alarm Time Picker Mock</title>5<style>6 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }7 #render-target {8 width: 1080px;9 height: 2400px;10 position: relative;11 overflow: hidden;12 background: #0f0d0a;13 }14 15 /* Status bar */16 .status-bar {17 position: absolute;18 top: 0;19 left: 0;20 width: 1080px;21 height: 110px;22 color: #e9e6e1;23 display: flex;24 align-items: center;25 padding: 0 36px;26 font-weight: 600;27 font-size: 42px;28 }29 .status-right {30 margin-left: auto;31 display: flex;32 align-items: center;33 gap: 24px;34 }35 .icon-wifi, .icon-battery {36 width: 48px; height: 32px;37 }38 .icon-battery rect {39 rx: 5;40 }41 42 /* Page title */43 .page-title {44 position: absolute;45 top: 150px;46 left: 48px;47 font-size: 76px;48 color: #dcd8d2;49 letter-spacing: 1px;50 }51 52 /* Background alarm card (behind modal) */53 .alarm-card {54 position: absolute;55 top: 240px;56 left: 48px;57 width: 984px;58 height: 240px;59 background: #171411;60 border-radius: 40px;61 box-shadow: inset 0 0 0 1px rgba(255,255,255,0.05);62 padding: 40px 44px;63 color: #cfc9c2;64 }65 .alarm-time {66 font-size: 140px;67 color: #eae6e0;68 opacity: 0.85;69 }70 .alarm-sub {71 margin-top: 10px;72 font-size: 44px;73 color: #aaa29a;74 }75 .toggle {76 position: absolute;77 right: 40px;78 top: 90px;79 width: 160px;80 height: 84px;81 background: #2a2521;82 border-radius: 50px;83 }84 .toggle::after{85 content:"";86 position:absolute;87 right: 8px; top: 8px;88 width: 68px; height: 68px;89 background:#bfa88b;90 border-radius:50%;91 opacity:0.35;92 }93 94 /* Floating action button */95 .fab {96 position: absolute;97 left: 50%;98 transform: translateX(-50%);99 bottom: 600px;100 width: 180px;101 height: 180px;102 background: #7a5a3f;103 border-radius: 50%;104 display: flex; align-items: center; justify-content: center;105 box-shadow: 0 10px 30px rgba(0,0,0,0.5);106 color: #f1e5d6;107 font-size: 120px;108 line-height: 0;109 }110 111 /* Modal */112 .modal {113 position: absolute;114 left: 90px;115 top: 470px;116 width: 900px;117 height: 1120px;118 background: #2b231c;119 border-radius: 48px;120 box-shadow: 0 30px 120px rgba(0,0,0,0.55);121 color: #f0e1cf;122 padding: 44px;123 }124 .modal-title {125 font-size: 46px;126 color: #e9dac6;127 opacity: 0.9;128 margin-bottom: 40px;129 }130 131 /* Time readout row */132 .time-row {133 display: flex;134 align-items: center;135 gap: 28px;136 }137 .tile-hour {138 width: 260px; height: 160px;139 background: #4c4138;140 border-radius: 24px;141 display:flex; align-items:center; justify-content:center;142 font-size: 130px; font-weight: 700; color: #f6d7b5;143 }144 .tile-minute {145 width: 260px; height: 160px;146 background: #6c4315;147 border-radius: 24px;148 display:flex; align-items:center; justify-content:center;149 font-size: 130px; font-weight: 700; color: #f6d7b5;150 }151 .colon {152 font-size: 120px; color: #e7c8a3; margin-right: 8px;153 font-weight: 700;154 }155 .ampm {156 margin-left: auto;157 display: flex; flex-direction: column; gap: 18px;158 }159 .ampm button {160 width: 150px; height: 88px;161 border-radius: 16px;162 border: 1px solid rgba(255,255,255,0.1);163 background: #171411;164 color: #e8dccb;165 font-size: 46px;166 }167 .ampm button.active {168 background: #4a522e;169 color: #e8dccb;170 }171 172 /* Dial */173 .dial {174 position: relative;175 margin: 44px auto 24px;176 width: 720px;177 height: 720px;178 background: #3a332d;179 border-radius: 50%;180 box-shadow: inset 0 0 0 2px rgba(255,255,255,0.05);181 }182 .dial .label {183 position: absolute;184 color: #e8e1d6;185 font-size: 48px;186 opacity: 0.9;187 }188 /* Manual positions for minute labels */189 .m00 { left: 340px; top: 24px; }190 .m05 { left: 550px; top: 88px; }191 .m10 { left: 615px; top: 200px; }192 .m15 { left: 660px; top: 330px; }193 .m20 { left: 615px; top: 460px; }194 .m25 { left: 540px; top: 575px; }195 .m30 { left: 340px; top: 645px; }196 .m35 { left: 145px; top: 575px; }197 .m40 { left: 60px; top: 460px; }198 .m45 { left: 24px; top: 330px; }199 .m50 { left: 60px; top: 200px; }200 .m55 { left: 150px; top: 90px; }201 202 .hand-line {203 position: absolute;204 left: 360px; /* center of dial (720/2) minus 6 */205 top: 140px;206 width: 8px;207 height: 420px;208 background: #f0b27b;209 border-radius: 8px;210 }211 .knob {212 position: absolute;213 left: 300px; top: 40px;214 width: 120px; height: 120px;215 background: #f2b585;216 color: #5a3f2a;217 border-radius: 50%;218 display:flex; align-items:center; justify-content:center;219 font-size: 54px; font-weight: 700;220 box-shadow: 0 10px 20px rgba(0,0,0,0.35);221 }222 .hand-dot {223 position: absolute;224 left: 346px; top: 590px;225 width: 28px; height: 28px;226 background: #f2b585;227 border-radius: 50%;228 }229 230 /* Modal footer */231 .modal-footer {232 position: absolute;233 left: 44px; right: 44px; bottom: 24px;234 display: flex; align-items: center;235 }236 .kbd-btn {237 width: 84px; height: 60px;238 border-radius: 12px;239 background: #3a332c;240 border: 1px solid rgba(255,255,255,0.1);241 display: flex; align-items: center; justify-content: center;242 }243 .kbd-grid {244 width: 48px; height: 34px;245 border: 2px solid #cbb79e;246 position: relative;247 }248 .kbd-grid::before, .kbd-grid::after {249 content:""; position:absolute; left:0; right:0;250 border-top: 2px solid #cbb79e;251 }252 .kbd-grid::before { top: 10px; }253 .kbd-grid::after { top: 20px; }254 .modal-actions {255 margin-left: auto;256 display: flex; gap: 48px;257 font-size: 54px; color: #dda670;258 }259 260 /* Bottom navigation */261 .bottom-nav {262 position: absolute;263 bottom: 120px;264 left: 0; width: 1080px; height: 240px;265 background: #14110e;266 display: flex; justify-content: space-around; align-items: center;267 color: #cfc7bc;268 box-shadow: inset 0 0 0 1px rgba(255,255,255,0.03);269 }270 .nav-item {271 width: 180px;272 display: flex; flex-direction: column; align-items: center; gap: 18px;273 font-size: 40px;274 }275 .nav-icon {276 width: 84px; height: 84px; border-radius: 20px;277 border: 2px solid #cfc7bc; position: relative;278 }279 .nav-icon.clock::after {280 content:""; position:absolute; left: 50%; top: 50%;281 width: 4px; height: 24px; background:#cfc7bc; transform: translate(-50%,-50%);282 }283 .nav-icon.timer::after {284 content:""; position:absolute; left: 50%; top: 50%;285 width: 40px; height: 40px; border:2px solid #cfc7bc; border-top: none; transform: translate(-50%,-40%);286 }287 .nav-icon.stopwatch::after {288 content:""; position:absolute; left: 50%; top: 50%;289 width: 44px; height: 44px; border:2px solid #cfc7bc; border-radius: 50%; transform: translate(-50%,-50%);290 }291 .nav-icon.bed::after {292 content:""; position:absolute; left: 16px; top: 40px;293 width: 52px; height: 18px; background:#cfc7bc;294 }295 .gesture-bar {296 position: absolute;297 bottom: 24px; left: 50%; transform: translateX(-50%);298 width: 460px; height: 14px; background: #d6d1cc; border-radius: 12px; opacity: 0.75;299 }300</style>301</head>302<body>303<div id="render-target">304 305 <!-- Status bar -->306 <div class="status-bar">307 <div>7:12</div>308 <div class="status-right">309 <!-- simple mail dot -->310 <svg width="42" height="42"><circle cx="21" cy="21" r="10" fill="#e9e6e1"/></svg>311 <!-- brightness icon -->312 <svg width="42" height="42"><circle cx="21" cy="21" r="16" fill="none" stroke="#e9e6e1" stroke-width="4"/></svg>313 <!-- down arrow -->314 <svg width="42" height="42"><polygon points="10,14 32,14 21,30" fill="#e9e6e1"/></svg>315 <!-- wifi -->316 <svg class="icon-wifi" viewBox="0 0 48 32">317 <path d="M2 8c12-8 32-8 44 0" stroke="#e9e6e1" stroke-width="3" fill="none"/>318 <path d="M8 16c8-6 24-6 32 0" stroke="#e9e6e1" stroke-width="3" fill="none"/>319 <path d="M18 24c5-4 15-4 20 0" stroke="#e9e6e1" stroke-width="3" fill="none"/>320 <circle cx="24" cy="28" r="3" fill="#e9e6e1"/>321 </svg>322 <!-- battery -->323 <svg class="icon-battery" viewBox="0 0 60 32">324 <rect x="2" y="3" width="50" height="26" stroke="#e9e6e1" stroke-width="3" fill="none"/>325 <rect x="54" y="10" width="6" height="12" fill="#e9e6e1"/>326 <rect x="6" y="7" width="36" height="18" fill="#e9e6e1"/>327 </svg>328 </div>329 </div>330 331 <!-- Title -->332 <div class="page-title">Alarm</div>333 334 <!-- Background alarm card -->335 <div class="alarm-card">336 <div class="alarm-time">5:00 <span style="font-size:70px;">PM</span></div>337 <div class="alarm-sub">Mon, Tue, Wed, Thu, Fri</div>338 <div class="toggle"></div>339 </div>340 341 <!-- Floating action button (behind modal) -->342 <div class="fab">+</div>343 344 <!-- Modal -->345 <div class="modal">346 <div class="modal-title">Select time</div>347 348 <div class="time-row">349 <div class="tile-hour">08</div>350 <div class="colon">:</div>351 <div class="tile-minute">00</div>352 <div class="ampm">353 <button>AM</button>354 <button class="active">PM</button>355 </div>356 </div>357 358 <!-- Dial -->359 <div class="dial">360 <div class="label m00">00</div>361 <div class="label m05">05</div>362 <div class="label m10">10</div>363 <div class="label m15">15</div>364 <div class="label m20">20</div>365 <div class="label m25">25</div>366 <div class="label m30">30</div>367 <div class="label m35">35</div>368 <div class="label m40">40</div>369 <div class="label m45">45</div>370 <div class="label m50">50</div>371 <div class="label m55">55</div>372 373 <div class="knob">00</div>374 <div class="hand-line"></div>375 <div class="hand-dot"></div>376 </div>377 378 <!-- Modal footer -->379 <div class="modal-footer">380 <div class="kbd-btn"><div class="kbd-grid"></div></div>381 <div class="modal-actions">382 <div>Cancel</div>383 <div>OK</div>384 </div>385 </div>386 </div>387 388 <!-- Bottom navigation -->389 <div class="bottom-nav">390 <div class="nav-item">391 <div class="nav-icon clock"></div>392 <div>Alarm</div>393 </div>394 <div class="nav-item">395 <div class="nav-icon"></div>396 <div>Clock</div>397 </div>398 <div class="nav-item">399 <div class="nav-icon timer"></div>400 <div>Timer</div>401 </div>402 <div class="nav-item">403 <div class="nav-icon stopwatch"></div>404 <div>Stopwatch</div>405 </div>406 <div class="nav-item">407 <div class="nav-icon bed"></div>408 <div>Bedtime</div>409 </div>410 </div>411 412 <div class="gesture-bar"></div>413</div>414</body>415</html>