GD-ML/AndroidCode

1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Fitness Dashboard Mock</title>5<meta name="viewport" content="width=1080, initial-scale=1.0">6<style>7  body { margin:0; padding:0; background:transparent; font-family: "Roboto", "Segoe UI", Arial, sans-serif; }8  #render-target{9    position: relative;10    width:1080px;11    height:2400px;12    overflow:hidden;13    background:#121212;14    color:#eaeaea;15  }16 17  /* Status bar */18  .status{19    height:80px;20    padding:0 32px;21    font-size:32px;22    color:#eaeaea;23    display:flex;24    align-items:center;25    justify-content:space-between;26    opacity:.9;27  }28  .status .right i{29    display:inline-block;30    width:18px;height:18px;background:#eaeaea;border-radius:50%;margin-left:18px;31  }32 33  /* Small action bubbles top-right */34  .top-actions{35    position:absolute; top:118px; right:40px; display:flex; gap:26px;36  }37  .bubble{38    width:72px; height:72px; border-radius:50%;39    background:#1f1f1f; display:flex; align-items:center; justify-content:center;40    border:1px solid #2a2a2a; color:#eaeaea; font-weight:600;41  }42  .bubble svg{ width:34px; height:34px; fill:#eaeaea; }43 44  /* Rings */45  .rings{46    width:600px; height:600px; margin:120px auto 0; position:relative;47  }48  .ring-outer{49    position:absolute; inset:0;50    border-radius:50%;51    border:16px solid #1e3a37;52    box-shadow:0 0 0 2px rgba(0,0,0,.2) inset;53  }54  .ring-inner{55    position:absolute; left:50%; top:50%;56    width:470px; height:470px; transform:translate(-50%,-50%);57    border-radius:50%;58    border:14px solid #223046;59  }60  .dot-teal, .dot-blue{61    position:absolute; left:50%; transform:translateX(-50%);62    width:26px; height:26px; border-radius:50%;63    top:-6px;64  }65  .dot-teal{ background:#36c8a3; }66  .dot-blue{ background:#6ea2ff; top:10px; }67 68  .ring-center{69    position:absolute; left:0; top:0; right:0; bottom:0;70    display:flex; flex-direction:column; align-items:center; justify-content:center;71  }72  .ring-center .big{ font-size:170px; color:#55d6b6; line-height:1; margin-top:18px; }73  .ring-center .small{ font-size:86px; color:#6ea2ff; opacity:.95; margin-top:12px; }74 75  /* Metric labels row */76  .metric-labels{77    width:680px; margin:28px auto 0; display:flex; justify-content:center; gap:160px;78    font-size:44px; align-items:center;79  }80  .metric-item{ display:flex; align-items:center; gap:18px; color:#cfeee7; }81  .metric-item.steps{ color:#a9c2ff; }82  .metric-item svg{ width:44px; height:44px; }83 84  /* Stats row */85  .stats{86    width:900px; margin:54px auto 0; display:flex; justify-content:space-between; text-align:center;87  }88  .stat .num{ font-size:70px; color:#a8b7f3; }89  .stat .label{ font-size:40px; color:#b9bdc7; margin-top:8px; }90 91  /* Cards */92  .card{93    width:1000px; margin:46px auto; padding:52px 44px;94    background:#1c1c1c; border:1px solid #2a2a2a; border-radius:28px;95  }96  .card h2{ margin:0; font-size:58px; font-weight:700; }97  .sub{ margin-top:12px; color:#9aa0a6; font-size:36px; }98  .chev{ position:absolute; right:40px; top:56px; opacity:.8; }99  .chev::after{100    content:'›'; font-size:62px; color:#9aa0a6;101  }102  .goals-row{103    margin-top:46px; display:flex; align-items:flex-end; justify-content:space-between;104  }105  .achieved{ font-size:52px; color:#81a1ff; }106  .days{ display:flex; gap:38px; }107  .day{108    display:flex; flex-direction:column; align-items:center; gap:10px;109    color:#8590a6;110  }111  .day .circle{112    width:64px; height:64px; border-radius:50%;113    border:6px solid #244741;114    box-shadow:0 0 0 6px #263248 inset;115    background:#151515;116    position:relative;117  }118  .day .circle::after{119    content:''; position:absolute; top:-6px; right:-6px; width:12px; height:12px; background:#35c6a2; border-radius:50%;120  }121  .day span{ font-size:34px; letter-spacing:4px; }122 123  .week-target .top{124    display:flex; justify-content:space-between; align-items:center;125  }126  .target-left{ font-size:52px; color:#62d5b8; }127  .progress{128    margin-top:32px; height:22px; background:#153b36; border-radius:12px; overflow:hidden;129  }130  .progress .bar{ height:100%; width:0%; background:#2dd3a6; }131  .tip{ margin-top:32px; color:#c9d0d6; font-size:40px; line-height:1.35; max-width:800px; }132  .fab{133    position:absolute; right:40px; bottom:40px; width:120px; height:120px; border-radius:50%;134    background:#2b2b2b; border:1px solid #333; display:flex; align-items:center; justify-content:center;135    box-shadow:0 6px 18px rgba(0,0,0,.4);136  }137  .fab .plus{138    width:46px; height:46px; position:relative;139  }140  .fab .plus::before, .fab .plus::after{141    content:''; position:absolute; background:#ffb74d; border-radius:3px;142  }143  .fab .plus::before{ width:46px; height:8px; left:0; top:19px; }144  .fab .plus::after{ width:8px; height:46px; left:19px; top:0; }145 146  /* Bottom nav */147  .bottom-nav{148    position:absolute; bottom:30px; left:0; width:100%; display:flex; justify-content:space-around;149    align-items:center; padding:18px 0 12px;150    background:linear-gradient(to top, rgba(0,0,0,.65), rgba(0,0,0,0));151  }152  .nav-btn{ display:flex; flex-direction:column; align-items:center; color:#9aa0a6; }153  .nav-btn.active{ color:#a5c8ff; }154  .nav-btn svg{ width:50px; height:50px; margin-bottom:10px; fill:currentColor; }155  .nav-btn span{ font-size:36px; }156 157</style>158</head>159<body>160<div id="render-target">161 162  <!-- Status bar -->163  <div class="status">164    <div class="left">8:30</div>165    <div class="right">166      <i></i><i></i><i></i>167    </div>168  </div>169 170  <!-- Top small actions -->171  <div class="top-actions">172    <div class="bubble" aria-label="Info">173      <svg viewBox="0 0 24 24"><path d="M12 2a10 10 0 1010 10A10 10 0 0012 2zm1 15h-2v-6h2zm0-8h-2V7h2z"/></svg>174    </div>175    <div class="bubble">F</div>176  </div>177 178  <!-- Rings -->179  <div class="rings">180    <div class="ring-outer"></div>181    <div class="ring-inner"></div>182    <div class="dot-teal"></div>183    <div class="dot-blue"></div>184    <div class="ring-center">185      <div class="big">0</div>186      <div class="small">9</div>187    </div>188  </div>189 190  <!-- Metric labels -->191  <div class="metric-labels">192    <div class="metric-item heart">193      <svg viewBox="0 0 24 24"><path d="M12 21s-7-4.4-9.2-8.3C.6 9.6 2.1 6 5.4 6c2.3 0 3.6 1.6 4.6 3 1-1.4 2.3-3 4.6-3 3.3 0 4.8 3.6 2.6 6.7C19 16.6 12 21 12 21z"/></svg>194      <span>Heart Pts</span>195    </div>196    <div class="metric-item steps">197      <svg viewBox="0 0 24 24"><path d="M8 20h3l2-5-3-1zM13 4l-2 5 3 1 2-5z"/></svg>198      <span>Steps</span>199    </div>200  </div>201 202  <!-- Stats -->203  <div class="stats">204    <div class="stat">205      <div class="num">1,226</div>206      <div class="label">Cal</div>207    </div>208    <div class="stat">209      <div class="num">0.13</div>210      <div class="label">mi</div>211    </div>212    <div class="stat">213      <div class="num">0</div>214      <div class="label">Move Min</div>215    </div>216  </div>217 218  <!-- Daily goals card -->219  <div class="card">220    <div class="chev"></div>221    <h2>Your daily goals</h2>222    <div class="sub">Last 7 days</div>223 224    <div class="goals-row">225      <div class="achieved">0/7<br><span style="font-size:38px;color:#7ea0ff;">Achieved</span></div>226 227      <div class="days">228        <div class="day"><div class="circle"></div><span>T</span></div>229        <div class="day"><div class="circle"></div><span>W</span></div>230        <div class="day"><div class="circle"></div><span>T</span></div>231        <div class="day"><div class="circle"></div><span>F</span></div>232        <div class="day"><div class="circle"></div><span>S</span></div>233        <div class="day"><div class="circle"></div><span>S</span></div>234        <div class="day"><div class="circle"></div><span>M</span></div>235      </div>236    </div>237  </div>238 239  <!-- Weekly target card -->240  <div class="card week-target" style="position:relative;">241    <div class="chev"></div>242    <div class="top">243      <h2>Your weekly target</h2>244      <div class="target-left">0 of 150</div>245    </div>246    <div class="sub">Nov 12 – 18</div>247    <div class="progress"><div class="bar"></div></div>248    <div class="tip">Scoring 150 Heart Points a week can help you live longer, sleep better, and boost your mood</div>249 250    <div class="fab" title="Add">251      <div class="plus"></div>252    </div>253  </div>254 255  <!-- Bottom nav -->256  <div class="bottom-nav">257    <div class="nav-btn active">258      <svg viewBox="0 0 24 24"><path d="M12 3l10 8h-3v9h-6v-6H11v6H5v-9H2z"/></svg>259      <span>Home</span>260    </div>261    <div class="nav-btn">262      <svg viewBox="0 0 24 24"><path d="M4 4h16v4H4zM4 10h16v4H4zM4 16h16v4H4z"/></svg>263      <span>Journal</span>264    </div>265    <div class="nav-btn">266      <svg viewBox="0 0 24 24"><path d="M12 12a5 5 0 10-5-5 5 5 0 005 5zm0 2c-4.4 0-8 2.2-8 5v3h16v-3c0-2.8-3.6-5-8-5z"/></svg>267      <span>Profile</span>268    </div>269  </div>270 271</div>272</body>273</html>