GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Fitbit UI Mock</title>6<style>7 body { margin: 0; padding: 0; background: transparent; }8 #render-target {9 width: 1080px;10 height: 2400px;11 position: relative;12 overflow: hidden;13 background: #F2F4F3;14 border-radius: 36px;15 box-shadow: 0 6px 24px rgba(0,0,0,0.08);16 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;17 color: #222;18 }19 20 /* Top status bar */21 .status-bar {22 height: 90px;23 padding: 0 36px;24 display: flex;25 align-items: center;26 justify-content: space-between;27 color: #616161;28 font-size: 36px;29 }30 .status-icons {31 display: inline-flex;32 gap: 20px;33 align-items: center;34 }35 .dot { width: 10px; height: 10px; background:#757575; border-radius:50%; display:inline-block; }36 37 /* Header */38 .app-header {39 height: 160px;40 padding: 0 36px;41 display: grid;42 grid-template-columns: 1fr 1fr 1fr;43 align-items: center;44 }45 .header-left, .header-center, .header-right { display: flex; align-items: center; gap: 24px; }46 .header-center { justify-content: center; }47 .header-right { justify-content: flex-end; }48 .brand {49 font-size: 64px;50 font-weight: 600;51 letter-spacing: 1px;52 color: #1F2A26;53 }54 .avatar {55 width: 86px; height: 86px; border-radius: 50%;56 background: #5A3B33; color: #fff;57 display: flex; align-items: center; justify-content: center;58 font-weight: 700; font-size: 44px;59 }60 61 /* Subheader */62 .sub-header {63 height: 120px;64 padding: 0 36px;65 display: grid;66 grid-template-columns: 1fr auto 1fr;67 align-items: center;68 color: #2E3A35;69 }70 .sub-header .title { font-size: 48px; font-weight: 600; text-align: center; }71 .sub-header .left, .sub-header .right { display:flex; align-items:center; }72 .icon-btn { width: 72px; height: 72px; border-radius: 18px; display:flex; align-items:center; justify-content:center; }73 74 /* Cards */75 .content { padding: 0 36px; }76 .card {77 background: #FFFFFF;78 border-radius: 34px;79 padding: 36px;80 margin-bottom: 24px;81 box-shadow: 0 1px 0 rgba(0,0,0,0.06);82 }83 .card-header {84 font-size: 40px; font-weight: 600; color: #2D3331; margin-bottom: 20px;85 }86 .muted { color:#7A8A82; font-size: 34px; }87 .row { display:flex; align-items:center; justify-content:space-between; }88 .big-number { font-size: 120px; font-weight: 600; line-height: 1; }89 .unit { font-size: 52px; color:#424D48; margin-left: 12px; }90 91 /* Exercise days layout */92 .exercise-grid { display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: center; }93 .days { display:flex; gap: 16px; align-items: center; }94 .pill {95 width: 92px; height: 140px; border-radius: 46px;96 background: #DCE8E5; display:flex; align-items:center; justify-content:center;97 }98 .pill.active { background:#0F6D61; color:#fff; }99 .day-labels { display:flex; gap: 32px; justify-content:flex-end; margin-top: 14px; color:#47534F; }100 .day-labels span { width:92px; text-align:center; font-size: 32px; }101 .day-labels .today { font-weight: 700; color:#1F2A26; }102 103 /* Walk item */104 .walk-row { display:flex; gap:24px; align-items:center; }105 .bullet { margin: 0 10px; color:#90A39B; }106 107 /* Progress ring */108 .ring {109 width: 180px; height: 180px;110 position: relative;111 }112 .ring svg { position:absolute; top:0; left:0; }113 .ring .center-icon {114 position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);115 }116 117 /* Floating add button */118 .fab {119 position: absolute;120 right: 64px;121 bottom: 480px;122 width: 120px; height: 120px;123 border-radius: 28px;124 background: #CFE5DE;125 box-shadow: 0 8px 16px rgba(0,0,0,0.15);126 display:flex; align-items:center; justify-content:center;127 }128 .fab svg { width: 48px; height: 48px; }129 130 /* Bottom nav */131 .bottom-nav {132 position: absolute; left: 0; right: 0; bottom: 90px;133 height: 180px; background:#FFFFFF;134 display:flex; justify-content:space-around; align-items:center;135 box-shadow: 0 -2px 12px rgba(0,0,0,0.06);136 }137 .nav-item { display:flex; flex-direction:column; align-items:center; gap:18px; color:#495652; }138 .nav-item .label { font-size: 34px; }139 .nav-item.active .label { font-weight: 700; color:#1F2A26; }140 .nav-icon-wrap {141 width: 160px; height: 92px; border-radius: 46px; background:#D6E7E1;142 display:flex; align-items:center; justify-content:center;143 }144 .nav-item.active .nav-icon-wrap { background:#CFE5DE; }145 146 .gesture-bar {147 position: absolute; left:50%; transform:translateX(-50%);148 bottom: 24px; width: 360px; height: 14px; background:#C4C9C7; border-radius: 12px;149 }150 151 /* Helper icon colors */152 .teal { color:#0F6D61; }153 .teal-stroke { stroke:#0F6D61; }154 .light-stroke { stroke:#D8E6E2; }155</style>156</head>157<body>158<div id="render-target">159 160 <!-- Top status bar -->161 <div class="status-bar">162 <div>8:26</div>163 <div class="status-icons">164 <!-- simple status glyphs -->165 <svg width="40" height="40"><circle cx="20" cy="20" r="12" fill="none" stroke="#757575" stroke-width="4"/><path d="M20 8v24" stroke="#757575" stroke-width="4"/></svg>166 <svg width="40" height="40"><rect x="8" y="10" width="24" height="20" rx="4" fill="none" stroke="#757575" stroke-width="4"/><path d="M20 10v-4" stroke="#757575" stroke-width="4"/></svg>167 <svg width="40" height="40"><path d="M8 20h24" stroke="#757575" stroke-width="4"/><circle cx="20" cy="20" r="12" fill="none" stroke="#757575" stroke-width="4"/></svg>168 <svg width="40" height="40"><circle cx="20" cy="20" r="3" fill="#757575"/></svg>169 <svg width="40" height="40"><path d="M6 26l28-12" stroke="#757575" stroke-width="4" stroke-linecap="round"/></svg>170 <svg width="40" height="40"><path d="M12 30h16" stroke="#757575" stroke-width="4" stroke-linecap="round"/><path d="M16 10h8l2 10h-12z" fill="none" stroke="#757575" stroke-width="4"/></svg>171 <div style="font-size:32px;">90%</div>172 </div>173 </div>174 175 <!-- Header -->176 <div class="app-header">177 <div class="header-left">178 <!-- device icon -->179 <div class="icon-btn">180 <svg width="56" height="56" viewBox="0 0 56 56">181 <rect x="10" y="12" width="36" height="32" rx="6" fill="none" stroke="#4A6058" stroke-width="3"/>182 <circle cx="28" cy="28" r="5" fill="none" stroke="#4A6058" stroke-width="3"/>183 </svg>184 </div>185 </div>186 <div class="header-center">187 <div class="brand">fitbit</div>188 </div>189 <div class="header-right">190 <!-- chat icon -->191 <div class="icon-btn">192 <svg width="56" height="56" viewBox="0 0 56 56">193 <path d="M10 12h36v22H28l-8 8v-8H10z" fill="none" stroke="#4A6058" stroke-width="3" stroke-linejoin="round"/>194 </svg>195 </div>196 <div class="avatar">F</div>197 </div>198 </div>199 200 <!-- Subheader -->201 <div class="sub-header">202 <div class="left">203 <div class="icon-btn">204 <svg width="56" height="56" viewBox="0 0 56 56">205 <path d="M34 12L18 28l16 16" fill="none" stroke="#4A6058" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>206 </svg>207 </div>208 </div>209 <div class="title">Today</div>210 <div class="right" style="justify-content:flex-end;">211 <div class="icon-btn">212 <svg width="56" height="56" viewBox="0 0 56 56">213 <path d="M12 40l8-2 20-20-6-6-20 20-2 8z" fill="none" stroke="#4A6058" stroke-width="3" stroke-linejoin="round"/>214 </svg>215 </div>216 </div>217 </div>218 219 <div class="content">220 221 <!-- Exercise days card -->222 <div class="card">223 <div class="card-header">Exercise days</div>224 <div class="exercise-grid">225 <div>226 <div style="font-size:120px; font-weight:600; line-height:1;">2 <span style="font-size:72px; font-weight:500;">of 5</span></div>227 <div class="muted">This week</div>228 </div>229 <div>230 <div class="days">231 <div class="pill active">232 <svg width="48" height="48" viewBox="0 0 48 48">233 <path d="M10 24l8 8 20-20" fill="none" stroke="#fff" stroke-width="5" stroke-linecap="round" stroke-linejoin="round"/>234 </svg>235 </div>236 <div class="pill active">237 <svg width="48" height="48" viewBox="0 0 48 48">238 <path d="M10 24l8 8 20-20" fill="none" stroke="#fff" stroke-width="5" stroke-linecap="round" stroke-linejoin="round"/>239 </svg>240 </div>241 <div class="pill"></div>242 <div class="pill"></div>243 <div class="pill"></div>244 <div class="pill"></div>245 <div class="pill"></div>246 </div>247 <div class="day-labels">248 <span>M</span>249 <span class="today">T</span>250 <span>W</span>251 <span>T</span>252 <span>F</span>253 <span>S</span>254 <span>S</span>255 </div>256 </div>257 </div>258 </div>259 260 <!-- Walk card -->261 <div class="card">262 <div class="walk-row" style="margin-bottom:24px;">263 <svg width="56" height="56" viewBox="0 0 56 56" class="teal-stroke">264 <circle cx="22" cy="12" r="5" fill="none" stroke="#0F6D61" stroke-width="3"/>265 <path d="M20 20l8 4-12 10M28 24l6 14" fill="none" stroke="#0F6D61" stroke-width="3" stroke-linecap="round"/>266 </svg>267 <div style="font-size:44px; font-weight:600;">Walk</div>268 </div>269 <div class="muted" style="font-size:36px;">270 8:07 AM <span class="bullet">•</span> 0.08 km <span class="bullet">•</span> 16 min271 </div>272 </div>273 274 <!-- Steps card -->275 <div class="card">276 <div class="row">277 <div>278 <div class="card-header">Steps</div>279 <div class="big-number">117</div>280 <div class="muted">Today</div>281 </div>282 <div class="ring">283 <!-- light ring -->284 <svg width="180" height="180" viewBox="0 0 180 180">285 <circle cx="90" cy="90" r="70" fill="none" stroke="#D8E6E2" stroke-width="16" stroke-linecap="round" />286 <!-- progress arc ~20% -->287 <path d="M40 130 A70 70 0 0 1 60 40" fill="none" stroke="#0F6D61" stroke-width="16" stroke-linecap="round"/>288 </svg>289 <div class="center-icon">290 <!-- shoe icon -->291 <svg width="64" height="64" viewBox="0 0 64 64">292 <path d="M10 40c8 0 14-4 18-8l6 4c6 4 14 6 20 6v4H10v-6z" fill="none" stroke="#0F6D61" stroke-width="4" stroke-linejoin="round"/>293 </svg>294 </div>295 </div>296 </div>297 </div>298 299 <!-- Distance card -->300 <div class="card">301 <div class="row">302 <div>303 <div class="card-header">Distance</div>304 <div style="display:flex; align-items:flex-end;">305 <div class="big-number" style="font-size:116px;">0.08</div>306 <div class="unit">km</div>307 </div>308 <div class="muted">Today</div>309 </div>310 <div class="ring">311 <svg width="180" height="180" viewBox="0 0 180 180">312 <circle cx="90" cy="90" r="70" fill="none" stroke="#D8E6E2" stroke-width="16" stroke-linecap="round"/>313 <path d="M36 110 A70 70 0 0 1 58 46" fill="none" stroke="#0F6D61" stroke-width="16" stroke-linecap="round"/>314 </svg>315 <div class="center-icon">316 <!-- pin icon -->317 <svg width="64" height="64" viewBox="0 0 64 64">318 <path d="M32 10c8 0 14 6 14 14 0 12-14 24-14 24S18 36 18 24c0-8 6-14 14-14z" fill="none" stroke="#0F6D61" stroke-width="4"/>319 <circle cx="32" cy="24" r="5" fill="none" stroke="#0F6D61" stroke-width="4"/>320 </svg>321 </div>322 </div>323 </div>324 </div>325 326 <!-- Energy burned card -->327 <div class="card" style="position:relative;">328 <div class="row">329 <div>330 <div class="card-header">Energy burned</div>331 <div style="display:flex; align-items:flex-end;">332 <div class="big-number" style="font-size:116px;">497</div>333 <div class="unit">cal</div>334 </div>335 <div class="muted">Today</div>336 </div>337 <div class="ring">338 <svg width="180" height="180" viewBox="0 0 180 180">339 <circle cx="90" cy="90" r="70" fill="none" stroke="#D8E6E2" stroke-width="16" stroke-linecap="round"/>340 <path d="M30 120 A70 70 0 0 1 70 36" fill="none" stroke="#0F6D61" stroke-width="16" stroke-linecap="round"/>341 </svg>342 <div class="center-icon">343 <!-- flame icon -->344 <svg width="64" height="64" viewBox="0 0 64 64">345 <path d="M34 12c2 10-8 12-8 20 0 6 4 10 10 10 8 0 12-6 10-12-2-6-8-10-12-18z" fill="none" stroke="#0F6D61" stroke-width="4" stroke-linejoin="round"/>346 </svg>347 </div>348 </div>349 </div>350 </div>351 352 </div>353 354 <!-- Floating add button -->355 <div class="fab">356 <svg viewBox="0 0 48 48">357 <path d="M24 10v28M10 24h28" stroke="#0F6D61" stroke-width="4" stroke-linecap="round"/>358 </svg>359 </div>360 361 <!-- Bottom navigation -->362 <div class="bottom-nav">363 <div class="nav-item active">364 <div class="nav-icon-wrap">365 <!-- sunrise icon -->366 <svg width="56" height="56" viewBox="0 0 56 56">367 <path d="M12 36h32" stroke="#2E3A35" stroke-width="3" stroke-linecap="round"/>368 <path d="M28 28a10 10 0 0 1 10 10" fill="none" stroke="#2E3A35" stroke-width="3"/>369 <path d="M28 28a10 10 0 0 0-10 10" fill="none" stroke="#2E3A35" stroke-width="3"/>370 <circle cx="28" cy="24" r="4" fill="none" stroke="#2E3A35" stroke-width="3"/>371 </svg>372 </div>373 <div class="label">Today</div>374 </div>375 <div class="nav-item">376 <div class="nav-icon-wrap" style="background:#EEF3F1;">377 <!-- clipboard icon -->378 <svg width="56" height="56" viewBox="0 0 56 56">379 <rect x="14" y="14" width="28" height="28" rx="6" fill="none" stroke="#6A7A73" stroke-width="3"/>380 <rect x="20" y="12" width="16" height="8" rx="4" fill="none" stroke="#6A7A73" stroke-width="3"/>381 <path d="M20 26h16M20 34h16" stroke="#6A7A73" stroke-width="3" stroke-linecap="round"/>382 </svg>383 </div>384 <div class="label">Coach</div>385 </div>386 <div class="nav-item">387 <div class="nav-icon-wrap" style="background:#EEF3F1;">388 <!-- grid icon -->389 <svg width="56" height="56" viewBox="0 0 56 56">390 <rect x="12" y="12" width="12" height="12" rx="2" fill="none" stroke="#6A7A73" stroke-width="3"/>391 <rect x="32" y="12" width="12" height="12" rx="2" fill="none" stroke="#6A7A73" stroke-width="3"/>392 <rect x="12" y="32" width="12" height="12" rx="2" fill="none" stroke="#6A7A73" stroke-width="3"/>393 <rect x="32" y="32" width="12" height="12" rx="2" fill="none" stroke="#6A7A73" stroke-width="3"/>394 </svg>395 </div>396 <div class="label">You</div>397 </div>398 </div>399 400 <div class="gesture-bar"></div>401 402</div>403</body>404</html>