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    width: 1080px;9    height: 2400px;10    position: relative;11    overflow: hidden;12    background: #0f0d0a;13    color: #f5efe6;14    font-family: "Segoe UI", Roboto, Arial, sans-serif;15  }16 17  /* Status bar */18  .status-bar {19    position: absolute;20    top: 0;21    left: 0;22    width: 1080px;23    height: 110px;24    padding: 26px 32px;25    box-sizing: border-box;26    color: #e8e1d6;27    font-weight: 600;28    font-size: 36px;29    letter-spacing: 0.5px;30  }31  .status-right {32    position: absolute;33    top: 26px;34    right: 32px;35    display: flex;36    align-items: center;37    gap: 22px;38  }39  .icon-wifi,40  .icon-battery,41  .icon-signal {42    width: 40px; height: 40px;43  }44  .icon-cloud {45    width: 44px; height: 44px;46  }47 48  /* Screen title */49  .screen-title {50    position: absolute;51    top: 130px;52    left: 40px;53    font-size: 64px;54    font-weight: 700;55    color: #e9dfd2;56  }57 58  /* Card */59  .card {60    position: absolute;61    top: 210px;62    left: 30px;63    width: 1020px;64    height: 1550px;65    background: #16120e;66    border-radius: 70px;67    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.02);68  }69  .card-header {70    position: absolute;71    top: 52px;72    left: 50px;73    font-size: 58px;74    font-weight: 700;75    color: #e9dfd2;76  }77  .close-btn {78    position: absolute;79    top: 52px;80    right: 50px;81    width: 74px;82    height: 74px;83    border-radius: 50%;84    background: #3a2f26;85    display: flex;86    align-items: center;87    justify-content: center;88    color: #c8a16a;89    font-size: 46px;90    line-height: 1;91  }92 93  /* Timer ring */94  .timer-ring {95    position: absolute;96    top: 300px;97    left: 80px;98    width: 860px;99    height: 860px;100    border-radius: 50%;101    background: conic-gradient(#c7974e 76%, #3a3027 76%);102    display: flex;103    align-items: center;104    justify-content: center;105  }106  .ring-hole {107    width: 740px;108    height: 740px;109    background: #0f0d0a;110    border-radius: 50%;111    box-shadow: inset 0 0 0 32px rgba(90,78,66,0.25);112    position: relative;113    display: flex;114    align-items: center;115    justify-content: center;116  }117  .time-text {118    font-size: 220px;119    font-weight: 700;120    letter-spacing: 6px;121    color: #f7f2ea;122  }123  .reset-icon {124    position: absolute;125    bottom: 86px;126    left: 50%;127    transform: translateX(-50%);128    width: 86px;129    height: 86px;130    border-radius: 50%;131    border: 6px solid #c89a56;132    display: flex;133    align-items: center;134    justify-content: center;135  }136  .reset-icon svg { width: 48px; height: 48px; fill: none; stroke: #c89a56; stroke-width: 6px; }137 138  /* Controls */139  .controls {140    position: absolute;141    bottom: 210px;142    left: 68px;143    width: 884px;144    display: flex;145    justify-content: space-between;146    align-items: center;147  }148  .btn {149    height: 170px;150    min-width: 400px;151    border-radius: 110px;152    display: flex;153    align-items: center;154    justify-content: center;155    font-size: 58px;156    font-weight: 700;157    letter-spacing: 2px;158  }159  .btn-add {160    background: #4a3826;161    color: #f3e6d5;162    box-shadow: 0 2px 0 rgba(0,0,0,0.3);163  }164  .btn-pause {165    background: #cfe4bb;166    color: #1e261b;167    gap: 22px;168    box-shadow: 0 2px 0 rgba(0,0,0,0.25);169  }170  .pause-bars {171    width: 36px; height: 68px;172    display: inline-flex; gap: 8px;173  }174  .pause-bars span {175    width: 12px; height: 68px; background: #1e261b; border-radius: 2px;176  }177 178  /* Big add button */179  .big-plus {180    position: absolute;181    top: 1850px;182    left: 50%;183    transform: translateX(-50%);184    width: 240px;185    height: 240px;186    border-radius: 50%;187    background: #f6c27e;188    display: flex;189    align-items: center;190    justify-content: center;191    color: #2a2017;192    font-size: 110px;193    font-weight: 700;194    box-shadow: 0 12px 40px rgba(0,0,0,0.5);195  }196 197  /* Bottom nav */198  .bottom-nav {199    position: absolute;200    bottom: 0;201    left: 0;202    width: 1080px;203    height: 320px;204    background: #1a1612;205    box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);206    padding-top: 40px;207    box-sizing: border-box;208  }209  .nav-items {210    width: 100%;211    display: flex;212    justify-content: space-around;213    align-items: flex-end;214    color: #cfbfab;215  }216  .nav-item {217    width: 190px;218    text-align: center;219  }220  .nav-icon {221    width: 84px;222    height: 84px;223    margin: 0 auto 18px;224    display: flex;225    align-items: center;226    justify-content: center;227  }228  .nav-label {229    font-size: 42px;230    font-weight: 600;231    letter-spacing: 0.6px;232    color: #cfbfab;233  }234  .active .nav-icon {235    background: #382c1f;236    border-radius: 40px;237  }238  .active .nav-label {239    color: #e5d8c4;240  }241 242  /* Helper colors for icons */243  .icon-stroke { stroke: #d7c6ad; }244  .icon-fill { fill: #d7c6ad; }245</style>246</head>247<body>248<div id="render-target">249 250  <!-- Status bar -->251  <div class="status-bar">252    12:22253    <div class="status-right">254      <!-- Signal -->255      <svg class="icon-signal" viewBox="0 0 24 24">256        <path class="icon-stroke" d="M3 20h2M7 16h2M11 12h2M15 8h2M19 4h2" stroke-width="2" stroke-linecap="round"/>257      </svg>258      <!-- Play Store placeholder -->259      <svg class="icon-cloud" viewBox="0 0 24 24">260        <path class="icon-stroke" d="M5 15a6 6 0 019-5 4 4 0 012 7H6a3 3 0 01-1-2z" stroke-width="2" fill="none"/>261      </svg>262      <!-- Battery -->263      <svg class="icon-battery" viewBox="0 0 24 24">264        <rect x="2" y="6" width="18" height="12" rx="2" class="icon-stroke" stroke-width="2" fill="none"/>265        <rect x="20" y="10" width="2" height="4" class="icon-stroke" stroke-width="2" fill="none"/>266        <rect x="4" y="8" width="12" height="8" class="icon-fill"/>267      </svg>268    </div>269  </div>270 271  <!-- Title -->272  <div class="screen-title">Timer</div>273 274  <!-- Card Area -->275  <div class="card">276    <div class="card-header">10m 10s Timer</div>277    <div class="close-btn">×</div>278 279    <div class="timer-ring">280      <div class="ring-hole">281        <div class="time-text">7:51</div>282        <div class="reset-icon">283          <svg viewBox="0 0 24 24">284            <path d="M12 5a7 7 0 107 7" />285            <path d="M16 4v5h5" />286          </svg>287        </div>288      </div>289    </div>290 291    <div class="controls">292      <div class="btn btn-add">+1:00</div>293      <div class="btn btn-pause">294        <div class="pause-bars"><span></span><span></span></div>295      </div>296    </div>297  </div>298 299  <!-- Big plus -->300  <div class="big-plus">+</div>301 302  <!-- Bottom Navigation -->303  <div class="bottom-nav">304    <div class="nav-items">305      <div class="nav-item">306        <div class="nav-icon">307          <svg viewBox="0 0 24 24" width="64" height="64">308            <circle cx="12" cy="13" r="7" class="icon-stroke" stroke-width="2" fill="none"/>309            <path d="M5 7l3-3M19 7l-3-3" class="icon-stroke" stroke-width="2" stroke-linecap="round"/>310          </svg>311        </div>312        <div class="nav-label">Alarm</div>313      </div>314      <div class="nav-item">315        <div class="nav-icon">316          <svg viewBox="0 0 24 24" width="64" height="64">317            <circle cx="12" cy="12" r="9" class="icon-stroke" stroke-width="2" fill="none"/>318            <path d="M12 7v6l4 2" class="icon-stroke" stroke-width="2" stroke-linecap="round"/>319          </svg>320        </div>321        <div class="nav-label">Clock</div>322      </div>323      <div class="nav-item active">324        <div class="nav-icon">325          <svg viewBox="0 0 24 24" width="64" height="64">326            <path class="icon-stroke" stroke-width="2" d="M8 4h8l-2 4 2 4H8l2-4-2-4z" fill="none"/>327          </svg>328        </div>329        <div class="nav-label">Timer</div>330      </div>331      <div class="nav-item">332        <div class="nav-icon">333          <svg viewBox="0 0 24 24" width="64" height="64">334            <circle cx="12" cy="12" r="9" class="icon-stroke" stroke-width="2" fill="none"/>335            <rect x="10" y="2" width="4" height="3" class="icon-stroke" stroke-width="2" fill="none"/>336          </svg>337        </div>338        <div class="nav-label">Stopwatch</div>339      </div>340      <div class="nav-item">341        <div class="nav-icon">342          <svg viewBox="0 0 24 24" width="64" height="64">343            <rect x="3" y="10" width="18" height="6" rx="1" class="icon-stroke" stroke-width="2" fill="none"/>344            <rect x="4" y="12" width="6" height="3" class="icon-fill"/>345            <rect x="12" y="12" width="8" height="3" class="icon-fill"/>346          </svg>347        </div>348        <div class="nav-label">Bedtime</div>349      </div>350    </div>351  </div>352 353</div>354</body>355</html>