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; font-family: "Roboto", "Segoe UI", Arial, sans-serif; }9  #render-target {10    position: relative;11    overflow: hidden;12    width: 1080px;13    height: 2400px;14    background: #0f1513;15    border-radius: 36px;16    color: #e7efe8;17  }18 19  /* Top bar/title */20  .page-title {21    position: absolute;22    top: 140px;23    left: 56px;24    font-size: 64px;25    font-weight: 500;26    letter-spacing: 0.5px;27    color: #e8f2eb;28  }29  .kebab {30    position: absolute;31    top: 150px;32    right: 42px;33    width: 60px;34    height: 60px;35  }36  .kebab svg { width: 100%; height: 100%; }37 38  /* Card */39  .timer-card {40    position: absolute;41    left: 36px;42    right: 36px;43    top: 260px;44    height: 1450px;45    background: #121c18;46    border-radius: 48px;47    box-shadow: 0 10px 30px rgba(0,0,0,0.45) inset;48  }49  .card-title {50    position: absolute;51    top: 42px;52    left: 50px;53    font-size: 56px;54    color: #e7efe8;55  }56  .close-chip {57    position: absolute;58    top: 36px;59    right: 36px;60    width: 80px;61    height: 80px;62    background: #2a3a33;63    color: #b8d9bf;64    border-radius: 50%;65    display: flex; align-items: center; justify-content: center;66    font-size: 40px;67    line-height: 1;68  }69 70  /* Circular progress */71  .ring-wrap {72    position: absolute;73    top: 170px;74    left: 50%;75    transform: translateX(-50%);76    width: 860px;77    height: 860px;78  }79  .ring {80    position: absolute;81    inset: 0;82    border-radius: 50%;83    /* 75% progress approximation */84    background: conic-gradient(#86b886 300deg, #2b3a33 0deg 360deg);85  }86  .ring::after {87    content: "";88    position: absolute;89    inset: 60px;90    background: #121c18;91    border-radius: 50%;92    box-shadow: 0 0 0 2px rgba(0,0,0,0.25) inset;93  }94  .time-readout {95    position: absolute;96    top: 50%;97    left: 50%;98    transform: translate(-50%, -52%);99    font-size: 180px;100    font-weight: 500;101    letter-spacing: 2px;102    color: #f2f6f3;103  }104  .refresh {105    position: absolute;106    left: 50%;107    transform: translateX(-50%);108    bottom: 120px;109    width: 72px;110    height: 72px;111    color: #9dd09b;112  }113  .refresh svg { width: 100%; height: 100%; }114 115  /* Action buttons */116  .actions {117    position: absolute;118    left: 80px;119    right: 80px;120    bottom: 220px;121    display: flex;122    gap: 60px;123    justify-content: space-between;124  }125  .btn {126    flex: 1;127    height: 170px;128    border-radius: 100px;129    display: flex; align-items: center; justify-content: center;130    font-size: 56px;131  }132  .btn-addmin {133    background: #26362f;134    color: #e6f2ea;135    box-shadow: 0 6px 12px rgba(0,0,0,0.25) inset;136  }137  .btn-pause {138    background: #c4e6ee;139    color: #17333a;140  }141  .btn-pause .pause-bars {142    width: 80px; height: 80px;143    display: inline-flex; gap: 20px;144  }145  .btn-pause .pause-bars span {146    width: 18px; height: 80px; background: #17333a; border-radius: 10px;147    display: inline-block;148  }149 150  /* FAB Add */151  .fab {152    position: absolute;153    left: 50%;154    transform: translateX(-50%);155    top: 1710px;156    width: 230px;157    height: 230px;158    background: #bde9bc;159    color: #0f1513;160    border-radius: 50%;161    display: flex; align-items: center; justify-content: center;162    font-size: 132px;163    line-height: 0.8;164    box-shadow: 0 10px 30px rgba(0,0,0,0.35);165  }166 167  /* Bottom navigation */168  .bottom-nav {169    position: absolute;170    left: 0; right: 0; bottom: 0;171    height: 250px;172    background: #121c18;173    border-top-left-radius: 28px;174    border-top-right-radius: 28px;175    box-shadow: 0 -2px 0 rgba(255,255,255,0.03) inset;176  }177  .handle {178    position: absolute;179    top: 12px; left: 50%; transform: translateX(-50%);180    width: 280px; height: 12px; background: #e9ecea; border-radius: 8px; opacity: 0.9;181  }182  .nav-row {183    position: absolute;184    left: 40px; right: 40px; bottom: 28px;185    display: flex; justify-content: space-between; align-items: flex-end;186  }187  .nav-item {188    width: 18%;189    text-align: center;190    color: #9fb0a4;191    font-size: 36px;192  }193  .nav-item .icon {194    width: 86px; height: 86px; margin: 0 auto 16px auto; position: relative;195  }196  .nav-item.active {197    color: #e7efe8;198  }199  .active .icon::before {200    content: "";201    position: absolute;202    left: 50%; top: 50%; transform: translate(-50%, -50%);203    width: 150px; height: 86px; background: #1a2a24; border-radius: 46px;204  }205  .nav-item svg { position: relative; width: 86px; height: 86px; z-index: 1; }206 207</style>208</head>209<body>210<div id="render-target">211 212  <div class="page-title">Timer</div>213 214  <div class="kebab">215    <svg viewBox="0 0 24 24" fill="#c9d5ce">216      <circle cx="12" cy="5" r="2.2"/>217      <circle cx="12" cy="12" r="2.2"/>218      <circle cx="12" cy="19" r="2.2"/>219    </svg>220  </div>221 222  <div class="timer-card">223    <div class="card-title">30m Timer</div>224    <div class="close-chip">×</div>225 226    <div class="ring-wrap">227      <div class="ring"></div>228      <div class="time-readout">26:52</div>229      <div class="refresh" aria-label="restart">230        <svg viewBox="0 0 24 24">231          <path d="M17 7V3l4 4-4 4V7h-4a6 6 0 1 0 6 6h2A8 8 0 1 1 13 5h4z" fill="#9dd09b"/>232        </svg>233      </div>234    </div>235 236    <div class="actions">237      <div class="btn btn-addmin">+1:00</div>238      <div class="btn btn-pause">239        <div class="pause-bars"><span></span><span></span></div>240      </div>241    </div>242  </div>243 244  <div class="fab">+</div>245 246  <div class="bottom-nav">247    <div class="handle"></div>248    <div class="nav-row">249      <div class="nav-item">250        <div class="icon">251          <svg viewBox="0 0 24 24" fill="#9fb0a4">252            <path d="M7 5l-2-2 1.4-1.4L8.8 3.6 7 5zm10 0l-1.8-1.4L17.6 1.6 20 4l-3 1zM12 6a7 7 0 0 1 7 7v4H5v-4a7 7 0 0 1 7-7zm0 2a5 5 0 0 0-5 5v2h10v-2a5 5 0 0 0-5-5z"/>253          </svg>254        </div>255        Alarm256      </div>257 258      <div class="nav-item">259        <div class="icon">260          <svg viewBox="0 0 24 24" fill="#9fb0a4">261            <circle cx="12" cy="12" r="9" fill="none" stroke="#9fb0a4" stroke-width="2"/>262            <rect x="11" y="6" width="2" height="7" fill="#9fb0a4"/>263            <rect x="11" y="11" width="5" height="2" fill="#9fb0a4"/>264          </svg>265        </div>266        Clock267      </div>268 269      <div class="nav-item active">270        <div class="icon">271          <svg viewBox="0 0 24 24" fill="#dfeedb">272            <path d="M7 2h10v3c0 1.1-.9 2-2 2h-6c-1.1 0-2-.9-2-2V2zm0 19v-3c0-1.1.9-2 2-2h6c1.1 0 2 .9 2 2v3H7zm0-9l2 2h6l2-2-2-2H9l-2 2z"/>273          </svg>274        </div>275        Timer276      </div>277 278      <div class="nav-item">279        <div class="icon">280          <svg viewBox="0 0 24 24" fill="#9fb0a4">281            <path d="M9 2h6v2H9zM7 5h10l2 3h-2.1a8 8 0 1 1-9.8 0H5L7 5zm5 4a6 6 0 1 0 0 12 6 6 0 0 0 0-12z"/>282          </svg>283        </div>284        Stopwatch285      </div>286 287      <div class="nav-item">288        <div class="icon">289          <svg viewBox="0 0 24 24" fill="#9fb0a4">290            <path d="M3 10h12a4 4 0 0 1 4 4v5h-2v-3H5v3H3v-9zm2 2v2h12a2 2 0 0 0-2-2H5z"/>291          </svg>292        </div>293        Bedtime294      </div>295    </div>296  </div>297 298</div>299</body>300</html>