GD-ML/AndroidCode

1<!DOCTYPE html>2<html>3<head>4<meta charset="UTF-8">5<title>Contact Edit UI</title>6<style>7  body { margin:0; padding:0; background:transparent; }8  #render-target{9    width:1080px; height:2400px; position:relative; overflow:hidden;10    background:#3f3f3f; font-family: Arial, Helvetica, sans-serif; color:#ECECEC;11  }12 13  /* Header */14  .header{15    position:absolute; left:0; top:0; width:100%; height:720px;16    background:linear-gradient(180deg,#2a0b0b 0%, #b13a36 35%, #b13a36 100%);17  }18  .header .initial{19    position:absolute; left:0; top:180px; width:100%;20    text-align:center; font-size:360px; line-height:1; color:#fff; opacity:0.95;21    pointer-events:none;22  }23  .nav{24    position:absolute; top:90px; width:72px; height:72px; fill:#fff;25  }26  .nav.back{ left:48px; }27  .nav.ok{ right:48px; }28 29  .corner-icon{30    position:absolute; bottom:110px; width:96px; height:96px; fill:#fff;31  }32  .corner-icon.star{ left:48px; }33  .corner-icon.camera{ right:48px; }34 35  /* Form area */36  .form{37    position:absolute; left:0; top:720px; right:0; bottom:0;38    padding:40px 64px 120px 64px;39  }40 41  .field{42    display:flex; align-items:flex-end; gap:28px;43    margin:28px 0 22px 0;44  }45  .ico{46    width:72px; height:72px; flex:0 0 72px; fill:#EDEDED; opacity:0.9;47  }48  .input{49    flex:1;50  }51  .placeholder{52    color:#bfbfbf; font-size:50px; line-height:1.2;53  }54  .underline{55    height:4px; background:#e9872a; margin-top:18px; width:85%;56  }57  .meta{58    color:#d0d0d0; font-size:46px; margin-left:16px; opacity:0.9;59  }60 61  .add-block{62    display:flex; justify-content:center; margin:24px 0 20px;63  }64  .add-btn{65    width:180px; height:110px; border:2px solid #6f6f6f; border-radius:14px;66    display:flex; align-items:center; justify-content:center;67  }68  .add-btn .plus{69    width:60px; height:60px; position:relative;70  }71  .add-btn .plus:before, .add-btn .plus:after{72    content:""; position:absolute; background:#ff8a00; border-radius:3px;73  }74  .add-btn .plus:before{ width:60px; height:10px; left:0; top:25px; }75  .add-btn .plus:after{ width:10px; height:60px; left:25px; top:0; }76 77  /* Bottom gesture bar */78  .gesture{79    position:absolute; left:50%; transform:translateX(-50%);80    bottom:22px; width:300px; height:10px; background:#d9d9d9; border-radius:6px; opacity:0.85;81  }82</style>83</head>84<body>85<div id="render-target">86 87  <!-- Header with big initial -->88  <div class="header">89    <svg class="nav back" viewBox="0 0 24 24">90      <path d="M15.5 3.5 L8 11 L15.5 18.5" stroke="#fff" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"/>91    </svg>92    <svg class="nav ok" viewBox="0 0 24 24">93      <path d="M20 6 L10 16 L5 11" stroke="#fff" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"/>94    </svg>95 96    <div class="initial">A</div>97 98    <svg class="corner-icon star" viewBox="0 0 24 24">99      <path d="M12 3 L14.8 9 H21 L16 12.8 L18 19 L12 15.5 L6 19 L8 12.8 L3 9 H9.2 Z"100            fill="none" stroke="#fff" stroke-width="2" stroke-linejoin="round"/>101    </svg>102    <svg class="corner-icon camera" viewBox="0 0 24 24">103      <rect x="3" y="7" width="18" height="12" rx="2" fill="none" stroke="#fff" stroke-width="2"/>104      <circle cx="12" cy="13" r="3.5" fill="none" stroke="#fff" stroke-width="2"/>105      <rect x="7" y="4" width="4" height="3" rx="1" fill="#fff"/>106    </svg>107  </div>108 109  <!-- Form fields -->110  <div class="form">111    <!-- First name -->112    <div class="field">113      <svg class="ico" viewBox="0 0 24 24">114        <circle cx="12" cy="8" r="4" fill="#EDEDED"/>115        <path d="M4 20 q8-6 16 0" fill="#EDEDED"/>116      </svg>117      <div class="input">118        <div class="placeholder">First name</div>119        <div class="underline"></div>120      </div>121    </div>122 123    <!-- Surname -->124    <div class="field">125      <div class="ico"></div>126      <div class="input">127        <div class="placeholder">Surname</div>128        <div class="underline"></div>129      </div>130    </div>131 132    <!-- Number -->133    <div class="field">134      <svg class="ico" viewBox="0 0 24 24">135        <path d="M6 2 l4 2 -2 4 c2 3 4 5 7 7 l4-2 2 4 c-2 2-5 3-7 3 -6 0-12-6-12-12 0-2 1-5 3-7z" fill="#EDEDED"/>136      </svg>137      <div class="input">138        <div class="placeholder">Number</div>139        <div class="underline" style="width:78%;"></div>140      </div>141      <div class="meta">Mobile</div>142    </div>143 144    <div class="add-block"><div class="add-btn"><div class="plus"></div></div></div>145 146    <!-- Email -->147    <div class="field">148      <svg class="ico" viewBox="0 0 24 24">149        <rect x="3" y="6" width="18" height="12" rx="2" fill="none" stroke="#EDEDED" stroke-width="2"/>150        <path d="M3 7 l9 6 9-6" fill="none" stroke="#EDEDED" stroke-width="2"/>151      </svg>152      <div class="input">153        <div class="placeholder">Email</div>154        <div class="underline"></div>155      </div>156      <div class="meta">Home</div>157    </div>158 159    <div class="add-block"><div class="add-btn"><div class="plus"></div></div></div>160 161    <!-- Address -->162    <div class="field">163      <svg class="ico" viewBox="0 0 24 24">164        <path d="M12 3 a6 6 0 0 1 6 6 c0 5-6 11-6 11s-6-6-6-11a6 6 0 0 1 6-6z" fill="none" stroke="#EDEDED" stroke-width="2"/>165        <circle cx="12" cy="9" r="2" fill="#EDEDED"/>166      </svg>167      <div class="input">168        <div class="placeholder">Address</div>169        <div class="underline"></div>170      </div>171      <div class="meta">Home</div>172    </div>173 174    <div class="add-block"><div class="add-btn"><div class="plus"></div></div></div>175 176    <!-- Unknown / Birthday -->177    <div class="field">178      <svg class="ico" viewBox="0 0 24 24">179        <rect x="4" y="9" width="16" height="9" rx="2" fill="#EDEDED"/>180        <rect x="7" y="7" width="3" height="2" rx="0.5" fill="#EDEDED"/>181        <rect x="14" y="7" width="3" height="2" rx="0.5" fill="#EDEDED"/>182      </svg>183      <div class="input">184        <div class="placeholder">Unknown</div>185        <div class="underline" style="width:80%;"></div>186      </div>187      <div class="meta">Birthday</div>188    </div>189 190    <div class="add-block"><div class="add-btn"><div class="plus"></div></div></div>191 192    <!-- Notes -->193    <div class="field">194      <svg class="ico" viewBox="0 0 24 24">195        <rect x="3" y="4" width="18" height="16" rx="2" fill="none" stroke="#EDEDED" stroke-width="2"/>196        <rect x="7" y="8" width="10" height="2" fill="#EDEDED"/>197        <rect x="7" y="12" width="8" height="2" fill="#EDEDED"/>198      </svg>199      <div class="input">200        <div class="placeholder">Notes</div>201        <div class="underline"></div>202      </div>203    </div>204  </div>205 206  <div class="gesture"></div>207</div>208</body>209</html>