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</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }9 #render-target {10 position: relative; overflow: hidden;11 width: 1080px; height: 2400px;12 background: #0f1713; /* deep green-black */13 color: #e9f1ea;14 }15 16 /* Status bar */17 .status-bar {18 position: absolute; top: 0; left: 0; right: 0;19 height: 84px;20 padding: 0 28px;21 display: flex; align-items: center; justify-content: space-between;22 color: #e6efe7; font-size: 30px;23 opacity: 0.95;24 }25 .status-right {26 display: flex; gap: 22px; align-items: center;27 }28 .icon {29 display: inline-flex; align-items: center; justify-content: center;30 }31 .icon svg { width: 34px; height: 34px; fill: #e6efe7; }32 33 /* Header */34 .header {35 position: absolute; top: 84px; left: 0; right: 0;36 padding: 24px 28px 16px 28px;37 display: flex; align-items: center;38 gap: 26px;39 }40 .back-btn {41 width: 64px; height: 64px; border-radius: 50%;42 display: flex; align-items: center; justify-content: center;43 color: #e6efe7; font-size: 54px; line-height: 0;44 }45 .title {46 font-size: 64px; font-weight: 600; letter-spacing: 0.5px; flex: 1;47 }48 .save-btn {49 background: #f7bfc4;50 color: #0f1713;51 border-radius: 38px;52 padding: 22px 44px;53 font-size: 38px; font-weight: 600;54 }55 .kebab {56 width: 60px; height: 60px; display: flex; align-items: center; justify-content: center;57 }58 .kebab svg { width: 20px; height: 44px; fill: #e6efe7; }59 60 /* Avatar add picture */61 .avatar-wrap {62 position: absolute; top: 280px; left: 0; right: 0;63 display: flex; align-items: center; flex-direction: column;64 }65 .avatar {66 width: 420px; height: 210px; border-top-left-radius: 210px; border-top-right-radius: 210px;67 background: #24342e; display: flex; align-items: center; justify-content: center;68 border-bottom-left-radius: 0; border-bottom-right-radius: 0;69 }70 .avatar .placeholder {71 width: 140px; height: 140px; background: #31423b; border: 2px solid #6e8e80;72 display: flex; align-items: center; justify-content: center; color: #b8c7bf; font-size: 24px; border-radius: 14px;73 }74 .add-picture {75 margin-top: 24px; color: #f2a9b2; font-size: 36px;76 }77 78 /* Form area */79 .form {80 position: absolute; top: 600px; left: 0; right: 0;81 padding: 0 28px 0 28px;82 }83 .field-row {84 display: grid; grid-template-columns: 104px 1fr; align-items: start;85 column-gap: 22px; margin-bottom: 38px;86 }87 .field-icon {88 height: 120px; display: flex; align-items: center; justify-content: center;89 opacity: 0.85;90 }91 .field {92 position: relative;93 border: 2px solid #8ea396; border-radius: 18px; padding: 30px 84px 28px 30px;94 min-height: 120px;95 }96 .field.active { border-color: #f1a9b1; }97 .field .label {98 position: absolute; top: -16px; left: 18px;99 background: #0f1713; padding: 0 10px; color: #b8c7bf; font-size: 28px;100 }101 .field .value { font-size: 46px; color: #eef6f0; margin-top: 8px; }102 .trailing {103 position: absolute; right: 18px; top: 36px; color: #c7d5cd;104 width: 40px; height: 40px; display: flex; align-items: center; justify-content: center;105 }106 .small-field {107 width: 420px;108 border-radius: 16px; border: 2px solid #8ea396; padding: 24px 18px;109 position: relative; min-height: 100px;110 }111 .small-field .label {112 top: -14px; font-size: 26px; color: #b8c7bf;113 }114 .small-field .value {115 font-size: 38px;116 }117 118 /* Keypad */119 .keypad {120 position: absolute; left: 0; right: 0; bottom: 110px;121 padding: 22px 24px 24px;122 background: linear-gradient(180deg, rgba(15,23,19,0) 0%, rgba(15,23,19,0.7) 40%, rgba(15,23,19,1) 60%);123 }124 .keys {125 display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px;126 }127 .key {128 background: #24342e; color: #dfe7df; border-radius: 56px;129 height: 150px; display: flex; align-items: center; justify-content: center;130 font-size: 46px; font-weight: 600;131 }132 .sub {133 font-size: 24px; font-weight: 500; opacity: 0.8; margin-left: 10px;134 }135 .key.special-mint { background: #bff1e7; color: #0f1713; }136 .key.special-pink { background: #ffd3d8; color: #0f1713; }137 .span2 { grid-row: span 2; height: 320px; flex-direction: column; }138 .dot-key { font-size: 60px; }139 140 /* Gesture bar */141 .gesture {142 position: absolute; bottom: 38px; left: 50%;143 transform: translateX(-50%);144 width: 300px; height: 10px; border-radius: 10px; background: #e9ecea; opacity: 0.85;145 }146</style>147</head>148<body>149<div id="render-target">150 151 <!-- Status bar -->152 <div class="status-bar">153 <div class="status-left">12:22</div>154 <div class="status-right">155 <span class="icon" title="Wi-Fi">156 <svg viewBox="0 0 24 24"><path d="M12 18.5l2.5 2.5-2.5 2.5-2.5-2.5L12 18.5zm-7-7.2l1.4 1.4C8.3 10 15.7 10 17.6 12.7L19 11.3C16.6 8.6 7.4 8.6 5 11.3zm-3-3.5l1.4 1.4c4.3-4.3 17.9-4.3 22.2 0L27 7.8C21.9 2.7 2.1 2.7 2 7.8z"/></svg>157 </span>158 <span class="icon" title="Battery">159 <svg viewBox="0 0 24 24"><path d="M16 4h1v2h2c1.1 0 2 .9 2 2v8c0 1.1-.9 2-2 2H5c-1.1 0-2-.9-2-2V8c0-1.1.9-2 2-2h2V4h9zM5 8v8h14V8H5z"/></svg>160 </span>161 <span>100%</span>162 </div>163 </div>164 165 <!-- Header -->166 <div class="header">167 <div class="back-btn">×</div>168 <div class="title">Create contact</div>169 <div class="save-btn">Save</div>170 <div class="kebab">171 <svg viewBox="0 0 24 24"><circle cx="12" cy="5" r="2.2"/><circle cx="12" cy="12" r="2.2"/><circle cx="12" cy="19" r="2.2"/></svg>172 </div>173 </div>174 175 <!-- Avatar / Add picture -->176 <div class="avatar-wrap">177 <div class="avatar">178 <div class="placeholder">IMG +</div>179 </div>180 <div class="add-picture">Add picture</div>181 </div>182 183 <!-- Form -->184 <div class="form">185 <!-- First name -->186 <div class="field-row">187 <div class="field-icon">188 <svg width="48" height="48" viewBox="0 0 24 24" fill="#9fb2a7">189 <path d="M12 12a4 4 0 100-8 4 4 0 000 8zm0 2c-4.4 0-8 2.2-8 5v1h16v-1c0-2.8-3.6-5-8-5z"/>190 </svg>191 </div>192 <div class="field">193 <div class="label">First name</div>194 <div class="value">Rahul</div>195 <div class="trailing">196 <svg viewBox="0 0 24 24" width="34" height="34" fill="#c7d5cd"><path d="M7 10l5 5 5-5z"/></svg>197 </div>198 </div>199 </div>200 201 <!-- Last name -->202 <div class="field-row">203 <div class="field-icon">204 <svg width="48" height="48" viewBox="0 0 24 24" fill="#9fb2a7">205 <path d="M12 12a4 4 0 100-8 4 4 0 000 8zm0 2c-4.4 0-8 2.2-8 5v1h16v-1c0-2.8-3.6-5-8-5z"/>206 </svg>207 </div>208 <div class="field">209 <div class="label">Last name</div>210 <div class="value">Sharma</div>211 </div>212 </div>213 214 <!-- Company -->215 <div class="field-row">216 <div class="field-icon">217 <svg width="48" height="48" viewBox="0 0 24 24" fill="#9fb2a7">218 <path d="M3 21V5a2 2 0 012-2h6v8h8v10H3zm6-10H7V9h2v2zm0 4H7v-2h2v2zm0 4H7v-2h2v2zm4-6h2v2h-2v-2z"/>219 </svg>220 </div>221 <div class="field">222 <div class="label">Company</div>223 <div class="value">Abcd</div>224 <div class="trailing">225 <svg viewBox="0 0 24 24" width="30" height="30" fill="#c7d5cd"><path d="M18.3 5.7L12 12l6.3 6.3-1.4 1.4L10.6 13.4 4.3 19.7 2.9 18.3 9.2 12 2.9 5.7 4.3 4.3l6.3 6.3 6.3-6.3z"/></svg>226 </div>227 </div>228 </div>229 230 <!-- Phone (active) -->231 <div class="field-row">232 <div class="field-icon">233 <svg width="48" height="48" viewBox="0 0 24 24" fill="#9fb2a7">234 <path d="M6.6 10.8c1.7 3.3 3.9 5.5 7.2 7.2l2.4-2.4c.3-.3.8-.4 1.2-.3 1 .3 2 .5 3 .5.7 0 1.2.5 1.2 1.2V20c0 1.1-.9 2-2 2C9.6 22 2 14.4 2 4c0-1.1.9-2 2-2h2.9c.7 0 1.2.5 1.2 1.2 0 1 .2 2 .5 3 .1.4 0 .9-.3 1.2L6.6 10.8z"/>235 </svg>236 </div>237 <div class="field active">238 <div class="label">Phone</div>239 <div class="value">11 0022 3366</div>240 <div class="trailing">241 <svg viewBox="0 0 24 24" width="30" height="30" fill="#f1a9b1"><path d="M18.3 5.7L12 12l6.3 6.3-1.4 1.4L10.6 13.4 4.3 19.7 2.9 18.3 9.2 12 2.9 5.7 4.3 4.3l6.3 6.3 6.3-6.3z"/></svg>242 </div>243 </div>244 </div>245 246 <!-- Label small field -->247 <div class="field-row" style="align-items: start;">248 <div class="field-icon"></div>249 <div class="small-field">250 <div class="label">Label</div>251 <div class="value">Mobile</div>252 </div>253 </div>254 </div>255 256 <!-- Numeric Keypad -->257 <div class="keypad">258 <div class="keys">259 <div class="key">1</div>260 <div class="key">2 <span class="sub">ABC</span></div>261 <div class="key">3 <span class="sub">DEF</span></div>262 <div class="key">−</div>263 264 <div class="key">4 <span class="sub">GHI</span></div>265 <div class="key">5 <span class="sub">JKL</span></div>266 <div class="key">6 <span class="sub">MNO</span></div>267 <div class="key">⌞</div>268 269 <div class="key">7 <span class="sub">PQRS</span></div>270 <div class="key">8 <span class="sub">TUV</span></div>271 <div class="key">9 <span class="sub">WXYZ</span></div>272 <div class="key special-mint span2" style="display:flex;">273 <div style="font-size:56px;">⌫</div>274 </div>275 276 <div class="key">*</div>277 <div class="key">0 <span class="sub">+</span></div>278 <div class="key dot-key">·</div>279 <div class="key special-pink span2" style="display:flex;">280 <div style="font-size:56px;">→</div>281 </div>282 </div>283 </div>284 285 <!-- Gesture bar -->286 <div class="gesture"></div>287</div>288</body>289</html>