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: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; }9 #render-target {10 width: 1080px;11 height: 2400px;12 position: relative;13 overflow: hidden;14 background: #1C1F23;15 color: #E7EAF0;16 }17 18 /* Status bar */19 .status-bar {20 position: absolute;21 left: 0; top: 0;22 width: 100%;23 height: 120px;24 padding: 0 40px;25 box-sizing: border-box;26 display: flex;27 align-items: center;28 justify-content: space-between;29 color: #E7EAF0;30 font-size: 40px;31 letter-spacing: 0.5px;32 }33 .sb-left, .sb-right { display: flex; align-items: center; gap: 28px; }34 .sb-icon { width: 40px; height: 40px; opacity: 0.85; }35 .dot { width: 16px; height: 16px; background: #BFC6D2; border-radius: 50%; opacity: 0.6; }36 37 /* Top actions */38 .top-actions {39 position: absolute;40 top: 160px;41 right: 40px;42 display: flex;43 align-items: center;44 gap: 24px;45 }46 .circle-btn {47 width: 96px; height: 96px;48 border-radius: 50%;49 border: 3px solid #E7EAF0;50 display: flex; align-items: center; justify-content: center;51 background: transparent;52 opacity: 0.9;53 }54 .avatar {55 width: 96px; height: 96px;56 border-radius: 50%;57 background: #7B6E67;58 display: flex; align-items: center; justify-content: center;59 font-weight: 700; font-size: 48px; color: #E7EAF0;60 }61 62 /* Main ring */63 .ring {64 width: 520px; height: 520px;65 margin: 260px auto 20px;66 position: relative;67 }68 .ring .outer {69 position: absolute; inset: 0;70 border-radius: 50%;71 box-shadow: inset 0 0 0 22px rgba(35, 78, 72, 0.6);72 }73 .ring .mid {74 position: absolute; left: 40px; top: 40px; right: 40px; bottom: 40px;75 border-radius: 50%;76 box-shadow: inset 0 0 0 22px rgba(67, 94, 116, 0.5);77 }78 .ring .inner {79 position: absolute; left: 95px; top: 95px; right: 95px; bottom: 95px;80 border-radius: 50%;81 background: #1C1F23;82 box-shadow: inset 0 0 0 14px rgba(55, 71, 84, 0.6);83 display: flex; flex-direction: column; align-items: center; justify-content: center;84 }85 .ring .progress-dot {86 position: absolute;87 top: -10px; left: 50%;88 transform: translateX(-50%);89 width: 30px; height: 30px; background: #57D6AD; border-radius: 50%;90 }91 .ring .progress-arc {92 position: absolute;93 top: 54px; right: 120px;94 width: 160px; height: 34px; border-radius: 20px;95 background: #7DA6FF;96 opacity: 0.9;97 }98 .ring .big {99 font-size: 120px; font-weight: 700; color: #57D6AD; line-height: 1;100 }101 .ring .sub {102 font-size: 70px; font-weight: 700; color: #7DA6FF; margin-top: 8px;103 }104 105 /* Stat labels below ring */106 .label-row {107 display: flex; justify-content: center; gap: 120px; align-items: center;108 margin-top: 40px;109 font-size: 46px; font-weight: 600;110 }111 .label-row .item { display: flex; align-items: center; gap: 20px; color: #DDE3EA; }112 .label-row .item .heart { color: #57D6AD; }113 .label-row .item .steps { color: #7DA6FF; }114 115 /* Three metrics */116 .metrics {117 display: flex; justify-content: center; gap: 180px;118 margin-top: 50px;119 text-align: center;120 }121 .metrics .col { min-width: 160px; }122 .metrics .num { font-size: 70px; font-weight: 700; color: #DDE3EA; }123 .metrics .num.blue { color: #7DA6FF; }124 .metrics .num.green { color: #57D6AD; }125 .metrics .lbl { font-size: 40px; color: #AAB2BE; margin-top: 8px; }126 127 /* Cards */128 .card {129 margin: 60px 40px 0 40px;130 background: #2A2E33;131 border-radius: 36px;132 padding: 50px;133 position: relative;134 box-shadow: 0 4px 12px rgba(0,0,0,0.35);135 }136 .card-title {137 font-size: 58px; font-weight: 700; color: #E7EAF0;138 padding-right: 120px;139 }140 .card .close {141 position: absolute; top: 40px; right: 40px;142 width: 56px; height: 56px; border-radius: 50%;143 display: flex; align-items: center; justify-content: center;144 color: #C7CCD7; opacity: 0.9;145 }146 .card p { font-size: 40px; color: #AAB2BE; line-height: 1.5; margin: 26px 0 34px 0; }147 .card .cta { color: #8FB3FF; font-size: 44px; font-weight: 600; }148 .card .img-right {149 position: absolute; right: 40px; bottom: 40px;150 width: 180px; height: 140px;151 background: #E0E0E0; border: 1px solid #BDBDBD;152 display: flex; align-items: center; justify-content: center; color: #757575; border-radius: 16px;153 }154 155 .card.small .subtitle { font-size: 40px; color: #AAB2BE; margin-top: 12px; }156 .card.small .chevron {157 position: absolute; right: 36px; top: 44px; width: 64px; height: 64px; display: flex; align-items: center; justify-content: center; color: #BFC6D2;158 }159 .achieved { font-size: 54px; color: #7DA6FF; font-weight: 700; margin-top: 20px; }160 .rings-week {161 display: flex; align-items: center; gap: 22px; margin-top: 24px;162 }163 .mini-ring {164 width: 82px; height: 82px; border-radius: 50%;165 position: relative;166 box-shadow: inset 0 0 0 10px rgba(55, 71, 84, 0.7);167 }168 .mini-ring::before {169 content: ""; position: absolute; top: -6px; left: 50%; transform: translateX(-50%);170 width: 14px; height: 14px; background: #57D6AD; border-radius: 50%;171 }172 .day {173 text-align: center; font-size: 34px; color: #AAB2BE; margin-top: 8px;174 }175 .mini-wrap { display: flex; flex-direction: column; align-items: center; }176 177 /* Floating action button */178 .fab {179 position: absolute; right: 80px; bottom: 420px;180 width: 132px; height: 132px; border-radius: 50%;181 background: #3A3D42; box-shadow: 0 10px 24px rgba(0,0,0,0.5);182 display: flex; align-items: center; justify-content: center;183 }184 .plus {185 position: relative; width: 72px; height: 72px;186 }187 .plus span {188 position: absolute; left: 50%; top: 50%;189 transform: translate(-50%, -50%);190 border-radius: 8px;191 }192 .plus .v { width: 16px; height: 66px; background: #34A853; }193 .plus .h { width: 66px; height: 16px; background: #4285F4; }194 .plus::before { content: ""; position: absolute; left: 4px; top: 4px; width: 16px; height: 16px; background: #FBBC05; border-radius: 4px; }195 .plus::after { content: ""; position: absolute; right: 4px; bottom: 4px; width: 16px; height: 16px; background: #EA4335; border-radius: 4px; }196 197 /* Bottom navigation */198 .bottom-bar {199 position: absolute; left: 0; bottom: 0; width: 100%; height: 220px;200 background: rgba(42,46,51,0.96);201 display: flex; align-items: center; padding: 0 40px; box-sizing: border-box;202 gap: 100px;203 }204 .nav-item { color: #C7CCD7; display: flex; flex-direction: column; align-items: center; gap: 16px; }205 .nav-item .icon { width: 80px; height: 80px; }206 .nav-item.active { color: #8FB3FF; }207 .nav-item.active .label { font-size: 44px; font-weight: 700; }208 .nav-item .label { font-size: 36px; }209 210 /* Utility */211 .muted { color: #AAB2BE; }212</style>213</head>214<body>215<div id="render-target">216 217 <!-- Status Bar -->218 <div class="status-bar">219 <div class="sb-left">220 <div>3:21</div>221 <svg class="sb-icon" viewBox="0 0 24 24"><rect x="3" y="7" width="18" height="10" rx="2" fill="#E7EAF0"/></svg>222 <svg class="sb-icon" viewBox="0 0 24 24"><path d="M3 5h18v14H3z" fill="none"/><path d="M4 6h16v12H4z" stroke="#E7EAF0" stroke-width="2"/></svg>223 <div class="sb-icon" style="width:auto;">83°</div>224 <svg class="sb-icon" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" stroke="#E7EAF0" stroke-width="2" fill="none"/><path d="M12 6v6l4 2" stroke="#E7EAF0" stroke-width="2" fill="none"/></svg>225 <div class="dot"></div>226 </div>227 <div class="sb-right">228 <svg class="sb-icon" viewBox="0 0 24 24"><path d="M2 18h20L12 3 2 18z" fill="#E7EAF0"/></svg>229 <svg class="sb-icon" viewBox="0 0 24 24"><rect x="6" y="3" width="12" height="18" rx="2" fill="none" stroke="#E7EAF0" stroke-width="2"/><rect x="10" y="5" width="4" height="3" fill="#E7EAF0"/></svg>230 </div>231 </div>232 233 <!-- Top actions -->234 <div class="top-actions">235 <div class="circle-btn">236 <svg width="46" height="46" viewBox="0 0 24 24">237 <circle cx="12" cy="12" r="9" stroke="#E7EAF0" stroke-width="2" fill="none"/>238 <circle cx="12" cy="8" r="1.5" fill="#E7EAF0"/>239 <path d="M11 11h2v7h-2z" fill="#E7EAF0"/>240 </svg>241 </div>242 <div class="avatar">T</div>243 </div>244 245 <!-- Progress Ring -->246 <div class="ring">247 <div class="outer"></div>248 <div class="mid"></div>249 <div class="inner">250 <div class="big">0</div>251 <div class="sub">349</div>252 </div>253 <div class="progress-dot"></div>254 <div class="progress-arc"></div>255 </div>256 257 <!-- Labels -->258 <div class="label-row">259 <div class="item">260 <svg width="50" height="50" viewBox="0 0 24 24" class="heart">261 <path d="M12 21s-7-5.3-9-8.6C1 9.2 3.2 6.5 6 6.5c1.6 0 3 .9 4 2.3 1-1.4 2.4-2.3 4-2.3 2.8 0 5 2.7 3 5.9C19 15.7 12 21 12 21z" fill="#57D6AD"/>262 </svg>263 <div>Heart Pts</div>264 </div>265 <div class="item">266 <svg width="50" height="50" viewBox="0 0 24 24" class="steps">267 <path d="M7 20c2 0 3-1 3-3s-2-3-3-3-3 1-3 3 1 3 3 3zm9-8c2 0 3-1 3-3s-2-3-3-3-3 1-3 3 1 3 3 3z" fill="#7DA6FF"/>268 <path d="M9 15l6-6" stroke="#7DA6FF" stroke-width="2"/>269 </svg>270 <div>Steps</div>271 </div>272 </div>273 274 <!-- Metrics -->275 <div class="metrics">276 <div class="col">277 <div class="num">36</div>278 <div class="lbl">Cal</div>279 </div>280 <div class="col">281 <div class="num blue">0</div>282 <div class="lbl">mi</div>283 </div>284 <div class="col">285 <div class="num green">3</div>286 <div class="lbl">Move Min</div>287 </div>288 </div>289 290 <!-- Card: Health Connect -->291 <div class="card">292 <div class="card-title">Sync Fit with Health Connect</div>293 <div class="close">294 <svg width="44" height="44" viewBox="0 0 24 24">295 <path d="M6 6l12 12M18 6L6 18" stroke="#C7CCD7" stroke-width="2" stroke-linecap="round"/>296 </svg>297 </div>298 <p>Share stats between Fit and your other apps, like your calories, heart rate, and body measurements</p>299 <div class="cta">Get started</div>300 <div class="img-right">[IMG: Health Connect Logo]</div>301 </div>302 303 <!-- Card: Your daily goals -->304 <div class="card small">305 <div class="card-title">Your daily goals</div>306 <div class="chevron">307 <svg width="52" height="52" viewBox="0 0 24 24">308 <path d="M9 6l6 6-6 6" stroke="#BFC6D2" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>309 </svg>310 </div>311 <div class="subtitle">Last 7 days</div>312 313 <div class="achieved">0/7</div>314 <div class="muted" style="font-size: 40px;">Achieved</div>315 316 <div class="rings-week">317 <div class="mini-wrap">318 <div class="mini-ring"></div>319 <div class="day">T</div>320 </div>321 <div class="mini-wrap">322 <div class="mini-ring"></div>323 <div class="day">F</div>324 </div>325 <div class="mini-wrap">326 <div class="mini-ring"></div>327 <div class="day">S</div>328 </div>329 <div class="mini-wrap">330 <div class="mini-ring"></div>331 <div class="day">S</div>332 </div>333 <div class="mini-wrap">334 <div class="mini-ring"></div>335 <div class="day">M</div>336 </div>337 <div class="mini-wrap">338 <div class="mini-ring"></div>339 <div class="day">T</div>340 </div>341 <div class="mini-wrap">342 <div class="mini-ring"></div>343 <div class="day">W</div>344 </div>345 </div>346 </div>347 348 <!-- Floating Action Button -->349 <div class="fab">350 <div class="plus">351 <span class="v"></span>352 <span class="h"></span>353 </div>354 </div>355 356 <!-- Bottom Navigation -->357 <div class="bottom-bar">358 <div class="nav-item active" style="margin-left: 10px;">359 <svg class="icon" viewBox="0 0 24 24">360 <circle cx="12" cy="12" r="9" stroke="#8FB3FF" stroke-width="2" fill="none"/>361 <circle cx="12" cy="12" r="3" fill="#8FB3FF"/>362 </svg>363 <div class="label">Home</div>364 </div>365 <div class="nav-item">366 <svg class="icon" viewBox="0 0 24 24">367 <rect x="5" y="4" width="14" height="16" rx="2" stroke="#C7CCD7" stroke-width="2" fill="none"/>368 <rect x="7" y="6" width="10" height="3" fill="#C7CCD7"/>369 </svg>370 </div>371 <div class="nav-item">372 <svg class="icon" viewBox="0 0 24 24">373 <path d="M5 7h14M5 12h14M5 17h14" stroke="#C7CCD7" stroke-width="2" stroke-linecap="round"/>374 </svg>375 </div>376 <div class="nav-item">377 <svg class="icon" viewBox="0 0 24 24">378 <circle cx="12" cy="8" r="3.5" stroke="#C7CCD7" stroke-width="2" fill="none"/>379 <path d="M5 20c0-4 3-6 7-6s7 2 7 6" stroke="#C7CCD7" stroke-width="2" fill="none"/>380 </svg>381 </div>382 </div>383 384</div>385</body>386</html>