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>Form - Tell us who you are</title>7<style>8  body{margin:0;padding:0;background:transparent;font-family:Arial, Helvetica, sans-serif;color:#1d1d1f;}9  #render-target{10    width:1080px;height:2400px;position:relative;overflow:hidden;11    background:#ffffff;12  }13 14  /* Status / App bar */15  .appbar{16    height:170px;background:#b12a0f;color:#fff;position:relative;padding:0 40px;17    box-sizing:border-box;18  }19  .status{20    font-size:42px;line-height:170px;font-weight:600;21  }22  .status-icons{position:absolute;right:40px;top:50%;transform:translateY(-50%);display:flex;gap:30px;align-items:center;}23  .content{padding:40px 56px 0 56px;}24  h1{25    font-size:92px;line-height:1.1;margin:36px 0 40px 0;font-weight:800;letter-spacing:-0.5px;26  }27 28  /* Form */29  .field{margin-bottom:46px;}30  .input-wrap{31    border:3px solid #bdbdbd;border-radius:20px;padding:20px 28px 26px 28px;32    position:relative;background:#fff;33  }34  .input-wrap.active{border-color:#333;}35  .label{36    position:absolute;top:-18px;left:28px;background:#fff;padding:0 10px;37    font-size:32px;color:#777;38  }39  .input{40    width:100%;border:none;outline:none;font-size:46px;line-height:56px;color:#222;background:transparent;41  }42  .info{43    position:absolute;right:22px;top:50%;transform:translateY(-50%);44    width:64px;height:64px;border:2px solid #bdbdbd;border-radius:50%;45    display:flex;align-items:center;justify-content:center;color:#777;font-weight:700;font-size:34px;background:#fff;46  }47 48  .helper{49    color:#555;font-size:36px;line-height:1.4;margin:16px 10px 34px 10px;50  }51 52  /* Keyboard mock */53  .keyboard{54    position:absolute;left:0;right:0;bottom:0;height:780px;background:#161616;color:#eee;55    border-top-left-radius:22px;border-top-right-radius:22px;56    box-shadow:0 -4px 10px rgba(0,0,0,0.25);57    padding:24px 22px 46px;box-sizing:border-box;58  }59  .kb-suggest{display:flex;align-items:center;gap:30px;color:#cfcfcf;font-size:40px;margin-bottom:18px;}60  .kb-suggest .grid{61    width:70px;height:70px;border-radius:14px;background:#262626;display:flex;align-items:center;justify-content:center;font-weight:700;62  }63  .kb-row{display:flex;gap:14px;justify-content:center;margin:12px 0;}64  .key{65    height:120px;min-width:90px;border-radius:20px;background:#2b2b2b;display:flex;align-items:center;justify-content:center;66    font-size:44px;color:#f2f2f2;box-shadow:inset 0 -2px 0 rgba(255,255,255,0.05);67  }68  .key.wide{min-width:160px;}69  .key.space{flex:1;min-width:400px;}70  .key.action{background:#4a3b52;color:#fff;}71  .kb-bottom{display:flex;gap:14px;align-items:center;justify-content:center;margin-top:10px;}72  .mic{width:90px;height:90px;border-radius:45px;background:#5a2f6a;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;}73 74  /* Home indicator */75  .home-indicator{76    position:absolute;left:50%;transform:translateX(-50%);77    bottom:14px;width:300px;height:10px;border-radius:6px;background:#e7e7e7;opacity:0.9;78  }79 80  /* Utilities */81  .muted{color:#8e8e93;}82</style>83</head>84<body>85<div id="render-target">86 87  <!-- Top colored app/status bar -->88  <div class="appbar">89    <div class="status">8:16</div>90    <div class="status-icons">91      <!-- simple wifi icon -->92      <svg width="46" height="46" viewBox="0 0 24 24" fill="none">93        <path d="M2 8c5-5 15-5 20 0" stroke="#fff" stroke-width="2" stroke-linecap="round"/>94        <path d="M5 11c3.5-3.5 10.5-3.5 14 0" stroke="#fff" stroke-width="2" stroke-linecap="round"/>95        <path d="M8 14c2-2 6-2 8 0" stroke="#fff" stroke-width="2" stroke-linecap="round"/>96        <circle cx="12" cy="18" r="1.6" fill="#fff"/>97      </svg>98      <!-- battery icon -->99      <svg width="52" height="52" viewBox="0 0 26 26" fill="none">100        <rect x="1.5" y="6" width="18" height="12" rx="2" stroke="#fff" stroke-width="2"/>101        <rect x="3.5" y="8" width="14" height="8" fill="#fff"/>102        <rect x="20.5" y="10" width="3" height="6" rx="1" fill="#fff"/>103      </svg>104    </div>105  </div>106 107  <div class="content">108    <h1>Tell us who you are</h1>109 110    <div class="field">111      <div class="input-wrap active">112        <div class="label">First Name</div>113        <input class="input" value="C" />114      </div>115    </div>116 117    <div class="field">118      <div class="input-wrap">119        <div class="label">Last Name</div>120        <input class="input" value="Research" />121      </div>122    </div>123 124    <div class="field">125      <div class="input-wrap">126        <div class="label muted">Birthdate</div>127        <div class="info">?</div>128        <input class="input" placeholder="Birthdate" />129      </div>130    </div>131 132    <div class="field">133      <div class="input-wrap">134        <div class="label muted">Gender</div>135        <div class="info">?</div>136        <input class="input" placeholder="Gender" />137      </div>138    </div>139 140    <p class="helper">141      Your profile is public by default. Change your visibility any time in Privacy Controls.142    </p>143  </div>144 145  <!-- Keyboard mockup -->146  <div class="keyboard">147    <div class="kb-suggest">148      <div class="grid">▦</div>149      <span>C</span>150      <span>|</span>151      <span>Call</span>152      <span>|</span>153      <span>Can</span>154      <div style="margin-left:auto" class="mic">🎤</div>155    </div>156 157    <div class="kb-row">158      <div class="key">q</div><div class="key">w</div><div class="key">e</div><div class="key">r</div>159      <div class="key">t</div><div class="key">y</div><div class="key">u</div><div class="key">i</div>160      <div class="key">o</div><div class="key">p</div>161    </div>162    <div class="kb-row">163      <div class="key">a</div><div class="key">s</div><div class="key">d</div><div class="key">f</div>164      <div class="key">g</div><div class="key">h</div><div class="key">j</div><div class="key">k</div>165      <div class="key">l</div>166    </div>167    <div class="kb-row">168      <div class="key wide">⇧</div>169      <div class="key">z</div><div class="key">x</div><div class="key">c</div><div class="key">v</div>170      <div class="key">b</div><div class="key">n</div><div class="key">m</div>171      <div class="key wide">⌫</div>172    </div>173    <div class="kb-bottom">174      <div class="key">?123</div>175      <div class="key">,</div>176      <div class="key space"></div>177      <div class="key">.</div>178      <div class="key action">↵</div>179    </div>180  </div>181 182  <div class="home-indicator"></div>183</div>184</body>185</html>