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 Mock</title>7<style>8 body { margin: 0; padding: 0; background: transparent; }9 #render-target{10 width:1080px; height:2400px; position:relative; overflow:hidden;11 background:12 radial-gradient(1200px 1200px at 20% 0%, rgba(255,255,255,0.04), transparent 60%),13 linear-gradient(180deg, #0f1117 0%, #0f1f2b 30%, #0f2a3a 60%, #0e2433 100%);14 color:#eaeef3; font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;15 }16 .status-bar{17 position:absolute; top:0; left:0; right:0; height:96px; padding:0 28px;18 display:flex; align-items:flex-end; justify-content:space-between;19 color:#fff; font-weight:600; font-size:42px;20 background: linear-gradient(180deg, rgba(0,0,0,0.55), rgba(0,0,0,0.0));21 }22 .status-icons{ display:flex; align-items:center; gap:26px; font-size:34px; opacity:.95;}23 .dot{width:10px; height:10px; background:#d8d8d8; border-radius:50%;}24 .icon-round{ width:28px; height:28px; border:2px solid #d8d8d8; border-radius:50%; opacity:.9;}25 /* Tabs */26 .tabs{27 position:absolute; top:110px; left:0; right:0; height:120px; padding:0 24px 0 32px;28 display:flex; align-items:center; gap:36px;29 border-bottom:2px solid rgba(255,255,255,0.15);30 background:rgba(0,0,0,0.25);31 }32 .tab{33 width:96px; height:96px; border-radius:50%; display:flex; align-items:center; justify-content:center;34 color:#ff7b7b;35 }36 .tab svg{ width:48px; height:48px; opacity:.85; }37 .tab.inactive{ color:#c7cbd3; opacity:.6; }38 .tabs .spacer{ flex:1; }39 .pro-tag{ color:#66d18f; font-weight:800; letter-spacing:1px; margin-right:10px; }40 .small-store{ width:90px; height:90px; border-radius:16px; border:2px solid rgba(255,255,255,0.25); display:flex; align-items:center; justify-content:center; }41 /* Contacts list */42 .list-area{ position:absolute; top:240px; left:0; right:0; bottom:190px; padding:0 36px 0 28px; overflow:hidden; }43 .alpha{ color:#ff5b5b; font-weight:800; font-size:44px; margin:26px 0 10px 8px; }44 .divider{ height:2px; background:rgba(255,255,255,0.18); margin:12px 0 14px 0; }45 .row{ display:flex; align-items:center; gap:26px; padding:22px 0; }46 .avatar{47 width:128px; height:128px; border-radius:50%;48 background:#0b0b0d; border:10px solid #5e6873; display:flex; align-items:center; justify-content:center;49 font-size:48px; font-weight:800; color:#e6e6e6; letter-spacing:1px;50 }51 .info .name{ font-size:48px; font-weight:700; color:#e9edf3; }52 .info .phone{ font-size:38px; color:#b8c1ca; margin-top:4px; }53 /* Right floating action column */54 .fab-column{55 position:absolute; top:330px; right:24px; width:140px; display:flex; flex-direction:column; gap:38px; align-items:flex-end;56 }57 .fab{58 width:120px; height:120px; border-radius:50%; display:flex; align-items:center; justify-content:center;59 box-shadow:0 6px 20px rgba(0,0,0,0.35); border:4px solid rgba(255,255,255,0.55);60 color:#fff;61 }62 .fab svg{ width:56px; height:56px; }63 .call{ background:#0f8f6f; border-color:rgba(255,255,255,0.35); }64 .sms{ background:#3d8bd9; }65 .cal{ background:#ff8d7a; }66 .msg{ background:#4e86ff; }67 .bell{ background:#9c8ea6; }68 .mail{ background:#2b76b7; }69 .map{ background:#a9a9a9; }70 .rec{ background:#e35a5a; }71 .cal2{ background:#8a7769; }72 /* Bottom search dock */73 .dock{74 position:absolute; left:0; right:0; bottom:0; height:170px; padding:18px 32px;75 background:linear-gradient(180deg, rgba(0,0,0,0.35), rgba(0,0,0,0.6));76 display:flex; align-items:center; gap:24px;77 backdrop-filter: blur(6px);78 }79 .search-pill{80 flex:1; height:104px; border-radius:52px; background:rgba(255,255,255,0.08);81 display:flex; align-items:center; padding:0 30px; gap:22px; color:#eaeef3; font-size:46px; border:2px solid rgba(255,255,255,0.1);82 }83 .circle-btn{84 width:104px; height:104px; border-radius:50%; background:rgba(255,255,255,0.1);85 display:flex; align-items:center; justify-content:center; border:2px solid rgba(255,255,255,0.18);86 }87 .toast{88 position:absolute; bottom:170px; left:50%; transform:translateX(-50%);89 background:#e2e2e6; color:#2b2b2b; padding:18px 28px; border-radius:26px;90 font-size:40px; font-weight:600; box-shadow:0 6px 18px rgba(0,0,0,0.25);91 }92 .gesture{93 position:absolute; left:50%; bottom:18px; transform:translateX(-50%);94 width:280px; height:10px; border-radius:10px; background:#d6d6d6; opacity:0.9;95 }96</style>97</head>98<body>99<div id="render-target">100 <!-- Status Bar -->101 <div class="status-bar">102 <div>9:12</div>103 <div class="status-icons">104 <span class="icon-round"></span>105 <span class="icon-round"></span>106 <span class="icon-round"></span>107 <div class="dot"></div>108 <span class="icon-round"></span>109 <span class="icon-round"></span>110 </div>111 </div>112 113 <!-- Tabs -->114 <div class="tabs">115 <div class="tab">116 <!-- person -->117 <svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 12a5 5 0 1 0-0.001-10.001A5 5 0 0 0 12 12zm0 2c-4.418 0-8 2.239-8 5v1h16v-1c0-2.761-3.582-5-8-5z"/></svg>118 </div>119 <div class="tab inactive">120 <!-- group -->121 <svg viewBox="0 0 24 24" fill="currentColor"><path d="M7 11a4 4 0 1 0 0-8 4 4 0 0 0 0 8zm10 0a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7zM2 20v-1c0-2.8 3.6-5 8-5s8 2.2 8 5v1H2zm15 0v-1c0-1.4-.7-2.6-1.9-3.5 2.9.5 5.9 2 5.9 4.5v0H17z"/></svg>122 </div>123 <div class="tab inactive">124 <!-- star -->125 <svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 2l2.9 6 6.6.9-4.8 4.6 1.1 6.5L12 17l-5.8 3 1.1-6.5L2.5 8.9l6.6-.9L12 2z"/></svg>126 </div>127 <div class="tab inactive">128 <!-- clock -->129 <svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 2a10 10 0 1 0 0.001 20.001A10 10 0 0 0 12 2zm1 5h-2v6l5 3 1-1.7-4-2.3V7z"/></svg>130 </div>131 <div class="spacer"></div>132 <div class="pro-tag">PRO</div>133 <div class="small-store">134 <!-- store icon -->135 <svg viewBox="0 0 24 24" width="46" height="46" fill="#cfead9"><path d="M3 9l2-5h14l2 5H3zm0 2h18v9H3v-9zm6 2v5h6v-5H9z"/></svg>136 </div>137 </div>138 139 <!-- Floating action icons right -->140 <div class="fab-column">141 <div class="fab call" title="Call">142 <svg viewBox="0 0 24 24" fill="#fff"><path d="M6.6 10.8c1.5 2.9 3.7 5.1 6.6 6.6l2.2-2.2c.3-.3.7-.4 1.1-.2 1.2.4 2.6.6 4 .6.6 0 1 .4 1 1v3.6c0 .6-.4 1-1 1C10.5 22.2 1.8 13.5 1.8 2.5c0-.6.4-1 1-1H6.4c.6 0 1 .4 1 1 0 1.5.2 2.8.6 4 .1.4 0 .8-.3 1.1L6.6 10.8z"/></svg>143 </div>144 <div class="fab sms" title="SMS">145 <svg viewBox="0 0 24 24" fill="#fff"><path d="M4 4h16a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2H8l-4 3V6a2 2 0 0 1 2-2z"/></svg>146 </div>147 <div class="fab cal" title="Calendar">148 <svg viewBox="0 0 24 24" fill="#fff"><path d="M7 2h2v3H7V2zm8 0h2v3h-2V2zM4 5h16a2 2 0 0 1 2 2v13H2V7a2 2 0 0 1 2-2zm0 6h16v8H4v-8z"/></svg>149 </div>150 <div class="fab msg" title="Message">151 <svg viewBox="0 0 24 24" fill="#fff"><path d="M4 3h16a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H9l-5 4V5a2 2 0 0 1 2-2z"/></svg>152 </div>153 <div class="fab bell" title="Remind">154 <svg viewBox="0 0 24 24" fill="#fff"><path d="M12 22a2.5 2.5 0 0 1-2.5-2h5A2.5 2.5 0 0 1 12 22zm8-6v-5a8 8 0 1 0-16 0v5l-2 2v1h20v-1l-2-2z"/></svg>155 </div>156 <div class="fab mail" title="Mail">157 <svg viewBox="0 0 24 24" fill="#fff"><path d="M2 5h20v14H2V5zm2 2v10h16V7l-8 5-8-5z"/></svg>158 </div>159 <div class="fab map" title="Map">160 <svg viewBox="0 0 24 24" fill="#fff"><path d="M9 3l6 2 6-2v18l-6 2-6-2-6 2V5l6-2zm0 2v14l6 2V7l-6-2z"/></svg>161 </div>162 <div class="fab rec" title="REC">163 <svg viewBox="0 0 24 24" fill="#fff"><circle cx="12" cy="12" r="6"/></svg>164 </div>165 <div class="fab cal2" title="Calendar 2">166 <svg viewBox="0 0 24 24" fill="#fff"><path d="M5 4h14a2 2 0 0 1 2 2v14H3V6a2 2 0 0 1 2-2zm0 6h14v8H5v-8zM8 2h2v3H8V2zm6 0h2v3h-2V2z"/></svg>167 </div>168 </div>169 170 <!-- Contacts -->171 <div class="list-area">172 <div class="alpha">A</div>173 <div class="divider"></div>174 <div class="row">175 <div class="avatar">An</div>176 <div class="info">177 <div class="name">Anat</div>178 <div class="phone">87596 41230</div>179 </div>180 </div>181 <div class="row">182 <div class="avatar">An</div>183 <div class="info">184 <div class="name">Anya</div>185 <div class="phone">9359323867</div>186 </div>187 </div>188 189 <div class="alpha" style="margin-top:16px;">B</div>190 <div class="divider"></div>191 <div class="row">192 <div class="avatar">Bo</div>193 <div class="info">194 <div class="name">Boss</div>195 <div class="phone">097456995568</div>196 </div>197 </div>198 <div class="row">199 <div class="avatar">Br</div>200 <div class="info">201 <div class="name">Brian</div>202 <div class="phone">9149069348</div>203 </div>204 </div>205 206 <div class="alpha">C</div>207 <div class="divider"></div>208 <div class="row">209 <div class="avatar">Cr</div>210 <div class="info">211 <div class="name">Cris</div>212 <div class="phone">78096324580</div>213 </div>214 </div>215 216 <div class="alpha">D</div>217 <div class="divider"></div>218 <div class="row">219 <div class="avatar">Da</div>220 <div class="info">221 <div class="name">Daeg</div>222 <div class="phone">7456902138875</div>223 </div>224 </div>225 226 <div class="alpha">F</div>227 <div class="divider"></div>228 <div class="row">229 <div class="avatar">Fr</div>230 <div class="info">231 <div class="name">Friend</div>232 <div class="phone">80974569412</div>233 </div>234 </div>235 236 <div class="alpha">G</div>237 <div class="divider"></div>238 <div class="row">239 <div class="avatar">Ga</div>240 <div class="info">241 <div class="name">Garhb</div>242 <div class="phone">68741239009</div>243 </div>244 </div>245 <div class="row">246 <div class="avatar">GT</div>247 <div class="info">248 <div class="name">Gym Trainer</div>249 <div class="phone">9068700907</div>250 </div>251 </div>252 253 <div class="alpha">L</div>254 <div class="divider"></div>255 </div>256 257 <!-- Toast -->258 <div class="toast">Deleted</div>259 260 <!-- Bottom Dock -->261 <div class="dock">262 <div class="search-pill">263 <svg width="52" height="52" viewBox="0 0 24 24" fill="#eaeef3"><path d="M10 2a8 8 0 1 1 0 16 8 8 0 0 1 0-16zm11 18-5-5"/></svg>264 <div>Search</div>265 </div>266 <div class="circle-btn">267 <svg width="48" height="48" viewBox="0 0 24 24" fill="#eaeef3"><path d="M11 5h2v14h-2zM5 11h14v2H5z"/></svg>268 </div>269 <div class="circle-btn">270 <svg width="48" height="48" viewBox="0 0 24 24" fill="#eaeef3"><path d="M12 2a3 3 0 0 1 3 3v2h2a3 3 0 0 1 3 3v9a3 3 0 0 1-3 3H7a3 3 0 0 1-3-3V10a3 3 0 0 1 3-3h2V5a3 3 0 0 1 3-3zm-3 7H7a1 1 0 0 0-1 1v9a1 1 0 0 0 1 1h10a1 1 0 0 0 1-1v-9a1 1 0 0 0-1-1h-2v2H9V9z"/></svg>271 </div>272 </div>273 274 <div class="gesture"></div>275</div>276</body>277</html>