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: #0c130f;13    color: #dfe9d7;14  }15  .status-bar {16    position: absolute;17    top: 0;18    left: 0;19    width: 1080px;20    height: 96px;21    color: #cfe3d1;22    font-size: 38px;23    letter-spacing: 0.5px;24  }25  .status-left {26    position: absolute;27    left: 48px;28    top: 26px;29    display: flex;30    align-items: center;31    gap: 22px;32  }33  .status-left .time { font-weight: 600; }34  .dot-icon {35    width: 18px; height: 18px; border-radius: 50%; background: #cfe3d1; opacity: 0.85;36  }37  .status-right {38    position: absolute;39    right: 36px;40    top: 22px;41    display: flex; gap: 26px; align-items: center;42  }43  .header {44    position: absolute;45    top: 140px;46    left: 48px;47    font-size: 72px;48    font-weight: 600;49    color: #dfe9d7;50  }51  .menu-dot {52    position: absolute;53    top: 150px;54    right: 36px;55    width: 12px; height: 12px; border-radius: 50%; background: #cfe3d1; opacity: 0.7;56    box-shadow: 0 28px 0 #cfe3d1, 0 56px 0 #cfe3d1;57  }58 59  /* Stopwatch ring */60  .ring {61    position: absolute;62    top: 520px;63    left: 140px;64    width: 800px;65    height: 800px;66    border-radius: 50%;67    border: 26px solid rgba(189, 205, 192, 0.18);68    box-sizing: border-box;69  }70  .timer-readout {71    position: absolute;72    top: 780px;73    left: 0;74    width: 1080px;75    text-align: center;76    color: #e6f3e6;77  }78  .timer-main {79    font-size: 240px;80    line-height: 1;81    font-weight: 600;82    letter-spacing: 6px;83  }84  .timer-sub {85    margin-top: 18px;86    font-size: 140px;87    font-weight: 500;88    letter-spacing: 4px;89  }90 91  /* Controls */92  .controls {93    position: absolute;94    left: 0;95    bottom: 420px;96    width: 1080px;97    display: flex;98    justify-content: center;99    align-items: center;100    gap: 110px;101  }102  .round-btn {103    width: 168px; height: 168px; border-radius: 50%;104    background: #11332b;105    display: flex; justify-content: center; align-items: center;106    box-shadow: inset 0 0 0 2px rgba(207,227,209,0.15);107  }108  .pause-btn {109    width: 540px; height: 180px; border-radius: 90px;110    background: #62ff7a;111    display: flex; justify-content: center; align-items: center;112  }113  .pause-icon {114    width: 42px; height: 84px; position: relative;115  }116  .pause-icon::before, .pause-icon::after {117    content: "";118    position: absolute; top: 0;119    width: 14px; height: 84px; background: #0c130f; border-radius: 4px;120  }121  .pause-icon::before { left: 0; }122  .pause-icon::after { right: 0; }123 124  /* Bottom navigation */125  .bottom-bar {126    position: absolute;127    bottom: 90px;128    left: 0;129    width: 1080px;130    height: 260px;131    background: rgba(255,255,255,0.03);132  }133  .nav-items {134    position: absolute;135    bottom: 26px;136    left: 0;137    width: 1080px;138    display: flex;139    justify-content: space-around;140    align-items: flex-end;141    text-align: center;142    color: #cfe3d1;143    font-size: 42px;144  }145  .nav-item {146    width: 170px;147  }148  .nav-icon {149    width: 120px; height: 120px; margin: 0 auto 14px; border-radius: 50%;150    background: rgba(255,255,255,0.03);151    display: flex; justify-content: center; align-items: center;152  }153  .nav-item.active .nav-icon {154    background: rgba(255,255,255,0.08);155    box-shadow: inset 0 0 0 2px rgba(207,227,209,0.15);156  }157  .home-indicator {158    position: absolute;159    bottom: 26px;160    left: 290px;161    width: 500px;162    height: 12px;163    background: #f3f3f3;164    border-radius: 6px;165    opacity: 0.85;166  }167 168  /* Simple SVG helpers */169  svg { display: block; }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">178      <div class="time">8:23</div>179      <div class="dot-icon"></div>180      <div class="dot-icon" style="width: 18px; height: 18px;"></div>181      <div class="dot-icon" style="width: 18px; height: 18px;"></div>182      <div class="dot-icon" style="width: 8px; height: 8px; opacity: 0.7;"></div>183    </div>184    <div class="status-right">185      <!-- Wi-Fi icon -->186      <svg width="38" height="38" viewBox="0 0 24 24" fill="none">187        <path d="M2 9c4.5-3.5 15.5-3.5 20 0" stroke="#cfe3d1" stroke-width="2" stroke-linecap="round"/>188        <path d="M5 12c3-2.5 11-2.5 14 0" stroke="#cfe3d1" stroke-width="2" stroke-linecap="round"/>189        <path d="M8 15c2-1.6 6-1.6 8 0" stroke="#cfe3d1" stroke-width="2" stroke-linecap="round"/>190        <circle cx="12" cy="18" r="1.6" fill="#cfe3d1"/>191      </svg>192      <!-- Battery icon -->193      <svg width="44" height="44" viewBox="0 0 28 28" fill="none">194        <rect x="2" y="6" width="20" height="12" rx="2" stroke="#cfe3d1" stroke-width="2"/>195        <rect x="4" y="8" width="12" height="8" fill="#cfe3d1"/>196        <rect x="22" y="10" width="3" height="4" rx="1" fill="#cfe3d1"/>197      </svg>198    </div>199  </div>200 201  <!-- Header -->202  <div class="header">Stopwatch</div>203  <div class="menu-dot"></div>204 205  <!-- Stopwatch circle ring -->206  <div class="ring"></div>207 208  <!-- Readout -->209  <div class="timer-readout">210    <div class="timer-main">02</div>211    <div class="timer-sub">09</div>212  </div>213 214  <!-- Controls -->215  <div class="controls">216    <div class="round-btn">217      <!-- Reset icon -->218      <svg width="76" height="76" viewBox="0 0 24 24">219        <path d="M12 5v-3l-4 4 4 4V7c3 0 5 2 5 5s-2 5-5 5-5-2-5-5" stroke="#cfe3d1" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>220      </svg>221    </div>222 223    <div class="pause-btn">224      <div class="pause-icon"></div>225    </div>226 227    <div class="round-btn">228      <!-- Lap/stopwatch icon -->229      <svg width="76" height="76" viewBox="0 0 24 24" fill="none">230        <circle cx="12" cy="13" r="7" stroke="#cfe3d1" stroke-width="2"/>231        <rect x="9" y="2" width="6" height="3" rx="1" fill="#cfe3d1"/>232        <path d="M12 13l3-3" stroke="#cfe3d1" stroke-width="2" stroke-linecap="round"/>233      </svg>234    </div>235  </div>236 237  <!-- Bottom navigation -->238  <div class="bottom-bar"></div>239  <div class="nav-items">240    <div class="nav-item">241      <div class="nav-icon">242        <!-- Alarm icon -->243        <svg width="48" height="48" viewBox="0 0 24 24" fill="none">244          <circle cx="12" cy="14" r="7" stroke="#cfe3d1" stroke-width="2"/>245          <path d="M12 14v-3m0 3h3" stroke="#cfe3d1" stroke-width="2" stroke-linecap="round"/>246          <path d="M4 6l3-2M20 6l-3-2" stroke="#cfe3d1" stroke-width="2" stroke-linecap="round"/>247        </svg>248      </div>249      <div>Alarm</div>250    </div>251    <div class="nav-item">252      <div class="nav-icon">253        <!-- Clock icon -->254        <svg width="48" height="48" viewBox="0 0 24 24" fill="none">255          <circle cx="12" cy="12" r="8" stroke="#cfe3d1" stroke-width="2"/>256          <path d="M12 12V8m0 4h4" stroke="#cfe3d1" stroke-width="2" stroke-linecap="round"/>257        </svg>258      </div>259      <div>Clock</div>260    </div>261    <div class="nav-item">262      <div class="nav-icon">263        <!-- Timer icon -->264        <svg width="48" height="48" viewBox="0 0 24 24" fill="none">265          <rect x="8" y="2" width="8" height="3" rx="1" fill="#cfe3d1"/>266          <circle cx="12" cy="13" r="8" stroke="#cfe3d1" stroke-width="2"/>267          <path d="M12 13l0-4" stroke="#cfe3d1" stroke-width="2" stroke-linecap="round"/>268        </svg>269      </div>270      <div>Timer</div>271    </div>272    <div class="nav-item active">273      <div class="nav-icon">274        <!-- Stopwatch icon -->275        <svg width="48" height="48" viewBox="0 0 24 24" fill="none">276          <rect x="9" y="2" width="6" height="3" rx="1" fill="#cfe3d1"/>277          <circle cx="12" cy="13" r="8" stroke="#cfe3d1" stroke-width="2"/>278          <path d="M12 13l3-3" stroke="#cfe3d1" stroke-width="2" stroke-linecap="round"/>279        </svg>280      </div>281      <div>Stopwatch</div>282    </div>283    <div class="nav-item">284      <div class="nav-icon">285        <!-- Bed icon -->286        <svg width="48" height="48" viewBox="0 0 24 24" fill="none">287          <rect x="3" y="11" width="18" height="6" rx="1" stroke="#cfe3d1" stroke-width="2"/>288          <rect x="3" y="8" width="7" height="3" rx="1" fill="#cfe3d1"/>289        </svg>290      </div>291      <div>Bedtime</div>292    </div>293  </div>294 295  <div class="home-indicator"></div>296 297</div>298</body>299</html>