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>Contacts List UI Mock</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }9 #render-target {10 width: 1080px;11 height: 2400px;12 position: relative;13 overflow: hidden;14 background: linear-gradient(180deg, #0b1b2b 0%, #0b2235 40%, #0a1e2e 100%);15 color: #eaeff6;16 }17 18 /* Status bar */19 .status-bar {20 height: 120px;21 background: #000;22 color: #fff;23 display: flex;24 align-items: center;25 padding: 0 32px;26 box-sizing: border-box;27 font-weight: 600;28 letter-spacing: 1px;29 }30 .status-left { font-size: 44px; }31 .status-right {32 margin-left: auto;33 display: flex;34 gap: 26px;35 align-items: center;36 }37 .icon-dot { width: 10px; height: 10px; background: #fff; border-radius: 50%; opacity: .8; }38 .wifi {39 width: 40px; height: 28px;40 }41 .battery {42 width: 54px; height: 28px;43 }44 45 /* Top actions row */46 .top-actions {47 height: 120px;48 padding: 0 28px;49 display: flex;50 align-items: center;51 gap: 36px;52 border-bottom: 2px solid rgba(255,255,255,0.08);53 }54 .top-actions .tab {55 width: 88px; height: 88px;56 display: flex; align-items: center; justify-content: center;57 border-radius: 12px;58 color: #f06;59 background: rgba(255,255,255,0.05);60 }61 .divider-thin {62 height: 2px;63 background: rgba(255,255,255,0.15);64 margin: 16px 28px 0 28px;65 }66 67 /* Search line (under header) */68 .search-strip {69 padding: 20px 32px 12px 32px;70 }71 .search-input {72 height: 72px;73 display: flex; align-items: center;74 color: rgba(255,255,255,0.55);75 font-size: 36px;76 border-bottom: 2px solid rgba(255,255,255,0.18);77 }78 .search-input svg { margin-right: 16px; opacity: .7; }79 80 /* Contact list */81 .list {82 position: absolute;83 top: 380px;84 left: 0;85 right: 0;86 bottom: 260px;87 overflow: hidden;88 padding: 0 24px 0 24px;89 box-sizing: border-box;90 }91 .section {92 margin-top: 18px;93 }94 .section .letter {95 color: #ff4747;96 margin: 24px 0 8px 28px;97 font-weight: 800;98 font-size: 40px;99 }100 .rule { height: 2px; background: rgba(255,255,255,0.15); margin: 8px 24px; }101 102 .contact {103 display: flex;104 align-items: center;105 gap: 26px;106 padding: 18px 18px;107 margin: 10px 6px;108 }109 .avatar {110 width: 140px; height: 140px;111 border-radius: 50%;112 position: relative;113 box-shadow: 0 0 0 8px rgba(255,255,255,0.08) inset;114 background: radial-gradient(circle at 50% 40%, #101820 0%, #0b1218 60%, #000 100%);115 display: flex; align-items: center; justify-content: center;116 border: 6px solid #a9b3bf33;117 }118 .avatar span {119 color: #e8eef7;120 font-size: 44px;121 font-weight: 700;122 letter-spacing: 1px;123 }124 .contact-info .name {125 font-size: 44px; font-weight: 700; color: #e7edf6;126 }127 .contact-info .number {128 font-size: 34px; color: rgba(255,255,255,0.56); margin-top: 8px;129 }130 131 /* Floating action rail on the right */132 .rail {133 position: absolute;134 right: 28px;135 top: 300px;136 display: flex;137 flex-direction: column;138 gap: 36px;139 pointer-events: none;140 }141 .rail .fab {142 width: 130px; height: 130px; border-radius: 50%;143 display: flex; align-items: center; justify-content: center;144 color: #fff; font-weight: 700;145 box-shadow: 0 8px 20px rgba(0,0,0,0.35);146 pointer-events: auto;147 }148 .fab.green { background: #0aa06e; }149 .fab.blue { background: #6bb6d9; }150 .fab.coral { background: #ff7f6d; }151 .fab.ocean { background: #3f7bea; }152 .fab.gray { background: #8e8f98; }153 .fab.indigo { background: #3a78ff; }154 .fab.red { background: #e15258; }155 .fab.brown { background: #8b6b57; }156 157 /* Simple vector icons inside fabs */158 .fab svg { width: 58px; height: 58px; fill: #fff; }159 .fab .txt { font-size: 34px; opacity: .95; }160 161 /* Bottom search bar */162 .bottom-search {163 position: absolute;164 left: 24px;165 right: 24px;166 bottom: 120px;167 height: 140px;168 border-radius: 26px;169 backdrop-filter: blur(2px);170 background: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(40,73,92,0.35));171 border: 1px solid rgba(255,255,255,0.12);172 display: flex; align-items: center;173 padding: 0 28px;174 box-sizing: border-box;175 color: #e8eef6;176 }177 .mini-graph {178 width: 58px; height: 58px; position: relative; margin-right: 20px;179 }180 .mini-graph span { position: absolute; bottom: 0; width: 10px; border-radius: 2px; }181 .mini-graph .b1 { height: 14px; left: 6px; background: #ffb648; }182 .mini-graph .b2 { height: 26px; left: 22px; background: #2bb7d6; }183 .mini-graph .b3 { height: 38px; left: 38px; background: #4fd18a; }184 185 .bottom-search .search-text { font-size: 46px; opacity: .95; }186 .bottom-search .grow { flex: 1; }187 .bottom-ic { width: 70px; height: 70px; display: flex; align-items: center; justify-content: center; margin-left: 22px; }188 .bottom-ic svg { width: 52px; height: 52px; fill: #e8eef6; opacity: .9; }189 190 /* Handle bar (device gesture) */191 .handle {192 position: absolute;193 left: 300px; right: 300px;194 bottom: 46px; height: 10px;195 border-radius: 10px;196 background: rgba(255,255,255,0.85);197 opacity: .9;198 }199</style>200</head>201<body>202<div id="render-target">203 204 <!-- Status Bar -->205 <div class="status-bar">206 <div class="status-left">9:08</div>207 <div class="status-right">208 <div class="icon-dot"></div>209 <div class="icon-dot"></div>210 <div class="icon-dot"></div>211 <svg class="wifi" viewBox="0 0 24 16">212 <path fill="#fff" d="M12 16l3-3H9l3 3zm0-5c3.3 0 6.3 1.3 8.5 3.5l1.5-1.5C19.4 9.4 16 8 12 8s-7.4 1.4-10 4l1.5 1.5C5.7 12.3 8.7 11 12 11z"/>213 </svg>214 <svg class="battery" viewBox="0 0 26 14">215 <rect x="1" y="1" width="20" height="12" stroke="#fff" fill="none" stroke-width="2"/>216 <rect x="3" y="3" width="16" height="8" fill="#fff"/>217 <rect x="22" y="5" width="3" height="4" fill="#fff"/>218 </svg>219 </div>220 </div>221 222 <!-- Top actions row -->223 <div class="top-actions">224 <div class="tab">225 <svg viewBox="0 0 24 24"><path d="M12 12c2.8 0 5-2.2 5-5s-2.2-5-5-5-5 2.2-5 5 2.2 5 5 5zm0 2c-4 0-8 2-8 6v2h16v-2c0-4-4-6-8-6z"/></svg>226 </div>227 <div class="tab">228 <svg viewBox="0 0 24 24"><path d="M12 2L3 7v10l9 5 9-5V7l-9-5z"/></svg>229 </div>230 <div class="tab">231 <svg viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg>232 </div>233 <div class="tab">234 <svg viewBox="0 0 24 24"><path d="M12 8v5l4 2 .8-1.5-3.3-1.6V8z"/></svg>235 </div>236 </div>237 <div class="divider-thin"></div>238 239 <!-- Search strip -->240 <div class="search-strip">241 <div class="search-input">242 <svg viewBox="0 0 24 24"><path d="M15.5 14h-.79l-.28-.27A6.471 6.471 0 0016 9.5 6.5 6.5 0 109.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79L20 21.5 21.5 20 15.5 14zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/></svg>243 <span>Search in contacts</span>244 </div>245 </div>246 247 <!-- Contact list -->248 <div class="list">249 <div class="section">250 <div class="letter">A</div>251 <div class="rule"></div>252 <div class="contact">253 <div class="avatar"><span>An</span></div>254 <div class="contact-info">255 <div class="name">Anat</div>256 <div class="number">87596 41230</div>257 </div>258 </div>259 <div class="contact">260 <div class="avatar"><span>An</span></div>261 <div class="contact-info">262 <div class="name">Anya</div>263 <div class="number">9359323867</div>264 </div>265 </div>266 </div>267 268 <div class="section">269 <div class="letter">B</div>270 <div class="rule"></div>271 <div class="contact">272 <div class="avatar"><span>Bo</span></div>273 <div class="contact-info">274 <div class="name">Boss</div>275 <div class="number">097456995568</div>276 </div>277 </div>278 <div class="contact">279 <div class="avatar"><span>Br</span></div>280 <div class="contact-info">281 <div class="name">Brian</div>282 <div class="number">914906348</div>283 </div>284 </div>285 <div class="contact">286 <div class="avatar"><span>Bu</span></div>287 <div class="contact-info">288 <div class="name">Bubb</div>289 <div class="number">785469007855</div>290 </div>291 </div>292 </div>293 294 <div class="section">295 <div class="letter">C</div>296 <div class="rule"></div>297 <div class="contact">298 <div class="avatar"><span>Cr</span></div>299 <div class="contact-info">300 <div class="name">Cris</div>301 <div class="number">78096324580</div>302 </div>303 </div>304 </div>305 306 <div class="section">307 <div class="letter">D</div>308 <div class="rule"></div>309 <div class="contact">310 <div class="avatar"><span>Da</span></div>311 <div class="contact-info">312 <div class="name">Daeg</div>313 <div class="number">7456902138875</div>314 </div>315 </div>316 </div>317 318 <div class="section">319 <div class="letter">F</div>320 <div class="rule"></div>321 <div class="contact">322 <div class="avatar"><span>Fr</span></div>323 <div class="contact-info">324 <div class="name">Friend</div>325 <div class="number">80974569412</div>326 </div>327 </div>328 </div>329 330 <div class="section">331 <div class="letter">G</div>332 <div class="rule"></div>333 <div class="contact">334 <div class="avatar"><span>Ga</span></div>335 <div class="contact-info">336 <div class="name">Garhb</div>337 <div class="number">68741239009</div>338 </div>339 </div>340 </div>341 </div>342 343 <!-- Floating action rail -->344 <div class="rail">345 <div class="fab green" title="Call">346 <svg viewBox="0 0 24 24"><path d="M6.6 10.8c1.5 3 3.6 5.1 6.6 6.6l2.2-2.2c.3-.3.8-.4 1.1-.2 1.2.4 2.6.6 3.9.6.6 0 1 .4 1 1V20c0 .6-.4 1-1 1C10.1 21 3 13.9 3 4c0-.6.4-1 1-1h2.4c.6 0 1 .4 1 1 0 1.3.2 2.7.6 3.9.1.4 0 .8-.3 1.1L6.6 10.8z"/></svg>347 </div>348 <div class="fab blue" title="SMS"><div class="txt">SMS</div></div>349 <div class="fab coral" title="Calendar">350 <div class="txt">Ai</div>351 </div>352 <div class="fab ocean" title="Chat">353 <svg viewBox="0 0 24 24"><path d="M4 4h16v10H7l-3 3V4z"/></svg>354 </div>355 <div class="fab gray" title="Bell">356 <svg viewBox="0 0 24 24"><path d="M12 22a2 2 0 002-2h-4a2 2 0 002 2zM18 16v-5a6 6 0 10-12 0v5l-2 2h16l-2-2z"/></svg>357 </div>358 <div class="fab indigo" title="Meet">359 <svg viewBox="0 0 24 24"><path d="M4 4h12v16H4zM16 12l4-4v8z" fill="#fff"/></svg>360 </div>361 <div class="fab red" title="Record">362 <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="6"/></svg>363 </div>364 <div class="fab brown" title="Events">365 <svg viewBox="0 0 24 24"><path d="M7 3v2H5a2 2 0 00-2 2v12a2 2 0 002 2h14a2 2 0 002-2V7a2 2 0 00-2-2h-2V3h-2v2H9V3H7zm12 6H5v10h14V9z"/></svg>366 </div>367 </div>368 369 <!-- Bottom search bar -->370 <div class="bottom-search">371 <div class="mini-graph">372 <span class="b1"></span><span class="b2"></span><span class="b3"></span>373 </div>374 <svg viewBox="0 0 24 24"><path d="M15.5 14h-.79l-.28-.27A6.471 6.471 0 0016 9.5 6.5 6.5 0 109.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79L20 21.5 21.5 20 15.5 14z"/></svg>375 <div class="search-text">Search</div>376 <div class="grow"></div>377 <div class="bottom-ic">378 <svg viewBox="0 0 24 24"><path d="M19 13H5v-2h14v2z"/></svg>379 </div>380 <div class="bottom-ic">381 <svg viewBox="0 0 24 24"><path d="M12 8a4 4 0 014 4 4 4 0 01-4 4 4 4 0 01-4-4 4 4 0 014-4zm7-3h-2V3h-2v2H9V3H7v2H5a2 2 0 00-2 2v12a2 2 0 002 2h14a2 2 0 002-2V7a2 2 0 00-2-2z"/></svg>382 </div>383 </div>384 385 <div class="handle"></div>386</div>387</body>388</html>