GD-ML/AndroidCode

1<html lang="en">2<head>3<meta charset="UTF-8">4<meta name="viewport" content="width=1080, initial-scale=1.0">5<title>Fitbit Profile Info</title>6<style>7  body { margin:0; padding:0; background:transparent; font-family: "Roboto", "Segoe UI", Arial, sans-serif; }8  #render-target {9    width:1080px;10    height:2400px;11    position:relative;12    overflow:hidden;13    background:#ffffff;14    color:#1c1c1c;15  }16 17  /* Status bar */18  .status-bar {19    position:absolute;20    left:0; top:0;21    width:100%;22    height:110px;23    padding:0 48px;24    box-sizing:border-box;25    display:flex;26    align-items:center;27    justify-content:space-between;28    color:#1f2a28;29    font-size:36px;30    letter-spacing:1px;31  }32  .status-icons {33    display:flex; gap:26px; align-items:center;34  }35  .ic {36    width:38px; height:38px;37  }38  .ic svg { width:100%; height:100%; fill:#2d3a37; }39 40  /* Content */41  .content {42    position:absolute;43    left:60px;44    right:60px;45    top:160px;46    bottom:0;47  }48 49  .hero-icon {50    width:120px; height:120px; border-radius:60px;51    border:4px solid #2f766b;52    display:flex; align-items:center; justify-content:center;53    color:#2f766b; margin-bottom:38px;54  }55  .hero-icon svg { width:64px; height:64px; fill:#2f766b; }56 57  .title {58    font-size:84px; line-height:1.1; font-weight:700;59    margin:8px 0 28px 0;60    color:#0f1f1b;61  }62 63  .desc {64    font-size:36px; line-height:52px; color:#5e6b68;65    max-width:920px;66  }67 68  .section-title {69    margin-top:64px;70    font-size:44px; font-weight:700; color:#23302e;71  }72 73  /* Inputs */74  .form {75    margin-top:28px;76    width:960px;77  }78  .row {79    display:flex; gap:48px;80    margin-bottom:38px;81  }82  .field {83    flex:1;84  }85  .label {86    font-size:30px; color:#3c6c64; margin:10px 0 12px 18px;87  }88  .input {89    height:150px;90    border:3px solid #d6ddd9;91    border-radius:20px;92    display:flex; align-items:center; padding:0 26px;93    font-size:48px; color:#1b2a27;94    box-sizing:border-box;95  }96  .input.active {97    border-color:#1f6e63;98    box-shadow:0 0 0 2px rgba(31,110,99,0.05) inset;99  }100 101  /* Sex dropdown */102  .dropdown {103    width:960px;104    position:relative;105  }106  .dropdown .input {107    justify-content:space-between;108  }109  .caret {110    width:28px; height:28px; margin-left:12px;111  }112  .caret svg { width:100%; height:100%; fill:#24433f; transform:rotate(180deg); }113 114  .menu {115    position:absolute;116    left:0;117    right:0;118    top:150px;119    background:#e5eeec;120    border:2px solid #cfd8d4;121    border-radius:18px;122    padding:26px 0;123    box-shadow:0 10px 30px rgba(0,0,0,0.08);124  }125  .menu-item {126    padding:34px 32px;127    font-size:44px; color:#1b2b28;128  }129 130  /* Bottom actions */131  .bottom {132    position:absolute;133    left:60px; right:60px; bottom:80px;134    display:flex; align-items:center; justify-content:space-between;135  }136  .exit {137    font-size:44px; color:#1f6e63; text-decoration:none;138  }139  .btn {140    background:#1f6e63;141    color:#fff;142    font-size:44px; font-weight:600;143    padding:34px 56px;144    border-radius:90px;145    min-width:520px;146    text-align:center;147    box-shadow:0 6px 14px rgba(31,110,99,0.25);148  }149</style>150</head>151<body>152<div id="render-target">153 154  <!-- Status bar -->155  <div class="status-bar">156    <div>10:09</div>157    <div class="status-icons">158      <div class="ic">159        <svg viewBox="0 0 24 24"><path d="M12 3c4.97 0 9 4.03 9 9h-2c0-3.86-3.14-7-7-7s-7 3.14-7 7H3c0-4.97 4.03-9 9-9zm0 6c1.66 0 3 1.34 3 3h-2a1 1 0 10-2 0H9c0-1.66 1.34-3 3-3zm0 6a3 3 0 003-3h2c0 2.76-2.24 5-5 5v-2z"/></svg>160      </div>161      <div class="ic">162        <svg viewBox="0 0 24 24"><path d="M2 18h2a14 14 0 0114-14V2C8.82 2 2 8.82 2 18zm4 0h2c0-6.63 5.37-12 12-12V4C10.95 4 6 8.95 6 18zm4 0h2c0-3.87 3.13-7 7-7v-2c-4.97 0-9 4.03-9 9z"/></svg>163      </div>164      <div class="ic">165        <svg viewBox="0 0 24 24"><path d="M19 7v4h-2V9H7v12h4v2H5V7h14zM17 3h2v2h2v2h-2v2h-2V7h-2V5h2V3z"/></svg>166      </div>167    </div>168  </div>169 170  <div class="content">171    <div class="hero-icon">172      <svg viewBox="0 0 24 24"><path d="M12 12a4 4 0 100-8 4 4 0 000 8zm0 2c-4.42 0-8 2.24-8 5v1h16v-1c0-2.76-3.58-5-8-5z"/></svg>173    </div>174 175    <div class="title">Add Fitbit profile info</div>176 177    <div class="desc">178      Your profile info helps personalize some metrics, like stride length and speed. To choose who sees this info, go to sharing settings in your Account > Social &amp; Sharing > Privacy.179    </div>180 181    <div class="section-title">Your profile info</div>182 183    <div class="form">184      <div class="row">185        <div class="field">186          <div class="label">Height</div>187          <div class="input">165 cm</div>188        </div>189        <div class="field">190          <div class="label">Weight</div>191          <div class="input">74 kg</div>192        </div>193      </div>194 195      <div class="field dropdown">196        <div class="label">Sex</div>197        <div class="input active">198          Female199          <span class="caret">200            <svg viewBox="0 0 24 24"><path d="M7 14l5-5 5 5H7z"/></svg>201          </span>202        </div>203 204        <!-- Opened menu -->205        <div class="menu">206          <div class="menu-item">Male</div>207          <div class="menu-item">Female</div>208        </div>209      </div>210    </div>211  </div>212 213  <div class="bottom">214    <a class="exit" href="#">Exit</a>215    <div class="btn">Save &amp; continue</div>216  </div>217 218</div>219</body>220</html>