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 body { margin:0; padding:0; background: transparent; }9 #render-target {10 width:1080px; height:2400px; position:relative; overflow:hidden;11 background:#0f1713; color:#e9efe9; font-family: "Segoe UI", Arial, sans-serif;12 }13 14 /* Status bar */15 .status-bar{16 position:absolute; top:0; left:0; right:0; height:90px;17 color:#e8eee8; font-size:34px; letter-spacing:0.5px;18 display:flex; align-items:center; justify-content:space-between;19 padding:0 28px;20 }21 .status-left{ display:flex; align-items:center; gap:20px;}22 .status-right{ display:flex; align-items:center; gap:18px;}23 .icon-small svg{ width:36px; height:36px; fill:#e8eee8; opacity:0.9;}24 .battery{25 display:flex; align-items:center; gap:10px; font-size:30px;26 }27 .battery svg{ width:42px; height:42px; fill:#e8eee8;}28 29 /* App bar */30 .appbar{31 position:absolute; top:90px; left:0; right:0; height:140px;32 display:flex; align-items:center; padding:0 26px; gap:24px;33 }34 .appbar-title{35 font-size:56px; font-weight:600; flex:1; opacity:0.95;36 }37 .close-btn{38 width:72px; height:72px; display:flex; align-items:center; justify-content:center;39 }40 .save-btn{41 background:#f6b3b9; color:#18201a; font-weight:600;42 padding:22px 44px; border-radius:40px; font-size:40px;43 box-shadow: inset 0 0 0 1px rgba(0,0,0,0.08);44 }45 .kebab{ width:70px; height:70px; display:flex; align-items:center; justify-content:center; }46 47 /* Account chip row */48 .account-row{49 position:absolute; top:250px; left:40px; right:40px;50 background:#253027; border-radius:18px; padding:18px 22px;51 display:flex; align-items:center; gap:18px; border:1px solid rgba(255,255,255,0.07);52 }53 .acc-avatar{54 width:64px; height:64px; border-radius:50%; background:#4e6b58;55 display:flex; align-items:center; justify-content:center; font-weight:700; font-size:34px;56 box-shadow: inset 0 0 0 2px rgba(255,255,255,0.12);57 }58 .acc-email{ font-size:34px; color:#d8e2d8; flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }59 .chip-caret svg{ width:34px; height:34px; fill:#cfd8cf; opacity:0.9; }60 61 /* Avatar add picture */62 .avatar-wrap{63 position:absolute; top:390px; left:0; right:0;64 display:flex; flex-direction:column; align-items:center; gap:24px;65 }66 .big-avatar{67 width:360px; height:360px; border-radius:50%;68 background:#2f3f36; display:flex; align-items:center; justify-content:center;69 box-shadow: inset 0 0 0 2px rgba(255,255,255,0.08);70 }71 .add-pic-text{ color:#f6b3b9; font-size:36px; }72 73 /* Form fields */74 .form{75 position:absolute; top:860px; left:40px; right:40px;76 }77 .field{78 margin-bottom:34px;79 }80 .field .label{81 font-size:28px; color:#f2b9c0; margin-left:24px; margin-bottom:6px;82 }83 .input{84 height:130px; border-radius:18px; display:flex; align-items:center;85 padding:0 28px; font-size:44px; color:#e8eee8; outline:none;86 background:#121b16; border:2px solid #3a4740;87 }88 .field.active .input{ border-color:#f6b3b9; }89 .field.active .label{ color:#f6b3b9; }90 .placeholder{ color:#e8eee8; opacity:0.92; }91 92 /* Left gutter icon next to fields */93 .field-row{94 display:flex; align-items:flex-start; gap:22px;95 }96 .left-col{ width:56px; display:flex; justify-content:center; padding-top:48px; opacity:0.6;}97 .left-col svg{ width:40px; height:40px; fill:#d1d9d1; }98 99 /* Suggestions row above keyboard */100 .suggestions{101 position:absolute; bottom:1080px; left:0; right:0; height:90px;102 display:flex; align-items:center; gap:18px; padding:0 22px;103 background:transparent;104 }105 .chip{106 background:#222b24; color:#e6eee6; border:1px solid rgba(255,255,255,0.08);107 padding:12px 26px; border-radius:24px; font-size:32px;108 }109 110 /* Keyboard (simplified) */111 .keyboard{112 position:absolute; bottom:60px; left:0; right:0; height:900px;113 background:#0e1512; border-top:1px solid rgba(255,255,255,0.06);114 padding:18px 18px 24px;115 }116 .kb-row{ display:flex; gap:14px; margin-top:18px; justify-content:center; }117 .key{118 background:#1b2420; color:#e6eee6; border-radius:18px;119 height:120px; min-width:92px; display:flex; align-items:center; justify-content:center;120 font-size:44px; border:1px solid rgba(255,255,255,0.06);121 }122 .key.wide{ min-width:140px; }123 .key.space{ flex:1; min-width:300px; }124 .key.green{ background:#9db49e; color:#0e1512; font-weight:600; }125 .key.pink{ background:#f6b3b9; color:#121812; font-weight:700; }126 .kb-top{127 display:flex; align-items:center; justify-content:space-between; padding:0 10px; margin-top:8px;128 }129 .kb-left-round, .kb-right-round{130 width:80px; height:80px; border-radius:40px; background:#1b2420; border:1px solid rgba(255,255,255,0.06);131 display:flex; align-items:center; justify-content:center;132 }133 .kb-right-round.pink{ background:#f6b3b9; color:#121812; }134 .kb-right-round svg, .kb-left-round svg{ width:38px; height:38px; fill:currentColor; }135 136 /* Gesture bar */137 .gesture{138 position:absolute; bottom:16px; left:50%; transform:translateX(-50%);139 width:360px; height:10px; border-radius:6px; background:#e7e7e7; opacity:0.85;140 }141</style>142</head>143<body>144<div id="render-target">145 146 <!-- Status bar -->147 <div class="status-bar">148 <div class="status-left">149 <div>12:18</div>150 <div class="icon-small">151 <svg viewBox="0 0 24 24"><path d="M12 12c2.2 0 4-1.8 4-4V6a4 4 0 10-8 0v2c0 2.2 1.8 4 4 4zm7 8H5a2 2 0 01-2-2v-6a2 2 0 012-2h14a2 2 0 012 2v6a2 2 0 01-2 2z"/></svg>152 </div>153 <div class="icon-small">154 <svg viewBox="0 0 24 24"><path d="M20 8L4 4v13l5-2 5 3 6-2V8z"/></svg>155 </div>156 </div>157 <div class="status-right">158 <div class="icon-small">159 <svg viewBox="0 0 24 24"><path d="M12 3L1 9l11 6 9-4.91V17h2V9L12 3z"/></svg>160 </div>161 <div class="battery">162 <svg viewBox="0 0 24 24"><path d="M16 7h1V5h-1V3H8v2H7v2h1v10H7v2h1v2h8v-2h1v-2h-1V7zM9 7h6v10H9V7z"/></svg>163 <div>100%</div>164 </div>165 </div>166 </div>167 168 <!-- App bar -->169 <div class="appbar">170 <div class="close-btn">171 <svg viewBox="0 0 24 24" width="56" height="56" fill="#e9efe9"><path d="M18.3 5.7L12 12l6.3 6.3-1.4 1.4L10.6 13.4 4.3 19.7 2.9 18.3 9.2 12 2.9 5.7 4.3 4.3l6.3 6.3 6.3-6.3z"/></svg>172 </div>173 <div class="appbar-title">Create contact</div>174 <div class="save-btn">Save</div>175 <div class="kebab">176 <svg viewBox="0 0 24 24" width="40" height="40" fill="#e9efe9"><circle cx="12" cy="5" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="12" cy="19" r="2"/></svg>177 </div>178 </div>179 180 <!-- Account chip -->181 <div class="account-row">182 <div class="acc-avatar">C</div>183 <div class="acc-email">dbwscratch.test.id1@gmail.com</div>184 <div class="chip-caret">185 <svg viewBox="0 0 24 24"><path d="M7 9l5 5 5-5H7z"/></svg>186 </div>187 </div>188 189 <!-- Avatar section -->190 <div class="avatar-wrap">191 <div class="big-avatar">192 <!-- simple add image icon -->193 <svg viewBox="0 0 64 64" width="160" height="160" fill="#cfe1d6">194 <path d="M44 14H12a6 6 0 00-6 6v24a6 6 0 006 6h40a6 6 0 006-6V26l-8-12H44zM18 40l8-10 8 10H18zm26-20a4 4 0 11.001-8.001A4 4 0 0144 20z" opacity="0.6"/>195 <path d="M54 10h-6v-6h-4v6h-6v4h6v6h4v-6h6z"/>196 </svg>197 </div>198 <div class="add-pic-text">Add picture</div>199 </div>200 201 <!-- Form fields -->202 <div class="form">203 <div class="field-row field active">204 <div class="left-col">205 <svg viewBox="0 0 24 24"><path d="M12 12a5 5 0 100-10 5 5 0 000 10zm0 2c-4.418 0-8 2.239-8 5v1h16v-1c0-2.761-3.582-5-8-5z"/></svg>206 </div>207 <div style="flex:1">208 <div class="label">First name</div>209 <div class="input"><span class="placeholder">Rahul</span></div>210 </div>211 <div class="left-col" style="opacity:0.8; padding-top:56px;">212 <svg viewBox="0 0 24 24"><path d="M7 10l5 5 5-5z" fill="#d1d9d1"/></svg>213 </div>214 </div>215 216 <div class="field-row field">217 <div class="left-col">218 <svg viewBox="0 0 24 24"><path d="M12 12a5 5 0 100-10 5 5 0 000 10zm0 2c-4.418 0-8 2.239-8 5v1h16v-1c0-2.761-3.582-5-8-5z"/></svg>219 </div>220 <div style="flex:1">221 <div class="label" style="color:#bfc9bf;">Last name</div>222 <div class="input" style="border-color:#3a4740; color:#aeb8ae; opacity:0.8;"> </div>223 </div>224 </div>225 </div>226 227 <!-- Suggestions row -->228 <div class="suggestions">229 <div class="kb-left-round">230 <svg viewBox="0 0 24 24"><path d="M4 4h16v16H4z" fill="none"/><path d="M4 4h7v7H4z" /></svg>231 </div>232 <div class="chip">Rahul</div>233 <div class="chip">Rahil</div>234 <div class="chip">Rajul</div>235 <div class="kb-right-round">236 <svg viewBox="0 0 24 24"><path d="M12 3a4 4 0 014 4v3h3v8h-4v-6h-6v6H5v-8h3V7a4 4 0 014-4z"/></svg>237 </div>238 </div>239 240 <!-- Keyboard (simplified layout) -->241 <div class="keyboard">242 <div class="kb-row">243 <div class="key">q</div><div class="key">w</div><div class="key">e</div><div class="key">r</div>244 <div class="key">t</div><div class="key">y</div><div class="key">u</div><div class="key">i</div>245 <div class="key">o</div><div class="key">p</div>246 </div>247 <div class="kb-row">248 <div class="key wide">a</div><div class="key">s</div><div class="key">d</div><div class="key">f</div>249 <div class="key">g</div><div class="key">h</div><div class="key">j</div><div class="key">k</div>250 <div class="key wide">l</div>251 </div>252 <div class="kb-row">253 <div class="key wide">⇧</div><div class="key">z</div><div class="key">x</div><div class="key">c</div>254 <div class="key">v</div><div class="key">b</div><div class="key">n</div><div class="key">m</div>255 <div class="key wide">⌫</div>256 </div>257 <div class="kb-row">258 <div class="key green wide">?123</div>259 <div class="key">,</div>260 <div class="key space"></div>261 <div class="key">.</div>262 <div class="key pink wide">263 <svg viewBox="0 0 24 24" width="44" height="44"><path d="M5 12h11l-4-4 1.4-1.4L20.8 12l-7.4 5.4L12 16l4-4H5z" fill="#121812"/></svg>264 </div>265 </div>266 </div>267 268 <!-- Gesture bar -->269 <div class="gesture"></div>270</div>271</body>272</html>