GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<title>Fitbit Weight Picker</title>5<style>6  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }7  #render-target {8    width: 1080px;9    height: 2400px;10    position: relative;11    overflow: hidden;12    background: #F6F7F6;13  }14 15  /* Status bar */16  .status-bar {17    position: absolute;18    top: 0;19    left: 0;20    width: 1080px;21    height: 120px;22    padding: 0 36px;23    box-sizing: border-box;24    display: flex;25    align-items: center;26    justify-content: space-between;27    color: #0b2f2a;28    font-weight: 600;29    font-size: 40px;30  }31  .status-icons { display: flex; gap: 26px; align-items: center; }32  .dot { width: 10px; height: 10px; background:#0b2f2a; border-radius:50%; display:inline-block; }33  .wifi {34    width: 34px; height: 24px;35    border: 3px solid #0b2f2a; border-top-left-radius: 20px; border-top-right-radius: 20px;36    border-bottom: none; transform: rotate(0deg);37  }38  .battery {39    width: 54px; height: 28px; border: 3px solid #0b2f2a; position: relative; border-radius: 6px;40  }41  .battery:after {42    content: ""; position: absolute; right: -8px; top: 6px; width: 6px; height: 16px; background: #0b2f2a; border-radius: 2px;43  }44 45  /* Background page content */46  .page {47    position: absolute;48    top: 140px;49    left: 64px;50    right: 64px;51    color: #0c2f2a;52  }53  .title {54    font-size: 82px;55    font-weight: 700;56    letter-spacing: -1px;57    margin-top: 120px;58    margin-bottom: 36px;59  }60  .desc {61    width: 900px;62    color: #5c6f66;63    font-size: 36px;64    line-height: 1.4;65  }66  .form-row {67    margin-top: 80px;68    display: flex;69    gap: 40px;70  }71  .chip {72    border: 2px solid #2e6b5a;73    color: #0e3a33;74    border-radius: 20px;75    padding: 24px 32px;76    font-size: 42px;77    width: 320px;78    text-align: center;79  }80  .save-btn {81    position: absolute;82    right: 64px;83    bottom: 120px;84    background: #0f4c3a;85    color: #e8f3ef;86    padding: 34px 54px;87    border-radius: 60px;88    font-size: 44px;89    box-shadow: 0 8px 18px rgba(0,0,0,0.15);90  }91 92  /* Dark overlay */93  .overlay {94    position: absolute;95    inset: 0;96    background: rgba(0,0,0,0.45);97  }98 99  /* Modal card */100  .modal {101    position: absolute;102    left: 100px;103    top: 360px;104    width: 880px;105    background: #ffffff;106    border-radius: 64px;107    box-shadow: 0 24px 60px rgba(0,0,0,0.28);108    padding: 56px;109    box-sizing: border-box;110    color: #0c2f2a;111  }112  .modal h2 {113    margin: 0;114    font-size: 64px;115    font-weight: 700;116  }117  .subtext {118    margin-top: 24px;119    font-size: 34px;120    color: #556b63;121    line-height: 1.35;122  }123 124  /* Segmented control */125  .segment {126    margin-top: 42px;127    border: 2px solid #cfd7d4;128    border-radius: 80px;129    height: 120px;130    display: flex;131    overflow: hidden;132  }133  .seg-item {134    flex: 1;135    display: flex; align-items: center; justify-content: center;136    font-size: 40px;137    color: #0c2f2a;138    background: #f3f5f4;139  }140  .seg-item + .seg-item { border-left: 2px solid #e6ecea; }141  .seg-item.active {142    background: #d8e9e2;143    position: relative;144    font-weight: 600;145  }146  .check {147    width: 26px; height: 26px; margin-right: 16px;148  }149 150  /* Number picker */151  .picker {152    margin-top: 80px;153    width: 100%;154    text-align: center;155    position: relative;156  }157  .picker .faint {158    color: #b6c1bd;159    font-size: 48px;160    margin: 16px 0;161  }162  .picker .selected {163    color: #0d2f2a;164    font-size: 58px;165    font-weight: 700;166    margin: 18px 0;167  }168  .picker .line {169    height: 4px;170    width: 320px;171    background: #2d3a37;172    margin: 18px auto;173    border-radius: 2px;174  }175 176  .divider {177    width: 100%;178    height: 2px;179    background: #e9eeec;180    margin: 60px 0 24px 0;181  }182 183  .modal-actions {184    display: flex;185    justify-content: space-between;186    align-items: center;187    padding: 0 10px 16px 10px;188  }189  .action {190    font-size: 44px;191    color: #0c5e4b;192  }193</style>194</head>195<body>196<div id="render-target">197 198  <!-- Status Bar -->199  <div class="status-bar">200    <div>10:07</div>201    <div class="status-icons">202      <div class="dot"></div>203      <div class="dot"></div>204      <div class="wifi"></div>205      <div class="battery"></div>206    </div>207  </div>208 209  <!-- Background content (dimmed by overlay) -->210  <div class="page">211    <div class="title">Add Fitbit profile info</div>212    <div class="desc">213      Your profile info helps personalize some metrics and estimates. You can214      change it later in Settings. Learn more in our Privacy Policy.215    </div>216 217    <div class="form-row">218      <div class="chip">Height</div>219      <div class="chip">Sex</div>220    </div>221 222    <div class="save-btn">Save &amp; continue</div>223  </div>224 225  <!-- Dim layer -->226  <div class="overlay"></div>227 228  <!-- Modal dialog -->229  <div class="modal">230    <h2>Weight</h2>231    <div class="subtext">232      Fitbit uses weight to estimate calories and calculate needs233    </div>234 235    <div class="segment">236      <div class="seg-item active">237        <svg class="check" viewBox="0 0 24 24">238          <path d="M9 16l-4-4 1.6-1.6L9 12.8 17.4 4.4 19 6z" fill="#0c2f2a"></path>239        </svg>240        KG241      </div>242      <div class="seg-item">STONE</div>243      <div class="seg-item">LBS</div>244    </div>245 246    <div class="picker">247      <div class="faint">65 kg</div>248      <div class="line"></div>249      <div class="selected">66 kg</div>250      <div class="line"></div>251      <div class="faint">67 kg</div>252    </div>253 254    <div class="divider"></div>255 256    <div class="modal-actions">257      <div class="action">Cancel</div>258      <div class="action">OK</div>259    </div>260  </div>261 262</div>263</body>264</html>