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>Contact Edit Mock</title>7<style>8 body { margin:0; padding:0; background: transparent; font-family: Roboto, Arial, Helvetica, sans-serif; }9 #render-target {10 position: relative;11 overflow: hidden;12 width: 1080px;13 height: 2400px;14 background: #121212;15 color: #fff;16 }17 18 /* Header */19 .status-strip {20 height: 88px;21 background: linear-gradient(#0b2731, #0b2731 60%, rgba(0,0,0,0) 100%);22 padding: 0 24px;23 display: flex;24 align-items: center;25 justify-content: space-between;26 font-size: 36px;27 letter-spacing: 1px;28 opacity: 0.95;29 }30 .header {31 position: relative;32 height: 720px;33 background: #0e76a6;34 }35 .toolbar {36 position: absolute;37 top: 112px;38 left: 24px;39 right: 24px;40 height: 72px;41 display: flex;42 align-items: center;43 justify-content: space-between;44 }45 .toolbar .left, .toolbar .right { display: flex; align-items: center; gap: 36px; }46 .big-initial {47 position: absolute;48 top: 180px;49 left: 0;50 right: 0;51 text-align: center;52 font-size: 420px;53 font-weight: 500;54 color: #ffffff;55 opacity: 0.95;56 }57 .floating-star {58 position: absolute;59 bottom: 108px;60 left: 48px;61 }62 .floating-camera {63 position: absolute;64 bottom: 96px;65 right: 48px;66 }67 .icon-btn svg { width: 48px; height: 48px; fill: #ffffff; }68 69 /* Form */70 .form {71 background: #2a2a2a;72 padding: 24px 24px 0 24px;73 }74 .field {75 display: flex;76 align-items: center;77 gap: 24px;78 padding: 18px 6px 22px 6px;79 border-bottom: 3px solid #ff9800;80 margin: 10px 6px 20px 6px;81 color: #e6e6e6;82 }83 .field .ficon {84 width: 52px; height: 52px; border-radius: 26px;85 display: flex; align-items: center; justify-content: center;86 background: transparent;87 }88 .field .ficon svg { width: 44px; height: 44px; fill: #d7d7d7; opacity: .95; }89 .field .label {90 flex: 1;91 font-size: 44px;92 }93 .field .hint { color: #9e9e9e; }94 .field .affix { font-size: 40px; color: #dcdcdc; }95 96 .add-button {97 display: flex; justify-content: center; padding: 28px 0 18px;98 }99 .add-button .square {100 width: 140px; height: 100px; border-radius: 12px;101 border: 2px solid #6b6b6b; color: #ffab40;102 display: flex; align-items: center; justify-content: center;103 font-size: 64px; font-weight: 500;104 box-shadow: inset 0 0 0 1px rgba(255,255,255,0.05);105 }106 107 /* Suggestion bar above keyboard */108 .suggestions {109 background: #1b1f23;110 padding: 18px 24px;111 display: flex; align-items: center; gap: 18px;112 }113 .chip {114 background: #0f2a36;115 color: #cfe7ff;116 padding: 14px 22px;117 border-radius: 20px;118 font-size: 36px;119 display: inline-flex; align-items: center; gap: 14px;120 }121 .chip .avatar {122 width: 34px; height: 34px; border-radius: 50%;123 background: #1e6bb8;124 display: inline-block;125 }126 127 /* Keyboard */128 .keyboard {129 background: #12181c;130 padding: 18px 14px 16px;131 }132 .key-row {133 display: grid;134 grid-template-columns: repeat(10, 1fr);135 gap: 12px;136 margin-bottom: 14px;137 }138 .key {139 background: #2b3a40;140 color: #e7eef2;141 height: 120px;142 border-radius: 16px;143 display: flex; align-items: center; justify-content: center;144 font-size: 44px;145 }146 .wide-1 { grid-column: span 1.5; }147 .wide-2 { grid-column: span 2; }148 .wide-3 { grid-column: span 3; }149 .space-row {150 display: grid;151 grid-template-columns: 1.3fr 0.9fr 4fr 0.9fr 1.3fr;152 gap: 12px;153 }154 .pill {155 position: absolute;156 left: 50%;157 transform: translateX(-50%);158 bottom: 18px;159 width: 300px;160 height: 12px;161 border-radius: 6px;162 background: rgba(255,255,255,0.85);163 }164</style>165</head>166<body>167<div id="render-target">168 169 <div class="status-strip">170 <div>2:54</div>171 <div>⌁ ● 100%</div>172 </div>173 174 <div class="header">175 <div class="toolbar">176 <div class="left">177 <div class="icon-btn">178 <svg viewBox="0 0 24 24"><path d="M15.4 4.6 14 3.2 5.2 12l8.8 8.8 1.4-1.4L8 12z"/></svg>179 </div>180 </div>181 <div class="right">182 <div class="icon-btn">183 <svg viewBox="0 0 24 24"><path d="M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z"/></svg>184 </div>185 <div class="icon-btn">186 <svg viewBox="0 0 24 24"><path d="M18 16.08c-.76 0-1.44.3-1.96.77L8.91 12.7c.05-.23.09-.46.09-.7s-.04-.47-.09-.7l7.02-4.11A2.99 2.99 0 0 0 21 3a3 3 0 1 0-3 3c.36 0 .69-.07 1-.18l-7.02 4.11a3 3 0 0 0-3.96 2.77c0 1.31.84 2.42 2.02 2.82l7.01 4.11c-.22.31-.35.69-.35 1.1a3 3 0 1 0 3-3z"/></svg>187 </div>188 <div class="icon-btn">189 <svg viewBox="0 0 24 24"><path d="M12 8a2 2 0 1 0 0-4 2 2 0 0 0 0 4zm0 6a2 2 0 1 0 .001-3.999A2 2 0 0 0 12 14zm0 6a2 2 0 1 0 .001-3.999A2 2 0 0 0 12 20z"/></svg>190 </div>191 </div>192 </div>193 194 <div class="big-initial">C</div>195 196 <div class="floating-star icon-btn">197 <svg viewBox="0 0 24 24"><path d="M12 17.3 6.2 21l1.6-6.8L2 9.3l7-.6L12 2l3 6.7 7 .6-5.8 4.9L17.8 21z" fill="none" stroke="#fff" stroke-width="1.8"/></svg>198 </div>199 <div class="floating-camera icon-btn">200 <svg viewBox="0 0 24 24"><path d="M7 7h2l1.2-2h3.6L15 7h2a3 3 0 0 1 3 3v6a3 3 0 0 1-3 3H7a3 3 0 0 1-3-3v-6a3 3 0 0 1 3-3zm5 3.5a3.5 3.5 0 1 0 0 7 3.5 3.5 0 0 0 0-7z" fill="#fff"/></svg>201 </div>202 </div>203 204 <div class="form">205 <div class="field">206 <div class="ficon">207 <svg viewBox="0 0 24 24"><path d="M12 12a4 4 0 1 0-4-4 4 4 0 0 0 4 4zm0 2c-4.4 0-8 2.2-8 5v1h16v-1c0-2.8-3.6-5-8-5z"/></svg>208 </div>209 <div class="label">Clara</div>210 </div>211 212 <div class="field">213 <div class="ficon">214 <svg viewBox="0 0 24 24"><path d="M12 12a4 4 0 1 0-4-4 4 4 0 0 0 4 4z" opacity=".7"/></svg>215 </div>216 <div class="label hint">Surname</div>217 </div>218 219 <div class="field">220 <div class="ficon">221 <svg viewBox="0 0 24 24"><path d="M6.6 10.8c1.3 2.5 3.1 4.3 5.6 5.6l1.9-1.9c.3-.3.8-.4 1.2-.2 1 .4 2 .6 3.1.6.6 0 1 .4 1 1V20c0 .6-.4 1-1 1C9.7 21 3 14.3 3 6c0-.6.4-1 1-1h3.2c.6 0 1 .4 1 1 0 1.1.2 2.1.6 3.1.2.4.1.9-.2 1.2z"/></svg>222 </div>223 <div class="label">2111112222</div>224 <div class="affix">Mobile</div>225 </div>226 227 <div class="add-button">228 <div class="square">+</div>229 </div>230 231 <div class="field">232 <div class="ficon">233 <svg viewBox="0 0 24 24"><path d="M20 4H4a2 2 0 0 0-2 2v.5l10 6 10-6V6a2 2 0 0 0-2-2zm0 5.3-8 4.8-8-4.8V18a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2z"/></svg>234 </div>235 <div class="label hint">Email</div>236 <div class="affix">Home</div>237 </div>238 </div>239 240 <div class="suggestions">241 <div class="chip"><span class="avatar"></span>Richard Wagner</div>242 </div>243 244 <div class="keyboard">245 <div class="key-row">246 <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>247 <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>248 </div>249 <div class="key-row">250 <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>251 <div class="key">H</div><div class="key">J</div><div class="key">K</div><div class="key">L</div><div class="key wide-1">⌫</div>252 </div>253 <div class="key-row">254 <div class="key wide-1">⇧</div>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">.</div><div class="key wide-1">↵</div>258 </div>259 <div class="space-row">260 <div class="key">?123</div>261 <div class="key">,</div>262 <div class="key">SPACE</div>263 <div class="key">🙂</div>264 <div class="key">→</div>265 </div>266 </div>267 268 <div class="pill"></div>269</div>270</body>271</html>