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<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 width:1080px; height:2400px; position:relative; overflow:hidden;11 background:#222; /* container background only */12 }13 14 /* Header */15 .header {16 position:absolute; left:0; top:0; width:100%; height:760px;17 background: linear-gradient(#3a0b0b 0%, #b23632 35%, #b53a35 100%);18 color:#fff;19 }20 .header .big-letter {21 position:absolute; left:0; right:0; top:210px; text-align:center;22 font-size:300px; line-height:1; font-weight:700; letter-spacing:2px;23 }24 .icon-btn {25 width:64px; height:64px; display:flex; align-items:center; justify-content:center;26 }27 .back {28 position:absolute; left:28px; top:32px;29 }30 .confirm {31 position:absolute; right:34px; top:38px;32 }33 .star {34 position:absolute; left:40px; bottom:94px;35 }36 .camera {37 position:absolute; right:40px; bottom:70px;38 width:110px; height:110px; border-radius:22px;39 background: rgba(255,255,255,0.12);40 display:flex; align-items:center; justify-content:center;41 }42 43 /* Content form */44 .content {45 position:absolute; left:0; top:720px; width:100%; height:760px;46 background:#3c3c3f; color:#fff;47 box-shadow: inset 0 1px 0 rgba(0,0,0,0.25);48 }49 .fields { padding:36px 48px; }50 .field {51 position:relative;52 display:flex; align-items:center; gap:26px;53 padding:20px 0 10px 0;54 margin-bottom:28px;55 }56 .field .label {57 font-size:44px; color:#bdbdbd;58 }59 .field .value {60 font-size:52px; color:#fff; flex:1;61 }62 .field .trail {63 position:absolute; right:0; bottom:18px;64 color:#cfcfcf; font-size:44px;65 }66 .underline {67 height:6px; background:#f28a16; width:100%; margin-top:10px;68 }69 .left-icon {70 width:64px; height:64px; display:flex; align-items:center; justify-content:center;71 color:#eee;72 }73 74 .plus-wrap {75 width:140px; height:100px; margin:28px auto 10px auto;76 border-radius:16px; border:2px solid rgba(255,255,255,0.25);77 display:flex; align-items:center; justify-content:center;78 }79 .plus {80 width:60px; height:60px; border-radius:12px; color:#ff8f1e; font-size:64px; line-height:60px;81 display:flex; align-items:center; justify-content:center; font-weight:700;82 }83 84 /* Dial pad */85 .dialpad {86 position:absolute; left:0; bottom:0; width:100%; height:880px;87 background:#13110f; padding:34px 28px 88px 28px;88 box-sizing:border-box;89 }90 .keys {91 width:100%; height:100%;92 display:grid;93 grid-template-columns: 1fr 1fr 1fr 1fr;94 grid-auto-rows: 1fr;95 gap:26px;96 }97 .key {98 background:#2a2724; color:#eee3d6;99 border-radius:72px; display:flex; flex-direction:column; align-items:center; justify-content:center;100 box-shadow: inset 0 -2px 0 rgba(255,255,255,0.05);101 }102 .key .num { font-size:84px; line-height:1; }103 .key .letters { font-size:28px; opacity:0.65; margin-top:6px; letter-spacing:2px; }104 .key.small { font-size:84px; }105 .key.minus { background:#2d2b28; }106 .key.back { background:#d7f2c6; color:#1b1b1b; }107 .key.enter { background:#ffe09f; color:#1b1b1b; }108 .key.dot { font-size:92px; }109 .gesture {110 position:absolute; left:50%; transform:translateX(-50%);111 bottom:26px; width:420px; height:10px; border-radius:6px; background:#e9e9e9; opacity:0.85;112 }113</style>114</head>115<body>116<div id="render-target">117 118 <!-- Header -->119 <div class="header">120 <div class="icon-btn back">121 <svg width="60" height="60" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round">122 <path d="M15 18l-6-6 6-6"/>123 </svg>124 </div>125 <div class="icon-btn confirm">126 <svg width="56" height="56" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round">127 <path d="M20 6L9 17l-5-5"/>128 </svg>129 </div>130 131 <div class="big-letter">A</div>132 133 <div class="icon-btn star">134 <svg width="70" height="70" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round">135 <path d="M12 2l3.09 6.26L22 9.27l-5 4.87L18.18 22 12 18.56 5.82 22 7 14.14 2 9.27l6.91-1.01L12 2z"/>136 </svg>137 </div>138 139 <div class="camera">140 <svg width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round">141 <rect x="3" y="6" width="18" height="14" rx="2" ry="2"></rect>142 <circle cx="12" cy="13" r="4"></circle>143 </svg>144 </div>145 </div>146 147 <!-- Content Form -->148 <div class="content">149 <div class="fields">150 151 <!-- Name -->152 <div class="field">153 <div class="left-icon">154 <svg width="48" height="48" viewBox="0 0 24 24" fill="#eaeaea">155 <path d="M12 12c2.8 0 5-2.2 5-5s-2.2-5-5-5-5 2.2-5 5 2.2 5 5 5zM4 20c0-3.3 3.6-6 8-6s8 2.7 8 6v2H4v-2z"/>156 </svg>157 </div>158 <div class="value">Max</div>159 </div>160 <div class="underline"></div>161 162 <!-- Surname -->163 <div class="field">164 <div class="left-icon" style="opacity:0;"></div>165 <div class="label">Surname</div>166 </div>167 <div class="underline"></div>168 169 <!-- Phone -->170 <div class="field">171 <div class="left-icon">172 <svg width="48" height="48" viewBox="0 0 24 24" fill="#eaeaea">173 <path d="M6.6 10.8c1.6 3.1 3.5 5 6.6 6.6l2.2-2.2c.3-.3.8-.4 1.2-.3 1 .3 2 .5 3.1.5.7 0 1.3.6 1.3 1.3V20c0 .7-.6 1.3-1.3 1.3C9.6 21.3 2.7 14.4 2.7 5.3 2.7 4.6 3.3 4 4 4h3.3c.7 0 1.3.6 1.3 1.3 0 1 .2 2.1.5 3.1.1.4 0 .9-.3 1.2l-2.2 2.2z"/>174 </svg>175 </div>176 <div class="label">Number</div>177 <div class="trail">Mobile</div>178 </div>179 <div class="underline"></div>180 181 <div class="plus-wrap"><div class="plus">+</div></div>182 183 <!-- Email -->184 <div class="field">185 <div class="left-icon">186 <svg width="48" height="48" viewBox="0 0 24 24" fill="#eaeaea">187 <path d="M20 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z"/>188 </svg>189 </div>190 <div class="label">Email</div>191 <div class="trail">Home</div>192 </div>193 <div class="underline"></div>194 195 <div class="plus-wrap"><div class="plus">+</div></div>196 197 </div>198 </div>199 200 <!-- Dialpad -->201 <div class="dialpad">202 <div class="keys">203 <div class="key"><div class="num">1</div></div>204 <div class="key"><div class="num">2</div><div class="letters">ABC</div></div>205 <div class="key"><div class="num">3</div><div class="letters">DEF</div></div>206 <div class="key minus"><div class="num">−</div></div>207 208 <div class="key"><div class="num">4</div><div class="letters">GHI</div></div>209 <div class="key"><div class="num">5</div><div class="letters">JKL</div></div>210 <div class="key"><div class="num">6</div><div class="letters">MNO</div></div>211 <div class="key">212 <svg width="72" height="72" viewBox="0 0 24 24" fill="none" stroke="#efe7dc" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round">213 <path d="M9 18h6M12 9v6"/>214 </svg>215 </div>216 217 <div class="key"><div class="num">7</div><div class="letters">PQRS</div></div>218 <div class="key"><div class="num">8</div><div class="letters">TUV</div></div>219 <div class="key"><div class="num">9</div><div class="letters">WXYZ</div></div>220 <div class="key back">221 <svg width="72" height="72" viewBox="0 0 24 24" fill="none" stroke="#1b1b1b" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round">222 <path d="M6 7l-4 5 4 5h12a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2H6z"/>223 <path d="M12 10l4 4M16 10l-4 4"/>224 </svg>225 </div>226 227 <div class="key"><div class="num">*</div><div class="letters">#</div></div>228 <div class="key"><div class="num">0</div><div class="letters">+</div></div>229 <div class="key dot">•</div>230 <div class="key enter">231 <svg width="80" height="80" viewBox="0 0 24 24" fill="none" stroke="#1b1b1b" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round">232 <path d="M9 12h8V6"/>233 <path d="M17 12l-4 4-4-4"/>234 </svg>235 </div>236 </div>237 <div class="gesture"></div>238 </div>239 240</div>241</body>242</html>