GD-ML/AndroidCode

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 Dark UI</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }9  #render-target {10    position: relative;11    overflow: hidden;12    width: 1080px;13    height: 2400px;14    background: #0e1713; /* deep greenish black */15    color: #e6e6e6;16  }17 18  /* Status bar */19  .status-bar {20    height: 90px;21    padding: 0 32px;22    display: flex;23    align-items: center;24    justify-content: space-between;25    color: #e9efe9;26    font-size: 36px;27    letter-spacing: 0.3px;28  }29  .status-icons {30    display: flex;31    align-items: center;32    gap: 18px;33    font-size: 30px;34  }35  .badge {36    border: 1px solid #88958b;37    color: #dfe6df;38    padding: 6px 10px;39    border-radius: 8px;40    font-size: 26px;41  }42 43  /* Search bar */44  .search-wrap {45    padding: 20px 32px 8px 32px;46  }47  .search-bar {48    height: 120px;49    border-radius: 60px;50    background: #343a35;51    display: flex;52    align-items: center;53    padding: 0 28px;54    box-shadow: inset 0 0 0 1px rgba(180,190,180,0.15);55  }56  .hamburger {57    width: 60px; height: 60px; margin-right: 18px;58  }59  .search-text {60    flex: 1;61    font-size: 44px;62    color: #cfd6cf;63  }64  .menu-dot {65    width: 46px; height: 46px; margin-right: 18px;66  }67  .avatar-pill {68    width: 90px; height: 90px; border-radius: 45px;69    background: #5f77cf;70    color: #fff; display: flex; align-items: center; justify-content: center;71    font-weight: bold; font-size: 44px;72  }73 74  /* Action chips */75  .chip-row {76    display: flex;77    gap: 18px;78    padding: 22px 32px 12px 32px;79  }80  .chip {81    display: flex; align-items: center; gap: 16px;82    padding: 20px 26px;83    border: 2px solid #98a69b;84    border-radius: 24px;85    color: #e7efe7; font-size: 34px;86    background: rgba(255,255,255,0.02);87  }88  .chip svg { width: 40px; height: 40px; }89  .chip .mail { color: #f3c8c8; }90  .chip .phone { color: #e9b3b0; }91  .chip .company { color: #d9c8c8; }92 93  /* Account info */94  .account {95    display: flex; align-items: center; gap: 18px;96    padding: 16px 40px 10px 40px;97    color: #cbd9cc; font-size: 32px;98  }99  .account svg { width: 36px; height: 36px; }100 101  /* Contact list */102  .list {103    padding: 10px 40px 0 40px;104  }105  .index-col {106    position: absolute;107    top: 620px;108    left: 20px;109    display: flex;110    flex-direction: column;111    gap: 26px;112    align-items: center;113  }114  .index-dot {115    width: 18px; height: 18px; border-radius: 50%;116    background: #8c948c;117    opacity: 0.6;118  }119  .index-letter {120    color: #f0b9b9; font-size: 40px; margin-top: 6px;121  }122  .contact-item {123    display: flex; align-items: center;124    gap: 26px; padding: 28px 0;125    border-bottom: 1px solid rgba(180,190,180,0.08);126  }127  .contact-avatar {128    width: 112px; height: 112px; border-radius: 56px;129    display: flex; align-items: center; justify-content: center;130    font-size: 46px; font-weight: bold; color: #1a1a1a;131  }132  .contact-name { font-size: 44px; color: #e9efe9; }133 134  .av-purple { background: #9a68e2; color: #1b1421; }135  .av-orange { background: #e2765d; color: #1f110e; }136  .av-yellow { background: #f1cc4d; color: #201b09; }137 138  /* FAB */139  .fab {140    position: absolute;141    right: 60px;142    bottom: 360px;143    width: 160px; height: 160px;144    background: #6a2a2a;145    border-radius: 40px;146    box-shadow: 0 18px 24px rgba(0,0,0,0.4);147    display: flex; align-items: center; justify-content: center;148  }149  .fab span {150    color: #ffffff; font-size: 88px; line-height: 0;151  }152 153  /* Bottom nav */154  .bottom-nav {155    position: absolute; left: 0; right: 0; bottom: 0;156    height: 220px;157    background: #121c17;158    border-top: 1px solid rgba(180,190,180,0.15);159    display: flex; justify-content: space-around; align-items: center;160    color: #e6eee6;161  }162  .nav-item { display: flex; flex-direction: column; align-items: center; gap: 16px; }163  .nav-item svg { width: 54px; height: 54px; }164  .nav-label { font-size: 30px; color: #e6eee6; }165  .selected .icon-bg {166    width: 100px; height: 64px; background: #224a34; border-radius: 32px;167    display: flex; align-items: center; justify-content: center;168  }169 170  /* Home indicator */171  .home-indicator {172    position: absolute; bottom: 240px; left: 50%;173    transform: translateX(-50%);174    width: 360px; height: 12px; border-radius: 6px; background: #eaeaea; opacity: 0.9;175  }176</style>177</head>178<body>179<div id="render-target">180 181  <!-- Status bar -->182  <div class="status-bar">183    <div class="time">12:16</div>184    <div class="status-icons">185      <span class="badge">G</span>186      <span>🔒</span>187      <span class="badge">▶</span>188      <span>📶</span>189      <span>🔋 100%</span>190    </div>191  </div>192 193  <!-- Search bar -->194  <div class="search-wrap">195    <div class="search-bar">196      <svg class="hamburger" viewBox="0 0 24 24">197        <path d="M3 6h18M3 12h18M3 18h18" stroke="#cfd6cf" stroke-width="2" stroke-linecap="round" fill="none"/>198      </svg>199      <div class="search-text">Search contacts</div>200      <svg class="menu-dot" viewBox="0 0 24 24">201        <circle cx="12" cy="5" r="2" fill="#cfd6cf"/>202        <circle cx="12" cy="12" r="2" fill="#cfd6cf"/>203        <circle cx="12" cy="19" r="2" fill="#cfd6cf"/>204      </svg>205      <div class="avatar-pill">C</div>206    </div>207  </div>208 209  <!-- Action chips -->210  <div class="chip-row">211    <div class="chip">212      <svg viewBox="0 0 24 24"><path class="phone" d="M6 2h4l1 4-3 2c2 4 5 6 9 8l2-3 4 1v4c0 1-1 2-2 2C12 21 3 12 2 4c0-1 1-2 2-2z" fill="#e7b6b5"/></svg>213      <span>Phone contacts</span>214    </div>215    <div class="chip">216      <svg viewBox="0 0 24 24"><path class="mail" d="M2 6h20v12H2z" fill="none" stroke="#f3c8c8" stroke-width="2"/><path d="M2 6l10 7 10-7" stroke="#f3c8c8" stroke-width="2" fill="none"/></svg>217      <span>Email contacts</span>218    </div>219    <div class="chip">220      <svg viewBox="0 0 24 24"><path class="company" d="M3 20h18M4 17h6V4H4v13zm10 0h6V8h-6v9z" fill="none" stroke="#d9c8c8" stroke-width="2"/></svg>221      <span>Company</span>222    </div>223  </div>224 225  <!-- Account info -->226  <div class="account">227    <svg viewBox="0 0 24 24"><circle cx="12" cy="8" r="4" fill="none" stroke="#cbd9cc" stroke-width="2"/><path d="M4 20c2-4 14-4 16 0" stroke="#cbd9cc" stroke-width="2" fill="none"/></svg>228    <div>dbwscratch.test.id1@gmail.com • 3 contacts</div>229  </div>230 231  <!-- Index dots/letters -->232  <div class="index-col">233    <div class="index-dot"></div>234    <div class="index-dot"></div>235    <div class="index-dot"></div>236    <div class="index-dot"></div>237    <div class="index-letter">C</div>238    <div class="index-letter">N</div>239    <div class="index-letter">T</div>240  </div>241 242  <!-- Contacts list -->243  <div class="list">244    <div class="contact-item">245      <div style="width:50px; text-align:center; color:#f0b9b9; font-size:40px;">C</div>246      <div class="contact-avatar av-purple">C</div>247      <div class="contact-name">Contacts+ Support</div>248    </div>249    <div class="contact-item">250      <div style="width:50px; text-align:center; color:#f0b9b9; font-size:40px;">N</div>251      <div class="contact-avatar av-orange">N</div>252      <div class="contact-name">Naveen</div>253    </div>254    <div class="contact-item">255      <div style="width:50px; text-align:center; color:#f0b9b9; font-size:40px;">T</div>256      <div class="contact-avatar av-yellow">T</div>257      <div class="contact-name">Tapomay</div>258    </div>259  </div>260 261  <!-- Floating button -->262  <div class="fab"><span>+</span></div>263 264  <!-- Bottom navigation -->265  <div class="bottom-nav">266    <div class="nav-item selected">267      <div class="icon-bg">268        <svg viewBox="0 0 24 24"><path d="M12 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8z" fill="#cfe6cf"/><path d="M4 20c3-5 13-5 16 0" stroke="#cfe6cf" stroke-width="2" fill="none"/></svg>269      </div>270      <div class="nav-label">Contacts</div>271    </div>272    <div class="nav-item">273      <svg viewBox="0 0 24 24"><path d="M12 2l3 7 7 1-5 5 1 7-6-3-6 3 1-7-5-5 7-1z" fill="none" stroke="#dfe7df" stroke-width="2"/></svg>274      <div class="nav-label">Highlights</div>275    </div>276    <div class="nav-item">277      <svg viewBox="0 0 24 24"><path d="M12 2v4M12 18v4M4 12h4M16 12h4M6 6l3 3M15 15l3 3M17 7l-3 3M10 14l-3 3" stroke="#dfe7df" stroke-width="2" fill="none" stroke-linecap="round"/></svg>278      <div class="nav-label">Fix &amp; manage</div>279    </div>280  </div>281 282  <div class="home-indicator"></div>283</div>284</body>285</html>