GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<title>Workout Screen Mock</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: #1f2124;13    color: #ffffff;14  }15 16  /* Status bar */17  .statusbar {18    position: absolute;19    top: 0;20    left: 0;21    width: 100%;22    height: 120px;23    display: flex;24    align-items: center;25    justify-content: space-between;26    padding: 0 40px;27    color: #eaeaea;28    font-size: 42px;29    letter-spacing: 0.5px;30  }31  .sb-left, .sb-right {32    display: flex;33    align-items: center;34    gap: 28px;35  }36  .icon {37    width: 36px;38    height: 36px;39    opacity: 0.9;40  }41  .wifi, .battery {42    width: 58px;43    height: 36px;44  }45 46  /* Main content */47  .content {48    position: absolute;49    top: 520px;50    left: 0;51    width: 100%;52    text-align: center;53  }54  .title {55    color: #aeb4bb;56    font-size: 46px;57    margin-bottom: 40px;58  }59  .timer {60    font-size: 190px;61    font-weight: 600;62    letter-spacing: 6px;63    margin-bottom: 140px;64  }65 66  .metrics {67    display: flex;68    justify-content: space-between;69    padding: 0 80px;70    margin-bottom: 150px;71  }72  .metric {73    width: 33.33%;74    text-align: center;75  }76  .metric .value {77    font-size: 120px;78    line-height: 1;79  }80  .metric .label {81    margin-top: 24px;82    font-size: 44px;83    color: #aeb4bb;84  }85 86  .sub-metrics {87    display: flex;88    justify-content: space-between;89    padding: 0 160px;90    margin-top: 60px;91  }92  .sub-metric {93    width: 40%;94    text-align: center;95  }96  .sub-metric .value {97    font-size: 118px;98    line-height: 1;99  }100  .sub-metric .label {101    margin-top: 22px;102    font-size: 44px;103    color: #aeb4bb;104  }105 106  /* Bottom controls */107  .controls {108    position: absolute;109    bottom: 190px;110    left: 0;111    width: 100%;112    display: flex;113    justify-content: space-between;114    padding: 0 70px;115    align-items: center;116  }117  .circle-btn {118    width: 170px;119    height: 170px;120    border-radius: 50%;121    display: flex;122    justify-content: center;123    align-items: center;124  }125  .btn-stop {126    background: #4b3b3b;127  }128  .btn-play {129    background: #3e4857;130    margin-right: 280px; /* visually center the play button */131  }132  .square {133    width: 54px;134    height: 54px;135    background: #f0a293;136    border-radius: 6px;137  }138  .triangle {139    width: 0;140    height: 0;141    border-left: 42px solid #88a8e8;142    border-top: 26px solid transparent;143    border-bottom: 26px solid transparent;144    margin-left: 8px;145  }146 147  /* Gesture bar */148  .gesture {149    position: absolute;150    bottom: 70px;151    left: 50%;152    transform: translateX(-50%);153    width: 470px;154    height: 12px;155    background: #e6e6e6;156    border-radius: 8px;157    opacity: 0.9;158  }159</style>160</head>161<body>162<div id="render-target">163 164  <!-- Status bar -->165  <div class="statusbar">166    <div class="sb-left">167      <div>8:11</div>168      <!-- Simple icons -->169      <svg class="icon" viewBox="0 0 24 24">170        <circle cx="12" cy="12" r="6" fill="#f5f5f5"></circle>171      </svg>172      <svg class="icon" viewBox="0 0 24 24">173        <rect x="6" y="6" width="12" height="12" fill="#f5f5f5"></rect>174      </svg>175      <svg class="icon" viewBox="0 0 24 24">176        <polygon points="12,4 20,20 4,20" fill="#f5f5f5"></polygon>177      </svg>178      <svg class="icon" viewBox="0 0 24 24">179        <rect x="9" y="4" width="6" height="16" fill="#f5f5f5"></rect>180      </svg>181      <svg class="icon" viewBox="0 0 24 24">182        <circle cx="12" cy="12" r="3" fill="#f5f5f5"></circle>183      </svg>184    </div>185    <div class="sb-right">186      <!-- WiFi -->187      <svg class="wifi" viewBox="0 0 24 24">188        <path d="M2 8c5-4 15-4 20 0" stroke="#f5f5f5" stroke-width="2" fill="none"/>189        <path d="M6 12c3-3 9-3 12 0" stroke="#f5f5f5" stroke-width="2" fill="none"/>190        <circle cx="12" cy="16" r="2" fill="#f5f5f5"/>191      </svg>192      <!-- Battery -->193      <svg class="battery" viewBox="0 0 32 24">194        <rect x="1" y="4" width="26" height="16" rx="2" ry="2" stroke="#f5f5f5" stroke-width="2" fill="none"/>195        <rect x="4" y="7" width="18" height="10" fill="#f5f5f5"/>196        <rect x="28" y="9" width="3" height="6" fill="#f5f5f5"/>197      </svg>198    </div>199  </div>200 201  <!-- Main content -->202  <div class="content">203    <div class="title">Walking</div>204    <div class="timer">14:43</div>205 206    <div class="metrics">207      <div class="metric">208        <div class="value">0.03</div>209        <div class="label">mi</div>210      </div>211      <div class="metric">212        <div class="value">—:—</div>213        <div class="label">/mi</div>214      </div>215      <div class="metric">216        <div class="value">0</div>217        <div class="label">Heart Pts</div>218      </div>219    </div>220 221    <div class="sub-metrics">222      <div class="sub-metric">223        <div class="value">68</div>224        <div class="label">Cal</div>225      </div>226      <div class="sub-metric">227        <div class="value">97</div>228        <div class="label">steps</div>229      </div>230    </div>231  </div>232 233  <!-- Controls -->234  <div class="controls">235    <div class="circle-btn btn-stop">236      <div class="square"></div>237    </div>238    <div class="circle-btn btn-play">239      <div class="triangle"></div>240    </div>241  </div>242 243  <!-- Gesture bar -->244  <div class="gesture"></div>245</div>246</body>247</html>