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: Arial, Helvetica, sans-serif; }9  #render-target {10    position: relative;11    overflow: hidden;12    width: 1080px;13    height: 2400px;14    background: #1F1B24;15    color: #EDE8F7;16  }17 18  /* Status bar */19  .status-bar {20    position: absolute;21    top: 0;22    left: 0;23    width: 1080px;24    height: 120px;25    padding: 30px 36px;26    box-sizing: border-box;27    color: #EDE8F7;28    font-size: 38px;29    letter-spacing: 0.5px;30    display: flex;31    align-items: center;32    justify-content: space-between;33  }34  .status-left { display: flex; align-items: center; gap: 22px; }35  .status-center { display: flex; align-items: center; gap: 14px; opacity: 0.8; }36  .status-center .square {37    width: 32px; height: 32px; border-radius: 4px; background: #D7D3DE;38  }39  .status-center .dot {40    width: 10px; height: 10px; border-radius: 50%; background: #D7D3DE; margin-left: 16px;41  }42  .status-right { display: flex; align-items: center; gap: 20px; }43  .status-right svg { fill: none; stroke: #EDE8F7; stroke-width: 4; }44 45  /* Page title */46  .page-title {47    position: absolute;48    top: 150px;49    left: 48px;50    font-size: 68px;51    font-weight: 600;52    color: #EDE8F7;53  }54 55  /* Overflow (three dots) menu icon */56  .overflow-menu {57    position: absolute;58    top: 168px;59    right: 48px;60    width: 16px;61    height: 60px;62    display: flex;63    flex-direction: column;64    justify-content: space-between;65    align-items: center;66    opacity: 0.7;67  }68  .overflow-menu span {69    width: 12px; height: 12px; background: #C7BFCE; border-radius: 50%;70  }71 72  /* Main card */73  .card {74    position: absolute;75    left: 36px;76    top: 260px;77    width: 1008px;78    height: 1400px;79    background: #241F2A;80    border-radius: 72px;81    box-shadow: 0 10px 30px rgba(0,0,0,0.3) inset;82  }83  .card-header {84    position: absolute;85    top: 42px;86    left: 48px;87    right: 48px;88    display: flex;89    align-items: center;90    justify-content: space-between;91  }92  .card-title {93    font-size: 60px;94    font-weight: 600;95    color: #EDE8F7;96    opacity: 0.95;97  }98  .close-pill {99    width: 84px; height: 84px; border-radius: 50%;100    background: #3A3440;101    display: flex; align-items: center; justify-content: center;102    box-shadow: 0 0 0 6px rgba(179,136,215,0.25) inset;103  }104  .close-pill .x {105    width: 40px; height: 40px; position: relative;106  }107  .close-pill .x:before, .close-pill .x:after {108    content: ""; position: absolute; left: 50%; top: 50%;109    width: 4px; height: 40px; background: #CDB3E6; transform-origin: center;110  }111  .close-pill .x:before { transform: translate(-50%,-50%) rotate(45deg); }112  .close-pill .x:after  { transform: translate(-50%,-50%) rotate(-45deg); }113 114  /* Timer dial */115  .dial-wrap {116    position: absolute;117    top: 190px;118    left: 114px;119    width: 780px;120    height: 780px;121  }122  .dial {123    position: absolute;124    width: 780px;125    height: 780px;126    border-radius: 50%;127    background: conic-gradient(#B38BD7 320deg, #524B57 320deg 360deg);128  }129  .dial::after {130    content: "";131    position: absolute;132    top: 36px; left: 36px; right: 36px; bottom: 36px;133    background: #241F2A;134    border-radius: 50%;135  }136  .dial-time {137    position: absolute;138    top: 50%; left: 50%;139    transform: translate(-50%,-50%);140    font-size: 160px;141    font-weight: 700;142    letter-spacing: 6px;143    color: #F2ECFB;144  }145  .refresh-icon {146    position: absolute;147    left: 50%;148    bottom: 120px;149    transform: translateX(-50%);150    width: 64px; height: 64px;151  }152  .refresh-icon svg { width: 64px; height: 64px; }153  .refresh-icon circle { stroke: #B38BD7; stroke-width: 10; fill: none; opacity: 0.9; }154  .refresh-icon path { stroke: #B38BD7; stroke-width: 10; fill: none; stroke-linecap: round; }155 156  /* Controls row */157  .controls {158    position: absolute;159    bottom: 200px;160    left: 60px;161    right: 60px;162    display: flex;163    justify-content: space-between;164    align-items: center;165  }166  .pill-btn {167    width: 420px; height: 170px;168    background: #3A3440;169    border-radius: 90px;170    display: flex; align-items: center; justify-content: center;171    font-size: 64px; color: #E8DDF2;172    box-shadow: 0 8px 24px rgba(0,0,0,0.35) inset;173  }174  .play-btn {175    width: 420px; height: 170px; border-radius: 90px;176    background: #F6C5C6;177    display: flex; align-items: center; justify-content: center;178    box-shadow: 0 12px 26px rgba(0,0,0,0.25);179  }180  .play-btn svg { width: 54px; height: 54px; fill: #4B2E3A; }181 182  /* Floating add timer */183  .add-timer {184    position: absolute;185    top: 1700px;186    left: 50%;187    transform: translateX(-50%);188    width: 260px; height: 260px; border-radius: 50%;189    background: #D7B3F6;190    display: flex; align-items: center; justify-content: center;191    color: #1F1B24; font-size: 120px; font-weight: 600;192    box-shadow: 0 20px 40px rgba(0,0,0,0.35);193  }194 195  /* Bottom navigation */196  .bottom-nav {197    position: absolute;198    bottom: 0;199    left: 0;200    width: 1080px;201    height: 240px;202    background: #2A2530;203    border-top-left-radius: 36px;204    border-top-right-radius: 36px;205    box-shadow: 0 -8px 20px rgba(0,0,0,0.35);206    display: flex;207    align-items: center;208    justify-content: space-around;209    color: #EDE8F7;210  }211  .nav-item {212    width: 180px;213    height: 180px;214    display: flex;215    flex-direction: column;216    align-items: center;217    justify-content: center;218    gap: 18px;219    font-size: 36px;220    opacity: 0.9;221  }222  .nav-item svg { width: 64px; height: 64px; stroke: #EDE8F7; fill: none; stroke-width: 6; }223  .nav-active {224    position: absolute;225    bottom: 120px;226    left: 50%;227    transform: translateX(-50%);228    width: 220px; height: 100px;229    background: #3A3440;230    border-radius: 54px;231    z-index: 1;232  }233  /* Home gesture bar */234  .home-bar {235    position: absolute;236    bottom: 260px;237    left: 50%;238    transform: translateX(-50%);239    width: 560px; height: 14px;240    background: #EDE8F7;241    border-radius: 12px;242    opacity: 0.9;243  }244</style>245</head>246<body>247<div id="render-target">248 249  <!-- Status bar -->250  <div class="status-bar">251    <div class="status-left">3:08</div>252    <div class="status-center">253      <div class="square"></div>254      <div class="square"></div>255      <div class="square"></div>256      <div class="square"></div>257      <div class="dot"></div>258    </div>259    <div class="status-right">260      <!-- WiFi -->261      <svg viewBox="0 0 64 64">262        <path d="M4 22c14-12 42-12 56 0" />263        <path d="M12 30c10-8 30-8 40 0" />264        <path d="M22 38c6-6 14-6 20 0" />265        <circle cx="32" cy="46" r="3" fill="#EDE8F7"></circle>266      </svg>267      <!-- Battery -->268      <svg viewBox="0 0 80 64">269        <rect x="4" y="14" width="60" height="36" rx="6" />270        <rect x="66" y="22" width="10" height="20" rx="4" />271        <rect x="10" y="20" width="40" height="24" fill="#EDE8F7" stroke="none" />272      </svg>273    </div>274  </div>275 276  <!-- Title and overflow -->277  <div class="page-title">Timer</div>278  <div class="overflow-menu">279    <span></span><span></span><span></span>280  </div>281 282  <!-- Main card -->283  <div class="card">284    <div class="card-header">285      <div class="card-title">10m Timer</div>286      <div class="close-pill"><div class="x"></div></div>287    </div>288 289    <!-- Dial -->290    <div class="dial-wrap">291      <div class="dial"></div>292      <div class="dial-time">9:59</div>293      <div class="refresh-icon">294        <svg viewBox="0 0 64 64">295          <circle cx="32" cy="32" r="22"></circle>296          <path d="M32 12 l8 0 -6 6" />297        </svg>298      </div>299    </div>300 301    <!-- Controls -->302    <div class="controls">303      <div class="pill-btn">+1:00</div>304      <div class="play-btn">305        <svg viewBox="0 0 64 64">306          <polygon points="24,18 24,46 48,32" />307        </svg>308      </div>309    </div>310  </div>311 312  <!-- Add timer floating button -->313  <div class="add-timer">+</div>314 315  <!-- Home gesture bar -->316  <div class="home-bar"></div>317 318  <!-- Bottom navigation -->319  <div class="bottom-nav">320    <div class="nav-active"></div>321    <div class="nav-item">322      <svg viewBox="0 0 64 64">323        <path d="M32 12 l0 8" />324        <circle cx="32" cy="34" r="16"></circle>325      </svg>326      <div>Alarm</div>327    </div>328    <div class="nav-item">329      <svg viewBox="0 0 64 64">330        <circle cx="32" cy="32" r="22"></circle>331        <path d="M32 32 L32 18 M32 32 L44 32" />332      </svg>333      <div>Clock</div>334    </div>335    <div class="nav-item" style="z-index:2;">336      <svg viewBox="0 0 64 64">337        <path d="M24 12 L40 12 L32 24 Z" />338        <path d="M24 52 L40 52 L32 40 Z" />339      </svg>340      <div>Timer</div>341    </div>342    <div class="nav-item">343      <svg viewBox="0 0 64 64">344        <circle cx="32" cy="34" r="20"></circle>345        <path d="M32 12 L32 20" />346        <path d="M22 12 L10 18" />347      </svg>348      <div>Stopwatch</div>349    </div>350    <div class="nav-item">351      <svg viewBox="0 0 64 64">352        <rect x="8" y="30" width="48" height="16" rx="4"></rect>353        <rect x="12" y="22" width="18" height="10" rx="2"></rect>354      </svg>355      <div>Bedtime</div>356    </div>357  </div>358 359</div>360</body>361</html>