GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<title>Stopwatch UI Mock</title>5<style>6  body { margin: 0; padding: 0; background: transparent; font-family: "Segoe UI", Arial, sans-serif; }7  #render-target {8    width: 1080px;9    height: 2400px;10    position: relative;11    overflow: hidden;12    background: #181416; /* deep charcoal */13    color: #F4ECEE;14  }15 16  /* Status bar */17  .status-bar {18    position: absolute;19    top: 0;20    left: 0;21    width: 1080px;22    height: 110px;23    padding: 0 32px;24    box-sizing: border-box;25    display: flex;26    align-items: center;27    justify-content: space-between;28    color: #EDE4E7;29    font-size: 42px;30    letter-spacing: 0.5px;31  }32  .status-left, .status-right {33    display: flex;34    align-items: center;35    gap: 22px;36  }37  .status-icon svg { width: 42px; height: 42px; fill: none; stroke: #EDE4E7; stroke-width: 2.2; }38 39  /* Title and menu */40  .title {41    position: absolute;42    top: 160px;43    left: 46px;44    font-size: 64px;45    font-weight: 600;46    color: #EFE7EA;47  }48  .menu-dots {49    position: absolute;50    top: 160px;51    right: 40px;52    display: flex;53    flex-direction: column;54    gap: 16px;55  }56  .menu-dots span {57    width: 12px;58    height: 12px;59    background: #CDBFC7;60    border-radius: 50%;61    display: block;62    opacity: 0.9;63  }64 65  /* Big stopwatch ring */66  .ring {67    position: absolute;68    top: 500px;69    left: 110px; /* centers 860px ring in 1080px */70    width: 860px;71    height: 860px;72    border-radius: 50%;73    border: 28px solid #493F46; /* muted plum ring */74    display: flex;75    align-items: center;76    justify-content: center;77  }78 79  .time-display {80    text-align: center;81    line-height: 1;82  }83  .time-major {84    font-size: 230px;85    font-weight: 500;86    color: #F7EEF1;87    letter-spacing: 6px;88  }89  .time-minor {90    margin-top: 30px;91    font-size: 140px;92    font-weight: 500;93    color: #F7EEF1;94    letter-spacing: 6px;95  }96 97  /* Play button */98  .play-button {99    position: absolute;100    left: 50%;101    transform: translateX(-50%);102    top: 1680px;103    width: 320px;104    height: 320px;105    border-radius: 50%;106    background: #F6B3C6;107    box-shadow: 0 10px 40px rgba(246,179,198,0.25);108    display: flex;109    align-items: center;110    justify-content: center;111  }112  .play-button svg { width: 120px; height: 120px; fill: #6A2B3A; }113 114  /* Bottom navigation */115  .bottom-nav {116    position: absolute;117    left: 0;118    bottom: 120px;119    width: 1080px;120    height: 260px;121    padding: 30px 40px 10px 40px;122    box-sizing: border-box;123    display: flex;124    align-items: flex-end;125    justify-content: space-between;126    color: #EDE4E7;127  }128  .nav-item {129    width: 196px;130    height: 190px;131    display: flex;132    flex-direction: column;133    align-items: center;134    gap: 22px;135    font-size: 42px;136  }137  .nav-icon {138    width: 120px;139    height: 120px;140    display: flex;141    align-items: center;142    justify-content: center;143    color: #EDE4E7;144  }145  .nav-icon svg { width: 90px; height: 90px; stroke: #EDE4E7; stroke-width: 2.4; fill: none; }146  .selected .nav-icon {147    background: #40343B;148    border-radius: 80px;149  }150 151  /* Gesture bar */152  .gesture-bar {153    position: absolute;154    bottom: 32px;155    left: 50%;156    transform: translateX(-50%);157    width: 420px;158    height: 16px;159    border-radius: 10px;160    background: #D8D3D6;161    opacity: 0.65;162  }163</style>164</head>165<body>166<div id="render-target">167 168  <!-- Status bar -->169  <div class="status-bar">170    <div class="status-left">171      <div>9:20</div>172      <div class="status-icon">173        <!-- small "B" badge as box placeholder -->174        <svg viewBox="0 0 24 24">175          <rect x="3" y="3" width="18" height="18" rx="3" stroke="#EDE4E7"></rect>176          <text x="12" y="16" font-size="12" text-anchor="middle" fill="#EDE4E7" style="font-family: Arial;">B</text>177        </svg>178      </div>179      <div class="status-icon">180        <!-- square with arrow (generic status icon) -->181        <svg viewBox="0 0 24 24">182          <rect x="3" y="3" width="18" height="18" rx="3"></rect>183          <path d="M8 12h8M12 8v8" stroke="#EDE4E7"></path>184        </svg>185      </div>186      <div class="status-icon">187        <!-- small cloud icon -->188        <svg viewBox="0 0 24 24">189          <path d="M6 14a4 4 0 0 1 4-4c.4-2.5 2.6-4.5 5.2-4.5A5.8 5.8 0 0 1 21 11.3c1.6.3 3 1.8 3 3.5A3.2 3.2 0 0 1 20.8 18H8a4 4 0 0 1-2-4z" stroke="#EDE4E7"></path>190        </svg>191      </div>192      <div class="status-icon">193        <!-- tiny dot -->194        <svg viewBox="0 0 24 24">195          <circle cx="12" cy="12" r="3" stroke="#EDE4E7"></circle>196        </svg>197      </div>198    </div>199    <div class="status-right">200      <div class="status-icon">201        <!-- Wi-Fi -->202        <svg viewBox="0 0 24 24">203          <path d="M2 8c5-5 15-5 20 0M5 12c3.5-3.5 10.5-3.5 14 0M8 16c2-2 6-2 8 0" stroke-linecap="round"></path>204          <circle cx="12" cy="19" r="1.5" fill="#EDE4E7" stroke="none"></circle>205        </svg>206      </div>207      <div class="status-icon">208        <!-- Cast / connection -->209        <svg viewBox="0 0 24 24">210          <rect x="3" y="5" width="18" height="14" rx="2"></rect>211          <path d="M3 17c2 0 4 1.5 5 3M3 13c3 0 6 2 7 4" stroke-linecap="round"></path>212        </svg>213      </div>214      <div class="status-icon">215        <!-- Battery -->216        <svg viewBox="0 0 24 24">217          <rect x="3" y="7" width="16" height="10" rx="2"></rect>218          <rect x="20" y="10" width="2" height="4" rx="1"></rect>219          <rect x="5" y="9" width="10" height="6" fill="#EDE4E7" stroke="none"></rect>220        </svg>221      </div>222    </div>223  </div>224 225  <!-- Title -->226  <div class="title">Stopwatch</div>227 228  <!-- Menu dots -->229  <div class="menu-dots">230    <span></span>231    <span></span>232    <span></span>233  </div>234 235  <!-- Stopwatch ring and digits -->236  <div class="ring">237    <div class="time-display">238      <div class="time-major">00</div>239      <div class="time-minor">00</div>240    </div>241  </div>242 243  <!-- Play button -->244  <div class="play-button">245    <svg viewBox="0 0 100 100">246      <polygon points="35,25 80,50 35,75" fill="#6A2B3A"></polygon>247    </svg>248  </div>249 250  <!-- Bottom navigation -->251  <div class="bottom-nav">252    <div class="nav-item">253      <div class="nav-icon">254        <!-- Alarm icon -->255        <svg viewBox="0 0 24 24">256          <circle cx="12" cy="13" r="7"></circle>257          <path d="M5 6l4-3M19 6l-4-3" stroke-linecap="round"></path>258          <path d="M12 13l3-2" stroke-linecap="round"></path>259        </svg>260      </div>261      <div>Alarm</div>262    </div>263    <div class="nav-item">264      <div class="nav-icon">265        <!-- Clock icon -->266        <svg viewBox="0 0 24 24">267          <circle cx="12" cy="12" r="9"></circle>268          <path d="M12 12l0-5M12 12l4 2" stroke-linecap="round"></path>269        </svg>270      </div>271      <div>Clock</div>272    </div>273    <div class="nav-item">274      <div class="nav-icon">275        <!-- Timer icon (hourglass) -->276        <svg viewBox="0 0 24 24">277          <path d="M6 4h12M6 20h12M7 6c0 3 4 4 5 6-1 2-5 3-5 6M17 6c0 3-4 4-5 6 1 2 5 3 5 6" stroke-linecap="round"></path>278        </svg>279      </div>280      <div>Timer</div>281    </div>282    <div class="nav-item selected">283      <div class="nav-icon">284        <!-- Stopwatch icon -->285        <svg viewBox="0 0 24 24">286          <circle cx="12" cy="13" r="7"></circle>287          <rect x="10" y="3" width="4" height="3" rx="1"></rect>288          <path d="M12 13l3-3" stroke-linecap="round"></path>289        </svg>290      </div>291      <div>Stopwatch</div>292    </div>293    <div class="nav-item">294      <div class="nav-icon">295        <!-- Bedtime icon -->296        <svg viewBox="0 0 24 24">297          <rect x="3" y="10" width="18" height="6" rx="1"></rect>298          <rect x="5" y="7" width="6" height="3" rx="1"></rect>299          <path d="M3 16v3M21 16v3" stroke-linecap="round"></path>300        </svg>301      </div>302      <div>Bedtime</div>303    </div>304  </div>305 306  <!-- Gesture bar -->307  <div class="gesture-bar"></div>308</div>309</body>310</html>