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: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; }9 #render-target {10 position: relative;11 overflow: hidden;12 width: 1080px;13 height: 2400px;14 background: #0f1512;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: 96px;25 padding: 0 36px;26 box-sizing: border-box;27 display: flex;28 align-items: center;29 justify-content: space-between;30 color: #dfe6df;31 font-size: 34px;32 letter-spacing: 0.5px;33 }34 .status-right {35 display: flex;36 align-items: center;37 gap: 26px;38 font-size: 30px;39 }40 .icon-wifi, .icon-battery {41 width: 44px; height: 44px;42 }43 44 /* Header */45 .app-header {46 position: absolute;47 top: 96px;48 left: 0;49 width: 100%;50 padding: 32px 40px 24px 40px;51 box-sizing: border-box;52 display: flex;53 align-items: center;54 gap: 28px;55 }56 .header-title {57 font-size: 64px;58 font-weight: 600;59 letter-spacing: 0.2px;60 flex: 1;61 }62 .header-actions {63 display: flex;64 align-items: center;65 gap: 24px;66 }67 .btn-save {68 background: #f6c6c9;69 color: #0f1512;70 border-radius: 36px;71 padding: 22px 40px;72 font-size: 40px;73 font-weight: 600;74 box-shadow: 0 2px 0 rgba(0,0,0,0.2) inset;75 }76 .icon-btn {77 width: 56px; height: 56px;78 display: inline-flex; align-items: center; justify-content: center;79 }80 .icon-x svg, .icon-kebab svg { width: 56px; height: 56px; }81 82 /* Add picture */83 .picture-area {84 position: absolute;85 top: 240px;86 left: 0;87 width: 100%;88 display: flex;89 justify-content: center;90 align-items: flex-start;91 height: 360px;92 }93 .avatar-placeholder {94 width: 360px;95 height: 180px;96 border-top-left-radius: 180px;97 border-top-right-radius: 180px;98 background: #254433;99 position: relative;100 overflow: hidden;101 }102 .avatar-inner {103 position: absolute;104 top: -90px;105 left: 60px;106 width: 240px;107 height: 240px;108 background: #E0E0E0;109 border: 1px solid #BDBDBD;110 border-radius: 50%;111 display: flex; align-items: center; justify-content: center;112 color: #757575;113 font-size: 28px;114 text-align: center;115 padding: 10px;116 box-sizing: border-box;117 }118 .add-picture-text {119 position: absolute;120 top: 360px;121 width: 100%;122 text-align: center;123 color: #f1b2b6;124 font-size: 36px;125 }126 127 /* Form fields */128 .form {129 position: absolute;130 top: 540px;131 left: 40px;132 right: 40px;133 }134 .field {135 display: flex;136 align-items: flex-start;137 gap: 28px;138 margin-bottom: 40px;139 }140 .field-icon {141 width: 64px; height: 64px;142 margin-top: 32px;143 opacity: 0.9;144 }145 .input-block {146 flex: 1;147 }148 .label {149 color: #b2c6b7;150 font-size: 28px;151 margin: 0 0 14px 20px;152 letter-spacing: 0.4px;153 }154 .input {155 border: 2px solid #8fa79a;156 border-radius: 22px;157 padding: 26px 26px;158 font-size: 44px;159 background: rgba(255,255,255,0.02);160 color: #e6efe6;161 }162 .input.phone { border-color: #f3b2b7; }163 .right-affordance {164 position: absolute;165 right: 70px;166 margin-top: 22px;167 width: 50px;168 height: 50px;169 opacity: 0.9;170 }171 172 /* "Label" dropdown row below phone */173 .label-row {174 display: flex;175 align-items: center;176 gap: 28px;177 margin-top: 22px;178 }179 .label-chip {180 border: 2px solid #8fa79a;181 border-radius: 22px;182 padding: 20px 26px;183 font-size: 36px;184 color: #e6efe6;185 background: rgba(255,255,255,0.02);186 width: 340px;187 }188 189 /* Dial pad */190 .dialpad {191 position: absolute;192 left: 0;193 right: 0;194 bottom: 140px;195 padding: 26px 26px 0 26px;196 box-sizing: border-box;197 }198 .dial-grid {199 display: grid;200 grid-template-columns: repeat(4, 1fr);201 grid-row-gap: 26px;202 grid-column-gap: 26px;203 }204 .key {205 background: #1a231f;206 color: #e6efe6;207 border-radius: 48px;208 height: 180px;209 display: flex;210 flex-direction: column;211 align-items: center;212 justify-content: center;213 }214 .key .num { font-size: 60px; line-height: 1; }215 .key .letters { font-size: 26px; color: #b4c3b6; margin-top: 8px; }216 .key.side { background: #16201b; }217 .key.teal { background: #bfeae0; color: #0f1512; }218 .key.pink { background: #f6c6c9; color: #0f1512; }219 .gesture-bar {220 position: absolute;221 bottom: 50px;222 left: 50%;223 transform: translateX(-50%);224 width: 360px;225 height: 14px;226 background: #e9ece8;227 border-radius: 8px;228 opacity: 0.8;229 }230</style>231</head>232<body>233<div id="render-target">234 235 <!-- Status Bar -->236 <div class="status-bar">237 <div class="status-left">12:21</div>238 <div class="status-right">239 <!-- simple lock & icons as text to approximate -->240 <span>🔒</span>241 <svg class="icon-wifi" viewBox="0 0 24 24">242 <path fill="#dfe6df" d="M12 18l-2-2h4l-2 2zm8-8c-4.4-4.4-11.6-4.4-16 0l1.4 1.4c3.6-3.6 9.6-3.6 13.2 0L20 10zM16 12c-2.8-2.8-7.2-2.8-10 0l1.4 1.4c2-2 5.2-2 7.2 0L16 12z" />243 </svg>244 <svg class="icon-battery" viewBox="0 0 24 24">245 <rect x="2" y="7" width="18" height="10" rx="2" fill="none" stroke="#dfe6df" stroke-width="2"/>246 <rect x="4" y="9" width="14" height="6" fill="#dfe6df"/>247 <rect x="20" y="10" width="2" height="4" fill="#dfe6df"/>248 </svg>249 <span>100%</span>250 </div>251 </div>252 253 <!-- Header -->254 <div class="app-header">255 <div class="icon-btn icon-x">256 <svg viewBox="0 0 24 24">257 <path d="M5 5L19 19M19 5L5 19" stroke="#e6efe6" stroke-width="2" stroke-linecap="round"/>258 </svg>259 </div>260 <div class="header-title">Create contact</div>261 <div class="header-actions">262 <div class="btn-save">Save</div>263 <div class="icon-btn icon-kebab">264 <svg viewBox="0 0 24 24">265 <circle cx="12" cy="5" r="2" fill="#e6efe6"/>266 <circle cx="12" cy="12" r="2" fill="#e6efe6"/>267 <circle cx="12" cy="19" r="2" fill="#e6efe6"/>268 </svg>269 </div>270 </div>271 </div>272 273 <!-- Add picture area -->274 <div class="picture-area">275 <div class="avatar-placeholder">276 <div class="avatar-inner">[IMG: Contact Avatar]</div>277 </div>278 <div class="add-picture-text">Add picture</div>279 </div>280 281 <!-- Form -->282 <div class="form">283 <!-- First name -->284 <div class="field">285 <svg class="field-icon" viewBox="0 0 24 24">286 <circle cx="12" cy="8" r="4" fill="none" stroke="#a4b8aa" stroke-width="2"/>287 <path d="M4 20c2-4 14-4 16 0" fill="none" stroke="#a4b8aa" stroke-width="2" stroke-linecap="round"/>288 </svg>289 <div class="input-block">290 <div class="label">First name</div>291 <div class="input">Rahul</div>292 </div>293 <div class="right-affordance">294 <svg viewBox="0 0 24 24">295 <path d="M7 9l5 5 5-5" fill="none" stroke="#a4b8aa" stroke-width="2" stroke-linecap="round"/>296 </svg>297 </div>298 </div>299 300 <!-- Last name -->301 <div class="field">302 <svg class="field-icon" viewBox="0 0 24 24">303 <circle cx="12" cy="8" r="4" fill="none" stroke="#a4b8aa" stroke-width="2"/>304 <path d="M4 20c2-4 14-4 16 0" fill="none" stroke="#a4b8aa" stroke-width="2" stroke-linecap="round"/>305 </svg>306 <div class="input-block">307 <div class="label">Last name</div>308 <div class="input">Sharma</div>309 </div>310 </div>311 312 <!-- Company -->313 <div class="field">314 <svg class="field-icon" viewBox="0 0 24 24">315 <rect x="3" y="5" width="18" height="14" fill="none" stroke="#a4b8aa" stroke-width="2"/>316 <path d="M8 9h2M8 13h2M14 9h2M14 13h2" stroke="#a4b8aa" stroke-width="2" stroke-linecap="round"/>317 </svg>318 <div class="input-block">319 <div class="label">Company</div>320 <div class="input">Abcd</div>321 </div>322 <div class="right-affordance">323 <svg viewBox="0 0 24 24">324 <path d="M5 5l14 14" stroke="#a4b8aa" stroke-width="2" stroke-linecap="round"/>325 </svg>326 </div>327 </div>328 329 <!-- Phone -->330 <div class="field">331 <svg class="field-icon" viewBox="0 0 24 24">332 <path d="M6 3l3 3-2 2c2 4 5 6 9 8l2-2 3 3-2 3c-8 1-14-8-15-17l2-2z" fill="none" stroke="#a4b8aa" stroke-width="2" stroke-linecap="round"/>333 </svg>334 <div class="input-block">335 <div class="label">Phone</div>336 <div class="input phone"> </div>337 </div>338 </div>339 340 <!-- Label dropdown -->341 <div class="label-row">342 <div style="width:64px;height:64px;margin-left:0;opacity:.9">343 <svg viewBox="0 0 24 24">344 <path d="M4 5h16v14H4z" fill="none" stroke="#a4b8aa" stroke-width="2"/>345 <path d="M8 9h8M8 13h5" stroke="#a4b8aa" stroke-width="2" stroke-linecap="round"/>346 </svg>347 </div>348 <div class="label-chip">Mobile ▼</div>349 </div>350 </div>351 352 <!-- Dialpad -->353 <div class="dialpad">354 <div class="dial-grid">355 <div class="key"><div class="num">1</div></div>356 <div class="key"><div class="num">2</div><div class="letters">ABC</div></div>357 <div class="key"><div class="num">3</div><div class="letters">DEF</div></div>358 <div class="key side"><div class="num">–</div></div>359 360 <div class="key"><div class="num">4</div><div class="letters">GHI</div></div>361 <div class="key"><div class="num">5</div><div class="letters">JKL</div></div>362 <div class="key"><div class="num">6</div><div class="letters">MNO</div></div>363 <div class="key side"><div class="num">⎵</div></div>364 365 <div class="key"><div class="num">7</div><div class="letters">PQRS</div></div>366 <div class="key"><div class="num">8</div><div class="letters">TUV</div></div>367 <div class="key"><div class="num">9</div><div class="letters">WXYZ</div></div>368 <div class="key teal"><div class="num">⌫</div></div>369 370 <div class="key"><div class="num">*</div><div class="letters">#</div></div>371 <div class="key"><div class="num">0</div><div class="letters">+</div></div>372 <div class="key"><div class="num">.</div></div>373 <div class="key pink"><div class="num">→</div></div>374 </div>375 </div>376 377 <div class="gesture-bar"></div>378</div>379</body>380</html>