GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Tell us who you are - Form</title>6<meta name="viewport" content="width=device-width, initial-scale=1.0">7<style>8  /* Body reset and transparency */9  body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; color: #111; }10 11  /* Root render target */12  #render-target {13    width: 1080px;14    height: 2400px;15    position: relative;16    overflow: hidden;17    background: #ffffff;18  }19 20  /* Status bar */21  .status-bar {22    position: absolute;23    top: 0;24    left: 0;25    width: 1080px;26    height: 130px;27    background: #b13314; /* deep red */28    color: #fff;29  }30  .status-content {31    height: 100%;32    padding: 0 36px;33    display: flex;34    align-items: center;35    justify-content: space-between;36  }37  .status-time {38    font-size: 44px;39    font-weight: 600;40    letter-spacing: 0.5px;41  }42  .status-icons {43    display: flex;44    align-items: center;45    gap: 26px;46  }47  .icon {48    display: inline-flex;49    width: 42px;50    height: 42px;51  }52 53  /* Screen content */54  .screen {55    position: absolute;56    top: 130px; /* below status bar */57    left: 0;58    right: 0;59    bottom: 0;60    overflow-y: auto;61  }62 63  .content {64    padding: 48px 56px 0 56px;65  }66 67  .title {68    font-size: 88px;69    font-weight: 700;70    line-height: 1.1;71    margin: 24px 0 40px 0;72  }73 74  /* Form fields with floating labels */75  .field {76    position: relative;77    border: 3px solid #C9C9C9;78    border-radius: 20px;79    padding: 48px 36px 36px 36px;80    height: 160px;81    box-sizing: border-box;82    margin-bottom: 44px;83    background: #fff;84  }85  .field.active {86    border-color: #2f2f2f;87  }88  .field .label {89    position: absolute;90    top: -18px;91    left: 28px;92    font-size: 34px;93    color: #6f6f6f;94    background: #ffffff;95    padding: 0 14px;96  }97  .field input {98    width: 100%;99    height: 100%;100    border: none;101    outline: none;102    font-size: 48px;103    color: #111;104    background: transparent;105  }106  .placeholder {107    color: #9b9b9b;108  }109 110  /* Right-side help icon inside field */111  .help-icon {112    position: absolute;113    right: 28px;114    top: 50%;115    transform: translateY(-50%);116    width: 72px;117    height: 72px;118    border: 3px solid #BEBEBE;119    border-radius: 50%;120    display: flex;121    align-items: center;122    justify-content: center;123    color: #6f6f6f;124    font-size: 44px;125    background: #ffffff;126  }127 128  .helper-text {129    font-size: 38px;130    line-height: 1.45;131    color: #3b3b3b;132    margin: 18px 8px 48px 8px;133  }134 135  /* Keyboard overlay */136  .keyboard {137    position: absolute;138    left: 0;139    right: 0;140    bottom: 40px;141    height: 820px;142    background: #1e1e20;143    padding: 28px 26px 110px 26px;144    box-sizing: border-box;145  }146  .kb-row {147    display: flex;148    justify-content: space-between;149    margin: 18px 0;150  }151  .key {152    background: #2a2a2c;153    border-radius: 18px;154    height: 110px;155    flex: 1;156    margin: 0 8px;157  }158  .key.wide { flex: 1.6; }159  .key.extra-wide { flex: 4.4; }160  .key.small { flex: 0.9; }161  .kb-topbar {162    display: flex;163    align-items: center;164    gap: 24px;165    margin-bottom: 10px;166  }167  .kb-suggestion {168    color: #eaeaea;169    background: #2f2f31;170    padding: 10px 18px;171    border-radius: 14px;172    font-size: 36px;173  }174 175  /* Home indicator */176  .home-indicator {177    position: absolute;178    bottom: 14px;179    left: 50%;180    transform: translateX(-50%);181    width: 300px;182    height: 10px;183    background: #e6e6e6;184    border-radius: 10px;185  }186</style>187</head>188<body>189<div id="render-target">190  <!-- Status bar -->191  <div class="status-bar">192    <div class="status-content">193      <div class="status-time">8:16</div>194      <div class="status-icons">195        <!-- Simple wifi icon -->196        <svg class="icon" viewBox="0 0 24 24" fill="none">197          <path d="M12 20a2 2 0 1 0 0-4 2 2 0 0 0 0 4z" fill="#ffffff"/>198          <path d="M4 10c4.4-4 11.6-4 16 0" stroke="#ffffff" stroke-width="2" stroke-linecap="round"/>199          <path d="M7 13c3-3 7-3 10 0" stroke="#ffffff" stroke-width="2" stroke-linecap="round"/>200        </svg>201        <!-- Battery icon -->202        <svg class="icon" viewBox="0 0 26 24" fill="none">203          <rect x="1" y="6" width="20" height="12" rx="2" stroke="#ffffff" stroke-width="2"/>204          <rect x="3" y="8" width="12" height="8" fill="#ffffff"/>205          <rect x="22" y="9" width="3" height="6" rx="1" fill="#ffffff"/>206        </svg>207      </div>208    </div>209  </div>210 211  <!-- Main screen scrollable content -->212  <div class="screen">213    <div class="content">214      <div class="title">Tell us who you are</div>215 216      <div class="field active">217        <div class="label">First Name</div>218        <input type="text" value="Cereb">219      </div>220 221      <div class="field">222        <div class="label">Last Name</div>223        <input type="text" value="Research">224      </div>225 226      <div class="field">227        <div class="label">Birthdate</div>228        <input class="placeholder" type="text" placeholder="Birthdate">229        <div class="help-icon">?</div>230      </div>231 232      <div class="field">233        <div class="label">Gender</div>234        <input class="placeholder" type="text" placeholder="Gender">235        <div class="help-icon">?</div>236      </div>237 238      <div class="helper-text">239        Your profile is public by default. Change your visibility any time in Privacy Controls.240      </div>241    </div>242  </div>243 244  <!-- Keyboard overlay approximation -->245  <div class="keyboard">246    <div class="kb-topbar">247      <div class="kb-suggestion">Cereb</div>248      <div class="kb-suggestion">Cerebral</div>249      <div class="kb-suggestion">Cerebellum</div>250    </div>251    <div class="kb-row">252      <div class="key"></div><div class="key"></div><div class="key"></div><div class="key"></div><div class="key"></div><div class="key"></div><div class="key"></div><div class="key"></div><div class="key"></div><div class="key"></div>253    </div>254    <div class="kb-row">255      <div class="key small"></div><div class="key"></div><div class="key"></div><div class="key"></div><div class="key"></div><div class="key"></div><div class="key"></div><div class="key"></div><div class="key"></div><div class="key small"></div>256    </div>257    <div class="kb-row">258      <div class="key small"></div><div class="key"></div><div class="key"></div><div class="key"></div><div class="key"></div><div class="key"></div><div class="key"></div><div class="key"></div><div class="key"></div><div class="key small"></div>259    </div>260    <div class="kb-row">261      <div class="key wide"></div>262      <div class="key extra-wide"></div>263      <div class="key"></div>264      <div class="key small"></div>265    </div>266  </div>267 268  <div class="home-indicator"></div>269</div>270</body>271</html>