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: "Roboto", Arial, Helvetica, sans-serif; }9 #render-target {10 position: relative;11 width: 1080px;12 height: 2400px;13 overflow: hidden;14 background: #0f1512; /* deep greenish-black */15 color: #e6efe6;16 }17 18 /* Status bar */19 .status-bar {20 position: absolute;21 top: 0;22 left: 0;23 width: 1080px;24 height: 90px;25 padding: 0 28px;26 box-sizing: border-box;27 display: flex;28 align-items: center;29 justify-content: space-between;30 color: #e6efe6;31 font-size: 36px;32 letter-spacing: 1px;33 }34 .sb-left { display: flex; align-items: center; gap: 18px; }35 .sb-right { display: flex; align-items: center; gap: 22px; }36 .icon-sb { width: 36px; height: 36px; opacity: .9; }37 38 /* App bar / header */39 .appbar {40 position: absolute;41 top: 90px;42 left: 0;43 width: 1080px;44 height: 220px;45 display: flex;46 align-items: center;47 padding: 0 32px;48 box-sizing: border-box;49 }50 .close-btn {51 width: 84px;52 height: 84px;53 display: flex;54 align-items: center;55 justify-content: center;56 margin-right: 8px;57 }58 .title {59 font-size: 68px;60 font-weight: 500;61 color: #eaf2ea;62 }63 .appbar-actions {64 margin-left: auto;65 display: flex;66 align-items: center;67 gap: 24px;68 }69 .btn-save {70 background: #f7b8bf;71 color: #1b1f1d;72 border-radius: 999px;73 padding: 22px 42px;74 font-size: 40px;75 font-weight: 600;76 box-shadow: 0 2px 0 rgba(0,0,0,.25) inset;77 }78 .kebab {79 width: 56px;80 height: 56px;81 display: flex;82 align-items: center;83 justify-content: center;84 }85 .add-pic-hint {86 position: absolute;87 top: 235px;88 left: 50%;89 transform: translateX(-50%);90 color: #f4b1ba;91 font-size: 34px;92 opacity: .8;93 }94 95 /* Form area */96 .form {97 position: absolute;98 top: 310px;99 left: 0;100 right: 0;101 padding: 10px 40px 0 40px;102 box-sizing: border-box;103 }104 .row {105 display: flex;106 align-items: flex-start;107 gap: 26px;108 margin: 28px 0;109 }110 .left-icon {111 width: 86px;112 height: 86px;113 display: flex;114 align-items: center;115 justify-content: center;116 opacity: .9;117 }118 119 .field {120 position: relative;121 flex: 1;122 min-height: 140px;123 border: 2px solid #6f7e74;124 border-radius: 18px;125 padding: 32px 108px 28px 28px;126 box-sizing: border-box;127 color: #e7efe6;128 font-size: 50px;129 line-height: 1.2;130 }131 .field .label {132 position: absolute;133 top: -20px;134 left: 22px;135 padding: 0 10px;136 background: #0f1512;137 color: #b6c2b8;138 font-size: 32px;139 letter-spacing: .2px;140 }141 .field .suffix {142 position: absolute;143 right: 20px;144 top: 50%;145 transform: translateY(-50%);146 opacity: .85;147 }148 .field.small {149 max-width: 520px;150 }151 .field.pink {152 border-color: #f3aab3;153 box-shadow: 0 0 0 2px rgba(243,170,179,.15) inset;154 }155 156 /* Keypad area */157 .keypad-wrap {158 position: absolute;159 left: 0;160 right: 0;161 bottom: 140px;162 padding: 20px 24px 0 24px;163 box-sizing: border-box;164 background: #0f1512;165 }166 .inline-phone {167 margin: 12px 16px 24px 16px;168 }169 .inline-phone .field { font-size: 52px; padding-top: 34px; }170 .caret {171 width: 3px; height: 60px; background: #f3aab3; display: inline-block; margin-left: 10px; vertical-align: -6px;172 }173 174 .keys-row {175 display: flex;176 gap: 24px;177 padding: 14px 6px;178 box-sizing: border-box;179 }180 .key {181 flex: 1;182 height: 160px;183 border-radius: 100px;184 background: #2a2f2c;185 display: flex;186 align-items: center;187 justify-content: center;188 color: #e7eee6;189 font-size: 58px;190 position: relative;191 }192 .key .sub {193 position: absolute;194 bottom: 26px;195 right: 38px;196 font-size: 26px;197 color: #b3beb5;198 letter-spacing: 1px;199 }200 .key.mint { background: #bff1ea; color: #17312b; }201 .key.pink { background: #ffd2d8; color: #1c1f1d; }202 .key.smalltxt { font-size: 56px; }203 204 /* Bottom affordances */205 .chev-down {206 position: absolute;207 bottom: 118px;208 left: 52px;209 width: 40px; height: 40px;210 opacity: .8;211 }212 .gesture-bar {213 position: absolute;214 bottom: 50px;215 left: 50%;216 transform: translateX(-50%);217 width: 360px;218 height: 10px;219 border-radius: 10px;220 background: #f1f1f1;221 opacity: .95;222 }223 224 /* helper */225 .x-clear { width: 44px; height: 44px; }226 .caret-down { width: 44px; height: 44px; }227</style>228</head>229<body>230<div id="render-target">231 232 <!-- Status bar -->233 <div class="status-bar">234 <div class="sb-left">235 <div>12:23</div>236 </div>237 <div class="sb-right">238 <!-- simple status icons -->239 <svg class="icon-sb" viewBox="0 0 24 24"><circle cx="12" cy="12" r="3" fill="#e6efe6"/></svg>240 <svg class="icon-sb" viewBox="0 0 24 24"><path d="M3 12h8" stroke="#e6efe6" stroke-width="2" stroke-linecap="round"/><path d="M3 6h12" stroke="#e6efe6" stroke-width="2" stroke-linecap="round"/><path d="M3 18h16" stroke="#e6efe6" stroke-width="2" stroke-linecap="round"/></svg>241 <svg class="icon-sb" viewBox="0 0 24 24"><path d="M3 5l18 0 0 14-18 0z" fill="none" stroke="#e6efe6" stroke-width="2"/><path d="M19 9l-6 6-4-4" fill="none" stroke="#e6efe6" stroke-width="2" stroke-linecap="round"/></svg>242 <div style="display:flex; align-items:center; gap:10px;">243 <svg class="icon-sb" viewBox="0 0 24 24">244 <rect x="2" y="7" width="18" height="10" rx="2" ry="2" fill="none" stroke="#e6efe6" stroke-width="2"/>245 <rect x="20" y="10" width="2" height="4" fill="#e6efe6"/>246 </svg>247 <div>100%</div>248 </div>249 </div>250 </div>251 252 <!-- App bar -->253 <div class="appbar">254 <div class="close-btn">255 <svg width="56" height="56" viewBox="0 0 24 24">256 <path d="M5 5l14 14M19 5L5 19" stroke="#e6efe6" stroke-width="2.2" stroke-linecap="round"/>257 </svg>258 </div>259 <div class="title">Create contact</div>260 <div class="appbar-actions">261 <div class="btn-save">Save</div>262 <div class="kebab">263 <svg width="36" height="36" viewBox="0 0 24 24">264 <circle cx="12" cy="5" r="2" fill="#e6efe6"/>265 <circle cx="12" cy="12" r="2" fill="#e6efe6"/>266 <circle cx="12" cy="19" r="2" fill="#e6efe6"/>267 </svg>268 </div>269 </div>270 <div class="add-pic-hint">Add picture</div>271 </div>272 273 <!-- Form -->274 <div class="form">275 276 <!-- First name -->277 <div class="row">278 <div class="left-icon">279 <svg width="56" height="56" viewBox="0 0 24 24">280 <circle cx="12" cy="8" r="4" fill="none" stroke="#cbd7ce" stroke-width="2"/>281 <path d="M4 20c2-4 14-4 16 0" fill="none" stroke="#cbd7ce" stroke-width="2" stroke-linecap="round"/>282 </svg>283 </div>284 <div class="field">285 <div class="label">First name</div>286 Rahul287 <div class="suffix">288 <svg class="caret-down" viewBox="0 0 24 24">289 <path d="M6 9l6 6 6-6" fill="none" stroke="#cbd7ce" stroke-width="2" stroke-linecap="round"/>290 </svg>291 </div>292 </div>293 </div>294 295 <!-- Last name -->296 <div class="row">297 <div class="left-icon" style="opacity:.0"></div>298 <div class="field">299 <div class="label">Last name</div>300 Sharma301 <div class="suffix">302 <svg class="x-clear" viewBox="0 0 24 24">303 <path d="M6 6l12 12M18 6L6 18" stroke="#cbd7ce" stroke-width="2" stroke-linecap="round"/>304 </svg>305 </div>306 </div>307 </div>308 309 <!-- Company -->310 <div class="row">311 <div class="left-icon">312 <svg width="56" height="56" viewBox="0 0 24 24">313 <rect x="3" y="7" width="8" height="12" fill="none" stroke="#cbd7ce" stroke-width="2"/>314 <rect x="13" y="11" width="8" height="8" fill="none" stroke="#cbd7ce" stroke-width="2"/>315 <path d="M6 10v2M6 14v2M16 13v2" stroke="#cbd7ce" stroke-width="2" stroke-linecap="round"/>316 </svg>317 </div>318 <div class="field">319 <div class="label">Company</div>320 Abcd321 <div class="suffix">322 <svg class="x-clear" viewBox="0 0 24 24">323 <path d="M6 6l12 12M18 6L6 18" stroke="#cbd7ce" stroke-width="2" stroke-linecap="round"/>324 </svg>325 </div>326 </div>327 </div>328 329 <!-- Phone -->330 <div class="row">331 <div class="left-icon">332 <svg width="56" height="56" viewBox="0 0 24 24">333 <path d="M6 4l3 3-2 2c1.5 3 3.5 5 6 6l2-2 3 3-1 2c-6 2-14-6-12-12z" fill="none" stroke="#cbd7ce" stroke-width="2" stroke-linejoin="round"/>334 </svg>335 </div>336 <div class="field">337 <div class="label">Phone</div>338 11 0022 3366339 <div class="suffix">340 <svg class="x-clear" viewBox="0 0 24 24">341 <path d="M6 6l12 12M18 6L6 18" stroke="#cbd7ce" stroke-width="2" stroke-linecap="round"/>342 </svg>343 </div>344 </div>345 </div>346 347 <!-- Label -->348 <div class="row">349 <div class="left-icon" style="opacity:.0"></div>350 <div class="field small">351 <div class="label">Label</div>352 Mobile353 <div class="suffix">354 <svg class="caret-down" viewBox="0 0 24 24">355 <path d="M6 9l6 6 6-6" fill="none" stroke="#cbd7ce" stroke-width="2" stroke-linecap="round"/>356 </svg>357 </div>358 </div>359 </div>360 </div>361 362 <!-- Keypad overlay -->363 <div class="keypad-wrap">364 <div class="inline-phone">365 <div class="field pink">366 <div class="label" style="color:#f3aab3">Phone</div>367 <span style="opacity:.6;">|</span><span class="caret"></span>368 </div>369 </div>370 371 <div class="keys-row">372 <div class="key">1</div>373 <div class="key">2<span class="sub">ABC</span></div>374 <div class="key">3<span class="sub">DEF</span></div>375 <div class="key smalltxt">—</div>376 </div>377 <div class="keys-row">378 <div class="key">4<span class="sub">GHI</span></div>379 <div class="key">5<span class="sub">JKL</span></div>380 <div class="key">6<span class="sub">MNO</span></div>381 <div class="key smalltxt">⌁</div>382 </div>383 <div class="keys-row">384 <div class="key">7<span class="sub">PQRS</span></div>385 <div class="key">8<span class="sub">TUV</span></div>386 <div class="key">9<span class="sub">WXYZ</span></div>387 <div class="key mint">388 <svg width="48" height="48" viewBox="0 0 24 24">389 <path d="M6 6l12 12M18 6L6 18" stroke="#1c2a27" stroke-width="2" stroke-linecap="round"/>390 </svg>391 </div>392 </div>393 <div class="keys-row">394 <div class="key smalltxt">*</div>395 <div class="key">0<span class="sub">+</span></div>396 <div class="key smalltxt">.</div>397 <div class="key pink">398 <svg width="58" height="58" viewBox="0 0 24 24">399 <path d="M4 12h12M12 6l6 6-6 6" fill="none" stroke="#1d2020" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"/>400 </svg>401 </div>402 </div>403 </div>404 405 <!-- Collapse chevron -->406 <svg class="chev-down" viewBox="0 0 24 24">407 <path d="M6 9l6 6 6-6" fill="none" stroke="#e6efe6" stroke-width="2" stroke-linecap="round"/>408 </svg>409 410 <!-- Gesture pill -->411 <div class="gesture-bar"></div>412 413</div>414</body>415</html>