GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<meta name="viewport" content="width=1080, initial-scale=1.0">6<title>Stopwatch UI</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: "Roboto", Arial, sans-serif; }9  #render-target {10    position: relative;11    overflow: hidden;12    width: 1080px;13    height: 2400px;14    background: #171316; /* deep dark background */15    color: #EDE3E7;16  }17 18  /* Top bar title */19  .title {20    position: absolute;21    left: 64px;22    top: 140px;23    font-size: 72px;24    font-weight: 500;25    letter-spacing: 0.5px;26    color: #E9DDE2;27  }28  .ellipsis {29    position: absolute;30    right: 52px;31    top: 160px;32    width: 18px;33    display: grid;34    gap: 10px;35    justify-items: center;36  }37  .ellipsis span {38    width: 10px; height: 10px; border-radius: 50%;39    background: #C9B9C2;40    display: block;41  }42 43  /* Big stopwatch ring */44  .ring {45    position: absolute;46    width: 880px;47    height: 880px;48    left: 100px; /* center horizontally: (1080-880)/2 */49    top: 510px;50    border-radius: 50%;51    border: 28px solid #453A40; /* muted purple-grey */52    box-sizing: border-box;53  }54  .digits {55    position: absolute;56    left: 0; top: 0; right: 0; bottom: 0;57    display: flex;58    flex-direction: column;59    align-items: center;60    justify-content: center;61    pointer-events: none;62  }63  .digits .mm {64    font-size: 200px;65    line-height: 1;66    font-weight: 500;67    color: #F2E8ED;68  }69  .digits .ss {70    margin-top: 18px;71    font-size: 120px;72    line-height: 1;73    color: #F2E8ED;74  }75 76  /* Play button */77  .play-btn {78    position: absolute;79    left: 50%;80    transform: translateX(-50%);81    top: 1580px;82    width: 250px;83    height: 250px;84    border-radius: 50%;85    background: #F6B0C7;86    display: flex;87    align-items: center;88    justify-content: center;89    box-shadow: 0 10px 24px rgba(0,0,0,0.45);90  }91  .play-btn svg {92    width: 64px; height: 64px;93    fill: #5B404E;94  }95 96  /* Bottom navigation */97  .bottom-nav {98    position: absolute;99    left: 0; right: 0; bottom: 0;100    height: 230px;101    background: #2B2327;102    display: flex;103    align-items: center;104    justify-content: space-around;105    padding: 20px 24px 36px;106    box-sizing: border-box;107  }108  .tab {109    width: 180px;110    text-align: center;111    color: #D7CBD0;112    font-size: 34px;113  }114  .icon-wrap {115    width: 100px; height: 100px;116    margin: 0 auto 18px;117    display: flex; align-items: center; justify-content: center;118    border-radius: 28px;119  }120  .tab .icon {121    width: 72px; height: 72px;122  }123  .tab.active .icon-wrap {124    background: #4A4046;125  }126  .tab.active { color: #F0E6EA; }127 128  /* Gesture bar */129  .gesture {130    position: absolute;131    left: 50%;132    transform: translateX(-50%);133    bottom: 22px;134    width: 360px;135    height: 12px;136    background: #E8E1E4;137    border-radius: 8px;138    opacity: 0.95;139  }140</style>141</head>142<body>143<div id="render-target">144 145  <div class="title">Stopwatch</div>146  <div class="ellipsis" aria-label="More options">147    <span></span><span></span><span></span>148  </div>149 150  <div class="ring">151    <div class="digits">152      <div class="mm">00</div>153      <div class="ss">00</div>154    </div>155  </div>156 157  <div class="play-btn" aria-label="Start">158    <svg viewBox="0 0 24 24">159      <path d="M8 5v14l11-7-11-7z"></path>160    </svg>161  </div>162 163  <div class="bottom-nav">164    <div class="tab">165      <div class="icon-wrap">166        <svg class="icon" viewBox="0 0 24 24">167          <path fill="#D7CBD0" d="M12 8a6 6 0 0 1 6 6v3H6v-3a6 6 0 0 1 6-6zm-5.2-2.9 1.6-1.2 1.2 1.6-1.6 1.2-1.2-1.6zm9.2.4 1.2-1.6 1.6 1.2-1.2 1.6-1.6-1.2zM12 6a8 8 0 0 0-8 8v5h16v-5a8 8 0 0 0-8-8z"/>168        </svg>169      </div>170      <div>Alarm</div>171    </div>172 173    <div class="tab">174      <div class="icon-wrap">175        <svg class="icon" viewBox="0 0 24 24">176          <path fill="#D7CBD0" d="M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm1 11h5v-2h-4V6h-2v7z"/>177        </svg>178      </div>179      <div>Clock</div>180    </div>181 182    <div class="tab">183      <div class="icon-wrap">184        <svg class="icon" viewBox="0 0 24 24">185          <path fill="#D7CBD0" d="M6 2h12l-5 6h-2L6 2zm0 20h12l-5-6h-2l-5 6z"/>186        </svg>187      </div>188      <div>Timer</div>189    </div>190 191    <div class="tab active">192      <div class="icon-wrap">193        <svg class="icon" viewBox="0 0 24 24">194          <path fill="#F0E6EA" d="M15 1H9v2h6V1zM12 5a9 9 0 1 0 .002 18.002A9 9 0 0 0 12 5zm0 16a7 7 0 1 1 0-14 7 7 0 0 1 0 14zm1-11h-2v5l4 2 1-1.8-3-1.2V10z"/>195        </svg>196      </div>197      <div>Stopwatch</div>198    </div>199 200    <div class="tab">201      <div class="icon-wrap">202        <svg class="icon" viewBox="0 0 24 24">203          <path fill="#D7CBD0" d="M3 11h9a4 4 0 0 1 4 4v4H3v-8zm14 3h4v5h-4v-5zM3 9h8V7H3v2z"/>204        </svg>205      </div>206      <div>Bedtime</div>207    </div>208  </div>209 210  <div class="gesture"></div>211</div>212</body>213</html>