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>Fitness Dashboard Mock</title>6<style>7  body { margin:0; padding:0; background: transparent; font-family: Roboto, Arial, Helvetica, sans-serif; }8  #render-target {9    width:1080px; height:2400px; position:relative; overflow:hidden;10    background:#121418; color:#E7EEF7;11  }12 13  /* Status bar */14  .status-bar{15    position:absolute; top:0; left:0; right:0; height:110px;16    display:flex; align-items:center; padding:0 36px; color:#DDE6F0;17    font-weight:600; letter-spacing:1px; font-size:46px;18  }19  .status-left{ display:flex; align-items:center; gap:26px; }20  .status-right{ margin-left:auto; display:flex; align-items:center; gap:26px; font-size:34px; opacity:.9; }21  .dot{ width:10px; height:10px; background:#8CA0AA; border-radius:50%; display:inline-block; }22 23  /* Floating small chips (info and avatar) */24  .chip{25    position:absolute; top:150px; right:220px; width:84px; height:84px; border-radius:50%;26    border:2px solid #2E353C; background:#181C21; color:#E8ECEF; display:flex; align-items:center; justify-content:center;27    font-size:44px; font-weight:700;28  }29  .chip.info{ right:360px; font-weight:900; font-size:40px; }30  .chip.avatar{ right:180px; background:#4E3A34; }31 32  /* Center rings */33  .ring-wrap{34    width:620px; height:620px; margin:150px auto 0; position:relative;35  }36  .ring-outer{37    position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);38    width:600px; height:600px; border-radius:50%;39    box-shadow: inset 0 0 0 18px #173b36;40  }41  .ring-mid{42    position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);43    width:520px; height:520px; border-radius:50%;44    box-shadow: inset 0 0 0 18px #223243;45  }46  .ring-dot{47    position:absolute; left:50%; transform:translateX(-50%); top:18px;48    width:20px; height:20px; background:#4ed3b8; border-radius:50%;49  }50  .ring-dot2{51    position:absolute; left:50%; transform:translateX(-50%); top:46px;52    width:20px; height:20px; background:#6d8cff; border-radius:50%;53  }54  .ring-center{55    position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); text-align:center;56  }57  .ring-center .num{ font-size:170px; color:#5ad4bb; font-weight:700; line-height:1; }58  .ring-center .sub{ font-size:84px; color:#7ea0ff; margin-top:14px; font-weight:700; }59 60  /* Label row under rings */61  .labels{62    margin-top:30px; display:flex; justify-content:center; gap:220px; align-items:center; font-size:52px; font-weight:700;63  }64  .labels .heart{ color:#59d3b8; display:flex; align-items:center; gap:16px; }65  .labels .steps{ color:#9BB6FF; display:flex; align-items:center; gap:16px; }66  .icon{67    width:52px; height:52px; display:inline-flex; align-items:center; justify-content:center;68  }69  .icon svg{ width:48px; height:48px; }70 71  /* Metric trio */72  .metrics{73    margin:40px 0 10px; display:flex; justify-content:center; gap:200px; text-align:center;74  }75  .metric .value{ font-size:76px; color:#A9BAFF; font-weight:800; }76  .metric .label{ font-size:40px; color:#B8C3CF; margin-top:8px; }77 78  /* Cards */79  .card{80    margin:36px 30px 0; background:#171C21; border-radius:28px; padding:40px; position:relative; box-shadow:0 8px 18px rgba(0,0,0,.35);81  }82  .card h3{ margin:0; font-size:58px; font-weight:800; color:#E7EEF7; }83  .card .subtitle{ margin-top:14px; font-size:38px; color:#97A4AF; }84  .chev{85    position:absolute; right:30px; top:44px; width:60px; height:60px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:#A7B3BF; font-size:48px;86  }87 88  /* Daily goals internals */89  .achieved{ display:flex; align-items:center; justify-content:space-between; margin-top:36px; }90  .ach-left{ font-size:60px; color:#87A0FF; font-weight:900; }91  .days{ display:flex; gap:28px; align-items:center; }92  .day{93    width:74px; height:74px; border-radius:50%; position:relative;94    box-shadow: inset 0 0 0 10px #193a37, inset 0 0 0 26px #222f40;95    display:flex; align-items:flex-end; justify-content:center; color:#7A8896; font-size:34px; padding-bottom:6px;96  }97  .day::before{98    content:""; position:absolute; top:6px; left:50%; transform:translateX(-50%);99    width:12px; height:12px; background:#47d0b5; border-radius:50%;100  }101 102  /* Weekly target card */103  .target-top{ display:flex; align-items:center; justify-content:space-between; }104  .target-top .big{ font-size:58px; font-weight:800; }105  .progress-wrap{ margin:32px 0 18px; height:22px; background:#22313A; border-radius:16px; overflow:hidden; }106  .progress-bar{ width:0%; height:100%; background:#2aa88f; border-radius:16px; }107  .target-caption{ font-size:42px; line-height:1.4; color:#B5C0CA; }108  .heart-logo{109    position:absolute; right:40px; bottom:40px; width:120px; height:120px; border-radius:16px; background:#E0E0E0; border:1px solid #BDBDBD;110    display:flex; align-items:center; justify-content:center; color:#757575; font-size:26px; text-align:center;111  }112 113  /* FAB */114  .fab{115    position:absolute; right:46px; bottom:540px; width:132px; height:132px; border-radius:50%;116    background:#23383A; box-shadow:0 10px 20px rgba(0,0,0,.45); display:flex; align-items:center; justify-content:center;117  }118  .fab .plus{119    width:84px; height:84px; border-radius:50%; background:#2E7CF7; color:#fff; font-size:68px; line-height:84px; text-align:center; font-weight:700;120    box-shadow:0 6px 16px rgba(46,124,247,.5);121  }122 123  /* Bottom nav */124  .bottom-nav{125    position:absolute; left:0; right:0; bottom:0; height:160px; background:rgba(15,18,22,.96);126    border-top:1px solid #21262B; display:flex; align-items:center; justify-content:space-around;127  }128  .bn-item{ color:#AAB6C4; text-align:center; }129  .bn-item .lbl{ font-size:36px; margin-top:8px; }130  .bn-icon{ width:74px; height:74px; border-radius:18px; display:flex; align-items:center; justify-content:center; }131  .bn-icon.home{ background:#1b2730; border:1px solid #2B3842; }132  .ghost-bar{133    position:absolute; bottom:20px; left:50%; transform:translateX(-50%);134    width:360px; height:10px; background:#D8D8D8; border-radius:6px; opacity:.55;135  }136</style>137</head>138<body>139<div id="render-target">140 141  <!-- Status bar -->142  <div class="status-bar">143    <div class="status-left">144      <div>8:40</div>145      <span class="dot"></span>146      <span class="dot"></span>147    </div>148    <div class="status-right">149      <span>◦</span>150      <span>📶</span>151      <span>🔋67%</span>152    </div>153  </div>154 155  <!-- Floating chips -->156  <div class="chip info">i</div>157  <div class="chip avatar">F</div>158 159  <!-- Concentric activity rings -->160  <div class="ring-wrap">161    <div class="ring-outer"></div>162    <div class="ring-mid"></div>163    <div class="ring-dot"></div>164    <div class="ring-dot2"></div>165    <div class="ring-center">166      <div class="num">0</div>167      <div class="sub">9</div>168    </div>169  </div>170 171  <!-- Labels row -->172  <div class="labels">173    <div class="heart">174      <span class="icon">175        <svg viewBox="0 0 24 24" fill="#59d3b8"><path d="M12 21s-6-4.35-9-7.35C-1 7.65 5 3 8.5 6.5L12 10l3.5-3.5C19 3 25 7.65 21 13.65C18 16.65 12 21 12 21z"/></svg>176      </span>177      <span>Heart Pts</span>178    </div>179    <div class="steps">180      <span class="icon">181        <svg viewBox="0 0 24 24" fill="#89a4ff"><path d="M7 20c-1.1 0-2-.9-2-2V7h2v11h10v2H7zm10-13h-3l-1-2H9L8 5H5v2h12V7z"/></svg>182      </span>183      <span>Steps</span>184    </div>185  </div>186 187  <!-- Metrics -->188  <div class="metrics">189    <div class="metric">190      <div class="value">1,225</div>191      <div class="label">Cal</div>192    </div>193    <div class="metric">194      <div class="value" style="color:#AFC1D8;">0</div>195      <div class="label">mi</div>196    </div>197    <div class="metric">198      <div class="value" style="color:#AFC1D8;">1</div>199      <div class="label">Move Min</div>200    </div>201  </div>202 203  <!-- Card: Daily goals -->204  <div class="card">205    <h3>Your daily goals</h3>206    <div class="chev">›</div>207    <div class="subtitle">Last 7 days</div>208 209    <div class="achieved">210      <div class="ach-left">0/7<br><span style="font-size:40px;color:#7D92A0;font-weight:600;">Achieved</span></div>211      <div class="days">212        <div class="day">T</div>213        <div class="day">W</div>214        <div class="day">T</div>215        <div class="day">F</div>216        <div class="day">S</div>217        <div class="day">S</div>218        <div class="day">M</div>219      </div>220    </div>221  </div>222 223  <!-- Card: Weekly target -->224  <div class="card" style="margin-top:26px; padding-bottom:150px;">225    <div class="target-top">226      <h3 class="big">Your weekly target</h3>227      <div class="chev" style="position:static; background:none;">›</div>228    </div>229    <div class="subtitle">Nov 12 – 18</div>230 231    <div style="display:flex; align-items:center; gap:20px; margin-top:22px;">232      <div style="color:#56DFB5; font-size:56px; font-weight:900;">0</div>233      <div style="color:#A5BDC8; font-size:44px;">of 150</div>234    </div>235 236    <div class="progress-wrap"><div class="progress-bar"></div></div>237 238    <div class="target-caption">239      Scoring 150 Heart Points a week can help you live longer, sleep better, and boost your mood240    </div>241 242    <div class="heart-logo">[IMG: Heart/Badge]</div>243  </div>244 245  <!-- Floating action button -->246  <div class="fab">247    <div class="plus">＋</div>248  </div>249 250  <!-- Bottom nav -->251  <div class="bottom-nav">252    <div class="bn-item">253      <div class="bn-icon home">254        <svg viewBox="0 0 24 24" width="44" height="44" fill="#a9c3ff"><path d="M12 3l9 8h-3v9h-5v-6H11v6H6v-9H3z"/></svg>255      </div>256      <div class="lbl">Home</div>257    </div>258    <div class="bn-item">259      <div class="bn-icon">260        <svg viewBox="0 0 24 24" width="48" height="48" fill="#9DB0BF"><path d="M3 4h18v3H3V4zm0 6h18v3H3v-3zm0 6h18v3H3v-3z"/></svg>261      </div>262      <div class="lbl"></div>263    </div>264    <div class="bn-item">265      <div class="bn-icon">266        <svg viewBox="0 0 24 24" width="48" height="48" fill="#9DB0BF"><path d="M12 12m-9 0a9 9 0 1 0 18 0 9 9 0 1 0-18 0zm2 0a7 7 0 1 1 14 0 7 7 0 1 1-14 0z"/></svg>267      </div>268      <div class="lbl"></div>269    </div>270    <div class="bn-item">271      <div class="bn-icon">272        <svg viewBox="0 0 24 24" width="48" height="48" fill="#9DB0BF"><path d="M12 12a5 5 0 1 0-5-5 5 5 0 0 0 5 5zm0 2c-4 0-8 2-8 5v3h16v-3c0-3-4-5-8-5z"/></svg>273      </div>274      <div class="lbl"></div>275    </div>276  </div>277 278  <div class="ghost-bar"></div>279</div>280</body>281</html>