GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Alarm Screen Mock</title>6<meta name="viewport" content="width=1080, initial-scale=1.0">7<style>8  body {9    margin: 0;10    padding: 0;11    background: transparent;12    font-family: "Segoe UI", Roboto, Arial, sans-serif;13  }14 15  #render-target {16    width: 1080px;17    height: 2400px;18    position: relative;19    overflow: hidden;20    background: #0f1616;21    color: #e7efef;22  }23 24  .safe {25    padding: 0 48px;26  }27 28  /* Status bar */29  .status-bar {30    height: 120px;31    display: flex;32    align-items: center;33    justify-content: space-between;34    color: #e9eeee;35    font-size: 44px;36    letter-spacing: 0.5px;37    opacity: 0.95;38  }39  .status-icons {40    display: flex;41    align-items: center;42    gap: 24px;43  }44  .status-icons svg {45    width: 36px;46    height: 36px;47    fill: #e9eeee;48    opacity: 0.9;49  }50 51  /* Header */52  .header {53    margin-top: 8px;54    font-size: 88px;55    font-weight: 600;56    color: #e8f3f2;57  }58 59  /* Overflow menu (3 dots) */60  .overflow {61    position: absolute;62    right: 24px;63    top: 230px;64    width: 18px;65    height: 80px;66    display: flex;67    align-items: center;68    justify-content: space-between;69    flex-direction: column;70  }71  .overflow span {72    width: 10px;73    height: 10px;74    background: #a8b4b4;75    border-radius: 50%;76    display: block;77  }78 79  /* Cards */80  .cards {81    margin-top: 36px;82    padding-bottom: 340px; /* keep space for FAB and nav */83  }84 85  .card {86    background: #152123;87    border-radius: 44px;88    padding: 40px 40px 44px 44px;89    margin-bottom: 40px;90    position: relative;91    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.04);92  }93  .card .title {94    font-size: 44px;95    color: #c9d3d3;96    margin-bottom: 18px;97  }98  .card .time {99    display: flex;100    align-items: baseline;101    gap: 18px;102    line-height: 1;103  }104  .card .time .big {105    font-size: 170px;106    font-weight: 700;107    letter-spacing: -3px;108  }109  .card .time .ampm {110    font-size: 52px;111    font-weight: 700;112    opacity: 0.9;113    margin-bottom: 18px;114  }115  .card .days {116    margin-top: 22px;117    font-size: 42px;118    color: #9fb0b0;119  }120 121  .card.inactive .title,122  .card.inactive .big,123  .card.inactive .ampm,124  .card.inactive .days {125    color: #8b9999;126  }127  .card.inactive {128    opacity: 0.95;129  }130 131  /* Chevron circle */132  .chev {133    position: absolute;134    right: 24px;135    top: 24px;136    width: 64px;137    height: 64px;138    border-radius: 50%;139    background: rgba(255,255,255,0.05);140    display: flex;141    align-items: center;142    justify-content: center;143  }144  .chev svg { width: 28px; height: 28px; fill: #98a6a6; transform: rotate(90deg); }145 146  /* Toggle */147  .toggle {148    position: absolute;149    right: 36px;150    bottom: 44px;151    width: 166px;152    height: 74px;153    border-radius: 37px;154    background: #2b3536;155  }156  .toggle .knob {157    width: 66px;158    height: 66px;159    background: #c9f1ef;160    border-radius: 50%;161    position: absolute;162    top: 4px;163    left: 4px;164  }165  .toggle.on {166    background: #0a5f5a;167  }168  .toggle.on .knob {169    left: auto;170    right: 4px;171    background: #7ce9e3;172  }173 174  /* Floating action button */175  .fab {176    position: absolute;177    bottom: 330px;178    left: 50%;179    transform: translateX(-50%);180    width: 220px;181    height: 220px;182    border-radius: 50%;183    background: #7adfda;184    display: flex;185    align-items: center;186    justify-content: center;187    color: #0b1a1a;188    font-size: 140px;189    font-weight: 400;190    box-shadow: 0 12px 30px rgba(0,0,0,0.5);191  }192 193  /* Bottom navigation */194  .bottom-nav {195    position: absolute;196    left: 0;197    bottom: 0;198    width: 1080px;199    height: 230px;200    background: #121d1e;201    border-top: 1px solid rgba(255,255,255,0.06);202    display: flex;203    align-items: center;204    justify-content: space-around;205    padding: 10px 0 44px;206  }207  .nav-item {208    width: 20%;209    text-align: center;210    color: #c5d0cf;211  }212  .nav-item .icon-wrap {213    width: 120px;214    height: 84px;215    margin: 0 auto 10px;216    display: flex;217    align-items: center;218    justify-content: center;219    border-radius: 32px;220  }221  .nav-item.selected .icon-wrap {222    background: #203334;223  }224  .nav-item svg {225    width: 58px;226    height: 58px;227    fill: #c5d0cf;228  }229  .nav-item.selected svg {230    fill: #9fe7e2;231  }232  .nav-item .label {233    font-size: 36px;234    margin-top: 4px;235  }236 237  /* Gesture bar */238  .gesture {239    position: absolute;240    bottom: 16px;241    left: 50%;242    transform: translateX(-50%);243    width: 320px;244    height: 10px;245    background: #e7e7e7;246    border-radius: 8px;247    opacity: 0.9;248  }249</style>250</head>251<body>252<div id="render-target">253 254  <div class="status-bar safe">255    <div class="time">11:56</div>256    <div class="status-icons">257      <!-- Check mark icon -->258      <svg viewBox="0 0 24 24"><path d="M9 16.2l-3.5-3.5-1.4 1.4L9 19 20 8l-1.4-1.4z"/></svg>259      <!-- Calendar icon -->260      <svg viewBox="0 0 24 24"><path d="M7 2h2v3H7V2zm8 0h2v3h-2V2zM4 7h16v13H4V7zm2 2v9h12V9H6z"/></svg>261      <!-- Calendar icon 2 -->262      <svg viewBox="0 0 24 24"><path d="M7 2h2v3H7V2zm8 0h2v3h-2V2zM4 7h16v13H4V7zm2 2v9h12V9H6z"/></svg>263      <!-- Wifi -->264      <svg viewBox="0 0 24 24"><path d="M12 20.5l3-3-1.4-1.4L12 17.7l-1.6-1.6L9 17.5l3 3zM2 8.5C6.4 4.9 17.6 4.9 22 8.5l-1.6 1.6C16.7 6.9 7.3 6.9 3.6 10.1L2 8.5zm4 4c3.4-2.6 8.6-2.6 12 0l-1.6 1.6c-2.6-1.9-6.2-1.9-8.8 0L6 12.5z"/></svg>265      <!-- Cast icon -->266      <svg viewBox="0 0 24 24"><path d="M3 5h18v10h-6v2h8V3H1v4h2V5zm0 6v2c2.2 0 4 1.8 4 4h2c0-3.3-2.7-6-6-6zm0 4v2c1.1 0 2 .9 2 2h2c0-2.2-1.8-4-4-4zm0 4h2v2H3v-2z"/></svg>267      <!-- Battery -->268      <svg viewBox="0 0 24 24"><path d="M16 8V6h-2V4H10v2H8v12h8V8zm2 0h2v8h-2z"/></svg>269    </div>270  </div>271 272  <div class="safe header">Alarm</div>273 274  <div class="overflow">275    <span></span><span></span><span></span>276  </div>277 278  <div class="safe cards">279 280    <!-- Card 1 - Inactive -->281    <div class="card inactive">282      <div class="chev">283        <svg viewBox="0 0 24 24"><path d="M8 5l8 7-8 7z"/></svg>284      </div>285      <div class="title">Wake up</div>286      <div class="time">287        <div class="big">9:00</div>288        <div class="ampm">AM</div>289      </div>290      <div class="days">Sun, Sat</div>291      <div class="toggle"><div class="knob"></div></div>292    </div>293 294    <!-- Card 2 - Active -->295    <div class="card">296      <div class="chev">297        <svg viewBox="0 0 24 24"><path d="M8 5l8 7-8 7z"/></svg>298      </div>299      <div class="title">Meeting</div>300      <div class="time">301        <div class="big" style="color:#ffffff;">10:30</div>302        <div class="ampm" style="color:#ffffff;">AM</div>303      </div>304      <div class="days">Monday</div>305      <div class="toggle on"><div class="knob"></div></div>306    </div>307 308    <!-- Card 3 - Inactive -->309    <div class="card inactive">310      <div class="chev">311        <svg viewBox="0 0 24 24"><path d="M8 5l8 7-8 7z"/></svg>312      </div>313      <div class="title">Fly</div>314      <div class="time">315        <div class="big">9:00</div>316        <div class="ampm">PM</div>317      </div>318      <div class="days">Saturday</div>319      <div class="toggle"><div class="knob"></div></div>320    </div>321 322  </div>323 324  <!-- Floating Action Button -->325  <div class="fab">+</div>326 327  <!-- Bottom Navigation -->328  <div class="bottom-nav">329    <div class="nav-item selected">330      <div class="icon-wrap">331        <!-- Alarm icon -->332        <svg viewBox="0 0 24 24">333          <path d="M6.5 5L3 2l1.5-1.5L8 3.5 6.5 5zM17.5 5L16 3.5 19.5.5 21 2l-3.5 3z"/>334          <path d="M12 6a8 8 0 100 16 8 8 0 000-16zm0 2a6 6 0 110 12 6 6 0 010-12zm1 3h-2v5h5v-2h-3V11z"/>335        </svg>336      </div>337      <div class="label">Alarm</div>338    </div>339    <div class="nav-item">340      <div class="icon-wrap">341        <!-- Clock icon -->342        <svg viewBox="0 0 24 24"><path d="M12 2a10 10 0 100 20 10 10 0 000-20zm1 5h-2v6l5 3 1-1.7-4-2.3V7z"/></svg>343      </div>344      <div class="label">Clock</div>345    </div>346    <div class="nav-item">347      <div class="icon-wrap">348        <!-- Timer / Hourglass -->349        <svg viewBox="0 0 24 24"><path d="M6 2h12v3h-4v2l2 2-2 2v2h4v3H6v-3h4v-2l-2-2 2-2V5H6V2z"/></svg>350      </div>351      <div class="label">Timer</div>352    </div>353    <div class="nav-item">354      <div class="icon-wrap">355        <!-- Stopwatch -->356        <svg viewBox="0 0 24 24"><path d="M14 1h-4v2h4V1zM12 5a9 9 0 100 18 9 9 0 000-18zm1 4h-2v6h6v-2h-4V9z"/></svg>357      </div>358      <div class="label">Stopwatch</div>359    </div>360    <div class="nav-item">361      <div class="icon-wrap">362        <!-- Bed icon -->363        <svg viewBox="0 0 24 24"><path d="M3 12V6h7a4 4 0 014 4v2h7v6h-2v-3H5v3H3v-6zm4-3a2 2 0 100 4 2 2 0 000-4z"/></svg>364      </div>365      <div class="label">Bedtime</div>366    </div>367  </div>368 369  <div class="gesture"></div>370</div>371</body>372</html>