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; font-family: Roboto, Arial, sans-serif; }9 #render-target {10 position: relative;11 overflow: hidden;12 width: 1080px;13 height: 2400px;14 background: #0f1a16;15 border-radius: 28px;16 box-shadow: 0 20px 60px rgba(0,0,0,0.35);17 color: #e8ece9;18 }19 20 /* Status bar */21 .status-bar {22 position: absolute;23 top: 0; left: 0; right: 0;24 height: 90px;25 padding: 0 36px;26 display: flex;27 align-items: center;28 justify-content: space-between;29 color: #ffffff;30 font-size: 34px;31 opacity: 0.95;32 }33 .status-left { display:flex; align-items:center; gap:18px; }34 .status-right { display:flex; align-items:center; gap:18px; }35 .battery {36 width: 46px; height: 24px; border: 3px solid #fff; border-radius: 6px; position: relative;37 }38 .battery::after {39 content: ""; position: absolute; right: -9px; top: 6px; width: 6px; height: 12px; background: #fff; border-radius: 2px;40 }41 .battery .level {42 position: absolute; left: 2px; top: 2px; height: 18px; width: 34px; background: #9fe29f; border-radius: 4px;43 }44 45 /* App bar */46 .app-bar {47 position: absolute;48 top: 90px; left: 0; right: 0;49 height: 150px;50 display: flex;51 align-items: center;52 padding: 0 36px;53 border-bottom: 1px solid rgba(255,255,255,0.06);54 }55 .app-title { font-size: 56px; font-weight: 500; margin-left: 18px; }56 .spacer { flex: 1; }57 .icon-btn {58 width: 64px; height: 64px; display:flex; align-items:center; justify-content:center; border-radius: 50%;59 color:#e8ece9;60 }61 .save-btn {62 background: #f5b6bf;63 color: #0f1a16;64 font-weight: 600;65 border-radius: 54px;66 padding: 20px 40px;67 margin-right: 18px;68 font-size: 40px;69 box-shadow: inset 0 0 0 2px rgba(255,255,255,0.15);70 }71 72 /* Save to row */73 .save-to {74 position: absolute;75 top: 240px; left: 36px; right: 36px;76 height: 100px;77 background: #26302b;78 border-radius: 24px;79 display: flex;80 align-items: center;81 padding: 0 22px;82 color: #c9d3cc;83 border: 1px solid rgba(255,255,255,0.08);84 }85 .account-chip {86 display:flex; align-items:center; gap: 16px; background: rgba(255,255,255,0.06);87 border-radius: 28px; padding: 10px 18px;88 }89 .account-avatar {90 width: 48px; height: 48px; background: #6f87ff; color:#fff; display:flex; align-items:center; justify-content:center; border-radius:50%;91 font-weight:700;92 }93 .email-text { font-size: 32px; color:#e8ece9; }94 .chevron {95 margin-left: auto; width: 28px; height: 28px; border-right: 4px solid #c9d3cc; border-bottom: 4px solid #c9d3cc; transform: rotate(45deg);96 }97 98 /* Picture placeholder */99 .picture-wrap {100 position: absolute;101 top: 400px; left: 0; right: 0;102 display: flex; align-items: center; flex-direction: column; gap: 24px;103 }104 .picture {105 width: 360px; height: 360px; border-radius: 50%;106 background: #E0E0E0; border: 1px solid #BDBDBD;107 display: flex; align-items: center; justify-content: center; color: #757575; font-size: 34px;108 }109 .add-picture-text { color: #f3b0ba; font-size: 36px; }110 111 /* Form fields */112 .form {113 position: absolute;114 top: 820px; left: 36px; right: 36px;115 }116 .field {117 position: relative;118 margin-bottom: 36px;119 padding-left: 90px;120 }121 .field-label {122 position: absolute; top: -16px; left: 96px;123 background: #0f1a16;124 padding: 0 12px;125 color: #c6d0c9;126 font-size: 28px;127 }128 .input {129 height: 140px;130 border: 3px solid #66746b;131 border-radius: 24px;132 font-size: 46px;133 color: #e8ece9;134 display:flex; align-items:center;135 padding: 0 32px;136 box-sizing: border-box;137 background: transparent;138 }139 .input.focus {140 border-color: #f5b6bf;141 }142 .left-icon {143 position: absolute; left: 20px; top: 50%;144 transform: translateY(-50%);145 width: 52px; height: 52px; opacity: 0.8;146 }147 .right-drop {148 position: absolute; right: 24px; top: 50%;149 transform: translateY(-50%) rotate(45deg);150 width: 30px; height: 30px; border-right: 5px solid #c9d3cc; border-bottom: 5px solid #c9d3cc;151 }152 153 /* Suggestions bar above keyboard */154 .suggestions {155 position: absolute;156 left: 0; right: 0;157 top: 1340px;158 display: flex;159 gap: 18px;160 padding: 0 36px;161 }162 .chip {163 padding: 18px 28px;164 border-radius: 28px;165 background: #26302b;166 border: 1px solid rgba(255,255,255,0.08);167 font-size: 34px;168 color: #e8ece9;169 }170 171 /* Keyboard mock */172 .keyboard {173 position: absolute;174 left: 0; right: 0;175 bottom: 86px;176 height: 760px;177 background: #1b2420;178 border-top: 1px solid rgba(255,255,255,0.08);179 display: grid;180 grid-template-rows: 1fr 1fr 1fr 1fr 1fr;181 padding: 24px 24px 32px;182 box-sizing: border-box;183 gap: 16px;184 }185 .row { display: grid; grid-template-columns: repeat(10, 1fr); gap: 16px; }186 .key {187 background: #222c27;188 border: 1px solid rgba(255,255,255,0.06);189 border-radius: 18px;190 display:flex; align-items:center; justify-content:center;191 color:#e8ece9; font-size: 40px;192 }193 .key.wide { grid-column: span 2; }194 .key.left-round {195 background: #a7c5aa; color:#0f1a16; font-weight:700;196 }197 .key.enter {198 background: #f5b6bf; color:#0f1a16; font-weight:700;199 }200 201 /* Gesture bar */202 .gesture {203 position: absolute; left: 50%; bottom: 24px;204 transform: translateX(-50%);205 width: 240px; height: 10px; background: rgba(255,255,255,0.8); border-radius: 6px;206 }207</style>208</head>209<body>210<div id="render-target">211 212 <!-- Status bar -->213 <div class="status-bar">214 <div class="status-left">215 <div>12:19</div>216 </div>217 <div class="status-right">218 <div>100%</div>219 <div class="battery"><div class="level"></div></div>220 </div>221 </div>222 223 <!-- App bar -->224 <div class="app-bar">225 <div class="icon-btn" aria-label="Close">226 <svg width="44" height="44" viewBox="0 0 24 24" fill="none">227 <path d="M5 5 L19 19 M19 5 L5 19" stroke="#e8ece9" stroke-width="2.4" stroke-linecap="round"/>228 </svg>229 </div>230 <div class="app-title">Create contact</div>231 <div class="spacer"></div>232 <div class="save-btn">Save</div>233 <div class="icon-btn" aria-label="More">234 <svg width="36" height="36" viewBox="0 0 24 24" fill="#e8ece9">235 <circle cx="12" cy="5" r="2.2"></circle>236 <circle cx="12" cy="12" r="2.2"></circle>237 <circle cx="12" cy="19" r="2.2"></circle>238 </svg>239 </div>240 </div>241 242 <!-- Save to row -->243 <div class="save-to">244 <div class="account-chip">245 <div class="account-avatar">C</div>246 <div class="email-text">dbwscratch.test.id1@gmail.com</div>247 </div>248 <div class="chevron"></div>249 </div>250 251 <!-- Picture placeholder -->252 <div class="picture-wrap">253 <div class="picture">[IMG: Profile picture placeholder]</div>254 <div class="add-picture-text">Add picture</div>255 </div>256 257 <!-- Form -->258 <div class="form">259 <!-- First name -->260 <div class="field">261 <svg class="left-icon" viewBox="0 0 24 24">262 <circle cx="12" cy="8" r="4" fill="#c9d3cc"></circle>263 <path d="M4 20c2-4 14-4 16 0" stroke="#c9d3cc" stroke-width="2" fill="none" stroke-linecap="round"/>264 </svg>265 <div class="field-label">First name</div>266 <div class="input">Rahul</div>267 <div class="right-drop"></div>268 </div>269 270 <!-- Last name -->271 <div class="field">272 <svg class="left-icon" viewBox="0 0 24 24">273 <rect x="4" y="6" width="16" height="12" rx="4" fill="#c9d3cc"></rect>274 </svg>275 <div class="field-label">Last name</div>276 <div class="input focus">Sharma</div>277 </div>278 279 <!-- Next field placeholder -->280 <div class="field">281 <svg class="left-icon" viewBox="0 0 24 24">282 <path d="M3 20V9l9-6 9 6v11" stroke="#c9d3cc" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>283 </svg>284 <div class="field-label">Company</div>285 <div class="input"></div>286 </div>287 </div>288 289 <!-- Suggestions -->290 <div class="suggestions">291 <div class="chip">Sharma</div>292 <div class="chip">Dharma</div>293 <div class="chip">Sharmaji</div>294 </div>295 296 <!-- Keyboard mock -->297 <div class="keyboard">298 <div class="row">299 <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>300 </div>301 <div class="row">302 <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><div class="key">⌫</div>303 </div>304 <div class="row">305 <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">,</div><div class="key">.</div><div class="key enter">↵</div>306 </div>307 <div class="row">308 <div class="key left-round">?123</div>309 <div class="key wide"></div>310 <div class="key wide"></div>311 <div class="key wide"></div>312 <div class="key wide"></div>313 <div class="key">🙂</div>314 <div class="key wide"></div>315 <div class="key wide"></div>316 <div class="key wide"></div>317 <div class="key enter">→</div>318 </div>319 <div class="row">320 <div class="key wide"></div>321 <div class="key wide"></div>322 <div class="key wide"></div>323 <div class="key wide"></div>324 <div class="key wide"></div>325 <div class="key wide"></div>326 <div class="key wide"></div>327 <div class="key wide"></div>328 <div class="key wide"></div>329 <div class="key wide"></div>330 </div>331 </div>332 333 <!-- Gesture bar -->334 <div class="gesture"></div>335</div>336</body>337</html>