GD-ML/AndroidCode

1<!DOCTYPE html>2<html>3<head>4<meta charset="UTF-8">5<title>Form Screen</title>6<style>7  body { margin: 0; padding: 0; background: transparent; }8  #render-target {9    width: 1080px;10    height: 2400px;11    position: relative;12    overflow: hidden;13    background: #ffffff;14    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Helvetica Neue", Arial, sans-serif;15    color: #212121;16  }17 18  /* Status bar */19  .status-bar {20    position: absolute;21    top: 0;22    left: 0;23    width: 1080px;24    height: 140px;25    background: #B12A0F;26    color: #fff;27  }28  .status-inner {29    position: absolute;30    top: 40px;31    left: 40px;32    right: 40px;33    display: flex;34    align-items: center;35    justify-content: space-between;36    font-size: 44px;37    font-weight: 600;38  }39  .sb-right {40    display: flex;41    gap: 28px;42    align-items: center;43  }44  .sb-icon svg { width: 48px; height: 48px; fill: none; stroke: #fff; stroke-width: 5; }45 46  /* Content */47  .content {48    position: absolute;49    top: 160px;50    left: 0;51    right: 0;52    padding: 0 54px;53  }54  h1 {55    margin: 40px 0 30px 0;56    font-size: 92px;57    line-height: 1.05;58    font-weight: 700;59  }60 61  .form {62    margin-top: 20px;63  }64 65  .text-field {66    position: relative;67    margin: 40px 0;68  }69  .tf-label {70    font-size: 34px;71    color: #5b5b5b;72    padding: 0 18px;73    background: #ffffff;74    position: absolute;75    top: -22px;76    left: 22px;77  }78  .tf-input {79    height: 160px;80    border-radius: 18px;81    padding: 36px 36px;82    font-size: 60px;83    line-height: 88px;84    color: #212121;85    display: flex;86    align-items: center;87  }88  .tf-dark { border: 4px solid #2f2f2f; }89  .tf-light { border: 3px solid #cfcfcf; color: #8d8d8d; }90  .tf-input .placeholder { color: #9e9e9e; }91  .help-icon {92    position: absolute;93    right: 26px;94    top: 50%;95    transform: translateY(-50%);96    width: 92px;97    height: 92px;98    border-radius: 50%;99    border: 3px solid #cfcfcf;100    color: #6d6d6d;101    display: flex;102    align-items: center;103    justify-content: center;104    font-size: 48px;105    font-weight: 600;106  }107 108  .note {109    margin: 30px 0 40px 0;110    font-size: 38px;111    line-height: 56px;112    color: #3a3a3a;113  }114 115  /* Keyboard mock */116  .keyboard {117    position: absolute;118    left: 0;119    bottom: 0;120    width: 1080px;121    height: 860px;122    background: #1c1c1f;123    border-top-left-radius: 24px;124    border-top-right-radius: 24px;125    box-shadow: 0 -6px 12px rgba(0,0,0,0.25);126    color: #fff;127  }128  .kb-topbar {129    height: 120px;130    display: flex;131    align-items: center;132    gap: 36px;133    padding: 0 36px;134    color: #bfbfbf;135    font-size: 44px;136  }137  .kb-row {138    display: flex;139    justify-content: center;140    gap: 22px;141    padding: 18px 28px;142  }143  .key {144    background: #2b2b31;145    color: #ffffff;146    border-radius: 20px;147    height: 120px;148    min-width: 90px;149    padding: 0 20px;150    display: flex;151    align-items: center;152    justify-content: center;153    font-size: 56px;154    box-shadow: inset 0 -2px 0 rgba(255,255,255,0.06);155  }156  .key.wide { min-width: 170px; }157  .key.space { min-width: 540px; }158  .kb-bottom {159    display: flex;160    justify-content: space-between;161    padding: 18px 28px;162  }163  .kb-bottom .key { height: 120px; }164  .kb-bottom .enter { background: #b89bd6; color: #1c1c1f; }165 166  /* Safe area indicator bar */167  .home-indicator {168    position: absolute;169    bottom: 16px;170    left: 50%;171    transform: translateX(-50%);172    width: 300px;173    height: 10px;174    background: #e0e0e0;175    border-radius: 5px;176    opacity: 0.9;177  }178</style>179</head>180<body>181<div id="render-target">182  <div class="status-bar">183    <div class="status-inner">184      <div>8:17</div>185      <div class="sb-right">186        <div class="sb-icon">187          <!-- Wifi icon -->188          <svg viewBox="0 0 24 24">189            <path d="M2 8c6-6 14-6 20 0"/>190            <path d="M5 12c4-4 10-4 14 0"/>191            <path d="M9 16c2-2 4-2 6 0"/>192            <circle cx="12" cy="19" r="1.5" fill="#fff" stroke="none"/>193          </svg>194        </div>195        <div class="sb-icon">196          <!-- Battery icon -->197          <svg viewBox="0 0 28 18">198            <rect x="1" y="3" width="22" height="12" rx="2" stroke="#fff"></rect>199            <rect x="24" y="6" width="3" height="6" rx="1" stroke="#fff"></rect>200            <rect x="3" y="5" width="12" height="8" fill="#fff" stroke="none"></rect>201          </svg>202        </div>203      </div>204    </div>205  </div>206 207  <div class="content">208    <h1>Tell us who you are</h1>209 210    <div class="form">211      <!-- First Name -->212      <div class="text-field">213        <div class="tf-label">First Name</div>214        <div class="tf-input tf-dark">ABC</div>215      </div>216 217      <!-- Last Name -->218      <div class="text-field">219        <div class="tf-label">Last Name</div>220        <div class="tf-input tf-light" style="color:#212121;">Research</div>221      </div>222 223      <!-- Birthdate -->224      <div class="text-field">225        <div class="tf-label">Birthdate</div>226        <div class="tf-input tf-light"><span class="placeholder">Birthdate</span></div>227        <div class="help-icon">?</div>228      </div>229 230      <!-- Gender -->231      <div class="text-field">232        <div class="tf-label">Gender</div>233        <div class="tf-input tf-light"><span class="placeholder">Gender</span></div>234        <div class="help-icon">?</div>235      </div>236 237      <div class="note">238        Your profile is public by default. Change your visibility any time in Privacy Controls.239      </div>240    </div>241  </div>242 243  <!-- Keyboard mockup -->244  <div class="keyboard">245    <div class="kb-topbar">246      <div class="key wide" style="background:#34343a;">ABC</div>247      <div class="key wide" style="background:#34343a;">ABCD</div>248      <div class="key wide" style="background:#34343a;">abc</div>249      <div class="key wide" style="background:#34343a;">🎤</div>250    </div>251    <div class="kb-row">252      <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>253    </div>254    <div class="kb-row">255      <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>256    </div>257    <div class="kb-row">258      <div class="key wide">⇧</div>259      <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>260      <div class="key wide">⌫</div>261    </div>262    <div class="kb-bottom">263      <div class="key wide">?123</div>264      <div class="key">,</div>265      <div class="key wide">🙂</div>266      <div class="key space"></div>267      <div class="key">.</div>268      <div class="key enter">↦</div>269    </div>270    <div class="home-indicator"></div>271  </div>272</div>273</body>274</html>