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>Exercise Goals</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #FFFFFF;15  }16 17  /* Status bar */18  .status-bar {19    height: 120px;20    background: #8E8A8D;21    color: #fff;22    display: flex;23    align-items: center;24    padding: 0 36px;25    font-size: 36px;26    letter-spacing: 1px;27  }28  .status-icons {29    margin-left: auto;30    display: flex;31    align-items: center;32    gap: 22px;33  }34  .status-dot {35    width: 14px; height: 14px; background: #fff; border-radius: 50%;36  }37 38  /* App header */39  .app-header {40    height: 140px;41    background: #fff;42    display: flex;43    align-items: center;44    padding: 0 28px;45    border-bottom: 1px solid #e9e9e9;46  }47  .header-title {48    flex: 1;49    text-align: center;50    font-size: 48px;51    font-weight: 700;52    color: #222;53    margin-right: 80px; /* compensate for right icon width */54  }55  .icon-btn {56    width: 72px; height: 72px; display: flex; align-items: center; justify-content: center; color: #444;57  }58  .icon-btn svg { width: 48px; height: 48px; }59 60  /* Column header above list */61  .column-head {62    display: grid;63    grid-template-columns: 100px 1fr 160px 340px 140px;64    align-items: end;65    padding: 18px 26px 8px 26px;66    color: #9E9E9E;67    font-size: 30px;68  }69  .column-head .blue { color: #4BA6FF; font-weight: 600; }70 71  /* List */72  .list {73    padding: 0 0 0 0;74  }75  .row {76    display: grid;77    grid-template-columns: 100px 1fr 160px 340px 140px;78    padding: 24px 26px;79    align-items: center;80    border-bottom: 1px solid #EFEFEF;81  }82  .avatar {83    width: 76px; height: 76px; border-radius: 50%;84    background: #E0E0E0;85    border: 1px solid #BDBDBD;86    display: flex; align-items: center; justify-content: center;87    color: #757575; font-size: 20px;88  }89  .name {90    font-size: 38px; color: #333;91  }92  .value-blue {93    color: #4BA6FF; font-size: 36px; font-weight: 600; text-align: right; padding-right: 20px;94  }95  .value-gray {96    color: #9E9E9E; font-size: 36px; text-align: right; padding-right: 20px;97  }98 99  .progress-cell {100    padding-right: 20px;101  }102  .progress-label {103    font-size: 28px; color: #9E9E9E; margin-bottom: 6px;104  }105  .progress-label .pct { color: #4BA6FF; font-weight: 600; margin-left: 10px; }106  .bar {107    width: 100%; height: 18px; background: #E6E6E6; border-radius: 12px; overflow: hidden;108  }109  .bar .fill {110    height: 100%; background: #A9D2FF; width: 0%;111  }112 113  /* Button */114  .bottom-button {115    position: absolute;116    left: 54px;117    right: 54px;118    bottom: 180px;119    height: 130px;120    background: #6BB7FF;121    color: #fff;122    border-radius: 26px;123    display: flex;124    align-items: center;125    justify-content: center;126    font-size: 40px;127    font-weight: 800;128    letter-spacing: 1px;129  }130 131  /* Gesture bar area */132  .gesture-area {133    position: absolute;134    left: 0; right: 0; bottom: 0;135    height: 120px; background: #000;136    display: flex; align-items: flex-start; justify-content: center;137  }138  .gesture-pill {139    margin-top: 28px;140    width: 180px; height: 12px; background: #C9C9C9; border-radius: 8px;141  }142</style>143</head>144<body>145<div id="render-target">146 147  <!-- Top device status bar (mock) -->148  <div class="status-bar">149    3:51150    <div class="status-icons">151      <div class="status-dot"></div>152      <div class="status-dot"></div>153      <div class="status-dot"></div>154    </div>155  </div>156 157  <!-- App header -->158  <div class="app-header">159    <div class="icon-btn">160      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">161        <path d="M15 18l-6-6 6-6"/>162      </svg>163    </div>164    <div class="header-title">Exercise Goals</div>165    <div class="icon-btn">166      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">167        <circle cx="12" cy="12" r="9"></circle>168        <path d="M12 10v6"></path>169        <path d="M12 7h.01"></path>170      </svg>171    </div>172  </div>173 174  <!-- Column headings -->175  <div class="column-head">176    <div></div>177    <div></div>178    <div class="blue">3M</div>179    <div>Progress</div>180    <div>Goal</div>181  </div>182 183  <!-- List -->184  <div class="list">185    <!-- Row 1 -->186    <div class="row">187      <div class="avatar">IMG</div>188      <div class="name">Barbell Bench Press</div>189      <div class="value-blue">12</div>190      <div class="progress-cell">191        <div class="progress-label"><span class="pct">105%</span></div>192        <div class="bar"><div class="fill" style="width: 92%;"></div></div>193      </div>194      <div class="value-gray" style="color:#333;">12</div>195    </div>196 197    <!-- Row 2 -->198    <div class="row">199      <div class="avatar">IMG</div>200      <div class="name">Barbell Squat</div>201      <div class="value-blue">N/A</div>202      <div class="progress-cell">203        <div class="progress-label">&nbsp;</div>204        <div class="bar"><div class="fill" style="width: 0%;"></div></div>205      </div>206      <div class="value-gray">N/A</div>207    </div>208 209    <!-- Row 3 -->210    <div class="row">211      <div class="avatar">IMG</div>212      <div class="name">Barbell Deadlift</div>213      <div class="value-blue">N/A</div>214      <div class="progress-cell">215        <div class="progress-label">&nbsp;</div>216        <div class="bar"><div class="fill" style="width: 0%;"></div></div>217      </div>218      <div class="value-gray">N/A</div>219    </div>220 221    <!-- Row 4 -->222    <div class="row">223      <div class="avatar">IMG</div>224      <div class="name">Dumbbell Lateral Raise</div>225      <div class="value-blue">N/A</div>226      <div class="progress-cell">227        <div class="progress-label">&nbsp;</div>228        <div class="bar"><div class="fill" style="width: 0%;"></div></div>229      </div>230      <div class="value-gray" style="color:#333;">12</div>231    </div>232 233    <!-- Row 5 -->234    <div class="row">235      <div class="avatar">IMG</div>236      <div class="name">Cable Lat Pulldown (Wide Grip)</div>237      <div class="value-blue">N/A</div>238      <div class="progress-cell">239        <div class="progress-label">&nbsp;</div>240        <div class="bar"><div class="fill" style="width: 0%;"></div></div>241      </div>242      <div class="value-gray" style="color:#333;">12</div>243    </div>244  </div>245 246  <!-- Bottom action button -->247  <div class="bottom-button">ADD GOALS</div>248 249  <!-- Gesture bar -->250  <div class="gesture-area">251    <div class="gesture-pill"></div>252  </div>253</div>254</body>255</html>