GD-ML/AndroidCode
13.4k
1<html>2<head>3<meta charset="UTF-8">4<title>Contacts 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:#1f1f1f;13 color:#fff;14 }15 16 /* Status bar */17 .status-bar{18 position:absolute; top:0; left:0;19 width:1080px; height:120px;20 background:linear-gradient(to bottom, #0b0b0b 0%, rgba(0,0,0,0.35) 100%);21 font-size:40px;22 }23 .status-left{position:absolute; left:30px; top:0; height:120px; display:flex; align-items:center; gap:16px;}24 .status-right{position:absolute; right:30px; top:0; height:120px; display:flex; align-items:center; gap:24px; font-size:32px;}25 .dot{width:10px;height:10px;background:#cfcfcf;border-radius:50%;}26 .icon-sb{width:46px;height:46px; opacity:0.9;}27 28 /* Header */29 .header{30 position:absolute; left:0; top:120px;31 width:1080px; height:820px;32 background:linear-gradient(#5a1f1c, #9a3f39 30%, #9a3f39 100%);33 }34 .top-actions{position:absolute; top:36px; left:30px; right:30px; height:80px; display:flex; justify-content:space-between; align-items:center;}35 .action-icon{width:72px;height:72px;}36 .big-letter{37 position:absolute; left:0; right:0; top:160px;38 text-align:center; font-size:360px; font-weight:bold; color:#fff; letter-spacing:8px;39 }40 .star-wrap{position:absolute; left:34px; bottom:120px;}41 .camera-wrap{position:absolute; right:34px; bottom:110px;}42 43 /* Form area */44 .form{45 position:absolute; left:0; top:940px;46 width:1080px; height:940px;47 background:#3a3a3a;48 padding:40px 40px 0 40px;49 box-sizing:border-box;50 }51 .row{position:relative; height:160px; margin-bottom:20px;}52 .row .left-icon{position:absolute; left:0; top:32px; width:78px; height:78px;}53 .row .field{54 position:absolute; left:120px; right:220px; top:10px;55 padding-top:60px; font-size:56px; color:#fff;56 height:120px;57 box-sizing:border-box;58 border-bottom:6px solid #ff9f43;59 }60 .row .placeholder{color:#b5b5b5;}61 .row .right-label{62 position:absolute; right:40px; bottom:18px;63 font-size:48px; color:#ddd;64 }65 66 .plus-box{67 width:150px; height:150px; border-radius:18px;68 border:2px solid rgba(255,255,255,0.2);69 background:rgba(255,255,255,0.05);70 display:flex; align-items:center; justify-content:center;71 margin:26px auto 0 auto;72 }73 .plus{74 width:90px; height:90px; border-radius:12px;75 background:#3e3e3e; box-shadow:0 0 0 3px rgba(255,255,255,0.06) inset;76 position:relative;77 }78 .plus:before, .plus:after{79 content:""; position:absolute; background:#ff9f43; left:50%; top:50%;80 transform:translate(-50%,-50%);81 }82 .plus:before{width:68px; height:14px; border-radius:8px;}83 .plus:after{width:14px; height:68px; border-radius:8px;}84 85 /* Email row underline (orange) matching others */86 .email-row .field{border-bottom-color:#ff9f43;}87 88 /* Keyboard */89 .keyboard{90 position:absolute; left:0; bottom:0;91 width:1080px; height:620px;92 background:#121212;93 box-shadow:0 -6px 24px rgba(0,0,0,0.5);94 }95 .suggest-bar{96 height:100px; background:#1b1b1b; color:#e6e6e6;97 display:flex; align-items:center; gap:24px; padding:0 38px; box-sizing:border-box;98 font-size:46px;99 }100 .pipe{margin:0 14px; opacity:0.6;}101 .keys{padding:20px 26px; box-sizing:border-box;}102 .key-row{display:flex; justify-content:space-between; margin-bottom:22px;}103 .key{104 height:98px; width:90px; border-radius:18px;105 background:#252525; color:#dcdcdc; font-size:44px;106 display:flex; align-items:center; justify-content:center;107 box-shadow:inset 0 -2px 0 rgba(255,255,255,0.05);108 }109 .key-wide{width:120px;}110 .key-wider{width:140px;}111 .key-space{flex:1; height:98px; margin:0 18px; border-radius:18px; background:#252525;}112 .key-enter{width:160px; background:#4caf50;}113 .bottom-bar{display:flex; align-items:center; gap:18px;}114 .rounded{border-radius:24px;}115 .light{background:#2d2d2d;}116 .pill{width:120px; height:98px; border-radius:24px; background:#2d2d2d;}117</style>118</head>119<body>120<div id="render-target">121 122 <!-- Status Bar -->123 <div class="status-bar">124 <div class="status-left">125 <div>1:15</div>126 <div class="dot"></div>127 <div class="dot"></div>128 <div class="dot"></div>129 </div>130 <div class="status-right">131 <!-- Wi-Fi icon -->132 <svg class="icon-sb" viewBox="0 0 24 24">133 <path fill="#ffffff" d="M12 18.5l2.5 2.5-2.5 2.5-2.5-2.5L12 18.5z"/>134 <path fill="#ffffff" d="M2 9c5.5-4 14.5-4 20 0l-2 2c-4.7-3.2-11.3-3.2-16 0L2 9z"/>135 <path fill="#ffffff" d="M6 13c3.6-2.4 8.4-2.4 12 0l-2 2c-2.7-1.8-5.3-1.8-8 0l-2-2z"/>136 </svg>137 <!-- Battery icon -->138 <svg class="icon-sb" viewBox="0 0 24 24">139 <rect x="2" y="6" width="18" height="12" rx="2" ry="2" fill="#ffffff"></rect>140 <rect x="20" y="9" width="2" height="6" fill="#ffffff"></rect>141 </svg>142 <div style="font-size:34px;">100%</div>143 </div>144 </div>145 146 <!-- Header -->147 <div class="header">148 <div class="top-actions">149 <!-- Back arrow -->150 <svg class="action-icon" viewBox="0 0 24 24">151 <path fill="#ffffff" d="M15.5 4l-9 8 9 8v-5h7v-6h-7V4z"/>152 </svg>153 <!-- Check mark -->154 <svg class="action-icon" viewBox="0 0 24 24">155 <path fill="#ffffff" d="M9 16.2l-3.5-3.5-2 2L9 20.2 20.5 8.7l-2-2z"/>156 </svg>157 </div>158 159 <div class="big-letter">A</div>160 161 <!-- Favorite star -->162 <div class="star-wrap">163 <svg width="120" height="120" viewBox="0 0 24 24">164 <path fill="none" stroke="#ffffff" stroke-width="2" d="M12 2l3.1 6.6 7 1-5.2 4.8 1.5 7-6.4-3.6-6.4 3.6 1.5-7L1.9 9.6l7-1z"/>165 </svg>166 </div>167 168 <!-- Camera icon -->169 <div class="camera-wrap">170 <svg width="120" height="120" viewBox="0 0 24 24">171 <rect x="2" y="6" width="20" height="14" rx="2" fill="#ffffff"></rect>172 <circle cx="12" cy="13" r="4" fill="#9a3f39"></circle>173 <rect x="6" y="4" width="6" height="3" rx="1" fill="#ffffff"></rect>174 </svg>175 </div>176 </div>177 178 <!-- Form Area -->179 <div class="form">180 <!-- Name -->181 <div class="row">182 <svg class="left-icon" viewBox="0 0 24 24">183 <circle cx="12" cy="8" r="4" fill="#ffffff"></circle>184 <path d="M4 20c0-4.4 16-4.4 16 0v1H4v-1z" fill="#ffffff"></path>185 </svg>186 <div class="field">Clara</div>187 </div>188 189 <!-- Surname -->190 <div class="row">191 <svg class="left-icon" viewBox="0 0 24 24">192 <circle cx="12" cy="8" r="4" fill="#ffffff"></circle>193 <path d="M4 20c0-4.4 16-4.4 16 0v1H4v-1z" fill="#ffffff"></path>194 </svg>195 <div class="field placeholder">Surname</div>196 </div>197 198 <!-- Number -->199 <div class="row">200 <svg class="left-icon" viewBox="0 0 24 24">201 <path fill="#ffffff" d="M6 2h4l2 4-3 2c1.5 3.3 4.3 6.1 7.6 7.6l2-3 4 2v4c-1 .7-2.4 1.2-3.8 1.2C11 20 4 13 3.8 6.8 3.8 5.4 4.3 4 5 3z"/>202 </svg>203 <div class="field">Number</div>204 <div class="right-label">Mobile</div>205 </div>206 207 <div class="plus-box">208 <div class="plus"></div>209 </div>210 211 <!-- Email -->212 <div class="row email-row">213 <svg class="left-icon" viewBox="0 0 24 24">214 <rect x="2" y="5" width="20" height="14" rx="2" fill="#ffffff"></rect>215 <path d="M2 7l10 6 10-6" stroke="#9a3f39" stroke-width="1.5" fill="none"></path>216 </svg>217 <div class="field">Email</div>218 <div class="right-label">Home</div>219 </div>220 </div>221 222 <!-- Keyboard -->223 <div class="keyboard">224 <div class="suggest-bar">225 <div>Clara</div>226 <div class="pipe">|</div>227 <div>clarawagner98b</div>228 <div>@gmail.com</div>229 <div style="margin-left:auto; display:flex; align-items:center;">230 <!-- Mic icon -->231 <svg width="56" height="56" viewBox="0 0 24 24">232 <rect x="8" y="3" width="8" height="12" rx="4" fill="#cfd8dc"></rect>233 <path d="M5 12a7 7 0 0 0 14 0" stroke="#cfd8dc" stroke-width="2" fill="none"></path>234 <rect x="11" y="18" width="2" height="4" fill="#cfd8dc"></rect>235 <rect x="9" y="22" width="6" height="2" rx="1" fill="#cfd8dc"></rect>236 </svg>237 </div>238 </div>239 240 <div class="keys">241 <!-- Row 1 -->242 <div class="key-row">243 <div class="key">q</div><div class="key">w</div><div class="key">e</div><div class="key">r</div>244 <div class="key">t</div><div class="key">y</div><div class="key">u</div><div class="key">i</div>245 <div class="key">o</div><div class="key">p</div>246 </div>247 <!-- Row 2 -->248 <div class="key-row">249 <div class="key">a</div><div class="key">s</div><div class="key">d</div><div class="key">f</div>250 <div class="key">g</div><div class="key">h</div><div class="key">j</div><div class="key">k</div>251 <div class="key">l</div>252 </div>253 <!-- Row 3 -->254 <div class="key-row">255 <div class="key">z</div><div class="key">x</div><div class="key">c</div><div class="key">v</div>256 <div class="key">b</div><div class="key">n</div><div class="key">m</div>257 <div class="key-wider key">⌫</div>258 </div>259 <!-- Row 4 -->260 <div class="key-row bottom-bar">261 <div class="pill">?123</div>262 <div class="pill">,</div>263 <div class="key-space"></div>264 <div class="pill">.</div>265 <div class="key-enter">↵</div>266 </div>267 </div>268 </div>269 270</div>271</body>272</html>