GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Contact Edit UI</title>6<style>7 body { margin: 0; padding: 0; background: transparent; font-family: Roboto, Arial, sans-serif; }8 #render-target {9 width: 1080px; height: 2400px; position: relative; overflow: hidden;10 background: #1e1f22;11 }12 13 /* Status bar */14 .status-bar {15 position: absolute; top: 0; left: 0; width: 100%; height: 110px;16 color: #fff; background: linear-gradient(#0b2f38, #0b2f38);17 font-size: 36px; letter-spacing: 0.5px;18 }19 .status-left { position: absolute; left: 30px; top: 28px; }20 .status-right { position: absolute; right: 30px; top: 24px; display: flex; align-items: center; gap: 22px; }21 .icon-wifi, .icon-battery {22 display: inline-block;23 }24 .icon-wifi svg, .icon-battery svg { display: block; }25 26 /* Header / hero */27 .hero {28 position: absolute; top: 110px; left: 0; width: 100%; height: 630px;29 background: linear-gradient(#0e3e4d, #1976a2);30 }31 .hero .big-letter {32 position: absolute; left: 50%; top: 50%;33 transform: translate(-50%, -45%);34 font-size: 470px; color: #ffffff; font-weight: 500; line-height: 1;35 }36 .hero .back { position: absolute; left: 30px; top: 30px; }37 .hero .actions { position: absolute; right: 30px; top: 30px; display: flex; gap: 32px; align-items: center; }38 .hero .corner-left { position: absolute; left: 30px; bottom: 30px; }39 .hero .corner-right { position: absolute; right: 30px; bottom: 30px; }40 .hero svg { display: block; }41 42 /* Divider after hero */43 .divider {44 position: absolute; top: 740px; left: 0; width: 100%; height: 6px; background: #1d1d1d;45 }46 47 /* Form area */48 .form {49 position: absolute; top: 746px; left: 0; width: 100%; height: 860px; background: #2a2a2a; color: #fff;50 padding-top: 30px;51 }52 .field {53 display: flex; align-items: center;54 padding: 22px 40px; gap: 28px; color: #fff;55 }56 .field .ico { width: 60px; height: 60px; display: flex; align-items: center; justify-content: center; }57 .field .text-line { flex: 1; font-size: 46px; color: #e6e6e6; padding-bottom: 14px; border-bottom: 6px solid #ff8f00; }58 .field .label-right { font-size: 40px; color: #cfcfcf; }59 .plus-wrapper {60 padding: 28px 40px; display: flex; justify-content: center;61 }62 .plus-box {63 width: 160px; height: 120px; border-radius: 12px; border: 3px solid #6a6a6a; display: flex;64 align-items: center; justify-content: center;65 }66 .plus-box .plus { font-size: 72px; color: #ff8f00; line-height: 1; }67 68 /* Suggestion chips above keyboard */69 .suggestions {70 position: absolute; top: 1610px; left: 0; width: 100%; padding: 16px 24px; display: flex; gap: 16px; align-items: center;71 background: #222629;72 }73 .chip {74 display: inline-flex; align-items: center; gap: 16px;75 padding: 18px 26px; border-radius: 40px; background: #2f3438; color: #d7e5ff; font-size: 36px; border: 1px solid #3d4348;76 }77 .chip .acc {78 width: 46px; height: 46px; border-radius: 50%; background: #2a76ff; display: inline-flex; align-items: center; justify-content: center;79 }80 .chip .acc svg { width: 30px; height: 30px; }81 82 /* Keyboard */83 #keyboard {84 position: absolute; bottom: 86px; left: 0; width: 100%; height: 760px; background: #111518; border-top: 3px solid #2a2f33;85 color: #eaeaea;86 }87 .kbd-top { height: 110px; display: flex; align-items: center; gap: 18px; padding: 12px 26px; }88 .kbd-top .mode { width: 88px; height: 88px; border-radius: 18px; background: #283036; display: flex; align-items: center; justify-content: center; }89 .kbd-top .mode svg { width: 48px; height: 48px; }90 .kbd-rows { padding: 0 28px; }91 .row { display: flex; justify-content: center; gap: 16px; margin: 18px 0; }92 .key {93 height: 120px; min-width: 90px; padding: 0 16px;94 background: #2a2f33; border-radius: 18px; display: flex; align-items: center; justify-content: center; font-size: 46px;95 }96 .key.wide { min-width: 160px; }97 .key.extra-wide { flex: 1; }98 .key.green { background: #4caf50; color: #06210a; font-weight: 700; }99 .key.right-green { background: #66d48a; color: #06210a; font-weight: 700; }100 .row .key.icon svg { width: 46px; height: 46px; }101 102 /* Gesture bar */103 .gesture {104 position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%);105 width: 300px; height: 10px; border-radius: 10px; background: #cfd3d6; opacity: 0.7;106 }107</style>108</head>109<body>110<div id="render-target">111 112 <!-- Status Bar -->113 <div class="status-bar">114 <div class="status-left">2:55</div>115 <div class="status-right">116 <div class="icon-wifi">117 <svg width="48" height="36" viewBox="0 0 48 36" fill="none">118 <path d="M4 12 C14 4,34 4,44 12" stroke="#fff" stroke-width="4" stroke-linecap="round"/>119 <path d="M10 18 C18 12,30 12,38 18" stroke="#fff" stroke-width="4" stroke-linecap="round"/>120 <circle cx="24" cy="26" r="4" fill="#fff"/>121 </svg>122 </div>123 <div class="icon-battery">124 <svg width="72" height="36" viewBox="0 0 72 36" fill="none">125 <rect x="4" y="8" width="56" height="20" rx="4" stroke="#fff" stroke-width="3"/>126 <rect x="8" y="12" width="48" height="12" rx="2" fill="#fff"/>127 <rect x="62" y="12" width="6" height="12" rx="2" fill="#fff"/>128 </svg>129 </div>130 <div style="font-size:34px;">100%</div>131 </div>132 </div>133 134 <!-- Header / Hero -->135 <div class="hero">136 <div class="big-letter">C</div>137 138 <!-- Back -->139 <div class="back">140 <svg width="64" height="64" viewBox="0 0 64 64" fill="none">141 <path d="M38 14 L18 32 L38 50" stroke="#ffffff" stroke-width="6" stroke-linecap="round" stroke-linejoin="round"/>142 </svg>143 </div>144 145 <!-- Right actions -->146 <div class="actions">147 <svg width="60" height="60" viewBox="0 0 40 40" fill="none">148 <path d="M8 20 L16 28 L32 12" stroke="#fff" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>149 </svg>150 <svg width="60" height="60" viewBox="0 0 40 40" fill="none">151 <circle cx="8" cy="20" r="4" fill="#fff"/>152 <circle cx="20" cy="10" r="4" fill="#fff"/>153 <circle cx="32" cy="20" r="4" fill="#fff"/>154 <path d="M12 18 L16 14 M24 14 L28 18" stroke="#fff" stroke-width="3" stroke-linecap="round"/>155 </svg>156 <svg width="60" height="60" viewBox="0 0 40 40" fill="none">157 <circle cx="20" cy="8" r="4" fill="#fff"/>158 <circle cx="20" cy="20" r="4" fill="#fff"/>159 <circle cx="20" cy="32" r="4" fill="#fff"/>160 </svg>161 </div>162 163 <!-- Bottom corners -->164 <div class="corner-left">165 <svg width="72" height="72" viewBox="0 0 72 72" fill="none">166 <path d="M36 6 L44 26 L66 26 L48 40 L56 62 L36 48 L16 62 L24 40 L6 26 L28 26 Z"167 stroke="#fff" stroke-width="5" fill="none" stroke-linejoin="round"/>168 </svg>169 </div>170 <div class="corner-right">171 <svg width="72" height="72" viewBox="0 0 72 72" fill="none">172 <rect x="10" y="20" width="52" height="32" rx="8" stroke="#fff" stroke-width="5"/>173 <circle cx="36" cy="36" r="8" stroke="#fff" stroke-width="5"/>174 </svg>175 </div>176 </div>177 178 <div class="divider"></div>179 180 <!-- Form fields -->181 <div class="form">182 <div class="field">183 <div class="ico">184 <svg width="48" height="48" viewBox="0 0 48 48" fill="none">185 <circle cx="24" cy="16" r="10" stroke="#cfcfcf" stroke-width="4"/>186 <path d="M8 42 C12 32,36 32,40 42" stroke="#cfcfcf" stroke-width="4" stroke-linecap="round"/>187 </svg>188 </div>189 <div class="text-line">Clara</div>190 </div>191 192 <div class="field">193 <div class="ico">194 <svg width="48" height="48" viewBox="0 0 48 48" fill="none">195 <circle cx="24" cy="16" r="10" stroke="#cfcfcf" stroke-width="4"/>196 <path d="M8 42 C12 32,36 32,40 42" stroke="#cfcfcf" stroke-width="4" stroke-linecap="round"/>197 </svg>198 </div>199 <div class="text-line">Wagner</div>200 </div>201 202 <div class="field">203 <div class="ico">204 <svg width="48" height="48" viewBox="0 0 48 48" fill="none">205 <path d="M12 8 C8 12,8 18,14 24 C20 30,26 34,30 34 C34 34,38 30,40 28" stroke="#cfcfcf" stroke-width="4" stroke-linecap="round"/>206 </svg>207 </div>208 <div class="text-line">2111112222</div>209 <div class="label-right">Mobile</div>210 </div>211 212 <div class="plus-wrapper">213 <div class="plus-box"><div class="plus">+</div></div>214 </div>215 216 <div class="field">217 <div class="ico">218 <svg width="56" height="56" viewBox="0 0 56 56" fill="none">219 <rect x="6" y="12" width="44" height="32" rx="6" stroke="#cfcfcf" stroke-width="4"/>220 <path d="M6 16 L28 30 L50 16" stroke="#cfcfcf" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>221 </svg>222 </div>223 <div class="text-line" style="color:#9fb0c0;">Email</div>224 <div class="label-right">Home</div>225 </div>226 </div>227 228 <!-- Suggestion chips -->229 <div class="suggestions">230 <div class="chip">231 <div class="acc">232 <svg viewBox="0 0 24 24" fill="none">233 <circle cx="12" cy="8" r="5" fill="#fff"/>234 </svg>235 </div>236 richardwegnar@gmail.com237 </div>238 <div class="chip">239 <div class="acc">240 <svg viewBox="0 0 24 24" fill="none">241 <circle cx="12" cy="8" r="5" fill="#fff"/>242 </svg>243 </div>244 dbwscra…245 </div>246 </div>247 248 <!-- Keyboard -->249 <div id="keyboard">250 <div class="kbd-top">251 <div class="mode">252 <svg viewBox="0 0 48 48" fill="none">253 <rect x="8" y="8" width="12" height="12" fill="#b0bec5"/>254 <rect x="28" y="8" width="12" height="12" fill="#b0bec5"/>255 <rect x="8" y="28" width="12" height="12" fill="#b0bec5"/>256 <rect x="28" y="28" width="12" height="12" fill="#b0bec5"/>257 </svg>258 </div>259 <div class="chip" style="background:#233036;border-color:#34404a;color:#cfe3ff;">260 <div class="acc"><svg viewBox="0 0 24 24"><circle cx="12" cy="8" r="5" fill="#fff"/></svg></div>261 richardwegnar@gmail.com262 </div>263 <div class="chip" style="background:#233036;border-color:#34404a;color:#cfe3ff;">264 <div class="acc"><svg viewBox="0 0 24 24"><circle cx="12" cy="8" r="5" fill="#fff"/></svg></div>265 dbwscra…266 </div>267 <div class="key icon" style="margin-left:auto;">268 <svg viewBox="0 0 48 48" fill="none">269 <path d="M10 34 L38 34" stroke="#eaeaea" stroke-width="3" stroke-linecap="round"/>270 <path d="M28 18 L36 26 L28 34" stroke="#eaeaea" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>271 </svg>272 </div>273 </div>274 275 <div class="kbd-rows">276 <div class="row">277 <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>278 <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>279 </div>280 <div class="row">281 <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>282 <div class="key">h</div><div class="key">j</div><div class="key">k</div><div class="key">l</div>283 <div class="key icon">284 <svg viewBox="0 0 48 48" fill="none">285 <path d="M12 12 L36 12 L36 36" stroke="#eaeaea" stroke-width="4"/>286 <path d="M10 30 L20 20 L30 30" stroke="#eaeaea" stroke-width="4" stroke-linecap="round"/>287 </svg>288 </div>289 </div>290 <div class="row">291 <div class="key wide">⇧</div>292 <div class="key">z</div><div class="key">x</div><div class="key">c</div><div class="key">v</div>293 <div class="key">b</div><div class="key">n</div><div class="key">m</div>294 <div class="key icon">295 <svg viewBox="0 0 48 48" fill="none">296 <path d="M34 14 L18 24 L34 34" stroke="#eaeaea" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>297 <rect x="8" y="12" width="12" height="24" rx="4" stroke="#eaeaea" stroke-width="4"/>298 </svg>299 </div>300 </div>301 <div class="row">302 <div class="key green wide">?123</div>303 <div class="key wide">@</div>304 <div class="key wide">☺</div>305 <div class="key extra-wide">space</div>306 <div class="key wide">.</div>307 <div class="key right-green wide">308 <svg viewBox="0 0 48 48" fill="none">309 <path d="M10 24 L34 24" stroke="#083314" stroke-width="6" stroke-linecap="round"/>310 <path d="M26 16 L34 24 L26 32" stroke="#083314" stroke-width="6" stroke-linecap="round" stroke-linejoin="round"/>311 </svg>312 </div>313 </div>314 </div>315 </div>316 317 <div class="gesture"></div>318</div>319</body>320</html>