GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<meta name="viewport" content="width=1080, initial-scale=1.0">6<title>Timer UI Mock</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: "Segoe UI", Roboto, Arial, sans-serif; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #0f1512;15    color: #e9efe7;16  }17  .status-bar {18    position: absolute;19    top: 18px;20    left: 28px;21    right: 28px;22    height: 60px;23    color: #e6eee3;24    font-size: 34px;25    display: flex;26    align-items: center;27    justify-content: space-between;28    opacity: 0.95;29  }30  .status-icons svg { margin-left: 16px; fill: #e6eee3; }31  .page-title {32    position: absolute;33    top: 140px;34    left: 56px;35    font-size: 64px;36    letter-spacing: 0.5px;37    color: #e6eee3;38  }39  .more {40    position: absolute;41    top: 150px;42    right: 40px;43    width: 48px; height: 48px;44  }45  .card {46    position: absolute;47    top: 250px;48    left: 36px;49    width: 1008px;50    height: 1380px;51    background: #121a16;52    border-radius: 48px;53    box-shadow: 0 10px 30px rgba(0,0,0,0.4) inset;54    padding: 56px;55  }56  .card-title {57    font-size: 52px;58    color: #e7eee6;59  }60  .close-chip {61    position: absolute;62    top: 50px;63    right: 50px;64    width: 84px;65    height: 84px;66    border-radius: 50%;67    background: #2a3831;68    display: flex;69    align-items: center;70    justify-content: center;71    color: #cfe3d5;72    font-weight: 700;73    font-size: 40px;74  }75 76  /* Timer Ring */77  .ring-wrap {78    position: relative;79    width: 860px;80    height: 860px;81    margin: 40px auto 10px;82  }83  .ring {84    width: 100%;85    height: 100%;86    border-radius: 50%;87    background:88      conic-gradient(#86b987 72%, #2d3f36 0);89    position: relative;90  }91  .ring::after {92    content: "";93    position: absolute;94    inset: 28px;95    background: #121a16;96    border-radius: 50%;97    box-shadow: 0 0 0 2px rgba(133,177,142,0.15) inset;98  }99  .time {100    position: absolute;101    top: 50%;102    left: 50%;103    transform: translate(-50%, -54%);104    font-size: 180px;105    font-weight: 700;106    color: #f2f7f1;107    letter-spacing: 6px;108  }109  .refresh {110    position: absolute;111    top: calc(50% + 220px);112    left: 50%;113    transform: translate(-50%, -50%);114    width: 94px;115    height: 94px;116    border-radius: 50%;117    border: 6px solid #3d5f4d;118    display: flex;119    align-items: center;120    justify-content: center;121    color: #9bcca3;122  }123  .refresh svg { width: 46px; height: 46px; stroke: #9bcca3; }124 125  /* Controls */126  .controls {127    position: absolute;128    left: 0;129    right: 0;130    bottom: 90px;131    display: flex;132    justify-content: center;133    gap: 36px;134  }135  .btn {136    height: 160px;137    min-width: 340px;138    border-radius: 90px;139    display: flex;140    align-items: center;141    justify-content: center;142    font-size: 48px;143    border: none;144  }145  .btn-add {146    background: #273b31;147    color: #e6efe6;148    padding: 0 46px;149  }150  .btn-pause {151    background: #c6e5ef;152    color: #184252;153    padding: 0 46px;154  }155  .btn-pause .pause-bars {156    display: inline-block;157    width: 54px; height: 60px;158    position: relative;159  }160  .btn-pause .pause-bars::before,161  .btn-pause .pause-bars::after {162    content: "";163    position: absolute;164    top: 0;165    width: 16px; height: 60px;166    background: #1e5063;167    border-radius: 6px;168  }169  .btn-pause .pause-bars::before { left: 0; }170  .btn-pause .pause-bars::after { right: 0; }171 172  /* Big add button */173  .fab {174    position: absolute;175    top: 1730px;176    left: 50%;177    transform: translateX(-50%);178    width: 220px;179    height: 220px;180    background: #bfe7be;181    color: #132a1f;182    border-radius: 50%;183    display: flex;184    align-items: center;185    justify-content: center;186    font-size: 120px;187    line-height: 1;188  }189 190  /* Bottom navigation */191  .nav {192    position: absolute;193    bottom: 0;194    left: 0; right: 0;195    height: 260px;196    background: #121a16;197    border-top: 1px solid rgba(255,255,255,0.06);198    padding-top: 28px;199  }200  .nav-inner {201    display: flex;202    justify-content: space-around;203    align-items: center;204    padding: 0 26px;205  }206  .nav-item {207    width: 20%;208    text-align: center;209    color: #cdd6cc;210    font-size: 34px;211  }212  .nav-item .icon {213    width: 72px;214    height: 72px;215    margin: 0 auto 14px;216  }217  .selected {218    color: #f0f6ef;219  }220  .selected .pill {221    width: 154px;222    height: 78px;223    border-radius: 44px;224    background: #22342c;225    margin: 0 auto 10px;226    display: flex;227    align-items: center;228    justify-content: center;229  }230 231  /* Gesture bar */232  .gesture {233    position: absolute;234    bottom: 20px;235    left: 50%;236    transform: translateX(-50%);237    width: 280px;238    height: 8px;239    border-radius: 6px;240    background: rgba(255,255,255,0.9);241    opacity: 0.9;242  }243</style>244</head>245<body>246<div id="render-target">247 248  <!-- Status Bar -->249  <div class="status-bar">250    <div>3:00</div>251    <div class="status-icons">252      <svg width="36" height="36" viewBox="0 0 24 24"><path d="M3 18h18v2H3zM5 14h14v2H5zM8 10h8v2H8zM10 6h4v2h-4z"/></svg>253      <svg width="36" height="36" viewBox="0 0 24 24"><path d="M12 21c4.97 0 9-4.03 9-9h-2a7 7 0 1 1-7-7V3L17 6l-5 3V7a5 5 0 1 0 5 5h2c0 4.97-4.03 9-9 9z" fill="#e6eee3"/></svg>254      <svg width="36" height="36" viewBox="0 0 24 24"><path d="M2 8l5-5h10l5 5v10a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V8z" fill="none" stroke="#e6eee3" stroke-width="2"/></svg>255      <svg width="36" height="36" viewBox="0 0 24 24"><path d="M18 8a6 6 0 1 1-12 0" fill="none" stroke="#e6eee3" stroke-width="2"/></svg>256      <svg width="36" height="36" viewBox="0 0 24 24"><path d="M18 8a6 6 0 1 1-12 0" fill="none" stroke="#e6eee3" stroke-width="2"/></svg>257    </div>258  </div>259 260  <!-- Page Title -->261  <div class="page-title">Timer</div>262  <div class="more">263    <svg width="48" height="48" viewBox="0 0 24 24" fill="#dfe7dd">264      <circle cx="12" cy="5" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="12" cy="19" r="2"/>265    </svg>266  </div>267 268  <!-- Timer Card -->269  <div class="card">270    <div class="card-title">30m Timer</div>271    <div class="close-chip">×</div>272 273    <div class="ring-wrap">274      <div class="ring"></div>275      <div class="time">22:57</div>276      <div class="refresh">277        <svg viewBox="0 0 24 24" fill="none">278          <path d="M6 13a6 6 0 1 0 2-4.47" stroke-width="2"/>279          <path d="M7 5v4h4" stroke-width="2"/>280        </svg>281      </div>282    </div>283 284    <div class="controls">285      <button class="btn btn-add">+1:00</button>286      <button class="btn btn-pause"><span class="pause-bars"></span></button>287    </div>288  </div>289 290  <!-- Big Add Button -->291  <div class="fab">+</div>292 293  <!-- Bottom Navigation -->294  <div class="nav">295    <div class="nav-inner">296      <div class="nav-item">297        <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="#cdd6cc" stroke-width="1.8">298          <circle cx="12" cy="13" r="6"></circle>299          <path d="M7 5l-2-2M19 5l2-2M12 10v4M12 14h3"></path>300        </svg>301        Alarm302      </div>303      <div class="nav-item">304        <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="#cdd6cc" stroke-width="1.8">305          <circle cx="12" cy="12" r="8"></circle>306          <path d="M12 7v6l4 2"></path>307        </svg>308        Clock309      </div>310      <div class="nav-item selected">311        <div class="pill">312          <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="#9bd0a0" stroke-width="1.8">313            <path d="M8 4h8l-2 6 2 10H8l2-10L8 4z"></path>314          </svg>315        </div>316        Timer317      </div>318      <div class="nav-item">319        <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="#cdd6cc" stroke-width="1.8">320          <circle cx="12" cy="12" r="8"></circle>321          <path d="M15 6h3M12 8v5l3 2"></path>322        </svg>323        Stopwatch324      </div>325      <div class="nav-item">326        <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="#cdd6cc" stroke-width="1.8">327          <rect x="3" y="11" width="18" height="6" rx="1"></rect>328          <path d="M7 11V9a2 2 0 0 1 2-2h2"></path>329        </svg>330        Bedtime331      </div>332    </div>333  </div>334 335  <div class="gesture"></div>336</div>337</body>338</html>