GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<meta name="viewport" content="width=1080, initial-scale=1.0">6<title>Form with Gender Modal</title>7<style>8  body {9    margin: 0;10    padding: 0;11    background: transparent;12    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;13    color: #212121;14  }15  #render-target {16    width: 1080px;17    height: 2400px;18    position: relative;19    overflow: hidden;20    background: #ffffff;21    border-radius: 0;22  }23 24  /* Status bar */25  .status-bar {26    position: absolute;27    top: 0;28    left: 0;29    width: 1080px;30    height: 120px;31    background: #651b12; /* dark red/brown */32    color: #fff;33  }34  .status-content {35    position: absolute;36    top: 40px;37    left: 36px;38    right: 36px;39    display: flex;40    align-items: center;41    justify-content: space-between;42    font-size: 44px;43    letter-spacing: 0.5px;44  }45  .icon-pack {46    display: flex;47    align-items: center;48    gap: 26px;49  }50  .icon {51    display: inline-block;52    width: 44px;53    height: 44px;54  }55 56  /* Main content */57  .screen {58    position: absolute;59    top: 120px;60    left: 0;61    right: 0;62    bottom: 0;63    background: #ffffff;64  }65  .content {66    padding: 48px 60px 80px 60px;67  }68  .title {69    font-size: 96px;70    font-weight: 800;71    line-height: 1.1;72    margin: 26px 0 40px 0;73  }74 75  /* Text fields */76  .field {77    position: relative;78    width: 960px;79    border: 2px solid #BDBDBD;80    border-radius: 18px;81    padding: 42px 28px 34px 28px;82    margin: 40px 0;83    box-sizing: border-box;84  }85  .field .label {86    position: absolute;87    top: -18px;88    left: 28px;89    background: #ffffff;90    padding: 0 10px;91    font-size: 32px;92    color: #757575;93  }94  .field .value {95    font-size: 48px;96    color: #212121;97  }98  .field .help-icon {99    position: absolute;100    right: 22px;101    top: 24px;102    width: 64px;103    height: 64px;104    border: 3px solid #616161;105    border-radius: 50%;106    display: flex;107    align-items: center;108    justify-content: center;109    color: #616161;110    font-weight: 700;111    font-size: 40px;112  }113 114  /* Dim overlay and modal */115  .overlay {116    position: absolute;117    inset: 0;118    background: rgba(0,0,0,0.55);119    z-index: 10;120  }121  .modal {122    position: absolute;123    left: 50px;124    top: 820px;125    width: 980px;126    background: #ffffff;127    border-radius: 18px;128    box-shadow: 0 18px 40px rgba(0,0,0,0.35), 0 6px 18px rgba(0,0,0,0.25);129    padding: 48px 48px 36px 48px;130    z-index: 11;131  }132  .modal h2 {133    margin: 0 0 24px 0;134    font-size: 64px;135    font-weight: 700;136    color: #333333;137  }138  .radio-row {139    display: flex;140    align-items: center;141    gap: 28px;142    padding: 28px 0;143  }144  .radio {145    width: 56px;146    height: 56px;147    border: 5px solid #9E9E9E;148    border-radius: 50%;149    box-sizing: border-box;150  }151  .radio-label {152    font-size: 52px;153    color: #2c2c2c;154  }155 156  /* Bottom gesture pill */157  .nav-area {158    position: absolute;159    left: 0;160    bottom: 0;161    width: 1080px;162    height: 120px;163    background: #000000;164  }165  .pill {166    position: absolute;167    bottom: 28px;168    left: 50%;169    transform: translateX(-50%);170    width: 280px;171    height: 12px;172    background: #e5e5e5;173    border-radius: 12px;174  }175</style>176</head>177<body>178<div id="render-target">179 180  <!-- Status Bar -->181  <div class="status-bar">182    <div class="status-content">183      <div class="time">8:28</div>184      <div class="icon-pack">185        <!-- WiFi icon -->186        <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="2">187          <path d="M2 8c5-4 15-4 20 0"></path>188          <path d="M5 12c3-3 11-3 14 0"></path>189          <path d="M8 16c2-2 6-2 8 0"></path>190          <circle cx="12" cy="19" r="1.6" fill="#ffffff" stroke="none"></circle>191        </svg>192        <!-- Battery icon -->193        <svg class="icon" viewBox="0 0 28 18" fill="none" stroke="#ffffff" stroke-width="2">194          <rect x="1" y="3" width="22" height="12" rx="2"></rect>195          <rect x="3" y="5" width="18" height="8" rx="1" fill="#ffffff" stroke="none"></rect>196          <rect x="24" y="7" width="3" height="6" rx="1" fill="#ffffff" stroke="none"></rect>197        </svg>198      </div>199    </div>200  </div>201 202  <!-- Background screen content -->203  <div class="screen">204    <div class="content">205      <div class="title">Tell us who you are</div>206 207      <div class="field">208        <div class="label">First Name</div>209        <div class="value">ABC</div>210      </div>211 212      <div class="field">213        <div class="label">Last Name</div>214        <div class="value">XYZ</div>215      </div>216 217      <div class="field">218        <div class="label">Birthdate</div>219        <div class="value">03/01/1999</div>220        <div class="help-icon">?</div>221      </div>222    </div>223  </div>224 225  <!-- Overlay and Modal -->226  <div class="overlay"></div>227  <div class="modal">228    <h2>Gender</h2>229 230    <div class="radio-row">231      <span class="radio"></span>232      <span class="radio-label">Man</span>233    </div>234 235    <div class="radio-row">236      <span class="radio"></span>237      <span class="radio-label">Woman</span>238    </div>239 240    <div class="radio-row">241      <span class="radio"></span>242      <span class="radio-label">Non-binary</span>243    </div>244 245    <div class="radio-row">246      <span class="radio"></span>247      <span class="radio-label">Prefer not to say</span>248    </div>249  </div>250 251  <!-- Bottom navigation area -->252  <div class="nav-area">253    <div class="pill"></div>254  </div>255 256</div>257</body>258</html>