GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<title>Mobile UI - Weight & Health Connect</title>5<style>6  body { margin: 0; padding: 0; background: transparent; font-family: "Inter", Arial, sans-serif; }7  * { box-sizing: border-box; }8 9  #render-target {10    position: relative;11    width: 1080px;12    height: 2400px;13    overflow: hidden;14    background: #F2F2F4;15  }16 17  /* Status bar */18  .status-bar {19    position: absolute;20    top: 0;21    left: 0;22    width: 1080px;23    height: 96px;24    display: flex;25    align-items: center;26    padding: 0 36px;27    color: #0C0C0E;28    font-weight: 600;29    font-size: 38px;30  }31  .status-right {32    margin-left: auto;33    display: flex;34    align-items: center;35    gap: 24px;36  }37  .icon {38    width: 42px;39    height: 42px;40  }41 42  /* Back and skip */43  .top-actions {44    position: absolute;45    top: 116px;46    left: 28px;47    right: 28px;48    height: 80px;49  }50  .back-btn {51    position: absolute;52    left: 0;53    top: 12px;54    width: 64px;55    height: 64px;56  }57  .skip {58    position: absolute;59    right: 0;60    top: 6px;61    font-size: 42px;62    color: #2E2E33;63    font-weight: 600;64  }65 66  /* Progress line */67  .progress-line {68    position: absolute;69    top: 160px;70    left: 180px;71    width: 720px;72    height: 12px;73    border-radius: 12px;74    background: #D5D8E1;75  }76  .progress-line::after {77    content: "";78    display: block;79    width: 600px;80    height: 12px;81    border-radius: 12px;82    background: #153E99;83  }84 85  /* Title and description */86  .title {87    position: absolute;88    top: 236px;89    left: 72px;90    right: 72px;91    font-size: 92px;92    line-height: 1.08;93    font-weight: 800;94    color: #0F1420;95  }96  .subtitle {97    position: absolute;98    top: 450px;99    left: 72px;100    right: 72px;101    font-size: 42px;102    line-height: 1.35;103    color: #3C3F48;104    font-weight: 600;105  }106 107  /* Weight section */108  .section-label {109    position: absolute;110    top: 640px;111    left: 72px;112    font-size: 64px;113    font-weight: 800;114    color: #12131A;115  }116 117  .unit-toggle {118    position: absolute;119    top: 706px;120    right: 72px;121    width: 280px;122    height: 96px;123    border-radius: 48px;124    background: #EAEAF0;125    display: flex;126    align-items: center;127    padding: 8px;128    gap: 8px;129    font-weight: 700;130  }131  .unit-toggle .opt {132    flex: 1;133    height: 80px;134    border-radius: 40px;135    display: flex;136    align-items: center;137    justify-content: center;138    font-size: 40px;139    color: #5A5E69;140  }141  .unit-toggle .active {142    background: linear-gradient(0deg, #1E4FDB, #1E4FDB);143    color: #FFFFFF;144  }145 146  .weight-row {147    position: absolute;148    top: 830px;149    left: 72px;150    right: 72px;151    display: flex;152    align-items: baseline;153    gap: 24px;154  }155  .weight-value {156    font-size: 160px;157    font-weight: 800;158    color: #16327A;159    letter-spacing: 1px;160  }161  .weight-unit {162    font-size: 56px;163    font-weight: 800;164    color: #121212;165    margin-top: 36px;166  }167 168  .scale {169    position: absolute;170    top: 1040px;171    left: 72px;172    right: 72px;173    height: 220px;174  }175  .scale .center-line {176    position: absolute;177    left: 50%;178    transform: translateX(-50%);179    top: 0;180    width: 6px;181    height: 180px;182    background: #1E4FDB;183    border-radius: 3px;184  }185  .scale .ticks {186    position: absolute;187    bottom: 0;188    left: 0;189    right: 0;190    display: flex;191    justify-content: space-between;192    padding: 0 120px;193    color: #676B73;194    font-size: 44px;195    font-weight: 700;196  }197 198  /* Dim overlay */199  .dim {200    position: absolute;201    left: 0; top: 0;202    width: 1080px; height: 2400px;203    background: rgba(0,0,0,0.24);204  }205 206  /* Bottom sheet */207  .bottom-sheet {208    position: absolute;209    left: 0;210    bottom: 0;211    width: 1080px;212    height: 980px;213    background: #FFFFFF;214    border-top-left-radius: 56px;215    border-top-right-radius: 56px;216    box-shadow: 0 -12px 24px rgba(0,0,0,0.2);217    padding: 72px 72px 40px 72px;218  }219  .sheet-title {220    font-size: 64px;221    font-weight: 800;222    color: #0D0F14;223    line-height: 1.2;224    margin-bottom: 26px;225  }226  .sheet-sub {227    font-size: 40px;228    color: #6B6F79;229    font-weight: 600;230    line-height: 1.4;231    margin-bottom: 60px;232  }233  .icons-row {234    display: flex;235    align-items: center;236    gap: 60px;237    margin-bottom: 80px;238  }239  .img-ph {240    width: 200px;241    height: 200px;242    background: #E0E0E0;243    border: 1px solid #BDBDBD;244    border-radius: 28px;245    display: flex;246    align-items: center;247    justify-content: center;248    color: #757575;249    font-weight: 700;250    text-align: center;251    padding: 16px;252  }253  .arrow {254    font-size: 80px;255    color: #97A0B5;256    font-weight: 800;257  }258 259  .primary-btn {260    width: 936px;261    height: 144px;262    border-radius: 72px;263    background: linear-gradient(90deg, #2A66FF, #1E4FDB);264    color: #FFFFFF;265    font-size: 52px;266    font-weight: 900;267    display: flex;268    align-items: center;269    justify-content: center;270    margin: 0 auto 36px auto;271    letter-spacing: 1px;272  }273  .secondary-btn {274    width: 936px;275    height: 144px;276    border-radius: 72px;277    border: 2px solid #E1E3EA;278    background: #FFFFFF;279    color: #121212;280    font-size: 52px;281    font-weight: 900;282    display: flex;283    align-items: center;284    justify-content: center;285    margin: 0 auto;286    letter-spacing: 1px;287  }288 289  /* Home indicator */290  .home-indicator {291    position: absolute;292    left: 50%;293    bottom: 34px;294    transform: translateX(-50%);295    width: 380px;296    height: 12px;297    background: #121212;298    border-radius: 8px;299    opacity: 0.75;300  }301</style>302</head>303<body>304<div id="render-target">305 306  <!-- Status bar -->307  <div class="status-bar">308    <div>9:29</div>309    <div class="status-right">310      <!-- Simple WiFi icon -->311      <svg class="icon" viewBox="0 0 48 48">312        <path d="M24 36a4 4 0 1 0 0.01 0z" fill="#121212"></path>313        <path d="M8 22c8-8 24-8 32 0" stroke="#121212" stroke-width="4" fill="none" stroke-linecap="round"></path>314        <path d="M14 28c5-5 15-5 20 0" stroke="#121212" stroke-width="4" fill="none" stroke-linecap="round"></path>315      </svg>316      <!-- Battery icon -->317      <svg class="icon" viewBox="0 0 48 48">318        <rect x="2" y="12" width="38" height="24" rx="4" ry="4" fill="none" stroke="#121212" stroke-width="4"></rect>319        <rect x="6" y="16" width="26" height="16" fill="#121212"></rect>320        <rect x="40" y="18" width="6" height="12" rx="2" ry="2" fill="#121212"></rect>321      </svg>322    </div>323  </div>324 325  <!-- Back and Skip -->326  <div class="top-actions">327    <svg class="back-btn" viewBox="0 0 48 48">328      <path d="M30 8 L14 24 L30 40" stroke="#121212" stroke-width="6" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>329    </svg>330    <div class="skip">Skip</div>331  </div>332 333  <!-- Progress -->334  <div class="progress-line"></div>335 336  <!-- Title and description -->337  <div class="title">Let us know you better</div>338  <div class="subtitle">Let us know you better to help boost your workout results</div>339 340  <!-- Weight section -->341  <div class="section-label">Weight</div>342 343  <div class="unit-toggle">344    <div class="opt">kg</div>345    <div class="opt active">lb</div>346  </div>347 348  <div class="weight-row">349    <div class="weight-value">165.0</div>350    <div class="weight-unit">lb</div>351  </div>352 353  <div class="scale">354    <div class="center-line"></div>355    <div class="ticks">356      <div>163</div>357      <div>164</div>358      <div>166</div>359      <div>167</div>360    </div>361  </div>362 363  <!-- Dim overlay + Bottom sheet -->364  <div class="dim"></div>365 366  <div class="bottom-sheet">367    <div class="sheet-title">Share data with Health Connect & other apps</div>368    <div class="sheet-sub">Share your health data with other apps to save your time.</div>369 370    <div class="icons-row">371      <div class="img-ph">[IMG: Health Connect Icon]</div>372      <div class="arrow">⇄</div>373      <div class="img-ph" style="background:#E0B0B0;">[IMG: Fitness App Icon]</div>374    </div>375 376    <div class="primary-btn">SET UP HEALTH CONNECT</div>377    <div class="secondary-btn">NOT NOW</div>378  </div>379 380  <div class="home-indicator"></div>381 382</div>383</body>384</html>