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 Mock</title>7<style>8  /* BODY RESET */9  html, body { margin: 0; padding: 0; }10  body { background: transparent; }11 12  /* ROOT RENDER TARGET */13  #render-target {14    position: relative;15    width: 1080px;16    height: 2400px;17    overflow: hidden;18    background: #201816; /* dark warm */19    border-radius: 30px;20    font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;21    color: #f2dcd8;22  }23 24  /* Top heading */25  .top-bar {26    position: absolute;27    top: 120px;28    left: 64px;29    right: 64px;30    display: flex;31    align-items: center;32    justify-content: space-between;33  }34  .title {35    font-size: 64px;36    font-weight: 500;37    letter-spacing: 0.5px;38    color: #e9cfcf;39  }40  .more-vert {41    width: 56px;42    height: 100px;43    display: flex;44    align-items: center;45    justify-content: center;46  }47  .more-vert span {48    display: block;49    width: 10px; height: 10px; border-radius: 50%;50    background: #cdb4b3; margin: 6px 0;51  }52 53  /* Card */54  .timer-card {55    position: absolute;56    left: 36px;57    right: 36px;58    top: 210px;59    height: 1500px;60    background: #2a1e1e;61    border-radius: 64px;62    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.03);63  }64  .card-header {65    position: relative;66    padding: 56px 56px 0 56px;67  }68  .card-header h2 {69    margin: 0;70    font-size: 56px;71    font-weight: 500;72    color: #e8cccc;73  }74  .close-chip {75    position: absolute;76    right: 48px;77    top: 36px;78    width: 82px; height: 82px;79    border-radius: 50%;80    background: #5a4141;81    display: flex; align-items: center; justify-content: center;82    color: #f0d7d5;83    font-size: 44px; line-height: 1;84  }85 86  /* Circular progress timer */87  .ring {88    position: relative;89    width: 880px;90    height: 880px;91    margin: 40px auto 0;92    border-radius: 50%;93    /* progress ~10% from top (270deg) */94    background: conic-gradient(#d98480 0deg 36deg, #4b3b39 36deg 360deg);95  }96  .ring::after {97    content: "";98    position: absolute;99    inset: 40px;100    background: #2a1e1e; /* card color to create ring thickness */101    border-radius: 50%;102  }103  .time-text {104    position: absolute;105    top: 50%;106    left: 50%;107    transform: translate(-50%, -58%);108    font-size: 184px;109    font-weight: 600;110    letter-spacing: 2px;111    color: #f3dedd;112    z-index: 1;113  }114  .refresh {115    position: absolute;116    top: 66%;117    left: 50%;118    transform: translate(-50%, -50%);119    z-index: 1;120    width: 84px; height: 84px;121    display: flex; align-items: center; justify-content: center;122  }123  .refresh svg { width: 84px; height: 84px; }124 125  /* Actions buttons */126  .actions {127    position: absolute;128    bottom: 80px;129    left: 0; right: 0;130    display: flex;131    justify-content: center;132    gap: 80px;133  }134  .pill {135    width: 380px;136    height: 160px;137    border-radius: 100px;138    display: flex; align-items: center; justify-content: center;139    font-size: 56px;140    font-weight: 500;141  }142  .pill.dark {143    background: #5c4242;144    color: #f1d8d7;145  }146  .pill.yellow {147    background: #e6cf92;148    color: #3c2b00;149    position: relative;150  }151  .pill.yellow .play {152    width: 0; height: 0;153    border-left: 36px solid #3c2b00;154    border-top: 26px solid transparent;155    border-bottom: 26px solid transparent;156    margin-left: 18px;157  }158 159  /* Floating add button */160  .fab {161    position: absolute;162    bottom: 365px;163    left: 50%;164    transform: translateX(-50%);165    width: 210px;166    height: 210px;167    border-radius: 50%;168    background: #f2a6a0;169    color: #3a2a2a;170    font-size: 120px;171    line-height: 210px;172    text-align: center;173    box-shadow: 0 10px 20px rgba(0,0,0,0.25);174  }175 176  /* Bottom navigation */177  .bottom-nav {178    position: absolute;179    left: 0; right: 0; bottom: 0;180    height: 250px;181    background: #2b1f1f;182    display: flex;183    align-items: center;184    justify-content: space-around;185    padding-bottom: 40px;186  }187  .nav-item {188    width: 180px;189    text-align: center;190    color: #e2c9c7;191    font-size: 36px;192  }193  .nav-item svg { display: block; margin: 0 auto 10px auto; }194  .nav-item.active .pill-bg {195    background: #5b4141;196    border-radius: 36px;197    padding: 18px 30px;198    display: inline-flex;199    align-items: center;200    gap: 18px;201  }202  .nav-item.active span.label {203    display: block;204    margin-top: 10px;205    color: #f3dedd;206  }207  .nav-item span.label { display: block; margin-top: 6px; font-size: 32px; color: #d8c0bf; }208 209  /* Home indicator */210  .home-indicator {211    position: absolute;212    left: 50%;213    transform: translateX(-50%);214    bottom: 270px;215    width: 320px;216    height: 10px;217    background: #d3cdcc;218    border-radius: 10px;219    opacity: .9;220  }221</style>222</head>223<body>224<div id="render-target">225 226  <!-- Top heading -->227  <div class="top-bar">228    <div class="title">Timer</div>229    <div class="more-vert" aria-label="More options">230      <span></span>231      <span></span>232      <span></span>233    </div>234  </div>235 236  <!-- Card -->237  <div class="timer-card">238    <div class="card-header">239      <h2>20m timer</h2>240      <div class="close-chip">×</div>241    </div>242 243    <div class="ring">244      <div class="time-text">17:54</div>245      <div class="refresh">246        <!-- simple circular arrow -->247        <svg viewBox="0 0 24 24">248          <path d="M12 2a9.5 9.5 0 1 0 9.4 8" fill="none" stroke="#d98580" stroke-width="2.2" stroke-linecap="round"/>249          <path d="M21 2v6h-6" fill="none" stroke="#d98580" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/>250        </svg>251      </div>252    </div>253 254    <!-- Action buttons -->255    <div class="actions">256      <div class="pill dark">+1:00</div>257      <div class="pill yellow"><div class="play"></div></div>258    </div>259  </div>260 261  <!-- Floating action button -->262  <div class="fab">+</div>263 264  <!-- Home gesture indicator -->265  <div class="home-indicator"></div>266 267  <!-- Bottom navigation -->268  <div class="bottom-nav">269 270    <div class="nav-item">271      <svg width="64" height="64" viewBox="0 0 24 24" stroke="#e2c9c7" stroke-width="1.6" fill="none" stroke-linecap="round" stroke-linejoin="round">272        <circle cx="12" cy="13" r="5"></circle>273        <path d="M7 7l-2-2"></path>274        <path d="M17 7l2-2"></path>275      </svg>276      <span class="label">Alarm</span>277    </div>278 279    <div class="nav-item">280      <svg width="64" height="64" viewBox="0 0 24 24" stroke="#e2c9c7" stroke-width="1.6" fill="none" stroke-linecap="round" stroke-linejoin="round">281        <circle cx="12" cy="12" r="8"></circle>282        <path d="M12 6v6l4 2"></path>283      </svg>284      <span class="label">Clock</span>285    </div>286 287    <div class="nav-item active">288      <div class="pill-bg">289        <svg width="56" height="56" viewBox="0 0 24 24" stroke="#f3dedd" stroke-width="1.8" fill="none" stroke-linecap="round" stroke-linejoin="round">290          <path d="M8 4h8"></path>291          <path d="M8 20h8"></path>292          <path d="M9 4l6 16"></path>293          <path d="M15 4L9 20"></path>294        </svg>295      </div>296      <span class="label">Timer</span>297    </div>298 299    <div class="nav-item">300      <svg width="64" height="64" viewBox="0 0 24 24" stroke="#e2c9c7" stroke-width="1.6" fill="none" stroke-linecap="round" stroke-linejoin="round">301        <circle cx="12" cy="13" r="7"></circle>302        <path d="M9 4h6"></path>303        <path d="M12 9v4l3 2"></path>304      </svg>305      <span class="label">Stopwatch</span>306    </div>307 308    <div class="nav-item">309      <svg width="64" height="64" viewBox="0 0 24 24" stroke="#e2c9c7" stroke-width="1.6" fill="none" stroke-linecap="round" stroke-linejoin="round">310        <path d="M3 12h18v7H3z"></path>311        <path d="M7 12V9h4v3"></path>312      </svg>313      <span class="label">Bedtime</span>314    </div>315 316  </div>317 318</div>319</body>320</html>