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>Create contact - Mock</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }9 #render-target {10 position: relative;11 width: 1080px;12 height: 2400px;13 overflow: hidden;14 background: #0f1713; /* deep greenish black */15 border-radius: 28px;16 color: #EDEDED;17 }18 19 /* Status bar */20 .status-bar {21 position: absolute;22 top: 0;23 left: 0;24 width: 1080px;25 height: 110px;26 padding: 0 28px;27 box-sizing: border-box;28 color: #EDEDED;29 display: flex;30 align-items: center;31 justify-content: space-between;32 font-weight: 600;33 letter-spacing: .5px;34 }35 .status-right {36 display: flex;37 align-items: center;38 gap: 18px;39 font-size: 28px;40 }41 .sb-icon {42 width: 34px; height: 34px; opacity: .9;43 border-radius: 6px;44 }45 .battery {46 display: inline-flex; align-items: center; gap: 8px; font-size: 28px;47 }48 49 /* App bar */50 .app-bar {51 position: absolute;52 top: 110px;53 left: 0;54 width: 1080px;55 height: 150px;56 padding: 0 28px;57 box-sizing: border-box;58 display: flex;59 align-items: center;60 gap: 24px;61 }62 .app-title {63 font-size: 52px;64 font-weight: 700;65 color: #EAEAEA;66 }67 .save-btn {68 margin-left: auto;69 background: #f5b2b8;70 color: #1d1d1d;71 padding: 22px 46px;72 border-radius: 40px;73 font-size: 40px;74 font-weight: 700;75 }76 .kebab {77 width: 58px; height: 58px; margin-left: 16px;78 }79 .icon-btn {80 width: 70px; height: 70px; display: inline-flex; align-items: center; justify-content: center;81 }82 83 /* Avatar / add picture */84 .avatar-wrap {85 position: absolute;86 top: 320px;87 left: 0; right: 0;88 display: flex;89 flex-direction: column;90 align-items: center;91 gap: 24px;92 }93 .avatar {94 width: 300px; height: 300px; border-radius: 50%;95 background: #234332;96 display: flex; align-items: center; justify-content: center;97 }98 .add-picture {99 color: #f5b2b8;100 font-size: 36px;101 font-weight: 600;102 }103 104 /* Form area */105 .form {106 position: absolute;107 top: 760px;108 left: 56px;109 right: 56px;110 }111 .row {112 position: relative;113 display: flex;114 align-items: flex-start;115 gap: 26px;116 margin-bottom: 40px;117 }118 .left-col {119 width: 70px; height: 120px; display: flex; align-items: center; justify-content: center; margin-top: 40px; opacity: .8;120 }121 .field {122 flex: 1;123 border: 3px solid #5e7267;124 border-radius: 22px;125 padding: 40px 32px 36px 32px;126 min-height: 170px;127 position: relative;128 color: #EDEDED;129 }130 .field.focused {131 border-color: #f1a1ae;132 }133 .label {134 position: absolute;135 top: -18px;136 left: 20px;137 padding: 0 10px;138 font-size: 28px;139 color: #a6b6ad;140 background: #0f1713;141 }142 .label.pink { color: #f1a1ae; }143 .value {144 font-size: 52px;145 font-weight: 600;146 margin-top: 8px;147 }148 .trailing {149 position: absolute;150 right: 22px;151 top: 60px;152 width: 40px; height: 40px; opacity: .8;153 }154 155 /* Keyboard mock */156 .keyboard {157 position: absolute;158 left: 0;159 bottom: 70px;160 width: 1080px;161 height: 920px;162 background: #111b16;163 border-top-left-radius: 26px;164 border-top-right-radius: 26px;165 box-shadow: 0 -6px 20px rgba(0,0,0,.35) inset;166 padding: 22px 22px 16px 22px;167 box-sizing: border-box;168 }169 .kb-toolrow {170 display: flex; align-items: center; gap: 30px;171 padding: 12px 12px 24px 12px; color: #cbd6d0;172 }173 .tool {174 width: 84px; height: 84px; border-radius: 20px;175 background: #18231e; display: flex; align-items: center; justify-content: center;176 border: 1px solid #26352d; font-weight: 700;177 }178 .keys {179 margin-top: 8px;180 display: grid;181 grid-template-columns: repeat(10, 1fr);182 grid-row-gap: 16px;183 grid-column-gap: 12px;184 padding: 0 10px;185 }186 .key {187 background: #1a2620;188 border: 1px solid #2a3b32;189 color: #e8efe9;190 height: 120px;191 border-radius: 18px;192 display: flex; align-items: center; justify-content: center;193 font-size: 38px; font-weight: 700;194 }195 .row2 { margin-top: 12px; }196 .row3 { margin-top: 12px; }197 .space-row {198 display: grid;199 grid-template-columns: 170px 90px 1fr 90px 120px 140px;200 grid-column-gap: 12px;201 margin-top: 16px;202 padding: 0 10px;203 }204 .pill-send {205 width: 120px; height: 120px; border-radius: 60px;206 background: #f5b2b8; color: #1b1b1b; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 40px;207 }208 209 /* Gesture bar */210 .gesture {211 position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%);212 width: 260px; height: 10px; border-radius: 8px; background: #cbd6d0; opacity: .55;213 }214</style>215</head>216<body>217<div id="render-target">218 219 <!-- Status bar -->220 <div class="status-bar">221 <div class="status-left" style="font-size:38px;">12:20</div>222 <div class="status-right">223 <span class="sb-icon">📧</span>224 <span class="sb-icon">🔒</span>225 <span class="sb-icon">▶️</span>226 <span class="sb-icon">⬛</span>227 <span class="sb-icon">📶</span>228 <div class="battery">229 <svg width="42" height="26" viewBox="0 0 42 26" xmlns="http://www.w3.org/2000/svg">230 <rect x="1" y="3" width="36" height="20" rx="4" stroke="#EDEDED" fill="none" stroke-width="2"/>231 <rect x="4" y="6" width="30" height="14" rx="3" fill="#EDEDED"/>232 <rect x="37" y="8" width="4" height="10" rx="2" fill="#EDEDED"/>233 </svg>234 100%235 </div>236 </div>237 </div>238 239 <!-- App bar -->240 <div class="app-bar">241 <div class="icon-btn" aria-label="close">242 <svg width="56" height="56" viewBox="0 0 24 24" fill="none">243 <path d="M6 6l12 12M18 6L6 18" stroke="#EDEDED" stroke-width="2" stroke-linecap="round"/>244 </svg>245 </div>246 <div class="app-title">Create contact</div>247 <div class="save-btn">Save</div>248 <div class="kebab">249 <svg width="58" height="58" viewBox="0 0 24 24" fill="#EDEDED">250 <circle cx="12" cy="5" r="2.2"/>251 <circle cx="12" cy="12" r="2.2"/>252 <circle cx="12" cy="19" r="2.2"/>253 </svg>254 </div>255 </div>256 257 <!-- Add picture -->258 <div class="avatar-wrap">259 <div class="avatar">260 <svg width="130" height="130" viewBox="0 0 24 24" fill="none">261 <rect x="3" y="6" width="14" height="12" rx="2" stroke="#cfe3d8" stroke-width="1.8"/>262 <path d="M6 15l3-3 3 3 2-2 3 3" stroke="#cfe3d8" stroke-width="1.8" fill="none" stroke-linecap="round" stroke-linejoin="round"/>263 <circle cx="16.5" cy="7.5" r="1.6" fill="#cfe3d8"/>264 <path d="M20 4v3M18.5 5.5H21.5" stroke="#cfe3d8" stroke-width="1.8" stroke-linecap="round"/>265 </svg>266 </div>267 <div class="add-picture">Add picture</div>268 </div>269 270 <!-- Form fields -->271 <div class="form">272 <!-- First name -->273 <div class="row">274 <div class="left-col">275 <svg width="44" height="44" viewBox="0 0 24 24" fill="none">276 <circle cx="12" cy="7" r="3.5" stroke="#b5c4bc" stroke-width="1.8"/>277 <path d="M4 20c1.8-4 13.2-4 16 0" stroke="#b5c4bc" stroke-width="1.8" stroke-linecap="round"/>278 </svg>279 </div>280 <div class="field">281 <div class="label">First name</div>282 <div class="value">Rahul</div>283 <div class="trailing">284 <svg width="40" height="40" viewBox="0 0 24 24" fill="none">285 <path d="M6 9l6 6 6-6" stroke="#b5c4bc" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>286 </svg>287 </div>288 </div>289 </div>290 291 <!-- Last name -->292 <div class="row">293 <div class="left-col"></div>294 <div class="field">295 <div class="label">Last name</div>296 <div class="value">Sharma</div>297 </div>298 </div>299 300 <!-- Company -->301 <div class="row">302 <div class="left-col">303 <svg width="44" height="44" viewBox="0 0 24 24" fill="none">304 <rect x="4" y="5" width="16" height="14" rx="2" stroke="#b5c4bc" stroke-width="1.8"/>305 <path d="M8 9h3M8 12h3M8 15h3M14 9h3M14 12h3M14 15h3" stroke="#b5c4bc" stroke-width="1.6" stroke-linecap="round"/>306 </svg>307 </div>308 <div class="field focused">309 <div class="label pink">Company</div>310 <div class="value" style="color:#91a199; opacity:.5"> </div>311 </div>312 </div>313 </div>314 315 <!-- Keyboard -->316 <div class="keyboard">317 <div class="kb-toolrow">318 <div class="tool">⬛⬛</div>319 <div class="tool">🙂</div>320 <div class="tool">GIF</div>321 <div class="tool">⚙️</div>322 <div class="tool">Gx</div>323 <div class="tool">🎨</div>324 <div class="tool" style="margin-left:auto;">🎤</div>325 </div>326 327 <!-- QWERTY rows -->328 <div class="keys">329 <!-- Row 1 -->330 <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>331 <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>332 <!-- Row 2 -->333 <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>334 <div class="key">H</div><div class="key">J</div><div class="key">K</div><div class="key">L</div><div class="key">⌫</div>335 <!-- Row 3 -->336 <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>337 <div class="key">N</div><div class="key">M</div><div class="key">,</div><div class="key">.</div><div class="key">↵</div>338 </div>339 340 <!-- Space row -->341 <div class="space-row">342 <div class="key">?123</div>343 <div class="key">⇧</div>344 <div class="key" style="text-align:center;">🙂</div>345 <div class="key">,</div>346 <div class="key">.</div>347 <div class="pill-send">→</div>348 </div>349 </div>350 351 <div class="gesture"></div>352</div>353</body>354</html>