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</title>7<style>8  body { margin: 0; padding: 0; background: transparent; }9  #render-target {10    position: relative;11    width: 1080px;12    height: 2400px;13    overflow: hidden;14    background: #0a1d14; /* deep green */15    font-family: Roboto, "Segoe UI", Arial, sans-serif;16    color: #d8e9df;17  }18 19  /* Status bar */20  .status-bar {21    position: absolute;22    top: 0;23    left: 0;24    height: 120px;25    width: 100%;26    padding: 0 36px;27    display: flex;28    align-items: center;29    justify-content: space-between;30    color: #e8f5ea;31    font-size: 42px;32    font-weight: 600;33  }34  .sb-icons {35    display: flex;36    align-items: center;37    gap: 22px;38  }39  .sb-icon { width: 44px; height: 44px; opacity: 0.95; }40 41  /* Page header */42  .page-title {43    position: absolute;44    top: 150px;45    left: 40px;46    font-size: 82px;47    color: #6b8577;48    font-weight: 500;49    letter-spacing: 0.5px;50  }51  .menu-dots {52    position: absolute;53    top: 160px;54    right: 35px;55    width: 20px;56    height: 90px;57    display: flex;58    flex-direction: column;59    justify-content: space-between;60    opacity: 0.7;61  }62  .menu-dots span {63    width: 14px;64    height: 14px;65    background: #798e82;66    border-radius: 50%;67    display: block;68  }69 70  /* Background cards (dimmed behind dialog) */71  .card {72    position: absolute;73    left: 36px;74    right: 36px;75    height: 380px;76    background: #0f261b;77    border-radius: 40px;78    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.04);79    color: #a9b9af;80  }81  .card.card-top { top: 300px; }82  .card.card-bottom { top: 1400px; }83  .card h3 {84    margin: 34px 38px 0;85    font-size: 40px;86    font-weight: 500;87    color: #8ea397;88  }89  .card .time {90    margin: 10px 38px;91    font-size: 120px;92    font-weight: 700;93    color: #cfe2d6;94  }95  .card .sub {96    margin: 0 38px;97    font-size: 34px;98    color: #83988b;99  }100 101  /* Floating add button (behind dialog) */102  .fab {103    position: absolute;104    left: 450px;105    top: 1150px;106    width: 180px;107    height: 180px;108    border-radius: 50%;109    background: #17a552;110    display: flex;111    align-items: center;112    justify-content: center;113    color: #07331f;114    font-size: 120px;115    font-weight: 400;116    box-shadow: 0 10px 30px rgba(0,0,0,0.45);117  }118 119  /* Time picker dialog */120  .dialog {121    position: absolute;122    left: 60px;123    top: 560px;124    width: 960px;125    height: 1220px;126    background: #123a2b;127    border-radius: 52px;128    box-shadow: 0 48px 96px rgba(0,0,0,0.7);129    overflow: hidden;130  }131  .dialog .header {132    padding: 34px 40px;133    font-size: 40px;134    color: #cfe8d7;135  }136  .time-row {137    display: flex;138    align-items: center;139    gap: 26px;140    padding: 10px 40px 20px;141  }142  .box {143    width: 240px;144    height: 170px;145    border-radius: 26px;146    display: flex;147    align-items: center;148    justify-content: center;149    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06);150  }151  .box.hour { background: #0d6b3b; }152  .box.minute { background: #445751; }153  .digit {154    font-size: 140px;155    line-height: 1;156    font-weight: 700;157  }158  .digit.hour { color: #44ff8a; }159  .digit.minute { color: #e6efe8; }160  .colon {161    font-size: 140px;162    color: #cfd7d0;163    margin: 0 8px;164    line-height: 150px;165  }166  .ampm {167    display: flex;168    flex-direction: column;169    gap: 14px;170    margin-left: auto;171    margin-right: 40px;172  }173  .ampm div {174    width: 140px;175    height: 80px;176    border-radius: 18px;177    border: 2px solid #2e5d4d;178    display: flex;179    align-items: center;180    justify-content: center;181    font-size: 36px;182    color: #cfe8d7;183    letter-spacing: 1px;184  }185  .ampm .selected {186    background: #0f6a5f;187    border-color: #0f6a5f;188    color: #b9ece1;189  }190 191  /* Clock face */192  .clock {193    position: relative;194    width: 740px;195    height: 740px;196    margin: 18px auto 0;197    border-radius: 50%;198    background: #3c4b44;199  }200  .clock .num {201    position: absolute;202    font-size: 42px;203    color: #dfe9e1;204    opacity: 0.9;205  }206  /* positions */207  .n12 { left: 346px; top: 26px; }208  .n1  { left: 520px; top: 80px; }209  .n2  { left: 620px; top: 180px; }210  .n3  { left: 690px; top: 330px; }211  .n4  { left: 620px; top: 480px; }212  .n5  { left: 520px; top: 580px; }213  .n6  { left: 350px; top: 650px; }214  .n7  { left: 180px; top: 580px; }215  .n8  { left: 80px;  top: 480px; }216  .n9  { left: 28px;  top: 330px; }217  .n10 { left: 80px;  top: 180px; }218  .n11 { left: 180px; top: 80px; }219 220  /* Hour hand and markers */221  .center-dot {222    position: absolute;223    left: 366px; top: 366px;224    width: 8px; height: 8px;225    border-radius: 50%;226    background: #2bec6f;227    opacity: 0.9;228  }229  .hand {230    position: absolute;231    width: 4px;232    height: 260px;233    background: #2bec6f;234    left: 368px;235    top: 110px;236    transform-origin: 50% 100%;237    transform: rotate(230deg); /* pointing to '7' */238  }239  .hand-tip {240    position: absolute;241    width: 16px; height: 16px;242    border-radius: 50%;243    background: #2bec6f;244    left: 362px; top: 118px; /* near the tip above the hand start */245  }246  .hour-bubble {247    position: absolute;248    left: 185px;249    top: 565px;250    width: 120px;251    height: 120px;252    border-radius: 50%;253    background: #2df370;254    color: #063a23;255    display: flex;256    align-items: center;257    justify-content: center;258    font-size: 56px;259    font-weight: 700;260  }261 262  /* Dialog footer */263  .dialog-footer {264    position: absolute;265    left: 40px;266    right: 40px;267    bottom: 30px;268    display: flex;269    align-items: center;270    justify-content: space-between;271  }272  .footer-actions {273    display: flex;274    gap: 40px;275    align-items: center;276    font-size: 40px;277  }278  .action {279    color: #37ee7d;280    cursor: default;281  }282 283  /* Bottom navigation */284  .bottom-nav {285    position: absolute;286    left: 0;287    bottom: 120px;288    width: 100%;289    height: 200px;290    background: rgba(8, 24, 16, 0.95);291    display: flex;292    align-items: center;293    justify-content: space-around;294    padding: 0 20px;295  }296  .nav-item {297    width: 200px;298    height: 140px;299    border-radius: 80px;300    display: flex;301    flex-direction: column;302    align-items: center;303    justify-content: center;304    gap: 14px;305    color: #98ada3;306    font-size: 34px;307  }308  .nav-item.selected {309    background: #132a21;310    color: #eaf3ee;311  }312  .nav-icon { width: 64px; height: 64px; }313 314  /* Gesture bar */315  .gesture {316    position: absolute;317    bottom: 40px;318    left: 50%;319    transform: translateX(-50%);320    width: 260px;321    height: 12px;322    background: #e9e9ea;323    border-radius: 8px;324    opacity: 0.9;325  }326</style>327</head>328<body>329<div id="render-target">330 331  <!-- Status bar -->332  <div class="status-bar">333    <div>12:24</div>334    <div class="sb-icons">335      <!-- Cellular bars -->336      <svg class="sb-icon" viewBox="0 0 24 24">337        <rect x="2" y="16" width="3" height="6" fill="#e8f5ea"/>338        <rect x="7" y="12" width="3" height="10" fill="#e8f5ea"/>339        <rect x="12" y="8" width="3" height="14" fill="#e8f5ea"/>340        <rect x="17" y="4" width="3" height="18" fill="#e8f5ea"/>341      </svg>342      <!-- Wi-Fi -->343      <svg class="sb-icon" viewBox="0 0 24 24">344        <path d="M2 8c5-5 15-5 20 0" stroke="#e8f5ea" stroke-width="2" fill="none"/>345        <path d="M6 12c3-3 9-3 12 0" stroke="#e8f5ea" stroke-width="2" fill="none"/>346        <circle cx="12" cy="16" r="2" fill="#e8f5ea"/>347      </svg>348      <!-- App icons (simple squares/circles) -->349      <svg class="sb-icon" viewBox="0 0 24 24">350        <rect x="4" y="4" width="16" height="16" rx="2" fill="#e8f5ea"/>351      </svg>352      <svg class="sb-icon" viewBox="0 0 24 24">353        <circle cx="12" cy="12" r="10" fill="#e8f5ea"/>354      </svg>355      <svg class="sb-icon" viewBox="0 0 24 24">356        <circle cx="12" cy="12" r="3" fill="#e8f5ea"/>357      </svg>358      <!-- Battery -->359      <svg class="sb-icon" viewBox="0 0 36 24">360        <rect x="2" y="5" width="28" height="14" rx="3" stroke="#e8f5ea" stroke-width="2" fill="none"/>361        <rect x="5" y="8" width="20" height="8" rx="2" fill="#e8f5ea"/>362        <rect x="30" y="9" width="4" height="6" rx="1" fill="#e8f5ea"/>363      </svg>364    </div>365  </div>366 367  <!-- Page title and menu -->368  <div class="page-title">Alarm</div>369  <div class="menu-dots">370    <span></span><span></span><span></span>371  </div>372 373  <!-- Background cards -->374  <div class="card card-top">375    <h3>yoga session</h3>376    <div class="time">7:00 <span style="font-size:40px; margin-left:8px; color:#8ca69a;">AM</span></div>377    <div class="sub">Tomorrow • Repeat weekly</div>378  </div>379 380  <div class="card card-bottom">381    <h3>wakeup</h3>382    <div class="time">7:00 <span style="font-size:40px; margin-left:8px; color:#8ca69a;">AM</span></div>383    <div class="sub">Weekdays</div>384  </div>385 386  <!-- Floating Add button -->387  <div class="fab">+</div>388 389  <!-- Dialog -->390  <div class="dialog">391    <div class="header">Select time</div>392    <div class="time-row">393      <div class="box hour"><div class="digit hour">07</div></div>394      <div class="colon">:</div>395      <div class="box minute"><div class="digit minute">00</div></div>396      <div class="ampm">397        <div class="selected">AM</div>398        <div>PM</div>399      </div>400    </div>401 402    <div class="clock">403      <div class="num n12">12</div>404      <div class="num n1">1</div>405      <div class="num n2">2</div>406      <div class="num n3">3</div>407      <div class="num n4">4</div>408      <div class="num n5">5</div>409      <div class="num n6">6</div>410      <div class="num n7">7</div>411      <div class="num n8">8</div>412      <div class="num n9">9</div>413      <div class="num n10">10</div>414      <div class="num n11">11</div>415 416      <div class="center-dot"></div>417      <div class="hand"></div>418      <div class="hand-tip"></div>419      <div class="hour-bubble">7</div>420    </div>421 422    <div class="dialog-footer">423      <!-- Keyboard icon -->424      <svg class="nav-icon" viewBox="0 0 48 48">425        <rect x="2" y="10" width="44" height="28" rx="4" stroke="#cfe8d7" stroke-width="2" fill="none"/>426        <rect x="8" y="16" width="6" height="6" fill="#cfe8d7"/>427        <rect x="18" y="16" width="6" height="6" fill="#cfe8d7"/>428        <rect x="28" y="16" width="6" height="6" fill="#cfe8d7"/>429        <rect x="38" y="16" width="6" height="6" fill="#cfe8d7"/>430        <rect x="8" y="26" width="28" height="6" fill="#cfe8d7"/>431      </svg>432 433      <div class="footer-actions">434        <div class="action">Cancel</div>435        <div class="action">OK</div>436      </div>437    </div>438  </div>439 440  <!-- Bottom navigation -->441  <div class="bottom-nav">442    <div class="nav-item selected">443      <svg class="nav-icon" viewBox="0 0 64 64">444        <circle cx="32" cy="36" r="16" stroke="#eaf3ee" stroke-width="3" fill="none"/>445        <path d="M20 18 L28 10" stroke="#eaf3ee" stroke-width="3"/>446        <path d="M44 18 L36 10" stroke="#eaf3ee" stroke-width="3"/>447      </svg>448      <div>Alarm</div>449    </div>450    <div class="nav-item">451      <svg class="nav-icon" viewBox="0 0 64 64">452        <circle cx="32" cy="32" r="22" stroke="#98ada3" stroke-width="3" fill="none"/>453        <path d="M32 32 L32 18" stroke="#98ada3" stroke-width="3"/>454        <path d="M32 32 L44 32" stroke="#98ada3" stroke-width="3"/>455      </svg>456      <div>Clock</div>457    </div>458    <div class="nav-item">459      <svg class="nav-icon" viewBox="0 0 64 64">460        <path d="M24 16 L40 16 L32 30 L40 48 L24 48 L32 34 Z" fill="none" stroke="#98ada3" stroke-width="3"/>461      </svg>462      <div>Timer</div>463    </div>464    <div class="nav-item">465      <svg class="nav-icon" viewBox="0 0 64 64">466        <circle cx="32" cy="36" r="16" stroke="#98ada3" stroke-width="3" fill="none"/>467        <rect x="30" y="12" width="4" height="6" fill="#98ada3"/>468      </svg>469      <div>Stopwatch</div>470    </div>471    <div class="nav-item">472      <svg class="nav-icon" viewBox="0 0 64 64">473        <rect x="10" y="34" width="44" height="16" rx="3" stroke="#98ada3" stroke-width="3" fill="none"/>474        <rect x="14" y="28" width="24" height="8" fill="#98ada3"/>475      </svg>476      <div>Bedtime</div>477    </div>478  </div>479 480  <!-- Gesture bar -->481  <div class="gesture"></div>482 483</div>484</body>485</html>