GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<title>Contact Edit UI</title>5<style>6  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }7  #render-target {8    width: 1080px;9    height: 2400px;10    position: relative;11    overflow: hidden;12    background: #1a1a1a;13  }14 15  /* Status bar */16  .status-bar {17    position: absolute;18    top: 0;19    left: 0;20    width: 1080px;21    height: 120px;22    background: #0c0c0c;23    color: #ffffff;24    font-weight: 600;25  }26  .status-time {27    position: absolute;28    left: 36px;29    top: 30px;30    font-size: 40px;31    letter-spacing: 1px;32  }33  .status-icons {34    position: absolute;35    right: 24px;36    top: 28px;37    display: flex;38    align-items: center;39    gap: 24px;40  }41  .status-icons .dot {42    width: 12px; height: 12px; background: #ffffff; border-radius: 50%;43  }44  .battery {45    display: inline-block; width: 60px; height: 34px; border: 3px solid #fff; border-radius: 6px; position: relative;46  }47  .battery::after {48    content: ""; position: absolute; right: -10px; top: 9px; width: 8px; height: 16px; background: #fff; border-radius: 2px;49  }50  .battery .level {51    position: absolute; left: 4px; top: 4px; height: 24px; width: 48px; background: #69f0ae; border-radius: 3px;52  }53 54  /* Header */55  .header {56    position: absolute;57    top: 120px;58    left: 0;59    width: 1080px;60    height: 880px;61    background: linear-gradient(#5a1414, #a33d37 40%, #a33d37);62    color: #fff;63  }64  .header .back {65    position: absolute;66    left: 32px;67    top: 64px;68    width: 72px; height: 72px;69  }70  .header .check {71    position: absolute;72    right: 36px;73    top: 64px;74    width: 72px; height: 72px;75  }76  .header .big-letter {77    position: absolute;78    top: 140px;79    left: 0;80    width: 100%;81    text-align: center;82    font-size: 300px;83    font-weight: 700;84    letter-spacing: 6px;85  }86  .header .star {87    position: absolute;88    left: 52px;89    top: 560px;90    width: 110px; height: 110px;91  }92  .header .camera-wrap {93    position: absolute;94    right: 56px;95    bottom: 170px;96    width: 120px; height: 120px;97    background: rgba(255,255,255,0.12);98    border-radius: 24px;99    display: flex;100    align-items: center;101    justify-content: center;102  }103  .camera {104    width: 96px; height: 96px; background: #E0E0E0; border: 2px solid #BDBDBD; color: #757575;105    display: flex; align-items: center; justify-content: center; border-radius: 18px;106    font-size: 24px;107  }108 109  /* Form area */110  .form-area {111    position: absolute;112    top: 1000px;113    left: 0;114    width: 1080px;115    height: 540px;116    background: #343434;117    color: #fff;118  }119  .field {120    position: relative;121    margin: 40px 100px;122    padding-left: 80px;123  }124  .field .icon {125    position: absolute;126    left: 20px; top: 8px;127    width: 44px; height: 44px;128  }129  .field label {130    display: block;131    font-size: 46px;132    margin-bottom: 12px;133  }134  .field .input-line {135    height: 72px;136    font-size: 50px;137    border-bottom: 5px solid #F28C28;138    color: #fff;139    padding-bottom: 12px;140  }141  .inline-right {142    position: absolute;143    right: 70px;144    bottom: 16px;145    font-size: 46px;146    color: #dcdcdc;147  }148  .plus-btn {149    position: absolute;150    right: 420px;151    bottom: -60px;152    width: 160px; height: 110px;153    border: 2px solid #777; border-radius: 24px;154    display: flex; align-items: center; justify-content: center;155    color: #ff9d3f; font-size: 80px; font-weight: 600;156    background: #3e3e3e;157  }158 159  /* Keyboard */160  .keyboard {161    position: absolute;162    bottom: 80px;163    left: 0;164    width: 1080px;165    height: 980px;166    background: #121415;167    border-top: 1px solid #222;168    padding-top: 40px;169  }170  .key-row {171    display: flex;172    justify-content: space-around;173    padding: 24px 30px;174  }175  .key {176    width: 230px; height: 170px;177    background: #1f2224;178    color: #e5e5e5;179    border-radius: 86px;180    display: flex; flex-direction: column;181    align-items: center; justify-content: center;182    box-shadow: inset 0 0 0 1px #2a2d30;183    font-size: 72px; font-weight: 600;184  }185  .key .sub {186    font-size: 32px; color: #9da3a7; margin-top: 6px; letter-spacing: 2px;187  }188  .key.small {189    width: 230px; height: 170px;190  }191  .key.blue { background: #c9edff; color: #0f1a22; }192  .key.green { background: #bff6d4; color: #0f2116; }193 194  .nav-bar {195    position: absolute;196    bottom: 24px;197    left: 50%;198    transform: translateX(-50%);199    width: 520px;200    height: 12px;201    background: #cfcfcf;202    border-radius: 6px;203    opacity: 0.8;204  }205 206  /* SVG icon strokes */207  svg { fill: none; stroke: #ffffff; stroke-width: 12px; stroke-linecap: round; stroke-linejoin: round; }208</style>209</head>210<body>211<div id="render-target">212 213  <!-- Status bar -->214  <div class="status-bar">215    <div class="status-time">1:17</div>216    <div class="status-icons">217      <div class="dot"></div>218      <div class="dot"></div>219      <div class="dot"></div>220      <div class="battery"><div class="level"></div></div>221    </div>222  </div>223 224  <!-- Header with big letter and icons -->225  <div class="header">226    <svg class="back" viewBox="0 0 100 100">227      <path d="M70 20 L30 50 L70 80"></path>228    </svg>229    <svg class="check" viewBox="0 0 100 100">230      <path d="M20 55 L40 75 L80 30"></path>231    </svg>232    <div class="big-letter">A</div>233 234    <svg class="star" viewBox="0 0 100 100">235      <path d="M50 8 L61 37 L92 38 L67 57 L75 88 L50 71 L25 88 L33 57 L8 38 L39 37 Z" stroke="#fff"></path>236    </svg>237 238    <div class="camera-wrap">239      <div class="camera">[IMG: Camera]</div>240    </div>241  </div>242 243  <!-- Form area -->244  <div class="form-area">245    <!-- Name -->246    <div class="field" style="margin-top: 36px;">247      <svg class="icon" viewBox="0 0 100 100">248        <circle cx="50" cy="32" r="20" stroke="#fff"></circle>249        <path d="M12 88 C20 62, 80 62, 88 88" stroke="#fff"></path>250      </svg>251      <label>Clara</label>252      <div class="input-line"></div>253    </div>254 255    <!-- Surname -->256    <div class="field">257      <label style="color:#bfbfbf;">Surname</label>258      <div class="input-line"></div>259    </div>260 261    <!-- Phone -->262    <div class="field">263      <svg class="icon" viewBox="0 0 100 100">264        <path d="M25 18 L75 18 L75 82 L25 82 Z" stroke="#fff"></path>265        <circle cx="50" cy="72" r="6" stroke="#fff"></circle>266      </svg>267      <div class="input-line">2111112222</div>268      <div class="inline-right">Mobile</div>269      <div class="plus-btn">+</div>270    </div>271 272    <!-- Email -->273    <div class="field" style="margin-bottom:0;">274      <svg class="icon" viewBox="0 0 100 100">275        <rect x="14" y="24" width="72" height="52" rx="6" stroke="#fff"></rect>276        <path d="M14 30 L50 56 L86 30" stroke="#fff"></path>277      </svg>278      <label style="color:#bfbfbf;">Email</label>279      <div class="input-line"></div>280      <div class="inline-right" style="right:90px;">Home</div>281      <div class="plus-btn" style="right:420px;">+</div>282    </div>283  </div>284 285  <!-- Keyboard -->286  <div class="keyboard">287    <div class="key-row">288      <div class="key">1</div>289      <div class="key">2<span class="sub">ABC</span></div>290      <div class="key">3<span class="sub">DEF</span></div>291      <div class="key small">-</div>292    </div>293    <div class="key-row">294      <div class="key">4<span class="sub">GHI</span></div>295      <div class="key">5<span class="sub">JKL</span></div>296      <div class="key">6<span class="sub">MNO</span></div>297      <div class="key small">⎽</div>298    </div>299    <div class="key-row">300      <div class="key">7<span class="sub">PQRS</span></div>301      <div class="key">8<span class="sub">TUV</span></div>302      <div class="key">9<span class="sub">WXYZ</span></div>303      <div class="key blue">⌫</div>304    </div>305    <div class="key-row">306      <div class="key">*</div>307      <div class="key">0<span class="sub">+</span></div>308      <div class="key">.</div>309      <div class="key green">↗</div>310    </div>311  </div>312 313  <div class="nav-bar"></div>314</div>315</body>316</html>