GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html>3<head>4<meta charset="UTF-8">5<title>Contacts UI</title>6<style>7 body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; }8 #render-target {9 position: relative;10 width: 1080px;11 height: 2400px;12 overflow: hidden;13 background: #16181c;14 color: #EDEFF2;15 }16 17 .statusbar {18 position: absolute;19 top: 0;20 left: 0;21 width: 1080px;22 height: 120px;23 padding: 24px 36px;24 box-sizing: border-box;25 color: #eaeaea;26 font-weight: 600;27 font-size: 40px;28 display: flex;29 align-items: center;30 justify-content: space-between;31 }32 .status-right {33 display: flex;34 gap: 30px;35 align-items: center;36 }37 .icon {38 display: inline-flex;39 align-items: center;40 justify-content: center;41 }42 .icon svg { width: 48px; height: 48px; fill: none; stroke: #eaeaea; stroke-width: 4; }43 44 .content {45 position: absolute;46 top: 120px;47 left: 0;48 right: 0;49 padding: 24px 36px 0 36px;50 box-sizing: border-box;51 }52 53 .searchbar {54 height: 110px;55 background: #2a2e36;56 border-radius: 55px;57 display: flex;58 align-items: center;59 padding: 0 28px;60 box-sizing: border-box;61 gap: 24px;62 }63 .searchbar .hamburger svg { width: 52px; height: 52px; stroke: #bfc4cc; }64 .searchbar .placeholder {65 flex: 1;66 color: #bfc4cc;67 font-size: 40px;68 }69 .searchbar .dots svg { width: 48px; height: 48px; stroke: #bfc4cc; }70 .avatar {71 width: 80px;72 height: 80px;73 border-radius: 50%;74 background: #4a5f68;75 color: #d8e6ea;76 font-weight: 700;77 display: flex;78 align-items: center;79 justify-content: center;80 font-size: 40px;81 }82 83 .chips {84 margin-top: 28px;85 display: flex;86 gap: 18px;87 flex-wrap: wrap;88 }89 .chip {90 border: 1px solid #60646b;91 border-radius: 18px;92 height: 84px;93 padding: 0 26px;94 display: flex;95 align-items: center;96 gap: 18px;97 color: #dfe3e7;98 font-size: 34px;99 background: #21252b;100 }101 .chip .icon svg { width: 40px; height: 40px; stroke: #cfd3d8; }102 103 .account-row {104 margin-top: 22px;105 display: flex;106 align-items: center;107 gap: 16px;108 color: #c9cdd3;109 font-size: 34px;110 }111 .account-row .icon svg { width: 42px; height: 42px; stroke: #c9cdd3; }112 113 .divider {114 margin-top: 20px;115 height: 2px;116 background: #2b2f36;117 width: 100%;118 }119 120 .list {121 margin-top: 26px;122 }123 .item {124 display: flex;125 align-items: center;126 gap: 28px;127 padding: 24px 0;128 }129 .item .index-letter {130 width: 40px;131 margin-right: 10px;132 color: #8fb5ff;133 font-weight: 700;134 font-size: 44px;135 }136 .contact-badge {137 width: 110px;138 height: 110px;139 border-radius: 55px;140 display: flex;141 align-items: center;142 justify-content: center;143 font-weight: 800;144 font-size: 48px;145 color: #1a1a1a;146 }147 .badge-green { background: #5CB66F; }148 .badge-pink { background: #FF6BC2; }149 .badge-cyan { background: #54D3E3; }150 .badge-yellow { background: #FFD04D; }151 .item .name {152 font-size: 46px;153 color: #EDEFF2;154 }155 156 .fab {157 position: absolute;158 right: 72px;159 bottom: 320px;160 width: 140px;161 height: 140px;162 background: #284b8f;163 border-radius: 36px;164 box-shadow: 0 10px 22px rgba(0,0,0,0.4);165 display: flex;166 align-items: center;167 justify-content: center;168 }169 .fab svg { width: 72px; height: 72px; stroke: #ffffff; stroke-width: 8; }170 171 .bottomnav {172 position: absolute;173 bottom: 0;174 left: 0;175 width: 1080px;176 height: 220px;177 background: #1c2026;178 border-top: 1px solid #2a2f36;179 display: flex;180 align-items: center;181 justify-content: space-around;182 box-sizing: border-box;183 }184 .nav-item {185 width: 33.33%;186 height: 100%;187 display: flex;188 flex-direction: column;189 align-items: center;190 justify-content: center;191 gap: 18px;192 color: #cfd3d8;193 font-size: 34px;194 }195 .nav-item .nav-icon svg { width: 60px; height: 60px; stroke: #cfd3d8; }196 .nav-item.active .nav-icon {197 background: #2a2e36;198 padding: 16px 28px;199 border-radius: 28px;200 }201 .home-indicator {202 position: absolute;203 bottom: 14px;204 left: 50%;205 transform: translateX(-50%);206 width: 320px;207 height: 10px;208 background: #e6e6e8;209 border-radius: 6px;210 opacity: 0.85;211 }212</style>213</head>214<body>215<div id="render-target">216 217 <div class="statusbar">218 <div class="status-left">8:30219 <span class="icon" style="margin-left:12px;">220 <svg viewBox="0 0 24 24">221 <path d="M4 15c0-3.5 2.5-6 6-6 0-2.8 2.2-5 5-5 3 0 5 2.3 5 5 2.2.3 4 2.2 4 4.5S22.7 18 20 18H7a3 3 0 0 1-3-3z" stroke="#eaeaea" fill="none"></path>222 </svg>223 </span>224 </div>225 <div class="status-right">226 <span class="icon">227 <svg viewBox="0 0 24 24">228 <path d="M1 9c5-5 17-5 22 0M4 12c4-4 12-4 16 0M7 15c3-3 7-3 10 0" stroke="#eaeaea" stroke-linecap="round"></path>229 </svg>230 </span>231 <span class="icon">232 <svg viewBox="0 0 24 24">233 <rect x="2" y="6" width="18" height="12" rx="2"></rect>234 <rect x="20" y="9" width="2" height="6" rx="1"></rect>235 </svg>236 </span>237 </div>238 </div>239 240 <div class="content">241 <div class="searchbar">242 <span class="hamburger icon">243 <svg viewBox="0 0 24 24">244 <path d="M3 6h18M3 12h18M3 18h18" stroke-linecap="round"></path>245 </svg>246 </span>247 <div class="placeholder">Search contacts</div>248 <span class="dots icon">249 <svg viewBox="0 0 24 24">250 <circle cx="12" cy="5" r="2"></circle>251 <circle cx="12" cy="12" r="2"></circle>252 <circle cx="12" cy="19" r="2"></circle>253 </svg>254 </span>255 <div class="avatar">C</div>256 </div>257 258 <div class="chips">259 <div class="chip">260 <span class="icon">261 <svg viewBox="0 0 24 24">262 <path d="M5 3h14v10H5z"></path>263 <path d="M8 17h8M10 20h4" stroke-linecap="round"></path>264 </svg>265 </span>266 <span>Phone contacts</span>267 </div>268 <div class="chip">269 <span class="icon">270 <svg viewBox="0 0 24 24">271 <rect x="3" y="5" width="18" height="14" rx="2"></rect>272 <path d="M3 7l9 6 9-6" stroke-linecap="round"></path>273 </svg>274 </span>275 <span>Email contacts</span>276 </div>277 <div class="chip">278 <span class="icon">279 <svg viewBox="0 0 24 24">280 <rect x="4" y="4" width="16" height="16" rx="2"></rect>281 <path d="M8 8h8M8 12h8M8 16h8" stroke-linecap="round"></path>282 </svg>283 </span>284 <span>Company</span>285 </div>286 </div>287 288 <div class="account-row">289 <span class="icon">290 <svg viewBox="0 0 24 24">291 <circle cx="12" cy="8" r="4"></circle>292 <path d="M4 20c2-4 14-4 16 0" stroke-linecap="round"></path>293 </svg>294 </span>295 <span>dbwscratch.test.id8@gmail.com • 4 contacts</span>296 </div>297 298 <div class="divider"></div>299 300 <div class="list">301 <div class="item">302 <div class="index-letter">C</div>303 <div class="contact-badge badge-green">C</div>304 <div class="name">Con 1</div>305 </div>306 <div class="item">307 <div class="index-letter" style="opacity:0;">C</div>308 <div class="contact-badge badge-pink">C</div>309 <div class="name">Con2</div>310 </div>311 <div class="item">312 <div class="index-letter" style="opacity:0;">C</div>313 <div class="contact-badge badge-cyan">C</div>314 <div class="name">Con3</div>315 </div>316 <div class="item">317 <div class="index-letter" style="opacity:0;">C</div>318 <div class="contact-badge badge-yellow">C</div>319 <div class="name">Contacts+ Support</div>320 </div>321 </div>322 </div>323 324 <div class="fab">325 <svg viewBox="0 0 24 24">326 <path d="M12 5v14M5 12h14" stroke-linecap="round"></path>327 </svg>328 </div>329 330 <div class="bottomnav">331 <div class="nav-item active">332 <div class="nav-icon">333 <svg viewBox="0 0 24 24">334 <circle cx="12" cy="8" r="4"></circle>335 <path d="M4 20c2-4 14-4 16 0" stroke-linecap="round"></path>336 </svg>337 </div>338 <div>Contacts</div>339 </div>340 <div class="nav-item">341 <div class="nav-icon">342 <svg viewBox="0 0 24 24">343 <rect x="4" y="4" width="16" height="16" rx="3"></rect>344 <path d="M12 6l2 4 4 .5-3 3 .8 4.5L12 16l-3.8 2 1-4.5-3-3L10 10z" stroke-linejoin="round"></path>345 </svg>346 </div>347 <div>Highlights</div>348 </div>349 <div class="nav-item">350 <div class="nav-icon">351 <svg viewBox="0 0 24 24">352 <circle cx="12" cy="12" r="9"></circle>353 <path d="M12 7v5l3 3" stroke-linecap="round"></path>354 <path d="M6 16l2 2" stroke-linecap="round"></path>355 </svg>356 </div>357 <div>Fix & manage</div>358 </div>359 <div class="home-indicator"></div>360 </div>361 362</div>363</body>364</html>