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; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #ffffff;15    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, Helvetica, sans-serif;16    color: #212121;17  }18 19  /* Status bar */20  .status-bar {21    position: absolute;22    top: 0;23    left: 0;24    right: 0;25    height: 120px;26    background: #B13211;27    color: #fff;28    display: flex;29    align-items: center;30    padding: 0 36px;31    box-sizing: border-box;32  }33  .status-time {34    font-size: 40px;35    font-weight: 600;36  }37  .status-icons {38    margin-left: auto;39    display: flex;40    align-items: center;41    gap: 26px;42  }43  .status-icons svg { display: block; }44 45  /* Content */46  .content {47    position: absolute;48    top: 120px;49    left: 0;50    right: 0;51    bottom: 760px; /* keyboard height */52    padding: 56px 64px 24px;53    box-sizing: border-box;54    overflow: hidden;55  }56  h1.title {57    font-size: 92px;58    line-height: 1.05;59    margin: 12px 0 44px;60    font-weight: 800;61    color: #2b2b2b;62  }63 64  .field {65    position: relative;66    border: 3px solid #CFCFCF;67    border-radius: 22px;68    padding: 30px 32px;69    height: 150px;70    box-sizing: border-box;71    margin-bottom: 38px;72    display: flex;73    align-items: flex-end;74    background: #fff;75  }76  .field.active {77    border: 5px solid #1b1b1b;78  }79  .field-label {80    position: absolute;81    top: -18px;82    left: 28px;83    background: #ffffff;84    padding: 0 12px;85    color: #9E9E9E;86    font-size: 34px;87  }88  .field-value {89    font-size: 48px;90    color: #222;91    width: 100%;92  }93  .with-help {94    padding-right: 100px;95  }96  .help-icon {97    position: absolute;98    right: 22px;99    top: 50%;100    transform: translateY(-50%);101  }102 103  .hint {104    font-size: 36px;105    color: #5c5c5c;106    line-height: 1.45;107    margin-top: 10px;108  }109 110  /* Keyboard mock */111  .keyboard {112    position: absolute;113    left: 0; right: 0; bottom: 0;114    height: 760px;115    background: #1f1f1f;116    border-top-left-radius: 18px;117    border-top-right-radius: 18px;118    color: #fff;119    box-sizing: border-box;120  }121  .kb-suggest {122    height: 96px;123    background: #2a2a2a;124    display: flex;125    align-items: center;126    gap: 20px;127    padding: 0 22px;128    box-sizing: border-box;129    border-top-left-radius: 18px;130    border-top-right-radius: 18px;131  }132  .chip {133    background: #3a3a3a;134    color: #e6e6e6;135    padding: 14px 22px;136    border-radius: 24px;137    font-size: 32px;138    white-space: nowrap;139  }140  .kb-rows {141    padding: 22px 18px 10px;142    box-sizing: border-box;143  }144  .kb-row {145    display: flex;146    gap: 14px;147    justify-content: center;148    margin: 14px 0;149  }150  .key {151    background: #2b2b2b;152    width: 90px;153    height: 120px;154    border-radius: 18px;155    display: flex;156    align-items: center;157    justify-content: center;158    font-size: 46px;159    color: #ffffff;160  }161  .key.wide { width: 150px; }162  .key.space { flex: 1; height: 120px; border-radius: 16px; }163  .key.circle { width: 120px; height: 120px; border-radius: 60px; }164  .key.accent { background: #c9a9ff; color: #222; }165 166  .home-bar {167    position: absolute;168    bottom: 18px;169    left: 50%;170    transform: translateX(-50%);171    width: 300px;172    height: 10px;173    background: #d9d9d9;174    border-radius: 6px;175    opacity: 0.7;176  }177</style>178</head>179<body>180<div id="render-target">181  <!-- Status Bar -->182  <div class="status-bar">183    <div class="status-time">8:18</div>184    <div class="status-icons">185      <!-- cellular/wifi simple icon -->186      <svg width="44" height="44" viewBox="0 0 24 24" fill="none">187        <path d="M2 9c4-3 16-3 20 0l-2 2c-3-2-13-2-16 0L2 9z" fill="#ffffff"/>188        <path d="M6 13c3-2 9-2 12 0l-2 2c-2-1-6-1-8 0l-2-2z" fill="#ffffff" opacity="0.8"/>189        <circle cx="12" cy="18" r="2" fill="#ffffff"/>190      </svg>191      <!-- battery -->192      <svg width="56" height="44" viewBox="0 0 28 16" fill="none">193        <rect x="1" y="3" width="22" height="10" rx="2" stroke="#fff" stroke-width="2"/>194        <rect x="3" y="5" width="18" height="6" fill="#ffffff"/>195        <rect x="24" y="6" width="3" height="4" rx="1" fill="#ffffff"/>196      </svg>197    </div>198  </div>199 200  <!-- Content -->201  <div class="content">202    <h1 class="title">Tell us who you are</h1>203 204    <div class="field">205      <div class="field-label">First Name</div>206      <div class="field-value">ABC</div>207    </div>208 209    <div class="field active">210      <div class="field-label">Last Name</div>211      <div class="field-value">Resear</div>212    </div>213 214    <div class="field with-help">215      <div class="field-label">Birthdate</div>216      <div class="field-value" style="color:#9E9E9E;">Birthdate</div>217      <div class="help-icon">218        <svg width="56" height="56" viewBox="0 0 56 56">219          <circle cx="28" cy="28" r="26" fill="none" stroke="#9E9E9E" stroke-width="3"/>220          <text x="28" y="34" text-anchor="middle" font-size="28" fill="#6f6f6f" font-family="Arial">?</text>221        </svg>222      </div>223    </div>224 225    <div class="field with-help">226      <div class="field-label">Gender</div>227      <div class="field-value" style="color:#9E9E9E;">Gender</div>228      <div class="help-icon">229        <svg width="56" height="56" viewBox="0 0 56 56">230          <circle cx="28" cy="28" r="26" fill="none" stroke="#9E9E9E" stroke-width="3"/>231          <text x="28" y="34" text-anchor="middle" font-size="28" fill="#6f6f6f" font-family="Arial">?</text>232        </svg>233      </div>234    </div>235 236    <div class="hint">237      Your profile is public by default. Change your visibility any time in Privacy Controls.238    </div>239  </div>240 241  <!-- Keyboard mock -->242  <div class="keyboard">243    <div class="kb-suggest">244      <div class="chip" style="background:#494949;">Resear</div>245      <div class="chip">Researcher</div>246      <div class="chip">Researching</div>247      <div style="margin-left:auto; display:flex; align-items:center; gap:12px;">248        <div class="key circle" style="width:70px;height:70px;background:#3a3a3a;border-radius:35px; font-size:34px;">⌘</div>249        <div class="key circle" style="width:70px;height:70px;background:#3a3a3a;border-radius:35px; font-size:34px;">🎤</div>250      </div>251    </div>252 253    <div class="kb-rows">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><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>256      </div>257      <div class="kb-row" style="padding: 0 60px;">258        <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>259      </div>260      <div class="kb-row" style="padding: 0 120px;">261        <div class="key wide">⇧</div>262        <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>263        <div class="key wide">⌫</div>264      </div>265      <div class="kb-row">266        <div class="key circle" style="background:#b3a3c9;color:#2a2a2a;font-size:40px;">?123</div>267        <div class="key" style="width:90px">,</div>268        <div class="key" style="width:90px">😊</div>269        <div class="key space"></div>270        <div class="key" style="width:90px">.</div>271        <div class="key circle accent">✓</div>272      </div>273    </div>274 275    <div class="home-bar"></div>276  </div>277</div>278</body>279</html>