GD-ML/AndroidCode

1<!DOCTYPE html>2<html>3<head>4<meta charset="UTF-8">5<title>Form Screen Mock</title>6<style>7  body { margin: 0; padding: 0; background: transparent; font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; }8  #render-target {9    width: 1080px;10    height: 2400px;11    position: relative;12    overflow: hidden;13    background: #FFFFFF;14  }15 16  /* Status bar */17  .status-bar {18    position: absolute;19    top: 0;20    left: 0;21    width: 1080px;22    height: 150px;23    background: #B33217; /* deep red */24    color: #fff;25    display: flex;26    align-items: center;27    justify-content: space-between;28    padding: 0 40px;29    box-sizing: border-box;30  }31  .status-time {32    font-size: 52px;33    font-weight: 600;34    letter-spacing: 1px;35  }36  .status-icons {37    display: flex;38    align-items: center;39    gap: 28px;40  }41  .status-icons svg {42    display: block;43    width: 48px;44    height: 48px;45    fill: none;46    stroke: #fff;47    stroke-width: 4;48  }49 50  /* Content */51  .content {52    position: absolute;53    left: 0;54    top: 150px; /* below status bar */55    width: 100%;56    padding: 60px;57    box-sizing: border-box;58  }59  .title {60    font-size: 84px;61    line-height: 96px;62    color: #2E2E2E;63    font-weight: 700;64    margin: 30px 0 40px 0;65  }66 67  /* Fields */68  .field {69    position: relative;70    width: 960px;71    margin: 30px 0 38px 0;72  }73  .field .label {74    position: absolute;75    top: -18px;76    left: 24px;77    font-size: 34px;78    color: #8E8E8E;79    background: #fff;80    padding: 0 10px;81  }82  .input {83    width: 100%;84    height: 140px;85    border: 2px solid #CFCFCF;86    border-radius: 18px;87    padding: 26px 34px;88    font-size: 52px;89    color: #222;90    box-sizing: border-box;91    outline: none;92    background: #fff;93  }94  .field.focused .input {95    border-color: #1F1F1F;96    border-width: 4px;97  }98 99  .field.with-icon .help {100    position: absolute;101    right: 28px;102    top: 50%;103    transform: translateY(-50%);104    width: 72px;105    height: 72px;106    border: 2px solid #BDBDBD;107    border-radius: 50%;108    color: #6E6E6E;109    font-size: 44px;110    display: flex;111    align-items: center;112    justify-content: center;113    background: #fff;114  }115 116  .info {117    width: 960px;118    font-size: 36px;119    line-height: 50px;120    color: #5A5A5A;121    margin-top: 34px;122  }123 124  /* Keyboard mock */125  .keyboard {126    position: absolute;127    left: 0;128    bottom: 0;129    width: 1080px;130    height: 960px;131    background: #1C1C1C;132    color: #EDEDED;133    box-sizing: border-box;134    padding: 24px 28px;135  }136  .suggestions {137    display: flex;138    gap: 32px;139    padding: 12px 8px 24px 8px;140    font-size: 40px;141    color: #CFCFCF;142  }143  .suggestion {144    background: #2A2A2A;145    padding: 18px 24px;146    border-radius: 16px;147  }148  .keys {149    display: grid;150    grid-template-columns: repeat(10, 1fr);151    gap: 14px;152    margin-bottom: 24px;153  }154  .key {155    height: 120px;156    background: #2B2B2B;157    border-radius: 22px;158    display: flex;159    align-items: center;160    justify-content: center;161    font-size: 46px;162  }163  .key.wide { grid-column: span 2; }164  .bottom-row {165    display: grid;166    grid-template-columns: 1.2fr 7fr 1fr 1fr;167    gap: 14px;168    align-items: center;169  }170  .special {171    height: 120px;172    background: #2B2B2B;173    border-radius: 22px;174    display: flex;175    align-items: center;176    justify-content: center;177    font-size: 40px;178    color: #D9D9D9;179  }180  .circle-btn {181    width: 120px;182    height: 120px;183    border-radius: 60px;184    background: #CCB6D8;185    color: #2B2B2B;186    font-weight: 700;187    display: flex;188    align-items: center;189    justify-content: center;190    font-size: 46px;191  }192  .emoji {193    width: 120px;194    height: 120px;195    border-radius: 22px;196    background: #2B2B2B;197    display: flex;198    align-items: center;199    justify-content: center;200    font-size: 52px;201  }202  .space {203    height: 120px;204    background: #2B2B2B;205    border-radius: 22px;206  }207</style>208</head>209<body>210<div id="render-target">211  <div class="status-bar">212    <div class="status-time">8:18</div>213    <div class="status-icons">214      <!-- simple cell icon -->215      <svg viewBox="0 0 24 24"><rect x="5" y="3" width="14" height="18" rx="2" ry="2" stroke="#fff"/></svg>216      <!-- wifi icon -->217      <svg viewBox="0 0 24 24">218        <path d="M2 8c5-4 15-4 20 0" />219        <path d="M5 12c3-3 11-3 14 0" />220        <path d="M8 16c2-2 6-2 8 0" />221        <circle cx="12" cy="19" r="1.5" fill="#fff" stroke="none"/>222      </svg>223      <!-- battery icon -->224      <svg viewBox="0 0 28 24">225        <rect x="2" y="5" width="20" height="14" rx="2" ry="2" />226        <rect x="23" y="9" width="3" height="6" rx="1" />227        <rect x="4" y="7" width="12" height="10" fill="#fff" stroke="none"/>228      </svg>229    </div>230  </div>231 232  <div class="content">233    <div class="title">Tell us who you are</div>234 235    <div class="field">236      <div class="label">First Name</div>237      <input class="input" type="text" value="ABC">238    </div>239 240    <div class="field focused">241      <div class="label">Last Name</div>242      <input class="input" type="text" value="Researc">243    </div>244 245    <div class="field with-icon">246      <div class="label">Birthdate</div>247      <input class="input" type="text" placeholder="">248      <div class="help">?</div>249    </div>250 251    <div class="field with-icon">252      <div class="label">Gender</div>253      <input class="input" type="text" placeholder="">254      <div class="help">?</div>255    </div>256 257    <div class="info">258      Your profile is public by default. Change your visibility any time in Privacy Controls.259    </div>260  </div>261 262  <!-- Keyboard mock at bottom -->263  <div class="keyboard">264    <div class="suggestions">265      <div class="suggestion">Researc</div>266      <div class="suggestion">Researcher</div>267      <div class="suggestion">Researching</div>268    </div>269 270    <div class="keys">271      <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>272    </div>273    <div class="keys">274      <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><div class="key">;</div>275    </div>276    <div class="keys">277      <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><div class="key">,</div><div class="key">.</div><div class="key">⌫</div>278    </div>279 280    <div class="bottom-row">281      <div class="circle-btn">?123</div>282      <div class="space"></div>283      <div class="emoji">☺</div>284      <div class="circle-btn">✓</div>285    </div>286  </div>287</div>288</body>289</html>