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>Tell us who you are - Form</title>7<style>8  body { margin: 0; padding: 0; background: transparent; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #ffffff;15    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, Helvetica, sans-serif;16    color: #1f1f1f;17  }18 19  /* Top status bar */20  .status-bar {21    position: absolute;22    top: 0; left: 0; right: 0;23    height: 140px;24    background: #b22b11;25    color: #fff;26    display: flex;27    align-items: center;28    justify-content: space-between;29    padding: 0 44px;30    box-sizing: border-box;31  }32  .status-time {33    font-size: 42px;34    font-weight: 600;35    letter-spacing: 0.5px;36  }37  .status-icons {38    display: flex;39    align-items: center;40    gap: 28px;41  }42  .icon {43    width: 44px; height: 44px;44    display: inline-flex; align-items: center; justify-content: center;45  }46  .icon svg { width: 100%; height: 100%; fill: #fff; }47 48  /* Content area */49  .content {50    position: absolute;51    top: 140px; left: 0; right: 0; bottom: 0;52    padding: 56px 56px 0 56px;53    box-sizing: border-box;54    overflow: hidden;55  }56  h1 {57    font-size: 88px;58    line-height: 1.08;59    margin: 20px 0 36px 0;60    font-weight: 750;61  }62 63  .field {64    position: relative;65    border: 3px solid #cfcfcf;66    border-radius: 22px;67    height: 160px;68    padding: 0 30px 22px 30px;69    box-sizing: border-box;70    margin: 34px 0;71    display: flex;72    align-items: flex-end;73    background: #fff;74  }75  .field.active { border-color: #2f2f2f; }76  .field label {77    position: absolute;78    top: -18px;79    left: 28px;80    font-size: 32px;81    color: #7a7a7a;82    background: #fff;83    padding: 0 12px;84  }85  .field .value {86    font-size: 48px;87    color: #222;88  }89  .field .placeholder {90    color: #a5a5a5;91  }92  .help-icon {93    position: absolute;94    right: 22px;95    top: 50%;96    transform: translateY(-45%);97    width: 64px; height: 64px;98    border: 3px solid #bdbdbd;99    border-radius: 50%;100    color: #6b6b6b;101    display: flex; align-items: center; justify-content: center;102    font-weight: 700;103    font-size: 40px;104    background: #fff;105  }106 107  .note {108    margin-top: 24px;109    font-size: 36px;110    line-height: 1.45;111    color: #5e5e5e;112    max-width: 940px;113  }114 115  /* Keyboard overlay (mock) */116  .keyboard {117    position: absolute;118    left: 0; right: 0; bottom: 0;119    height: 880px;120    background: #1b1b1f;121    border-top-left-radius: 26px;122    border-top-right-radius: 26px;123    color: #fff;124    padding: 22px 28px;125    box-sizing: border-box;126  }127  .kb-top {128    display: flex;129    align-items: center;130    justify-content: space-between;131    padding: 8px 8px 18px 8px;132  }133  .kb-suggestions {134    flex: 1;135    display: flex;136    justify-content: center;137    gap: 26px;138    padding: 0 20px;139  }140  .chip {141    background: #2b2b30;142    color: #e9e9e9;143    padding: 10px 24px;144    border-radius: 22px;145    font-size: 34px;146    white-space: nowrap;147  }148  .kb-icon {149    width: 60px; height: 60px;150    background: #2b2b30;151    border-radius: 16px;152    display: flex; align-items: center; justify-content: center;153  }154  .keys { margin-top: 6px; }155  .row {156    display: flex;157    justify-content: center;158    gap: 16px;159    margin: 16px 0;160  }161  .key {162    width: 86px; height: 112px;163    background: #2b2b30;164    border-radius: 18px;165    display: flex; align-items: center; justify-content: center;166    font-size: 42px; font-weight: 600;167    color: #f0f0f0;168  }169  .key.wide { width: 180px; }170  .space { width: 430px; }171  .key.circle { border-radius: 28px; }172  .bottom-bar {173    display: flex;174    justify-content: center;175    margin-top: 8px;176  }177  .home-indicator {178    width: 320px; height: 10px;179    background: #d0d0d0;180    border-radius: 6px;181    opacity: 0.75;182  }183</style>184</head>185<body>186<div id="render-target">187 188  <!-- Status Bar -->189  <div class="status-bar">190    <div class="status-time">8:16</div>191    <div class="status-icons">192      <span class="icon" title="WiFi">193        <svg viewBox="0 0 24 24">194          <path d="M12 18.5l2.5 2.5L12 24l-2.5-3z"></path>195          <path d="M2 8c5.5-5.3 14.5-5.3 20 0l-2 2C16 6 8 6 4 10L2 8z"></path>196          <path d="M6 12c3.3-3.1 8.7-3.1 12 0l-2 2c-2.2-2-5.8-2-8 0l-2-2z"></path>197        </svg>198      </span>199      <span class="icon" title="Battery">200        <svg viewBox="0 0 24 24">201          <rect x="2" y="6" width="18" height="12" rx="2"></rect>202          <rect x="20" y="10" width="2" height="4"></rect>203        </svg>204      </span>205    </div>206  </div>207 208  <!-- Main Content -->209  <div class="content">210    <h1>Tell us who you are</h1>211 212    <div class="field active">213      <label>First Name</label>214      <div class="value">Cerebr</div>215    </div>216 217    <div class="field">218      <label>Last Name</label>219      <div class="value">Research</div>220    </div>221 222    <div class="field">223      <label>Birthdate</label>224      <div class="value placeholder">Birthdate</div>225      <div class="help-icon">?</div>226    </div>227 228    <div class="field">229      <label>Gender</label>230      <div class="value placeholder">Gender</div>231      <div class="help-icon">?</div>232    </div>233 234    <p class="note">235      Your profile is public by default. Change your visibility any time in Privacy Controls.236    </p>237  </div>238 239  <!-- Keyboard Overlay (mock representation) -->240  <div class="keyboard">241    <div class="kb-top">242      <div class="kb-icon" title="Layout"><svg width="26" height="26" viewBox="0 0 24 24" fill="#bdbdbd"><rect x="3" y="4" width="18" height="4" rx="1"/><rect x="3" y="10" width="18" height="4" rx="1"/><rect x="3" y="16" width="10" height="4" rx="1"/></svg></div>243      <div class="kb-suggestions">244        <span class="chip">Cerebr</span>245        <span class="chip">Cerebral</span>246        <span class="chip">Cerebrum</span>247      </div>248      <div class="kb-icon" title="Voice"><svg width="24" height="24" viewBox="0 0 24 24" fill="#bdbdbd"><path d="M12 3a3 3 0 0 1 3 3v6a3 3 0 1 1-6 0V6a3 3 0 0 1 3-3z"/><path d="M5 12a7 7 0 0 0 14 0h-2a5 5 0 1 1-10 0H5z"/><rect x="11" y="18" width="2" height="3"/></svg></div>249    </div>250 251    <div class="keys">252      <div class="row">253        <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><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>254      </div>255      <div class="row">256        <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><div class="key">h</div><div class="key">j</div><div class="key">k</div><div class="key">l</div>257      </div>258      <div class="row">259        <div class="key wide">⇧</div>260        <div class="key">z</div><div class="key">x</div><div class="key">c</div><div class="key">v</div><div class="key">b</div><div class="key">n</div><div class="key">m</div>261        <div class="key wide">⌫</div>262      </div>263      <div class="row">264        <div class="key wide">?123</div>265        <div class="key">,</div>266        <div class="key wide">☺</div>267        <div class="key space"> </div>268        <div class="key">.</div>269        <div class="key wide">↵</div>270      </div>271    </div>272 273    <div class="bottom-bar"><div class="home-indicator"></div></div>274  </div>275 276</div>277</body>278</html>