GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<meta name="viewport" content="width=1440, initial-scale=1.0">6<title>Timer UI</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; }9  #render-target {10    position: relative;11    overflow: hidden;12    width: 1440px;13    height: 3120px;14    background: #0e1511; /* app dark backdrop */15    color: #E9EFE6;16  }17 18  /* Status bar */19  .status-bar {20    position: absolute;21    top: 0;22    left: 0;23    right: 0;24    height: 120px;25    padding: 0 48px;26    display: flex;27    align-items: center;28    justify-content: space-between;29    color: #E9EFE6;30    font-weight: 600;31    letter-spacing: 1px;32  }33  .status-left { font-size: 48px; opacity: .95; }34  .status-right {35    display: flex; align-items: center; gap: 34px;36  }37  .icon {38    display: inline-flex; align-items: center; justify-content: center;39  }40  .icon svg { display: block; }41 42  /* Page title */43  .title {44    position: absolute;45    top: 160px;46    left: 72px;47    font-size: 92px;48    font-weight: 600;49    color: #E9EFE6;50  }51 52  /* 3-dot menu */53  .menu-dots {54    position: absolute;55    top: 180px;56    right: 60px;57    width: 14px;58    height: 92px;59    display: flex;60    flex-direction: column;61    justify-content: space-between;62    opacity: .8;63  }64  .menu-dots span {65    width: 14px; height: 14px; background: #E9EFE6; border-radius: 50%;66  }67 68  /* Card */69  .card {70    position: absolute;71    left: 60px;72    right: 60px;73    top: 330px;74    height: 1700px;75    background: #162019;76    border-radius: 64px;77    box-shadow: 0 10px 40px rgba(0,0,0,.35) inset;78  }79  .card-header {80    display: flex;81    align-items: center;82    justify-content: space-between;83    padding: 64px 72px 0 72px;84  }85  .card-title {86    font-size: 78px;87    color: #EFF5EC;88    font-weight: 600;89  }90  .close-chip {91    width: 96px; height: 96px; border-radius: 50%;92    background: #243226;93    display: flex; align-items: center; justify-content: center;94    color: #B7D2B2;95    font-size: 64px; line-height: 1; font-weight: 700;96  }97 98  /* Timer ring */99  .ring-wrap {100    position: relative;101    width: 1020px;102    height: 1020px;103    margin: 36px auto 0 auto;104  }105  .ring {106    position: absolute;107    inset: 0;108    border-radius: 50%;109    background:110      conic-gradient(#7CB36D 0 79%, #2b342c 79% 85%, #7CB36D 85% 100%);111  }112  .ring::after {113    content: "";114    position: absolute;115    inset: 70px;116    border-radius: 50%;117    background: #0e1511; /* hollow center shows card through */118  }119  .time {120    position: absolute;121    inset: 0;122    display: flex; align-items: center; justify-content: center;123    font-size: 220px;124    font-weight: 700;125    color: #F0F5EF;126    letter-spacing: 6px;127  }128  .reset {129    position: absolute;130    left: 50%;131    transform: translateX(-50%);132    bottom: 210px;133    width: 90px; height: 90px;134    display: flex; align-items: center; justify-content: center;135    border-radius: 50%;136    color: #7CB36D;137    background: transparent;138  }139 140  /* Action buttons */141  .actions {142    position: absolute;143    left: 120px;144    right: 120px;145    bottom: 120px;146    display: flex;147    gap: 60px;148    align-items: center;149  }150  .pill {151    flex: 0 0 460px;152    height: 210px;153    border-radius: 140px;154    background: #253128;155    color: #DCE8D9;156    font-size: 78px;157    font-weight: 600;158    display: flex; align-items: center; justify-content: center;159  }160  .play {161    flex: 1;162    height: 210px;163    border-radius: 140px;164    background: #B8E4E6;165    display: flex; align-items: center; justify-content: center;166  }167 168  /* Big add button */169  .fab {170    position: absolute;171    top: 2120px;172    left: 50%;173    transform: translateX(-50%);174    width: 360px; height: 360px;175    border-radius: 50%;176    background: #BDECA7;177    color: #0e1511;178    display: flex; align-items: center; justify-content: center;179    font-size: 160px; font-weight: 500;180    box-shadow: 0 10px 30px rgba(0,0,0,.35);181  }182 183  /* Bottom nav */184  .nav {185    position: absolute;186    left: 0; right: 0;187    bottom: 120px;188    height: 330px;189    background: #162019;190    border-top-left-radius: 48px;191    border-top-right-radius: 48px;192    padding-top: 46px;193    display: flex;194    flex-direction: column;195    align-items: center;196  }197  .nav-row {198    width: 100%;199    display: flex;200    justify-content: space-around;201    align-items: center;202    padding: 0 40px;203    margin-bottom: 18px;204  }205  .nav-item {206    width: 220px;207    height: 150px;208    display: flex; flex-direction: column; align-items: center; justify-content: center;209    gap: 18px;210    color: #D9E6D3;211    font-size: 44px;212  }213  .nav-item .ico-wrap {214    width: 116px; height: 116px; border-radius: 28px;215    display: flex; align-items: center; justify-content: center;216  }217  .nav-item.active .ico-wrap {218    background: #243126;219  }220  .gesture {221    position: absolute;222    bottom: 28px;223    left: 50%;224    transform: translateX(-50%);225    width: 420px; height: 16px; border-radius: 16px;226    background: #E9EFE6; opacity: .9;227  }228</style>229</head>230<body>231<div id="render-target">232 233  <!-- Status Bar -->234  <div class="status-bar">235    <div class="status-left">11:28</div>236    <div class="status-right">237      <!-- simple icons: signal, wifi, battery -->238      <span class="icon" title="signal">239        <svg width="56" height="56" viewBox="0 0 24 24" fill="#E9EFE6" aria-hidden="true">240          <path d="M2 20h2v-2H2v2zm4 0h2v-4H6v4zm4 0h2v-6h-2v6zm4 0h2v-8h-2v8zm4 0h2v-10h-2v10z"/>241        </svg>242      </span>243      <span class="icon" title="wifi">244        <svg width="56" height="56" viewBox="0 0 24 24" fill="#E9EFE6" aria-hidden="true">245          <path d="M12 20a2 2 0 1 0 .001-3.999A2 2 0 0 0 12 20zm6.6-6.2a10 10 0 0 0-13.2 0l1.4 1.4a8 8 0 0 1 10.4 0l1.4-1.4zm3.5-3.5a16 16 0 0 0-23.2 0l1.4 1.4a14 14 0 0 1 20.4 0l1.4-1.4z"/>246        </svg>247      </span>248      <span class="icon" title="battery">249        <svg width="72" height="56" viewBox="0 0 28 24" fill="#E9EFE6" aria-hidden="true">250          <path d="M2 7a3 3 0 0 1 3-3h14a3 3 0 0 1 3 3v10a3 3 0 0 1-3 3H5a3 3 0 0 1-3-3V7zm22 3h2v4h-2V10zM5 6h14a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1z"/>251        </svg>252      </span>253    </div>254  </div>255 256  <!-- Title and menu -->257  <div class="title">Timer</div>258  <div class="menu-dots" aria-hidden="true">259    <span></span><span></span><span></span>260  </div>261 262  <!-- Card -->263  <div class="card">264    <div class="card-header">265      <div class="card-title">25m Timer</div>266      <div class="close-chip">×</div>267    </div>268 269    <div class="ring-wrap">270      <div class="ring"></div>271      <div class="time">26:02</div>272      <div class="reset">273        <svg width="84" height="84" viewBox="0 0 24 24" fill="none" stroke="#7CB36D" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">274          <path d="M3 12a9 9 0 1 0 3-6.7"/>275          <path d="M3 4v5h5"/>276        </svg>277      </div>278    </div>279 280    <div class="actions">281      <div class="pill">+1:00</div>282      <div class="play">283        <svg width="80" height="80" viewBox="0 0 24 24" aria-hidden="true">284          <path d="M8 5v14l11-7-11-7z" fill="#0e594e"/>285        </svg>286      </div>287    </div>288  </div>289 290  <!-- Big Add Button -->291  <div class="fab">+</div>292 293  <!-- Bottom Navigation -->294  <div class="nav">295    <div class="nav-row">296      <div class="nav-item">297        <div class="ico-wrap">298          <svg width="72" height="72" viewBox="0 0 24 24" fill="#D9E6D3" aria-hidden="true">299            <path d="M12 8a5 5 0 1 0 .001 9.999A5 5 0 0 0 12 8zm1-6h-2v3h2V2zm8 9h-3v2h3v-2zM6 11H3v2h3v-2zm10.95-6.364-1.414 1.414 2.121 2.12 1.414-1.413-2.12-2.12zM4.636 4.636l-1.414 1.414 2.12 2.12 1.415-1.414-2.12-2.12z"/>300          </svg>301        </div>302        <div>Alarm</div>303      </div>304      <div class="nav-item">305        <div class="ico-wrap">306          <svg width="72" height="72" viewBox="0 0 24 24" fill="#D9E6D3" aria-hidden="true">307            <path d="M12 1a11 11 0 1 0 0 22 11 11 0 0 0 0-22zm1 11h6v2h-8V5h2v7z"/>308          </svg>309        </div>310        <div>Clock</div>311      </div>312      <div class="nav-item active">313        <div class="ico-wrap">314          <svg width="72" height="72" viewBox="0 0 24 24" fill="#CFE5C9" aria-hidden="true">315            <path d="M12 2a10 10 0 0 0-7.07 17.07L12 12V2zm0 0v10l7.07 7.07A10 10 0 0 0 12 2z"/>316          </svg>317        </div>318        <div>Timer</div>319      </div>320      <div class="nav-item">321        <div class="ico-wrap">322          <svg width="72" height="72" viewBox="0 0 24 24" fill="#D9E6D3" aria-hidden="true">323            <path d="M13 3h-2v2h2V3zm-1 4A7 7 0 1 0 19 14a7 7 0 0 0-7-7zm3.5 7.5H12V8h1.5v4H16v1.5z"/>324          </svg>325        </div>326        <div>Stopwatch</div>327      </div>328      <div class="nav-item">329        <div class="ico-wrap">330          <svg width="72" height="72" viewBox="0 0 24 24" fill="#D9E6D3" aria-hidden="true">331            <path d="M2 10h20v8H2v-8zm2-5h5v3H4V5zm9 0h5v3h-5V5z"/>332          </svg>333        </div>334        <div>Bedtime</div>335      </div>336    </div>337    <div class="gesture"></div>338  </div>339 340</div>341</body>342</html>