GD-ML/AndroidCode
13.4k
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>Fitness Dashboard Mock</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; color: #E6EAF0; }9 #render-target {10 width: 1080px; height: 2400px;11 position: relative; overflow: hidden;12 background: #171A1F;13 }14 15 /* Top utility/status spacing */16 .safe-top { height: 110px; }17 .top-actions {18 position: absolute; top: 120px; right: 36px; display: flex; align-items: center; gap: 28px;19 }20 .icon-btn {21 width: 64px; height: 64px; border-radius: 32px; border: 2px solid #55616E; display: flex; align-items: center; justify-content: center; color: #C7D1DD;22 background: rgba(255,255,255,0.02);23 }24 .avatar {25 width: 82px; height: 82px; border-radius: 50%;26 background: #8E6E60; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 40px; color: #F2EAE6;27 box-shadow: 0 6px 14px rgba(0,0,0,0.35);28 }29 30 /* Ring area */31 .hero { padding-top: 180px; text-align: center; }32 .rings { width: 560px; height: 560px; margin: 0 auto; position: relative; }33 .ring-outer, .ring-inner, .ring-hole { position: absolute; inset: 0; border-radius: 50%; }34 .ring-outer {35 /* thin outer progress (teal) */36 background: conic-gradient(#1de9b6 0 50deg, #0E2020 50deg 360deg);37 filter: drop-shadow(0 16px 30px rgba(0,0,0,0.35));38 }39 .ring-outer .cutout {40 position: absolute; inset: 18px; border-radius: 50%; background: #0E161B;41 box-shadow: inset 0 0 0 18px #142126;42 }43 .ring-inner {44 inset: 36px;45 background: conic-gradient(#84A6FF 0 300deg, #22303A 300deg 360deg);46 }47 .ring-hole { inset: 126px; background: #0E161B; box-shadow: inset 0 0 0 2px rgba(132,166,255,0.15); }48 .ring-center {49 position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); text-align: center;50 }51 .ring-center .big { font-size: 140px; font-weight: 900; color: #13D1AE; line-height: 1; }52 .ring-center .sub { font-size: 64px; font-weight: 700; color: #9CB4FF; opacity: 0.95; }53 54 /* Toggle row under ring */55 .toggle-row { margin-top: 36px; display: flex; justify-content: center; gap: 60px; align-items: center; }56 .toggle { display: inline-flex; align-items: center; gap: 14px; font-size: 44px; color: #D9E2EC; }57 .toggle .label { opacity: 0.9; }58 .icon-heart svg { width: 46px; height: 46px; fill: #16D3AF; }59 .icon-steps svg { width: 46px; height: 46px; fill: #89A8FF; }60 61 /* Stats row */62 .stats { margin: 46px 0 24px; display: flex; justify-content: center; gap: 160px; }63 .stat { text-align: center; }64 .stat .num { font-size: 72px; font-weight: 800; }65 .num.blue { color: #9CB4FF; }66 .num.green { color: #16D3AF; }67 .stat .label { font-size: 36px; color: #AEB8C5; margin-top: 6px; }68 69 /* Cards */70 .cards { padding: 0 30px; display: flex; flex-direction: column; gap: 36px; margin-top: 36px; }71 .card {72 background: #23282F; border-radius: 28px; padding: 34px; color: #E5ECF4;73 box-shadow: 0 10px 24px rgba(0,0,0,0.28), inset 0 0 0 1px rgba(255,255,255,0.04);74 }75 .card-header { display: flex; align-items: center; justify-content: space-between; }76 .card-title { font-size: 54px; font-weight: 800; }77 .chev { width: 24px; height: 24px; border-right: 6px solid #8EA0B3; border-top: 6px solid #8EA0B3; transform: rotate(45deg); margin-right: 8px; }78 .muted { color: #95A1AF; font-size: 36px; margin-top: 10px; }79 .progress-days { margin-top: 40px; display: flex; align-items: center; gap: 20px; justify-content: flex-end; }80 .day { width: 70px; height: 70px; border-radius: 50%; background: #1A2229; box-shadow: inset 0 0 0 4px #24343D; position: relative; }81 .day::after { content: ""; position: absolute; top: 10px; left: 10px; right: 10px; bottom: 10px; border-radius: 50%; box-shadow: inset 0 0 0 6px #113B39; }82 .day.active { box-shadow: inset 0 0 0 4px #84A6FF; }83 .day-row { display: flex; justify-content: flex-end; gap: 38px; margin-top: 16px; padding-right: 6px; color: #8EA0B3; font-size: 32px; letter-spacing: 4px; }84 .achieved { margin-top: 24px; font-size: 46px; font-weight: 800; color: #87A3FF; }85 .achieved .small { font-size: 42px; font-weight: 600; color: #8EA0B3; }86 87 .weekly .row { display: flex; align-items: center; justify-content: space-between; }88 .weekly .count { font-size: 58px; font-weight: 900; color: #15CBA6; }89 .bar {90 height: 16px; background: #1A2E2C; border-radius: 10px; overflow: hidden; margin: 26px 0 24px;91 }92 .bar .fill { width: 12%; height: 100%; background: #1CA892; }93 .desc { color: #B7C2CE; font-size: 40px; line-height: 1.4; }94 .badge {95 width: 120px; height: 120px; border-radius: 20px; background: #E0E0E0; border: 1px solid #BDBDBD;96 display: flex; align-items: center; justify-content: center; color: #757575; font-size: 28px;97 position: absolute; right: 36px; bottom: 36px;98 }99 100 /* FAB */101 .fab {102 position: absolute; right: 44px; bottom: 340px; width: 132px; height: 132px; background: #3A3F46; border-radius: 50%;103 box-shadow: 0 18px 30px rgba(0,0,0,0.38);104 display: flex; align-items: center; justify-content: center;105 }106 .fab .plus {107 position: relative; width: 72px; height: 72px;108 }109 .fab .plus::before, .fab .plus::after {110 content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);111 border-radius: 6px;112 }113 .fab .plus::before { width: 72px; height: 14px; background: linear-gradient(90deg, #1A73E8 0 50%, #EA4335 50% 100%); }114 .fab .plus::after { width: 14px; height: 72px; background: linear-gradient(180deg, #34A853 0 50%, #FBBC05 50% 100%); }115 116 /* Bottom nav */117 .bottom-bar {118 position: absolute; left: 0; right: 0; bottom: 0; height: 190px; background: rgba(19,22,27,0.85);119 border-top: 1px solid rgba(255,255,255,0.06); display: flex; justify-content: space-around; align-items: center;120 backdrop-filter: blur(6px);121 }122 .nav-item { display: flex; flex-direction: column; align-items: center; gap: 12px; color: #9AA6B2; font-size: 36px; }123 .nav-item.active { color: #86A4FF; }124 .nav-icon { width: 60px; height: 60px; }125 .gesture-pill {126 position: absolute; left: 50%; transform: translateX(-50%); bottom: 24px;127 width: 220px; height: 12px; border-radius: 6px; background: #DADDE1; opacity: 0.85;128 }129</style>130</head>131<body>132<div id="render-target">133 134 <div class="safe-top"></div>135 136 <div class="top-actions">137 <div class="icon-btn" aria-label="Info">138 <svg viewBox="0 0 24 24" width="36" height="36" fill="#C7D1DD" aria-hidden="true">139 <circle cx="12" cy="12" r="10" fill="none" stroke="#C7D1DD" stroke-width="2"></circle>140 <circle cx="12" cy="8" r="1.5" fill="#C7D1DD"></circle>141 <rect x="11" y="11" width="2" height="8" fill="#C7D1DD" rx="1"></rect>142 </svg>143 </div>144 <div class="avatar">C</div>145 </div>146 147 <section class="hero">148 <div class="rings">149 <div class="ring-outer">150 <div class="cutout"></div>151 </div>152 <div class="ring-inner"></div>153 <div class="ring-hole"></div>154 155 <div class="ring-center">156 <div class="big">2</div>157 <div class="sub">5,100</div>158 </div>159 </div>160 161 <div class="toggle-row">162 <div class="toggle">163 <span class="icon-heart">164 <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 6 4 4 6.5 4c1.74 0 3.41 1 4.5 2.5C12.09 5 13.76 4 15.5 4 18 4 20 6 20 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/></svg>165 </span>166 <span class="label">Heart Pts</span>167 </div>168 <div class="toggle">169 <span class="icon-steps">170 <svg viewBox="0 0 24 24" aria-hidden="true">171 <circle cx="16" cy="5" r="2.2"></circle>172 <path d="M9 21l2-6 2.8 2.6L17 12l2 1-3 8H9z"></path>173 <path d="M6 14l3-3 2 1-3 3H6z"></path>174 </svg>175 </span>176 <span class="label">Steps</span>177 </div>178 </div>179 180 <div class="stats">181 <div class="stat">182 <div class="num blue">925</div>183 <div class="label">Cal</div>184 </div>185 <div class="stat">186 <div class="num green">0</div>187 <div class="label">mi</div>188 </div>189 <div class="stat">190 <div class="num blue">31</div>191 <div class="label">Move Min</div>192 </div>193 </div>194 </section>195 196 <div class="cards">197 <!-- Daily goals card -->198 <div class="card">199 <div class="card-header">200 <div>201 <div class="card-title">Your daily goals</div>202 <div class="muted">Last 7 days</div>203 </div>204 <div class="chev"></div>205 </div>206 207 <div class="achieved"><span class="num blue">0</span><span class="small">/7</span></div>208 <div class="muted" style="margin-top: 6px;">Achieved</div>209 210 <div class="progress-days">211 <div class="day"></div>212 <div class="day"></div>213 <div class="day"></div>214 <div class="day"></div>215 <div class="day"></div>216 <div class="day"></div>217 <div class="day active"></div>218 </div>219 <div class="day-row">S S M T W T F</div>220 </div>221 222 <!-- Weekly target card -->223 <div class="card weekly" style="position: relative;">224 <div class="card-header">225 <div>226 <div class="card-title">Your weekly target</div>227 <div class="muted">Jul 23 – 29</div>228 </div>229 <div class="chev"></div>230 </div>231 232 <div class="row" style="margin-top: 20px;">233 <div class="count">2 of 150</div>234 </div>235 <div class="bar"><div class="fill"></div></div>236 <div class="desc">Scoring 150 Heart Points a week can help you live longer, sleep better, and boost your mood</div>237 238 <div class="badge">[IMG: Heart Org Badge]</div>239 </div>240 </div>241 242 <!-- Floating Action Button -->243 <div class="fab" aria-label="Add">244 <div class="plus"></div>245 </div>246 247 <!-- Bottom navigation -->248 <nav class="bottom-bar">249 <div class="nav-item active">250 <svg class="nav-icon" viewBox="0 0 24 24" fill="#86A4FF"><path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/></svg>251 <div>Home</div>252 </div>253 <div class="nav-item">254 <svg class="nav-icon" viewBox="0 0 24 24" fill="#9AA6B2"><path d="M8 3h8v4H8zM5 8h14v13H5zM7 10v9h10v-9z"/></svg>255 <div>Journal</div>256 </div>257 <div class="nav-item">258 <svg class="nav-icon" viewBox="0 0 24 24" fill="#9AA6B2"><path d="M4 6h16v2H4zm0 5h16v2H4zm0 5h16v2H4z"/></svg>259 <div>Browse</div>260 </div>261 <div class="nav-item">262 <svg class="nav-icon" viewBox="0 0 24 24" fill="#9AA6B2"><path d="M12 12a5 5 0 1 0-0.001-10.001A5 5 0 0 0 12 12zm0 2c-5 0-9 2.5-9 5.5V22h18v-2.5C21 16.5 17 14 12 14z"/></svg>263 <div>Profile</div>264 </div>265 <div class="gesture-pill"></div>266 </nav>267 268</div>269</body>270</html>