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>Exercise Screen</title>6<style>7  body {8    margin: 0;9    padding: 0;10    background: transparent;11    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;12    color: #202124;13  }14  #render-target {15    width: 1080px;16    height: 2400px;17    position: relative;18    overflow: hidden;19    background: #ffffff;20  }21 22  /* System status bar */23  .system-bar {24    height: 120px;25    background: #9E9E9E;26    color: #ffffff;27    display: flex;28    align-items: center;29    padding: 0 40px;30    font-weight: 600;31    font-size: 38px;32  }33  .sys-left { flex: 1; }34  .sys-right {35    display: flex;36    gap: 26px;37    align-items: center;38    opacity: 0.95;39  }40  .dot { width: 16px; height: 16px; background: #fff; border-radius: 50%; opacity: 0.85; }41  .pill {42    width: 46px; height: 28px; border-radius: 14px; border: 2px solid #fff;43  }44  .battery {45    width: 56px; height: 28px; border: 2px solid #fff; border-radius: 4px; position: relative;46  }47  .battery::after {48    content: "";49    position: absolute; right: -8px; top: 8px;50    width: 6px; height: 12px; background: #fff; border-radius: 2px;51  }52 53  /* Header */54  .header {55    padding: 34px 48px 10px 48px;56    background: #ffffff;57  }58  .title-row {59    display: flex;60    align-items: flex-end;61    justify-content: space-between;62  }63  .title {64    font-size: 96px;65    font-weight: 800;66    letter-spacing: 0.2px;67  }68  .goals {69    display: inline-flex;70    align-items: center;71    gap: 14px;72    color: #202124;73    font-weight: 700;74    font-size: 34px;75  }76  .goals svg { width: 34px; height: 34px; }77 78  /* Categories grid */79  .categories {80    padding: 10px 36px 260px 36px;81    display: grid;82    grid-template-columns: repeat(3, 1fr);83    grid-row-gap: 46px;84    grid-column-gap: 24px;85  }86  .cat {87    text-align: center;88  }89  .circle {90    width: 300px;91    height: 300px;92    margin: 0 auto;93    border-radius: 50%;94    background: #F2F2F2;95    border: 2px solid #D6D6D6;96    display: flex;97    align-items: center;98    justify-content: center;99    color: #6F6F6F;100    font-size: 26px;101  }102  .label {103    margin-top: 22px;104    font-size: 40px;105    font-weight: 700;106    color: #222;107  }108 109  /* Bottom nav */110  .bottom-nav {111    position: absolute;112    left: 0;113    bottom: 0;114    width: 1080px;115    height: 250px;116    background: #ffffff;117    border-top: 1px solid #E5E5E5;118    display: flex;119    justify-content: space-around;120    align-items: center;121    padding-bottom: 38px;122  }123  .nav-item {124    width: 190px;125    text-align: center;126    color: #8A8A8A;127    font-size: 32px;128    font-weight: 700;129  }130  .nav-item svg {131    display: block;132    margin: 0 auto 12px auto;133    width: 70px; height: 70px;134    stroke: currentColor;135    fill: none;136    stroke-width: 6;137  }138  .active {139    color: #1EA7FF;140  }141 142  /* Home indicator */143  .home-indicator {144    position: absolute;145    bottom: 18px;146    left: 50%;147    transform: translateX(-50%);148    width: 360px;149    height: 12px;150    background: #000;151    opacity: 0.85;152    border-radius: 8px;153  }154 155  /* Small helper to keep grid closer to screenshot proportions on tall canvas */156  .spacer { height: 6px; }157</style>158</head>159<body>160<div id="render-target">161 162  <!-- System status bar -->163  <div class="system-bar">164    <div class="sys-left">1:37</div>165    <div class="sys-right">166      <div class="pill"></div>167      <div class="dot"></div>168      <div class="dot"></div>169      <div class="dot"></div>170      <svg width="34" height="34" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2">171        <circle cx="12" cy="12" r="3"></circle>172      </svg>173      <svg width="38" height="38" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2">174        <path d="M2 8c5-5 15-5 20 0"></path>175        <path d="M5 11c3-3 11-3 14 0"></path>176        <path d="M8 14c2-2 6-2 8 0"></path>177      </svg>178      <div class="battery"></div>179    </div>180  </div>181 182  <!-- Header with title and goals -->183  <div class="header">184    <div class="title-row">185      <div class="title">Exercise</div>186      <div class="goals">187        <svg viewBox="0 0 24 24">188          <path d="M5 3v18" stroke="#222" stroke-width="2"></path>189          <path d="M5 4h12l-3 3 3 3H5" fill="#1EA7FF" stroke="#1EA7FF" stroke-width="1"></path>190        </svg>191        <span>MY GOALS</span>192      </div>193    </div>194  </div>195 196  <!-- Categories grid -->197  <div class="categories">198    <div class="cat">199      <div class="circle">[IMG: Triceps Diagram]</div>200      <div class="label">Triceps</div>201    </div>202    <div class="cat">203      <div class="circle">[IMG: Chest Diagram]</div>204      <div class="label">Chest</div>205    </div>206    <div class="cat">207      <div class="circle">[IMG: Shoulder Diagram]</div>208      <div class="label">Shoulder</div>209    </div>210 211    <div class="cat">212      <div class="circle">[IMG: Biceps Diagram]</div>213      <div class="label">Biceps</div>214    </div>215    <div class="cat">216      <div class="circle">[IMG: Core Diagram]</div>217      <div class="label">Core</div>218    </div>219    <div class="cat">220      <div class="circle">[IMG: Back Diagram]</div>221      <div class="label">Back</div>222    </div>223 224    <div class="cat">225      <div class="circle">[IMG: Forearms Diagram]</div>226      <div class="label">Forearms</div>227    </div>228    <div class="cat">229      <div class="circle">[IMG: Upper Legs Diagram]</div>230      <div class="label">Upper Legs</div>231    </div>232    <div class="cat">233      <div class="circle">[IMG: Glutes Diagram]</div>234      <div class="label">Glutes</div>235    </div>236 237    <div class="cat">238      <div class="circle">[IMG: Cardio System]</div>239      <div class="label">Cardio</div>240    </div>241    <div class="cat">242      <div class="circle">[IMG: Calves Diagram]</div>243      <div class="label">Calves</div>244    </div>245    <div class="cat">246      <div class="circle">[IMG: Full Body Diagram]</div>247      <div class="label">Show All</div>248    </div>249  </div>250 251  <!-- Bottom navigation -->252  <div class="bottom-nav">253    <div class="nav-item">254      <svg viewBox="0 0 24 24">255        <path d="M12 2l8 6-8 6-8-6 8-6z"></path>256        <path d="M4 14l8 6 8-6" opacity="0.7"></path>257      </svg>258      Discover259    </div>260    <div class="nav-item">261      <svg viewBox="0 0 24 24">262        <path d="M5 12l4 4 10-10" stroke-linecap="round" stroke-linejoin="round"></path>263      </svg>264      Workout265    </div>266    <div class="nav-item active">267      <svg viewBox="0 0 24 24">268        <path d="M7 5v14M17 5v14"></path>269        <path d="M3 9h8M13 9h8M3 15h8M13 15h8"></path>270      </svg>271      Exercises272    </div>273    <div class="nav-item">274      <svg viewBox="0 0 24 24">275        <rect x="3" y="4" width="18" height="16" rx="2"></rect>276        <path d="M3 8h18M8 2v4M16 2v4"></path>277      </svg>278      Progress279    </div>280    <div class="nav-item">281      <svg viewBox="0 0 24 24">282        <circle cx="12" cy="8" r="4"></circle>283        <path d="M4 22c2-4 6-6 8-6s6 2 8 6"></path>284      </svg>285      Profile286    </div>287    <div class="home-indicator"></div>288  </div>289 290</div>291</body>292</html>