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>Form UI</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, 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: absolute;20    top: 0; left: 0; right: 0;21    height: 150px;22    background: #B12F14;23    color: #fff;24    display: flex;25    align-items: center;26    justify-content: space-between;27    padding: 0 40px;28    box-sizing: border-box;29  }30  .status-left { font-size: 40px; font-weight: 600; letter-spacing: 0.5px; }31  .status-right {32    display: flex; align-items: center; gap: 28px;33  }34  .icon-phone {35    width: 34px; height: 34px; border: 2px solid #fff; border-radius: 6px; position: relative;36  }37  .icon-phone::after {38    content: ""; position: absolute; left: 8px; bottom: -6px;39    width: 18px; height: 6px; background: #fff; border-radius: 4px;40  }41  .icon-wifi svg, .icon-battery svg { display: block; }42  .icon-wifi { width: 48px; height: 34px; }43  .icon-battery { width: 60px; height: 34px; }44 45  /* Content */46  .content {47    position: absolute;48    top: 150px; left: 0; right: 0; bottom: 0;49    padding: 0 64px 0 64px;50    box-sizing: border-box;51    color: #111;52  }53  .title {54    font-weight: 700;55    font-size: 88px;56    line-height: 100px;57    margin: 54px 0 26px 0;58  }59 60  .field {61    position: relative;62    border: 4px solid #BDBDBD;63    border-radius: 22px;64    padding: 44px 32px 46px 32px;65    margin: 32px 0;66    box-sizing: border-box;67    min-height: 160px;68  }69  .field.focused { border-color: #333333; }70  .field-label {71    position: absolute;72    top: -22px;73    left: 28px;74    background: #fff;75    padding: 4px 10px;76    font-size: 32px;77    color: #6E6E6E;78  }79  /* small top line continuing to the right of label */80  .field .label-line {81    position: absolute;82    top: -10px;83    left: 220px;84    right: 18px;85    height: 2px;86    background: #C8C8C8;87  }88  .field.focused .label-line { background: #333333; }89 90  .field-value {91    font-size: 56px;92    color: #2b2b2b;93    margin-top: 14px;94  }95  .placeholder { color: #9E9E9E; }96 97  .help {98    position: absolute;99    right: 26px;100    top: 92px;101    width: 72px; height: 72px;102    border: 3px solid #BDBDBD;103    border-radius: 50%;104    color: #777;105    display: flex; align-items: center; justify-content: center;106    font-size: 44px; font-weight: 600;107  }108 109  /* Selection handle (teardrop) */110  .handle {111    position: absolute;112    left: 120px;113    bottom: -28px;114    width: 56px; height: 56px;115    background: #222;116    border-radius: 50%;117  }118  .handle::before {119    content: "";120    position: absolute;121    top: -18px; left: 14px;122    width: 0; height: 0;123    border-left: 14px solid transparent;124    border-right: 14px solid transparent;125    border-bottom: 18px solid #222;126  }127 128  .note {129    font-size: 36px;130    line-height: 48px;131    color: #333;132    margin-top: 24px;133  }134 135  /* Keyboard mock */136  .keyboard {137    position: absolute;138    left: 0; right: 0; bottom: 0;139    height: 1020px;140    background: #1f1f1f;141    color: #fff;142    box-sizing: border-box;143    padding: 24px 28px;144    border-top-left-radius: 22px;145    border-top-right-radius: 22px;146  }147  .kb-suggestions {148    height: 120px;149    background: #E3E3E3;150    border-radius: 12px;151    margin: 0 16px 14px 16px;152    display: flex; align-items: center; justify-content: center;153    color: #333; font-size: 44px; font-weight: 600;154    gap: 16px;155  }156  .kb-row {157    display: flex;158    gap: 14px;159    padding: 10px 16px;160    justify-content: center;161  }162  .key {163    background: #2a2a2a;164    border-radius: 20px;165    height: 120px;166    min-width: 88px;167    display: flex; align-items: center; justify-content: center;168    font-size: 48px; color: #ddd;169  }170  .key.wide { min-width: 160px; }171  .key.space { min-width: 520px; }172  .key.purple { background: #7C6A8D; color: #fff; }173  .key.gray { background: #404040; }174  .key.icon { font-size: 42px; }175  .key.backspace {176    padding: 0 36px;177    min-width: 160px;178  }179  .nav-indicator {180    position: absolute;181    bottom: 20px; left: 50%;182    transform: translateX(-50%);183    width: 180px; height: 8px;184    background: #e9e9e9; border-radius: 6px;185  }186</style>187</head>188<body>189<div id="render-target">190  <!-- Status bar -->191  <div class="status-bar">192    <div class="status-left">8:12</div>193    <div class="status-right">194      <div class="icon-phone"></div>195      <div class="icon-wifi">196        <svg width="48" height="34" viewBox="0 0 48 34" xmlns="http://www.w3.org/2000/svg">197          <path d="M24 26c3 0 5 2 5 5h-10c0-3 2-5 5-5z" fill="#fff"/>198          <path d="M10 16c9-8 19-8 28 0" stroke="#fff" stroke-width="3" fill="none" stroke-linecap="round"/>199          <path d="M16 20c6-5 12-5 18 0" stroke="#fff" stroke-width="3" fill="none" stroke-linecap="round"/>200        </svg>201      </div>202      <div class="icon-battery">203        <svg width="60" height="34" viewBox="0 0 60 34" xmlns="http://www.w3.org/2000/svg">204          <rect x="3" y="6" width="48" height="22" rx="4" stroke="#fff" stroke-width="3" fill="none"/>205          <rect x="8" y="10" width="36" height="14" rx="3" fill="#fff"/>206          <rect x="52" y="12" width="6" height="10" rx="2" fill="#fff"/>207        </svg>208      </div>209    </div>210  </div>211 212  <!-- Content -->213  <div class="content">214    <div class="title">Tell us who you are</div>215 216    <div class="field focused">217      <div class="field-label">First Name</div>218      <div class="label-line"></div>219      <div class="field-value">Cerebra</div>220      <div class="handle"></div>221    </div>222 223    <div class="field">224      <div class="field-label">Last Name</div>225      <div class="label-line"></div>226      <div class="field-value">Research</div>227    </div>228 229    <div class="field">230      <div class="field-label">Birthdate</div>231      <div class="label-line"></div>232      <div class="field-value placeholder">Birthdate</div>233      <div class="help">?</div>234    </div>235 236    <div class="field">237      <div class="field-label">Gender</div>238      <div class="label-line"></div>239      <div class="field-value placeholder">Gender</div>240      <div class="help">?</div>241    </div>242 243    <div class="note">244      Your profile is public by default. Change your visibility any time in Privacy Controls.245    </div>246  </div>247 248  <!-- Keyboard mockup -->249  <div class="keyboard">250    <div class="kb-suggestions">251      <span>Cerebra</span><span>|</span><span>Cerebral</span>252    </div>253 254    <div class="kb-row">255      <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>256      <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>257    </div>258    <div class="kb-row">259      <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>260      <div class="key">h</div><div class="key">j</div><div class="key">k</div><div class="key">l</div>261    </div>262    <div class="kb-row">263      <div class="key gray wide">⇧</div>264      <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>265      <div class="key gray backspace">⌫</div>266    </div>267    <div class="kb-row">268      <div class="key purple wide">?123</div>269      <div class="key gray wide">,</div>270      <div class="