GD-ML/AndroidCode

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; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #0f0f12;15    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;16    color: #eee;17  }18 19  /* Status bar */20  .status-bar {21    position: absolute;22    top: 18px;23    left: 24px;24    right: 24px;25    height: 56px;26    display: flex;27    align-items: center;28    justify-content: space-between;29    color: #eaeaea;30    font-size: 36px;31    letter-spacing: 1px;32    opacity: 0.95;33  }34  .status-icons {35    display: flex;36    gap: 22px;37    align-items: center;38  }39  .ic-wifi, .ic-battery {40    width: 40px; height: 40px;41  }42 43  /* Background app content (dimmed under dialog) */44  .page-title {45    position: absolute;46    top: 160px;47    left: 48px;48    font-size: 72px;49    font-weight: 600;50    color: #8f8f93;51    opacity: 0.25;52  }53  .alarm-card {54    position: absolute;55    top: 330px;56    left: 40px;57    right: 40px;58    height: 260px;59    background: #17171b;60    border-radius: 40px;61    box-shadow: 0 12px 40px rgba(0,0,0,0.45) inset;62    opacity: 0.4;63  }64  .alarm-card .time {65    position: absolute;66    left: 48px; top: 50px;67    font-size: 140px;68    color: #bcbcc2;69    opacity: 0.5;70  }71 72  /* Floating action button behind dialog */73  .fab {74    position: absolute;75    bottom: 480px;76    left: 50%;77    transform: translateX(-50%);78    width: 176px; height: 176px;79    border-radius: 50%;80    background: #5c4b78;81    display: flex; align-items: center; justify-content: center;82    color: #e9d7ff;83    font-size: 120px;84    box-shadow: 0 16px 40px rgba(0,0,0,0.55);85    opacity: 0.9;86  }87 88  /* Bottom navigation bar */89  .bottom-bar {90    position: absolute;91    bottom: 110px;92    left: 0; right: 0;93    height: 180px;94    background: #18161c;95    display: flex;96    align-items: center;97    justify-content: space-around;98    color: #bfbfc9;99  }100  .nav-item {101    width: 18%;102    text-align: center;103    font-size: 40px;104  }105  .nav-item .icon-wrap {106    margin: 0 auto 8px;107    width: 108px; height: 84px;108    border-radius: 42px;109    background: transparent;110    display: flex; align-items: center; justify-content: center;111  }112  .nav-item.active .icon-wrap {113    background: #2a2431;114  }115  .nav-item.active { color: #d7c7ff; }116 117  /* Gesture bar */118  .gesture {119    position: absolute;120    bottom: 36px;121    left: 50%;122    transform: translateX(-50%);123    width: 360px; height: 12px;124    border-radius: 6px;125    background: #e9e9ec;126    opacity: 0.9;127  }128 129  /* Dialog */130  .dialog {131    position: absolute;132    left: 60px;133    right: 60px;134    top: 640px;135    height: 1180px;136    background: #29232e;137    border-radius: 56px;138    box-shadow: 0 28px 70px rgba(0,0,0,0.6);139    padding: 44px 44px 32px 44px;140  }141  .dialog .title {142    color: #e9e6ef;143    font-size: 44px;144    margin-bottom: 36px;145    opacity: 0.9;146  }147  .time-row {148    display: flex;149    align-items: center;150    gap: 28px;151    margin-bottom: 34px;152  }153  .time-cell {154    width: 240px; height: 180px;155    border-radius: 28px;156    background: #3a3440;157    color: #f1f1f7;158    display: flex; align-items: center; justify-content: center;159    font-size: 120px;160    font-weight: 700;161  }162  .time-cell.active {163    background: #6b46a5;164    color: #f4eaff;165  }166  .colon {167    font-size: 120px; color: #d7c7ff; margin: 0 8px;168  }169  .ampm {170    margin-left: auto;171    width: 160px; height: 180px;172    border-radius: 22px;173    border: 3px solid #8e889a;174    overflow: hidden;175    display: flex; flex-direction: column;176  }177  .ampm div {178    flex: 1;179    display: flex; align-items: center; justify-content: center;180    font-size: 48px; font-weight: 700;181  }182  .ampm .am { background: #5b3b3f; color: #f4e6ea; }183  .ampm .pm { background: #1f1c23; color: #d3cfe0; }184 185  /* Analog minute picker */186  .dial-wrap {187    position: relative;188    margin-top: 28px;189    height: 750px;190    display: flex; align-items: center; justify-content: center;191  }192  .dial {193    position: relative;194    width: 720px; height: 720px;195    background: #3a3440;196    border-radius: 50%;197    box-shadow: inset 0 0 0 2px rgba(255,255,255,0.04);198  }199  .dial .num {200    position: absolute;201    color: #e5e4ea;202    font-size: 44px;203    opacity: 0.9;204  }205  /* Positions for 00,05,...55 around circle */206  .n00 { top: -10px; left: 50%; transform: translateX(-50%); }207  .n05 { top: 60px; right: 120px; }208  .n10 { top: 200px; right: 40px; }209  .n15 { top: 340px; right: -6px; }210  .n20 { bottom: 200px; right: 40px; }211  .n25 { bottom: 60px; right: 120px; }212  .n30 { bottom: -10px; left: 50%; transform: translateX(-50%); }213  .n35 { bottom: 60px; left: 120px; }214  .n40 { bottom: 200px; left: 40px; }215  .n45 { top: 340px; left: -6px; }216  .n50 { top: 200px; left: 40px; }217  .n55 { top: 60px; left: 120px; }218 219  /* Pointer to 15 */220  .pointer {221    position: absolute;222    left: 50%; top: 50%;223    width: 310px; height: 4px;224    background: #d9b6ff;225    transform-origin: left center;226    transform: translate(-2px, -2px) rotate(0deg);227  }228  .pointer .knob {229    position: absolute; right: -56px; top: 50%;230    width: 112px; height: 112px;231    transform: translateY(-50%);232    background: #d9b6ff;233    border-radius: 50%;234    display: flex; align-items: center; justify-content: center;235    color: #4a3b5e; font-weight: 700; font-size: 44px;236  }237  .center-dot {238    position: absolute;239    left: 50%; top: 50%;240    width: 20px; height: 20px;241    background: #d9b6ff;242    border-radius: 50%;243    transform: translate(-50%,-50%);244  }245 246  /* Dialog bottom actions */247  .dialog-actions {248    position: absolute;249    left: 44px; right: 44px; bottom: 36px;250    display: flex; align-items: center;251  }252  .kbd {253    display: inline-flex; align-items: center; gap: 14px;254    color: #d9c8ff;255    font-size: 40px;256  }257  .spacer { flex: 1; }258  .btn {259    margin-left: 40px;260    font-size: 48px;261    color: #d9c8ff;262  }263</style>264</head>265<body>266<div id="render-target">267 268  <!-- Status bar -->269  <div class="status-bar">270    <div>10:13</div>271    <div class="status-icons">272      <!-- simple mock icons -->273      <svg class="ic-wifi" viewBox="0 0 24 24" fill="#eaeaea">274        <path d="M12 20l2-2-2-2-2 2 2 2zm-6-6l2-2c2.2-2.2 5.8-2.2 8 0l2 2 2-2c-3.5-3.5-10.5-3.5-14 0l2 2z"/>275      </svg>276      <svg class="ic-battery" viewBox="0 0 24 24" fill="#eaeaea">277        <path d="M16 6h2v12h-2V6zM4 8h12v8H4V8z"/>278      </svg>279    </div>280  </div>281 282  <!-- Background page content -->283  <div class="page-title">Alarm</div>284  <div class="alarm-card">285    <div class="time">8:30</div>286  </div>287 288  <!-- Floating Action Button (under dialog) -->289  <div class="fab">+</div>290 291  <!-- Time Picker Dialog -->292  <div class="dialog">293    <div class="title">Select time</div>294 295    <div class="time-row">296      <div class="time-cell">09</div>297      <div class="colon">:</div>298      <div class="time-cell active">15</div>299 300      <div class="ampm">301        <div class="am">AM</div>302        <div class="pm">PM</div>303      </div>304    </div>305 306    <div class="dial-wrap">307      <div class="dial">308        <div class="num n00">00</div>309        <div class="num n05">05</div>310        <div class="num n10">10</div>311        <div class="num n15">15</div>312        <div class="num n20">20</div>313        <div class="num n25">25</div>314        <div class="num n30">30</div>315        <div class="num n35">35</div>316        <div class="num n40">40</div>317        <div class="num n45">45</div>318        <div class="num n50">50</div>319        <div class="num n55">55</div>320 321        <div class="pointer">322          <div class="knob">15</div>323        </div>324        <div class="center-dot"></div>325      </div>326    </div>327 328    <div class="dialog-actions">329      <div class="kbd">330        <svg width="56" height="56" viewBox="0 0 24 24" fill="#d9c8ff">331          <path d="M3 7h18v10H3V7zm2 2v6h14V9H5zm1 1h2v2H6v-2zm3 0h2v2H9v-2zm3 0h2v2h-2v-2zm3 0h2v2h-2v-2zM6 14h12v1H6v-1z"/>332        </svg>333      </div>334      <div class="spacer"></div>335      <div class="btn">Cancel</div>336      <div class="btn">OK</div>337    </div>338  </div>339 340  <!-- Bottom navigation -->341  <div class="bottom-bar">342    <div class="nav-item active">343      <div class="icon-wrap">344        <svg width="56" height="56" viewBox="0 0 24 24" fill="#d7c7ff">345          <path d="M12 6a6 6 0 0 0-6 6h2a4 4 0 0 1 8 0h2a6 6 0 0 0-6-6zm-1 6V9h2v5h4v2H11v-7z"/>346        </svg>347      </div>348      Alarm349    </div>350    <div class="nav-item">351      <div class="icon-wrap">352        <svg width="56" height="56" viewBox="0 0 24 24" fill="#bfbfc9">353          <path d="M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm1 11h5v2h-7V6h2v7z"/>354        </svg>355      </div>356      Clock357    </div>358    <div class="nav-item">359      <div class="icon-wrap">360        <svg width="56" height="56" viewBox="0 0 24 24" fill="#bfbfc9">361          <path d="M7 2h10v3H7V2zM5 6h14l-2 14H7L5 6zm6 3v7h2V9h-2z"/>362        </svg>363      </div>364      Timer365    </div>366    <div class="nav-item">367      <div class="icon-wrap">368        <svg width="56" height="56" viewBox="0 0 24 24" fill="#bfbfc9">369          <path d="M7 2h10v2H7V2zM4 6h16v2H4V6zm8 3a7 7 0 1 0 .001 14.001A7 7 0 0 0 12 9zm1 3v4h4v2h-6v-6h2z"/>370        </svg>371      </div>372      Stopwatch373    </div>374    <div class="nav-item">375      <div class="icon-wrap">376        <svg width="56" height="56" viewBox="0 0 24 24" fill="#bfbfc9">377          <path d="M4 10h10v8H4v-8zm12 0h4v8h-4v-8zM6 8h8V6H6v2z"/>378        </svg>379      </div>380      Bedtime381    </div>382  </div>383 384  <div class="gesture"></div>385</div>386</body>387</html>