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 - UI Mock</title>7<style>8 body { margin: 0; padding: 0; background: transparent; }9 #render-target {10 position: relative;11 width: 1080px;12 height: 2400px;13 overflow: hidden;14 background: #0F1714; /* deep dark green-black */15 color: #E8EAE9;16 font-family: Roboto, Arial, Helvetica, sans-serif;17 }18 19 /* Status bar */20 .status-bar {21 position: absolute;22 top: 0;23 left: 0;24 width: 1080px;25 height: 100px;26 padding: 0 40px;27 display: flex;28 align-items: center;29 justify-content: space-between;30 color: #FFFFFF;31 font-size: 40px;32 letter-spacing: 0.5px;33 }34 .status-right {35 display: flex;36 align-items: center;37 gap: 28px;38 font-size: 34px;39 }40 .icon {41 width: 48px;42 height: 48px;43 display: inline-flex;44 align-items: center;45 justify-content: center;46 }47 .icon svg { fill: none; stroke: #FFFFFF; stroke-width: 4; }48 49 /* Header */50 .header {51 position: absolute;52 top: 100px;53 left: 0;54 width: 1080px;55 height: 160px;56 display: flex;57 align-items: center;58 padding: 0 36px;59 gap: 24px;60 }61 .header-title {62 font-size: 64px;63 font-weight: 500;64 color: #EDEFEF;65 flex: 1;66 }67 .header .action {68 display: flex;69 align-items: center;70 gap: 24px;71 }72 .save-btn {73 background: #F6B9C0;74 color: #11201A;75 font-size: 44px;76 font-weight: 600;77 padding: 26px 56px;78 border-radius: 44px;79 box-shadow: 0 4px 0 rgba(0,0,0,0.15) inset;80 }81 .round-icon {82 width: 64px;83 height: 64px;84 display: inline-flex;85 align-items: center;86 justify-content: center;87 border-radius: 32px;88 }89 90 /* Save-to row */91 .account-row {92 position: absolute;93 top: 248px;94 left: 36px;95 width: 1008px;96 height: 110px;97 background: #27322C;98 border-radius: 16px;99 padding: 14px;100 display: flex;101 align-items: center;102 gap: 20px;103 color: #D1D6D4;104 box-shadow: inset 0 0 0 2px #3A4840;105 }106 .account-row .label {107 margin-left: 8px;108 margin-right: 10px;109 color: #B7BEBA;110 font-size: 36px;111 }112 .account-chip {113 display: inline-flex;114 align-items: center;115 gap: 18px;116 padding: 14px 22px 14px 14px;117 border-radius: 30px;118 background: #1D2722;119 box-shadow: inset 0 0 0 2px #445149;120 color: #E3E6E5;121 font-size: 36px;122 }123 .account-avatar {124 width: 56px;125 height: 56px;126 border-radius: 28px;127 background: #5971D6;128 color: #ffffff;129 display: flex;130 align-items: center;131 justify-content: center;132 font-weight: 700;133 }134 .chev {135 margin-left: auto;136 width: 44px;137 height: 44px;138 }139 .chev svg { stroke: #C8CECB; stroke-width: 6; }140 141 /* Add picture area */142 .picture-area {143 position: absolute;144 top: 420px;145 left: 50%;146 transform: translateX(-50%);147 width: 300px;148 height: 300px;149 border-radius: 150px;150 background: #E0E0E0; /* image placeholder requirement */151 border: 1px solid #BDBDBD;152 display: flex;153 align-items: center;154 justify-content: center;155 color: #757575;156 font-size: 32px;157 text-align: center;158 }159 .add-picture-text {160 position: absolute;161 top: 740px;162 left: 50%;163 transform: translateX(-50%);164 color: #F6B9C0;165 font-size: 40px;166 }167 168 /* Fields */169 .form-area {170 position: absolute;171 left: 36px;172 right: 36px;173 top: 840px;174 }175 .field {176 position: relative;177 width: 1008px;178 height: 140px;179 border-radius: 18px;180 background: #15211B;181 display: flex;182 align-items: center;183 padding-left: 110px;184 color: #E6EAE8;185 margin-bottom: 28px;186 box-shadow: inset 0 0 0 2px #8C9A91;187 }188 .field.focus {189 box-shadow: inset 0 0 0 4px #F6B9C0;190 }191 .field .label {192 position: absolute;193 top: -28px;194 left: 110px;195 font-size: 34px;196 color: #F6B9C0;197 }198 .field .label.gray { color: #C6CCC9; }199 .field input {200 width: 820px;201 font-size: 48px;202 border: none;203 outline: none;204 color: #EDEFEF;205 background: transparent;206 }207 .field .left-icon {208 position: absolute;209 left: 24px;210 width: 64px;211 height: 64px;212 display: flex;213 align-items: center;214 justify-content: center;215 }216 .field .left-icon svg { stroke: #C6CCC9; stroke-width: 4; }217 .field .dropdown {218 position: absolute;219 right: 20px;220 width: 64px;221 height: 64px;222 display: flex;223 align-items: center;224 justify-content: center;225 }226 .field .dropdown svg { stroke: #C6CCC9; stroke-width: 6; }227 228 /* Keyboard mock */229 .keyboard {230 position: absolute;231 left: 0;232 width: 1080px;233 height: 920px;234 bottom: 120px;235 background: #0D1512;236 box-shadow: 0 -8px 24px rgba(0,0,0,0.4);237 border-top: 1px solid #1E2A24;238 }239 .kb-toolbar {240 height: 120px;241 display: flex;242 align-items: center;243 gap: 40px;244 padding: 0 30px;245 color: #D3D7D5;246 }247 .kb-tool {248 height: 72px;249 min-width: 72px;250 padding: 0 18px;251 border-radius: 36px;252 background: #1A2520;253 display: flex;254 align-items: center;255 justify-content: center;256 font-size: 32px;257 box-shadow: inset 0 0 0 2px #2B362F;258 }259 .kb-rows {260 padding: 16px 22px 0 22px;261 }262 .kb-row {263 display: flex;264 gap: 18px;265 margin-bottom: 18px;266 justify-content: center;267 }268 .key {269 background: #1A2520;270 color: #E7EBE9;271 font-size: 42px;272 height: 120px;273 min-width: 86px;274 border-radius: 18px;275 display: flex;276 align-items: center;277 justify-content: center;278 box-shadow: inset 0 0 0 2px #2B362F;279 }280 .key.wide { min-width: 160px; }281 .key.space { min-width: 520px; }282 .key.circle {283 height: 120px;284 width: 120px;285 border-radius: 60px;286 }287 .key.green { background: #99B6A6; color: #0F1714; box-shadow: none; }288 .key.pink { background: #F6B9C0; color: #0F1714; box-shadow: none; }289 290 /* Home indicator */291 .home-indicator {292 position: absolute;293 bottom: 32px;294 left: 50%;295 transform: translateX(-50%);296 width: 320px;297 height: 10px;298 border-radius: 6px;299 background: #DADADA;300 opacity: 0.7;301 }302</style>303</head>304<body>305<div id="render-target">306 307 <!-- Status bar -->308 <div class="status-bar">309 <div class="status-left">12:17</div>310 <div class="status-right">311 <div class="icon" title="Wi‑Fi">312 <svg viewBox="0 0 24 24">313 <path d="M2 8c5-4 15-4 20 0"/>314 <path d="M6 12c3-3 9-3 12 0"/>315 <path d="M10 16c2-2 4-2 6 0"/>316 <circle cx="12" cy="20" r="2" fill="#FFFFFF" stroke="none"></circle>317 </svg>318 </div>319 <div style="font-size:34px;">100%</div>320 <div class="icon" title="Battery">321 <svg viewBox="0 0 26 24">322 <rect x="1" y="6" width="20" height="12" rx="2" ry="2" stroke="#FFFFFF"></rect>323 <rect x="4" y="9" width="14" height="6" fill="#FFFFFF" stroke="none"></rect>324 <rect x="22" y="9" width="3" height="6" rx="1" ry="1" stroke="#FFFFFF"></rect>325 </svg>326 </div>327 </div>328 </div>329 330 <!-- Header -->331 <div class="header">332 <div class="round-icon" title="Close">333 <svg viewBox="0 0 24 24">334 <path d="M4 4L20 20M20 4L4 20" stroke="#DDE3E1" stroke-width="4" />335 </svg>336 </div>337 <div class="header-title">Create contact</div>338 <div class="action">339 <div class="save-btn">Save</div>340 <div class="round-icon" title="Menu">341 <svg viewBox="0 0 24 24">342 <circle cx="12" cy="5" r="2" fill="#DDE3E1"></circle>343 <circle cx="12" cy="12" r="2" fill="#DDE3E1"></circle>344 <circle cx="12" cy="19" r="2" fill="#DDE3E1"></circle>345 </svg>346 </div>347 </div>348 </div>349 350 <!-- Save to row -->351 <div class="account-row">352 <div class="label">Save to</div>353 <div class="account-chip">354 <div class="account-avatar">C</div>355 <div>dbwscratch.test.id1@gmail.com</div>356 </div>357 <div class="chev">358 <svg viewBox="0 0 24 24">359 <path d="M6 9l6 6 6-6" />360 </svg>361 </div>362 </div>363 364 <!-- Add picture -->365 <div class="picture-area">[IMG: Contact avatar]</div>366 <div class="add-picture-text">Add picture</div>367 368 <!-- Form fields -->369 <div class="form-area">370 <div class="field focus">371 <div class="label">First name</div>372 <div class="left-icon">373 <svg viewBox="0 0 24 24">374 <circle cx="12" cy="8" r="4"></circle>375 <path d="M4 20c2-4 14-4 16 0"></path>376 </svg>377 </div>378 <input type="text" placeholder="">379 <div class="dropdown">380 <svg viewBox="0 0 24 24">381 <path d="M6 9l6 6 6-6"></path>382 </svg>383 </div>384 </div>385 386 <div class="field">387 <div class="label gray">Last name</div>388 <div class="left-icon">389 <svg viewBox="0 0 24 24">390 <path d="M3 11h18"></path>391 <path d="M3 16h12"></path>392 </svg>393 </div>394 <input type="text" placeholder="">395 </div>396 397 <div class="field">398 <div class="label gray">Company</div>399 <div class="left-icon">400 <svg viewBox="0 0 24 24">401 <rect x="4" y="6" width="16" height="12" rx="2" ry="2"></rect>402 <path d="M8 10h8M8 14h8"></path>403 </svg>404 </div>405 <input type="text" placeholder="">406 </div>407 </div>408 409 <!-- Keyboard mock -->410 <div class="keyboard">411 <div class="kb-toolbar">412 <div class="kb-tool">◻◻</div>413 <div class="kb-tool">😊</div>414 <div class="kb-tool">GIF</div>415 <div class="kb-tool">⚙︎</div>416 <div class="kb-tool">G⇄</div>417 <div class="kb-tool">🎨</div>418 <div style="margin-left:auto" class="kb-tool">🎤</div>419 </div>420 <div class="kb-rows">421 <div class="kb-row">422 <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>423 <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>424 </div>425 <div class="kb-row">426 <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>427 <div class="key">H</div><div class="key">J</div><div class="key">K</div><div class="key">L</div>428 </div>429 <div class="kb-row">430 <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>431 <div class="key">N</div><div class="key">M</div><div class="key wide">⌫</div>432 </div>433 <div class="kb-row">434 <div class="key circle green">?123</div>435 <div class="key">,</div>436 <div class="key wide">😊</div>437 <div class="key space"></div>438 <div class="key">.</div>439 <div class="key circle pink">↵</div>440 </div>441 </div>442 </div>443 444 <!-- Home indicator -->445 <div class="home-indicator"></div>446 447</div>448</body>449</html>