GD-ML/AndroidCode

1<html>2<head>3<meta charset="utf-8">4<title>Fitbit Weight Modal - Mock</title>5<style>6  body { margin: 0; padding: 0; background: transparent; font-family: "Segoe UI", Arial, 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: 108px;22    background: transparent;23    color: #0b3d2f;24    display: flex;25    align-items: center;26    padding: 0 48px;27    font-weight: 600;28    font-size: 42px;29  }30  .status-right {31    margin-left: auto;32    display: flex;33    gap: 24px;34    align-items: center;35  }36  .icon {37    width: 44px; height: 44px;38  }39 40  /* Underlying page */41  .page {42    position: absolute;43    top: 108px;44    left: 0;45    width: 1080px;46    height: 2292px;47    background: #ffffff;48  }49  .header-row {50    display: flex;51    align-items: center;52    gap: 32px;53    padding: 96px 64px 24px 64px;54  }55  .avatar {56    width: 96px; height: 96px;57    border-radius: 48px;58    border: 4px solid #174f44;59    display: flex; align-items: center; justify-content: center;60    color: #174f44; font-weight: 700; font-size: 40px;61  }62  .title {63    font-size: 72px;64    color: #0b3d2f;65    font-weight: 700;66    letter-spacing: 0.5px;67  }68  .desc {69    color: #30473f;70    font-size: 36px;71    line-height: 1.5;72    padding: 0 64px;73    max-width: 900px;74  }75 76  .form-row {77    margin-top: 64px;78    padding: 0 64px;79    display: flex;80    flex-direction: column;81    gap: 36px;82  }83  .field {84    width: 780px;85    height: 120px;86    border: 2px solid #1d5a4a;87    border-radius: 20px;88    display: flex; align-items: center; justify-content: space-between;89    padding: 0 36px;90    color: #1d5a4a;91    font-size: 40px;92    font-weight: 600;93  }94  .field .value {95    color: #0b3d2f;96    font-weight: 700;97  }98 99  .footer {100    position: absolute;101    bottom: 96px;102    left: 64px;103    right: 64px;104    display: flex;105    align-items: center;106    justify-content: space-between;107  }108  .exit {109    color: #174f44;110    font-size: 42px;111    font-weight: 600;112  }113  .cta {114    background: #0b3d2f;115    color: #ffffff;116    border-radius: 64px;117    padding: 34px 48px;118    font-size: 42px;119    font-weight: 700;120    box-shadow: 0 8px 14px rgba(0,0,0,0.15);121  }122 123  /* Overlay */124  .overlay {125    position: absolute;126    left: 0; top: 0; width: 1080px; height: 2400px;127    background: rgba(0,0,0,0.35);128  }129 130  /* Modal */131  .modal {132    position: absolute;133    left: 90px;134    top: 360px;135    width: 900px;136    height: 1340px;137    background: #ffffff;138    border-radius: 64px;139    box-shadow: 0 14px 60px rgba(0,0,0,0.35);140    padding: 64px;141    color: #0b3d2f;142  }143  .modal h2 {144    margin: 0 0 16px 0;145    font-size: 64px;146    font-weight: 700;147  }148  .subtitle {149    color: #415a52;150    font-size: 34px;151    line-height: 1.4;152    max-width: 760px;153    margin-bottom: 48px;154  }155 156  /* Segmented control */157  .segmented {158    width: 820px;159    height: 156px;160    border: 2px solid #b3c1bb;161    border-radius: 78px;162    display: flex;163    overflow: hidden;164    margin-bottom: 72px;165  }166  .seg-item {167    flex: 1;168    display: flex; align-items: center; justify-content: center;169    font-size: 42px; font-weight: 700; color: #1a2e28;170    position: relative;171  }172  .seg-item + .seg-item { border-left: 2px solid #d5ddd9; }173  .seg-item.active {174    background: #d6ebe1;175    color: #0b3d2f;176  }177  .check {178    position: absolute; left: 34px; top: 50%; transform: translateY(-50%);179    width: 44px; height: 44px;180  }181 182  /* Spinner */183  .spinner {184    width: 820px;185    height: 520px;186    margin: 0 auto;187    display: flex; align-items: center; justify-content: center;188    flex-direction: column;189    gap: 36px;190  }191  .spinner .faint {192    color: #b0b7b3;193    font-size: 52px;194  }195  .spinner .current {196    color: #0b3d2f;197    font-size: 68px;198    font-weight: 800;199  }200  .spin-line {201    width: 400px;202    height: 8px;203    background: #42564f;204    border-radius: 4px;205  }206 207  .modal-footer {208    position: absolute;209    bottom: 64px;210    left: 64px;211    right: 64px;212    display: flex;213    justify-content: space-between;214  }215  .btn {216    font-size: 44px;217    font-weight: 700;218    color: #0b3d2f;219    padding: 20px 34px;220  }221</style>222</head>223<body>224<div id="render-target">225 226  <!-- Status bar -->227  <div class="status-bar">228    10:08229    <div class="status-right">230      <!-- simple inline SVGs to simulate icons -->231      <svg class="icon" viewBox="0 0 24 24"><path fill="#0b3d2f" d="M12 2l4 8-8 0 4-8zm0 20a8 8 0 1 0 0-16 8 8 0 0 0 0 16z"/></svg>232      <svg class="icon" viewBox="0 0 24 24"><circle cx="12" cy="12" r="8" fill="#0b3d2f"/></svg>233      <svg class="icon" viewBox="0 0 24 24"><rect x="3" y="10" width="14" height="9" rx="2" fill="#0b3d2f"/><rect x="19" y="7" width="2" height="12" fill="#0b3d2f"/></svg>234    </div>235  </div>236 237  <!-- Underlying page -->238  <div class="page">239    <div class="header-row">240      <div class="avatar">👤</div>241      <div class="title">Add Fitbit profile info</div>242    </div>243    <div class="desc">244      Your profile info helps personalize some metrics. You can choose what to share and settings later in Privacy.245    </div>246 247    <div class="form-row">248      <div class="field"><span>Height</span><span class="value">169 cm</span></div>249      <div class="field"><span>Sex</span><span class="value">Prefer not to say ▾</span></div>250    </div>251 252    <div class="footer">253      <div class="exit">Exit</div>254      <div class="cta">Save &amp; continue</div>255    </div>256  </div>257 258  <!-- Overlay + Modal -->259  <div class="overlay"></div>260 261  <div class="modal">262    <h2>Weight</h2>263    <div class="subtitle">264      Fitbit uses weight to estimate calories and calculate needs265    </div>266 267    <div class="segmented">268      <div class="seg-item active">269        <svg class="check" viewBox="0 0 24 24">270          <path d="M20 6L9 17l-5-5" stroke="#0b3d2f" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>271        </svg>272        KG273      </div>274      <div class="seg-item">STONE</div>275      <div class="seg-item">LBS</div>276    </div>277 278    <div class="spinner">279      <div class="faint">69 kg</div>280      <div class="spin-line"></div>281      <div class="current">70 kg</div>282      <div class="spin-line"></div>283      <div class="faint">71 kg</div>284    </div>285 286    <div class="modal-footer">287      <div class="btn">Cancel</div>288      <div class="btn">OK</div>289    </div>290  </div>291 292</div>293</body>294</html>