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    position: relative;9    overflow: hidden;10    width: 1080px;11    height: 2400px;12    background: #121314;13    font-family: Arial, Helvetica, sans-serif;14    color: #EAEAEA;15  }16 17  /* Status bar */18  .status-bar {19    position: absolute;20    top: 0;21    left: 0;22    width: 1080px;23    height: 100px;24    display: flex;25    align-items: center;26    padding: 0 40px;27    color: #CFCFCF;28    font-size: 38px;29    letter-spacing: 1px;30  }31  .status-right {32    margin-left: auto;33    display: flex;34    align-items: center;35    gap: 22px;36  }37  .sb-icon {38    width: 34px;39    height: 34px;40    border-radius: 6px;41    background: #2A2D31;42  }43  .battery {44    width: 34px; height: 34px;45    border: 2px solid #CFCFCF;46    border-radius: 6px;47    position: relative;48  }49  .battery::after {50    content: "";51    position: absolute;52    right: -8px;53    top: 10px;54    width: 6px; height: 12px;55    background: #CFCFCF;56    border-radius: 2px;57  }58  .signal {59    width: 0; height: 0;60    border-left: 18px solid transparent;61    border-right: 18px solid transparent;62    border-bottom: 34px solid #CFCFCF;63    border-radius: 4px;64  }65 66  /* Header title and menu */67  .header {68    position: absolute;69    top: 130px;70    left: 48px;71    font-size: 92px;72    color: #E7E7E7;73    font-weight: 600;74  }75  .menu-dot {76    position: absolute;77    top: 140px;78    right: 48px;79    width: 12px; height: 12px;80    background: #CFCFCF;81    border-radius: 50%;82    box-shadow: 0 36px 0 #CFCFCF, 0 72px 0 #CFCFCF;83  }84 85  /* Time display */86  .time-display {87    position: absolute;88    top: 320px;89    width: 1080px;90    text-align: center;91    font-weight: 700;92  }93  .td-part {94    display: inline-block;95    margin: 0 22px;96    font-size: 170px;97    line-height: 1;98  }99  .td-hour {100    color: #8B8D90;101  }102  .td-min, .td-sec {103    color: #AECBFA;104  }105  .unit {106    font-size: 86px;107    color: #8FA4C8;108    margin-left: 14px;109    font-weight: 600;110  }111 112  /* Dial pad */113  .dialpad {114    position: absolute;115    top: 720px;116    left: 60px;117    width: 960px;118  }119  .dial-row {120    display: flex;121    justify-content: space-between;122    margin-bottom: 70px;123  }124  .key {125    width: 260px; height: 260px;126    border-radius: 50%;127    background: #191C21;128    display: flex;129    align-items: center;130    justify-content: center;131    font-size: 120px;132    color: #ECECEC;133    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.04);134  }135  .key.dark {136    background: #313A48;137    color: #E8EEF8;138  }139  .key small {140    font-size: 90px;141  }142 143  /* Play button */144  .play-wrap {145    position: absolute;146    bottom: 390px;147    width: 1080px;148    display: flex;149    justify-content: center;150  }151  .play-btn {152    width: 260px; height: 260px;153    border-radius: 50%;154    background: #BFD0FF;155    display: flex;156    align-items: center;157    justify-content: center;158    box-shadow: 0 10px 30px rgba(0,0,0,0.35);159  }160  .play-triangle {161    width: 0; height: 0;162    border-left: 42px solid #193B67;163    border-top: 28px solid transparent;164    border-bottom: 28px solid transparent;165    margin-left: 12px;166  }167 168  /* Bottom navigation */169  .bottom-nav {170    position: absolute;171    bottom: 0;172    left: 0;173    width: 1080px;174    height: 220px;175    background: #1A1D22;176    border-top: 1px solid #2B2F36;177    display: flex;178    align-items: center;179    justify-content: space-around;180    color: #C9CDD3;181  }182  .nav-item {183    width: 180px;184    display: flex;185    flex-direction: column;186    align-items: center;187    gap: 18px;188    font-size: 42px;189  }190  .nav-icon {191    width: 72px; height: 72px;192    border-radius: 50%;193    border: 3px solid #C9CDD3;194    position: relative;195  }196  /* Simple icons */197  .alarm-hand::after {198    content: "";199    position: absolute;200    width: 3px; height: 24px;201    background: #C9CDD3;202    top: 18px; left: 34px;203    transform-origin: bottom;204    transform: rotate(30deg);205  }206  .clock-icon::after {207    content: "";208    position: absolute;209    width: 3px; height: 24px;210    background: #C9CDD3;211    top: 18px; left: 34px;212  }213  .clock-icon::before {214    content: "";215    position: absolute;216    width: 24px; height: 3px;217    background: #C9CDD3;218    top: 34px; left: 34px;219  }220  .timer-active {221    width: 130px; height: 64px;222    background: #3A4352;223    border-radius: 32px;224    display: flex;225    align-items: center;226    justify-content: center;227  }228  .hourglass {229    width: 34px; height: 34px;230    border: 3px solid #C9CDD3;231    border-top-left-radius: 10px;232    border-top-right-radius: 10px;233    border-bottom-left-radius: 10px;234    border-bottom-right-radius: 10px;235    position: relative;236  }237  .hourglass::before, .hourglass::after {238    content: "";239    position: absolute; left: 6px; right: 6px;240    height: 3px; background: #C9CDD3;241  }242  .hourglass::before { top: 8px; }243  .hourglass::after { bottom: 8px; }244  .stopwatch-icon::after {245    content: "";246    position: absolute;247    width: 12px; height: 12px;248    background: #C9CDD3;249    top: -8px; left: 30px;250    border-radius: 3px;251  }252  .bed-icon {253    position: relative;254  }255  .bed-icon::before {256    content:"";257    position:absolute;258    left:10px; right:10px; bottom:14px;259    height:16px; background:#C9CDD3; border-radius:4px;260  }261  .bed-icon::after {262    content:"";263    position:absolute;264    left:16px; top:22px; width:24px; height:18px;265    background:#C9CDD3; border-radius:6px;266  }267  .label-active { color: #EAEFFA; font-weight: 600; }268  .subtle {269    color: #9EA4AE;270  }271 272  /* Backspace icon inside key */273  .backspace {274    width: 110px; height: 70px;275    border: 6px solid #E8EEF8;276    border-left-width: 0;277    border-radius: 12px;278    position: relative;279  }280  .backspace::before {281    content: "";282    position: absolute;283    left: -50px; top: 10px;284    width: 0; height: 0;285    border-top: 25px solid transparent;286    border-bottom: 25px solid transparent;287    border-right: 50px solid #E8EEF8;288    border-radius: 8px;289  }290  .backspace::after {291    content: "×";292    position: absolute;293    top: 8px; left: 36px;294    font-size: 48px; font-weight: 700;295    color: #E8EEF8;296  }297</style>298</head>299<body>300<div id="render-target">301 302  <!-- Status bar -->303  <div class="status-bar">304    <div>11:44</div>305    <div class="status-right">306      <div class="sb-icon"></div>307      <div class="sb-icon"></div>308      <div class="sb-icon"></div>309      <div class="signal"></div>310      <div class="battery"></div>311    </div>312  </div>313 314  <!-- Title -->315  <div class="header">Timer</div>316  <div class="menu-dot"></div>317 318  <!-- Time display -->319  <div class="time-display">320    <div class="td-part td-hour">00<span class="unit">h</span></div>321    <div class="td-part td-min">02<span class="unit">m</span></div>322    <div class="td-part td-sec">30<span class="unit">s</span></div>323  </div>324 325  <!-- Dial pad -->326  <div class="dialpad">327    <div class="dial-row">328      <div class="key">1</div>329      <div class="key">2</div>330      <div class="key">3</div>331    </div>332    <div class="dial-row">333      <div class="key">4</div>334      <div class="key">5</div>335      <div class="key">6</div>336    </div>337    <div class="dial-row">338      <div class="key">7</div>339      <div class="key">8</div>340      <div class="key">9</div>341    </div>342    <div class="dial-row">343      <div class="key"><small>00</small></div>344      <div class="key">0</div>345      <div class="key dark">346        <div class="backspace"></div>347      </div>348    </div>349  </div>350 351  <!-- Play button -->352  <div class="play-wrap">353    <div class="play-btn">354      <div class="play-triangle"></div>355    </div>356  </div>357 358  <!-- Bottom navigation -->359  <div class="bottom-nav">360    <div class="nav-item">361      <div class="nav-icon alarm-hand"></div>362      <div class="subtle">Alarm</div>363    </div>364    <div class="nav-item">365      <div class="nav-icon clock-icon"></div>366      <div class="subtle">Clock</div>367    </div>368    <div class="nav-item">369      <div class="timer-active">370        <div class="hourglass"></div>371      </div>372      <div class="label-active">Timer</div>373    </div>374    <div class="nav-item">375      <div class="nav-icon stopwatch-icon"></div>376      <div class="subtle">Stopwatch</div>377    </div>378    <div class="nav-item">379      <div class="nav-icon bed-icon"></div>380      <div class="subtle">Bedtime</div>381    </div>382  </div>383 384</div>385</body>386</html>