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; }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, Helvetica, Arial, sans-serif;16    color: #222222;17  }18 19  /* Status bar */20  .statusbar {21    position: absolute;22    top: 0;23    left: 0;24    right: 0;25    height: 130px;26    background: #B12C0A; /* deep red */27    color: #fff;28  }29  .statusbar .time {30    position: absolute;31    left: 36px;32    top: 40px;33    font-size: 42px;34    font-weight: 600;35    letter-spacing: 1px;36  }37  .status-icons {38    position: absolute;39    right: 36px;40    top: 34px;41    display: flex;42    align-items: center;43    gap: 26px;44  }45  .icon {46    width: 48px;47    height: 48px;48  }49 50  /* Content */51  .content {52    position: absolute;53    top: 130px;54    left: 0;55    right: 0;56    bottom: 0;57    padding: 56px 72px 0 72px;58    overflow: hidden;59  }60  h1.title {61    font-size: 96px;62    line-height: 1.05;63    margin: 24px 0 38px 0;64    font-weight: 700;65    letter-spacing: -1px;66  }67 68  /* Fields */69  .field {70    position: relative;71    width: 936px;72    height: 150px;73    border: 3px solid #C9C9C9;74    border-radius: 20px;75    margin: 28px 0;76    box-sizing: border-box;77    background: #fff;78  }79  .field.focused {80    border: 5px solid #1F1F1F;81  }82  .field .label {83    position: absolute;84    top: -16px;85    left: 28px;86    padding: 0 12px;87    background: #ffffff;88    font-size: 34px;89    color: #8D8D8D;90  }91  .field.focused .label {92    color: #222222;93    font-weight: 600;94  }95  .field input {96    position: absolute;97    left: 28px;98    right: 28px;99    top: 56px;100    height: 56px;101    font-size: 46px;102    border: none;103    outline: none;104    background: transparent;105    color: #222;106  }107  .placeholder {108    color: #B5B5B5;109  }110 111  /* Help icon circle with ? */112  .help {113    position: absolute;114    right: 24px;115    top: 46px;116    width: 58px;117    height: 58px;118    border-radius: 50%;119    border: 3px solid #BDBDBD;120    display: flex;121    align-items: center;122    justify-content: center;123    color: #7A7A7A;124    font-size: 40px;125    font-weight: 600;126  }127 128  .hint {129    width: 936px;130    margin-top: 40px;131    font-size: 38px;132    line-height: 1.35;133    color: #5A5A5A;134  }135 136  /* Keyboard overlay (mock) */137  .keyboard {138    position: absolute;139    left: 0;140    right: 0;141    bottom: 0;142    height: 860px;143    background: #1E1E1F;144    color: #ECECEC;145    border-top-left-radius: 14px;146    border-top-right-radius: 14px;147    box-shadow: 0 -6px 18px rgba(0,0,0,0.35);148    padding: 18px 24px;149    box-sizing: border-box;150  }151  .keyboard .suggestions {152    display: flex;153    justify-content: space-between;154    color: #CFCFCF;155    font-size: 40px;156    padding: 10px 12px 18px 12px;157  }158  .row {159    display: flex;160    justify-content: space-between;161    margin: 12px 8px;162  }163  .key {164    background: #2B2B2D;165    border-radius: 16px;166    height: 118px;167    flex: 1;168    margin: 0 6px;169    display: flex;170    align-items: center;171    justify-content: center;172    font-size: 46px;173    color: #F0F0F0;174  }175  .key.small { flex: 0.8; }176  .key.wide { flex: 1.8; }177  .key.action {178    background: #D5C6E9;179    color: #2F2F2F;180  }181  .gesture {182    position: absolute;183    bottom: 18px;184    left: 50%;185    transform: translateX(-50%);186    width: 240px;187    height: 10px;188    border-radius: 6px;189    background: #EDEDED;190    opacity: 0.9;191  }192</style>193</head>194<body>195<div id="render-target">196  <!-- Status bar -->197  <div class="statusbar">198    <div class="time">8:19 NB</div>199    <div class="status-icons">200      <!-- Wi-Fi -->201      <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2">202        <path d="M2 9c5-4 15-4 20 0" />203        <path d="M6 13c3-3 9-3 12 0" />204        <path d="M10 17c1-1 3-1 4 0" />205        <circle cx="12" cy="20" r="1.5" fill="white"></circle>206      </svg>207      <!-- Battery -->208      <svg class="icon" viewBox="0 0 28 16" fill="white">209        <rect x="1" y="3" width="22" height="10" rx="2"></rect>210        <rect x="24" y="6" width="3" height="4" rx="1" fill="white"></rect>211      </svg>212    </div>213  </div>214 215  <!-- Main content -->216  <div class="content">217    <h1 class="title">Tell us who you are</h1>218 219    <div class="field">220      <div class="label">First Name</div>221      <input type="text" value="ABC">222    </div>223 224    <div class="field focused">225      <div class="label">Last Name</div>226      <input type="text" value="Res">227    </div>228 229    <div class="field">230      <div class="label">Birthdate</div>231      <input type="text" class="placeholder" value="" placeholder="">232      <div class="help">?</div>233    </div>234 235    <div class="field">236      <div class="label">Gender</div>237      <input type="text" class="placeholder" value="" placeholder="">238      <div class="help">?</div>239    </div>240 241    <div class="hint">242      Your profile is public by default. Change your visibility any time in Privacy Controls.243    </div>244  </div>245 246  <!-- Keyboard mock -->247  <div class="keyboard">248    <div class="suggestions">249      <span>Res</span><span>Red</span><span>Rest</span>250    </div>251 252    <div class="row">253      <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>254      <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>255    </div>256    <div class="row">257      <div class="key small">a</div><div class="key">s</div><div class="key">d</div><div class="key">f</div><div class="key">g</div>258      <div class="key">h</div><div class="key">j</div><div class="key">k</div><div class="key small">l</div>259    </div>260    <div class="row">261      <div class="key small">⇧</div><div class="key">z</div><div class="key">x</div><div class="key">c</div><div class="key">v</div>262      <div class="key">b</div><div class="key">n</div><div class="key">m</div><div class="key small">⌫</div>263    </div>264    <div class="row">265      <div class="key small action">?123</div>266      <div class="key small">,</div>267      <div class="key wide">space</div>268      <div class="key small">.</div>269      <div class="key small action">✓</div>270    </div>271 272    <div class="gesture"></div>273  </div>274</div>275</body>276</html>