GD-ML/AndroidCode

1<html lang="en">2<head>3<meta charset="UTF-8">4<meta name="viewport" content="width=1080, initial-scale=1.0">5<title>Contacts Edit UI</title>6<style>7  body { margin:0; padding:0; background: transparent; font-family: Roboto, Arial, sans-serif; }8  #render-target {9    position: relative;10    width: 1080px;11    height: 2400px;12    overflow: hidden;13    background: #2a0f0f;14  }15 16  /* Status bar */17  .status-bar {18    position: absolute;19    top: 0;20    left: 0;21    width: 1080px;22    height: 120px;23    background: rgba(0,0,0,0.65);24    color: #fff;25    font-size: 40px;26    display: flex;27    align-items: center;28    justify-content: space-between;29    padding: 0 40px;30    letter-spacing: 1px;31  }32  .status-icons {33    display: flex;34    align-items: center;35    gap: 18px;36    color: #fff;37    font-size: 40px;38  }39 40  /* Header with avatar */41  .header {42    position: absolute;43    top: 0;44    left: 0;45    width: 1080px;46    height: 760px;47    background: linear-gradient(#1a0b0b 0px, #b0443d 120px, #b0443d 100%);48    color: #fff;49  }50  .top-actions {51    position: absolute;52    top: 140px;53    left: 40px;54    right: 40px;55    height: 60px;56  }57  .icon-btn {58    width: 64px;59    height: 64px;60    display: inline-flex;61    align-items: center;62    justify-content: center;63  }64  .icon-right {65    position: absolute;66    right: 0;67    top: 0;68  }69  .letter-avatar {70    position: absolute;71    top: 230px;72    left: 0;73    width: 100%;74    text-align: center;75    font-size: 340px;76    font-weight: 700;77    line-height: 1;78    color: #fff;79  }80  .fav-star {81    position: absolute;82    left: 40px;83    top: 520px;84    width: 90px;85    height: 90px;86  }87  .camera-wrap {88    position: absolute;89    right: 40px;90    bottom: 90px;91    width: 120px;92    height: 120px;93    display: flex;94    align-items: center;95    justify-content: center;96  }97 98  /* Content area */99  .content {100    position: absolute;101    top: 760px;102    left: 0;103    width: 1080px;104    height: 1640px;105    background: #3c3c3c;106    color: #eaeaea;107  }108  .form {109    position: absolute;110    left: 40px;111    right: 40px;112    top: 60px;113  }114 115  .field {116    position: relative;117    margin-bottom: 60px;118    min-height: 120px;119  }120  .field .left-icon {121    position: absolute;122    left: 0;123    top: 8px;124    width: 72px;125    height: 72px;126  }127  .field .label {128    position: absolute;129    left: 100px;130    top: 16px;131    font-size: 48px;132    color: #dcdcdc;133  }134  .field .right-tag {135    position: absolute;136    right: 0;137    top: 16px;138    font-size: 46px;139    color: #e9e4e4;140    opacity: 0.9;141  }142  .field .underline {143    position: absolute;144    left: 100px;145    right: 0;146    top: 86px;147    height: 4px;148    background: #ff8a3d;149  }150  .plus-btn {151    position: absolute;152    top: 120px;153    left: 50%;154    transform: translateX(-50%);155    width: 160px;156    height: 100px;157    border: 2px solid #7a7a7a;158    border-radius: 14px;159    display: flex;160    align-items: center;161    justify-content: center;162    color: #ff8a3d;163    font-size: 72px;164    font-weight: 700;165    background: rgba(255,255,255,0.03);166  }167 168  /* Notes section height to match screenshot spacing */169  .notes {170    margin-top: 40px;171  }172</style>173</head>174<body>175<div id="render-target">176 177  <!-- Status Bar -->178  <div class="status-bar">179    <div>1:14</div>180    <div class="status-icons">181      <span>📶</span>182      <span>🔋 100%</span>183    </div>184  </div>185 186  <!-- Red Header -->187  <div class="header">188    <div class="top-actions">189      <!-- Back Arrow -->190      <div class="icon-btn">191        <svg width="64" height="64" viewBox="0 0 24 24" fill="#fff">192          <path d="M14 7l-5 5 5 5V7z"></path>193        </svg>194      </div>195      <!-- Check mark -->196      <div class="icon-btn icon-right">197        <svg width="64" height="64" viewBox="0 0 24 24" fill="#fff">198          <path d="M9 16.2l-3.5-3.5L4 14.2 9 19l12-12-1.5-1.5z"/>199        </svg>200      </div>201    </div>202 203    <div class="letter-avatar">A</div>204 205    <!-- Favorite Star Outline -->206    <div class="fav-star">207      <svg width="90" height="90" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2">208        <path d="M12 17.3l6.2 3.7-1.6-7 5.4-4.7-7.1-.6L12 2 9.1 8.7 2 9.3l5.4 4.7-1.6 7z"/>209      </svg>210    </div>211 212    <!-- Camera button on header -->213    <div class="camera-wrap">214      <svg width="120" height="120" viewBox="0 0 24 24" fill="#fff">215        <circle cx="12" cy="12" r="10" fill="rgba(255,255,255,0.2)"></circle>216        <path d="M15 9h-1l-1-1H11l-1 1H9c-.6 0-1 .4-1 1v5c0 .6.4 1 1 1h6c.6 0 1-.4 1-1v-5c0-.6-.4-1-1-1zm-3 6a2 2 0 110-4 2 2 0 010 4z" fill="#fff"/>217      </svg>218    </div>219  </div>220 221  <!-- Content/Form Area -->222  <div class="content">223    <div class="form">224 225      <!-- First name -->226      <div class="field" style="margin-bottom: 70px;">227        <div class="left-icon">228          <svg width="72" height="72" viewBox="0 0 24 24" fill="#eaeaea">229            <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 5zm0 2c-3.9 0-7 2.3-7 5v2h14v-2c0-2.7-3.1-5-7-5z"/>230          </svg>231        </div>232        <div class="label">First name</div>233        <div class="underline"></div>234      </div>235 236      <!-- Surname -->237      <div class="field" style="margin-bottom: 70px;">238        <div class="left-icon">239          <svg width="72" height="72" viewBox="0 0 24 24" fill="#eaeaea">240            <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 5zm0 2c-3.9 0-7 2.3-7 5v2h14v-2c0-2.7-3.1-5-7-5z"/>241          </svg>242        </div>243        <div class="label">Surname</div>244        <div class="underline"></div>245      </div>246 247      <!-- Number -->248      <div class="field">249        <div class="left-icon">250          <svg width="72" height="72" viewBox="0 0 24 24" fill="#eaeaea">251            <path d="M6.6 10.8c1.8 3.4 4.3 5.9 7.7 7.7l2.6-2.6c.3-.3.8-.4 1.2-.3 1 .3 2 .6 3 .9.6.2.9.8.9 1.4v3.1c0 .8-.6 1.4-1.4 1.4C10.7 23.4.6 13.3.6 1.4 0 .6.6 0 1.4 0h3.1c.6 0 1.2.3 1.4.9.3 1 .6 2 .9 3 .1.4 0 .9-.3 1.2L4 7.7l2.6 3.1z"/>252          </svg>253        </div>254        <div class="label">Number</div>255        <div class="right-tag">Mobile</div>256        <div class="underline"></div>257        <div class="plus-btn">+</div>258      </div>259 260      <!-- Email -->261      <div class="field">262        <div class="left-icon">263          <svg width="72" height="72" viewBox="0 0 24 24" fill="#eaeaea">264            <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"/>265          </svg>266        </div>267        <div class="label">Email</div>268        <div class="right-tag">Home</div>269        <div class="underline"></div>270        <div class="plus-btn">+</div>271      </div>272 273      <!-- Address -->274      <div class="field">275        <div class="left-icon">276          <svg width="72" height="72" viewBox="0 0 24 24" fill="#eaeaea">277            <path d="M12 2C8.7 2 6 4.7 6 8c0 5.2 6 12 6 12s6-6.8 6-12c0-3.3-2.7-6-6-6zm0 8.5c-1.4 0-2.5-1.1-2.5-2.5S10.6 5.5 12 5.5s2.5 1.1 2.5 2.5S13.4 10.5 12 10.5z"/>278          </svg>279        </div>280        <div class="label">Address</div>281        <div class="right-tag">Home</div>282        <div class="underline"></div>283        <div class="plus-btn">+</div>284      </div>285 286      <!-- Birthday -->287      <div class="field">288        <div class="left-icon">289          <svg width="72" height="72" viewBox="0 0 24 24" fill="#eaeaea">290            <path d="M12 3c1.1 0 2-.9 2-2 0-1.1-1-1.9-2-1.9s-2 .8-2 1.9c0 1.1.9 2 2 2zm8 5H4c-1.1 0-2 .9-2 2v11c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zm-1 10H5v-5h14v5z"/>291          </svg>292        </div>293        <div class="label">Unknown</div>294        <div class="right-tag">Birthday</div>295        <div class="underline"></div>296        <div class="plus-btn">+</div>297      </div>298 299      <!-- Notes -->300      <div class="field notes">301        <div class="left-icon">302          <svg width="72" height="72" viewBox="0 0 24 24" fill="#eaeaea">303            <path d="M4 2h12l4 4v14c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2zm10 4h4l-4-4v4zM6 10h12v2H6v-2zm0 4h12v2H6v-2z"/>304          </svg>305        </div>306        <div class="label">Notes</div>307        <div class="underline"></div>308      </div>309 310      <!-- Groups (footer text) -->311      <div class="field" style="margin-top: 80px;">312        <div class="left-icon">313          <svg width="72" height="72" viewBox="0 0 24 24" fill="#eaeaea">314            <path d="M16 11c2.8 0 5-2.2 5-5s-2.2-5-5-5-5 2.2-5 5 2.2 5 5 5zm-8 0c2.2 0 4-1.8 4-4S10.2 3 8 3 4 4.8 4 7s1.8 4 4 4zm0 2C3.1 13 0 15.3 0 18v3h12v-3c0-2.7-3.1-5-8-5zm8 0c-1.3 0-2.5.3-3.5.8 1.8 1.1 3.5 2.9 3.5 5.2v2h10v-3c0-2.7-3.1-5-10-5z"/>315          </svg>316        </div>317        <div class="label">No groups</div>318        <div class="underline"></div>319      </div>320 321    </div>322  </div>323 324</div>325</body>326</html>