GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<meta name="viewport" content="width=1080, initial-scale=1.0">6<title>Contacts Edit Mock</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: Roboto, Arial, sans-serif; }9 #render-target {10 width: 1080px;11 height: 2400px;12 position: relative;13 overflow: hidden;14 background: #3e4143;15 color: #fff;16 }17 18 /* Status bar */19 .statusbar {20 position: absolute;21 top: 0; left: 0; right: 0;22 height: 120px;23 background: linear-gradient(180deg, #1a0f0f 0%, rgba(26,15,15,0) 100%);24 display: flex;25 align-items: center;26 justify-content: space-between;27 padding: 0 34px;28 font-size: 40px;29 letter-spacing: 1px;30 z-index: 5;31 }32 .status-icons { display: flex; gap: 26px; align-items: center; }33 .status-dot { width: 12px; height: 12px; background:#fff; border-radius: 50%; opacity: .9; }34 35 /* Red header with big initial */36 .header {37 position: absolute;38 top: 0; left: 0; right: 0;39 height: 820px;40 background: linear-gradient(180deg, #4b1616 0%, #b43b36 25%, #b43b36 100%);41 }42 .header .big-initial {43 position: absolute;44 top: 210px; left: 0; right: 0;45 text-align: center;46 font-size: 420px;47 font-weight: 500;48 color: #ffffff;49 opacity: 0.95;50 }51 .top-actions, .bottom-actions {52 position: absolute; left: 0; right: 0;53 display: flex; justify-content: space-between; align-items: center;54 padding: 36px 40px;55 }56 .top-actions { top: 120px; }57 .bottom-actions { bottom: 40px; padding-left: 44px; padding-right: 44px; }58 .icon-btn { width: 72px; height: 72px; display: flex; align-items: center; justify-content: center; }59 .checkmark {60 width: 72px; height: 72px; border-radius: 50%;61 display: flex; align-items:center; justify-content:center;62 }63 .divider {64 position: absolute; left: 0; right: 0; top: 820px; height: 8px; background: #343739;65 }66 67 /* Form area */68 .form {69 position: absolute;70 top: 828px; left: 0; right: 0;71 background: #3e4143;72 padding: 38px 64px 0 64px;73 }74 .field {75 display: flex; align-items: center;76 padding: 32px 0 22px 0;77 position: relative;78 }79 .field + .field { margin-top: 16px; }80 .field .left-ico {81 width: 70px; height: 70px; margin-right: 28px; opacity: .95;82 display: flex; align-items: center; justify-content: center;83 }84 .field .label {85 font-size: 44px; color: #cfcfcf; opacity: .9;86 }87 .field .value {88 font-size: 48px; color: #ffffff;89 }90 .field .trailing {91 margin-left: auto; font-size: 44px; color: #bebebe; opacity: .9;92 }93 .underline {94 position: absolute; left: 98px; right: 0; bottom: 0; height: 4px; background: #ff9800;95 }96 97 .add-btn-wrap {98 display: flex; justify-content: center; margin: 44px 0 22px 0;99 }100 .add-btn {101 width: 148px; height: 96px; border-radius: 14px;102 background: #575a5c; border: 2px solid #7a7d80;103 display: flex; align-items: center; justify-content: center;104 box-shadow: 0 2px 0 rgba(255,255,255,0.15) inset;105 }106 .add-btn span { color: #ff9800; font-size: 72px; line-height: 1; }107 108 /* Keyboard */109 .keyboard {110 position: absolute;111 left: 0; right: 0; bottom: 0;112 height: 820px;113 background: #151515;114 border-top: 1px solid #2a2a2a;115 color: #e6dac9;116 }117 .kb-suggestions {118 height: 120px; display:flex; align-items:center; gap: 36px;119 padding: 0 28px; background:#1c1c1c; color:#e6dac9; font-size: 44px;120 }121 .chip {122 padding: 8px 24px; background:#262626; border-radius: 20px; border:1px solid #3a3a3a;123 }124 .kb-rows { padding: 28px 24px; }125 .key-row { display:flex; justify-content:center; gap: 18px; margin-bottom: 22px; }126 .key {127 width: 84px; height: 106px; background:#2b2b2b; border-radius: 16px;128 display:flex; align-items:center; justify-content:center;129 font-size: 42px; color:#e6dac9; border:1px solid #3a3a3a;130 }131 .key.wide { width: 160px; }132 .key.space { width: 560px; }133 .home-indicator {134 position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%);135 width: 360px; height: 10px; background:#e6e6e6; border-radius: 6px; opacity: .75;136 }137</style>138</head>139<body>140<div id="render-target">141 <!-- Status bar -->142 <div class="statusbar">143 <div style="opacity:.95;">12:46</div>144 <div class="status-icons">145 <div class="status-dot"></div>146 <div class="status-dot"></div>147 <div class="status-dot"></div>148 <!-- WiFi -->149 <svg width="44" height="44" viewBox="0 0 24 24" fill="none">150 <path d="M2 8c5-4 15-4 20 0" stroke="#fff" stroke-width="2" stroke-linecap="round"/>151 <path d="M5 11c3-3 11-3 14 0" stroke="#fff" stroke-width="2" stroke-linecap="round"/>152 <path d="M8 14c2-2 6-2 8 0" stroke="#fff" stroke-width="2" stroke-linecap="round"/>153 <circle cx="12" cy="18" r="1.6" fill="#fff"/>154 </svg>155 <!-- Battery -->156 <svg width="54" height="44" viewBox="0 0 28 18" fill="none">157 <rect x="1" y="3" width="22" height="12" rx="2" stroke="#fff" stroke-width="2"/>158 <rect x="3" y="5" width="14" height="8" fill="#fff"/>159 <rect x="24" y="7" width="3" height="4" rx="1" fill="#fff"/>160 </svg>161 </div>162 </div>163 164 <!-- Red header -->165 <div class="header">166 <div class="top-actions">167 <div class="icon-btn">168 <!-- back arrow -->169 <svg width="72" height="72" viewBox="0 0 48 48" fill="none">170 <path d="M28 10 L12 24 L28 38" stroke="#fff" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>171 </svg>172 </div>173 <div class="checkmark">174 <!-- check -->175 <svg width="72" height="72" viewBox="0 0 48 48" fill="none">176 <path d="M10 26 l8 8 20-20" stroke="#ffffff" stroke-width="5" stroke-linecap="round" stroke-linejoin="round"/>177 </svg>178 </div>179 </div>180 181 <div class="big-initial">A</div>182 183 <div class="bottom-actions">184 <div class="icon-btn">185 <!-- star outline -->186 <svg width="80" height="80" viewBox="0 0 48 48" fill="none">187 <path d="M24 6l6 12 13 2-9 9 2 13-12-6-12 6 2-13-9-9 13-2 6-12z"188 stroke="#fff" stroke-width="3" fill="none" stroke-linejoin="round"/>189 </svg>190 </div>191 <div class="icon-btn">192 <!-- camera -->193 <svg width="84" height="84" viewBox="0 0 48 48" fill="none">194 <rect x="6" y="12" width="36" height="26" rx="4" stroke="#fff" stroke-width="3"/>195 <rect x="16" y="6" width="10" height="8" rx="2" fill="#fff"/>196 <circle cx="24" cy="25" r="7" stroke="#fff" stroke-width="3"/>197 </svg>198 </div>199 </div>200 </div>201 <div class="divider"></div>202 203 <!-- Form -->204 <div class="form">205 <!-- Name -->206 <div class="field">207 <div class="left-ico">208 <!-- person -->209 <svg width="56" height="56" viewBox="0 0 48 48" fill="none">210 <circle cx="24" cy="16" r="8" stroke="#fff" stroke-width="3"/>211 <path d="M8 40c4-8 28-8 32 0" stroke="#fff" stroke-width="3" stroke-linecap="round"/>212 </svg>213 </div>214 <div class="value">Max</div>215 <div class="underline"></div>216 </div>217 218 <!-- Surname -->219 <div class="field">220 <div class="left-ico">221 <!-- person -->222 <svg width="56" height="56" viewBox="0 0 48 48" fill="none">223 <circle cx="24" cy="16" r="8" stroke="#fff" stroke-width="3" opacity=".8"/>224 <path d="M8 40c4-8 28-8 32 0" stroke="#fff" stroke-width="3" stroke-linecap="round" opacity=".8"/>225 </svg>226 </div>227 <div class="label">Surname</div>228 <div class="underline"></div>229 </div>230 231 <!-- Number -->232 <div class="field">233 <div class="left-ico">234 <!-- phone -->235 <svg width="56" height="56" viewBox="0 0 48 48" fill="none">236 <path d="M15 6l6 6-4 4c3 6 8 11 14 14l4-4 6 6-5 5c-2 2-6 2-10 0-8-4-16-12-20-20-2-4-2-8 0-10l5-5z"237 stroke="#fff" stroke-width="3" fill="none"/>238 </svg>239 </div>240 <div class="label">Number</div>241 <div class="trailing">Mobile</div>242 <div class="underline"></div>243 </div>244 245 <div class="add-btn-wrap">246 <div class="add-btn"><span>+</span></div>247 </div>248 249 <!-- Email -->250 <div class="field" style="margin-bottom: 20px;">251 <div class="left-ico">252 <!-- mail -->253 <svg width="64" height="64" viewBox="0 0 48 48" fill="none">254 <rect x="6" y="10" width="36" height="28" rx="3" stroke="#fff" stroke-width="3"/>255 <path d="M8 12l16 12L40 12" stroke="#fff" stroke-width="3" fill="none"/>256 </svg>257 </div>258 <div class="label">Email</div>259 <div class="trailing">Home</div>260 <div class="underline"></div>261 </div>262 </div>263 264 <!-- Keyboard -->265 <div class="keyboard">266 <div class="kb-suggestions">267 <div class="chip">Max</div>268 <div class="chip">Maxi</div>269 <div class="chip">Mac</div>270 </div>271 <div class="kb-rows">272 <div class="key-row">273 <div class="key">q</div><div class="key">w</div><div class="key">e</div><div class="key">r</div><div class="key">t</div><div class="key">y</div><div class="key">u</div><div class="key">i</div><div class="key">o</div><div class="key">p</div>274 </div>275 <div class="key-row" style="padding-left:40px">276 <div class="key">a</div><div class="key">s</div><div class="key">d</div><div class="key">f</div><div class="key">g</div><div class="key">h</div><div class="key">j</div><div class="key">k</div><div class="key">l</div>277 </div>278 <div class="key-row" style="padding-left:100px">279 <div class="key wide">⇧</div><div class="key">z</div><div class="key">x</div><div class="key">c</div><div class="key">v</div><div class="key">b</div><div class="key">n</div><div class="key">m</div><div class="key wide">⌫</div>280 </div>281 <div class="key-row">282 <div class="key wide">?123</div>283 <div class="key">,</div>284 <div class="key space"></div>285 <div class="key">.</div>286 <div class="key wide">↵</div>287 </div>288 </div>289 <div class="home-indicator"></div>290 </div>291</div>292</body>293</html>