GD-ML/AndroidCode

1<html lang="en">2<head>3<meta charset="UTF-8">4<meta name="viewport" content="width=1080, initial-scale=1.0">5<title>Stopwatch UI</title>6<style>7  body { margin: 0; padding: 0; background: transparent; font-family: Roboto, Arial, sans-serif; }8  #render-target {9    width: 1080px;10    height: 2400px;11    position: relative;12    overflow: hidden;13    background: #0d1611; /* deep dark green/black */14    color: #e7f2e6;15  }16 17  /* Status bar */18  .status-bar {19    position: absolute;20    top: 0;21    left: 0;22    height: 120px;23    width: 100%;24    padding: 0 36px;25    box-sizing: border-box;26    display: flex;27    align-items: center;28    justify-content: space-between;29    color: #dfe9dd;30    font-size: 42px;31    letter-spacing: 1px;32  }33  .status-left, .status-right { display: flex; align-items: center; gap: 26px; }34  .status-dot { width: 18px; height: 18px; background: #cfe2cf; border-radius: 50%; opacity: 0.9; }35  .icon-wifi, .icon-battery {36    width: 46px; height: 46px;37  }38  .icon-battery rect { stroke: #cfe2cf; }39  .icon-wifi path { stroke: #cfe2cf; }40 41  /* Header title */42  .title {43    position: absolute;44    top: 160px;45    left: 48px;46    font-size: 74px;47    font-weight: 500;48    color: #e6f1e6;49    letter-spacing: 0.5px;50  }51 52  /* Menu dots (more) */53  .menu {54    position: absolute;55    top: 172px;56    right: 44px;57    display: flex;58    flex-direction: column;59    gap: 16px;60    align-items: center;61  }62  .menu .dot {63    width: 12px; height: 12px; border-radius: 50%;64    background: #cfe2cf;65    opacity: 0.7;66  }67 68  /* Stopwatch circle */69  .stopwatch-ring {70    position: absolute;71    top: 520px;72    left: 110px;73    width: 860px;74    height: 860px;75    border-radius: 50%;76    border: 24px solid rgba(150, 170, 160, 0.28);77    box-sizing: border-box;78  }79  .time {80    position: absolute;81    top: 780px; /* center inside ring */82    left: 0;83    width: 100%;84    text-align: center;85  }86  .time .big {87    font-size: 220px;88    line-height: 1;89    font-weight: 500;90    color: #eef7ee;91    letter-spacing: 12px;92  }93  .time .small {94    margin-top: 28px;95    font-size: 132px;96    line-height: 1;97    font-weight: 500;98    color: #eef7ee;99    letter-spacing: 10px;100    opacity: 0.95;101  }102 103  /* Play button */104  .play-wrap {105    position: absolute;106    top: 1660px;107    left: 50%;108    transform: translateX(-50%);109    width: 340px;110    height: 340px;111    border-radius: 50%;112    background: #66f96d;113    display: flex;114    justify-content: center;115    align-items: center;116    box-shadow: 0 12px 24px rgba(102, 249, 109, 0.2);117  }118  .play-wrap svg { width: 96px; height: 96px; }119 120  /* Bottom navigation */121  .bottom-nav {122    position: absolute;123    bottom: 0;124    left: 0;125    width: 100%;126    height: 260px;127    background: rgba(10, 20, 14, 0.95);128    box-shadow: 0 -8px 22px rgba(0,0,0,0.35) inset;129    border-top: 1px solid rgba(170, 190, 180, 0.08);130  }131  .nav-items {132    position: absolute;133    left: 28px;134    right: 28px;135    bottom: 70px;136    display: flex;137    justify-content: space-between;138    align-items: center;139  }140  .nav-item {141    width: 190px;142    height: 150px;143    text-align: center;144    color: #cfe2cf;145    font-size: 42px;146  }147  .nav-icon { width: 64px; height: 64px; margin: 0 auto 18px; display: block; }148  .active-pill {149    position: absolute;150    bottom: 140px;151    left: 50%;152    transform: translateX(-50%);153    width: 260px;154    height: 96px;155    background: rgba(30, 54, 41, 0.85);156    border-radius: 48px;157    display: flex;158    align-items: center;159    justify-content: center;160    color: #e6f3e6;161    font-weight: 600;162    font-size: 40px;163    letter-spacing: 0.3px;164  }165 166  /* Gesture bar */167  .gesture-bar {168    position: absolute;169    bottom: 20px;170    left: 50%;171    transform: translateX(-50%);172    width: 380px;173    height: 12px;174    border-radius: 8px;175    background: rgba(230, 235, 230, 0.9);176  }177</style>178</head>179<body>180<div id="render-target">181 182  <!-- Status bar -->183  <div class="status-bar">184    <div class="status-left">185      <div style="font-weight: 600;">8:28</div>186      <div class="status-dot"></div>187      <div class="status-dot"></div>188      <div class="status-dot"></div>189      <div class="status-dot"></div>190    </div>191    <div class="status-right">192      <!-- WiFi icon -->193      <svg class="icon-wifi" viewBox="0 0 24 24" fill="none" stroke-width="2">194        <path d="M3 9c5-4 13-4 18 0" />195        <path d="M6 12c3-3 9-3 12 0" />196        <path d="M9 15c2-2 4-2 6 0" />197        <circle cx="12" cy="18" r="1.5" fill="#cfe2cf" stroke="none"/>198      </svg>199      <!-- Battery icon -->200      <svg class="icon-battery" viewBox="0 0 32 20" fill="none">201        <rect x="1" y="3" width="26" height="14" rx="2" stroke-width="2"/>202        <rect x="28" y="7" width="3" height="6" rx="1" fill="#cfe2cf"/>203        <rect x="3" y="5" width="18" height="10" rx="1" fill="#cfe2cf"/>204      </svg>205    </div>206  </div>207 208  <!-- Title -->209  <div class="title">Stopwatch</div>210 211  <!-- Menu dots -->212  <div class="menu">213    <div class="dot"></div>214    <div class="dot"></div>215    <div class="dot"></div>216  </div>217 218  <!-- Stopwatch ring -->219  <div class="stopwatch-ring"></div>220 221  <!-- Time values -->222  <div class="time">223    <div class="big">00</div>224    <div class="small">00</div>225  </div>226 227  <!-- Play action button -->228  <div class="play-wrap">229    <svg viewBox="0 0 64 64">230      <polygon points="22,16 52,32 22,48" fill="#0d1611"></polygon>231    </svg>232  </div>233 234  <!-- Bottom navigation -->235  <div class="bottom-nav">236    <div class="nav-items">237      <!-- Alarm -->238      <div class="nav-item">239        <svg class="nav-icon" viewBox="0 0 24 24" fill="none" stroke="#cfe2cf" stroke-width="2">240          <circle cx="12" cy="13" r="7" />241          <path d="M12 13V9M12 13l4 2" />242          <path d="M5 5l3 3M19 5l-3 3" />243        </svg>244        Alarm245      </div>246      <!-- Clock -->247      <div class="nav-item">248        <svg class="nav-icon" viewBox="0 0 24 24" fill="none" stroke="#cfe2cf" stroke-width="2">249          <circle cx="12" cy="12" r="8" />250          <path d="M12 6v6l4 2" />251        </svg>252        Clock253      </div>254      <!-- Timer -->255      <div class="nav-item">256        <svg class="nav-icon" viewBox="0 0 24 24" fill="none" stroke="#cfe2cf" stroke-width="2">257          <path d="M8 4h8" />258          <circle cx="12" cy="14" r="7" />259          <path d="M12 14l3-3" />260        </svg>261        Timer262      </div>263      <!-- Stopwatch -->264      <div class="nav-item">265        <svg class="nav-icon" viewBox="0 0 24 24" fill="none" stroke="#cfe2cf" stroke-width="2">266          <path d="M9 2h6M12 5v2" />267          <circle cx="12" cy="14" r="8" />268          <path d="M12 14l3-2" />269        </svg>270        Stopwatch271      </div>272      <!-- Bedtime -->273      <div class="nav-item">274        <svg class="nav-icon" viewBox="0 0 24 24" fill="none" stroke="#cfe2cf" stroke-width="2">275          <path d="M3 11h18v7H3z" />276          <path d="M3 11V7h5a4 4 0 0 1 4 4" />277          <path d="M17 7v4" />278        </svg>279        Bedtime280      </div>281    </div>282    <div class="active-pill">Stopwatch</div>283  </div>284 285  <!-- Gesture bar -->286  <div class="gesture-bar"></div>287</div>288</body>289</html>