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: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; color: #212121; }9  #render-target {10    position: relative;11    overflow: hidden;12    width: 1080px;13    height: 2400px;14    background: #ffffff;15  }16 17  /* Status bar */18  .status-bar {19    position: absolute;20    top: 0;21    left: 0;22    width: 1080px;23    height: 140px;24    background: #b12e10;25    color: #fff;26  }27  .status-content {28    height: 100%;29    display: flex;30    align-items: center;31    justify-content: space-between;32    padding: 0 36px;33  }34  .time {35    font-size: 40px;36    font-weight: 600;37    letter-spacing: 0.5px;38  }39  .status-icons {40    display: flex;41    align-items: center;42    gap: 24px;43  }44  .icon {45    width: 42px;46    height: 42px;47  }48 49  /* Page content */50  .page {51    position: absolute;52    top: 140px;53    left: 0;54    right: 0;55    bottom: 0;56    overflow: hidden;57  }58  .content {59    padding: 48px 54px 820px 54px; /* bottom padding so content doesn't hide under keyboard mock */60  }61  .title {62    font-size: 78px;63    line-height: 1.1;64    font-weight: 800;65    margin: 22px 0 36px 0;66    color: #212121;67  }68 69  /* Form fields */70  .field {71    position: relative;72    margin: 36px 0;73  }74  .field input {75    width: 100%;76    height: 128px;77    border: 2px solid #c7c7c7;78    border-radius: 18px;79    font-size: 44px;80    padding: 30px 120px 30px 32px;81    box-sizing: border-box;82    outline: none;83    color: #212121;84    background: #fff;85  }86  .field input::placeholder { color: #b5b5b5; }87  .field label {88    position: absolute;89    top: -20px;90    left: 28px;91    padding: 0 12px;92    background: #fff;93    font-size: 28px;94    color: #8a8a8a;95  }96  .field.active input {97    border: 3px solid #1d1d1d;98  }99  .field.active label {100    color: #1d1d1d;101    font-weight: 600;102  }103 104  .help {105    position: absolute;106    right: 24px;107    top: 34px;108    width: 70px;109    height: 70px;110    border: 2px solid #bdbdbd;111    border-radius: 50%;112    color: #7b7b7b;113    display: flex;114    align-items: center;115    justify-content: center;116    font-size: 40px;117    pointer-events: none;118    background: #fff;119  }120 121  .note {122    font-size: 34px;123    color: #6d6d6d;124    line-height: 1.5;125    margin-top: 28px;126  }127 128  /* Keyboard mock */129  .keyboard {130    position: absolute;131    left: 0;132    bottom: 0;133    width: 1080px;134    height: 760px;135    background: #1e1e1f;136    box-shadow: 0 -6px 16px rgba(0,0,0,0.35);137    color: #eaeaea;138  }139  .kb-suggestions {140    height: 92px;141    background: #2a2a2d;142    display: flex;143    align-items: center;144    padding: 0 24px;145    gap: 28px;146    font-size: 36px;147  }148  .kb-chip {149    color: #e4e4e7;150  }151  .kb-rows {152    padding: 18px 18px 22px;153  }154  .kb-row {155    display: flex;156    justify-content: center;157    gap: 12px;158    margin: 14px 0;159  }160  .key {161    height: 110px;162    width: 92px;163    background: #2b2b2e;164    border-radius: 16px;165    display: flex;166    align-items: center;167    justify-content: center;168    font-size: 42px;169  }170  .key.wide { width: 140px; }171  .key.space { width: 500px; }172  .key.action {173    background: #dac8f2;174    color: #2b2b2e;175    border-radius: 54px;176    width: 120px;177    height: 120px;178    font-weight: 700;179  }180  .key.pill {181    background: #b9a6d9;182    color: #1e1e1f;183  }184  .emoji {185    width: 90px;186    height: 90px;187    border-radius: 50%;188    background: #3a3a3e;189    display: flex;190    align-items: center;191    justify-content: center;192    font-size: 42px;193  }194  .home-indicator {195    position: absolute;196    bottom: 18px;197    left: 50%;198    transform: translateX(-50%);199    width: 300px;200    height: 10px;201    background: #bdbdbd;202    border-radius: 8px;203    opacity: 0.9;204  }205</style>206</head>207<body>208<div id="render-target">209  <!-- Status bar -->210  <div class="status-bar">211    <div class="status-content">212      <div class="time">8:19</div>213      <div class="status-icons">214        <!-- simple cellular icon -->215        <svg class="icon" viewBox="0 0 24 24" fill="#fff">216          <path d="M3 18h2v3H3v-3zm4-5h2v8H7v-8zm4-4h2v12h-2V9zm4-5h2v17h-2V4z"/>217        </svg>218        <!-- WiFi -->219        <svg class="icon" viewBox="0 0 24 24" fill="#fff">220          <path d="M12 20.5l-2.5-2.5a3.5 3.5 0 015 0L12 20.5zM2 9a18 18 0 0120 0l-1.8 1.8a15 15 0 00-16.4 0L2 9zm4 4a12 12 0 0116 0l-1.8 1.8a9 9 0 00-12.4 0L6 13z"/>221        </svg>222        <!-- Battery -->223        <svg class="icon" viewBox="0 0 28 24" fill="#fff">224          <rect x="2" y="6" width="20" height="12" rx="2" ry="2"></rect>225          <rect x="23" y="9" width="3" height="6"></rect>226        </svg>227      </div>228    </div>229  </div>230 231  <div class="page">232    <div class="content">233      <div class="title">Tell us who you are</div>234 235      <div class="field">236        <label>First Name</label>237        <input type="text" value="ABC">238      </div>239 240      <div class="field active">241        <label>Last Name</label>242        <input type="text" value="Rese">243      </div>244 245      <div class="field">246        <label>Birthdate</label>247        <input type="text" placeholder="Birthdate">248        <div class="help">?</div>249      </div>250 251      <div class="field">252        <label>Gender</label>253        <input type="text" placeholder="Gender">254        <div class="help">?</div>255      </div>256 257      <div class="note">258        Your profile is public by default. Change your visibility any time in Privacy Controls.259      </div>260    </div>261  </div>262 263  <!-- Keyboard mock -->264  <div class="keyboard">265    <div class="kb-suggestions">266      <div class="emoji">⌨️</div>267      <div class="kb-chip">Rese</div>268      <div class="kb-chip">Reset</div>269      <div class="kb-chip">Resend</div>270      <div style="margin-left:auto; display:flex; align-items:center; gap:18px;">271        <div class="emoji">🎤</div>272      </div>273    </div>274    <div class="kb-rows">275      <div class="kb-row">276        <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>277      </div>278      <div class="kb-row">279        <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>280      </div>281      <div class="kb-row">282        <div class="key wide">⇧</div>283        <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>284        <div class="key wide">⌫</div>285      </div>286      <div class="kb-row">287        <div class="key wide">?123</div>288        <div class="key">,</div>289        <div class="emoji">😊</div>290        <div class="key space"></div>291        <div class="key">.</div>292        <div class="key action">✓</div>293      </div>294    </div>295    <div class="home-indicator"></div>296  </div>297</div>298</body>299</html>