GD-ML/AndroidCode
13.4k
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: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, Helvetica, sans-serif; }8 #render-target{9 width:1080px; height:2400px; position:relative; overflow:hidden;10 background:#0f1216; color:#e8ecf3;11 }12 13 /* Top status bar */14 .status-bar{15 position:absolute; left:0; top:0; width:100%; height:110px; padding:0 38px;16 display:flex; align-items:center; justify-content:space-between; color:#c9d0db;17 font-size:36px; letter-spacing:1px;18 }19 .right-icons{ display:flex; align-items:center; gap:24px; }20 .circle-ic{21 width:44px; height:44px; border:2px solid #92a0ac55; border-radius:50%;22 display:inline-flex; align-items:center; justify-content:center; font-size:28px; color:#cfd7e5;23 }24 .battery{ padding:6px 10px; border:2px solid #92a0ac55; border-radius:12px; font-size:30px; }25 26 /* Header actions (info + avatar) */27 .header-actions{28 position:absolute; right:36px; top:140px; display:flex; gap:26px; align-items:center;29 }30 .info-btn{31 width:86px; height:86px; border-radius:50%;32 border:3px solid #9fb0c6; color:#dbe7ff; display:flex; align-items:center; justify-content:center;33 font-size:46px;34 }35 .avatar{36 width:96px; height:96px; border-radius:50%; background:#5b4036; color:#f3e2d8;37 display:flex; align-items:center; justify-content:center; font-weight:700; font-size:46px;38 box-shadow:0 6px 10px rgba(0,0,0,0.35) inset;39 }40 41 /* Main circle progress */42 .center{43 position:absolute; top:310px; left:50%; transform:translateX(-50%); width:100%;44 }45 .ring-wrap{ position:relative; width:560px; height:560px; margin:0 auto; }46 .ring{47 width:560px; height:560px; border-radius:50%;48 background: conic-gradient(#8ea6ff 0deg, #8ea6ff 260deg, #1c262c 260deg 360deg);49 box-shadow: inset 0 0 0 8px #0e161b, 0 0 0 8px #0e161b;50 position:relative;51 }52 .ring::after{53 content:""; position:absolute; inset:34px; background:#0f1216; border-radius:50%;54 box-shadow: inset 0 0 0 10px #1c2b2f;55 }56 .ring-dot{57 position:absolute; left:50%; top:-8px; transform:translateX(-50%);58 width:24px; height:24px; background:#42d59b; border-radius:50%;59 box-shadow:0 0 0 6px #0f1216;60 z-index:3;61 }62 .ring-center{63 position:absolute; inset:0; display:flex; align-items:center; justify-content:center; flex-direction:column;64 z-index:4;65 }66 .big-zero{ font-size:150px; color:#57e5b5; line-height:1; margin-top:40px; }67 .steps{68 font-size:68px; color:#a8b9ff; margin-top:10px; letter-spacing:1px;69 }70 71 /* Labels under circle */72 .labels{73 margin-top:40px; display:flex; justify-content:center; gap:110px; align-items:center;74 font-size:56px;75 }76 .label{ display:flex; align-items:center; gap:16px; color:#cbd6f8; }77 .label svg{ width:56px; height:56px; }78 .label .green{ color:#54e0a6; }79 .label .blue{ color:#bcd0ff; }80 81 /* Stats row */82 .stats{83 margin:72px auto 0; display:flex; justify-content:center; gap:240px; text-align:center;84 }85 .stat .num{ font-size:70px; color:#aebfff; }86 .stat .sub{ font-size:38px; color:#a3abb8; margin-top:8px; }87 88 /* Cards */89 .card{90 width:1002px; margin:48px auto 0; background:#161b20; border-radius:28px; padding:40px 36px;91 box-shadow:0 1px 0 rgba(255,255,255,0.03) inset, 0 10px 30px rgba(0,0,0,0.35);92 }93 .card-title{94 display:flex; justify-content:space-between; align-items:center; font-size:54px; color:#e5ebf7;95 }96 .chev{ width:24px; height:24px; border-right:6px solid #7f8b99; border-top:6px solid #7f8b99; transform:rotate(45deg); margin-right:12px; }97 .subtle{ color:#8f9aab; font-size:36px; margin-top:10px; }98 .goals-row{99 display:flex; align-items:flex-end; justify-content:space-between; margin-top:36px;100 }101 .achieved{ color:#9fb5ff; font-size:70px; }102 .achieved .small{ display:block; font-size:36px; color:#7e8a9c; margin-top:10px; }103 .mini-days{ display:flex; align-items:center; gap:22px; }104 .mini{105 width:70px; height:70px; border-radius:50%; background: conic-gradient(#89a4ff 330deg, #203039 0);106 position:relative;107 }108 .mini::after{ content:""; position:absolute; inset:8px; background:#161b20; border-radius:50%; box-shadow: inset 0 0 0 6px #22313a; }109 .day{ text-align:center; font-size:30px; color:#8b95a5; margin-top:8px; }110 111 /* Weekly target */112 .green-text{ color:#46d69b; font-size:64px; }113 .progress{114 height:22px; background:#22323a; border-radius:14px; margin:20px 0 10px 0; position:relative; overflow:hidden;115 }116 .progress .bar{ position:absolute; left:0; top:0; height:100%; width:74%; background:#274a43; border-radius:14px; }117 .paragraph{ color:#b1bbc8; font-size:40px; line-height:1.4; max-width:820px; }118 .heart-badge{119 position:absolute; right:180px; bottom:52px; width:110px; height:110px; background:#ce2c2c; border-radius:50%;120 display:flex; align-items:center; justify-content:center; color:#fff; font-size:64px; box-shadow:0 10px 24px rgba(0,0,0,0.35);121 }122 123 /* Floating action button */124 .fab{125 position:absolute; right:56px; bottom:510px; width:130px; height:130px; border-radius:50%;126 background:#22343d; box-shadow:0 14px 28px rgba(0,0,0,0.45);127 display:flex; align-items:center; justify-content:center;128 }129 .fab .plus{130 width:70px; height:70px; border-radius:8px; background:#2563eb; position:relative; box-shadow:0 6px 14px rgba(37,99,235,0.5) inset;131 }132 .fab .plus:before, .fab .plus:after{133 content:""; position:absolute; background:#fff; border-radius:3px;134 }135 .fab .plus:before{ width:8px; height:54px; left:31px; top:8px; }136 .fab .plus:after{ width:54px; height:8px; left:8px; top:31px; }137 138 /* Bottom navigation */139 .bottom-nav{140 position:absolute; left:0; bottom:0; width:100%; height:156px; background:#0d1014;141 border-top:1px solid #1d232b; display:flex; align-items:center; justify-content:space-around;142 }143 .nav-item{ display:flex; flex-direction:column; align-items:center; gap:8px; color:#9aa6b6; font-size:34px; }144 .nav-item .ico{145 width:74px; height:74px; border-radius:50%; background:#10151a; border:2px solid #1f2a33;146 display:flex; align-items:center; justify-content:center;147 }148 .nav-item.active .ico{ background:#1f2f3b; border-color:#3b69ff; }149 .nav-item.active{ color:#bcd0ff; }150 .ico svg{ width:40px; height:40px; fill:#9aa6b6; }151 .nav-item.active .ico svg{ fill:#bcd0ff; }152 153</style>154</head>155<body>156<div id="render-target">157 158 <!-- Status bar -->159 <div class="status-bar">160 <div class="left">161 8:43162 <span class="circle-ic" style="margin-left:18px;">⦿</span>163 <span class="circle-ic">◦</span>164 <span class="circle-ic">fc</span>165 <span class="circle-ic" style="width:10px;height:10px;border:none;background:#b6c0cf;border-radius:50%;margin-left:10px;"></span>166 </div>167 <div class="right-icons">168 <span class="circle-ic">−</span>169 <svg width="48" height="48" viewBox="0 0 24 24" fill="#c9d0db"><path d="M12 18c3.31 0 6-2.69 6-6h2c0 4.42-3.58 8-8 8s-8-3.58-8-8h2c0 3.31 2.69 6 6 6zm0-4c1.1 0 2-.9 2-2h2c0 2.21-1.79 4-4 4s-4-1.79-4-4h2c0 1.1.9 2 2 2zm0-4c.55 0 1-.45 1-1h2a3 3 0 11-6 0h2c0 .55.45 1 1 1z"/></svg>170 <div class="battery">69%</div>171 </div>172 </div>173 174 <!-- Info + avatar -->175 <div class="header-actions">176 <div class="info-btn">i</div>177 <div class="avatar">F</div>178 </div>179 180 <!-- Main progress section -->181 <div class="center">182 <div class="ring-wrap">183 <div class="ring">184 <div class="ring-dot"></div>185 <div class="ring-center">186 <div class="big-zero">0</div>187 <div class="steps">3,009</div>188 </div>189 </div>190 </div>191 192 <div class="labels">193 <div class="label">194 <svg viewBox="0 0 24 24"><path fill="#48d69f" d="M12.1 21.35l-1.1-1.02C5.14 15.24 2 12.36 2 8.99 2 6.42 4.02 4.4 6.59 4.4c1.4 0 2.74.65 3.51 1.67.77-1.02 2.11-1.67 3.51-1.67C16.98 4.4 19 6.42 19 8.99c0 3.37-3.14 6.25-8.9 11.34z"/></svg>195 <span class="green">Heart Pts</span>196 </div>197 <div class="label">198 <svg viewBox="0 0 24 24"><path fill="#aecdff" d="M12 2c1.3 0 2 .8 2 2 0 .8-.7 1.5-1.6 1.9l2.6 4.6c.4.8.2 1.8-.6 2.2-.8.4-1.8.2-2.2-.6l-2.6-4.6C8.5 8.1 8 8 7.5 8 6.1 8 5 6.9 5 5.5S6.1 3 7.5 3c.6 0 1.1.2 1.5.5C9.2 2.5 10.5 2 12 2zm-2.1 12.1l3.5 6.2c.4.8.1 1.8-.7 2.2-.8.4-1.8.1-2.2-.7l-3.5-6.2c-.4-.8-.1-1.8.7-2.2.8-.4 1.8-.1 2.2.7z"/></svg>199 <span class="blue">Steps</span>200 </div>201 </div>202 203 <div class="stats">204 <div class="stat">205 <div class="num">1,322</div>206 <div class="sub">Cal</div>207 </div>208 <div class="stat">209 <div class="num">0</div>210 <div class="sub">mi</div>211 </div>212 <div class="stat">213 <div class="num">31</div>214 <div class="sub">Move Min</div>215 </div>216 </div>217 </div>218 219 <!-- Card: Daily goals -->220 <div class="card" style="top:0;">221 <div class="card-title">222 <span>Your daily goals</span>223 <span class="chev"></span>224 </div>225 <div class="subtle">Last 7 days</div>226 227 <div class="goals-row">228 <div>229 <div class="achieved">0/7</div>230 <div class="achieved small">Achieved</div>231 </div>232 233 <div>234 <div class="mini-days">235 <div>236 <div class="mini"></div><div class="day">T</div>237 </div>238 <div>239 <div class="mini"></div><div class="day">W</div>240 </div>241 <div>242 <div class="mini"></div><div class="day">T</div>243 </div>244 <div>245 <div class="mini"></div><div class="day">F</div>246 </div>247 <div>248 <div class="mini"></div><div class="day">S</div>249 </div>250 <div>251 <div class="mini"></div><div class="day">S</div>252 </div>253 <div>254 <div class="mini" style="background: conic-gradient(#8ea6ff 20deg, #203039 0);"></div>255 <div class="day">M</div>256 </div>257 </div>258 </div>259 </div>260 </div>261 262 <!-- Card: Weekly target -->263 <div class="card">264 <div class="card-title">265 <span>Your weekly target</span>266 <span class="chev"></span>267 </div>268 <div class="subtle">Nov 12 – 18</div>269 270 <div class="green-text" style="margin-top:24px;">0 of 150</div>271 <div class="progress">272 <div class="bar"></div>273 </div>274 275 <div class="paragraph">276 Scoring 150 Heart Points a week can help you live longer, sleep better, and boost your mood277 </div>278 <div class="heart-badge">❤</div>279 </div>280 281 <!-- Floating Action Button -->282 <div class="fab"><div class="plus"></div></div>283 284 <!-- Bottom Navigation -->285 <div class="bottom-nav">286 <div class="nav-item active">287 <div class="ico">288 <svg viewBox="0 0 24 24"><path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/></svg>289 </div>290 <div>Home</div>291 </div>292 <div class="nav-item">293 <div class="ico">294 <svg viewBox="0 0 24 24"><path d="M3 13h8V3H3v10zm0 8h8v-6H3v6zm10 0h8V11h-8v10zm0-18v6h8V3h-8z"/></svg>295 </div>296 <div>Journal</div>297 </div>298 <div class="nav-item">299 <div class="ico">300 <svg viewBox="0 0 24 24"><path d="M3 6h18v2H3V6zm0 5h18v2H3v-2zm0 5h18v2H3v-2z"/></svg>301 </div>302 <div>Menu</div>303 </div>304 <div class="nav-item">305 <div class="ico">306 <svg viewBox="0 0 24 24"><path d="M12 12c2.7 0 5-2.3 5-5s-2.3-5-5-5-5 2.3-5 5 2.3 5 5 5zm0 2c-4 0-8 2-8 6v2h16v-2c0-4-4-6-8-6z"/></svg>307 </div>308 <div>Profile</div>309 </div>310 </div>311 312</div>313</body>314</html>