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</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }9  #render-target {10    position: relative;11    overflow: hidden;12    width: 1080px;13    height: 2400px;14    background: #12181D;15    color: #E6EDF5;16  }17 18  /* Status bar */19  .status-bar {20    height: 120px;21    padding: 0 36px;22    display: flex;23    align-items: center;24    justify-content: space-between;25    color: #EAF2FA;26    font-weight: 600;27    letter-spacing: 1px;28  }29  .status-left { font-size: 40px; }30  .status-right {31    display: flex; align-items: center; gap: 22px;32  }33  .dot { width: 10px; height: 10px; background:#AAB7C4; border-radius:50%; opacity:.8; }34  .ico-wifi, .ico-battery {35    width: 44px; height: 44px;36  }37 38  /* Page title */39  .page-title {40    font-size: 74px;41    font-weight: 600;42    margin: 16px 0 22px 44px;43    color: #DCE6F2;44  }45 46  /* Timer Card */47  .card {48    width: 1000px;49    margin: 24px auto 0;50    background: #1A2229;51    border-radius: 48px;52    padding: 44px 44px 40px;53    box-sizing: border-box;54  }55  .card-header {56    display: flex; align-items: center; justify-content: space-between;57    margin-bottom: 12px;58  }59  .card-title {60    font-size: 58px; font-weight: 600; color: #D8E3EF;61  }62  .close-pill {63    width: 84px; height: 84px; border-radius: 50%;64    background: #2A3641;65    display: flex; align-items: center; justify-content: center;66    color: #B8C6D6; font-size: 40px; font-weight: 700;67  }68 69  /* Progress Ring */70  .ring-wrap {71    position: relative;72    width: 900px; height: 900px;73    margin: 30px auto 0;74  }75  .ring {76    width: 100%; height: 100%;77    border-radius: 50%;78    background:79      conic-gradient(#6DA6D8 0deg 315deg, #343E48 315deg 360deg);80    position: relative;81  }82  .ring::after {83    content: "";84    position: absolute; inset: 36px;85    background: #12181D; /* inner cut-out to create thickness */86    border-radius: 50%;87    box-shadow: inset 0 0 0 0 #000;88  }89  .ring-center {90    position: absolute; inset: 0;91    display: flex; align-items: center; justify-content: center;92    flex-direction: column;93    z-index: 2;94  }95  .ring-number {96    font-size: 220px; font-weight: 600; line-height: 1;97    color: #E7EEF7;98    margin-top: -20px;99  }100  .reset-icon {101    margin-top: 24px;102    width: 80px; height: 80px;103  }104 105  /* Controls */106  .controls {107    margin: 36px auto 10px;108    display: flex; gap: 64px; justify-content: center;109  }110  .btn {111    height: 170px; width: 420px; border-radius: 100px;112    display: flex; align-items: center; justify-content: center;113    font-size: 54px; font-weight: 600;114    color: #DDE8F6;115  }116  .btn-dark {117    background: #2D3B47; color: #CFE0F7;118  }119  .btn-purple {120    background: #DECDFB; color: #2A2D3A;121  }122  .play-icon {123    width: 0; height: 0;124    border-left: 44px solid #2B2942;125    border-top: 28px solid transparent;126    border-bottom: 28px solid transparent;127    margin-left: 6px;128  }129 130  /* Big Add Button */131  .add-wrap {132    width: 100%; display: flex; justify-content: center;133    margin-top: 56px;134  }135  .add-btn {136    width: 230px; height: 230px; border-radius: 50%;137    background: #A7D0FF; color: #0F2C49;138    display: flex; align-items: center; justify-content: center;139    font-size: 120px; font-weight: 500;140  }141 142  /* Bottom Nav */143  .bottom-nav {144    position: absolute; left: 0; right: 0; bottom: 84px;145    height: 240px; background: #1A2229;146    display: flex; align-items: center; justify-content: space-around;147    padding: 12px 24px 0;148    box-sizing: border-box;149  }150  .nav-item {151    width: 180px;152    display: flex; flex-direction: column; align-items: center; gap: 16px;153    color: #C1CEDB; font-size: 36px;154  }155  .nav-icon {156    width: 72px; height: 72px;157  }158  .active .icon-pill {159    background: #2A333C; border-radius: 40px; padding: 18px 32px;160    display: flex; align-items: center; justify-content: center;161  }162  .active .nav-label { color: #FFFFFF; font-weight: 600; }163 164  /* Home indicator */165  .home-indicator {166    position: absolute; left: 50%; transform: translateX(-50%);167    bottom: 24px; width: 380px; height: 12px; background: #BFCAD6;168    border-radius: 12px; opacity: .9;169  }170</style>171</head>172<body>173<div id="render-target">174 175  <!-- Status Bar -->176  <div class="status-bar">177    <div class="status-left">9:25</div>178    <div class="status-right">179      <div class="dot"></div>180      <div class="dot"></div>181      <div class="dot"></div>182      <div class="dot"></div>183      <svg class="ico-wifi" viewBox="0 0 24 24" fill="none">184        <path d="M2 8c5-4 15-4 20 0" stroke="#E9F1FA" stroke-width="2" stroke-linecap="round"/>185        <path d="M5 11c3-3 11-3 14 0" stroke="#E9F1FA" stroke-width="2" stroke-linecap="round"/>186        <path d="M8 14c2-2 6-2 8 0" stroke="#E9F1FA" stroke-width="2" stroke-linecap="round"/>187        <circle cx="12" cy="18" r="1.6" fill="#E9F1FA"/>188      </svg>189      <svg class="ico-battery" viewBox="0 0 24 24" fill="none">190        <rect x="2" y="7" width="18" height="10" rx="2" stroke="#E9F1FA" stroke-width="2"/>191        <rect x="4" y="9" width="12" height="6" rx="1" fill="#E9F1FA"/>192        <rect x="20.5" y="10" width="2" height="4" rx="1" fill="#E9F1FA"/>193      </svg>194    </div>195  </div>196 197  <!-- Page Title -->198  <div class="page-title">Timer</div>199 200  <!-- Timer Card -->201  <div class="card">202    <div class="card-header">203      <div class="card-title">1m Timer</div>204      <div class="close-pill">×</div>205    </div>206 207    <div class="ring-wrap">208      <div class="ring"></div>209      <div class="ring-center">210        <div class="ring-number">30</div>211        <svg class="reset-icon" viewBox="0 0 24 24" fill="none">212          <path d="M12 5v3l-3-3m3 14a7 7 0 1 0-7-7" stroke="#7EB0DA" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>213        </svg>214      </div>215    </div>216 217    <div class="controls">218      <div class="btn btn-dark">+1:00</div>219      <div class="btn btn-purple">220        <div class="play-icon"></div>221      </div>222    </div>223  </div>224 225  <!-- Add Button -->226  <div class="add-wrap">227    <div class="add-btn">+</div>228  </div>229 230  <!-- Bottom Navigation -->231  <div class="bottom-nav">232    <div class="nav-item">233      <svg class="nav-icon" viewBox="0 0 24 24" fill="none">234        <circle cx="12" cy="13" r="7" stroke="#C7D3DF" stroke-width="2"/>235        <rect x="11" y="3" width="2" height="3" rx="1" fill="#C7D3DF"/>236        <rect x="5" y="3" width="4" height="2" rx="1" fill="#C7D3DF"/>237        <rect x="15" y="3" width="4" height="2" rx="1" fill="#C7D3DF"/>238      </svg>239      <div class="nav-label">Alarm</div>240    </div>241 242    <div class="nav-item">243      <svg class="nav-icon" viewBox="0 0 24 24" fill="none">244        <circle cx="12" cy="12" r="9" stroke="#C7D3DF" stroke-width="2"/>245        <path d="M12 7v6l4 2" stroke="#C7D3DF" stroke-width="2" stroke-linecap="round"/>246      </svg>247      <div class="nav-label">Clock</div>248    </div>249 250    <div class="nav-item active">251      <div class="icon-pill">252        <svg class="nav-icon" viewBox="0 0 24 24" fill="none">253          <path d="M7 5h10M9 5l6 14M7 19h10" stroke="#EAF2FA" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>254        </svg>255      </div>256      <div class="nav-label">Timer</div>257    </div>258 259    <div class="nav-item">260      <svg class="nav-icon" viewBox="0 0 24 24" fill="none">261        <circle cx="12" cy="13" r="8" stroke="#C7D3DF" stroke-width="2"/>262        <rect x="11" y="4" width="2" height="3" rx="1" fill="#C7D3DF"/>263      </svg>264      <div class="nav-label">Stopwatch</div>265    </div>266 267    <div class="nav-item">268      <svg class="nav-icon" viewBox="0 0 24 24" fill="none">269        <rect x="3" y="11" width="18" height="7" rx="2" stroke="#C7D3DF" stroke-width="2"/>270        <rect x="5" y="8" width="5" height="3" rx="1" fill="#C7D3DF"/>271      </svg>272      <div class="nav-label">Bedtime</div>273    </div>274  </div>275 276  <div class="home-indicator"></div>277</div>278</body>279</html>