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</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }9  #render-target {10    position: relative;11    width: 1080px;12    height: 2400px;13    overflow: hidden;14    background: #ffffff;15  }16 17  /* Top status/header bar */18  .top-bar {19    position: absolute;20    left: 0; top: 0; right: 0;21    height: 140px;22    background: #b33a15;23    color: #fff;24  }25  .status-content {26    position: absolute;27    top: 20px;28    left: 32px; right: 32px;29    height: 60px;30    display: flex;31    align-items: center;32    justify-content: space-between;33    font-weight: 600;34    font-size: 40px;35  }36  .status-icons {37    display: flex; align-items: center; gap: 24px;38  }39  .content {40    position: absolute;41    top: 140px;42    left: 48px; right: 48px;43  }44  h1.title {45    font-size: 76px;46    line-height: 86px;47    margin: 36px 0 28px 0;48    color: #222;49    font-weight: 800;50    letter-spacing: -0.5px;51  }52 53  /* Form fields */54  .field {55    position: relative;56    width: 100%;57    height: 124px;58    border: 2px solid #cfcfcf;59    border-radius: 20px;60    margin: 28px 0 34px;61    background: #fff;62  }63  .field.active { border: 3px solid #222; }64  .field-label {65    position: absolute;66    left: 26px;67    top: -18px;68    font-size: 28px;69    color: #8a8a8a;70    background: #fff;71    padding: 0 10px;72  }73  .field.active .field-label { color: #222; }74  .field input {75    position: absolute;76    left: 26px; right: 26px;77    top: 46px;78    height: 56px;79    border: none;80    outline: none;81    font-size: 44px;82    color: #222;83    background: transparent;84  }85  .help-icon {86    position: absolute;87    right: 18px;88    top: 50%;89    transform: translateY(-50%);90    width: 62px; height: 62px;91    display: flex; align-items: center; justify-content: center;92    border-radius: 50%;93    border: 2px solid #bdbdbd;94    color: #6f6f6f;95    background: #fff;96  }97  .help-icon span { font-size: 34px; font-weight: 700; }98 99  .note {100    margin-top: 14px;101    font-size: 34px;102    line-height: 44px;103    color: #4a4a4a;104  }105 106  .disabled-panel {107    margin-top: 34px;108    width: 100%;109    height: 120px;110    border-radius: 16px;111    background: #e9e9e9;112  }113 114  /* Keyboard mock */115  .keyboard {116    position: absolute;117    left: 0; right: 0; bottom: 0;118    height: 760px;119    background: #151515;120    color: #eee;121    border-top-left-radius: 20px;122    border-top-right-radius: 20px;123  }124  .suggestions {125    height: 90px;126    display: flex;127    align-items: center;128    justify-content: center;129    gap: 40px;130    color: #dcdcdc;131    font-size: 36px;132  }133  .key-area {134    padding: 14px 22px 20px;135  }136  .row {137    display: flex;138    justify-content: center;139    gap: 16px;140    margin: 18px 0;141  }142  .key {143    background: #2a2a2a;144    border-radius: 16px;145    width: 92px; height: 112px;146    display: flex; align-items: center; justify-content: center;147    font-size: 40px;148    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.05);149  }150  .key.wide { width: 140px; }151  .space { flex: 1; height: 112px; }152  .key.round {153    width: 120px; height: 120px; border-radius: 60px;154    background: #e7c6ff; color: #222;155    font-weight: 700;156  }157  .key.dim { background: #232323; color: #bfbfbf; }158  .bottom-row { align-items: center; }159  .pill {160    background: #6d5e77;161    color: #fff;162    padding: 22px 34px;163    border-radius: 32px;164    font-size: 32px;165  }166  .mic {167    width: 92px; height: 92px; border-radius: 46px;168    background: #2a2a2a; display:flex; align-items:center; justify-content:center;169  }170  .nav-bar {171    position: absolute;172    bottom: 10px; left: 0; right: 0;173    height: 12px;174    display: flex; justify-content: center;175  }176  .home-indicator {177    width: 280px; height: 10px; border-radius: 6px; background: #bfbfbf;178  }179</style>180</head>181<body>182<div id="render-target">183 184  <!-- Top bar with time and icons -->185  <div class="top-bar">186    <div class="status-content">187      <div>8:20</div>188      <div class="status-icons">189        <!-- WiFi icon -->190        <svg width="44" height="44" viewBox="0 0 24 24" fill="none">191          <path d="M2 9c4.7-4.3 15.3-4.3 20 0" stroke="#fff" stroke-width="2" stroke-linecap="round"/>192          <path d="M5 12c3.4-3 10.6-3 14 0" stroke="#fff" stroke-width="2" stroke-linecap="round"/>193          <path d="M8 15c2-1.6 6-1.6 8 0" stroke="#fff" stroke-width="2" stroke-linecap="round"/>194          <circle cx="12" cy="18" r="1.4" fill="#fff"/>195        </svg>196        <!-- Battery icon -->197        <svg width="50" height="44" viewBox="0 0 28 18" fill="none">198          <rect x="1" y="3" width="22" height="12" rx="2" stroke="#fff" stroke-width="2"/>199          <rect x="3" y="5" width="18" height="8" rx="1" fill="#fff"/>200          <rect x="24" y="7" width="3" height="4" rx="1" fill="#fff"/>201        </svg>202      </div>203    </div>204  </div>205 206  <div class="content">207    <h1 class="title">Tell us who you are</h1>208 209    <div class="field">210      <div class="field-label">First Name</div>211      <input type="text" value="ABC" />212    </div>213 214    <div class="field active">215      <div class="field-label">Last Name</div>216      <input type="text" value="XYZ" />217    </div>218 219    <div class="field">220      <div class="field-label">Birthdate</div>221      <input type="text" placeholder="Birthdate" />222      <div class="help-icon"><span>?</span></div>223    </div>224 225    <div class="field">226      <div class="field-label">Gender</div>227      <input type="text" placeholder="Gender" />228      <div class="help-icon"><span>?</span></div>229    </div>230 231    <div class="note">232      Your profile is public by default. Change your visibility any time in Privacy Controls.233    </div>234 235    <div class="disabled-panel"></div>236  </div>237 238  <!-- Keyboard mock -->239  <div class="keyboard">240    <div class="suggestions">241      <span>XYZ</span>242      <span>|</span>243      <span>CUZ</span>244      <span>|</span>245      <span>XY</span>246      <div style="position:absolute; right:22px;">247        <div class="mic">248          <svg width="38" height="38" viewBox="0 0 24 24" fill="none">249            <rect x="9" y="4" width="6" height="10" rx="3" fill="#ddd"/>250            <path d="M5 11a7 7 0 0014 0" stroke="#ddd" stroke-width="2"/>251            <path d="M12 18v3" stroke="#ddd" stroke-width="2" stroke-linecap="round"/>252          </svg>253        </div>254      </div>255    </div>256 257    <div class="key-area">258      <div class="row">259        <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>260        <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>261      </div>262      <div class="row">263        <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>264        <div class="key">h</div><div class="key">j</div><div class="key">k</div><div class="key">l</div>265      </div>266      <div class="row">267        <div class="key dim wide">⇧</div>268        <div class="key">z</div><div class="key">x</div><div class="key">c</div><div class="key">v</div>269        <div class="key">b</div><div class="key">n</div><div class="key">m</div>270        <div class="key dim wide">⌫</div>271      </div>272      <div class="row bottom-row">273        <div class="pill">?123</div>274        <div class="key dim">,</div>275        <div class="key dim">😊</div>276        <div class="key space"></div>277        <div class="key dim">.</div>278        <div class="key round">✓</div>279      </div>280    </div>281 282    <div class="nav-bar">283      <div class="home-indicator"></div>284    </div>285  </div>286 287</div>288</body>289</html>