GD-ML/AndroidCode

1<!DOCTYPE html>2<html>3<head>4<meta charset="UTF-8">5<title>Timer UI</title>6<style>7  body {8    margin: 0;9    padding: 0;10    background: transparent;11    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Helvetica Neue", Arial, sans-serif;12  }13  #render-target {14    width: 1080px;15    height: 2400px;16    position: relative;17    overflow: hidden;18    background: #0f1414;19    color: #e9f0ef;20  }21 22  /* Status bar */23  .status-bar {24    height: 110px;25    padding: 0 36px;26    box-sizing: border-box;27    display: flex;28    align-items: center;29    justify-content: space-between;30    color: #e6eceb;31    font-size: 36px;32    letter-spacing: 0.5px;33  }34  .status-right {35    display: flex;36    gap: 26px;37    align-items: center;38    color: #d8dfde;39  }40  .status-icon svg {41    width: 36px;42    height: 36px;43    stroke: #d8dfde;44  }45 46  /* Header */47  .header {48    padding: 10px 54px 0 54px;49    box-sizing: border-box;50  }51  .title {52    font-size: 72px;53    font-weight: 500;54    color: #e9f0ef;55    margin: 10px 0 30px;56  }57  .menu-dots {58    position: absolute;59    right: 42px;60    top: 240px;61    width: 10px;62    height: 60px;63    display: flex;64    flex-direction: column;65    justify-content: space-between;66  }67  .menu-dots span {68    width: 10px;69    height: 10px;70    background: #9aa4a3;71    border-radius: 50%;72    display: block;73  }74 75  /* Time display */76  .time-display {77    display: flex;78    align-items: baseline;79    gap: 24px;80    padding-left: 54px;81    margin-top: 50px;82    font-variant-numeric: tabular-nums;83  }84  .time-section {85    display: flex;86    align-items: baseline;87    gap: 8px;88  }89  .time-section .num {90    font-size: 160px;91    font-weight: 400;92    color: #c7cbcc;93  }94  .time-section .unit {95    font-size: 64px;96    color: #8a8f91;97    margin-bottom: 18px;98  }99  .time-section.seconds .num {100    color: #7fe3db;101  }102  .time-section.seconds .unit {103    color: #83e7df;104  }105 106  /* Keypad */107  .keypad {108    width: 940px;109    margin: 70px auto 0;110    display: grid;111    grid-template-columns: repeat(3, 1fr);112    gap: 46px 46px;113  }114  .key {115    width: 280px;116    height: 280px;117    border-radius: 50%;118    background: #131c1d;119    display: flex;120    align-items: center;121    justify-content: center;122    color: #e9f0ef;123    font-size: 92px;124    user-select: none;125  }126  .key.dim {127    background: #183234;128  }129  .key svg {130    width: 84px;131    height: 84px;132    stroke: #e9f0ef;133  }134 135  /* Play FAB */136  .fab {137    position: absolute;138    left: 50%;139    transform: translateX(-50%);140    bottom: 430px;141    width: 260px;142    height: 260px;143    border-radius: 50%;144    background: #86e8e0;145    display: flex;146    align-items: center;147    justify-content: center;148  }149  .fab .play {150    width: 0;151    height: 0;152    border-left: 52px solid #0f1414;153    border-top: 32px solid transparent;154    border-bottom: 32px solid transparent;155    margin-left: 10px;156  }157 158  /* Bottom navigation */159  .bottom-nav {160    position: absolute;161    left: 0;162    right: 0;163    bottom: 96px;164    height: 240px;165    background: #121b1c;166    border-top: 1px solid #1e292a;167    display: flex;168    align-items: center;169    justify-content: space-around;170    padding: 0 28px;171    box-sizing: border-box;172  }173  .nav-item {174    width: 170px;175    text-align: center;176    color: #b7c1c0;177  }178  .nav-item svg {179    width: 66px;180    height: 66px;181    stroke: #b7c1c0;182    margin-bottom: 12px;183  }184  .nav-label {185    font-size: 34px;186  }187  .nav-item.active .chip {188    width: 140px;189    height: 80px;190    border-radius: 40px;191    background: #294646;192    margin: 0 auto 12px;193    display: flex;194    align-items: center;195    justify-content: center;196  }197  .nav-item.active svg {198    stroke: #cdeeed;199  }200  .nav-item.active .nav-label {201    color: #e9f0ef;202  }203 204  /* Gesture bar */205  .gesture {206    position: absolute;207    left: 50%;208    transform: translateX(-50%);209    bottom: 26px;210    width: 360px;211    height: 12px;212    background: #e9f0ef;213    opacity: 0.9;214    border-radius: 8px;215  }216</style>217</head>218<body>219<div id="render-target">220 221  <!-- Status Bar -->222  <div class="status-bar">223    <div class="status-left">11:57</div>224    <div class="status-right">225      <span class="status-icon">226        <svg viewBox="0 0 24 24" fill="none">227          <path d="M3 12l5 5 13-13" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>228        </svg>229      </span>230      <span class="status-icon">231        <svg viewBox="0 0 24 24" fill="none">232          <rect x="6" y="3" width="12" height="18" rx="2" ry="2" stroke-width="2"></rect>233          <path d="M10 2h4" stroke-width="2"></path>234        </svg>235      </span>236      <span class="status-icon">237        <svg viewBox="0 0 24 24" fill="none">238          <rect x="4" y="5" width="6" height="14" rx="1" stroke-width="2"></rect>239          <rect x="14" y="5" width="6" height="14" rx="1" stroke-width="2"></rect>240        </svg>241      </span>242      <span class="status-icon">243        <svg viewBox="0 0 24 24" fill="none">244          <path d="M2 12h20" stroke-width="2"></path>245          <path d="M12 2v20" stroke-width="2"></path>246        </svg>247      </span>248      <span class="status-icon">249        <svg viewBox="0 0 24 24" fill="none">250          <path d="M21 8a8 8 0 11-6-2" stroke-width="2"></path>251          <circle cx="21" cy="3" r="2" stroke-width="2"></circle>252        </svg>253      </span>254      <span class="status-icon">255        <svg viewBox="0 0 24 24" fill="none">256          <path d="M3 7c3-3 15-3 18 0v7H3V7z" stroke-width="2"></path>257          <rect x="10" y="17" width="4" height="4" stroke-width="2"></rect>258        </svg>259      </span>260    </div>261  </div>262 263  <!-- Header -->264  <div class="header">265    <div class="title">Timer</div>266  </div>267  <div class="menu-dots">268    <span></span><span></span><span></span>269  </div>270 271  <!-- Time Display -->272  <div class="time-display">273    <div class="time-section hours">274      <span class="num">00</span>275      <span class="unit">h</span>276    </div>277    <div class="time-section minutes">278      <span class="num">00</span>279      <span class="unit">m</span>280    </div>281    <div class="time-section seconds">282      <span class="num">26</span>283      <span class="unit">s</span>284    </div>285  </div>286 287  <!-- Keypad -->288  <div class="keypad">289    <div class="key">1</div>290    <div class="key">2</div>291    <div class="key">3</div>292 293    <div class="key">4</div>294    <div class="key">5</div>295    <div class="key">6</div>296 297    <div class="key">7</div>298    <div class="key">8</div>299    <div class="key">9</div>300 301    <div class="key">00</div>302    <div class="key">0</div>303    <div class="key dim">304      <svg viewBox="0 0 24 24" fill="none">305        <path d="M19 7l-6 10H6l6-10h7z" stroke-width="2" stroke-linejoin="round"></path>306        <path d="M11 10l2 2m0-2l-2 2" stroke-width="2" stroke-linecap="round"></path>307      </svg>308    </div>309  </div>310 311  <!-- Play Floating Action Button -->312  <div class="fab">313    <div class="play"></div>314  </div>315 316  <!-- Bottom Navigation -->317  <div class="bottom-nav">318    <div class="nav-item">319      <svg viewBox="0 0 24 24" fill="none">320        <path d="M6 8l-1 1v4a7 7 0 0014 0V9l-1-1" stroke-width="2" stroke-linecap="round"></path>321        <path d="M8 8a4 4 0 118 0" stroke-width="2"></path>322      </svg>323      <div class="nav-label">Alarm</div>324    </div>325    <div class="nav-item">326      <svg viewBox="0 0 24 24" fill="none">327        <circle cx="12" cy="12" r="8" stroke-width="2"></circle>328        <path d="M12 12l4-2M12 6v6" stroke-width="2" stroke-linecap="round"></path>329      </svg>330      <div class="nav-label">Clock</div>331    </div>332    <div class="nav-item active">333      <div class="chip">334        <svg viewBox="0 0 24 24" fill="none">335          <path d="M7 2l10 0M8 5l8 0M6 21h12L12 7 6 21z" stroke-width="2" stroke-linejoin="round"></path>336        </svg>337      </div>338      <div class="nav-label">Timer</div>339    </div>340    <div class="nav-item">341      <svg viewBox="0 0 24 24" fill="none">342        <circle cx="12" cy="12" r="8" stroke-width="2"></circle>343        <path d="M12 6v6l4 2" stroke-width="2" stroke-linecap="round"></path>344        <path d="M9 2h6" stroke-width="2" stroke-linecap="round"></path>345      </svg>346      <div class="nav-label">Stopwatch</div>347    </div>348    <div class="nav-item">349      <svg viewBox="0 0 24 24" fill="none">350        <path d="M3 14h18M3 14v5h18v-5M6 14V9h6a4 4 0 014 4" stroke-width="2" stroke-linejoin="round"></path>351      </svg>352      <div class="nav-label">Bedtime</div>353    </div>354  </div>355 356  <!-- Gesture bar -->357  <div class="gesture"></div>358</div>359</body>360</html>