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 - Dark UI</title>7<style>8 :root{9 --bg:#0f2426;10 --surface:#1b3536;11 --surface-2:#163133;12 --border:#2a4d4e;13 --text:#d8e8e3;14 --muted:#9bb8b2;15 --accent:#285e4d;16 --pill:#214542;17 }18 body{ margin:0; padding:0; background:transparent; font-family: Roboto, Arial, sans-serif; }19 #render-target{20 position:relative; overflow:hidden;21 width:1080px; height:2400px;22 background:var(--bg);23 color:var(--text);24 }25 26 /* Status bar */27 .statusbar{28 height:96px; padding:24px 32px 0 32px; box-sizing:border-box;29 display:flex; align-items:center; justify-content:space-between; color:#e6f0ec; font-weight:500;30 font-size:34px;31 }32 .status-icons{ display:flex; gap:18px; align-items:center; }33 .status-dot{ width:10px; height:10px; border-radius:50%; background:#cfe7e0; opacity:.7; }34 .icon-circle{ width:26px; height:26px; border-radius:50%; border:2px solid #cfe7e0; opacity:.7; }35 36 /* Search */37 .top-area{ padding:24px 36px 0 36px; }38 .search-bar{39 height:120px; border-radius:60px; background:var(--surface);40 border:2px solid var(--border); display:flex; align-items:center;41 padding:0 30px; box-sizing:border-box;42 }43 .search-placeholder{ color:#cde2de; font-size:40px; letter-spacing:.2px; flex:1; padding-left:16px; }44 .menu-btn, .more-btn{ width:48px; height:48px; }45 .profile-avatar{46 width:84px; height:84px; border-radius:50%;47 background:#d4772f; color:#1a1a1a; font-weight:600; font-size:40px;48 display:flex; align-items:center; justify-content:center; margin-left:18px;49 }50 51 /* Filters */52 .filters{ display:flex; gap:22px; margin-top:26px; }53 .filter-btn{54 display:flex; align-items:center; gap:16px; padding:20px 26px;55 border:2px solid var(--border); border-radius:24px; color:#d1e3de; background:transparent;56 font-size:34px;57 }58 .filter-btn svg{ width:40px; height:40px; }59 60 /* Account line */61 .account{ display:flex; align-items:center; gap:16px; margin:28px 0 18px 8px; color:var(--muted); font-size:32px; }62 .divider{ height:2px; background:var(--border); margin:8px -36px 0 -36px; }63 64 /* Contacts list */65 .list{ margin-top:22px; }66 .contact-row{67 display:flex; align-items:center; height:160px; padding:0 36px; box-sizing:border-box;68 border-bottom:1px solid rgba(255,255,255,.04);69 }70 .alpha{71 width:60px; text-align:center; color:#8bd4b9; font-size:40px; margin-right:16px;72 }73 .contact-avatar{74 width:96px; height:96px; border-radius:50%; display:flex; align-items:center; justify-content:center;75 color:#152123; font-weight:700; font-size:44px; margin-right:26px;76 }77 .name{ font-size:44px; color:#ddebe7; }78 79 /* FAB */80 .fab{81 position:absolute; right:48px; bottom:280px; width:124px; height:124px;82 background:var(--accent); border-radius:28px; box-shadow:0 16px 28px rgba(0,0,0,.35);83 display:flex; align-items:center; justify-content:center;84 }85 .fab svg{ width:56px; height:56px; }86 87 /* Bottom navigation */88 .bottom-nav{89 position:absolute; left:0; right:0; bottom:0; height:220px; background:var(--surface-2);90 border-top:2px solid var(--border); display:flex; align-items:center; justify-content:space-around;91 padding-bottom:18px;92 }93 .nav-item{ width:33%; text-align:center; color:#bcd3cf; }94 .nav-label{ font-size:32px; margin-top:14px; }95 .nav-item svg{ width:54px; height:54px; }96 .active .nav-label{ color:#ffffff; }97 .icon-pill{98 width:140px; height:88px; border-radius:44px; background:var(--accent);99 margin:0 auto; display:flex; align-items:center; justify-content:center;100 }101 .handle{102 position:absolute; left:50%; transform:translateX(-50%);103 bottom:14px; width:220px; height:10px; background:#e5e9e8; border-radius:6px; opacity:.7;104 }105</style>106</head>107<body>108<div id="render-target">109 <!-- Status bar -->110 <div class="statusbar">111 <div>9:56</div>112 <div class="status-icons">113 <div class="status-dot"></div>114 <div class="icon-circle"></div>115 <div class="icon-circle"></div>116 <div class="status-dot"></div>117 <div style="display:flex; align-items:center; gap:12px;">118 <svg width="28" height="28" viewBox="0 0 24 24"><path d="M3 11h18v9H3z" stroke="#e6f0ec" stroke-width="2" fill="none"/><path d="M7 11V6h10v5" stroke="#e6f0ec" stroke-width="2" fill="none"/></svg>119 <span style="font-size:32px;">100%</span>120 </div>121 </div>122 </div>123 124 <!-- Header with search -->125 <div class="top-area">126 <div class="search-bar">127 <svg class="menu-btn" viewBox="0 0 24 24">128 <path d="M3 6h18M3 12h18M3 18h18" stroke="#a5c6c1" stroke-width="2.4" stroke-linecap="round" fill="none"/>129 </svg>130 <div class="search-placeholder">Search contacts</div>131 <svg class="more-btn" viewBox="0 0 24 24">132 <circle cx="12" cy="5" r="2.2" fill="#a5c6c1"/>133 <circle cx="12" cy="12" r="2.2" fill="#a5c6c1"/>134 <circle cx="12" cy="19" r="2.2" fill="#a5c6c1"/>135 </svg>136 <div class="profile-avatar">R</div>137 </div>138 139 <!-- Filters -->140 <div class="filters">141 <div class="filter-btn">142 <svg viewBox="0 0 24 24">143 <path d="M5 6c3 6 8 11 14 14l2-2-4-4-2 2C11.5 15 9 12.5 8 9.5l2-2-4-4-2 2z" stroke="#bcd3cf" stroke-width="1.8" fill="none" stroke-linejoin="round"/>144 </svg>145 <span>Phone contacts</span>146 </div>147 <div class="filter-btn">148 <svg viewBox="0 0 24 24">149 <rect x="3" y="5" width="18" height="14" rx="2" stroke="#bcd3cf" stroke-width="1.8" fill="none"/>150 <path d="M3 5l9 7 9-7" stroke="#bcd3cf" stroke-width="1.8" fill="none"/>151 </svg>152 <span>Email contacts</span>153 </div>154 <div class="filter-btn">155 <svg viewBox="0 0 24 24">156 <rect x="4" y="4" width="16" height="16" rx="2" stroke="#bcd3cf" stroke-width="1.8" fill="none"/>157 <path d="M8 8h2v2H8zm0 4h2v2H8zm4-4h2v2h-2zm0 4h2v2h-2" fill="#bcd3cf"/>158 </svg>159 <span>Company</span>160 </div>161 </div>162 163 <!-- Account info -->164 <div class="account">165 <svg width="40" height="40" viewBox="0 0 24 24">166 <circle cx="12" cy="8" r="4" stroke="#9bb8b2" stroke-width="1.8" fill="none"/>167 <path d="M4 20c2-4 12-4 16 0" stroke="#9bb8b2" stroke-width="1.8" fill="none" stroke-linecap="round"/>168 </svg>169 <span>richardwegnar@gmail.com • 2 contacts</span>170 </div>171 <div class="divider"></div>172 </div>173 174 <!-- Contacts list -->175 <div class="list">176 <div class="contact-row">177 <div class="alpha">A</div>178 <div class="contact-avatar" style="background:#d77262;">A</div>179 <div class="name">Andreas Wagner</div>180 </div>181 <div class="contact-row">182 <div class="alpha">C</div>183 <div class="contact-avatar" style="background:#f670b5;">C</div>184 <div class="name">Clara Wagner</div>185 </div>186 </div>187 188 <!-- Floating action button -->189 <div class="fab">190 <svg viewBox="0 0 24 24">191 <path d="M12 5v14M5 12h14" stroke="#ffffff" stroke-width="2.8" stroke-linecap="round"/>192 </svg>193 </div>194 195 <!-- Bottom navigation -->196 <div class="bottom-nav">197 <div class="nav-item active">198 <div class="icon-pill">199 <svg viewBox="0 0 24 24">200 <circle cx="12" cy="8" r="4" stroke="#ffffff" stroke-width="2" fill="none"/>201 <path d="M4 20c2-4 12-4 16 0" stroke="#ffffff" stroke-width="2" fill="none" stroke-linecap="round"/>202 </svg>203 </div>204 <div class="nav-label">Contacts</div>205 </div>206 <div class="nav-item">207 <svg viewBox="0 0 24 24">208 <path d="M12 3l3 6 6 1-4.5 4 1 6-5.5-3-5.5 3 1-6L3 10l6-1z" stroke="#bcd3cf" stroke-width="2" fill="none" stroke-linejoin="round"/>209 </svg>210 <div class="nav-label">Highlights</div>211 </div>212 <div class="nav-item">213 <svg viewBox="0 0 24 24">214 <path d="M21 7l-4 4-4-4 4-4a4 4 0 10-5 5l-7 7 3 3 7-7a4 4 0 005-5z" stroke="#bcd3cf" stroke-width="2" fill="none" stroke-linejoin="round"/>215 </svg>216 <div class="nav-label">Fix & manage</div>217 </div>218 <div class="handle"></div>219 </div>220</div>221</body>222</html>