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>Fitbit Mock</title>7<style>8 @font-face {9 font-family: InterSystem;10 src: local("Arial");11 }12 body {13 margin: 0;14 padding: 0;15 background: transparent;16 font-family: InterSystem, Helvetica, Arial, sans-serif;17 color: #263238;18 }19 #render-target {20 width: 1080px;21 height: 2400px;22 position: relative;23 overflow: hidden;24 background: #FFFFFF;25 }26 27 /* Status bar */28 .status-bar {29 height: 80px;30 padding: 0 36px;31 display: flex;32 align-items: center;33 justify-content: space-between;34 color: #70757a;35 font-size: 36px;36 }37 .status-left, .status-right {38 display: flex;39 align-items: center;40 gap: 22px;41 }42 .status-time {43 font-weight: 600;44 color: #4a4f54;45 }46 .icon-16 { width: 40px; height: 40px; }47 48 /* Top app bar */49 .appbar {50 height: 120px;51 display: flex;52 align-items: center;53 padding: 0 36px;54 position: relative;55 }56 .appbar .title {57 position: absolute;58 left: 50%;59 transform: translateX(-50%);60 font-size: 56px;61 letter-spacing: 2px;62 color: #12333A;63 font-weight: 600;64 }65 .appbar .left, .appbar .right {66 display: flex;67 align-items: center;68 gap: 28px;69 }70 .avatar {71 width: 80px;72 height: 80px;73 border-radius: 40px;74 background: #1AA7A8;75 color: #fff;76 display: flex; align-items:center; justify-content:center;77 font-weight: 700;78 }79 .divider {80 height: 1px;81 background: #E6EBEE;82 width: 100%;83 }84 85 /* Today header */86 .today-header {87 height: 120px;88 display: flex;89 align-items: center;90 padding: 0 36px;91 position: relative;92 }93 .today-header .label {94 position: absolute;95 left: 50%;96 transform: translateX(-50%);97 font-weight: 700;98 letter-spacing: 2px;99 color: #0F2C36;100 font-size: 42px;101 }102 .edit-pill {103 margin-left: auto;104 background: #F3F7F8;105 padding: 18px 36px;106 border-radius: 28px;107 color: #0F2C36;108 font-weight: 700;109 box-shadow: 0 2px 8px rgba(0,0,0,0.06);110 font-size: 34px;111 }112 113 /* Main metrics */114 .metrics {115 padding-top: 20px;116 display: flex;117 flex-direction: column;118 align-items: center;119 }120 .progress-ring {121 width: 430px;122 height: 430px;123 border-radius: 50%;124 border: 22px solid #D6F1F2;125 position: relative;126 display: flex;127 align-items: center;128 justify-content: center;129 }130 .progress-ring::after{131 content:"";132 width: 18px; height: 18px;133 background: #0FB2B4;134 border-radius: 50%;135 position: absolute;136 top: 10px; left: 50%;137 transform: translateX(-50%);138 }139 .steps-center {140 text-align: center;141 }142 .steps-center .value {143 font-size: 110px;144 font-weight: 700;145 color: #1C2B33;146 line-height: 1.1;147 }148 .steps-center .label {149 font-size: 40px;150 color: #6B7B83;151 }152 .shoe-icon {153 width: 84px; height: 84px;154 margin: 8px auto 10px;155 }156 .mini-metrics {157 width: 100%;158 max-width: 880px;159 display: flex;160 justify-content: space-between;161 margin-top: 36px;162 }163 .metric {164 display: flex;165 flex-direction: column;166 align-items: center;167 }168 .mini-ring {169 width: 150px; height: 150px;170 border-radius: 50%;171 border: 14px solid #D6F1F2;172 display: flex; align-items: center; justify-content: center;173 position: relative;174 }175 .mini-ring::after{176 content:"";177 position: absolute;178 width: 16px; height: 16px;179 background: #0FB2B4;180 border-radius: 50%;181 top: 10px; left: 50%;182 transform: translateX(-50%);183 }184 .metric .num { margin-top: 18px; font-size: 44px; font-weight: 700; color: #1C2B33; }185 .metric .sub { font-size: 30px; color: #8A9AA3; margin-top: 4px; }186 187 /* Cards container */188 .cards {189 margin-top: 36px;190 padding: 0 30px 190px;191 background: linear-gradient(#ffffff 0%, #fbfbfb 100%);192 }193 .card {194 background: #fff;195 border-radius: 28px;196 box-shadow: 0 10px 20px rgba(0,0,0,0.06);197 padding: 36px;198 margin: 20px 6px;199 }200 .row { display: flex; align-items: center; }201 .grow { flex: 1; }202 .mind-icon, .exercise-icon {203 width: 110px; height: 110px; border-radius: 55px;204 display: flex; align-items: center; justify-content: center;205 background: #F5E8FF;206 position: relative;207 }208 .mind-icon::before, .exercise-icon::before {209 content:"";210 position: absolute; inset: 6px;211 border-radius: 55px;212 border: 10px dotted rgba(153, 102, 255, 0.35);213 }214 .exercise-icon { background: #FFEDE3; }215 .exercise-icon::before { border-color: rgba(255, 144, 82, 0.45); }216 217 .card-title { font-size: 48px; font-weight: 700; color:#1C2B33; }218 .card-sub { font-size: 34px; color:#7A8A92; margin-top: 6px; }219 220 .plus {221 width: 60px; height: 60px; border-radius: 16px;222 border: 4px solid #B0BEC5;223 display: flex; align-items: center; justify-content: center;224 color: #90A4AE; font-size: 52px; font-weight: 600;225 }226 .divider-line {227 height: 2px;228 background: #ECEFF1;229 margin: 30px -36px 14px;230 }231 .walk-row { display: flex; align-items: center; gap: 16px; }232 .walk-title { font-size: 44px; font-weight: 700; color: #12333A; }233 .walk-sub { font-size: 32px; color: #7C8B92; margin-left: 10px; }234 235 .info-row { display: flex; align-items: center; gap: 40px; margin-top: 20px; }236 .chip {237 display: flex; align-items: center; gap: 12px;238 color: #4B5A60; font-size: 34px;239 }240 241 /* Bottom navigation */242 .bottom-nav {243 position: absolute;244 left: 0; right: 0; bottom: 40px;245 height: 150px;246 background: #FFFFFF;247 border-top: 1px solid #E8ECEF;248 display: flex;249 justify-content: space-around;250 align-items: center;251 box-shadow: 0 -8px 20px rgba(0,0,0,0.06);252 }253 .nav-item {254 display: flex;255 flex-direction: column;256 align-items: center;257 gap: 8px;258 color: #8A9AA3;259 font-size: 30px;260 }261 .nav-item.active { color: #0FB2B4; }262 .home-indicator {263 position: absolute;264 bottom: 10px; left: 50%; transform: translateX(-50%);265 width: 380px; height: 12px; background: #C8CFD4; border-radius: 8px;266 opacity: 0.9;267 }268 269 /* Utility */270 .spacer-8 { height: 8px; }271</style>272</head>273<body>274<div id="render-target">275 276 <!-- Status Bar -->277 <div class="status-bar">278 <div class="status-left">279 <div class="status-time">7:11</div>280 <!-- cloud icon -->281 <svg class="icon-16" viewBox="0 0 24 24" fill="#9E9E9E">282 <path d="M6 18h11a5 5 0 0 0 0-10 6 6 0 0 0-11-1A4 4 0 0 0 6 18z"/>283 </svg>284 </div>285 <div class="status-right">286 <!-- location dot -->287 <svg class="icon-16" viewBox="0 0 24 24" fill="#8a8f95">288 <path d="M12 2a7 7 0 0 0-7 7c0 5 7 13 7 13s7-8 7-13a7 7 0 0 0-7-7zm0 9.5A2.5 2.5 0 1 1 12 6a2.5 2.5 0 0 1 0 5z"/>289 </svg>290 <!-- wifi -->291 <svg class="icon-16" viewBox="0 0 24 24" fill="#8a8f95">292 <path d="M12 20l2-2h-4l2 2zm-6-6 2 2a6 6 0 0 1 8 0l2-2a9 9 0 0 0-12 0zm-4-4 2 2a12 12 0 0 1 16 0l2-2a15 15 0 0 0-20 0z"/>293 </svg>294 <!-- battery -->295 <svg class="icon-16" viewBox="0 0 24 24" fill="#8a8f95">296 <path d="M2 7v10a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-1h2v-8h-2V7a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2zm3 1h11v8H5V8z"/>297 </svg>298 </div>299 </div>300 301 <!-- Top App Bar -->302 <div class="appbar">303 <div class="left">304 <!-- settings gear -->305 <svg width="56" height="56" viewBox="0 0 24 24" fill="#7A8A92">306 <path d="M12 8.5a3.5 3.5 0 1 1 0 7 3.5 3.5 0 0 1 0-7zm8.5 3.5 1.5.9-1.5 2.6-1.7-.3a7.9 7.9 0 0 1-1.2 1l.3 1.7-2.9 1-1-1.4a7.9 7.9 0 0 1-1.3 0l-1 1.4-2.9-1 .3-1.7a7.9 7.9 0 0 1-1.2-1l-1.7.3-1.5-2.6 1.5-.9a7.9 7.9 0 0 1 0-1.4l-1.5-.9L3 8.1l1.7.3a7.9 7.9 0 0 1 1.2-1L5.6 5.7 8.5 4.7l1 1.4a7.9 7.9 0 0 1 1.3 0l1-1.4 2.9 1-.3 1.7a7.9 7.9 0 0 1 1.2 1l1.7-.3 1.5 2.6-1.5.9c.1.5.1.9 0 1.4z"/>307 </svg>308 </div>309 <div class="title">fitbit</div>310 <div class="right">311 <!-- inbox -->312 <svg width="56" height="56" viewBox="0 0 24 24" fill="#7A8A92">313 <path d="M3 6h18l-2 12H5L3 6zm4 6h2a3 3 0 0 0 6 0h2l1.2 4H5.8L7 12z"/>314 </svg>315 <div class="avatar">C</div>316 </div>317 </div>318 <div class="divider"></div>319 320 <!-- Today Header -->321 <div class="today-header">322 <!-- back arrow -->323 <svg width="54" height="54" viewBox="0 0 24 24" fill="none" stroke="#7A8A92" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">324 <path d="M15 18l-6-6 6-6"/>325 </svg>326 <div class="label">TODAY</div>327 <div class="edit-pill">EDIT</div>328 </div>329 330 <!-- Main Metrics -->331 <div class="metrics">332 <div class="progress-ring">333 <div class="steps-center">334 <!-- shoe icon -->335 <svg class="shoe-icon" viewBox="0 0 24 24" fill="#0FB2B4">336 <path d="M3 14l9 2 8-4-1-2-4 2-5-4-2 1 3 3-2 .8L7 8 5 9l2 4-4 1z"/>337 </svg>338 <div class="value">20</div>339 <div class="label">Steps</div>340 </div>341 </div>342 343 <div class="mini-metrics">344 <div class="metric">345 <div class="mini-ring">346 <svg width="64" height="64" viewBox="0 0 24 24" fill="#0FB2B4">347 <path d="M12 2a7 7 0 0 0-7 7c0 5 7 13 7 13s7-8 7-13a7 7 0 0 0-7-7zm0 9.5A2.5 2.5 0 1 1 12 6a2.5 2.5 0 0 1 0 5z"/>348 </svg>349 </div>350 <div class="num">0.01</div>351 <div class="sub">Km</div>352 </div>353 354 <div class="metric">355 <div class="mini-ring">356 <svg width="64" height="64" viewBox="0 0 24 24" fill="#0FB2B4">357 <path d="M12 2c2 2 3 4.5 3 7a5 5 0 0 1-5 5 4 4 0 0 0 8 1c0-4-3-7-6-13z"/>358 </svg>359 </div>360 <div class="num">1,000</div>361 <div class="sub">Cals</div>362 </div>363 </div>364 </div>365 366 <!-- Cards -->367 <div class="cards">368 <!-- Mindfulness card -->369 <div class="card" style="display:flex; align-items:center; gap:30px;">370 <div class="mind-icon">371 <!-- head/brain -->372 <svg width="60" height="60" viewBox="0 0 24 24" fill="#9C27B0">373 <path d="M9 3a6 6 0 0 0-2 11v3l3 1v-4h2a6 6 0 0 0-3-11zM15 4a5 5 0 0 1 0 10h-1a7 7 0 0 0 1-10z"/>374 </svg>375 </div>376 <div class="grow">377 <div class="card-title">Track your mindfulness</div>378 <div class="card-sub">5 days left this week</div>379 </div>380 </div>381 382 <!-- Exercise card -->383 <div class="card">384 <div class="row" style="gap: 26px;">385 <div class="exercise-icon">386 <!-- running -->387 <svg width="60" height="60" viewBox="0 0 24 24" fill="#FF6D00">388 <path d="M13 5a2 2 0 1 0-2-2 2 2 0 0 0 2 2zm-3 4 2-2 2 2-2 2 2 2-1 3-3-1 1-3-2-2 1-1zm7 3-2 1 2 2-2 4h-2l2-4-3-3 3-2 2 2z"/>389 </svg>390 </div>391 <div class="grow">392 <div class="card-title"><span style="font-weight:800;">1</span> of <span style="font-weight:800;">5</span> days</div>393 <div class="card-sub">of exercise this week</div>394 </div>395 <div class="plus">+</div>396 </div>397 398 <div class="divider-line"></div>399 400 <div class="walk-row">401 <svg width="44" height="44" viewBox="0 0 24 24" fill="#FF6D00">402 <path d="M13 5a2 2 0 1 0-2-2 2 2 0 0 0 2 2zm-4 8 2-2 3 2-1 3-3-1 1-2-2 0z"/>403 </svg>404 <div class="walk-title">Walk</div>405 <div class="walk-sub">Today at 3:12 PM</div>406 </div>407 408 <div class="info-row">409 <div class="chip">410 <svg width="36" height="36" viewBox="0 0 24 24" fill="#0FB2B4">411 <path d="M12 2a7 7 0 0 0-7 7c0 5 7 13 7 13s7-8 7-13a7 7 0 0 0-7-7zm0 9.5A2.5 2.5 0 1 1 12 6a2.5 2.5 0 0 1 0 5z"/>412 </svg>413 <span>0.01 km</span>414 </div>415 <div class="chip">416 <svg width="40" height="40" viewBox="0 0 24 24" fill="#0FB2B4">417 <path d="M3 14l9 2 8-4-1-2-4 2-5-4-2 1 3 3-2 .8L7 8 5 9l2 4-4 1z"/>418 </svg>419 <span>99'05" pace</span>420 </div>421 </div>422 </div>423 424 <!-- Placeholder next card -->425 <div class="card" style="height: 180px; display:flex; align-items:center; justify-content:center;">426 <div style="width: 100%; height: 120px; background: #E0E0E0; border: 1px solid #BDBDBD; display: flex; justify-content: center; align-items: center; color: #757575; border-radius: 16px;">[IMG: Additional card preview]</div>427 </div>428 </div>429 430 <!-- Bottom Navigation -->431 <div class="bottom-nav">432 <div class="nav-item active">433 <!-- Fitbit dot cluster -->434 <svg width="44" height="44" viewBox="0 0 24 24" fill="currentColor">435 <circle cx="6" cy="6" r="2"/><circle cx="10" cy="10" r="2"/><circle cx="6" cy="14" r="2"/><circle cx="14" cy="6" r="2"/><circle cx="14" cy="14" r="2"/><circle cx="18" cy="10" r="2"/>436 </svg>437 <div>Today</div>438 </div>439 <div class="nav-item">440 <!-- Compass -->441 <svg width="44" height="44" viewBox="0 0 24 24" fill="currentColor">442 <path d="M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm4 6-3 7-7 3 3-7 7-3z"/>443 </svg>444 <div>Discover</div>445 </div>446 <div class="nav-item">447 <!-- Community -->448 <svg width="44" height="44" viewBox="0 0 24 24" fill="currentColor">449 <path d="M12 12a3 3 0 1 0-3-3 3 3 0 0 0 3 3zm-5 7a4 4 0 0 1 10 0H7zm12-10a2 2 0 1 0-2-2 2 2 0 0 0 2 2zm-14 0a2 2 0 1 0-2-2 2 2 0 0 0 2 2z"/>450 </svg>451 <div>Community</div>452 </div>453 <div class="nav-item">454 <!-- Premium -->455 <svg width="44" height="44" viewBox="0 0 24 24" fill="currentColor">456 <path d="M12 3l2.5 6H21l-5 4 2 7-6-4-6 4 2-7-5-4h6.5L12 3z"/>457 </svg>458 <div>Premium</div>459 </div>460 </div>461 <div class="home-indicator"></div>462</div>463</body>464</html>