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 {9    margin: 0;10    padding: 0;11    background: transparent;12    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, "Helvetica Neue", Arial, sans-serif;13  }14 15  /* Render target (1080x2400) */16  #render-target {17    width: 1080px;18    height: 2400px;19    position: relative;20    overflow: hidden;21    background: #0F1215; /* overall dark surface */22    color: #E6EAF0;23  }24 25  /* Header / status area (subtle) */26  .status-bar {27    height: 120px;28    padding: 30px 36px 0;29    box-sizing: border-box;30    color: #C9CED6;31    opacity: 0.85;32    display: flex;33    align-items: center;34    font-size: 28px;35    letter-spacing: 1px;36  }37 38  .screen-title {39    margin: 36px 36px 24px;40    font-size: 72px;41    font-weight: 500;42    color: #AEB6BF;43  }44 45  /* Background card (blurred feel, just a hint) */46  .alarm-card {47    margin: 12px 36px;48    height: 360px;49    background: #14181C;50    border-radius: 36px;51    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.04);52    position: relative;53    overflow: hidden;54  }55  .alarm-card .label {56    position: absolute;57    top: 36px;58    left: 36px;59    color: #8E99A8;60    font-size: 36px;61  }62  .alarm-card .time {63    position: absolute;64    left: 36px;65    bottom: 48px;66    font-size: 144px;67    color: #DDE3EB;68    font-weight: 600;69  }70  .alarm-card .ampm {71    position: absolute;72    left: 400px;73    bottom: 102px;74    color: #AAB4C0;75    font-size: 54px;76    font-weight: 600;77  }78 79  /* FAB */80  .fab {81    position: absolute;82    bottom: 300px;83    left: 50%;84    transform: translateX(-50%);85    width: 168px;86    height: 168px;87    border-radius: 50%;88    background: #5F7FA7;89    display: flex;90    align-items: center;91    justify-content: center;92    box-shadow: 0 12px 28px rgba(0,0,0,0.35);93  }94  .fab svg {95    width: 84px;96    height: 84px;97    fill: #0F1215;98  }99 100  /* Bottom navigation */101  .bottom-nav {102    position: absolute;103    bottom: 66px;104    left: 0;105    right: 0;106    height: 180px;107    display: flex;108    justify-content: space-around;109    align-items: center;110    background: linear-gradient(to top, rgba(0,0,0,0.25), rgba(0,0,0,0));111  }112  .nav-item {113    width: 20%;114    text-align: center;115    color: #8D98A6;116    font-size: 34px;117  }118  .nav-item .icon {119    width: 96px;120    height: 96px;121    margin: 0 auto 10px;122    display: grid;123    place-items: center;124    color: #9AA6B4;125  }126  .nav-item.active .icon {127    background: #1D2730;128    border-radius: 24px;129    color: #BFD3F7;130  }131  .nav-item.active {132    color: #D1E0FF;133    font-weight: 600;134  }135  .nav-item svg {136    width: 56px;137    height: 56px;138    fill: currentColor;139  }140 141  /* Dim overlay */142  .overlay {143    position: absolute;144    inset: 0;145    background: rgba(0,0,0,0.55);146  }147 148  /* Dialog */149  .dialog {150    position: absolute;151    left: 50%;152    bottom: 370px;153    transform: translateX(-50%);154    width: 930px;155    height: 1120px;156    background: #2C353F;157    border-radius: 44px;158    box-shadow: 0 30px 80px rgba(0,0,0,0.5);159    overflow: hidden;160  }161  .dialog-inner {162    padding: 36px 42px 28px;163  }164  .dialog h3 {165    margin: 6px 0 28px;166    font-size: 42px;167    color: #B8C3CF;168    font-weight: 600;169  }170 171  /* Time row */172  .time-row {173    display: grid;174    grid-template-columns: 1fr 110px 1fr 160px;175    align-items: center;176    gap: 24px;177    padding: 6px 0 18px;178  }179  .time-box {180    height: 170px;181    border-radius: 26px;182    background: #3A444F;183    display: flex;184    align-items: center;185    justify-content: center;186    color: #E6EBF2;187    font-size: 128px;188    font-weight: 700;189    letter-spacing: 2px;190  }191  .time-box.active {192    background: #2A5597;193    color: #E8F0FF;194  }195  .colon {196    text-align: center;197    color: #C6D0DB;198    font-size: 140px;199    font-weight: 700;200  }201  .ampm {202    display: grid;203    grid-template-rows: 1fr 1fr;204    gap: 16px;205  }206  .ampm .btn {207    height: 78px;208    border-radius: 14px;209    border: 2px solid #7E8A98;210    display: grid;211    place-items: center;212    color: #E0E7EF;213    font-size: 40px;214    font-weight: 700;215    letter-spacing: 2px;216  }217  .ampm .btn.secondary {218    background: #5A4A6F;219    border-color: #9C89B6;220  }221 222  /* Clock face */223  .clock-wrap {224    padding-top: 18px;225    display: flex;226    justify-content: center;227  }228  .clock-face {229    width: 760px;230    height: 760px;231    background: #3A454F;232    border-radius: 50%;233    position: relative;234    box-shadow: inset 0 0 0 8px rgba(255,255,255,0.03);235  }236  .tick {237    position: absolute;238    color: #C9D0D8;239    font-size: 40px;240    font-weight: 600;241    opacity: 0.9;242  }243  /* Place the ticks (approximate positions) */244  .t00 { top: 18px; left: 50%; transform: translateX(-50%); }245  .t05 { top: 64px; right: 140px; }246  .t10 { top: 160px; right: 58px; }247  .t15 { top: 50%; right: 16px; transform: translateY(-50%); }248  .t20 { bottom: 160px; right: 58px; }249  .t25 { bottom: 64px; right: 140px; }250  .t30 { bottom: 18px; left: 50%; transform: translateX(-50%); }251  .t35 { bottom: 64px; left: 140px; }252  .t40 { bottom: 160px; left: 58px; }253  .t45 { top: 50%; left: 16px; transform: translateY(-50%); }254  .t50 { top: 160px; left: 58px; }255  .t55 { top: 64px; left: 140px; }256 257  /* Selector hand */258  .selector-bubble {259    position: absolute;260    top: -4px;261    left: 50%;262    transform: translateX(-50%);263    width: 120px;264    height: 120px;265    border-radius: 50%;266    background: #86B0F6;267    display: grid;268    place-items: center;269    color: #113055;270    font-weight: 800;271    font-size: 44px;272  }273  .hand {274    position: absolute;275    top: 112px; /* just beneath the bubble */276    left: 50%;277    transform: translateX(-50%);278    width: 6px;279    height: 270px;280    background: #8DB8FF;281    border-radius: 3px;282  }283  .center-dot {284    position: absolute;285    top: 50%;286    left: 50%;287    width: 22px;288    height: 22px;289    background: #8DB8FF;290    border-radius: 50%;291    transform: translate(-50%, -50%);292  }293 294  /* Dialog footer */295  .dialog-footer {296    position: absolute;297    bottom: 20px;298    left: 28px;299    right: 28px;300    display: flex;301    align-items: center;302    justify-content: space-between;303    color: #BFD3F7;304    font-size: 44px;305  }306  .kbd {307    display: inline-flex;308    align-items: center;309    gap: 16px;310    color: #C7D3E2;311  }312  .kbd .kbd-icon {313    width: 72px;314    height: 56px;315    border-radius: 10px;316    border: 2px solid #A6B2C1;317    display: grid;318    place-items: center;319    position: relative;320    overflow: hidden;321  }322  .kbd .kbd-icon:before,323  .kbd .kbd-icon:after {324    content: "";325    position: absolute;326    left: 6px;327    right: 6px;328    height: 2px;329    background: #A6B2C1;330  }331  .kbd .kbd-icon:before { top: 16px; }332  .kbd .kbd-icon:after { bottom: 16px; }333  .actions {334    display: flex;335    gap: 40px;336    font-weight: 600;337  }338  .actions .link {339    color: #9FC0FF;340  }341</style>342</head>343<body>344<div id="render-target">345  <div class="status-bar">11:26 ▪︎ ▪︎ ◦</div>346  <div class="screen-title">Alarm</div>347 348  <!-- Background content hint -->349  <div class="alarm-card">350    <div class="label">wake up</div>351    <div class="time">6:00</div>352    <div class="ampm">AM</div>353  </div>354 355  <!-- Floating Action Button -->356  <div class="fab" aria-label="Add alarm">357    <svg viewBox="0 0 24 24">358      <path d="M11 4h2v16h-2zM4 11h16v2H4z"/>359    </svg>360  </div>361 362  <!-- Bottom navigation -->363  <div class="bottom-nav">364    <div class="nav-item active">365      <div class="icon">366        <svg viewBox="0 0 24 24">367          <path d="M7 2l2 2H5l2-2zM17 2l2 2h-4l2-2zM12 7a7 7 0 100 14 7 7 0 000-14zm0 2a5 5 0 110 10 5 5 0 010-10zm-.5 2h1v4h-1zm0 5h1v1h-1z"/>368        </svg>369      </div>370      Alarm371    </div>372    <div class="nav-item">373      <div class="icon">374        <svg viewBox="0 0 24 24">375          <path d="M12 2a10 10 0 100 20A10 10 0 0012 2zm0 2a8 8 0 110 16A8 8 0 0112 4zm-1 4h2v5h5v2h-7V8z"/>376        </svg>377      </div>378      Clock379    </div>380    <div class="nav-item">381      <div class="icon">382        <svg viewBox="0 0 24 24">383          <path d="M6 2h12v6H6zM6 8h12l-3 14H9L6 8zm4 4h4l2 8H8l2-8z"/>384        </svg>385      </div>386      Timer387    </div>388    <div class="nav-item">389      <div class="icon">390        <svg viewBox="0 0 24 24">391          <path d="M12 2a10 10 0 1010 10A10 10 0 0012 2zm1 5h-2v5.5l4.5 2.7 1-1.7-3.5-2V7z"/>392        </svg>393      </div>394      Stopwatch395    </div>396    <div class="nav-item">397      <div class="icon">398        <svg viewBox="0 0 24 24">399          <path d="M3 10h18v9H3zM5 5h14v3H5zM7 12h3v3H7z"/>400        </svg>401      </div>402      Bedtime403    </div>404  </div>405 406  <!-- Time Picker Overlay -->407  <div class="overlay">408    <div class="dialog" role="dialog" aria-label="Select time">409      <div class="dialog-inner">410        <h3>Select time</h3>411        <div class="time-row">412          <div class="time-box">06</div>413          <div class="colon">:</div>414          <div class="time-box active">00</div>415          <div class="ampm">416            <div class="btn">AM</div>417            <div class="btn secondary">PM</div>418          </div>419        </div>420 421        <div class="clock-wrap">422          <div class="clock-face">423            <!-- Ticks -->424            <div class="tick t00">00</div>425            <div class="tick t05">05</div>426            <div class="tick t10">10</div>427            <div class="tick t15">15</div>428            <div class="tick t20">20</div>429            <div class="tick t25">25</div>430            <div class="tick t30">30</div>431            <div class="tick t35">35</div>432            <div class="tick t40">40</div>433            <div class="tick t45">45</div>434            <div class="tick t50">50</div>435            <div class="tick t55">55</div>436 437            <!-- Selection indicator -->438            <div class="selector-bubble">00</div>439            <div class="hand"></div>440            <div class="center-dot"></div>441          </div>442        </div>443      </div>444 445      <div class="dialog-footer">446        <div class="kbd">447          <span class="kbd-icon"></span>448        </div>449        <div class="actions">450          <span class="link">Cancel</span>451          <span class="link">OK</span>452        </div>453      </div>454    </div>455  </div>456</div>457</body>458</html>