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; font-family: "Roboto", Arial, sans-serif; }7  #render-target {8    position: relative;9    overflow: hidden;10    width: 1080px;11    height: 2400px;12    background: #14171d;13    color: #ECEFF4;14  }15 16  /* Status bar */17  .status-bar {18    position: absolute;19    top: 0;20    left: 0;21    width: 1080px;22    height: 96px;23    padding: 0 36px;24    display: flex;25    align-items: center;26    justify-content: space-between;27    color: #DDE2EA;28    font-size: 36px;29    letter-spacing: 1px;30  }31  .status-left, .status-right { display: flex; align-items: center; gap: 18px; }32  .icon-small { width: 32px; height: 32px; opacity: 0.9; }33 34  /* Title */35  .page-title {36    position: absolute;37    top: 120px;38    left: 48px;39    font-size: 72px;40    font-weight: 600;41    color: #E6E9F0;42  }43 44  /* Main card */45  .card {46    position: absolute;47    top: 220px;48    left: 40px;49    width: 1000px;50    height: 1620px;51    background: #1b1f27;52    border-radius: 48px;53    box-shadow: 0 10px 30px rgba(0,0,0,0.35) inset;54    padding: 48px 56px;55  }56  .card-header {57    display: flex;58    align-items: center;59    justify-content: space-between;60    margin-bottom: 10px;61  }62  .card-title {63    font-size: 64px;64    color: #DBE3F4;65  }66  .close-btn {67    width: 80px;68    height: 80px;69    background: #313746;70    border-radius: 50%;71    display: flex;72    align-items: center;73    justify-content: center;74  }75  .close-btn span {76    font-size: 44px;77    color: #9BADE4;78    font-weight: 700;79  }80 81  /* Progress ring */82  .ring-wrap {83    position: relative;84    width: 880px;85    height: 880px;86    margin: 36px auto 0;87  }88  .ring {89    position: absolute;90    inset: 0;91    border-radius: 50%;92    /* progress ~75% with gap */93    background:94      conic-gradient(#8ea3e0 0deg 300deg, #353a44 300deg 360deg);95  }96  .ring::after {97    content: "";98    position: absolute;99    inset: 40px;100    background: #1b1f27;101    border-radius: 50%;102    box-shadow: 0 0 0 18px rgba(142,163,224,0.15) inset;103  }104  .time {105    position: absolute;106    top: 50%;107    left: 50%;108    transform: translate(-50%,-58%);109    font-size: 190px;110    font-weight: 600;111    letter-spacing: 4px;112    color: #F0F2F8;113  }114  .refresh {115    position: absolute;116    top: calc(50% + 150px);117    left: 50%;118    transform: translate(-50%, -50%);119    width: 90px;120    height: 90px;121    border-radius: 50%;122    border: 6px solid #7f96d6;123    display: flex;124    align-items: center;125    justify-content: center;126    color: #7f96d6;127  }128 129  /* Action buttons */130  .actions {131    position: absolute;132    bottom: 210px;133    left: 56px;134    right: 56px;135    display: flex;136    justify-content: space-between;137    align-items: center;138  }139  .pill {140    width: 370px;141    height: 170px;142    border-radius: 100px;143    display: flex;144    align-items: center;145    justify-content: center;146    font-size: 64px;147    font-weight: 600;148  }149  .pill.add-time {150    background: #3a4050;151    color: #d6dfff;152  }153  .pill.pause {154    background: #e6c6e7;155    color: #2c2c33;156  }157  .pause .pause-icon {158    width: 46px; height: 66px; display: inline-block; position: relative;159  }160  .pause .pause-icon:before,161  .pause .pause-icon:after {162    content: "";163    position: absolute;164    top: 0; bottom: 0;165    width: 12px;166    background: #2b2b33;167    border-radius: 6px;168  }169  .pause .pause-icon:before { left: 6px; }170  .pause .pause-icon:after  { right: 6px; }171 172  /* Floating add button */173  .fab {174    position: absolute;175    bottom: 370px;176    left: 50%;177    transform: translateX(-50%);178    width: 240px;179    height: 240px;180    border-radius: 50%;181    background: #b8c9ff;182    color: #1b2240;183    display: flex;184    align-items: center;185    justify-content: center;186    font-size: 130px;187    font-weight: 700;188    box-shadow: 0 12px 30px rgba(0,0,0,0.35);189  }190 191  /* Bottom navigation */192  .bottom-nav {193    position: absolute;194    bottom: 0;195    left: 0;196    width: 1080px;197    height: 250px;198    background: #1a1e25;199    display: flex;200    align-items: center;201    justify-content: space-around;202    color: #c8ceda;203    padding-bottom: 18px;204  }205  .nav-item {206    width: 180px;207    height: 170px;208    display: flex;209    flex-direction: column;210    align-items: center;211    justify-content: center;212    gap: 16px;213    font-size: 38px;214  }215  .nav-icon svg { width: 70px; height: 70px; }216  .nav-active {217    background: #2a2f38;218    border-radius: 40px;219    padding: 22px 26px;220    color: #e9edf8;221  }222 223  /* Subtle divider */224  .divider-bar {225    position: absolute;226    bottom: 260px;227    left: 320px;228    width: 440px;229    height: 10px;230    background: #cfd3db;231    opacity: 0.45;232    border-radius: 6px;233  }234</style>235</head>236<body>237<div id="render-target">238 239  <!-- Status Bar -->240  <div class="status-bar">241    <div class="status-left">242      <div>5:45</div>243      <!-- alarm icon -->244      <svg class="icon-small" viewBox="0 0 24 24" fill="#DDE2EA">245        <path d="M7 4 3 7l1 1 4-3-1-1Zm10 0-1 1 4 3 1-1-4-3ZM12 6a8 8 0 1 0 0 16 8 8 0 0 0 0-16Zm1 4h-2v6h6v-2h-4V10Z"/>246      </svg>247      <!-- mail dot as box -->248      <svg class="icon-small" viewBox="0 0 24 24" fill="#DDE2EA">249        <path d="M3 5h18v14H3V5Zm2 2v10h14V7l-7 4-7-4Z"/>250      </svg>251    </div>252    <div class="status-right">253      <!-- wifi -->254      <svg class="icon-small" viewBox="0 0 24 24" fill="#DDE2EA">255        <path d="M12 18a2 2 0 1 0 .001 4.001A2 2 0 0 0 12 18Zm0-6c-3 0-5.8 1.1-8 3l1.5 1.5C7 14.8 9.4 14 12 14s5 .8 6.5 2.5L20 15c-2.2-1.9-5-3-8-3Zm0-6C7 6 2.9 7.7 0 10l1.6 1.6C3.9 9.7 7.7 8 12 8s8.1 1.7 10.4 3.6L24 10C21.1 7.7 17 6 12 6Z"/>256      </svg>257      <!-- battery -->258      <svg class="icon-small" viewBox="0 0 24 24" fill="#DDE2EA">259        <path d="M16 6h2a2 2 0 0 1 2 2v2h2v4h-2v2a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h10Zm-1 2H6v8h9V8Z"/>260      </svg>261    </div>262  </div>263 264  <!-- Title -->265  <div class="page-title">Timer</div>266 267  <!-- Main Card -->268  <div class="card">269    <div class="card-header">270      <div class="card-title">10m Timer</div>271      <div class="close-btn"><span>×</span></div>272    </div>273 274    <div class="ring-wrap">275      <div class="ring"></div>276      <div class="time">12:45</div>277      <div class="refresh">278        <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="#7f96d6" stroke-width="2">279          <path d="M3 12a9 9 0 0 1 15-6l1-3v7h-7l3-1A6 6 0 1 0 18 15"/>280        </svg>281      </div>282    </div>283 284    <div class="actions">285      <div class="pill add-time">+1:00</div>286      <div class="pill pause"><span class="pause-icon"></span></div>287    </div>288  </div>289 290  <!-- Floating Add Button -->291  <div class="fab">+</div>292 293  <!-- Bottom Divider bar (gesture) -->294  <div class="divider-bar"></div>295 296  <!-- Bottom Navigation -->297  <div class="bottom-nav">298    <div class="nav-item">299      <div class="nav-icon">300        <svg viewBox="0 0 24 24" fill="#c8ceda">301          <path d="M7 4 3 7l1 1 4-3-1-1Zm10 0-1 1 4 3 1-1-4-3ZM12 6a8 8 0 1 0 0 16 8 8 0 0 0 0-16Zm1 4h-2v6h6v-2h-4V10Z"/>302        </svg>303      </div>304      <div>Alarm</div>305    </div>306    <div class="nav-item">307      <div class="nav-icon">308        <svg viewBox="0 0 24 24" fill="#c8ceda">309          <path d="M12 2a10 10 0 1 0 .001 20.001A10 10 0 0 0 12 2Zm1 5h-2v6h6v-2h-4V7Z"/>310        </svg>311      </div>312      <div>Clock</div>313    </div>314    <div class="nav-item nav-active">315      <div class="nav-icon">316        <svg viewBox="0 0 24 24" fill="#e9edf8">317          <path d="M7 2h10v4l-4 6h4v10H7V12h4L7 6V2Z"/>318        </svg>319      </div>320      <div>Timer</div>321    </div>322    <div class="nav-item">323      <div class="nav-icon">324        <svg viewBox="0 0 24 24" fill="#c8ceda">325          <path d="M7 3h10v2H7V3Zm5 2a9 9 0 1 0 0 18 9 9 0 0 0 0-18Zm1 5h-2v5h6v-2h-4V10Z"/>326        </svg>327      </div>328      <div>Stopwatch</div>329    </div>330    <div class="nav-item">331      <div class="nav-icon">332        <svg viewBox="0 0 24 24" fill="#c8ceda">333          <path d="M3 11h18v8H3v-8Zm2-6h6v4H5V5Zm10 0h4v4h-4V5Z"/>334        </svg>335      </div>336      <div>Bedtime</div>337    </div>338  </div>339 340</div>341</body>342</html>