GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Create contact - Dark UI</title>6<meta name="viewport" content="width=1080, initial-scale=1.0">7<style>8 body { margin:0; padding:0; background:transparent; font-family: Arial, Helvetica, sans-serif; }9 #render-target {10 position: relative;11 overflow: hidden;12 width: 1080px;13 height: 2400px;14 background: #0f1613;15 color: #e6ede6;16 }17 18 /* Status bar */19 .status-bar {20 height: 96px;21 padding: 0 36px;22 display: flex;23 align-items: center;24 justify-content: space-between;25 color: #e6ede6;26 font-size: 38px;27 letter-spacing: 0.5px;28 }29 .status-left { display: flex; align-items: center; gap: 22px; }30 .status-right { display: flex; align-items: center; gap: 26px; }31 .status-icon {32 width: 40px; height: 40px; border-radius: 10px;33 border: 1px solid #3b4a41;34 display:flex; align-items:center; justify-content:center;35 color:#a8b7a8; font-size:24px;36 }37 .battery {38 display:flex; align-items:center; gap:10px; font-size:34px;39 }40 .battery svg { width:38px; height:24px; }41 .wifi svg { width:40px; height:40px; }42 43 /* App bar */44 .app-bar {45 display:flex; align-items:center; justify-content:space-between;46 padding: 24px 36px 30px 36px;47 }48 .app-left { display:flex; align-items:center; gap:24px; }49 .app-title { font-size:64px; font-weight:600; color:#e6ede6; }50 .icon-btn {51 width:72px; height:72px; border-radius:50%;52 display:flex; align-items:center; justify-content:center;53 color:#cfd8cf; border:1px solid #3b4a41;54 }55 .save-btn {56 background:#f3b6bc; color:#2b2124; font-weight:700;57 padding: 26px 52px; border-radius:44px; font-size:42px;58 box-shadow: 0 2px 0 rgba(0,0,0,0.25);59 }60 .menu-btn { width:60px; height:60px; border-radius:18px; display:flex; align-items:center; justify-content:center; }61 62 /* Content form */63 .content { padding: 8px 40px 0 40px; }64 .form-row {65 display:flex; align-items:center; gap:24px; margin: 22px 0;66 }67 .icon-col { width:90px; display:flex; align-items:center; justify-content:center; }68 .end-col { width:70px; display:flex; align-items:center; justify-content:center; }69 .end-col .clear {70 width:56px; height:56px; border-radius:50%;71 border:1px solid #3b4a41; display:flex; align-items:center; justify-content:center; color:#a8b7a8;72 }73 74 .field {75 flex:1;76 border:2px solid #6a7a6f;77 border-radius:22px;78 padding:24px 28px;79 position:relative;80 color:#e6ede6;81 background: rgba(255,255,255,0.02);82 }83 .field .label {84 position:absolute; top:-18px; left:24px;85 padding:0 10px; background:#0f1613;86 color:#a8b7a8; font-size:28px;87 }88 .field .value { font-size:44px; letter-spacing:0.5px; }89 90 /* Dropdown field */91 .select {92 width: 520px;93 border:2px solid #6a7a6f; border-radius:22px;94 padding:24px 28px; position:relative;95 display:flex; align-items:center; justify-content:space-between;96 }97 .select .label {98 position:absolute; top:-18px; left:24px; padding:0 10px; background:#0f1613;99 color:#a8b7a8; font-size:28px;100 }101 .select .text { font-size:42px; }102 .chev { width: 36px; height: 36px; }103 104 /* Focused email */105 .field.focused { border-color:#f3b6bc; }106 .field.focused .label { color:#f3b6bc; }107 108 /* Keyboard bar above keys (quick tools) */109 .kb-tools {110 display:flex; align-items:center; justify-content:center;111 gap:34px; padding: 26px 0 0 0;112 }113 .tool {114 width:64px; height:64px; border:1px solid #3b4a41; border-radius:14px;115 display:flex; align-items:center; justify-content:center; color:#a8b7a8; background:#1a201d;116 font-size:28px;117 }118 119 /* Keyboard */120 .keyboard {121 position:absolute; left:0; right:0; bottom:120px;122 padding: 20px 26px 24px 26px;123 background:#0f1613;124 }125 .keys-row {126 display:flex; gap:18px; justify-content:center; margin: 16px 0;127 }128 .key {129 width:92px; height:104px; border-radius:18px;130 background:#2b3230; color:#e6ede6; font-size:44px;131 display:flex; align-items:center; justify-content:center;132 }133 .key.small { width:120px; }134 .key.wide { width:520px; }135 .key.circle { width:120px; height:120px; border-radius:60px; }136 .key.green { background:#91a78f; color:#112015; font-weight:700; }137 .key.pink { background:#f3b6bc; color:#23191d; }138 .key.dark { background:#1e2422; }139 140 .home-indicator {141 position:absolute; bottom:46px; left:50%; transform:translateX(-50%);142 width: 280px; height: 10px; background:#e6ede6; border-radius:16px; opacity:0.85;143 }144 145 /* SVGs */146 svg { fill: none; stroke: currentColor; stroke-width: 4; }147</style>148</head>149<body>150<div id="render-target">151 152 <!-- Status bar -->153 <div class="status-bar">154 <div class="status-left">155 <div>12:24</div>156 <div class="status-icon">✉</div>157 <div class="status-icon">🔑</div>158 <div class="status-icon">▶</div>159 <div class="status-icon">📅</div>160 </div>161 <div class="status-right">162 <div class="wifi">163 <svg viewBox="0 0 24 24">164 <path d="M2 8c5-4 15-4 20 0"/>165 <path d="M6 12c3-3 9-3 12 0"/>166 <path d="M10 16c2-2 4-2 6 0"/>167 <circle cx="12" cy="20" r="1.8" fill="currentColor" stroke="none"/>168 </svg>169 </div>170 <div class="battery">171 <svg viewBox="0 0 36 20">172 <rect x="1" y="2" width="30" height="16" rx="3" />173 <rect x="32" y="6" width="3" height="8" rx="1" />174 <rect x="3" y="4" width="24" height="12" rx="2" fill="currentColor" stroke="none"/>175 </svg>176 <div>100%</div>177 </div>178 </div>179 </div>180 181 <!-- App bar -->182 <div class="app-bar">183 <div class="app-left">184 <div class="icon-btn" title="Close">185 <svg viewBox="0 0 24 24">186 <path d="M5 5L19 19M19 5L5 19"/>187 </svg>188 </div>189 <div class="app-title">Create contact</div>190 </div>191 <div style="display:flex; align-items:center; gap:24px;">192 <div class="save-btn">Save</div>193 <div class="menu-btn">194 <svg viewBox="0 0 24 24">195 <circle cx="12" cy="4" r="2.2" fill="currentColor" stroke="none"/>196 <circle cx="12" cy="12" r="2.2" fill="currentColor" stroke="none"/>197 <circle cx="12" cy="20" r="2.2" fill="currentColor" stroke="none"/>198 </svg>199 </div>200 </div>201 </div>202 203 <!-- Form content -->204 <div class="content">205 206 <!-- Company -->207 <div class="form-row">208 <div class="icon-col">209 <svg viewBox="0 0 28 28" style="width:48px; height:48px; color:#a8b7a8;">210 <rect x="2" y="4" width="24" height="20" rx="2"/>211 <rect x="6" y="8" width="4" height="4"/>212 <rect x="12" y="8" width="4" height="4"/>213 <rect x="18" y="8" width="4" height="4"/>214 <rect x="6" y="14" width="4" height="4"/>215 <rect x="12" y="14" width="10" height="4"/>216 </svg>217 </div>218 <div class="field">219 <div class="label">Company</div>220 <div class="value">Abcd</div>221 </div>222 <div class="end-col">223 <div class="clear">224 <svg viewBox="0 0 24 24">225 <path d="M5 5L19 19M19 5L5 19"/>226 </svg>227 </div>228 </div>229 </div>230 231 <!-- Phone -->232 <div class="form-row">233 <div class="icon-col">234 <svg viewBox="0 0 28 28" style="width:48px; height:48px; color:#a8b7a8;">235 <path d="M6 3l6 5-2 2c2 4 5 7 9 9l2-2 5 6-3 3c-9 1-18-8-19-19L6 3z"/>236 </svg>237 </div>238 <div class="field">239 <div class="label">Phone</div>240 <div class="value">11 0022 3366</div>241 </div>242 <div class="end-col">243 <div class="clear">244 <svg viewBox="0 0 24 24">245 <path d="M5 5L19 19M19 5L5 19"/>246 </svg>247 </div>248 </div>249 </div>250 251 <!-- Label select -->252 <div class="form-row" style="padding-left:114px;">253 <div class="select">254 <div class="label">Label</div>255 <div class="text">Mobile</div>256 <svg class="chev" viewBox="0 0 24 24">257 <path d="M6 9l6 6 6-6"/>258 </svg>259 </div>260 </div>261 262 <!-- Second Phone -->263 <div class="form-row" style="margin-top:18px;">264 <div class="icon-col"></div>265 <div class="field">266 <div class="label">Phone</div>267 <div class="value" style="color:#a8b7a8;"> </div>268 </div>269 </div>270 271 <!-- Label select 2 -->272 <div class="form-row" style="padding-left:114px;">273 <div class="select" style="width:520px;">274 <div class="label">Label</div>275 <div class="text">Work</div>276 <svg class="chev" viewBox="0 0 24 24">277 <path d="M6 9l6 6 6-6"/>278 </svg>279 </div>280 </div>281 282 <!-- Email (focused) -->283 <div class="form-row" style="margin-top:24px;">284 <div class="icon-col">285 <svg viewBox="0 0 28 28" style="width:48px; height:48px; color:#a8b7a8;">286 <rect x="2" y="5" width="24" height="18" rx="3"/>287 <path d="M2 7l12 8 12-8"/>288 </svg>289 </div>290 <div class="field focused">291 <div class="label">Email</div>292 <div class="value">xyz@gmail.com</div>293 </div>294 <div class="end-col">295 <div class="clear">296 <svg viewBox="0 0 24 24">297 <path d="M5 5L19 19M19 5L5 19"/>298 </svg>299 </div>300 </div>301 </div>302 303 <!-- tools above keyboard -->304 <div class="kb-tools">305 <div class="tool">▦</div>306 <div class="tool">☺</div>307 <div class="tool">GIF</div>308 <div class="tool">⚙</div>309 <div class="tool">G</div>310 <div class="tool">🎨</div>311 <div class="tool">🎤</div>312 </div>313 </div>314 315 <!-- Keyboard -->316 <div class="keyboard">317 <div class="keys-row">318 <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>319 <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>320 </div>321 <div class="keys-row">322 <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>323 <div class="key">h</div><div class="key">j</div><div class="key">k</div><div class="key">l</div>324 <div class="key dark">325 <svg viewBox="0 0 24 24" style="width:46px; height:46px;">326 <path d="M5 5l14 14"/>327 <path d="M19 5L5 19"/>328 </svg>329 </div>330 </div>331 <div class="keys-row">332 <div class="key small green">?123</div>333 <div class="key">@</div>334 <div class="key">☺</div>335 <div class="key wide">space</div>336 <div class="key">G</div>337 <div class="key">🎨</div>338 <div class="key dark">•</div>339 <div class="key circle pink" title="Send">340 <svg viewBox="0 0 24 24" style="width:50px; height:50px; stroke:#23191d;">341 <path d="M4 12h14M12 5l7 7-7 7" stroke-width="3"/>342 </svg>343 </div>344 </div>345 </div>346 347 <!-- home indicator -->348 <div class="home-indicator"></div>349 350</div>351</body>352</html>