GD-ML/AndroidCode

1<html lang="en">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: #0c1510; /* deep dark green/black */13    color: #e6eee3;14  }15 16  /* Status bar */17  .status-bar {18    position: absolute;19    top: 0;20    left: 0;21    width: 1080px;22    height: 100px;23    color: #cfe0cf;24    font-size: 34px;25    letter-spacing: 1px;26    display: flex;27    align-items: center;28    padding: 0 40px;29    box-sizing: border-box;30  }31  .status-right {32    margin-left: auto;33    display: flex;34    align-items: center;35    gap: 22px;36  }37  .dot {38    width: 10px; height: 10px; background:#cfe0cf; border-radius:50%;39    opacity: 0.75;40  }41  .icon-wifi, .icon-battery {42    width: 50px; height: 30px;43  }44  .icon-wifi path { fill:#cfe0cf; }45  .icon-battery rect, .icon-battery path { stroke:#cfe0cf; fill:none; stroke-width:4; }46 47  /* App bar */48  .app-title {49    position: absolute;50    top: 140px;51    left: 40px;52    font-size: 70px;53    font-weight: 600;54    color: #dfe9dc;55  }56  .menu-dots {57    position: absolute;58    top: 150px;59    right: 40px;60    width: 14px;61    display: flex;62    flex-direction: column;63    gap: 14px;64    align-items: center;65  }66  .menu-dots span {67    width: 10px; height: 10px; background:#bcd1bb; border-radius:50%; opacity: 0.8;68  }69 70  /* Stopwatch circle */71  .circle-wrap {72    position: absolute;73    top: 500px;74    left: 90px;75    width: 900px;76    height: 900px;77    border-radius: 50%;78    border: 24px solid rgba(150,170,150,0.25);79    box-shadow: inset 0 0 0 2px rgba(120,140,120,0.15);80  }81  .digits {82    position: absolute;83    top: 290px;84    left: 0;85    width: 900px;86    text-align: center;87    line-height: 1;88  }89  .digits .big {90    font-size: 220px;91    font-weight: 600;92    color: #eaf3e6;93  }94  .digits .small {95    margin-top: 40px;96    font-size: 130px;97    font-weight: 500;98    color: #eaf3e6;99    letter-spacing: 6px;100  }101 102  /* Play button */103  .play-btn {104    position: absolute;105    top: 1660px;106    left: 390px;107    width: 300px;108    height: 300px;109    border-radius: 50%;110    background: #64f66f;111    display: flex;112    align-items: center;113    justify-content: center;114    box-shadow: 0 10px 40px rgba(100,246,111,0.25);115  }116  .play-btn svg { width: 110px; height: 110px; fill: #0c1510; }117 118  /* Bottom nav */119  .bottom-nav {120    position: absolute;121    bottom: 0;122    left: 0;123    width: 1080px;124    height: 220px;125    background: rgba(20,35,25,0.45);126    display: flex;127    align-items: center;128    justify-content: space-around;129    color: #d6e3d6;130  }131  .nav-item {132    width: 180px;133    height: 160px;134    text-align: center;135    border-radius: 40px;136    padding-top: 22px;137    box-sizing: border-box;138  }139  .nav-item.active {140    background: rgba(40,60,45,0.6);141  }142  .nav-icon {143    width: 72px;144    height: 72px;145    margin: 0 auto 18px;146  }147  .nav-label {148    font-size: 38px;149  }150 151</style>152</head>153<body>154<div id="render-target">155 156  <!-- Status Bar -->157  <div class="status-bar">158    <div>8:22</div>159    <div class="status-right">160      <span class="dot"></span>161      <span class="dot"></span>162      <span class="dot"></span>163      <!-- WiFi -->164      <svg class="icon-wifi" viewBox="0 0 64 32">165        <path d="M2 10c8-8 52-8 60 0l-6 6c-6-6-42-6-48 0L2 10zm10 10c6-6 34-6 40 0l-6 6c-4-4-24-4-28 0l-6-6zm14 12l6 0-6 0zm-2-2c4-4 8-4 12 0l-6 6-6-6z"/>166      </svg>167      <!-- Battery -->168      <svg class="icon-battery" viewBox="0 0 80 34">169        <rect x="2" y="6" width="64" height="22" rx="4"></rect>170        <rect x="6" y="10" width="48" height="14" rx="2" fill="#cfe0cf"></rect>171        <path d="M68 12h8v10h-8" stroke="#cfe0cf"></path>172      </svg>173    </div>174  </div>175 176  <!-- App Title -->177  <div class="app-title">Stopwatch</div>178  <div class="menu-dots">179    <span></span><span></span><span></span>180  </div>181 182  <!-- Stopwatch Circle and Digits -->183  <div class="circle-wrap">184    <div class="digits">185      <div class="big">00</div>186      <div class="small">00</div>187    </div>188  </div>189 190  <!-- Play Button -->191  <div class="play-btn">192    <svg viewBox="0 0 100 100">193      <path d="M30 20 L80 50 L30 80 Z"></path>194    </svg>195  </div>196 197  <!-- Bottom Navigation -->198  <div class="bottom-nav">199    <div class="nav-item">200      <svg class="nav-icon" viewBox="0 0 64 64">201        <circle cx="32" cy="18" r="14" fill="#d6e3d6"></circle>202        <rect x="18" y="32" width="28" height="22" rx="6" fill="#d6e3d6"></rect>203      </svg>204      <div class="nav-label">Alarm</div>205    </div>206 207    <div class="nav-item">208      <svg class="nav-icon" viewBox="0 0 64 64">209        <circle cx="32" cy="32" r="26" stroke="#d6e3d6" stroke-width="6" fill="none"></circle>210        <rect x="30" y="12" width="4" height="22" fill="#d6e3d6"></rect>211        <rect x="32" y="32" width="16" height="4" fill="#d6e3d6"></rect>212      </svg>213      <div class="nav-label">Clock</div>214    </div>215 216    <div class="nav-item">217      <svg class="nav-icon" viewBox="0 0 64 64">218        <path d="M20 20h24v10H20zM16 34h32v10H16zM12 48h40v6H12z" fill="#d6e3d6"></path>219      </svg>220      <div class="nav-label">Timer</div>221    </div>222 223    <div class="nav-item active">224      <svg class="nav-icon" viewBox="0 0 64 64">225        <circle cx="32" cy="32" r="26" stroke="#d6e3d6" stroke-width="6" fill="none"></circle>226        <path d="M32 16v12l10 8" stroke="#d6e3d6" stroke-width="6" fill="none" stroke-linecap="round"></path>227      </svg>228      <div class="nav-label">Stopwatch</div>229    </div>230 231    <div class="nav-item">232      <svg class="nav-icon" viewBox="0 0 64 64">233        <rect x="10" y="26" width="44" height="22" rx="6" fill="#d6e3d6"></rect>234        <path d="M20 26v-10h24v10" stroke="#0c1510" stroke-width="2" fill="#d6e3d6"></path>235      </svg>236      <div class="nav-label">Bedtime</div>237    </div>238  </div>239 240</div>241</body>242</html>