GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<title>Timer UI</title>5<style>6  body { margin: 0; padding: 0; background: transparent; }7  #render-target {8    width: 1080px;9    height: 2400px;10    position: relative;11    overflow: hidden;12    background: #0f1516;13    font-family: "Segoe UI", Arial, Helvetica, sans-serif;14    color: #e9f2f1;15  }16 17  /* Status bar */18  .status {19    position: absolute;20    top: 22px;21    left: 34px;22    right: 34px;23    height: 60px;24    display: flex;25    align-items: center;26    justify-content: space-between;27    color: #ffffff;28  }29  .status .time {30    font-size: 44px;31    letter-spacing: 1px;32    opacity: 0.95;33  }34  .status .icons {35    display: flex;36    align-items: center;37    gap: 16px;38  }39  .dot {40    width: 14px; height: 14px; border-radius: 50%;41    background: #ffffff;42    opacity: 0.9;43    margin-right: 10px;44  }45  .wifi {46    width: 26px; height: 18px; border: 2px solid #fff; border-top-color: transparent; border-right-color: transparent;47    transform: rotate(45deg);48    margin-right: 12px;49  }50  .battery {51    width: 34px; height: 18px; border: 2px solid #fff; position: relative;52  }53  .battery:after {54    content: "";55    position: absolute; right: -6px; top: 5px;56    width: 6px; height: 8px; background: #fff;57  }58 59  /* Header */60  .title {61    position: absolute;62    top: 98px;63    left: 44px;64    font-size: 66px;65    font-weight: 600;66    color: #d2dcdb;67  }68  .kebab {69    position: absolute;70    top: 96px;71    right: 36px;72    width: 14px; height: 60px;73    display: flex; flex-direction: column; justify-content: space-between;74    align-items: center;75  }76  .kebab span { width: 10px; height: 10px; border-radius: 50%; background: #a9b6b5; }77 78  /* Card */79  .card {80    position: absolute;81    top: 180px;82    left: 30px;83    width: 1020px;84    height: 1290px;85    background: #121c1d;86    border-radius: 56px;87    padding: 38px 44px;88    box-sizing: border-box;89  }90  .card .card-header {91    display: flex; align-items: center; justify-content: space-between;92  }93  .card .card-header .label {94    font-size: 64px; color: #cfe7e6; font-weight: 600;95  }96  .card .close {97    width: 72px; height: 72px; border-radius: 50%;98    background: #1b2a2b; display: flex; align-items: center; justify-content: center;99    color: #a5c8c7; font-size: 44px; font-weight: 700;100  }101 102  .ring {103    position: absolute;104    top: 200px; left: 50%; transform: translateX(-50%);105    width: 860px; height: 860px;106    border-radius: 50%;107    border: 28px solid #6fb7b2;108    display: flex; align-items: center; justify-content: center;109    box-sizing: border-box;110  }111  .ring .time {112    font-size: 220px;113    letter-spacing: 3px;114    color: #eef6f5;115    font-weight: 700;116  }117  .reset-wrap {118    position: absolute;119    top: 1020px; /* inside card, below ring center */120    left: 50%; transform: translateX(-50%);121    width: 84px; height: 84px; display: flex; align-items: center; justify-content: center;122  }123  .reset-circle {124    width: 66px; height: 66px; border-radius: 50%;125    border: 6px solid #6fb7b2; position: relative;126  }127  .reset-circle:after {128    content: ""; position: absolute; right: -2px; top: 18px;129    width: 0; height: 0; border-left: 10px solid #6fb7b2; border-top: 8px solid transparent; border-bottom: 8px solid transparent;130    transform: rotate(-30deg);131  }132 133  .btn-row {134    position: absolute;135    bottom: 140px;136    left: 80px;137    right: 80px;138    display: flex;139    justify-content: space-between;140    align-items: center;141  }142  .btn {143    height: 160px;144    border-radius: 84px;145    display: flex; align-items: center; justify-content: center;146    font-size: 64px; font-weight: 600;147  }148  .btn.add {149    width: 380px;150    background: #243737;151    color: #cfe7e6;152  }153  .btn.pause {154    width: 470px;155    background: #cbd9ff;156    color: #0f1c2d;157  }158  .btn.pause .pause-bars {159    display: inline-block; width: 36px; height: 66px; position: relative;160  }161  .btn.pause .pause-bars:before, .btn.pause .pause-bars:after {162    content: ""; position: absolute; top: 0; width: 10px; height: 100%; background: #0f1c2d; border-radius: 4px;163  }164  .btn.pause .pause-bars:after { right: 0; }165  .btn.pause .pause-bars:before { left: 0; }166 167  /* Floating add button */168  .fab {169    position: absolute;170    top: 1510px;171    left: 50%; transform: translateX(-50%);172    width: 230px; height: 230px; border-radius: 50%;173    background: #9ae3de;174    display: flex; align-items: center; justify-content: center;175    color: #073833;176    font-size: 120px; font-weight: 400;177  }178 179  /* Bottom navigation */180  .bottom-nav {181    position: absolute;182    bottom: 0;183    left: 0; right: 0;184    height: 280px;185    background: #0f1617;186    display: flex; align-items: flex-start; justify-content: space-around;187    padding-top: 34px;188  }189  .nav-item {190    display: flex; flex-direction: column; align-items: center; gap: 20px;191    color: #c2cccc;192  }193  .nav-item .icon {194    width: 88px; height: 88px; border-radius: 22px; display: flex; align-items: center; justify-content: center; color: #bcd1d0;195  }196  .nav-item .label { font-size: 38px; }197  .nav-item.active .icon {198    background: #294e4d; border-radius: 40px; width: 160px; height: 88px;199  }200  /* simple icons */201  .ico-alarm, .ico-clock, .ico-timer, .ico-stopwatch, .ico-bed {202    width: 46px; height: 46px; border: 4px solid currentColor; border-radius: 50%; position: relative;203  }204  .ico-alarm:before, .ico-alarm:after {205    content:""; position:absolute; width:16px; height:6px; background: currentColor; top:-8px;206  }207  .ico-alarm:before { left:-8px; transform: rotate(-20deg); }208  .ico-alarm:after { right:-8px; transform: rotate(20deg); }209 210  .ico-clock:before {211    content:""; position:absolute; width:4px; height:18px; background: currentColor; left:50%; top:8px; transform: translateX(-50%);212  }213  .ico-clock:after {214    content:""; position:absolute; width:16px; height:4px; background: currentColor; left:50%; top:24px; transform: translateX(-50%) rotate(30deg);215  }216 217  .ico-timer:before {218    content:""; position:absolute; width:20px; height:6px; background: currentColor; top:-10px; left:50%; transform: translateX(-50%);219  }220  .ico-timer:after {221    content:""; position:absolute; width:4px; height:18px; background: currentColor; left:50%; top:8px; transform: translateX(-50%);222  }223 224  .ico-stopwatch:before {225    content:""; position:absolute; width:18px; height:6px; background: currentColor; top:-10px; left:50%; transform: translateX(-50%);226  }227  .ico-stopwatch:after {228    content:""; position:absolute; width:4px; height:18px; background: currentColor; left:50%; top:10px; transform: translateX(-50%) rotate(40deg);229  }230 231  .ico-bed { border-radius: 10px; }232  .ico-bed:before {233    content:""; position:absolute; left:6px; right:6px; bottom:10px; height:8px; background: currentColor; border-radius: 4px;234  }235  .ico-bed:after {236    content:""; position:absolute; left:10px; top:14px; width:26px; height:12px; border:4px solid currentColor; border-radius:6px;237  }238 239  /* Bottom handle indicator */240  .handle {241    position: absolute;242    bottom: 20px; left: 50%; transform: translateX(-50%);243    width: 460px; height: 10px; background: #d8e0e0; border-radius: 8px; opacity: 0.6;244  }245</style>246</head>247<body>248<div id="render-target">249 250  <div class="status">251    <div class="time">5:30</div>252    <div style="display:flex; align-items:center;">253      <div class="dot"></div>254      <div class="dot"></div>255      <div class="dot"></div>256      <div class="dot"></div>257      <div class="dot" style="margin-right:16px;"></div>258      <div class="wifi"></div>259      <div class="battery"></div>260    </div>261  </div>262 263  <div class="title">Timer</div>264  <div class="kebab"><span></span><span></span><span></span></div>265 266  <div class="card">267    <div class="card-header">268      <div class="label">30m Timer</div>269      <div class="close">×</div>270    </div>271 272    <div class="ring">273      <div class="time">29:58</div>274    </div>275 276    <div class="reset-wrap">277      <div class="reset-circle"></div>278    </div>279 280    <div class="btn-row">281      <div class="btn add">+1:00</div>282      <div class="btn pause"><span class="pause-bars"></span></div>283    </div>284  </div>285 286  <div class="fab">+</div>287 288  <div class="bottom-nav">289    <div class="nav-item">290      <div class="icon"><div class="ico-alarm"></div></div>291      <div class="label">Alarm</div>292    </div>293    <div class="nav-item">294      <div class="icon"><div class="ico-clock"></div></div>295      <div class="label">Clock</div>296    </div>297    <div class="nav-item active">298      <div class="icon" style="justify-content:center;">299        <div class="ico-timer"></div>300      </div>301      <div class="label">Timer</div>302    </div>303    <div class="nav-item">304      <div class="icon"><div class="ico-stopwatch"></div></div>305      <div class="label">Stopwatch</div>306    </div>307    <div class="nav-item">308      <div class="icon"><div class="ico-bed"></div></div>309      <div class="label">Bedtime</div>310    </div>311  </div>312 313  <div class="handle"></div>314</div>315</body>316</html>