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 UI Mock</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; }9 #render-target {10 width: 1080px; height: 2400px;11 position: relative; overflow: hidden;12 background: #1c1a16;13 border-radius: 32px; box-shadow: 0 12px 40px rgba(0,0,0,0.35);14 color: #e8e1d6;15 }16 17 /* Status bar */18 .status-bar {19 height: 96px;20 padding: 0 40px;21 display: flex; align-items: center; justify-content: space-between;22 color: #e8e1d6; font-weight: 600; font-size: 40px;23 }24 .status-icons { display: flex; align-items: center; gap: 18px; }25 .status-icons .dot { width: 14px; height: 14px; background: #c8b58b; border-radius: 50%; opacity: 0.9; }26 .battery {27 width: 54px; height: 28px; border: 3px solid #c8b58b; border-radius: 6px; position: relative;28 }29 .battery::after { content: ""; position: absolute; right: -10px; top: 8px; width: 8px; height: 12px; background: #c8b58b; border-radius: 2px; }30 .battery .level { position: absolute; left: 4px; top: 4px; width: 36px; height: 16px; background: #c8b58b; border-radius: 3px; }31 32 .content { padding: 12px 48px 0 48px; }33 34 /* Search bar */35 .search-bar {36 height: 128px;37 background: #3a2f25;38 border-radius: 48px;39 display: flex; align-items: center;40 padding: 0 36px;41 gap: 28px;42 color: #cbb58b;43 }44 .search-bar .placeholder { flex: 1; font-size: 40px; color: #cbb58b; }45 .icon { width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center; }46 .icon svg { width: 48px; height: 48px; fill: none; stroke: #cbb58b; stroke-width: 4; }47 48 /* Create new contact */49 .create-row {50 display: flex; align-items: center; gap: 22px;51 margin: 34px 12px 22px 12px;52 color: #e2b85a; font-size: 44px; font-weight: 600;53 }54 .create-row .icon svg { stroke: #e2b85a; }55 56 /* Contacts list */57 .list { margin-top: 10px; }58 .contact-row {59 display: grid;60 grid-template-columns: 60px 120px 1fr;61 align-items: center;62 gap: 24px;63 padding: 22px 12px;64 }65 .index {66 color: #e2b85a; font-weight: 700; font-size: 42px; text-align: center;67 }68 .avatar {69 width: 96px; height: 96px; border-radius: 50%;70 display: flex; align-items: center; justify-content: center;71 font-weight: 700; font-size: 48px; color: #2a2a2a;72 }73 .name {74 font-size: 44px; color: #e8e1d6;75 }76 77 /* Floating action button (square, rounded) */78 .fab {79 position: absolute; right: 120px; bottom: 520px;80 width: 160px; height: 160px; border-radius: 36px;81 background: #e0b253; box-shadow: 0 10px 30px rgba(0,0,0,0.45);82 display: flex; align-items: center; justify-content: center;83 }84 .fab .dots { width: 88px; height: 88px; display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 12px; }85 .fab .dot { width: 16px; height: 16px; border-radius: 50%; background: #725a26; }86 87 /* Right-side scroll indicator */88 .scroll-indicator {89 position: absolute; right: 20px; top: 480px;90 width: 10px; height: 320px; background: rgba(255, 243, 224, 0.25);91 border-radius: 12px;92 }93 94 /* Bottom navigation */95 .bottom-bar {96 position: absolute; left: 0; bottom: 0;97 width: 100%; height: 260px; background: #3a2f25;98 display: flex; align-items: center; justify-content: space-around;99 padding-bottom: 48px;100 }101 .nav-item {102 display: flex; flex-direction: column; align-items: center; gap: 16px;103 color: #d6c39b; font-size: 36px;104 }105 .nav-item .icon svg { stroke: #d6c39b; }106 .nav-item.selected {107 background: #4a3d31; color: #e2b85a;108 padding: 22px 38px; border-radius: 48px;109 }110 .nav-item.selected .icon svg { stroke: #e2b85a; }111 .home-indicator {112 position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%);113 width: 300px; height: 14px; border-radius: 10px; background: #e6e6e6; opacity: 0.9;114 }115</style>116</head>117<body>118<div id="render-target">119 120 <!-- Status bar -->121 <div class="status-bar">122 <div class="time">12:44</div>123 <div class="status-icons">124 <div class="dot"></div>125 <div class="dot"></div>126 <div class="dot"></div>127 <div class="battery"><div class="level"></div></div>128 </div>129 </div>130 131 <div class="content">132 <!-- Search bar -->133 <div class="search-bar">134 <div class="icon">135 <svg viewBox="0 0 24 24">136 <circle cx="10" cy="10" r="6"></circle>137 <line x1="14.5" y1="14.5" x2="20" y2="20"></line>138 </svg>139 </div>140 <div class="placeholder">Search contacts & places</div>141 <div class="icon">142 <svg viewBox="0 0 24 24">143 <path d="M12 3 a4 4 0 0 1 4 4 v5 a4 4 0 0 1 -8 0 V7 a4 4 0 0 1 4 -4"></path>144 <line x1="12" y1="17" x2="12" y2="21"></line>145 </svg>146 </div>147 <div class="icon">148 <svg viewBox="0 0 24 24">149 <circle cx="12" cy="5" r="2.2"></circle>150 <circle cx="12" cy="12" r="2.2"></circle>151 <circle cx="12" cy="19" r="2.2"></circle>152 </svg>153 </div>154 </div>155 156 <!-- Create new contact -->157 <div class="create-row">158 <div class="icon">159 <svg viewBox="0 0 24 24">160 <circle cx="9" cy="8" r="3.5"></circle>161 <path d="M3 19 c2.5 -4 9.5 -4 12 0"></path>162 <line x1="17" y1="8" x2="23" y2="8"></line>163 <line x1="20" y1="5" x2="20" y2="11"></line>164 </svg>165 </div>166 <div>Create new contact</div>167 </div>168 169 <!-- Contacts list -->170 <div class="list">171 <!-- A -->172 <div class="contact-row">173 <div class="index">A</div>174 <div class="avatar" style="background:#ff9a30;">A</div>175 <div class="name">Anat</div>176 </div>177 178 <!-- B group -->179 <div class="contact-row">180 <div class="index">B</div>181 <div class="avatar" style="background:#58d0e6;">B</div>182 <div class="name">Boss</div>183 </div>184 <div class="contact-row">185 <div class="index"></div>186 <div class="avatar" style="background:#8e54ff;">B</div>187 <div class="name">Brian</div>188 </div>189 <div class="contact-row">190 <div class="index"></div>191 <div class="avatar" style="background:#ffd34f;">B</div>192 <div class="name">Briss</div>193 </div>194 <div class="contact-row">195 <div class="index"></div>196 <div class="avatar" style="background:#ff6b61;">B</div>197 <div class="name">Bubb</div>198 </div>199 200 <!-- C -->201 <div class="contact-row">202 <div class="index">C</div>203 <div class="avatar" style="background:#58c47a;">C</div>204 <div class="name">Cris</div>205 </div>206 207 <!-- D -->208 <div class="contact-row">209 <div class="index">D</div>210 <div class="avatar" style="background:#ffd34f;">D</div>211 <div class="name">Daeg</div>212 </div>213 214 <!-- F -->215 <div class="contact-row">216 <div class="index">F</div>217 <div class="avatar" style="background:#ff62cf;">F</div>218 <div class="name">Friend</div>219 </div>220 221 <!-- G -->222 <div class="contact-row">223 <div class="index">G</div>224 <div class="avatar" style="background:#5fd7e8;">G</div>225 <div class="name">Garhb</div>226 </div>227 228 <!-- L -->229 <div class="contact-row">230 <div class="index">L</div>231 <div class="avatar" style="background:#8b52ff;">L</div>232 <div class="name">Lara</div>233 </div>234 235 <!-- M -->236 <div class="contact-row" style="margin-bottom: 80px;">237 <div class="index">M</div>238 <div class="avatar" style="background:#ff6b61;">M</div>239 <div class="name">Mike</div>240 </div>241 </div>242 </div>243 244 <!-- Floating action button -->245 <div class="fab">246 <div class="dots">247 <div class="dot"></div><div class="dot"></div><div class="dot"></div>248 <div class="dot"></div><div class="dot"></div><div class="dot"></div>249 <div class="dot"></div><div class="dot"></div><div class="dot"></div>250 </div>251 </div>252 253 <!-- Scroll indicator -->254 <div class="scroll-indicator"></div>255 256 <!-- Bottom navigation bar -->257 <div class="bottom-bar">258 <div class="nav-item">259 <div class="icon">260 <svg viewBox="0 0 24 24">261 <path d="M12 2 L15 9 L22 9 L16.5 13.5 L18.5 21 L12 16.8 L5.5 21 L7.5 13.5 L2 9 L9 9 Z"></path>262 </svg>263 </div>264 <div>Favorites</div>265 </div>266 267 <div class="nav-item">268 <div class="icon">269 <svg viewBox="0 0 24 24">270 <circle cx="12" cy="12" r="9"></circle>271 <line x1="12" y1="12" x2="12" y2="6"></line>272 <line x1="12" y1="12" x2="17" y2="14"></line>273 </svg>274 </div>275 <div>Recents</div>276 </div>277 278 <div class="nav-item selected">279 <div class="icon">280 <svg viewBox="0 0 24 24">281 <circle cx="9" cy="8" r="3.4"></circle>282 <path d="M3 19 c2.5 -4 9.5 -4 12 0"></path>283 <circle cx="17.5" cy="9.5" r="2.8"></circle>284 <path d="M14.5 19 c1.8 -2.8 6.2 -2.6 8 0"></path>285 </svg>286 </div>287 <div>Contacts</div>288 </div>289 </div>290 291 <div class="home-indicator"></div>292</div>293</body>294</html>