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 - Groups</title>7<style>8  body { margin: 0; padding: 0; background: transparent; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #2E2E2E;15    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Helvetica Neue", Arial, sans-serif;16    color: #fff;17  }18 19  /* Header */20  .header {21    position: relative;22    width: 100%;23    height: 280px;24    background: #F57C00;25  }26  .status {27    position: absolute;28    top: 18px;29    left: 40px;30    right: 40px;31    height: 40px;32    display: flex;33    align-items: center;34    color: #fff;35    font-size: 34px;36    opacity: 0.95;37  }38  .status .right {39    margin-left: auto;40    display: inline-flex;41    align-items: center;42    gap: 18px;43  }44  .header-title {45    position: absolute;46    left: 44px;47    bottom: 26px;48    font-size: 88px;49    font-weight: 600;50    letter-spacing: 0.5px;51  }52 53  /* Group list */54  .content {55    padding-top: 24px;56  }57  .group-item {58    display: flex;59    align-items: center;60    gap: 30px;61    padding: 26px 40px;62  }63  .avatar {64    width: 120px;65    height: 120px;66    border-radius: 60px;67    display: inline-flex;68    align-items: center;69    justify-content: center;70  }71  .avatar.blue { background: #2476A6; }72  .avatar.red  { background: #B63A36; }73  .avatar.teal { background: #0E6F63; }74  .group-name {75    font-size: 52px;76    color: #EDEDED;77  }78  .group-count {79    color: #BDBDBD;80    margin-left: 14px;81    font-size: 46px;82  }83 84  /* Popup menu */85  .popup {86    position: absolute;87    right: 42px;88    top: 170px;89    width: 730px;90    background: #333333;91    border-radius: 26px;92    box-shadow: 0 18px 40px rgba(0,0,0,0.45);93    padding: 24px 0;94  }95  .popup .item {96    padding: 30px 44px;97    color: #EDEDED;98    font-size: 42px;99  }100  .popup .item + .item { border-top: 1px solid rgba(255,255,255,0.06); }101 102  /* FABs */103  .fab-center {104    position: absolute;105    left: 0; right: 0;106    margin: 0 auto;107    bottom: 330px;108    width: 170px;109    height: 170px;110    background: #F57C00;111    border-radius: 50%;112    box-shadow: 0 16px 28px rgba(0,0,0,0.4), 0 4px 10px rgba(0,0,0,0.3);113    display: flex; align-items: center; justify-content: center;114  }115  .fab-right {116    position: absolute;117    right: 110px;118    bottom: 330px;119    width: 150px;120    height: 150px;121    background: #F57C00;122    border-radius: 32px;123    box-shadow: 0 14px 26px rgba(0,0,0,0.38), 0 4px 10px rgba(0,0,0,0.28);124    display: flex; align-items: center; justify-content: center;125  }126 127  /* Bottom nav */128  .bottom-nav {129    position: absolute;130    bottom: 0;131    left: 0; right: 0;132    height: 200px;133    background: #3A3A3A;134    display: flex;135    justify-content: space-around;136    align-items: center;137    padding-bottom: 18px;138  }139  .nav-item {140    display: flex;141    flex-direction: column;142    align-items: center;143    gap: 18px;144    color: #E0E0E0;145    font-size: 34px;146  }147  .nav-item.active { color: #F57C00; }148 149  /* Home indicator */150  .home-indicator {151    position: absolute;152    bottom: 214px;153    left: 50%;154    transform: translateX(-50%);155    width: 360px;156    height: 12px;157    background: #E9E9E9;158    border-radius: 8px;159    opacity: 0.85;160  }161 162  /* Simple icon helpers */163  svg { display: block; }164</style>165</head>166<body>167<div id="render-target">168 169  <!-- Header -->170  <div class="header">171    <div class="status">172      <span>12:09</span>173      <div class="right">174        <!-- Signal icon -->175        <svg width="32" height="32" viewBox="0 0 24 24" fill="#fff" opacity="0.9">176          <rect x="2" y="14" width="3" height="8" rx="1"></rect>177          <rect x="7" y="11" width="3" height="11" rx="1"></rect>178          <rect x="12" y="8" width="3" height="14" rx="1"></rect>179          <rect x="17" y="5" width="3" height="17" rx="1"></rect>180        </svg>181        <!-- Battery icon -->182        <svg width="44" height="32" viewBox="0 0 32 16" fill="none">183          <rect x="1" y="3" width="26" height="10" rx="2" stroke="#fff" stroke-width="2"></rect>184          <rect x="28" y="6" width="3" height="4" rx="1" fill="#fff"></rect>185          <rect x="3" y="5" width="22" height="6" rx="1" fill="#fff"></rect>186        </svg>187        <span style="font-size:30px;">100%</span>188      </div>189    </div>190    <div class="header-title">Contacts</div>191  </div>192 193  <!-- Popup menu -->194  <div class="popup">195    <div class="item">Import contacts from a .vcf file</div>196    <div class="item">Export contacts to a .vcf file</div>197    <div class="item">About</div>198    <div class="item">More apps from us</div>199  </div>200 201  <!-- Groups list -->202  <div class="content">203    <div class="group-item">204      <div class="avatar blue">205        <!-- group icon -->206        <svg width="64" height="64" viewBox="0 0 24 24" fill="#fff">207          <circle cx="9" cy="8" r="3"></circle>208          <circle cx="17" cy="10" r="2.5"></circle>209          <path d="M4 18c0-2.5 3-4 5-4s5 1.5 5 4v1H4v-1z" fill="#fff"></path>210          <path d="M14 18c0-1.8 2.2-3 3.8-3 1.1 0 2.2.3 3.2 1v2H14z" fill="#fff" opacity="0.9"></path>211        </svg>212      </div>213      <div class="group-name">Coworkers<span class="group-count"></span></div>214    </div>215 216    <div class="group-item">217      <div class="avatar red">218        <svg width="64" height="64" viewBox="0 0 24 24" fill="#fff">219          <circle cx="9" cy="8" r="3"></circle>220          <circle cx="17" cy="10" r="2.5"></circle>221          <path d="M4 18c0-2.5 3-4 5-4s5 1.5 5 4v1H4v-1z" fill="#fff"></path>222          <path d="M14 18c0-1.8 2.2-3 3.8-3 1.1 0 2.2.3 3.2 1v2H14z" fill="#fff" opacity="0.9"></path>223        </svg>224      </div>225      <div class="group-name">Family <span class="group-count">(2)</span></div>226    </div>227 228    <div class="group-item">229      <div class="avatar teal">230        <svg width="64" height="64" viewBox="0 0 24 24" fill="#fff">231          <circle cx="9" cy="8" r="3"></circle>232          <circle cx="17" cy="10" r="2.5"></circle>233          <path d="M4 18c0-2.5 3-4 5-4s5 1.5 5 4v1H4v-1z" fill="#fff"></path>234          <path d="M14 18c0-1.8 2.2-3 3.8-3 1.1 0 2.2.3 3.2 1v2H14z" fill="#fff" opacity="0.9"></path>235        </svg>236      </div>237      <div class="group-name">Friends <span class="group-count">(2)</span></div>238    </div>239  </div>240 241  <!-- Floating action buttons -->242  <div class="fab-center">243    <!-- 3x3 dots -->244    <svg width="80" height="80" viewBox="0 0 24 24" fill="#fff" opacity="0.95">245      <circle cx="4" cy="4" r="1.6"></circle>246      <circle cx="12" cy="4" r="1.6"></circle>247      <circle cx="20" cy="4" r="1.6"></circle>248      <circle cx="4" cy="12" r="1.6"></circle>249      <circle cx="12" cy="12" r="1.6"></circle>250      <circle cx="20" cy="12" r="1.6"></circle>251      <circle cx="4" cy="20" r="1.6"></circle>252      <circle cx="12" cy="20" r="1.6"></circle>253      <circle cx="20" cy="20" r="1.6"></circle>254    </svg>255  </div>256 257  <div class="fab-right">258    <svg width="72" height="72" viewBox="0 0 24 24" fill="none">259      <path d="M12 5v14M5 12h14" stroke="#fff" stroke-width="2.8" stroke-linecap="round"/>260    </svg>261  </div>262 263  <!-- Bottom navigation -->264  <div class="bottom-nav">265    <div class="nav-item">266      <svg width="46" height="46" viewBox="0 0 24 24" fill="none" stroke="#E0E0E0" stroke-width="2" stroke-linecap="round">267        <circle cx="12" cy="8" r="3.2"></circle>268        <path d="M5 20c0-3.2 3-5 7-5s7 1.8 7 5"></path>269      </svg>270      <div>Contacts</div>271    </div>272    <div class="nav-item">273      <svg width="46" height="46" viewBox="0 0 24 24" fill="none" stroke="#E0E0E0" stroke-width="2" stroke-linejoin="round">274        <path d="M12 3l2.8 5.6 6.2.9-4.5 4.3 1.1 6.2L12 17.8 6.4 20l1.1-6.2L3 9.5l6.2-.9L12 3z"></path>275      </svg>276      <div>Favorites</div>277    </div>278    <div class="nav-item active">279      <svg width="46" height="46" viewBox="0 0 24 24" fill="#F57C00">280        <circle cx="9" cy="8" r="3"></circle>281        <circle cx="17" cy="10" r="2.5"></circle>282        <path d="M4 18c0-2.5 3-4 5-4s5 1.5 5 4v1H4v-1z"></path>283        <path d="M14 18c0-1.8 2.2-3 3.8-3 1.1 0 2.2.3 3.2 1v2H14z"></path>284      </svg>285      <div>Groups</div>286    </div>287  </div>288 289  <!-- Home indicator -->290  <div class="home-indicator"></div>291 292</div>293</body>294</html>