GD-ML/AndroidCode

1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Fitness Onboarding - Weight & Height</title>5<meta name="viewport" content="width=1080, initial-scale=1.0">6<style>7  body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }8  #render-target {9    width: 1080px;10    height: 2400px;11    position: relative;12    overflow: hidden;13    background: #ffffff;14    color: #111;15  }16 17  /* Status bar */18  .status-bar {19    position: absolute;20    top: 0;21    left: 0;22    width: 1080px;23    height: 120px;24    display: flex;25    align-items: center;26    justify-content: space-between;27    padding: 0 54px;28    box-sizing: border-box;29    color: #111;30  }31  .status-time {32    font-weight: 600;33    font-size: 40px;34  }35  .status-icons {36    display: flex;37    gap: 24px;38    align-items: center;39  }40  .icon-signal, .icon-battery {41    width: 38px; height: 38px;42  }43 44  /* Top app controls */45  .top-controls {46    position: absolute;47    top: 130px;48    left: 0;49    width: 1080px;50    padding: 0 40px;51    box-sizing: border-box;52  }53  .back-btn {54    position: absolute;55    left: 40px;56    top: 20px;57    width: 70px; height: 70px;58    display: flex; align-items: center; justify-content: center;59  }60  .skip-btn {61    position: absolute;62    right: 40px;63    top: 20px;64    font-size: 44px;65    color: #777;66    font-weight: 600;67  }68  .progress-line {69    width: 600px;70    height: 10px;71    background: #2E5BFF;72    border-radius: 6px;73    margin: 70px auto 0 auto;74  }75 76  /* Headings */77  .content {78    position: absolute;79    top: 320px;80    left: 60px;81    right: 60px;82  }83  .title {84    font-size: 90px;85    font-weight: 800;86    letter-spacing: 0.5px;87  }88  .subtitle {89    margin-top: 22px;90    font-size: 44px;91    line-height: 1.35;92    color: #555;93    max-width: 900px;94  }95 96  /* Sections */97  .section {98    margin-top: 120px;99    position: relative;100  }101  .section .label {102    font-size: 64px;103    font-weight: 800;104    margin-bottom: 40px;105  }106 107  /* Toggle pill */108  .pill {109    position: absolute;110    right: 0;111    top: 0;112    background: #F0F0F3;113    border-radius: 50px;114    height: 110px;115    display: flex;116    align-items: center;117    padding: 8px;118    box-sizing: border-box;119    gap: 8px;120  }121  .pill span {122    height: 94px;123    min-width: 150px;124    padding: 0 30px;125    border-radius: 47px;126    display: flex;127    align-items: center;128    justify-content: center;129    font-size: 42px;130    font-weight: 700;131    color: #666;132  }133  .pill .active {134    background: #2267FF;135    color: #fff;136  }137 138  /* Big measurement */139  .measure-row {140    display: flex;141    align-items: baseline;142    gap: 16px;143  }144  .measure-value {145    font-size: 180px;146    font-weight: 800;147    color: #2B57FF;148    letter-spacing: 1px;149  }150  .measure-unit {151    font-size: 60px;152    font-weight: 700;153    color: #000;154    margin-top: 30px;155  }156 157  /* Slider mock */158  .slider {159    position: relative;160    margin-top: 40px;161    width: 960px;162    height: 170px;163    border-radius: 14px;164  }165  .ticks {166    position: absolute;167    left: 0; top: 60px;168    width: 100%; height: 70px;169    background:170      repeating-linear-gradient(to right,171        #e9e9ee 0px, #e9e9ee 6px, transparent 6px, transparent 22px);172  }173  .major-ticks {174    position: absolute;175    left: 0; top: 40px;176    width: 100%; height: 110px;177    background:178      repeating-linear-gradient(to right,179        transparent 0, transparent 100px, #cfcfde 100px, #cfcfde 104px);180    opacity: 0.8;181  }182  .center-indicator {183    position: absolute;184    left: 50%;185    transform: translateX(-2px);186    top: 0;187    width: 4px;188    height: 170px;189    background: #2B57FF;190    border-radius: 3px;191  }192  .scale-labels {193    position: absolute;194    width: 100%;195    top: 0;196    display: flex;197    justify-content: space-between;198    color: #8e8e98;199    font-size: 44px;200    font-weight: 700;201    padding: 0 10px;202  }203 204  /* Height specific larger parts */205  .height-measure .measure-value {206    font-size: 160px;207  }208  .height-measure .measure-unit {209    font-size: 60px;210    margin-left: 10px;211    color: #0a0a0a;212  }213 214  /* Bottom CTA */215  .cta {216    position: absolute;217    bottom: 120px;218    left: 60px;219    right: 60px;220    height: 180px;221    border-radius: 120px;222    background: linear-gradient(90deg, #2E5BFF, #184AFF);223    display: flex;224    align-items: center;225    justify-content: center;226    color: #fff;227    font-size: 64px;228    font-weight: 800;229    letter-spacing: 1px;230    box-shadow: 0 16px 40px rgba(41,93,255,0.35);231  }232 233  /* Simple SVG icons */234  svg { display: block; }235</style>236</head>237<body>238<div id="render-target">239  <!-- Status bar -->240  <div class="status-bar">241    <div class="status-time">9:30</div>242    <div class="status-icons">243      <!-- Signal icon -->244      <svg class="icon-signal" viewBox="0 0 24 24">245        <rect x="2" y="14" width="3" height="8" fill="#777"/>246        <rect x="7" y="11" width="3" height="11" fill="#777"/>247        <rect x="12" y="8" width="3" height="14" fill="#777"/>248        <rect x="17" y="5" width="3" height="17" fill="#777"/>249      </svg>250      <!-- Battery icon -->251      <svg class="icon-battery" viewBox="0 0 32 24">252        <rect x="1" y="4" width="26" height="16" rx="3" ry="3" fill="none" stroke="#777" stroke-width="2"/>253        <rect x="28" y="8" width="3" height="8" fill="#777"/>254        <rect x="3" y="6" width="20" height="12" fill="#777"/>255      </svg>256    </div>257  </div>258 259  <!-- Top controls -->260  <div class="top-controls">261    <div class="back-btn">262      <svg width="60" height="60" viewBox="0 0 24 24">263        <path d="M15 4 L7 12 L15 20" fill="none" stroke="#000" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>264      </svg>265    </div>266    <div class="skip-btn">Skip</div>267    <div class="progress-line"></div>268  </div>269 270  <!-- Content -->271  <div class="content">272    <div class="title">Let us know you better</div>273    <div class="subtitle">Let us know you better to help boost your workout results</div>274 275    <!-- Weight Section -->276    <div class="section">277      <div class="label">Weight</div>278      <div class="pill" style="width: 300px;">279        <span>kg</span>280        <span class="active">lb</span>281      </div>282 283      <div class="measure-row">284        <div class="measure-value">165.0</div>285        <div class="measure-unit">lb</div>286      </div>287 288      <div class="slider">289        <div class="scale-labels">290          <div>163</div>291          <div>164</div>292          <div>166</div>293          <div>167</div>294        </div>295        <div class="ticks"></div>296        <div class="major-ticks"></div>297        <div class="center-indicator"></div>298      </div>299    </div>300 301    <!-- Height Section -->302    <div class="section" style="margin-top: 160px;">303      <div class="label">Height</div>304      <div class="pill" style="width: 300px;">305        <span>cm</span>306        <span class="active">ft</span>307      </div>308 309      <div class="measure-row height-measure">310        <div class="measure-value">5</div>311        <div class="measure-unit">ft</div>312        <div class="measure-value">9</div>313        <div class="measure-unit">in</div>314      </div>315 316      <div class="slider">317        <div class="scale-labels">318          <div>4</div>319          <div>5</div>320          <div>6</div>321          <div>7</div>322        </div>323        <div class="ticks"></div>324        <div class="major-ticks"></div>325        <div class="center-indicator"></div>326      </div>327    </div>328  </div>329 330  <!-- CTA Button -->331  <div class="cta">GET MY PLAN</div>332</div>333</body>334</html>