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; font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #ffffff;15  }16 17  /* Status bar */18  .status-bar {19    position: relative;20    height: 150px;21    background: #B33116;22    color: #fff;23  }24  .status-time {25    position: absolute;26    left: 36px;27    top: 46px;28    font-weight: 600;29    font-size: 48px;30    letter-spacing: 1px;31  }32  .status-icons {33    position: absolute;34    right: 32px;35    top: 38px;36    display: flex;37    gap: 28px;38    align-items: center;39  }40  .status-icons svg { fill: #fff; }41 42  /* Content */43  .content {44    padding: 34px 64px 0 64px;45  }46  h1.title {47    margin: 28px 0 26px 0;48    font-size: 88px;49    line-height: 1.05;50    color: #212121;51    font-weight: 700;52  }53 54  .form {55    margin-top: 6px;56  }57  .field {58    position: relative;59    margin: 34px 0;60  }61  .field input {62    width: 100%;63    height: 126px;64    border: 2px solid #C9C9C9;65    border-radius: 20px;66    padding: 34px 44px;67    font-size: 44px;68    color: #222;69    outline: none;70    box-sizing: border-box;71  }72  .field .label {73    position: absolute;74    top: -18px;75    left: 30px;76    background: #fff;77    padding: 0 14px;78    font-size: 30px;79    color: #9E9E9E;80  }81  .field.focus input {82    border-color: #1F1F1F;83    border-width: 4px;84  }85  .help {86    position: absolute;87    right: 26px;88    top: 50%;89    transform: translateY(-50%);90    width: 70px;91    height: 70px;92    border-radius: 50%;93    border: 2px solid #BDBDBD;94    display: flex;95    align-items: center;96    justify-content: center;97    color: #757575;98    font-weight: 700;99    font-size: 40px;100    background: #fff;101  }102 103  /* Caret selection bubble (approximation) */104  .caret-bubble {105    position: absolute;106    left: 250px;107    top: 92px;108    width: 58px;109    height: 58px;110    background: #2E2E2E;111    border-radius: 50%;112  }113  .caret-bubble .tail {114    position: absolute;115    bottom: -16px;116    left: 18px;117    width: 22px;118    height: 22px;119    background: #2E2E2E;120    transform: rotate(45deg);121    border-bottom-left-radius: 4px;122  }123 124  .hint {125    margin: 28px 0 0 10px;126    color: #5E5E5E;127    font-size: 36px;128    line-height: 1.35;129  }130 131  /* On-screen keyboard (simplified) */132  .keyboard {133    position: absolute;134    left: 0; right: 0; bottom: 0;135    height: 820px;136    background: #1F1F22;137    padding-top: 16px;138    box-sizing: border-box;139  }140  .kb-suggestions {141    display: flex;142    gap: 26px;143    padding: 18px 28px;144    color: #EDE7F6;145    font-size: 40px;146    background: #2A2A2D;147  }148  .kb-rows {149    padding: 24px 18px;150    display: grid;151    grid-template-rows: repeat(4, 1fr);152    gap: 18px;153    height: calc(100% - 106px);154    box-sizing: border-box;155  }156  .row {157    display: grid;158    grid-auto-columns: 1fr;159    grid-auto-flow: column;160    gap: 12px;161    align-items: center;162  }163  .key {164    height: 108px;165    background: #2F2F33;166    border-radius: 22px;167  }168  .key.small { width: 100px; }169  .key.medium { width: 160px; }170  .space {171    grid-column: span 6;172    height: 108px;173    background: #2F2F33;174    border-radius: 22px;175  }176  .action-left, .action-right {177    width: 150px; height: 150px; border-radius: 80px;178    background: #CAB2D6; color: #1F1F22;179  }180  .row-bottom {181    display: grid;182    grid-template-columns: 180px 1fr 180px;183    gap: 18px;184    align-items: center;185  }186</style>187</head>188<body>189<div id="render-target">190 191  <!-- Status bar -->192  <div class="status-bar">193    <div class="status-time">8:17</div>194    <div class="status-icons">195      <!-- WiFi icon -->196      <svg width="48" height="48" viewBox="0 0 24 24" aria-hidden="true">197        <path d="M12 18.5a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3zm-5-3.3 1.4 1.4A6 6 0 0 1 17.6 16l1.4-1.4a8 8 0 0 0-12 0zm-3-3 1.4 1.4a12 12 0 0 1 16.2 0L23 12.2A14 14 0 0 0 2 12.2z"/>198      </svg>199      <!-- Battery icon -->200      <svg width="56" height="56" viewBox="0 0 24 24" aria-hidden="true">201        <path d="M17 6h2a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-2v-1h-1V7h1V6zm-1 0H5a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h11V6z"/>202      </svg>203    </div>204  </div>205 206  <!-- Main content -->207  <div class="content">208    <h1 class="title">Tell us who you are</h1>209 210    <div class="form">211 212      <!-- First Name -->213      <div class="field">214        <div class="label">First Name</div>215        <input type="text" value="ABC">216      </div>217 218      <!-- Last Name (focused) -->219      <div class="field focus" style="margin-top: 48px;">220        <div class="label" style="color:#5E5E5E;">Last Name</div>221        <input type="text" value="Research">222        <div class="caret-bubble"><div class="tail"></div></div>223      </div>224 225      <!-- Birthdate with help -->226      <div class="field" style="margin-top: 48px;">227        <div class="label">Birthdate</div>228        <input type="text" placeholder="">229        <div class="help">?</div>230      </div>231 232      <!-- Gender with help -->233      <div class="field" style="margin-top: 48px;">234        <div class="label">Gender</div>235        <input type="text" placeholder="">236        <div class="help">?</div>237      </div>238 239      <div class="hint">240        Your profile is public by default. Change your visibility any time in Privacy Controls.241      </div>242 243    </div>244  </div>245 246  <!-- On-screen keyboard (simplified visual) -->247  <div class="keyboard">248    <div class="kb-suggestions">249      <div>Research</div>250      <div>|</div>251      <div>Researcher</div>252      <div>|</div>253      <div>Researching</div>254      <div style="margin-left:auto;">🎤</div>255    </div>256    <div class="kb-rows">257      <div class="row">258        <div class="key"></div><div class="key"></div><div class="key"></div><div class="key"></div>259        <div class="key"></div><div class="key"></div><div class="key"></div><div class="key"></div>260        <div class="key"></div><div class="key"></div>261      </div>262      <div class="row">263        <div class="key"></div><div class="key"></div><div class="key"></div><div class="key"></div>264        <div class="key"></div><div class="key"></div><div class="key"></div><div class="key"></div>265        <div class="key"></div>266      </div>267      <div class="row">268        <div class="key medium"></div>269        <div class="key"></div><div class="key"></div><div class="key"></div><div class="key"></div>270        <div class="key"></div><div class="key"></div><div class="key"></div>271        <div class="key medium"></div>272      </div>273      <div class="row-bottom">274        <div class="action-left"></div>275        <div class="space"></div>276        <div class="action-right"></div>277      </div>278    </div>279  </div>280 281</div>282</body>283</html>