GD-ML/AndroidCode

1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Mobile UI - Insights</title>5<style>6  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }7  #render-target {8    width: 1080px; height: 2400px;9    position: relative; overflow: hidden;10    background: #F8F9FB;11    border-radius: 24px;12    box-shadow: 0 4px 14px rgba(0,0,0,0.1);13  }14 15  /* Status bar */16  .status-bar {17    position: absolute; top: 0; left: 0; right: 0;18    height: 130px;19    background: #9EA3A6;20    color: white;21    display: flex; align-items: center;22    padding: 0 40px;23    box-sizing: border-box;24    font-weight: bold;25  }26  .status-time { font-size: 42px; }27  .status-icons { margin-left: auto; display: flex; gap: 26px; align-items: center; }28  .dot { width: 26px; height: 26px; background: #ffffff; opacity: 0.85; border-radius: 50%; }29  .icon-signal, .icon-battery {30    width: 40px; height: 40px; display: inline-flex; justify-content: center; align-items: center;31    background: rgba(255,255,255,0.25); border-radius: 8px;32  }33 34  /* Header tabs */35  .top-tabs {36    position: absolute; top: 130px; left: 0; right: 0;37    height: 140px; background: #FFFFFF;38    display: flex; align-items: center; justify-content: space-between;39    padding: 0 48px; box-sizing: border-box;40    border-bottom: 1px solid #E5E7EB;41  }42  .tab-title { font-size: 56px; color: #5F6368; letter-spacing: 0.5px; }43  .tab-title.active { color: #111; font-weight: 700; position: relative; }44  .tab-title.active::after {45    content: ""; position: absolute; left: 0; bottom: -26px;46    width: 160px; height: 8px; background: #111; border-radius: 4px;47  }48 49  /* Segment pills */50  .segments {51    position: absolute; top: 270px; left: 0; right: 0;52    background: #FFFFFF; padding: 26px 36px 8px; box-sizing: border-box;53    display: flex; gap: 20px; align-items: center;54    border-bottom: 1px solid #ECEFF4;55  }56  .pill {57    padding: 20px 38px; border-radius: 28px; border: 1px solid #DADDE2;58    color: #61656B; font-size: 40px; background: #F1F3F6;59  }60  .pill.selected { background: #FFFFFF; color: #111; font-weight: 700; }61  .diamond {62    color: #F1B63F; margin-left: 10px; font-size: 40px; position: relative; top: 4px;63  }64 65  /* Date ranges */66  .date-ranges {67    position: absolute; top: 370px; left: 0; right: 0;68    background: #FFFFFF;69    padding: 16px 36px 24px; box-sizing: border-box;70    display: flex; gap: 40px; color: #70757A; font-size: 38px;71    border-bottom: 1px solid #E9EDF2;72  }73  .date-ranges .range { padding: 14px 18px; }74  .date-ranges .range.active { color: #111; font-weight: 700; }75 76  /* Card base */77  .card {78    background: #FFFFFF; border-radius: 22px;79    box-shadow: 0 6px 14px rgba(0,0,0,0.05);80    margin: 24px 24px; padding: 30px; box-sizing: border-box;81  }82 83  /* Donut chart card */84  .donut-card { position: absolute; top: 470px; left: 0; right: 0; }85  .donut-title { font-size: 52px; font-weight: 800; color: #202124; margin-bottom: 20px; }86  .donut-content { display: flex; gap: 30px; align-items: center; }87  .img-placeholder {88    width: 680px; height: 520px;89    background: #E0E0E0; border: 1px solid #BDBDBD;90    display: flex; align-items: center; justify-content: center;91    color: #757575; font-size: 36px; border-radius: 18px;92  }93  .legend { display: flex; flex-direction: column; gap: 24px; font-size: 42px; color: #3C4043; }94  .legend-item { display: flex; align-items: center; gap: 18px; }95  .swatch { width: 36px; height: 36px; border-radius: 50%; }96  .swatch.blue { background: #75B7FF; }97  .swatch.green { background: #8AD56A; }98  .swatch.yellow { background: #F5CC5D; }99 100  .tip { margin-top: 24px; color: #70757A; font-size: 38px; }101 102  /* Summary chart card */103  .summary-card { position: absolute; top: 1110px; left: 0; right: 0; }104  .summary-title { font-size: 56px; font-weight: 800; color: #202124; margin-bottom: 12px; }105  .chart-area {106    height: 800px; border-radius: 16px;107    background: linear-gradient(to bottom, #F7F8FA 24%, #FFFFFF 24%), #FFFFFF;108    border: 1px solid #E2E6EA; position: relative; overflow: hidden;109  }110  .grid {111    position: absolute; inset: 0;112    background-image:113      linear-gradient(to bottom, rgba(0,0,0,0.06) 1px, transparent 1px);114    background-size: 100% 200px;115  }116  .axis {117    position: absolute; bottom: 40px; left: 0; right: 0;118    display: flex; justify-content: space-around; color: #8A8F95; font-size: 38px;119  }120  .metrics {121    margin-top: 20px; display: flex; justify-content: space-between; align-items: baseline;122    color: #3C4043;123  }124  .metric-title { font-size: 40px; color: #6B7280; }125  .metric-value { font-size: 70px; font-weight: 800; color: #111; }126  .progress { text-align: right; }127  .progress .metric-title { text-align: right; }128  .progress .metric-value { color: #35A853; }129 130  /* Customize button */131  .cta {132    position: absolute; bottom: 300px; left: 50%; transform: translateX(-50%);133    padding: 28px 44px; border-radius: 20px; background: #FFFFFF;134    border: 2px solid #E5E7EB; font-size: 44px; color: #202124; font-weight: 800;135    box-shadow: 0 10px 16px rgba(0,0,0,0.08);136  }137  .cta .diamond { font-size: 44px; }138 139  /* Bottom navigation */140  .bottom-nav {141    position: absolute; bottom: 0; left: 0; right: 0;142    height: 200px; background: #FFFFFF;143    border-top: 1px solid #E5E7EB;144    display: flex; justify-content: space-around; align-items: center;145  }146  .nav-item { display: flex; flex-direction: column; align-items: center; gap: 10px; position: relative; }147  .nav-label { font-size: 34px; color: #7A7F85; }148  .nav-item.active .nav-label { color: #1E88E5; font-weight: 700; }149  .badge { position: absolute; top: -2px; right: -12px; width: 22px; height: 22px; background: #E53935; border-radius: 50%; }150 151  /* Simple SVG icons styling */152  .nav-icon { width: 72px; height: 72px; }153  .nav-item.active .nav-icon path { fill: #1E88E5; }154  .nav-icon path { fill: #81868C; }155</style>156</head>157<body>158<div id="render-target">159 160  <!-- Status bar -->161  <div class="status-bar">162    <div class="status-time">1:37</div>163    <div class="status-icons">164      <div class="dot"></div>165      <div class="dot"></div>166      <div class="dot"></div>167      <div class="dot"></div>168      <div class="icon-signal">📶</div>169      <div class="icon-battery">🔋</div>170    </div>171  </div>172 173  <!-- Top tabs -->174  <div class="top-tabs">175    <div class="tab-title">HISTORY</div>176    <div class="tab-title active">INSIGHTS</div>177  </div>178 179  <!-- Segment pills -->180  <div class="segments">181    <div class="pill selected">7D</div>182    <div class="pill">14D</div>183    <div class="pill">1M <span class="diamond">◆</span></div>184    <div class="pill">12M <span class="diamond">◆</span></div>185  </div>186 187  <!-- Date ranges -->188  <div class="date-ranges">189    <div class="range">11.23 - 11.29</div>190    <div class="range active">11.30 - 12.06</div>191    <div class="range">12.07 - 12.13</div>192  </div>193 194  <!-- Donut Chart Card -->195  <div class="card donut-card">196    <div class="donut-title">Muscle Breakdown</div>197    <div class="donut-content">198      <div class="img-placeholder">[IMG: Donut Chart - Muscle Breakdown]</div>199      <div class="legend">200        <div class="legend-item">201          <span class="swatch blue"></span>202          Glutes: 72%203        </div>204        <div class="legend-item">205          <span class="swatch green"></span>206          Back: 18%207        </div>208        <div class="legend-item">209          <span class="swatch yellow"></span>210          Lower Leg: 10%211        </div>212      </div>213    </div>214    <div class="tip">Tips: Try to balance all muscles in certain period of time</div>215  </div>216 217  <!-- Summary Chart Card -->218  <div class="card summary-card">219    <div class="summary-title">Summary Weight Lifted (lbs)</div>220    <div class="chart-area">221      <div class="grid"></div>222      <div class="axis">223        <div>11.30</div>224        <div>12.02</div>225        <div>12.04</div>226        <div>12.06</div>227      </div>228    </div>229    <div class="metrics">230      <div>231        <div class="metric-title">Average Weight Lifted</div>232        <div class="metric-value">0 lb</div>233      </div>234      <div class="progress">235        <div class="metric-title">Progress</div>236        <div class="metric-value">+0%</div>237      </div>238    </div>239  </div>240 241  <!-- Customize button -->242  <div class="cta">CUSTOMIZE CHARTS <span class="diamond">◆</span></div>243 244  <!-- Bottom Navigation -->245  <div class="bottom-nav">246    <div class="nav-item">247      <svg class="nav-icon" viewBox="0 0 24 24">248        <path d="M12 2l7 6v12h-5v-7H10v7H5V8l7-6z"></path>249      </svg>250      <div class="nav-label">Discover</div>251    </div>252    <div class="nav-item">253      <svg class="nav-icon" viewBox="0 0 24 24">254        <path d="M5 12l4 4L19 6l-1.5-1.5L9 13 6.5 10.5 5 12z"></path>255      </svg>256      <div class="nav-label">Workout</div>257    </div>258    <div class="nav-item">259      <svg class="nav-icon" viewBox="0 0 24 24">260        <path d="M4 10h3v4H4v-4zm13 0h3v4h-3v-4zM8 9h8v6H8V9z"></path>261      </svg>262      <div class="nav-label">Exercises</div>263    </div>264    <div class="nav-item active">265      <svg class="nav-icon" viewBox="0 0 24 24">266        <path d="M3 4h18v3H3V4zm0 5h18v12H3V9zm4 3v6h3v-6H7zm6 0v6h3v-6h-3z"></path>267      </svg>268      <div class="nav-label">Progress</div>269    </div>270    <div class="nav-item">271      <svg class="nav-icon" viewBox="0 0 24 24">272        <path d="M12 12c2.8 0 5-2.2 5-5s-2.2-5-5-5-5 2.2-5 5 2.2 5 5 5zm-7 9c0-3.9 3.1-7 7-7s7 3.1 7 7H5z"></path>273      </svg>274      <div class="badge"></div>275      <div class="nav-label">Profile</div>276    </div>277  </div>278 279</div>280</body>281</html>