GD-ML/AndroidCode

1<!DOCTYPE html>2<html>3<head>4<meta charset="UTF-8">5<title>Fitbit UI Mock</title>6<style>7  body {8    margin: 0;9    padding: 0;10    background: transparent;11    font-family: Arial, Helvetica, sans-serif;12    color: #1f1f1f;13  }14  #render-target {15    width: 1080px;16    height: 2400px;17    position: relative;18    overflow: hidden;19    background: #A9ABAA;20  }21 22  /* Status bar */23  .status-bar {24    position: absolute;25    top: 0;26    left: 0;27    width: 1080px;28    height: 120px;29    background: #f2f4f3;30    display: flex;31    align-items: center;32    padding: 0 32px;33    box-sizing: border-box;34    font-size: 40px;35    color: #444;36  }37  .status-left, .status-right {38    display: flex;39    align-items: center;40  }41  .status-left { gap: 18px; }42  .status-right { margin-left: auto; gap: 22px; }43  .sb-dot {44    width: 16px; height: 16px; background:#777; border-radius:50%;45  }46  .sb-pill {47    padding: 6px 16px; background:#d9d9d9; border-radius:18px; font-size:34px;48  }49  .sb-icon {50    width: 40px; height: 40px; border: 2px solid #666; border-radius: 6px;51  }52 53  /* Header */54  .app-header {55    position: absolute;56    top: 140px;57    left: 0;58    width: 100%;59    padding: 0 48px;60    box-sizing: border-box;61    color: #1f1f1f;62  }63  .header-row {64    display: flex;65    align-items: center;66    justify-content: space-between;67    margin-bottom: 34px;68  }69  .brand {70    font-size: 76px;71    font-weight: 600;72    letter-spacing: 1px;73  }74  .header-icon {75    width: 72px; height: 72px;76  }77  .avatar {78    width: 86px; height: 86px;79    background: #E0E0E0;80    border: 1px solid #BDBDBD;81    border-radius: 50%;82    display: flex; align-items: center; justify-content: center;83    color: #757575; font-size: 22px;84  }85  .sub-row {86    display: flex; align-items: center; justify-content: space-between;87    padding: 0 8px;88  }89  .sub-title { font-size: 54px; font-weight: 600; }90  .chevron, .pencil {91    width: 64px; height: 64px;92  }93 94  /* Progress circle area */95  .progress-area {96    position: absolute;97    top: 480px;98    left: 0;99    width: 100%;100    height: 720px;101    display: flex;102    align-items: center;103    justify-content: center;104  }105  .ring-wrap {106    position: relative;107    width: 700px; height: 700px;108    border-radius: 50%;109    border: 28px solid rgba(70, 98, 96, 0.35);110    box-sizing: border-box;111  }112  /* emulate gap in ring */113  .ring-gap {114    position: absolute;115    width: 190px; height: 190px;116    background: #A9ABAA;117    border-radius: 100px;118    right: 38px; top: 160px;119    transform: rotate(-20deg);120  }121  .ring-dot {122    position: absolute;123    width: 28px; height: 28px; background: #0B6D60; border-radius: 50%;124    left: 126px; bottom: 140px;125  }126  .shoe-icon {127    position: absolute; left: 50%; top: 50%;128    transform: translate(-50%, -50%);129    width: 240px; height: 160px;130  }131  .progress-value {132    position: absolute;133    top: 1200px;134    width: 100%;135    text-align: center;136    font-size: 120px;137    color: #111;138    font-weight: 500;139  }140 141  /* Bottom sheet */142  .bottom-sheet {143    position: absolute;144    left: 0;145    top: 1260px;146    width: 1080px;147    height: 980px;148    background: #FAFBF9;149    border-top-left-radius: 80px;150    border-top-right-radius: 80px;151    box-shadow: 0 -8px 20px rgba(0,0,0,0.12);152    padding: 56px 48px 40px;153    box-sizing: border-box;154  }155  .handle {156    width: 140px; height: 16px; background:#cfd4d2; border-radius: 16px;157    margin: 0 auto 40px auto;158  }159  .section-title {160    font-size: 60px;161    font-weight: 600;162    margin: 24px 0 36px 0;163  }164  .tile-grid {165    display: grid;166    grid-template-columns: 1fr 1fr;167    gap: 40px 40px;168  }169  .tile {170    background: #E6F1ED;171    height: 180px;172    border-radius: 56px;173    display: flex;174    align-items: center;175    padding: 0 48px;176    box-sizing: border-box;177    color: #263331;178    font-size: 44px;179    font-weight: 600;180    gap: 28px;181  }182  .tile .ic {183    width: 72px; height: 72px;184  }185  .tile .stroke {186    stroke: #5D6E6A;187  }188 189  /* Gesture bar */190  .gesture-bar {191    position: absolute;192    bottom: 28px;193    left: 50%;194    transform: translateX(-50%);195    width: 560px;196    height: 18px;197    background: #707070;198    border-radius: 18px;199    opacity: 0.8;200  }201</style>202</head>203<body>204<div id="render-target">205 206  <!-- Status bar -->207  <div class="status-bar">208    <div class="status-left">209      <div>2:54</div>210      <div class="sb-pill">B</div>211      <div class="sb-icon"></div>212      <div class="sb-icon" style="border-radius:50%"></div>213      <div class="sb-dot"></div>214    </div>215    <div class="status-right">216      <svg width="46" height="46" viewBox="0 0 24 24">217        <path d="M12 3l9 7H3z" fill="#666"/>218      </svg>219      <svg width="46" height="46" viewBox="0 0 24 24">220        <rect x="3" y="6" width="18" height="12" rx="2" fill="#666"/>221      </svg>222    </div>223  </div>224 225  <!-- Header -->226  <div class="app-header">227    <div class="header-row">228      <!-- device icon -->229      <svg class="header-icon" viewBox="0 0 64 64">230        <rect x="18" y="10" width="28" height="44" rx="6" fill="none" stroke="#5D6E6A" stroke-width="4"/>231        <circle cx="32" cy="50" r="3" fill="#5D6E6A"/>232      </svg>233 234      <div class="brand">fitbit</div>235 236      <div style="display:flex; align-items:center; gap:28px;">237        <!-- chat icon -->238        <svg class="header-icon" viewBox="0 0 64 64">239          <path d="M12 14h40v28H26l-10 8v-8H12z" fill="none" stroke="#5D6E6A" stroke-width="4" stroke-linejoin="round"/>240        </svg>241        <!-- avatar placeholder -->242        <div class="avatar">[IMG: Avatar]</div>243      </div>244    </div>245 246    <div class="sub-row">247      <!-- back chevron -->248      <svg class="chevron" viewBox="0 0 64 64">249        <polyline points="40,14 24,32 40,50" fill="none" stroke="#5D6E6A" stroke-width="6" stroke-linecap="round" stroke-linejoin="round"/>250      </svg>251      <div class="sub-title">Today</div>252      <!-- pencil -->253      <svg class="pencil" viewBox="0 0 64 64">254        <path d="M14 46l12-2 24-24-10-10-24 24z" fill="none" stroke="#5D6E6A" stroke-width="4"/>255        <path d="M40 10l10 10" fill="none" stroke="#5D6E6A" stroke-width="4"/>256      </svg>257    </div>258  </div>259 260  <!-- Progress area -->261  <div class="progress-area">262    <div class="ring-wrap">263      <div class="ring-gap"></div>264      <div class="ring-dot"></div>265      <!-- shoe icon -->266      <svg class="shoe-icon" viewBox="0 0 200 120">267        <path d="M30 66c12-16 20-24 28-26 10 12 12 24 22 32 18 12 28 20 28 32-4 6-12 8-22 6-14-4-28-18-50-34-8-6-14-8-6-10z" fill="none" stroke="#0B6D60" stroke-width="12" stroke-linejoin="round" stroke-linecap="round"/>268      </svg>269    </div>270  </div>271  <div class="progress-value">0</div>272 273  <!-- Bottom sheet -->274  <div class="bottom-sheet">275    <div class="handle"></div>276 277    <div class="section-title">Track live</div>278    <div class="tile-grid" style="margin-bottom: 32px;">279      <div class="tile">280        <svg class="ic" viewBox="0 0 64 64">281          <path class="stroke" d="M14 42l10-10 8 4 8-10" fill="none" stroke-width="4"/>282          <circle cx="42" cy="18" r="4" fill="#5D6E6A"/>283        </svg>284        <div>Start exercise</div>285      </div>286      <div class="tile">287        <svg class="ic" viewBox="0 0 64 64">288          <rect x="10" y="28" width="36" height="16" rx="2" fill="none" stroke="#5D6E6A" stroke-width="4"/>289          <rect x="46" y="28" width="8" height="10" fill="none" stroke="#5D6E6A" stroke-width="4"/>290        </svg>291        <div>Start sleep</div>292      </div>293    </div>294 295    <div class="section-title">Manually log</div>296    <div class="tile-grid">297      <div class="tile">298        <svg class="ic" viewBox="0 0 64 64">299          <circle cx="32" cy="16" r="6" fill="none" stroke="#5D6E6A" stroke-width="4"/>300          <path d="M32 22v14M20 38h24M18 54l14-12M46 54l-14-12" fill="none" stroke="#5D6E6A" stroke-width="4" stroke-linecap="round"/>301        </svg>302        <div>Activity</div>303      </div>304      <div class="tile">305        <svg class="ic" viewBox="0 0 64 64">306          <path d="M38 22c-8 12-18 12-26 0 8-12 18-12 26 0z" fill="none" stroke="#5D6E6A" stroke-width="4"/>307          <path d="M40 20c-2 8-8 14-16 18" fill="none" stroke="#5D6E6A" stroke-width="4"/>308        </svg>309        <div>Sleep</div>310      </div>311      <div class="tile">312        <svg class="ic" viewBox="0 0 64 64">313          <circle cx="22" cy="24" r="10" fill="none" stroke="#5D6E6A" stroke-width="4"/>314          <path d="M28 16l6-6M18 34c-2 8 2 14 10 14" fill="none" stroke="#5D6E6A" stroke-width="4"/>315        </svg>316        <div>Food</div>317      </div>318      <div class="tile">319        <svg class="ic" viewBox="0 0 64 64">320          <path d="M18 14h28l-4 36H22l-4-36z" fill="none" stroke="#5D6E6A" stroke-width="4"/>321          <path d="M22 26h20" fill="none" stroke="#5D6E6A" stroke-width="4"/>322        </svg>323        <div>Water</div>324      </div>325      <div class="tile">326        <svg class="ic" viewBox="0 0 64 64">327          <rect x="14" y="20" width="36" height="28" rx="6" fill="none" stroke="#5D6E6A" stroke-width="4"/>328          <circle cx="32" cy="34" r="6" fill="none" stroke="#5D6E6A" stroke-width="4"/>329        </svg>330        <div>Weight</div>331      </div>332    </div>333  </div>334 335  <!-- Gesture bar -->336  <div class="gesture-bar"></div>337 338</div>339</body>340</html>