GD-ML/AndroidCode

1<!DOCTYPE html>2<html>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; font-family: "Segoe UI", Roboto, Arial, sans-serif; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #0f1512; /* dark background of app */15    color: #e8efe6;16  }17 18  /* Header */19  .top-bar-title {20    position: absolute;21    top: 120px;22    left: 56px;23    font-size: 72px;24    font-weight: 500;25    letter-spacing: 0.5px;26    color: #e6efe6;27  }28  .menu-dots {29    position: absolute;30    top: 124px;31    right: 44px;32    width: 60px;33    height: 60px;34    display: flex;35    align-items: center;36    justify-content: center;37    opacity: 0.8;38  }39  .menu-dots svg circle { fill: #cfd8d2; }40 41  /* Timer Card */42  .timer-card {43    position: absolute;44    left: 40px;45    right: 40px;46    top: 260px;47    height: 1480px;48    background: #141c17;49    border-radius: 56px;50    box-shadow: 0 8px 24px rgba(0,0,0,0.35) inset;51  }52  .card-header {53    display: flex;54    align-items: center;55    justify-content: space-between;56    padding: 56px 56px 0 56px;57  }58  .card-header .title {59    font-size: 64px;60    color: #e6efe6;61  }62  .close-pill {63    width: 96px;64    height: 96px;65    border-radius: 50%;66    background: #1e2a23;67    display: flex;68    align-items: center;69    justify-content: center;70  }71  .close-pill svg path { stroke: #a7c1af; stroke-width: 8; stroke-linecap: round; }72 73  /* Circular progress timer */74  .progress {75    position: relative;76    width: 820px;77    height: 820px;78    margin: 48px auto 0 auto;79    border-radius: 50%;80    /* dark base ring with green progress */81    background:82      conic-gradient(#82b987 305deg, #2a3a31 0deg);83  }84  .progress::after {85    content: "";86    position: absolute;87    inset: 36px;88    background: #141c17;89    border-radius: 50%;90  }91  .time {92    position: absolute;93    inset: 0;94    display: flex;95    align-items: center;96    justify-content: center;97    font-size: 216px;98    font-weight: 600;99    letter-spacing: 6px;100    z-index: 1;101    color: #eef5ee;102  }103  .restart-icon {104    position: absolute;105    left: 50%;106    transform: translateX(-50%);107    bottom: 140px;108    width: 80px;109    height: 80px;110    z-index: 2;111    opacity: 0.9;112  }113  .restart-icon svg path, .restart-icon svg circle {114    stroke: #84b486;115    stroke-width: 12;116    fill: none;117    stroke-linecap: round;118    stroke-linejoin: round;119  }120 121  /* Controls */122  .controls {123    position: absolute;124    left: 56px;125    right: 56px;126    bottom: 140px;127    display: flex;128    justify-content: center;129    gap: 56px;130  }131  .btn {132    height: 160px;133    min-width: 420px;134    border-radius: 88px;135    display: flex;136    align-items: center;137    justify-content: center;138    font-size: 56px;139    font-weight: 600;140  }141  .btn-add {142    background: #26372f;143    color: #d9eadf;144  }145  .btn-pause {146    background: #c7e5ee;147    color: #17333c;148  }149  .btn-pause svg rect { fill: #17333c; }150 151  /* Floating add timer button */152  .fab {153    position: absolute;154    left: 50%;155    transform: translateX(-50%);156    top: 1780px;157    width: 220px;158    height: 220px;159    border-radius: 50%;160    background: #bfe9c3;161    color: #0c2614;162    display: flex;163    align-items: center;164    justify-content: center;165    font-size: 140px;166    line-height: 0;167    font-weight: 300;168  }169 170  /* Bottom navigation */171  .bottom-nav {172    position: absolute;173    left: 0;174    right: 0;175    bottom: 0;176    height: 260px;177    background: #121914;178    border-top: 1px solid rgba(255,255,255,0.04);179    display: flex;180    align-items: center;181    justify-content: space-around;182    padding-bottom: 16px;183  }184  .nav-item {185    width: 180px;186    height: 200px;187    display: flex;188    flex-direction: column;189    align-items: center;190    justify-content: center;191    color: #cfd8d2;192    font-size: 34px;193  }194  .nav-item .icon {195    width: 92px;196    height: 92px;197    margin-bottom: 12px;198    opacity: 0.92;199  }200  .selected .icon-wrap {201    background: #314436;202    padding: 18px 28px;203    border-radius: 40px;204  }205  .selected { color: #ffffff; }206 207  /* Gesture handle */208  .gesture {209    position: absolute;210    left: 50%;211    transform: translateX(-50%);212    bottom: 290px;213    width: 380px;214    height: 16px;215    background: #e8e8e8;216    border-radius: 12px;217    opacity: 0.88;218  }219</style>220</head>221<body>222<div id="render-target">223 224  <div class="top-bar-title">Timer</div>225  <div class="menu-dots" aria-label="More options">226    <svg width="36" height="60" viewBox="0 0 12 20">227      <circle cx="6" cy="3" r="2.2"></circle>228      <circle cx="6" cy="10" r="2.2"></circle>229      <circle cx="6" cy="17" r="2.2"></circle>230    </svg>231  </div>232 233  <div class="timer-card">234    <div class="card-header">235      <div class="title">30m Timer</div>236      <div class="close-pill" aria-label="Close">237        <svg width="40" height="40" viewBox="0 0 40 40">238          <path d="M10 10 L30 30 M30 10 L10 30"></path>239        </svg>240      </div>241    </div>242 243    <div class="progress">244      <div class="time">25:58</div>245      <div class="restart-icon" title="Restart">246        <svg viewBox="0 0 64 64">247          <circle cx="32" cy="32" r="20"></circle>248          <path d="M32 12 L32 2 M32 2 L24 8"></path>249        </svg>250      </div>251    </div>252 253    <div class="controls">254      <div class="btn btn-add">+1:00</div>255      <div class="btn btn-pause" aria-label="Pause">256        <svg width="56" height="80" viewBox="0 0 56 80">257          <rect x="0" y="0" width="18" height="80" rx="6"></rect>258          <rect x="38" y="0" width="18" height="80" rx="6"></rect>259        </svg>260      </div>261    </div>262  </div>263 264  <div class="fab">+</div>265 266  <div class="gesture"></div>267 268  <div class="bottom-nav">269    <div class="nav-item">270      <svg class="icon" viewBox="0 0 24 24">271        <path d="M6 5 L3 3 M18 5 L21 3" stroke="#cfd8d2" stroke-width="1.8" fill="none" stroke-linecap="round"/>272        <circle cx="12" cy="13" r="7" stroke="#cfd8d2" stroke-width="1.8" fill="none"/>273        <path d="M12 10 L12 14 L15 15" stroke="#cfd8d2" stroke-width="1.8" fill="none" stroke-linecap="round"/>274      </svg>275      <div>Alarm</div>276    </div>277 278    <div class="nav-item">279      <svg class="icon" viewBox="0 0 24 24">280        <circle cx="12" cy="12" r="8" stroke="#cfd8d2" stroke-width="1.8" fill="none"/>281        <path d="M12 7 L12 12 L16 14" stroke="#cfd8d2" stroke-width="1.8" fill="none" stroke-linecap="round"/>282      </svg>283      <div>Clock</div>284    </div>285 286    <div class="nav-item selected">287      <div class="icon-wrap">288        <svg class="icon" viewBox="0 0 24 24">289          <path d="M8 5 L16 5 L12 12 L16 19 L8 19 L12 12 Z" fill="#cfe6d3"/>290        </svg>291      </div>292      <div>Timer</div>293    </div>294 295    <div class="nav-item">296      <svg class="icon" viewBox="0 0 24 24">297        <circle cx="12" cy="13" r="7" stroke="#cfd8d2" stroke-width="1.8" fill="none"/>298        <path d="M9 3 H15" stroke="#cfd8d2" stroke-width="1.8" stroke-linecap="round"/>299        <path d="M12 9 L12 13 L15 15" stroke="#cfd8d2" stroke-width="1.8" fill="none" stroke-linecap="round"/>300      </svg>301      <div>Stopwatch</div>302    </div>303 304    <div class="nav-item">305      <svg class="icon" viewBox="0 0 24 24">306        <path d="M3 16 H21 V20 H3 Z" fill="none" stroke="#cfd8d2" stroke-width="1.8"/>307        <rect x="5" y="11" width="6" height="5" fill="#cfd8d2"/>308        <rect x="13" y="11" width="6" height="5" fill="#cfd8d2"/>309      </svg>310      <div>Bedtime</div>311    </div>312  </div>313 314</div>315</body>316</html>