GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<title>Contact Edit UI Mock</title>5<style>6  body { margin: 0; padding: 0; background: transparent; font-family: Roboto, Arial, Helvetica, sans-serif; }7  #render-target {8    width: 1080px;9    height: 2400px;10    position: relative;11    overflow: hidden;12    background: #2b2b2b;13  }14 15  /* Status bar */16  .status {17    position: absolute;18    top: 0;19    left: 0;20    width: 1080px;21    height: 110px;22    background: #0f0f0f;23    color: #eaeaea;24    font-size: 38px;25    display: flex;26    align-items: center;27    padding: 0 36px;28    justify-content: space-between;29    box-sizing: border-box;30  }31  .status .right { display: flex; gap: 22px; align-items: center; }32  .dot { width: 10px; height: 10px; background: #c9c9c9; border-radius: 50%; display: inline-block; }33 34  /* Header */35  .header {36    position: absolute;37    top: 110px;38    left: 0;39    width: 1080px;40    height: 560px;41    background: linear-gradient(#6d1a16, #a3423a);42    color: #fff;43  }44  .header .letter {45    position: absolute;46    top: 65px;47    left: 0;48    width: 100%;49    text-align: center;50    font-size: 420px;51    font-weight: 500;52    letter-spacing: 8px;53    color: #ffffff;54    opacity: 0.95;55  }56  /* Header icons */57  .icon-btn {58    position: absolute;59    width: 90px;60    height: 90px;61    display: flex;62    align-items: center;63    justify-content: center;64  }65  .back { top: 18px; left: 22px; }66  .confirm { top: 20px; right: 24px; }67  .favorite { bottom: 8px; left: 28px; }68  .camera { bottom: 32px; right: 40px; }69 70  /* Form area */71  .form {72    position: absolute;73    top: 670px;74    left: 0;75    width: 1080px;76    height: 830px;77    background: #3a3a3a;78    color: #f2f2f2;79    box-sizing: border-box;80    padding-top: 40px;81  }82  .field {83    position: relative;84    padding-left: 120px;85    padding-right: 120px;86    margin: 28px 0 18px;87  }88  .field .underline {89    height: 2px;90    background: #ff9833;91    margin-top: 18px;92  }93  .field .label {94    position: absolute;95    left: 120px;96    top: -8px;97    color: #bdbdbd;98    font-size: 46px;99  }100  .field .value {101    font-size: 56px;102    color: #ffffff;103  }104  .field .right-tag {105    position: absolute;106    right: 40px;107    top: 8px;108    font-size: 46px;109    color: #e1e1e1;110    opacity: 0.9;111  }112  .field .plus-box {113    position: absolute;114    right: 180px;115    top: 66px;116    width: 120px;117    height: 104px;118    border-radius: 18px;119    border: 2px solid #666;120    display: flex;121    align-items: center;122    justify-content: center;123    color: #ff9933;124    font-size: 72px;125    font-weight: 600;126    background: rgba(255,255,255,0.05);127  }128  .field .icon {129    position: absolute;130    left: 32px;131    top: 6px;132    width: 64px;133    height: 64px;134    opacity: 0.95;135  }136 137  /* Keyboard */138  .keyboard {139    position: absolute;140    left: 0;141    bottom: 0;142    width: 1080px;143    height: 900px;144    background: #0e1518;145    box-sizing: border-box;146    padding: 26px 24px 90px 24px;147  }148  .kb-wrap {149    display: grid;150    grid-template-columns: 1fr 1fr 1fr 260px;151    grid-gap: 26px 26px;152  }153  .key {154    height: 180px;155    border-radius: 90px;156    background: #1f2a2d;157    color: #f3f7f8;158    display: flex;159    flex-direction: column;160    align-items: center;161    justify-content: center;162    font-weight: 600;163  }164  .key .num { font-size: 72px; line-height: 68px; }165  .key .sub { font-size: 34px; opacity: 0.8; margin-top: 8px; letter-spacing: 2px; }166 167  .side { height: 180px; border-radius: 90px; background: #334045; color: #e9eff0; display:flex; align-items:center; justify-content:center; font-size: 80px; }168  .side.blue { background: #bfeaff; color: #06202b; }169  .side.green { background: #9af2c6; color: #08301f; }170 171  .row-end-spacer { height: 1px; }172 173  /* Bottom gesture bar */174  .gesture {175    position: absolute;176    bottom: 28px;177    left: 50%;178    transform: translateX(-50%);179    width: 560px;180    height: 12px;181    background: #d9d9d9;182    border-radius: 8px;183    opacity: 0.9;184  }185</style>186</head>187<body>188<div id="render-target">189 190  <!-- Status bar -->191  <div class="status">192    <div class="left">1:16</div>193    <div class="right">194      <span class="dot"></span>195      <span class="dot"></span>196      <span class="dot"></span>197      <span style="font-size:34px;">100%</span>198    </div>199  </div>200 201  <!-- Red header with initial -->202  <div class="header">203    <!-- Back icon -->204    <div class="icon-btn back">205      <svg width="56" height="56" viewBox="0 0 24 24" fill="#ffffff">206        <path d="M10 19L3 12l7-7v5h11v4H10v5z"/>207      </svg>208    </div>209    <!-- Confirm icon -->210    <div class="icon-btn confirm">211      <svg width="56" height="56" viewBox="0 0 24 24" fill="#ffffff">212        <path d="M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z"/>213      </svg>214    </div>215 216    <div class="letter">A</div>217 218    <!-- Favorite star -->219    <div class="icon-btn favorite">220      <svg width="80" height="80" viewBox="0 0 24 24" fill="#ffffff">221        <path d="M12 17.3l-6.2 3.3 1.2-6.9L2 8.7l7-1 3-6 3 6 7 1-5 5 1.2 6.9z" />222      </svg>223    </div>224    <!-- Camera icon -->225    <div class="icon-btn camera">226      <svg width="90" height="90" viewBox="0 0 24 24" fill="#ffffff">227        <path d="M9 3l-1.7 2H4a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2h-3.3L15 3H9zm3 5a5 5 0 1 1 0 10 5 5 0 0 1 0-10zm0 2.5a2.5 2.5 0 1 0 .001 5.001A2.5 2.5 0 0 0 12 10.5z"/>228      </svg>229    </div>230  </div>231 232  <!-- Form -->233  <div class="form">234    <!-- Name -->235    <div class="field">236      <svg class="icon" viewBox="0 0 24 24" fill="#e6e6e6">237        <path d="M12 12c2.7 0 5-2.3 5-5s-2.3-5-5-5-5 2.3-5 5 2.3 5 5 5zm0 2c-4 0-8 2-8 6v2h16v-2c0-4-4-6-8-6z"/>238      </svg>239      <div class="value">Clara</div>240      <div class="underline"></div>241    </div>242 243    <!-- Surname -->244    <div class="field">245      <svg class="icon" viewBox="0 0 24 24" fill="#bdbdbd" style="opacity:.6">246        <path d="M12 12c2.7 0 5-2.3 5-5s-2.3-5-5-5-5 2.3-5 5 2.3 5 5 5z"/>247      </svg>248      <div class="label">Surname</div>249      <div class="underline"></div>250    </div>251 252    <!-- Number -->253    <div class="field">254      <svg class="icon" viewBox="0 0 24 24" fill="#e6e6e6">255        <path d="M6.6 10.8c1.6 3.1 4.1 5.6 7.2 7.2l2.4-2.4c.3-.3.8-.4 1.2-.2 1.3.4 2.6.7 3.9.7.7 0 1.3.6 1.3 1.3V22c0 .7-.6 1.3-1.3 1.3C10.6 23.3.7 13.4.7 1.3.7.6 1.3 0 2 0h4.6c.7 0 1.3.6 1.3 1.3 0 1.3.2 2.6.7 3.9.1.4 0 .8-.3 1.2L6.6 10.8z"/>256      </svg>257      <div class="label" style="top:-6px; color:#d0d0d0;">Number</div>258      <div class="right-tag">Mobile</div>259      <div class="plus-box">+</div>260      <div class="underline" style="width: 860px;"></div>261    </div>262 263    <!-- Email -->264    <div class="field" style="margin-top:40px;">265      <svg class="icon" viewBox="0 0 24 24" fill="#e6e6e6">266        <path d="M2 6a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V6zm2 0l8 6 8-6H4zm16 12V8l-8 6L4 8v10h16z"/>267      </svg>268      <div class="label">Email</div>269      <div class="right-tag">Home</div>270      <div class="plus-box" style="top:120px;">+</div>271      <div class="underline" style="width: 860px;"></div>272    </div>273  </div>274 275  <!-- Keyboard -->276  <div class="keyboard">277    <div class="kb-wrap">278      <!-- Row 1 -->279      <div class="key"><div class="num">1</div></div>280      <div class="key"><div class="num">2</div><div class="sub">ABC</div></div>281      <div class="key"><div class="num">3</div><div class="sub">DEF</div></div>282      <div class="side">−</div>283      <!-- Row 2 -->284      <div class="key"><div class="num">4</div><div class="sub">GHI</div></div>285      <div class="key"><div class="num">5</div><div class="sub">JKL</div></div>286      <div class="key"><div class="num">6</div><div class="sub">MNO</div></div>287      <div class="side">⌜⌟</div>288      <!-- Row 3 -->289      <div class="key"><div class="num">7</div><div class="sub">PQRS</div></div>290      <div class="key"><div class="num">8</div><div class="sub">TUV</div></div>291      <div class="key"><div class="num">9</div><div class="sub">WXYZ</div></div>292      <div class="side blue">293        <svg width="80" height="80" viewBox="0 0 24 24" fill="#07202B">294          <path d="M19 7l-1.4-1.4L12 11.2 6.4 5.6 5 7l6 6-6 6 1.4 1.4L12 14.8l5.6 5.6L19 19l-6-6 6-6z"/>295        </svg>296      </div>297      <!-- Row 4 -->298      <div class="key"><div class="num">*</div><div class="sub">#</div></div>299      <div class="key"><div class="num">0</div><div class="sub">+</div></div>300      <div class="key"><div class="num">.</div></div>301      <div class="side green">302        <svg width="80" height="80" viewBox="0 0 24 24" fill="#073220">303          <path d="M5 12h12l-5 5 1.4 1.4L21.8 11l-8.4-7.4L12 5l5 5H5z"/>304        </svg>305      </div>306    </div>307  </div>308 309  <div class="gesture"></div>310</div>311</body>312</html>