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 {9    margin: 0;10    padding: 0;11    background: transparent;12    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;13    color: #222;14  }15  #render-target {16    width: 1080px;17    height: 2400px;18    position: relative;19    overflow: hidden;20    background: #ffffff;21  }22 23  /* Status bar */24  .status-bar {25    position: absolute;26    top: 0;27    left: 0;28    width: 1080px;29    height: 130px;30    background: #B33314;31    color: #fff;32  }33  .status-inner {34    position: relative;35    height: 100%;36    padding: 0 36px;37    display: flex;38    align-items: center;39    justify-content: space-between;40  }41  .time {42    font-size: 46px;43    font-weight: 700;44    letter-spacing: 0.5px;45  }46  .status-icons {47    display: flex;48    gap: 26px;49    align-items: center;50  }51  .status-icons svg {52    display: block;53    fill: none;54    stroke: #fff;55    stroke-width: 3.5;56  }57 58  /* Content */59  .content {60    position: absolute;61    top: 130px;62    left: 0;63    right: 0;64    bottom: 0;65    overflow: hidden;66  }67  .page {68    padding: 42px 60px 0 60px;69  }70  h1.title {71    font-size: 96px;72    line-height: 1.05;73    margin: 28px 0 40px 0;74    font-weight: 800;75  }76 77  /* Fields */78  .field {79    position: relative;80    width: 960px;81    height: 150px;82    border: 2px solid #CFCFCF;83    border-radius: 18px;84    background: #fff;85    margin: 26px 0;86    padding: 48px 28px 24px 28px;87    box-sizing: border-box;88  }89  .field.focus {90    border-color: #2e2e2e;91    border-width: 3px;92  }93  .label {94    position: absolute;95    top: -18px;96    left: 22px;97    padding: 0 10px;98    background: #fff;99    color: #8c8c8c;100    font-size: 32px;101  }102  .field.focus .label {103    color: #2e2e2e;104    font-weight: 600;105  }106  .input-text {107    font-size: 50px;108    color: #222;109  }110  .placeholder {111    color: #9E9E9E;112  }113 114  .hint-icon {115    position: absolute;116    right: 20px;117    top: 50%;118    transform: translateY(-50%);119    width: 72px;120    height: 72px;121    border-radius: 36px;122    border: 2px solid #BDBDBD;123    display: flex;124    align-items: center;125    justify-content: center;126    color: #6b6b6b;127    font-weight: 700;128    font-size: 40px;129  }130 131  .helper-text {132    width: 960px;133    font-size: 38px;134    line-height: 1.35;135    color: #4b4b4b;136    margin: 26px 0 40px 0;137  }138 139  /* Keyboard mock */140  .keyboard {141    position: absolute;142    left: 0;143    right: 0;144    bottom: 0;145    width: 1080px;146    height: 780px;147    background: #1f1f1f;148    border-top-left-radius: 22px;149    border-top-right-radius: 22px;150    box-sizing: border-box;151    padding: 18px 18px 28px 18px;152  }153  .kb-suggest {154    height: 110px;155    background: #dbdbdb;156    border-radius: 14px;157    margin-bottom: 16px;158  }159  .kb-row {160    display: flex;161    justify-content: space-between;162    gap: 14px;163    margin: 16px 8px;164  }165  .key {166    flex: 1;167    height: 120px;168    background: #2b2b2b;169    border-radius: 18px;170  }171  .key.wide { flex: 1.5; }172  .key.extra-wide { flex: 3.5; }173  .key.circle {174    width: 120px;175    flex: 0 0 120px;176    border-radius: 60px;177    background: #b49cc8;178  }179  .space-row {180    display: flex;181    align-items: center;182    gap: 14px;183    margin: 16px 8px 0 8px;184  }185  .space {186    flex: 6;187    height: 120px;188    background: #2b2b2b;189    border-radius: 18px;190  }191  .return {192    width: 160px;193    height: 120px;194    background: #c6a8de;195    border-radius: 60px;196  }197  .comma {198    width: 120px;199    height: 120px;200    background: #2b2b2b;201    border-radius: 18px;202  }203  .left-func {204    width: 120px;205    height: 120px;206    background: #ae9cc3;207    border-radius: 60px;208  }209  .down-bar {210    position: absolute;211    left: 50%;212    transform: translateX(-50%);213    bottom: 10px;214    width: 300px;215    height: 10px;216    background: #bfbfbf;217    border-radius: 6px;218    opacity: 0.9;219  }220</style>221</head>222<body>223<div id="render-target">224  <!-- Status Bar -->225  <div class="status-bar">226    <div class="status-inner">227      <div class="time">8:16</div>228      <div class="status-icons">229        <!-- wifi -->230        <svg width="44" height="44" viewBox="0 0 24 24">231          <path d="M2 8c5-4 15-4 20 0"></path>232          <path d="M5 12c3-3 11-3 14 0"></path>233          <path d="M8 16c2-2 6-2 8 0"></path>234          <circle cx="12" cy="19" r="1.5" fill="#fff" stroke="none"></circle>235        </svg>236        <!-- battery -->237        <svg width="52" height="52" viewBox="0 0 28 24">238          <rect x="2" y="6" width="20" height="12" rx="2" ry="2" fill="none" stroke="#fff" stroke-width="2.5"></rect>239          <rect x="4.5" y="8.5" width="12" height="7" fill="#fff" stroke="none"></rect>240          <rect x="22.5" y="9" width="3" height="6" rx="1" ry="1" fill="#fff" stroke="none"></rect>241        </svg>242      </div>243    </div>244  </div>245 246  <!-- Page Content -->247  <div class="content">248    <div class="page">249      <h1 class="title">Tell us who you are</h1>250 251      <div class="field focus">252        <div class="label">First Name</div>253        <div class="input-text">Cer</div>254      </div>255 256      <div class="field" style="border-color:#D7D7D7;">257        <div class="label">Last Name</div>258        <div class="input-text">Research</div>259      </div>260 261      <div class="field">262        <div class="label">Birthdate</div>263        <div class="input-text placeholder">Birthdate</div>264        <div class="hint-icon">?</div>265      </div>266 267      <div class="field">268        <div class="label">Gender</div>269        <div class="input-text placeholder">Gender</div>270        <div class="hint-icon">?</div>271      </div>272 273      <div class="helper-text">274        Your profile is public by default. Change your visibility any time in Privacy Controls.275      </div>276    </div>277  </div>278 279  <!-- Keyboard Mock -->280  <div class="keyboard">281    <div class="kb-suggest"></div>282 283    <div class="kb-row">284      <div class="key"></div><div class="key"></div><div class="key"></div><div class="key"></div><div class="key"></div>285      <div class="key"></div><div class="key"></div><div class="key"></div><div class="key"></div><div class="key"></div>286    </div>287    <div class="kb-row">288      <div class="key wide"></div><div class="key"></div><div class="key"></div><div class="key"></div><div class="key"></div>289      <div class="key"></div><div class="key"></div><div class="key"></div><div class="key"></div><div class="key wide"></div>290    </div>291    <div class="kb-row">292      <div class="key wide"></div><div class="key"></div><div class="key"></div><div class="key"></div><div class="key"></div>293      <div class="key"></div><div class="key"></div><div class="key"></div><div class="key wide"></div>294    </div>295    <div class="space-row">296      <div class="left-func"></div>297      <div class="comma"></div>298      <div class="space"></div>299      <div class="return"></div>300    </div>301 302    <div class="down-bar"></div>303  </div>304</div>305</body>306</html>