GD-ML/AndroidCode
13.4k
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>Create contact - Dark</title>7<style>8 :root{9 --bg:#0f1613;10 --fg:#e7eee8;11 --sub:#9aa79f;12 --border:#6e7a73;13 --border-soft:#516058;14 --pink:#f3b4b6;15 --key:#26312b;16 --key-border:#3b4741;17 }18 body{ margin:0; padding:0; background:transparent; font-family: Inter, Roboto, system-ui, -apple-system, Segoe UI, Arial, sans-serif; }19 #render-target{20 position:relative; overflow:hidden;21 width:1080px; height:2400px;22 background:var(--bg); color:var(--fg);23 }24 25 /* Status bar */26 .status-bar{27 height:110px; padding:0 36px;28 display:flex; align-items:flex-end; justify-content:space-between;29 box-sizing:border-box;30 }31 .status-left{ font-size:42px; font-weight:600; letter-spacing:0.5px; }32 .status-right{ display:flex; align-items:center; gap:26px; }33 .status-right span{ font-size:32px; color:var(--fg); opacity:.95; }34 .icon{ width:44px; height:44px; display:inline-block; }35 36 /* App bar */37 .app-bar{38 height:150px; padding:0 36px; box-sizing:border-box;39 display:flex; align-items:center; gap:28px;40 }41 .icon-btn{42 width:64px; height:64px; border-radius:32px;43 display:flex; align-items:center; justify-content:center;44 color:var(--fg);45 }46 .title{ font-size:64px; font-weight:600; flex:1; }47 .save-btn{48 background:var(--pink); color:#1b1b1b;49 padding:28px 48px; border-radius:40px; font-weight:700;50 font-size:40px;51 }52 .menu-dots{ width:24px; height:80px; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:10px; margin-left:10px;}53 .menu-dots span{ width:10px; height:10px; background:var(--fg); border-radius:50%; opacity:.9; }54 55 /* Content area */56 .content{57 position:absolute; left:0; right:0; top:260px; bottom:880px;58 overflow:hidden;59 padding:0 52px;60 box-sizing:border-box;61 }62 .form-scroll{63 height:100%; overflow:auto; padding-right:12px;64 }65 .hint-label{66 font-size:30px; color:var(--sub); margin:28px 18px 8px; letter-spacing:.2px;67 }68 .dropdown{69 border:2px solid var(--border); border-radius:26px;70 height:140px; display:flex; align-items:center; justify-content:space-between;71 padding:0 36px; box-sizing:border-box; margin-bottom:42px;72 }73 .dropdown .value{ font-size:48px; }74 .dropdown .caret{75 width:0; height:0; border-left:14px solid transparent; border-right:14px solid transparent; border-top:22px solid var(--fg);76 opacity:.9;77 }78 79 .input{80 border:2px solid var(--border); border-radius:26px;81 height:150px; display:flex; align-items:center;82 padding:0 36px; box-sizing:border-box; margin-bottom:52px;83 font-size:46px; color:var(--fg);84 }85 .floating{86 position:relative; margin-bottom:48px;87 }88 .floating .box{89 border:2px solid var(--border); border-radius:26px;90 padding:42px 36px; height:160px; box-sizing:border-box;91 display:flex; align-items:center; font-size:46px;92 color:var(--fg);93 }94 .floating .label{95 position:absolute; top:-18px; left:26px;96 padding:0 14px; background:var(--bg);97 font-size:30px; color:var(--sub);98 }99 .floating.focused .box{ border-color:var(--pink); }100 .floating.focused .label{ color:var(--pink); }101 .email-row{102 display:flex; align-items:center; gap:22px;103 }104 .email-left{105 width:68px; height:68px; border-radius:12px; border:2px solid var(--border);106 display:flex; align-items:center; justify-content:center; opacity:.9;107 margin-left:8px;108 }109 .email-remove{110 margin-left:18px; width:68px; height:68px; border-radius:50%;111 display:flex; align-items:center; justify-content:center; color:var(--fg); opacity:.8;112 }113 .caret-blink{114 width:3px; height:70px; background:var(--pink); margin-left:8px; border-radius:2px;115 }116 117 /* Keyboard */118 .keyboard{119 position:absolute; left:0; right:0; bottom:70px;120 height:760px; background:#121a16; border-top:2px solid #223028;121 box-sizing:border-box; padding:18px 22px 24px;122 }123 .kb-tools{124 height:92px; display:flex; align-items:center; gap:30px; margin-bottom:18px;125 }126 .kb-chip{127 width:92px; height:92px; border-radius:22px; background:#19231e; border:1px solid var(--key-border);128 display:flex; align-items:center; justify-content:center; color:#cfd6cf; font-weight:700;129 }130 .kb-row{ display:flex; gap:16px; justify-content:center; margin:10px 0; }131 .key{132 height:120px; width:92px; border-radius:18px;133 background:var(--key); border:1px solid var(--key-border);134 color:#e5ece5; font-size:44px; display:flex; align-items:center; justify-content:center;135 }136 .key-wide{ width:140px; }137 .key-xwide{ width:240px; }138 .key-circle{139 width:128px; height:128px; border-radius:64px; background:var(--pink);140 color:#111; font-weight:800; font-size:52px; border:none;141 }142 .key-accent{143 background:#9fb6a2; color:#1a1f1b; border:1px solid #91a293;144 }145 146 /* Gesture bar */147 .gesture{148 position:absolute; left:50%; transform:translateX(-50%);149 bottom:18px; width:420px; height:10px; background:#e9e9e9; opacity:.75; border-radius:6px;150 }151 152 /* Simple helpers */153 .muted{ color:var(--sub); }154</style>155</head>156<body>157<div id="render-target">158 159 <!-- Status Bar -->160 <div class="status-bar">161 <div class="status-left">12:25</div>162 <div class="status-right">163 <span class="icon">164 <svg viewBox="0 0 24 24" width="44" height="44" fill="none" stroke="white" stroke-width="2">165 <path d="M2 18c3-4 7-6 10-6s7 2 10 6" />166 <path d="M6 18c2-3 4-4 6-4s4 1 6 4" />167 <circle cx="12" cy="18" r="1.3" fill="white"/>168 </svg>169 </span>170 <span class="icon">171 <svg viewBox="0 0 24 24" width="44" height="44" fill="white">172 <path d="M2 22h4V10H2v12zm8 0h4V4h-4v18zm8 0h4V14h-4v8z"/>173 </svg>174 </span>175 <span class="icon">176 <svg viewBox="0 0 24 24" width="44" height="44" fill="none" stroke="white" stroke-width="2">177 <rect x="3" y="7" width="14" height="10" rx="2" ry="2"></rect>178 <path d="M17 10h2a2 2 0 0 1 2 2v1"></path>179 </svg>180 </span>181 <span>100%</span>182 </div>183 </div>184 185 <!-- App Bar -->186 <div class="app-bar">187 <div class="icon-btn" aria-label="Close">188 <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2.5" stroke-linecap="round">189 <path d="M5 5l14 14M19 5L5 19"></path>190 </svg>191 </div>192 <div class="title">Create contact</div>193 <div class="save-btn">Save</div>194 <div class="menu-dots" aria-label="More">195 <span></span><span></span><span></span>196 </div>197 </div>198 199 <!-- Form Content -->200 <div class="content">201 <div class="form-scroll">202 203 <div class="hint-label">Label</div>204 <div class="dropdown">205 <div class="value">Mobile</div>206 <div class="caret"></div>207 </div>208 209 <div class="input muted">Phone</div>210 211 <div class="hint-label">Label</div>212 <div class="dropdown">213 <div class="value">Work</div>214 <div class="caret"></div>215 </div>216 217 <div class="email-row">218 <div class="email-left">219 <svg width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2">220 <rect x="3" y="5" width="18" height="14" rx="2"></rect>221 <path d="M3 7l9 6 9-6"></path>222 </svg>223 </div>224 <div class="floating" style="flex:1;">225 <div class="label">Email</div>226 <div class="box">xyz@gmail.com</div>227 </div>228 <div class="email-remove">229 <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2.2" stroke-linecap="round">230 <path d="M5 5l14 14M19 5L5 19"></path>231 </svg>232 </div>233 </div>234 235 <div class="hint-label">Label</div>236 <div class="dropdown">237 <div class="value">Home</div>238 <div class="caret"></div>239 </div>240 241 <div class="floating focused">242 <div class="label">Email</div>243 <div class="box">244 <div class="caret-blink"></div>245 </div>246 </div>247 248 <div style="height:120px;"></div>249 </div>250 </div>251 252 <!-- Keyboard -->253 <div class="keyboard">254 <div class="kb-tools">255 <div class="kb-chip">◻◻</div>256 <div class="kb-chip">☺</div>257 <div class="kb-chip">GIF</div>258 <div class="kb-chip">⚙</div>259 <div class="kb-chip">G↔</div>260 <div class="kb-chip">🎨</div>261 <div class="kb-chip">🎤</div>262 </div>263 264 <div class="kb-row">265 <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>266 <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>267 </div>268 <div class="kb-row" style="padding-left:40px;">269 <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>270 <div class="key">h</div><div class="key">j</div><div class="key">k</div><div class="key">l</div>271 <div class="key key-wide">272 <svg viewBox="0 0 24 24" width="46" height="46" fill="none" stroke="#e5ece5" stroke-width="2.4" stroke-linecap="round"><path d="M4 4l8 8-8 8"/></svg>273 </div>274 </div>275 <div class="kb-row">276 <div class="key key-wide key-accent">?123</div>277 <div class="key">@</div>278 <div class="key">☺</div>279 <div class="key key-xwide">space</div>280 <div class="key">.</div>281 <div class="key key-circle">→</div>282 </div>283 </div>284 285 <div class="gesture"></div>286</div>287</body>288</html>