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 {9    margin: 0;10    padding: 0;11    background: transparent;12    font-family: Arial, Helvetica, sans-serif;13    color: #e8efe8;14  }15 16  /* Root render area */17  #render-target {18    width: 1080px;19    height: 2400px;20    position: relative;21    overflow: hidden;22    background: #0f1512; /* deep, almost-black green */23  }24 25  /* Page title */26  .page-title {27    position: absolute;28    top: 120px;29    left: 60px;30    font-size: 64px;31    font-weight: 500;32    color: #e6eee5;33    letter-spacing: 0.5px;34  }35 36  /* Timer card */37  .card {38    position: absolute;39    left: 36px;40    top: 260px;41    width: 1008px;42    height: 1380px;43    background: #141c17;44    border-radius: 56px;45    box-shadow: 0 10px 30px rgba(0,0,0,0.25) inset;46  }47 48  .card-header {49    position: absolute;50    top: 48px;51    left: 54px;52    right: 54px;53    display: flex;54    align-items: center;55    justify-content: space-between;56  }57 58  .card-title {59    font-size: 60px;60    color: #dfe9de;61    font-weight: 500;62  }63 64  .close-chip {65    width: 92px;66    height: 92px;67    border-radius: 50%;68    background: #203226;69    display: flex;70    align-items: center;71    justify-content: center;72    color: #b9d7b9;73    font-size: 48px;74  }75 76  /* Circular progress ring */77  .ring-wrap {78    position: absolute;79    top: 210px;80    left: 74px; /* (1008 - 860)/2 */81    width: 860px;82    height: 860px;83  }84 85  .ring {86    width: 100%;87    height: 100%;88    border-radius: 50%;89    /* progress + remaining using conic-gradient */90    background: conic-gradient(#79a978 0deg 305deg, #2b3d32 305deg 360deg);91    /* create ring thickness */92    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 38px), #000 calc(100% - 38px));93            mask: radial-gradient(farthest-side, transparent calc(100% - 38px), #000 calc(100% - 38px));94  }95 96  .time-display {97    position: absolute;98    top: 350px;99    left: 0;100    right: 0;101    text-align: center;102    font-size: 210px;103    color: #f3f6f1;104    font-weight: 600;105    letter-spacing: 6px;106  }107 108  .reset-icon {109    position: absolute;110    top: 680px;111    left: 0;112    right: 0;113    margin: auto;114    width: 70px;115    height: 70px;116    color: #98c298;117    opacity: 0.9;118  }119 120  /* Controls row */121  .controls {122    position: absolute;123    left: 60px;124    right: 60px;125    bottom: 120px;126    display: flex;127    justify-content: space-between;128    align-items: center;129    gap: 40px;130  }131 132  .btn {133    height: 160px;134    border-radius: 90px;135    display: flex;136    align-items: center;137    justify-content: center;138    font-size: 58px;139    font-weight: 600;140  }141 142  .btn-add-min {143    flex: 1;144    background: #223329;145    color: #d2e6d2;146  }147 148  .btn-pause {149    flex: 1;150    background: #c6e5ef;151    color: #1d2f2a;152  }153 154  .pause-bars {155    width: 34px;156    height: 72px;157    display: grid;158    grid-template-columns: 1fr 1fr;159    column-gap: 20px;160  }161  .pause-bars span {162    display: block;163    width: 14px;164    height: 100%;165    background: #1f3030;166    border-radius: 10px;167  }168 169  /* Big add button */170  .fab {171    position: absolute;172    top: 1700px;173    left: 0;174    right: 0;175    margin: 0 auto;176    width: 230px;177    height: 230px;178    border-radius: 50%;179    background: #bde7b8;180    color: #0b170f;181    display: flex;182    align-items: center;183    justify-content: center;184    font-size: 140px;185    line-height: 0;186    box-shadow: 0 6px 20px rgba(0,0,0,0.35);187  }188 189  /* Bottom navigation */190  .bottom-nav {191    position: absolute;192    bottom: 100px;193    left: 0;194    width: 100%;195    height: 240px;196    background: #131b16;197    border-top-left-radius: 28px;198    border-top-right-radius: 28px;199    box-shadow: 0 -10px 30px rgba(0,0,0,0.25);200    display: flex;201    padding-top: 28px;202    justify-content: space-around;203    align-items: flex-start;204    color: #d9e3d8;205  }206 207  .nav-item {208    width: 180px;209    text-align: center;210    font-size: 32px;211    color: #b1c0b5;212  }213 214  .nav-icon {215    width: 64px;216    height: 64px;217    margin: 0 auto 16px;218    display: block;219  }220 221  .nav-item.active .active-pill {222    width: 128px;223    height: 72px;224    background: #2a3f34;225    border-radius: 40px;226    margin: 0 auto 14px;227    display: flex;228    align-items: center;229    justify-content: center;230  }231 232  .nav-item.active span {233    color: #e8efe8;234  }235 236  /* Gesture bar */237  .gesture {238    position: absolute;239    bottom: 34px;240    left: 50%;241    transform: translateX(-50%);242    width: 280px;243    height: 12px;244    background: #e8e8e8;245    border-radius: 8px;246    opacity: 0.85;247  }248</style>249</head>250<body>251<div id="render-target">252 253  <div class="page-title">Timer</div>254 255  <div class="card">256    <div class="card-header">257      <div class="card-title">30m Timer</div>258      <div class="close-chip">×</div>259    </div>260 261    <div class="ring-wrap">262      <div class="ring"></div>263      <div class="time-display">23:17</div>264 265      <!-- circular reset arrow -->266      <svg class="reset-icon" viewBox="0 0 24 24">267        <circle cx="12" cy="12" r="8" fill="none" stroke="currentColor" stroke-width="2"></circle>268        <path d="M12 4v4l3-2" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>269      </svg>270    </div>271 272    <div class="controls">273      <div class="btn btn-add-min">+1:00</div>274      <div class="btn btn-pause">275        <div class="pause-bars"><span></span><span></span></div>276      </div>277    </div>278  </div>279 280  <div class="fab">+</div>281 282  <!-- Bottom Navigation -->283  <div class="bottom-nav">284    <div class="nav-item">285      <svg class="nav-icon" viewBox="0 0 24 24">286        <path d="M6 8a6 6 0 1 1 12 0v3h2v9H4v-9h2V8zM8 11h8V8a4 4 0 0 0-8 0v3z" fill="#b1c0b5"></path>287      </svg>288      <span>Alarm</span>289    </div>290 291    <div class="nav-item">292      <svg class="nav-icon" viewBox="0 0 24 24">293        <circle cx="12" cy="12" r="8" fill="none" stroke="#b1c0b5" stroke-width="2"></circle>294        <path d="M12 7v6l4 2" fill="none" stroke="#b1c0b5" stroke-width="2" stroke-linecap="round"></path>295      </svg>296      <span>Clock</span>297    </div>298 299    <div class="nav-item active">300      <div class="active-pill">301        <svg class="nav-icon" viewBox="0 0 24 24">302          <path d="M8 4h8l-4 6 4 10H8l4-10z" fill="#cfe6cf"></path>303        </svg>304      </div>305      <span>Timer</span>306    </div>307 308    <div class="nav-item">309      <svg class="nav-icon" viewBox="0 0 24 24">310        <circle cx="12" cy="13" r="7" fill="none" stroke="#b1c0b5" stroke-width="2"></circle>311        <path d="M9 3h6M12 9v5h4" fill="none" stroke="#b1c0b5" stroke-width="2" stroke-linecap="round"></path>312      </svg>313      <span>Stopwatch</span>314    </div>315 316    <div class="nav-item">317      <svg class="nav-icon" viewBox="0 0 24 24">318        <path d="M3 12h18v7H3zM6 12V9h6v3" fill="none" stroke="#b1c0b5" stroke-width="2" stroke-linejoin="round"></path>319      </svg>320      <span>Bedtime</span>321    </div>322  </div>323 324  <div class="gesture"></div>325</div>326</body>327</html>