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 - Tell us who you are</title>7<style>8  html, body { margin: 0; padding: 0; background: transparent; }9  * { box-sizing: border-box; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }10  #render-target {11    width: 1080px;12    height: 2400px;13    position: relative;14    overflow: hidden;15    background: #FFFFFF;16  }17 18  /* Status bar */19  .status-bar {20    height: 150px;21    background: #B03014;22    color: #ffffff;23    padding: 0 36px;24    display: flex;25    align-items: center;26    justify-content: space-between;27  }28  .status-time {29    font-size: 44px;30    font-weight: 600;31    letter-spacing: 0.5px;32  }33  .status-icons {34    display: flex;35    gap: 24px;36    align-items: center;37  }38  .icon {39    width: 44px; height: 44px;40  }41 42  /* Content */43  .content {44    position: absolute;45    top: 150px;46    left: 0;47    right: 0;48    bottom: 900px; /* space for keyboard */49    overflow: hidden;50    padding: 60px 56px 0 56px;51    background: #FFFFFF;52  }53  .title {54    font-size: 88px;55    line-height: 1.05;56    font-weight: 700;57    color: #202124;58    margin: 24px 0 40px 0;59  }60 61  .field {62    position: relative;63    background: #fff;64    border: 3px solid #CFCFCF;65    border-radius: 22px;66    padding: 44px 110px 44px 36px;67    height: 148px;68    display: flex;69    align-items: center;70    margin: 28px 0;71  }72  .field.focused {73    border: 5px solid #333333;74  }75  .floating-label {76    position: absolute;77    top: -16px;78    left: 28px;79    padding: 0 14px;80    background: #FFFFFF;81    color: #8E8E8E;82    font-size: 32px;83    letter-spacing: 0.2px;84  }85  .input-text {86    font-size: 44px;87    color: #202124;88  }89  .placeholder {90    color: #B0B0B0;91  }92  .help-icon {93    position: absolute;94    right: 28px;95    top: 50%;96    transform: translateY(-50%);97    width: 64px;98    height: 64px;99    border: 2px solid #9E9E9E;100    color: #6B6B6B;101    border-radius: 50%;102    display: flex;103    align-items: center;104    justify-content: center;105    font-weight: 700;106    font-size: 36px;107  }108  .note {109    margin-top: 36px;110    color: #4E4E4E;111    font-size: 36px;112    line-height: 1.45;113  }114 115  .sheet-stub {116    margin-top: 36px;117    width: 968px;118    height: 90px;119    background: #E9E9E9;120    border-radius: 14px;121  }122 123  /* Keyboard mock */124  .keyboard {125    position: absolute;126    left: 0;127    right: 0;128    bottom: 0;129    height: 900px;130    background: #1F1F1F;131    color: #ffffff;132    padding: 18px 20px 24px 20px;133  }134  .kb-top {135    display: flex;136    align-items: center;137    justify-content: space-between;138    padding: 8px 8px 18px 8px;139  }140  .kb-pill {141    width: 86px;142    height: 64px;143    background: #2A2A2A;144    border-radius: 12px;145    display: flex;146    align-items: center;147    justify-content: center;148    color: #D8D8D8;149    font-size: 28px;150  }151  .rows { margin-top: 6px; }152  .row {153    display: flex;154    justify-content: center;155    gap: 10px;156    margin: 16px 0;157  }158  .key {159    width: 84px;160    height: 120px;161    background: #2C2C2C;162    border-radius: 18px;163    display: flex;164    align-items: center;165    justify-content: center;166    font-size: 40px;167    color: #EDEDED;168  }169  .key.wide { width: 140px; }170  .key.space { width: 470px; }171  .key.medium { width: 110px; }172  .key.circle {173    width: 112px;174    height: 112px;175    border-radius: 56px;176    background: #C8B5D9;177    color: #2C2C2C;178    font-weight: 700;179  }180  .bottom-indicator {181    position: absolute;182    bottom: 10px;183    left: 50%;184    transform: translateX(-50%);185    width: 300px;186    height: 10px;187    background: #BDBDBD;188    border-radius: 5px;189    opacity: 0.6;190  }191</style>192</head>193<body>194<div id="render-target">195  <div class="status-bar">196    <div class="status-time">8:19</div>197    <div class="status-icons">198      <!-- Simple wifi icon -->199      <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2">200        <path d="M2 8c5-4 15-4 20 0"></path>201        <path d="M5 12c3-3 11-3 14 0"></path>202        <path d="M9 16c2-2 4-2 6 0"></path>203        <circle cx="12" cy="20" r="1.5" fill="white"></circle>204      </svg>205      <!-- Battery icon -->206      <svg class="icon" viewBox="0 0 28 16" fill="none" stroke="white" stroke-width="2">207        <rect x="1" y="3" width="22" height="10" rx="2"></rect>208        <rect x="24" y="6" width="3" height="4" rx="1" fill="white" stroke="none"></rect>209        <rect x="3" y="5" width="16" height="6" rx="1" fill="white" stroke="none"></rect>210      </svg>211    </div>212  </div>213 214  <div class="content">215    <div class="title">Tell us who you are</div>216 217    <div class="field">218      <div class="floating-label">First Name</div>219      <div class="input-text">ABC</div>220    </div>221 222    <div class="field focused">223      <div class="floating-label">Last Name</div>224      <div class="input-text placeholder"> </div>225    </div>226 227    <div class="field">228      <div class="floating-label">Birthdate</div>229      <div class="input-text placeholder"> </div>230      <div class="help-icon">?</div>231    </div>232 233    <div class="field">234      <div class="floating-label">Gender</div>235      <div class="input-text placeholder"> </div>236      <div class="help-icon">?</div>237    </div>238 239    <div class="note">240      Your profile is public by default. Change your visibility any time in Privacy Controls.241    </div>242 243    <div class="sheet-stub"></div>244  </div>245 246  <!-- Keyboard mock -->247  <div class="keyboard">248    <div class="kb-top">249      <div class="kb-pill">◻︎</div>250      <div class="kb-pill">☺︎</div>251      <div class="kb-pill">GIF</div>252      <div class="kb-pill">⚙︎</div>253      <div class="kb-pill">↔︎</div>254      <div class="kb-pill">🎨</div>255      <div class="kb-pill">🎤</div>256    </div>257 258    <div class="rows">259      <div class="row">260        <div class="key">Q</div><div class="key">W</div><div class="key">E</div><div class="key">R</div><div class="key">T</div>261        <div class="key">Y</div><div class="key">U</div><div class="key">I</div><div class="key">O</div><div class="key">P</div>262      </div>263      <div class="row">264        <div class="key">A</div><div class="key">S</div><div class="key">D</div><div class="key">F</div><div class="key">G</div>265        <div class="key">H</div><div class="key">J</div><div class="key">K</div><div class="key">L</div>266      </div>267      <div class="row">268        <div class="key wide">⇧</div>269        <div class="key">Z</div><div class="key">X</div><div class="key">C</div><div class="key">V</div>270        <div class="key">B</div><div class="key">N</div><div class="key">M</div>271        <div class="key wide">⌫</div>272      </div>273      <div class="row">274        <div class="key medium">?123</div>275        <div class="key medium">,</div>276        <div class="key medium">☺</div>277        <div class="key space">SPACE</div>278        <div class="key medium">.</div>279        <div class="key circle">✓</div>280      </div>281    </div>282    <div class="bottom-indicator"></div>283  </div>284</div>285</body>286</html>