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>Onboarding - Gender</title>6<style>7  body { margin: 0; padding: 0; background: transparent; }8  #render-target {9    width: 1080px;10    height: 2400px;11    position: relative;12    overflow: hidden;13    background: #FFFFFF;14    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, Helvetica, sans-serif;15    color: #0A0A0A;16  }17 18  /* Status bar */19  .status-bar {20    position: absolute;21    top: 0;22    left: 0;23    right: 0;24    height: 120px;25    padding: 0 36px;26    display: flex;27    align-items: center;28    justify-content: space-between;29    box-sizing: border-box;30  }31  .sb-left {32    display: flex;33    align-items: center;34    gap: 18px;35    font-weight: 600;36    color: #111;37    font-size: 40px;38  }39  .sb-right {40    display: flex;41    align-items: center;42    gap: 22px;43  }44  .chip {45    font-size: 36px;46    border: 2px solid #C7C7C7;47    padding: 6px 14px;48    border-radius: 10px;49    color: #333;50  }51  .icon {52    width: 44px; height: 44px;53  }54 55  /* Skip */56  .skip {57    position: absolute;58    top: 140px;59    right: 40px;60    font-size: 44px;61    color: #6C6C6C;62  }63 64  /* progress bar */65  .progress-wrap {66    position: absolute;67    top: 150px;68    left: 210px;69    width: 660px;70    height: 16px;71    background: #EAEAEA;72    border-radius: 10px;73    overflow: hidden;74  }75  .progress {76    width: 100px; /* small progress */77    height: 100%;78    background: #2F6BFF;79  }80 81  /* Headings */82  .title {83    position: absolute;84    top: 260px;85    left: 60px;86    right: 60px;87    font-size: 96px;88    line-height: 1.15;89    font-weight: 800;90    letter-spacing: -1px;91  }92  .subtitle {93    position: absolute;94    top: 468px;95    left: 60px;96    right: 60px;97    font-size: 46px;98    color: #6E6E6E;99  }100 101  /* Images area */102  .cards {103    position: absolute;104    top: 620px;105    left: 0;106    right: 0;107    padding: 0 70px;108    display: flex;109    justify-content: space-between;110    align-items: flex-end;111  }112  .figure {113    width: 420px;114    height: 1080px;115    background: #E0E0E0;116    border: 1px solid #BDBDBD;117    border-radius: 12px;118    display: flex;119    align-items: flex-end;120    justify-content: center;121    box-shadow: 0 20px 24px rgba(0,0,0,0.05);122  }123  .fig-label {124    position: absolute;125    bottom: 560px; /* below feet shadow area */126    font-size: 64px;127    font-weight: 800;128  }129 130  /* Labels under each card */131  .label-wrap {132    position: absolute;133    left: 120px;134    bottom: 590px;135    font-size: 64px;136    font-weight: 800;137  }138  .label-wrap.right {139    left: auto;140    right: 120px;141  }142 143  /* Next button */144  .cta {145    position: absolute;146    left: 60px;147    right: 60px;148    bottom: 210px;149    height: 180px;150    background: #E7E7E7;151    color: #B5B5B5;152    border-radius: 100px;153    display: flex;154    align-items: center;155    justify-content: center;156    font-size: 64px;157    font-weight: 800;158    letter-spacing: 1px;159  }160 161  /* Bottom safe area bar */162  .home-area {163    position: absolute;164    left: 0; right: 0; bottom: 0;165    height: 110px;166    background: #000;167    display: flex;168    align-items: center;169    justify-content: center;170  }171  .home-indicator {172    width: 500px;173    height: 10px;174    background: #CFCFCF;175    border-radius: 6px;176  }177 178  /* Helper text inside image placeholders */179  .img-text {180    color: #757575;181    font-size: 36px;182    padding-bottom: 28px;183    text-align: center;184  }185</style>186</head>187<body>188<div id="render-target">189 190  <!-- Status bar -->191  <div class="status-bar">192    <div class="sb-left">193      <div>9:25</div>194      <div class="chip">M</div>195    </div>196    <div class="sb-right">197      <!-- WiFi -->198      <svg class="icon" viewBox="0 0 24 24">199        <path fill="#333" d="M12 20l3-3H9l3 3zm6.6-6.6l-1.4 1.4C15.9 12.5 8.1 12.5 6.8 14.8L5.4 13.4c3.1-3.1 10.1-3.1 13.2 0zM20.8 9.2l-1.4 1.4C15.5 6.7 8.5 6.7 4.6 10.6L3.2 9.2c4.7-4.7 12.9-4.7 17.6 0z"/>200      </svg>201      <!-- Battery -->202      <svg class="icon" viewBox="0 0 28 24">203        <rect x="1" y="6" width="22" height="12" rx="2" ry="2" fill="none" stroke="#333" stroke-width="2"/>204        <rect x="3" y="8" width="14" height="8" fill="#333"/>205        <rect x="23" y="9" width="3" height="6" fill="#333"/>206      </svg>207    </div>208  </div>209 210  <!-- Skip -->211  <div class="skip">Skip</div>212 213  <!-- Progress bar -->214  <div class="progress-wrap">215    <div class="progress"></div>216  </div>217 218  <!-- Headings -->219  <div class="title">What's your gender?</div>220  <div class="subtitle">Let us know you better</div>221 222  <!-- Image cards -->223  <div class="cards">224    <div class="figure">225      <div class="img-text">[IMG: Athletic Male Figure]</div>226    </div>227    <div class="figure">228      <div class="img-text">[IMG: Athletic Female Figure]</div>229    </div>230  </div>231 232  <!-- Labels under figures -->233  <div class="label-wrap">Male</div>234  <div class="label-wrap right">Female</div>235 236  <!-- Next button -->237  <div class="cta">NEXT</div>238 239  <!-- Bottom area -->240  <div class="home-area">241    <div class="home-indicator"></div>242  </div>243 244</div>245</body>246</html>