GD-ML/AndroidCode

1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Fitbit Profile Info UI</title>5<style>6  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }7  #render-target {8    position: relative;9    width: 1080px;10    height: 2400px;11    overflow: hidden;12    background: #F3F5F3;13  }14 15  /* Status bar */16  .status-bar {17    position: absolute;18    top: 0;19    left: 0;20    width: 1080px;21    height: 120px;22    display: flex;23    align-items: center;24    justify-content: space-between;25    padding: 0 40px;26    color: #2F3A3A;27    font-weight: 600;28    font-size: 40px;29  }30  .status-icons {31    display: flex;32    align-items: center;33    gap: 26px;34  }35  .status-icon { width: 44px; height: 44px; }36 37  /* Content */38  .content {39    position: absolute;40    top: 140px;41    left: 60px;42    right: 60px;43    bottom: 0;44  }45 46  .avatar {47    width: 108px;48    height: 108px;49    border-radius: 54px;50    border: 8px solid #1E6E61;51    display: flex;52    align-items: center;53    justify-content: center;54    color: #1E6E61;55    font-weight: 700;56    margin-bottom: 36px;57  }58 59  .title {60    font-size: 72px;61    line-height: 84px;62    color: #1A1A1A;63    font-weight: 700;64    margin: 14px 0 22px 0;65  }66 67  .subtitle {68    font-size: 36px;69    line-height: 52px;70    color: #5F6A6A;71    max-width: 930px;72  }73 74  .section-title {75    margin-top: 56px;76    font-size: 38px;77    color: #2E3333;78    font-weight: 700;79  }80 81  .fields-row {82    display: flex;83    gap: 40px;84    margin-top: 30px;85  }86 87  .field {88    flex: 1;89  }90  .label {91    font-size: 30px;92    color: #5F6A6A;93    margin-bottom: 12px;94  }95  .input-box {96    height: 160px;97    border: 2px solid #D2D7D6;98    border-radius: 18px;99    background: #FFFFFF;100    display: flex;101    align-items: center;102    padding: 0 34px;103    font-size: 56px;104    color: #1A1A1A;105    box-shadow: inset 0 1px 0 rgba(0,0,0,0.02);106  }107 108  .full-field { margin-top: 36px; }109 110  .dropdown {111    position: relative;112    width: 960px;113  }114  .dropdown .input-box { justify-content: space-between; }115  .chev {116    width: 36px;117    height: 36px;118    margin-left: 20px;119  }120 121  .hint {122    margin-top: 26px;123    font-size: 34px;124    line-height: 48px;125    color: #6A7573;126    max-width: 960px;127  }128 129  /* Bottom actions */130  .actions {131    position: absolute;132    left: 60px;133    right: 60px;134    bottom: 160px;135    display: flex;136    align-items: center;137    justify-content: space-between;138  }139  .link-exit {140    font-size: 44px;141    color: #1E6E61;142    font-weight: 700;143  }144  .btn-primary {145    background: #1E6E61;146    color: #FFFFFF;147    font-size: 44px;148    font-weight: 700;149    padding: 34px 46px;150    border-radius: 72px;151    min-width: 520px;152    text-align: center;153    box-shadow: 0 6px 16px rgba(30, 110, 97, 0.25);154  }155 156  /* Gesture bar */157  .gesture {158    position: absolute;159    bottom: 80px;160    left: 50%;161    transform: translateX(-50%);162    width: 500px;163    height: 16px;164    background: #7B7B7B;165    border-radius: 10px;166  }167</style>168</head>169<body>170<div id="render-target">171  <!-- Status Bar -->172  <div class="status-bar">173    <div>10:03</div>174    <div class="status-icons">175      <!-- Simple inline SVG icons -->176      <svg class="status-icon" viewBox="0 0 24 24">177        <circle cx="12" cy="12" r="10" fill="#4C5A57"></circle>178      </svg>179      <svg class="status-icon" viewBox="0 0 24 24">180        <path d="M2 14c4-4 8-6 10-6s6 2 10 6" stroke="#4C5A57" stroke-width="3" fill="none" stroke-linecap="round"></path>181        <circle cx="12" cy="14" r="3" fill="#4C5A57"></circle>182      </svg>183      <svg class="status-icon" viewBox="0 0 24 24">184        <rect x="2" y="6" width="18" height="12" rx="3" stroke="#4C5A57" stroke-width="3" fill="none"></rect>185        <rect x="4" y="8" width="12" height="8" fill="#4C5A57"></rect>186      </svg>187    </div>188  </div>189 190  <!-- Content -->191  <div class="content">192    <div class="avatar">👤</div>193 194    <div class="title">Add Fitbit profile info</div>195 196    <div class="subtitle">197      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 &gt; Social &amp; Sharing &gt; Privacy.198    </div>199 200    <div class="section-title">Your profile info</div>201 202    <div class="fields-row">203      <div class="field">204        <div class="label">Height</div>205        <div class="input-box">172 cm</div>206      </div>207      <div class="field">208        <div class="label">Weight</div>209        <div class="input-box">60 kg</div>210      </div>211    </div>212 213    <div class="full-field">214      <div class="label">Sex</div>215      <div class="dropdown">216        <div class="input-box">217          <div>Female</div>218          <svg class="chev" viewBox="0 0 24 24">219            <path d="M6 9l6 6 6-6" stroke="#6A7573" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>220          </svg>221        </div>222      </div>223    </div>224 225    <div class="hint">226      Fitbit uses sex to calculate metrics like calories burned, and to provide reference points you can use for comparison227    </div>228  </div>229 230  <!-- Bottom actions -->231  <div class="actions">232    <div class="link-exit">Exit</div>233    <div class="btn-primary">Save &amp; continue</div>234  </div>235 236  <!-- Gesture bar -->237  <div class="gesture"></div>238</div>239</body>240</html>