GD-ML/AndroidCode

1<html lang="en">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: #13161B; /* dark page background */13    color: #E8EAF2;14    font-family: "Segoe UI", Arial, sans-serif;15  }16 17  /* Status bar */18  .status-bar {19    position: absolute;20    top: 20px;21    left: 32px;22    right: 32px;23    height: 96px;24    display: flex;25    align-items: center;26    justify-content: space-between;27    color: #E8ECF6;28    font-weight: 600;29    letter-spacing: 0.5px;30  }31  .status-left { font-size: 40px; }32  .status-right { display: flex; align-items: center; gap: 26px; }33  .status-icon svg { width: 40px; height: 40px; fill: none; stroke: #DDE3F5; stroke-width: 3; }34 35  /* Top title */36  .title {37    position: absolute;38    top: 132px;39    left: 48px;40    font-size: 76px;41    font-weight: 600;42    color: #E6E8F2;43  }44  .more-menu {45    position: absolute;46    top: 140px;47    right: 48px;48    width: 50px;49    height: 50px;50  }51  .more-menu .dot { 52    width: 10px; height: 10px; 53    background: #B5B9C8; border-radius: 50%; 54    display: block; margin: 5px auto;55  }56 57  /* Card */58  .card {59    position: absolute;60    left: 32px;61    right: 32px;62    top: 224px;63    height: 1320px;64    background: #171A20;65    border-radius: 56px;66    box-shadow: 0 20px 40px rgba(0,0,0,0.35);67    padding: 40px 40px 60px 40px;68  }69  .card-header {70    display: flex;71    justify-content: space-between;72    align-items: center;73    padding-right: 16px;74  }75  .card-header .label {76    font-size: 64px;77    color: #DDE2F1;78    letter-spacing: 0.5px;79  }80  .close-btn {81    width: 72px;82    height: 72px;83    border-radius: 50%;84    background: #2A2E39;85    display: grid;86    place-items: center;87  }88  .close-btn span {89    color: #C0C6DC;90    font-size: 44px;91    line-height: 1;92  }93 94  /* Ring */95  .ring {96    width: 880px;97    height: 880px;98    margin: 24px auto 0;99    border-radius: 50%;100    background: conic-gradient(#8EA0D6 0deg 330deg, #3C414B 330deg 360deg);101    position: relative;102    display: flex;103    align-items: center;104    justify-content: center;105  }106  .ring::after {107    content: "";108    position: absolute;109    width: 760px;110    height: 760px;111    background: #171A20;112    border-radius: 50%;113    box-shadow: inset 0 0 0 10px rgba(142,160,214,0.15);114  }115  .time-display {116    position: absolute;117    text-align: center;118    font-size: 180px;119    font-weight: 600;120    color: #E9ECF7;121    letter-spacing: 6px;122  }123  .refresh {124    position: absolute;125    bottom: 250px;126    left: 50%;127    transform: translateX(-50%);128    width: 80px;129    height: 80px;130  }131  .refresh svg { width: 80px; height: 80px; }132  .refresh circle { stroke: #8EA0D6; stroke-width: 8; fill: none; opacity: 0.8; }133  .refresh path { stroke: #8EA0D6; stroke-width: 8; fill: none; }134 135  /* Controls */136  .controls {137    width: 100%;138    display: flex;139    justify-content: center;140    gap: 120px;141    margin-top: 32px;142  }143  .btn {144    height: 170px;145    border-radius: 86px;146    padding: 0 80px;147    font-size: 58px;148    font-weight: 600;149    border: none;150    outline: none;151    cursor: pointer;152  }153  .btn.add {154    background: #2F3542;155    color: #D7DCF0;156    min-width: 420px;157  }158  .btn.play {159    background: #E2C9E6;160    color: #2A2430;161    min-width: 330px;162    display: flex;163    align-items: center;164    justify-content: center;165  }166  .btn.play svg { width: 60px; height: 60px; fill: #3A2D44; }167 168  /* Floating Add Button */169  .fab {170    position: absolute;171    bottom: 360px;172    left: 50%;173    transform: translateX(-50%);174    width: 320px;175    height: 320px;176    border-radius: 50%;177    background: #BBD0FF;178    color: #1C2030;179    font-size: 170px;180    font-weight: 600;181    display: grid;182    place-items: center;183    box-shadow: 0 20px 40px rgba(0,0,0,0.35);184  }185 186  /* Bottom navigation */187  .bottom-nav {188    position: absolute;189    bottom: 0;190    left: 0; right: 0;191    height: 240px;192    background: #1A1E25;193    border-top-left-radius: 26px;194    border-top-right-radius: 26px;195    display: flex;196    align-items: center;197    justify-content: space-around;198    color: #CBD2E7;199  }200  .nav-item {201    width: 180px;202    display: flex;203    flex-direction: column;204    align-items: center;205    gap: 22px;206    font-size: 40px;207  }208  .nav-icon {209    width: 96px;210    height: 96px;211    display: grid;212    place-items: center;213  }214  .nav-icon svg { width: 84px; height: 84px; stroke: #D7DBEA; fill: none; stroke-width: 6; }215  .active {216    position: relative;217  }218  .active .pill {219    position: absolute;220    bottom: 86px;221    width: 180px; height: 90px;222    background: #2C3342;223    border-radius: 44px;224    z-index: -1;225  }226  .active .nav-icon svg { stroke: #BFD0FF; }227  .active .label { color: #E6ECFF; }228</style>229</head>230<body>231<div id="render-target">232 233  <!-- Status bar -->234  <div class="status-bar">235    <div class="status-left">5:47</div>236    <div class="status-right">237      <div class="status-icon">238        <!-- small timer icon -->239        <svg viewBox="0 0 24 24">240          <path d="M8 3h8" />241          <path d="M7 6h10" />242          <circle cx="12" cy="13" r="8" />243          <path d="M12 9v5l4 2" />244        </svg>245      </div>246      <div class="status-icon">247        <!-- mail/envelope -->248        <svg viewBox="0 0 24 24">249          <rect x="3" y="5" width="18" height="14" rx="2"></rect>250          <path d="M3 7l9 6 9-6"></path>251        </svg>252      </div>253      <div class="status-icon">254        <!-- wifi -->255        <svg viewBox="0 0 24 24">256          <path d="M2 9c5-5 15-5 20 0"></path>257          <path d="M5 12c4-4 10-4 14 0"></path>258          <path d="M8 15c3-3 7-3 10 0"></path>259          <circle cx="12" cy="18" r="1.5" fill="#DDE3F5" stroke="none"></circle>260        </svg>261      </div>262      <div class="status-icon">263        <!-- battery -->264        <svg viewBox="0 0 24 24">265          <rect x="2" y="7" width="18" height="10" rx="2"></rect>266          <rect x="21" y="10" width="2" height="4"></rect>267          <rect x="4" y="9" width="12" height="6" fill="#DDE3F5" stroke="none"></rect>268        </svg>269      </div>270    </div>271  </div>272 273  <!-- Title and menu -->274  <div class="title">Timer</div>275  <div class="more-menu">276    <span class="dot"></span>277    <span class="dot"></span>278    <span class="dot"></span>279  </div>280 281  <!-- Card -->282  <div class="card">283    <div class="card-header">284      <div class="label">10m Timer</div>285      <div class="close-btn"><span>&times;</span></div>286    </div>287 288    <div class="ring">289      <div class="time-display">11:17</div>290      <div class="refresh">291        <svg viewBox="0 0 100 100">292          <circle cx="50" cy="50" r="28"></circle>293          <path d="M50 22 l10 0 -6 -6" />294        </svg>295      </div>296    </div>297 298    <div class="controls">299      <button class="btn add">+1:00</button>300      <button class="btn play" aria-label="Start">301        <svg viewBox="0 0 24 24">302          <polygon points="8,6 18,12 8,18" />303        </svg>304      </button>305    </div>306  </div>307 308  <!-- Floating action button -->309  <div class="fab">+</div>310 311  <!-- Bottom navigation -->312  <div class="bottom-nav">313    <div class="nav-item">314      <div class="nav-icon">315        <!-- alarm/bell -->316        <svg viewBox="0 0 24 24">317          <path d="M6 8a6 6 0 0 1 12 0v5"></path>318          <path d="M4 13h16"></path>319          <path d="M9 18c0 2 6 2 6 0"></path>320        </svg>321      </div>322      <div class="label">Alarm</div>323    </div>324 325    <div class="nav-item">326      <div class="nav-icon">327        <!-- clock -->328        <svg viewBox="0 0 24 24">329          <circle cx="12" cy="12" r="9"></circle>330          <path d="M12 7v6l4 2"></path>331        </svg>332      </div>333      <div class="label">Clock</div>334    </div>335 336    <div class="nav-item active">337      <div class="pill"></div>338      <div class="nav-icon">339        <!-- timer/hourglass -->340        <svg viewBox="0 0 24 24">341          <path d="M7 4h10"></path>342          <path d="M7 4c0 5 10 5 10 10"></path>343          <path d="M7 20h10"></path>344          <path d="M7 14c0-5 10-5 10-10"></path>345        </svg>346      </div>347      <div class="label">Timer</div>348    </div>349 350    <div class="nav-item">351      <div class="nav-icon">352        <!-- stopwatch -->353        <svg viewBox="0 0 24 24">354          <path d="M9 3h6"></path>355          <circle cx="12" cy="14" r="7"></circle>356          <path d="M12 10v5"></path>357        </svg>358      </div>359      <div class="label">Stopwatch</div>360    </div>361 362    <div class="nav-item">363      <div class="nav-icon">364        <!-- bed -->365        <svg viewBox="0 0 24 24">366          <rect x="2" y="10" width="20" height="6" rx="2"></rect>367          <rect x="4" y="8" width="6" height="4" rx="1"></rect>368        </svg>369      </div>370      <div class="label">Bedtime</div>371    </div>372  </div>373 374</div>375</body>376</html>