GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<title>Onboarding - Gender Selection</title>5<style>6  body {7    margin: 0;8    padding: 0;9    background: transparent;10    font-family: Arial, Helvetica, sans-serif;11  }12  #render-target {13    width: 1080px;14    height: 2400px;15    position: relative;16    overflow: hidden;17    background: #FFFFFF;18  }19 20  /* Status bar */21  .status-bar {22    position: absolute;23    top: 0;24    left: 0;25    width: 1080px;26    height: 120px;27    display: flex;28    align-items: center;29    justify-content: space-between;30    padding: 0 40px;31    box-sizing: border-box;32    color: #1a1a1a;33    font-weight: 600;34    font-size: 40px;35  }36  .sb-right {37    display: flex;38    gap: 28px;39    align-items: center;40  }41  .icon {42    width: 42px;43    height: 42px;44  }45 46  /* Progress and skip */47  .progress-wrap {48    position: absolute;49    top: 145px;50    left: 170px;51    width: 740px;52    height: 22px;53  }54  .progress-track {55    width: 740px;56    height: 12px;57    background: #E6E6E6;58    border-radius: 8px;59    position: relative;60  }61  .progress-fill {62    width: 120px;63    height: 12px;64    background: #2667FF;65    border-radius: 8px;66  }67  .skip {68    position: absolute;69    top: 140px;70    right: 40px;71    font-size: 44px;72    color: #8A8A8A;73    font-weight: 600;74  }75 76  /* Headings */77  .title {78    position: absolute;79    top: 260px;80    left: 60px;81    width: 960px;82    text-align: center;83    font-size: 86px;84    font-weight: 800;85    color: #000;86    letter-spacing: -0.5px;87  }88  .subtitle {89    position: absolute;90    top: 410px;91    left: 60px;92    width: 960px;93    text-align: center;94    font-size: 44px;95    color: #3c3c3c;96  }97 98  /* Figures area */99  .figures {100    position: absolute;101    top: 620px;102    left: 0;103    width: 1080px;104    height: 1100px;105  }106 107  /* Female (dimmed) */108  .female-placeholder {109    position: absolute;110    right: 60px;111    top: 120px;112    width: 360px;113    height: 880px;114    background: #E0E0E0;115    border: 1px solid #BDBDBD;116    border-radius: 20px;117    display: flex;118    align-items: center;119    justify-content: center;120    color: #757575;121    opacity: 0.45;122    box-shadow: 0 20px 40px rgba(0,0,0,0.08);123  }124 125  /* Blue tile behind male */126  .blue-tile {127    position: absolute;128    left: 300px;129    top: 300px;130    width: 480px;131    height: 360px;132    background: #1F56FF;133    border-radius: 80px;134    transform: rotate(0deg);135    filter: saturate(1.2);136  }137 138  /* Male main placeholder */139  .male-placeholder {140    position: absolute;141    left: 270px;142    top: 60px;143    width: 540px;144    height: 1000px;145    background: #E0E0E0;146    border: 1px solid #BDBDBD;147    border-radius: 24px;148    display: flex;149    align-items: center;150    justify-content: center;151    color: #555;152    box-shadow: 0 26px 50px rgba(0,0,0,0.12);153  }154 155  .gender-label {156    position: absolute;157    bottom: 0;158    left: 0;159    width: 1080px;160    text-align: center;161    font-size: 68px;162    font-weight: 700;163    color: #101010;164    padding-bottom: 120px;165  }166 167  /* Next button */168  .cta {169    position: absolute;170    left: 60px;171    bottom: 200px;172    width: 960px;173    height: 170px;174    border-radius: 100px;175    background: linear-gradient(90deg, #2A69FF, #0F45FF);176    box-shadow: 0 18px 40px rgba(47, 93, 255, 0.35);177    display: flex;178    align-items: center;179    justify-content: center;180    color: #FFFFFF;181    font-size: 64px;182    font-weight: 800;183    letter-spacing: 1px;184  }185 186  /* Home indicator */187  .home-indicator {188    position: absolute;189    left: 240px;190    bottom: 80px;191    width: 600px;192    height: 14px;193    background: #000000;194    opacity: 0.15;195    border-radius: 10px;196  }197</style>198</head>199<body>200<div id="render-target">201 202  <!-- Status Bar -->203  <div class="status-bar">204    <div class="sb-left">9:26</div>205    <div class="sb-right">206      <!-- Signal icon -->207      <svg class="icon" viewBox="0 0 24 24">208        <path d="M3 18h2c0-6 4-10 10-10v-2C8 6 3 11 3 18z" fill="#333"/>209        <path d="M7 18h2c0-4 3-7 7-7v-2c-6 0-9 4-9 9z" fill="#333"/>210        <rect x="12" y="18" width="2" height="2" fill="#333"/>211      </svg>212      <!-- Battery icon -->213      <svg class="icon" viewBox="0 0 28 16">214        <rect x="1" y="2" width="22" height="12" rx="2" ry="2" fill="none" stroke="#333" stroke-width="2"/>215        <rect x="3" y="4" width="16" height="8" rx="1" fill="#333"/>216        <rect x="24" y="5" width="3" height="6" rx="1" fill="#333"/>217      </svg>218    </div>219  </div>220 221  <!-- Progress bar and Skip -->222  <div class="progress-wrap">223    <div class="progress-track">224      <div class="progress-fill"></div>225    </div>226  </div>227  <div class="skip">Skip</div>228 229  <!-- Headings -->230  <div class="title">What's your gender?</div>231  <div class="subtitle">Let us know you better</div>232 233  <!-- Figures -->234  <div class="figures">235    <div class="male-placeholder">[IMG: Male Athlete Standing]</div>236    <div class="blue-tile"></div>237    <div class="female-placeholder">[IMG: Female Athlete]</div>238    <div class="gender-label">Male</div>239  </div>240 241  <!-- CTA Button -->242  <div class="cta">NEXT</div>243 244  <!-- Home Indicator -->245  <div class="home-indicator"></div>246 247</div>248</body>249</html>