GD-ML/AndroidCode

1<!DOCTYPE html>2<html>3<head>4<meta charset="UTF-8">5<title>Alarm Time Picker Mock</title>6<style>7  body { margin: 0; padding: 0; background: transparent; }8  #render-target {9    width: 1080px;10    height: 2400px;11    position: relative;12    overflow: hidden;13    background: #0d0c11;14    font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;15    color: #FFFFFF;16  }17 18  /* Status bar */19  .status-bar {20    position: absolute;21    left: 0; top: 0;22    width: 1080px; height: 110px;23    padding: 0 36px;24    box-sizing: border-box;25    display: flex; align-items: center; justify-content: space-between;26    color: rgba(255,255,255,0.95);27    font-size: 40px; letter-spacing: 0.5px;28  }29  .status-icons {30    display: flex; gap: 24px; align-items: center;31  }32  .icon-play {33    width: 34px; height: 34px;34  }35  .icon-g {36    width: 34px; height: 34px;37    border-radius: 50%;38    border: 2px solid rgba(255,255,255,0.9);39  }40  .icon-wifi, .icon-battery {41    width: 40px; height: 40px;42  }43 44  /* Page title */45  .page-title {46    position: absolute; left: 60px; top: 210px;47    font-size: 86px; font-weight: 500;48    color: rgba(255,255,255,0.22);49  }50 51  /* Alarm card behind modal */52  .alarm-card {53    position: absolute; left: 60px; top: 410px;54    width: 960px; height: 280px;55    background: #141218;56    border-radius: 48px;57    box-shadow: 0 14px 40px rgba(0,0,0,0.55);58  }59  .alarm-time {60    position: absolute; left: 48px; top: 40px;61    font-size: 160px; font-weight: 500;62    color: rgba(255,255,255,0.85);63  }64  .alarm-am {65    position: absolute; left: 640px; top: 80px;66    font-size: 56px; color: rgba(255,255,255,0.65);67  }68  .alarm-expander {69    position: absolute; right: 32px; top: 32px;70    width: 60px; height: 60px; display: flex; align-items: center; justify-content: center;71    border-radius: 30px;72    background: rgba(255,255,255,0.06);73  }74 75  /* Floating Action Button behind modal */76  .fab {77    position: absolute; left: 430px; top: 1540px;78    width: 220px; height: 220px; border-radius: 50%;79    background: #6f5a85;80    box-shadow: 0 18px 40px rgba(0,0,0,0.6);81    display: flex; align-items: center; justify-content: center;82  }83  .fab::before, .fab::after {84    content: "";85    position: absolute; background: #2c2331;86  }87  .fab::before { width: 12px; height: 90px; border-radius: 6px; }88  .fab::after { width: 90px; height: 12px; border-radius: 6px; }89 90  /* Modal */91  .modal {92    position: absolute; left: 80px; top: 660px;93    width: 920px; height: 1180px;94    background: #362f39;95    border-radius: 46px;96    box-shadow: 0 36px 80px rgba(0,0,0,0.7);97  }98  .modal-header {99    position: absolute; left: 60px; top: 52px;100    font-size: 46px; color: rgba(255,255,255,0.85);101  }102 103  /* Time selection row */104  .time-row {105    position: absolute; left: 60px; top: 150px;106    display: flex; align-items: center; gap: 28px;107  }108  .time-box {109    width: 220px; height: 160px; border-radius: 26px;110    background: #4a4450;111    display: flex; align-items: center; justify-content: center;112    color: rgba(255,255,255,0.92);113    font-size: 110px; font-weight: 600;114    letter-spacing: 2px;115  }116  .time-box.minute {117    background: #6f4b91;118    color: #f4e8ff;119  }120  .colon {121    font-size: 120px; color: rgba(255,255,255,0.8); font-weight: 700;122    margin: 0 8px;123  }124  .ampm {125    width: 160px; height: 160px;126    border-radius: 18px;127    border: 2px solid rgba(255,255,255,0.5);128    overflow: hidden;129  }130  .ampm div {131    height: 50%;132    display: flex; align-items: center; justify-content: center;133    font-size: 42px; font-weight: 600;134  }135  .ampm .am { background: #643a3a; color: #ffe9e9; }136  .ampm .pm { background: #1f1b22; color: rgba(255,255,255,0.85); }137 138  /* Dial area */139  .dial {140    position: absolute; left: 70px; top: 360px;141    width: 780px; height: 780px;142    border-radius: 50%;143    background: radial-gradient(closest-side, #3d3742 0%, #332d37 60%, #2c2630 100%);144  }145  .dial-center {146    position: absolute; left: 50%; top: 50%;147    width: 0; height: 0; transform: translate(-50%, -50%);148  }149  .dial .label {150    position: absolute; left: 50%; top: 50%;151    width: 70px; height: 40px; line-height: 40px; text-align: center;152    color: rgba(255,255,255,0.8); font-size: 42px;153    transform-origin: 0 0;154  }155  /* Minute labels positioned by rotation */156  .deg0  { transform: rotate(0deg)   translate(-35px, -350px) rotate(0deg); }157  .deg30 { transform: rotate(30deg)  translate(-35px, -350px) rotate(-30deg); }158  .deg60 { transform: rotate(60deg)  translate(-35px, -350px) rotate(-60deg); }159  .deg90 { transform: rotate(90deg)  translate(-35px, -350px) rotate(-90deg); }160  .deg120{ transform: rotate(120deg) translate(-35px, -350px) rotate(-120deg); }161  .deg150{ transform: rotate(150deg) translate(-35px, -350px) rotate(-150deg); }162  .deg180{ transform: rotate(180deg) translate(-35px, -350px) rotate(-180deg); }163  .deg210{ transform: rotate(210deg) translate(-35px, -350px) rotate(-210deg); }164  .deg240{ transform: rotate(240deg) translate(-35px, -350px) rotate(-240deg); }165  .deg270{ transform: rotate(270deg) translate(-35px, -350px) rotate(-270deg); }166  .deg300{ transform: rotate(300deg) translate(-35px, -350px) rotate(-300deg); }167  .deg330{ transform: rotate(330deg) translate(-35px, -350px) rotate(-330deg); }168 169  .hand {170    position: absolute; left: 50%; top: 50%;171    transform: translate(-50%, -50%);172    width: 6px; height: 310px; background: #d6b7f8; border-radius: 3px;173  }174  .hand-end {175    position: absolute; left: 50%; top: calc(50% - 310px);176    transform: translate(-50%, -50%);177    width: 26px; height: 26px; background: #d6b7f8; border-radius: 50%;178  }179  .hand-top {180    position: absolute; left: 50%; top: calc(50% - 386px);181    transform: translate(-50%, -50%);182    width: 120px; height: 120px; border-radius: 60px;183    background: #d6b7f8; color: #2b2133;184    display: flex; align-items: center; justify-content: center;185    font-size: 48px; font-weight: 700;186    box-shadow: 0 4px 12px rgba(0,0,0,0.4);187  }188 189  /* Modal footer */190  .modal-footer {191    position: absolute; left: 40px; right: 40px; bottom: 40px;192    display: flex; align-items: center; justify-content: space-between;193  }194  .footer-left {195    display: flex; align-items: center; gap: 16px; color: rgba(255,255,255,0.8);196    font-size: 36px;197  }198  .footer-right {199    display: flex; align-items: center; gap: 40px;200    font-size: 44px; font-weight: 600; color: #d6b7f8;201  }202 203  /* Bottom navigation bar */204  .bottom-bar {205    position: absolute; left: 0; bottom: 120px;206    width: 1080px; height: 220px; background: #1a171f;207    display: flex; align-items: center; justify-content: space-around;208    box-shadow: 0 -20px 40px rgba(0,0,0,0.5) inset;209  }210  .nav-item {211    width: 20%; text-align: center; color: rgba(255,255,255,0.6);212    font-size: 40px;213  }214  .nav-icon {215    width: 100px; height: 100px; margin: 0 auto 12px auto;216    display: flex; align-items: center; justify-content: center;217  }218  .nav-item.active { color: rgba(255,255,255,0.9); }219  .nav-item.active .nav-icon-bg {220    width: 140px; height: 100px; border-radius: 50px;221    background: rgba(129,96,165,0.25); margin: 0 auto 10px auto;222    display: flex; align-items: center; justify-content: center;223  }224 225  /* Gesture handle */226  .gesture {227    position: absolute; left: 390px; bottom: 40px;228    width: 300px; height: 16px; background: rgba(255,255,255,0.9);229    border-radius: 12px;230  }231</style>232</head>233<body>234<div id="render-target">235 236  <!-- Status bar -->237  <div class="status-bar">238    <div>10:11</div>239    <div class="status-icons">240      <svg class="icon-play" viewBox="0 0 24 24">241        <polygon points="6,4 20,12 6,20" fill="white" opacity="0.9"></polygon>242      </svg>243      <div class="icon-g"></div>244      <svg class="icon-wifi" viewBox="0 0 24 24">245        <path d="M2 8c5-4 15-4 20 0M5 12c3-2 11-2 14 0M9 16c2-1 6-1 8 0M12 20a2 2 0 1 0 0-0.1" stroke="white" stroke-width="2" fill="none" stroke-linecap="round" opacity="0.9"/>246      </svg>247      <svg class="icon-battery" viewBox="0 0 28 24">248        <rect x="2" y="5" width="22" height="14" rx="3" ry="3" stroke="white" stroke-width="2" fill="none"/>249        <rect x="24" y="9" width="3" height="6" fill="white"/>250        <rect x="4" y="7" width="14" height="10" fill="white" opacity="0.9"/>251      </svg>252    </div>253  </div>254 255  <!-- Title -->256  <div class="page-title">Alarm</div>257 258  <!-- Alarm card in the background -->259  <div class="alarm-card">260    <div class="alarm-time">8:30</div>261    <div class="alarm-am">AM</div>262    <div class="alarm-expander">263      <svg width="34" height="34" viewBox="0 0 24 24">264        <path d="M8 10l4 4 4-4" stroke="#C7C2CF" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>265      </svg>266    </div>267  </div>268 269  <!-- Floating Action Button -->270  <div class="fab"></div>271 272  <!-- Modal dialog -->273  <div class="modal">274    <div class="modal-header">Select time</div>275 276    <div class="time-row">277      <div class="time-box">09</div>278      <div class="colon">:</div>279      <div class="time-box minute">00</div>280      <div class="ampm">281        <div class="am">AM</div>282        <div class="pm">PM</div>283      </div>284    </div>285 286    <!-- Circular dial -->287    <div class="dial">288      <!-- Minute labels -->289      <div class="label deg0">00</div>290      <div class="label deg30">05</div>291      <div class="label deg60">10</div>292      <div class="label deg90">15</div>293      <div class="label deg120">20</div>294      <div class="label deg150">25</div>295      <div class="label deg180">30</div>296      <div class="label deg210">35</div>297      <div class="label deg240">40</div>298      <div class="label deg270">45</div>299      <div class="label deg300">50</div>300      <div class="label deg330">55</div>301 302      <!-- Hand pointing to 00 -->303      <div class="hand"></div>304      <div class="hand-end"></div>305      <div class="hand-top">00</div>306    </div>307 308    <!-- Footer -->309    <div class="modal-footer">310      <div class="footer-left">311        <svg width="56" height="56" viewBox="0 0 24 24">312          <rect x="2" y="4" width="20" height="16" rx="2" ry="2" stroke="#d6b7f8" stroke-width="2" fill="none"/>313          <rect x="5" y="8" width="3" height="2" fill="#d6b7f8"/>314          <rect x="9" y="8" width="3" height="2" fill="#d6b7f8"/>315          <rect x="13" y="8" width="3" height="2" fill="#d6b7f8"/>316          <rect x="5" y="12" width="3" height="2" fill="#d6b7f8"/>317          <rect x="9" y="12" width="3" height="2" fill="#d6b7f8"/>318          <rect x="13" y="12" width="3" height="2" fill="#d6b7f8"/>319        </svg>320      </div>321      <div class="footer-right">322        <div>Cancel</div>323        <div>OK</div>324      </div>325    </div>326  </div>327 328  <!-- Bottom navigation bar -->329  <div class="bottom-bar">330    <div class="nav-item active">331      <div class="nav-icon-bg">332        <div class="nav-icon">333          <svg width="80" height="80" viewBox="0 0 24 24">334            <circle cx="12" cy="12" r="8" stroke="#cdb3ef" stroke-width="2" fill="none"/>335            <path d="M12 6v6l4 2" stroke="#cdb3ef" stroke-width="2" fill="none" stroke-linecap="round"/>336          </svg>337        </div>338      </div>339      Alarm340    </div>341    <div class="nav-item">342      <div class="nav-icon">343        <svg width="80" height="80" viewBox="0 0 24 24">344          <circle cx="12" cy="12" r="8" stroke="#aaa" stroke-width="2" fill="none"/>345          <path d="M12 4v8h6" stroke="#aaa" stroke-width="2" fill="none" stroke-linecap="round"/>346        </svg>347      </div>348      Clock349    </div>350    <div class="nav-item">351      <div class="nav-icon">352        <svg width="80" height="80" viewBox="0 0 24 24">353          <path d="M8 4l8 0-2 6 2 10-8 0 2-10-2-6z" stroke="#aaa" stroke-width="2" fill="none" stroke-linejoin="round"/>354        </svg>355      </div>356      Timer357    </div>358    <div class="nav-item">359      <div class="nav-icon">360        <svg width="80" height="80" viewBox="0 0 24 24">361          <circle cx="12" cy="13" r="7" stroke="#aaa" stroke-width="2" fill="none"/>362          <rect x="10" y="3" width="4" height="3" fill="#aaa"/>363        </svg>364      </div>365      Stopwatch366    </div>367    <div class="nav-item">368      <div class="nav-icon">369        <svg width="80" height="80" viewBox="0 0 24 24">370          <rect x="3" y="11" width="18" height="7" rx="2" ry="2" stroke="#aaa" stroke-width="2" fill="none"/>371          <rect x="5" y="11" width="8" height="4" fill="#aaa" opacity="0.7"/>372          <rect x="15" y="11" width="4" height="3" fill="#aaa" opacity="0.7"/>373        </svg>374      </div>375      Bedtime376    </div>377  </div>378 379  <!-- Gesture handle -->380  <div class="gesture"></div>381</div>382</body>383</html>