GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<title>Stopwatch UI</title>5<style>6  body { margin:0; padding:0; background: transparent; font-family: Arial, Helvetica, sans-serif; }7  #render-target {8    width:1080px;9    height:2400px;10    position:relative;11    overflow:hidden;12    background:#0a130d;13    color:#dfe8d7;14  }15 16  /* Status bar */17  .status-bar {18    position:absolute;19    top:0;20    left:0;21    width:100%;22    height:92px;23    color:#e8f5e9;24  }25  .status-bar .time {26    position:absolute;27    left:32px;28    top:28px;29    font-size:36px;30    letter-spacing:1px;31    opacity:0.95;32  }33  .status-icons {34    position:absolute;35    right:32px;36    top:22px;37    display:flex;38    align-items:center;39    gap:22px;40  }41  .dot {42    width:10px; height:10px; border-radius:50%; background:#e8f5e9; opacity:0.8;43  }44  .wifi, .battery {45    width:36px; height:24px;46  }47  .wifi path, .battery rect, .battery polygon { fill:#e8f5e9; }48 49  /* Title */50  .title {51    position:absolute;52    top:140px;53    left:40px;54    font-size:70px;55    font-weight:600;56    color:#dfe8d7;57  }58 59  /* Three-dot menu */60  .menu-dots {61    position:absolute;62    top:150px;63    right:40px;64    display:flex;65    flex-direction:column;66    gap:10px;67  }68  .menu-dots span {69    width:10px; height:10px; border-radius:50%; background:#cfe0cf;70    display:block;71  }72 73  /* Stopwatch ring */74  .ring {75    position:absolute;76    top:460px;77    left:90px;78    width:900px;79    height:900px;80    border-radius:50%;81    border:26px solid #2f3a31;82    box-sizing:border-box;83  }84  .ring .time-display {85    position:absolute;86    top:50%;87    left:50%;88    transform:translate(-50%, -36%);89    text-align:center;90    color:#e8f5e9;91  }92  .ring .big {93    font-size:220px;94    line-height:1;95    font-weight:500;96  }97  .ring .small {98    font-size:120px;99    margin-top:24px;100    font-weight:500;101    letter-spacing:6px;102  }103 104  /* Control buttons */105  .controls {106    position:absolute;107    top:1760px;108    left:0;109    width:100%;110    display:flex;111    justify-content:space-around;112    align-items:center;113    padding:0 40px;114  }115  .circle-btn {116    width:170px; height:170px;117    border-radius:50%;118    background:#12332a;119    display:flex; align-items:center; justify-content:center;120  }121  .circle-btn svg { width:80px; height:80px; }122  .pause-btn {123    width:520px; height:210px;124    border-radius:120px;125    background:#63ff76;126    display:flex; align-items:center; justify-content:center;127    box-shadow:0 6px 0 rgba(0,0,0,0.25) inset;128  }129  .pause-icon {130    width:100px; height:100px;131  }132  .pause-icon rect { fill:#0e2c24; }133 134  /* Bottom navigation */135  .bottom-nav {136    position:absolute;137    bottom:140px;138    left:0;139    width:100%;140    height:260px;141    display:flex;142    justify-content:space-between;143    align-items:center;144    padding:0 50px;145    color:#c7d7c7;146  }147  .nav-item {148    width:180px;149    text-align:center;150    font-size:42px;151  }152  .nav-item .icon {153    width:72px; height:72px; margin:0 auto 16px auto;154  }155  .selected {156    background:#1f3027;157    padding:22px 28px;158    border-radius:80px;159    color:#e8f5e9;160  }161 162  /* Home indicator */163  .home-indicator {164    position:absolute;165    bottom:28px;166    left:50%;167    transform:translateX(-50%);168    width:600px;169    height:12px;170    border-radius:8px;171    background:#e8e8e8;172    opacity:0.9;173  }174</style>175</head>176<body>177<div id="render-target">178 179  <!-- Status bar (simplified) -->180  <div class="status-bar">181    <div class="time">8:27</div>182    <div class="status-icons">183      <svg class="wifi" viewBox="0 0 24 14">184        <path d="M12 14c-1.7-2-3.6-3.1-6-3.1S1.7 12 0 14c3.2-4.5 8.8-7.2 12-7.2s8.8 2.7 12 7.2c-1.7-2-3.6-3.1-6-3.1S13.7 12 12 14z"></path>185      </svg>186      <svg class="battery" viewBox="0 0 30 18">187        <rect x="2" y="3" width="22" height="12" rx="2"></rect>188        <polygon points="26,7 30,7 30,11 26,11"></polygon>189      </svg>190    </div>191  </div>192 193  <!-- Title and menu -->194  <div class="title">Stopwatch</div>195  <div class="menu-dots">196    <span></span><span></span><span></span>197  </div>198 199  <!-- Center ring and numbers -->200  <div class="ring">201    <div class="time-display">202      <div class="big">13</div>203      <div class="small">97</div>204    </div>205  </div>206 207  <!-- Controls -->208  <div class="controls">209    <!-- Reset circle -->210    <div class="circle-btn">211      <svg viewBox="0 0 64 64">212        <circle cx="32" cy="32" r="28" fill="none" stroke="#9fd5b2" stroke-width="4" opacity="0.15"></circle>213        <path d="M32 16c8.8 0 16 7.2 16 16h-6l8 10 8-10h-6C52 20.5 42.6 12 32 12 21.4 12 12 20.5 12 32s9.4 20 20 20"214              fill="none" stroke="#b9e7c8" stroke-width="4" stroke-linecap="round"></path>215      </svg>216    </div>217 218    <!-- Pause pill button -->219    <div class="pause-btn">220      <svg class="pause-icon" viewBox="0 0 100 100">221        <rect x="18" y="14" width="20" height="72" rx="6"></rect>222        <rect x="62" y="14" width="20" height="72" rx="6"></rect>223      </svg>224    </div>225 226    <!-- Lap circle (stopwatch icon) -->227    <div class="circle-btn">228      <svg viewBox="0 0 72 72">229        <circle cx="36" cy="40" r="22" fill="none" stroke="#b9e7c8" stroke-width="4"></circle>230        <rect x="30" y="10" width="12" height="8" rx="2" fill="#b9e7c8"></rect>231        <path d="M20 20l6-6" stroke="#b9e7c8" stroke-width="4" stroke-linecap="round"></path>232        <path d="M36 40l10-6" stroke="#b9e7c8" stroke-width="4" stroke-linecap="round"></path>233      </svg>234    </div>235  </div>236 237  <!-- Bottom navigation -->238  <div class="bottom-nav">239    <div class="nav-item">240      <svg class="icon" viewBox="0 0 64 64">241        <path d="M32 12c-9 0-16 7-16 16v12h8v-12c0-4 4-8 8-8s8 4 8 8v12h8V28c0-9-7-16-16-16z" fill="#c7d7c7"></path>242        <rect x="22" y="44" width="20" height="8" fill="#c7d7c7"></rect>243      </svg>244      <div>Alarm</div>245    </div>246    <div class="nav-item">247      <svg class="icon" viewBox="0 0 64 64">248        <circle cx="32" cy="32" r="26" fill="none" stroke="#c7d7c7" stroke-width="4"></circle>249        <path d="M32 32l0-14M32 32l12 8" stroke="#c7d7c7" stroke-width="4" stroke-linecap="round"></path>250      </svg>251      <div>Clock</div>252    </div>253    <div class="nav-item">254      <svg class="icon" viewBox="0 0 64 64">255        <path d="M20 16h24l-10 16 10 16H20l10-16z" fill="none" stroke="#c7d7c7" stroke-width="4" stroke-linejoin="round"></path>256      </svg>257      <div>Timer</div>258    </div>259    <div class="nav-item selected">260      <svg class="icon" viewBox="0 0 64 64">261        <circle cx="32" cy="36" r="20" fill="none" stroke="#e8f5e9" stroke-width="4"></circle>262        <rect x="28" y="10" width="8" height="8" rx="2" fill="#e8f5e9"></rect>263        <path d="M18 18l6-6" stroke="#e8f5e9" stroke-width="4" stroke-linecap="round"></path>264      </svg>265      <div>Stopwatch</div>266    </div>267    <div class="nav-item">268      <svg class="icon" viewBox="0 0 64 64">269        <rect x="10" y="34" width="44" height="16" rx="4" fill="#c7d7c7"></rect>270        <rect x="12" y="24" width="20" height="8" rx="2" fill="#c7d7c7"></rect>271      </svg>272      <div>Bedtime</div>273    </div>274  </div>275 276  <!-- Home indicator -->277  <div class="home-indicator"></div>278</div>279</body>280</html>