GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<meta name="viewport" content="width=device-width, initial-scale=1.0">5<title>Fitbit Height Modal Mock</title>6<style>7  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }8  #render-target {9    width: 1080px;10    height: 2400px;11    position: relative;12    overflow: hidden;13    background: #F4F6F5;14  }15 16  /* Status bar */17  .status-bar {18    position: absolute;19    top: 0;20    left: 0;21    width: 1080px;22    height: 110px;23    padding: 0 36px;24    box-sizing: border-box;25    display: flex;26    align-items: center;27    justify-content: space-between;28    color: #0c3b32;29    font-weight: 600;30    font-size: 40px;31  }32  .status-icons {33    display: flex;34    gap: 26px;35    align-items: center;36  }37  .icon {38    width: 36px; height: 36px;39  }40 41  /* Underlying page (dimmed by overlay later) */42  .page {43    position: absolute;44    top: 140px;45    left: 64px;46    right: 64px;47    color: #1d2b27;48  }49  .avatar {50    width: 120px;51    height: 120px;52    border-radius: 60px;53    border: 8px solid #0e4a3e;54    display: flex;55    align-items: center;56    justify-content: center;57    color: #0e4a3e;58    margin-bottom: 40px;59  }60  .title {61    font-size: 88px;62    font-weight: 700;63    margin: 20px 0 20px 0;64    letter-spacing: -1px;65  }66  .desc {67    font-size: 38px;68    line-height: 52px;69    color: #4c5f5a;70    max-width: 900px;71  }72  .save-bar {73    position: absolute;74    bottom: 110px;75    right: 64px;76  }77  .pill-btn {78    background: #0E4A3E;79    color: #E9F4F1;80    padding: 34px 54px;81    border-radius: 64px;82    font-size: 42px;83    box-shadow: 0 6px 16px rgba(0,0,0,0.25);84  }85  .exit-link {86    position: absolute;87    bottom: 130px;88    left: 64px;89    color: #1e4b42;90    font-size: 42px;91  }92 93  /* Dim overlay */94  .overlay {95    position: absolute;96    inset: 0;97    background: rgba(0,0,0,0.35);98  }99 100  /* Modal */101  .modal {102    position: absolute;103    top: 360px;104    left: 90px;105    width: 900px;106    height: 1460px;107    background: #FFFFFF;108    border-radius: 64px;109    box-shadow: 0 10px 40px rgba(0,0,0,0.25);110    padding: 70px 70px 40px 70px;111    box-sizing: border-box;112    display: flex;113    flex-direction: column;114  }115  .modal h1 {116    margin: 0 0 18px 0;117    font-size: 76px;118    color: #1d2b27;119    font-weight: 700;120  }121  .modal .sub {122    font-size: 40px;123    color: #546965;124    line-height: 56px;125    margin-bottom: 50px;126  }127 128  /* Segmented control */129  .segment {130    display: flex;131    border-radius: 80px;132    overflow: hidden;133    border: 2px solid #BFD8CF;134    width: 640px;135    height: 140px;136    margin-bottom: 50px;137  }138  .seg {139    flex: 1;140    display: flex;141    align-items: center;142    justify-content: center;143    font-size: 44px;144    color: #264e45;145  }146  .seg.selected {147    background: #CFE8DE;148    position: relative;149    font-weight: 700;150  }151  .seg.selected .check {152    position: absolute;153    left: 36px;154    width: 34px;155    height: 34px;156  }157 158  /* Wheel-like selector (simplified) */159  .wheel {160    position: relative;161    margin-top: 40px;162    margin-bottom: 40px;163    height: 560px;164    display: flex;165    align-items: center;166    justify-content: center;167  }168  .wheel .option {169    position: absolute;170    width: 100%;171    text-align: center;172    color: #AEB9B6;173    font-size: 54px;174  }175  .wheel .option.mid {176    color: #1d2b27;177    font-size: 64px;178    font-weight: 700;179  }180  .wheel .line {181    position: absolute;182    width: 380px;183    height: 4px;184    background: #788a86;185    left: 50%;186    transform: translateX(-50%);187  }188  .wheel .line.top { top: 190px; }189  .wheel .line.bottom { bottom: 190px; }190 191  /* Divider near bottom of modal */192  .divider {193    margin-top: 40px;194    height: 2px;195    width: 100%;196    background: #E4E9E7;197  }198 199  /* Dialog actions */200  .actions {201    margin-top: auto;202    display: flex;203    justify-content: flex-end;204    gap: 70px;205    align-items: center;206  }207  .btn-text {208    font-size: 48px;209    color: #1f6a5c;210  }211</style>212</head>213<body>214<div id="render-target">215 216  <!-- Status bar -->217  <div class="status-bar">218    <div>10:04</div>219    <div class="status-icons">220      <!-- simple inline icons -->221      <svg class="icon" viewBox="0 0 24 24" fill="#0e4a3e">222        <path d="M3 12l3-4 4 5 3-3 8 10H3z"/>223      </svg>224      <svg class="icon" viewBox="0 0 24 24" fill="#0e4a3e">225        <path d="M12 2l4 4h-3v7h-2V6H8l4-4zM5 20h14v2H5z"/>226      </svg>227      <svg class="icon" viewBox="0 0 24 24" fill="#0e4a3e">228        <circle cx="12" cy="12" r="2"/>229      </svg>230      <svg class="icon" viewBox="0 0 24 24" fill="#0e4a3e">231        <path d="M21 8v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8h18zm-2-4H5L3 8h18l-2-4z"/>232      </svg>233      <svg class="icon" viewBox="0 0 24 24" fill="#0e4a3e">234        <path d="M16 4h2v16h-2zM6 10h2v10H6zM11 6h2v14h-2z"/>235      </svg>236    </div>237  </div>238 239  <!-- Underlying page content -->240  <div class="page">241    <div class="avatar">242      <!-- simple user icon -->243      <svg width="64" height="64" viewBox="0 0 24 24" fill="#0e4a3e">244        <circle cx="12" cy="8" r="4"/>245        <path d="M4 20c0-4 4-6 8-6s8 2 8 6H4z"/>246      </svg>247    </div>248    <div class="title">Add Fitbit profile info</div>249    <div class="desc">250      Your profile info helps personalize some metrics. Fitbit uses your information to251      estimate calories and other stats. Choose your unit preference in Settings.252    </div>253  </div>254 255  <div class="exit-link">Exit</div>256  <div class="save-bar">257    <div class="pill-btn">Save &amp; continue</div>258  </div>259 260  <!-- Dim overlay and modal -->261  <div class="overlay"></div>262 263  <div class="modal">264    <h1>Height</h1>265    <div class="sub">Fitbit uses height to estimate calories and stride length</div>266 267    <div class="segment">268      <div class="seg selected">269        <svg class="check" viewBox="0 0 24 24" fill="#1f6a5c">270          <path d="M9 16.2l-3.5-3.5L4 14.2 9 19l11-11-1.5-1.5z"/>271        </svg>272        CM273      </div>274      <div class="seg">FEET</div>275    </div>276 277    <div class="wheel">278      <div class="option" style="top: 120px;">169 cm</div>279      <div class="option mid" style="top: 240px;">170 cm</div>280      <div class="option" style="top: 360px;">171 cm</div>281      <div class="line top"></div>282      <div class="line bottom"></div>283    </div>284 285    <div class="divider"></div>286 287    <div class="actions">288      <div class="btn-text">Cancel</div>289      <div class="btn-text">OK</div>290    </div>291  </div>292 293</div>294</body>295</html>