GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html>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; }9 #render-target {10 width:1080px; height:2400px;11 position:relative; overflow:hidden;12 background:#ffffff;13 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;14 color:#222;15 }16 /* Top App Bar */17 .appbar {18 position:absolute; top:0; left:0; right:0;19 height:190px; background:#B6311F;20 padding:28px 36px 0 36px;21 box-sizing:border-box;22 }23 .status {24 display:flex; align-items:center; justify-content:space-between;25 color:#fff; font-weight:600; font-size:44px;26 }27 .status-right { display:flex; gap:24px; align-items:center; }28 .content {29 position:absolute; left:0; right:0; top:190px; bottom:0;30 padding:60px 54px 0 54px;31 box-sizing:border-box;32 }33 h1 {34 margin:0 0 38px 0;35 font-size:86px; line-height:1.1; font-weight:700; color:#333;36 }37 /* Inputs */38 .field { position:relative; margin:28px 0; }39 .input {40 height:150px; border:3px solid #CFCFCF; border-radius:18px;41 box-sizing:border-box; padding:44px 40px 0 40px; font-size:46px; color:#111; background:#fff;42 }43 .floating-label {44 position:absolute; left:36px; top:-18px;45 padding:0 10px; background:#fff;46 font-size:36px; color:#7a7a7a;47 }48 .field.focus .input { border-color:#111; border-width:4px; }49 .hint-icon {50 position:absolute; right:24px; top:50%;51 transform:translateY(-50%);52 width:70px; height:70px; border-radius:50%;53 border:2px solid #BDBDBD; color:#777;54 display:flex; align-items:center; justify-content:center;55 font-size:40px; background:#fff;56 }57 .helper {58 margin:40px 0 0 0; color:#5f5f5f; font-size:42px; line-height:1.4;59 }60 61 /* Keyboard mock */62 .keyboard {63 position:absolute; left:0; right:0; bottom:0;64 height:880px; background:#1F1F1F; border-top-left-radius:18px; border-top-right-radius:18px;65 box-sizing:border-box; padding:22px 28px 28px 28px; color:#fff;66 }67 .kb-suggestions {68 height:120px; display:flex; align-items:center; justify-content:center;69 gap:80px; color:#d0d0d0; font-size:48px;70 }71 .divider { width:2px; height:48px; background:#3a3a3a; }72 .kb-row { display:flex; justify-content:center; gap:18px; margin-top:22px; }73 .key {74 width:90px; height:120px; background:#2B2B2B; border-radius:26px;75 display:flex; align-items:center; justify-content:center;76 font-size:46px; color:#eaeaea;77 box-shadow: inset 0 -2px 0 rgba(255,255,255,0.04);78 }79 .key-wide { width:200px; }80 .space { flex:1; min-width:460px; }81 .key-action { background:#E1C6F2; color:#2b2b2b; font-weight:700; }82 .gesture-bar {83 position:absolute; bottom:16px; left:50%; transform:translateX(-50%);84 width:300px; height:10px; background:#e6e6e6; border-radius:8px; opacity:0.9;85 }86 /* Simple icons */87 .wifi svg, .battery svg { display:block; }88</style>89</head>90<body>91<div id="render-target">92 <div class="appbar">93 <div class="status">94 <div>8:19</div>95 <div class="status-right">96 <div class="wifi">97 <svg width="48" height="48" viewBox="0 0 24 24" fill="none">98 <path d="M2 8c5-4 15-4 20 0" stroke="#fff" stroke-width="2" stroke-linecap="round"/>99 <path d="M5 12c3-3 11-3 14 0" stroke="#fff" stroke-width="2" stroke-linecap="round"/>100 <path d="M8 16c2-2 6-2 8 0" stroke="#fff" stroke-width="2" stroke-linecap="round"/>101 <circle cx="12" cy="19" r="2" fill="#fff"/>102 </svg>103 </div>104 <div class="battery">105 <svg width="54" height="48" viewBox="0 0 28 16" fill="none">106 <rect x="1" y="3" width="22" height="10" rx="2" stroke="#fff" stroke-width="2"/>107 <rect x="3" y="5" width="18" height="6" rx="1" fill="#fff"/>108 <rect x="24" y="6" width="3" height="4" rx="1" fill="#fff"/>109 </svg>110 </div>111 </div>112 </div>113 </div>114 115 <div class="content">116 <h1>Tell us who you are</h1>117 118 <div class="field">119 <div class="floating-label">First Name</div>120 <div class="input">ABC</div>121 </div>122 123 <div class="field focus">124 <div class="floating-label">Last Name</div>125 <div class="input">R</div>126 </div>127 128 <div class="field">129 <div class="floating-label">Birthdate</div>130 <div class="input"></div>131 <div class="hint-icon">?</div>132 </div>133 134 <div class="field">135 <div class="floating-label">Gender</div>136 <div class="input"></div>137 <div class="hint-icon">?</div>138 </div>139 140 <div class="helper">141 Your profile is public by default. Change your visibility any time in Privacy Controls.142 </div>143 </div>144 145 <div class="keyboard">146 <div class="kb-suggestions">147 <span>R</span><span class="divider"></span><span>T</span><span class="divider"></span><span>E</span>148 </div>149 <div class="kb-row">150 <div class="key">q</div><div class="key">w</div><div class="key">e</div><div class="key">r</div>151 <div class="key">t</div><div class="key">y</div><div class="key">u</div><div class="key">i</div>152 <div class="key">o</div><div class="key">p</div>153 </div>154 <div class="kb-row">155 <div class="key">a</div><div class="key">s</div><div class="key">d</div><div class="key">f</div>156 <div class="key">g</div><div class="key">h</div><div class="key">j</div><div class="key">k</div>157 <div class="key">l</div>158 </div>159 <div class="kb-row">160 <div class="key-wide">⇧</div>161 <div class="key">z</div><div class="key">x</div><div class="key">c</div><div class="key">v</div>162 <div class="key">b</div><div class="key">n</div><div class="key">m</div>163 <div class="key-wide">⌫</div>164 </div>165 <div class="kb-row">166 <div class="key-wide">?123</div>167 <div class="key">,</div>168 <div class="key">😊</div>169 <div class="key space">space</div>170 <div class="key">.</div>171 <div class="key key-action">✓</div>172 </div>173 <div class="gesture-bar"></div>174 </div>175</div>176</body>177</html>