GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Contacts - Groups</title>6<meta name="viewport" content="width=1080, initial-scale=1.0">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: #2f2f2f;15    font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;16    color: #eee;17  }18 19  /* Header */20  .topbar {21    position: absolute;22    left: 0; top: 0; width: 100%;23    height: 340px;24    background: #f57c00;25    box-shadow: 0 2px 0 rgba(0,0,0,0.15) inset;26  }27  .status-bar {28    height: 96px;29    padding: 0 28px;30    display: flex;31    align-items: center;32    justify-content: space-between;33    color: #fff;34    font-size: 36px;35    letter-spacing: 0.5px;36  }37  .status-icons {38    display: flex; align-items: center; gap: 22px;39    color: #fff; font-size: 32px;40  }41  .header-row {42    display: flex;43    align-items: center;44    justify-content: space-between;45    padding: 24px 28px 0 48px;46  }47  .title {48    font-size: 82px;49    font-weight: 600;50    color: #fff;51    line-height: 1.1;52    margin-top: 12px;53  }54  .header-actions {55    display: flex; gap: 36px; align-items: center; margin-right: 16px;56  }57  .icon-btn svg { width: 48px; height: 48px; fill: #fff; opacity: 0.95; }58 59  /* Content list area */60  .content {61    position: absolute;62    left: 0; top: 340px;63    right: 0; bottom: 180px;64    background: #313234;65    padding: 40px 0 0 0;66  }67  .list {68    padding: 30px 36px;69  }70  .item {71    display: flex;72    align-items: center;73    gap: 36px;74    padding: 28px 8px;75    border-radius: 12px;76  }77  .avatar {78    width: 120px; height: 120px; border-radius: 60px;79    display: flex; align-items: center; justify-content: center;80    box-shadow: 0 2px 4px rgba(0,0,0,0.25) inset;81    flex-shrink: 0;82  }83  .avatar svg { width: 72px; height: 72px; }84  .item .label {85    font-size: 48px;86    color: #e7e7e7;87  }88 89  /* Floating action buttons */90  .fabs {91    position: absolute;92    left: 0; right: 0; bottom: 260px;93    display: flex; justify-content: center; align-items: center;94    pointer-events: none;95  }96  .fab-center, .fab-add {97    background: #f57c00;98    color: #fff;99    box-shadow: 0 10px 20px rgba(0,0,0,0.35), 0 2px 3px rgba(0,0,0,0.25);100    pointer-events: auto;101  }102  .fab-center {103    width: 160px; height: 160px; border-radius: 80px;104    display: flex; align-items: center; justify-content: center;105  }106  .fab-add {107    position: absolute; right: 64px;108    width: 150px; height: 150px; border-radius: 28px;109    display: flex; align-items: center; justify-content: center;110  }111  .fab-center svg, .fab-add svg { width: 72px; height: 72px; fill: #fff; }112 113  /* Bottom navigation */114  .bottom-nav {115    position: absolute; left: 0; right: 0; bottom: 0;116    height: 180px; background: #3a3a3a;117    border-top: 1px solid #2d2d2d;118  }119  .nav-items {120    position: absolute; left: 0; right: 0; bottom: 0;121    display: flex; justify-content: space-around; align-items: center;122    padding: 22px 0 18px;123  }124  .nav-item {125    display: flex; flex-direction: column; align-items: center; gap: 10px;126    color: #cfcfcf; font-size: 30px;127  }128  .nav-item.active { color: #f57c00; }129  .nav-item svg { width: 56px; height: 56px; fill: currentColor; opacity: 0.95; }130 131  /* Gesture pill */132  .pill {133    position: absolute;134    left: 50%; transform: translateX(-50%);135    top: 8px;136    width: 260px; height: 12px; border-radius: 12px;137    background: #e6e6e6; opacity: 0.9;138  }139</style>140</head>141<body>142<div id="render-target">143 144  <!-- Orange header -->145  <div class="topbar">146    <div class="status-bar">147      <div>12:10</div>148      <div class="status-icons">149        <!-- Do-not-disturb circle -->150        <svg viewBox="0 0 24 24" width="34" height="34"><circle cx="12" cy="12" r="9" fill="none" stroke="white" stroke-width="2"/><rect x="6" y="11" width="12" height="2" fill="white"/></svg>151        <!-- Wifi -->152        <svg viewBox="0 0 24 24"><path d="M2 8c5-4 15-4 20 0l-2 2c-4-3-12-3-16 0L2 8zm4 6c3-2 9-2 12 0l-2 2c-2-1-6-1-8 0l-2-2zm4 6l2-2 2 2-2 2-2-2z" fill="#fff"/></svg>153        <!-- Battery 100% -->154        <svg viewBox="0 0 28 16" width="40" height="28">155          <rect x="1" y="3" width="22" height="10" rx="2" ry="2" fill="none" stroke="#fff" stroke-width="2"/>156          <rect x="3" y="5" width="18" height="6" rx="1" ry="1" fill="#fff"/>157          <rect x="23" y="6" width="3" height="4" rx="1" ry="1" fill="#fff"/>158        </svg>159        <span style="font-size:30px;color:#fff;">100%</span>160      </div>161    </div>162    <div class="header-row">163      <div class="title">Contacts</div>164      <div class="header-actions">165        <span class="icon-btn">166          <!-- Star -->167          <svg viewBox="0 0 24 24"><path d="M12 2l3 6 6 1-4 4 1 6-6-3-6 3 1-6-4-4 6-1z"/></svg>168        </span>169        <span class="icon-btn">170          <!-- Gear -->171          <svg viewBox="0 0 24 24"><path d="M12 8a4 4 0 100 8 4 4 0 000-8zm9 4l-2 1a7 7 0 00-.6 1.5l.4 2.2-2.2.4A7 7 0 0015 19l-1 2h-2l-1-2a7 7 0 00-1.6-1.9l-2.2-.4.4-2.2A7 7 0 006 13l-2-1v-2l2-1a7 7 0 001-1.6L6.6 5l2.2-.4A7 7 0 0011 3l1-2h2l1 2a7 7 0 001.6 1.6l2.2.4-.4 2.2A7 7 0 0019 9l2 1v2z"/></svg>172        </span>173        <span class="icon-btn">174          <!-- More vert -->175          <svg viewBox="0 0 24 24"><circle cx="12" cy="5" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="12" cy="19" r="2"/></svg>176        </span>177      </div>178    </div>179  </div>180 181  <!-- Content -->182  <div class="content">183    <div class="list">184 185      <div class="item">186        <div class="avatar" style="background:#1967a3;">187          <!-- People icon (white) -->188          <svg viewBox="0 0 24 24">189            <circle cx="9" cy="9" r="3" fill="#fff"/>190            <circle cx="15.5" cy="10" r="2.5" fill="#fff" opacity="0.9"/>191            <rect x="6" y="13" width="10" height="4" rx="2" fill="#fff"/>192          </svg>193        </div>194        <div class="label">Coworkers (0)</div>195      </div>196 197      <div class="item" style="margin-top:28px;">198        <div class="avatar" style="background:#b4362f;">199          <svg viewBox="0 0 24 24">200            <circle cx="9" cy="9" r="3" fill="#fff"/>201            <circle cx="15.5" cy="10" r="2.5" fill="#fff" opacity="0.9"/>202            <rect x="6" y="13" width="10" height="4" rx="2" fill="#fff"/>203          </svg>204        </div>205        <div class="label">Family (2)</div>206      </div>207 208      <div class="item" style="margin-top:28px;">209        <div class="avatar" style="background:#0d6e5f;">210          <svg viewBox="0 0 24 24">211            <circle cx="9" cy="9" r="3" fill="#fff"/>212            <circle cx="15.5" cy="10" r="2.5" fill="#fff" opacity="0.9"/>213            <rect x="6" y="13" width="10" height="4" rx="2" fill="#fff"/>214          </svg>215        </div>216        <div class="label">Friends (2)</div>217      </div>218 219    </div>220  </div>221 222  <!-- Floating action buttons -->223  <div class="fabs">224    <div class="fab-center" title="Dialer">225      <!-- Grid of dots -->226      <svg viewBox="0 0 24 24">227        <circle cx="5" cy="5" r="1.8"/><circle cx="12" cy="5" r="1.8"/><circle cx="19" cy="5" r="1.8"/>228        <circle cx="5" cy="12" r="1.8"/><circle cx="12" cy="12" r="1.8"/><circle cx="19" cy="12" r="1.8"/>229        <circle cx="5" cy="19" r="1.8"/><circle cx="12" cy="19" r="1.8"/><circle cx="19" cy="19" r="1.8"/>230      </svg>231    </div>232    <div class="fab-add" title="Add">233      <svg viewBox="0 0 24 24"><rect x="10" y="4" width="4" height="16" rx="2" fill="#fff"/><rect x="4" y="10" width="16" height="4" rx="2" fill="#fff"/></svg>234    </div>235  </div>236 237  <!-- Bottom navigation -->238  <div class="bottom-nav">239    <div class="pill"></div>240    <div class="nav-items">241      <div class="nav-item">242        <!-- Person -->243        <svg viewBox="0 0 24 24"><circle cx="12" cy="8" r="3"/><path d="M4 20c0-3.5 4-5 8-5s8 1.5 8 5v1H4v-1z"/></svg>244        <div>Contacts</div>245      </div>246      <div class="nav-item">247        <svg viewBox="0 0 24 24"><path d="M12 2l3 6 6 1-4 4 1 6-6-3-6 3 1-6-4-4 6-1z"/></svg>248        <div>Favorites</div>249      </div>250      <div class="nav-item active">251        <svg viewBox="0 0 24 24"><circle cx="8" cy="8" r="3"/><circle cx="16" cy="9" r="2.5"/><path d="M3 20c0-2.8 3.5-4 7-4s7 1.2 7 4v1H3v-1z"/></svg>252        <div>Groups</div>253      </div>254    </div>255  </div>256 257</div>258</body>259</html>