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>Timer UI</title>7<style>8  body { margin: 0; padding: 0; background: transparent; }9  * { box-sizing: border-box; }10  #render-target {11    width: 1080px;12    height: 2400px;13    position: relative;14    overflow: hidden;15    background: #0f1412; /* dark backdrop */16    font-family: "Segoe UI", Arial, Helvetica, sans-serif;17    color: #E9EFE8;18  }19 20  /* Top heading */21  .page-title {22    position: absolute;23    top: 120px;24    left: 64px;25    font-size: 64px;26    font-weight: 500;27    letter-spacing: 0.5px;28    color: #E4EDE3;29  }30 31  /* Main card */32  .card {33    position: absolute;34    left: 30px;35    top: 270px;36    width: 1020px;37    height: 1450px;38    background: #121a16; /* deep green-black */39    border-radius: 56px;40    box-shadow: 0 8px 24px rgba(0,0,0,0.35);41  }42  .card-title {43    position: absolute;44    top: 56px;45    left: 56px;46    font-size: 60px;47    color: #DDE7DA;48  }49  .close-btn {50    position: absolute;51    top: 48px;52    right: 48px;53    width: 92px;54    height: 92px;55    border-radius: 50%;56    background: #223227;57    display: flex;58    align-items: center;59    justify-content: center;60    color: #9CC99C;61    font-size: 44px;62    line-height: 1;63  }64 65  /* Circular timer */66  .progress {67    position: absolute;68    left: 90px; /* centers 840px inside 1020px */69    top: 220px;70    width: 840px;71    height: 840px;72  }73  .ring {74    position: absolute;75    width: 100%;76    height: 100%;77    border-radius: 50%;78    background: conic-gradient(#7fb784 65%, #2e3d33 0);79  }80  .ring::after {81    content: "";82    position: absolute;83    inset: 54px;84    border-radius: 50%;85    background: #121a16;86  }87  .time {88    position: absolute;89    inset: 0;90    display: flex;91    align-items: center;92    justify-content: center;93    font-size: 180px;94    font-weight: 600;95    letter-spacing: 6px;96    color: #F4F7F3;97    z-index: 1;98  }99  .refresh {100    position: absolute;101    left: 50%;102    transform: translateX(-50%);103    bottom: 90px;104    width: 64px;105    height: 64px;106    z-index: 2;107    color: #8DC691;108  }109  .refresh svg { width: 100%; height: 100%; }110 111  /* Controls */112  .controls {113    position: absolute;114    left: 64px;115    right: 64px;116    bottom: 200px;117    display: flex;118    gap: 48px;119    justify-content: space-between;120    align-items: center;121  }122  .btn-pill {123    height: 170px;124    border-radius: 85px;125    padding: 0 70px;126    display: inline-flex;127    align-items: center;128    justify-content: center;129    font-size: 56px;130    font-weight: 600;131    letter-spacing: 1px;132    border: none;133  }134  .btn-add {135    background: #25362c;136    color: #dcead9;137    width: 420px;138  }139  .btn-pause {140    background: #c7e6ee;141    color: #12323a;142    width: 420px;143    position: relative;144  }145  .pause-icon {146    width: 34px;147    height: 70px;148    display: inline-flex;149    gap: 16px;150  }151  .pause-icon span {152    display: block;153    width: 14px;154    height: 70px;155    background: #173c45;156    border-radius: 6px;157  }158 159  /* Big add button */160  .fab {161    position: absolute;162    left: 50%;163    transform: translateX(-50%);164    top: 1780px;165    width: 210px;166    height: 210px;167    border-radius: 50%;168    background: #bfe9bd;169    color: #0f1412;170    display: flex;171    align-items: center;172    justify-content: center;173    font-size: 100px;174    font-weight: 500;175    box-shadow: 0 8px 24px rgba(0,0,0,0.35);176  }177 178  /* Bottom navigation */179  .bottom-bar {180    position: absolute;181    left: 0;182    bottom: 0;183    width: 1080px;184    height: 230px;185    background: #121a16;186    border-top: 1px solid #1f2a22;187    padding: 26px 0 34px;188  }189  .tabs {190    display: flex;191    height: 100%;192    align-items: flex-start;193    justify-content: space-around;194  }195  .tab {196    width: 20%;197    text-align: center;198    color: #AAB7AE;199    font-size: 36px;200  }201  .tab svg { width: 64px; height: 64px; }202  .tab .label { margin-top: 16px; display: block; }203  .tab.active { color: #E8F4E6; }204  .active .pill {205    margin: 0 auto 10px;206    width: 170px;207    height: 82px;208    background: #243126;209    border-radius: 41px;210    display: flex;211    align-items: center;212    justify-content: center;213  }214  .active .pill svg { width: 48px; height: 48px; }215  .active .pill svg path { fill: #9BCF9F; }216 217  /* iOS/Android home indicator mimic */218  .home-indicator {219    position: absolute;220    bottom: 18px;221    left: 50%;222    transform: translateX(-50%);223    width: 320px;224    height: 12px;225    background: #E9E9E9;226    border-radius: 8px;227    opacity: 0.9;228  }229</style>230</head>231<body>232<div id="render-target">233 234  <div class="page-title">Timer</div>235 236  <div class="card">237    <div class="card-title">30m Timer</div>238    <div class="close-btn">×</div>239 240    <div class="progress">241      <div class="ring"></div>242      <div class="time">24:12</div>243      <div class="refresh">244        <svg viewBox="0 0 24 24">245          <path fill="currentColor" d="M12 5a7 7 0 1 1-6.3 9.9l1.4-.7A5.5 5.5 0 1 0 12 6.5V4l4 3-4 3V7.5A4.5 4.5 0 1 1 7.5 12h-1A5.5 5.5 0 0 0 12 5z"/>246        </svg>247      </div>248    </div>249 250    <div class="controls">251      <button class="btn-pill btn-add">+1:00</button>252      <button class="btn-pill btn-pause" aria-label="Pause">253        <div class="pause-icon"><span></span><span></span></div>254      </button>255    </div>256  </div>257 258  <div class="fab">+</div>259 260  <div class="bottom-bar">261    <div class="tabs">262      <!-- Alarm -->263      <div class="tab">264        <svg viewBox="0 0 24 24" fill="currentColor">265          <path d="M7 3 3.5 5.5 4.6 7 8 4.5 7 3ZM17 3l-1 1.5L20 7l1.1-1.5L17 3ZM12 6a8 8 0 1 0 0 16 8 8 0 0 0 0-16Zm0 2a6 6 0 1 1 0 12 6 6 0 0 1 0-12Zm-.5 2h1.5v4.2l3 1.8-.8 1.3-3.7-2.3V10Z"/>266        </svg>267        <span class="label">Alarm</span>268      </div>269      <!-- Clock -->270      <div class="tab">271        <svg viewBox="0 0 24 24" fill="currentColor">272          <path d="M12 2a10 10 0 1 0 .001 20.001A10 10 0 0 0 12 2Zm0 2a8 8 0 1 1 0 16 8 8 0 0 1 0-16Zm-.5 3h1.5v5.2l3.3 2.1-.8 1.3-4-2.5V7Z"/>273        </svg>274        <span class="label">Clock</span>275      </div>276      <!-- Timer (active) -->277      <div class="tab active">278        <div class="pill">279          <svg viewBox="0 0 24 24">280            <path d="M9 2h6v2H9V2Zm7 4H8v2.5l3 3-3 3V17h8v-2.5l-3-3 3-3V6Z"/>281          </svg>282        </div>283        <span class="label">Timer</span>284      </div>285      <!-- Stopwatch -->286      <div class="tab">287        <svg viewBox="0 0 24 24" fill="currentColor">288          <path d="M9 2h6v2H9V2Zm3 3a9 9 0 1 0 0 18 9 9 0 0 0 0-18Zm0 2a7 7 0 1 1 0 14 7 7 0 0 1 0-14Zm-.5 2h1.5v4.5l3 1.5-.7 1.4-3.8-1.9V9Z"/>289        </svg>290        <span class="label">Stopwatch</span>291      </div>292      <!-- Bedtime -->293      <div class="tab">294        <svg viewBox="0 0 24 24" fill="currentColor">295          <path d="M3 9h10a4 4 0 0 1 4 4v5h-2v-2H5v2H3V9Zm2 2v4h10v-2a2 2 0 0 0-2-2H5Zm13-6h3v13h-2V5h-1V3Z"/>296        </svg>297        <span class="label">Bedtime</span>298      </div>299    </div>300  </div>301 302  <div class="home-indicator"></div>303</div>304</body>305</html>