GD-ML/AndroidCode

1<!DOCTYPE html>2<html>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; height:2400px; position:relative; overflow:hidden;11    background:#2f2f2f; font-family: Arial, Helvetica, sans-serif; color:#ffffff;12  }13 14  /* Top app bar */15  .header {16    position:absolute; top:0; left:0; width:100%; height:420px;17    background:#F57C00;18  }19  .status-bar {20    height:90px; padding:22px 32px; color:#fff;21    display:flex; align-items:center; justify-content:space-between; font-size:36px;22  }23  .status-right { display:flex; align-items:center; gap:24px; }24  .header-title {25    font-size:76px; font-weight:600; margin:40px 0 0 48px; color:#fff;26  }27  .header-actions {28    position:absolute; right:28px; top:160px; display:flex; gap:36px;29  }30  .header-actions svg { width:44px; height:44px; fill:#fff; opacity:0.9; }31  .header-divider {32    position:absolute; bottom:0; left:0; width:100%; height:8px; background:#2f2f2f;33  }34 35  /* Groups list */36  .groups {37    position:absolute; top:428px; left:0; width:100%;38    padding:24px 48px; display:flex; flex-direction:column; gap:64px;39  }40  .group {41    display:flex; align-items:center; gap:32px;42  }43  .avatar {44    width:120px; height:120px; border-radius:50%; display:flex;45    align-items:center; justify-content:center; box-shadow:0 2px 4px rgba(0,0,0,0.3);46  }47  .blue { background:#1E6FA9; }48  .red { background:#B53535; }49  .green { background:#0E6B5F; }50  .group svg { width:70px; height:70px; }51  .group-title {52    font-size:50px; color:#F1F1F1;53  }54 55  /* Floating actions */56  .fab-main {57    position:absolute; bottom:360px; left:50%; transform:translateX(-50%);58    width:180px; height:180px; border-radius:50%; background:#F57C00; color:#fff;59    display:flex; align-items:center; justify-content:center;60    box-shadow:0 16px 24px rgba(0,0,0,0.5);61  }62  .fab-plus {63    position:absolute; bottom:360px; right:64px;64    width:156px; height:156px; border-radius:36px; background:#F57C00;65    display:flex; align-items:center; justify-content:center; box-shadow:0 14px 20px rgba(0,0,0,0.5);66  }67  .fab-plus svg, .fab-main svg { fill:#fff; }68 69  /* Bottom navigation */70  .navbar {71    position:absolute; bottom:0; left:0; width:100%; height:230px;72    background:#3a3a3a; border-top:1px solid #484848;73    display:flex; align-items:flex-start; justify-content:space-around; padding-top:40px;74  }75  .nav-item { display:flex; flex-direction:column; align-items:center; gap:18px; }76  .nav-item svg { width:54px; height:54px; fill:#CFCFCF; }77  .nav-label { font-size:34px; color:#CFCFCF; }78  .nav-item.active svg { fill:#F57C00; }79  .nav-item.active .nav-label { color:#F57C00; }80 81  /* Gesture bar */82  .gesture {83    position:absolute; bottom:240px; left:50%; transform:translateX(-50%);84    width:320px; height:14px; background:#DBDBDB; border-radius:10px; opacity:0.85;85  }86</style>87</head>88<body>89<div id="render-target">90  <!-- Header -->91  <div class="header">92    <div class="status-bar">93      <div class="time">12:08</div>94      <div class="status-right">95        <!-- Do Not Disturb -->96        <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" fill="none" stroke="#fff" stroke-width="2"/><rect x="6" y="11" width="12" height="2" fill="#fff"/></svg>97        <!-- WiFi -->98        <svg viewBox="0 0 24 24">99          <path d="M12 18c.9 0 1.6.7 1.6 1.6S12.9 21.2 12 21.2 10.4 20.5 10.4 19.6 11.1 18 12 18z" />100          <path d="M4 10.5c4.9-4 11.1-4 16 0l-1.6 1.6c-3.6-3-9.2-3-12.8 0L4 10.5z" />101          <path d="M7.5 13.7c3.2-2.6 5.8-2.6 9 0l-1.6 1.6c-2-1.7-3.8-1.7-5.8 0l-1.6-1.6z" />102        </svg>103        <!-- Battery -->104        <svg viewBox="0 0 36 24">105          <rect x="1" y="4" width="28" height="16" rx="3" ry="3" fill="none" stroke="#fff" stroke-width="2"/>106          <rect x="30" y="8" width="4" height="8" rx="1" fill="#fff"/>107          <rect x="4" y="7" width="22" height="10" fill="#fff"/>108        </svg>109        <div style="font-size:32px;">100%</div>110      </div>111    </div>112    <div class="header-title">Contacts</div>113    <div class="header-actions">114      <!-- Star icon -->115      <svg viewBox="0 0 24 24"><path d="M12 2l3 6 6 .9-4.5 4.2 1.1 6.2L12 16.7 6.4 19.3l1.1-6.2L3 8.9 9 8l3-6z"/></svg>116      <!-- Gear icon (simple) -->117      <svg viewBox="0 0 24 24">118        <circle cx="12" cy="12" r="3.2"/>119        <path d="M12 2l2 1 2.5-1 .8 2.7 2.7.8-1 2.5 1.5 2-2 1.6.3 2.8-2.8.3-1.6 2-2-1.5-2 1.5-1.6-2-2.8-.3.3-2.8-2-1.6 1.5-2-1-2.5 2.7-.8.8-2.7 2.5 1z" fill="none" stroke="#fff" stroke-width="1.2"/>120      </svg>121      <!-- More (vertical dots) -->122      <svg viewBox="0 0 24 24"><circle cx="12" cy="5" r="2.2"/><circle cx="12" cy="12" r="2.2"/><circle cx="12" cy="19" r="2.2"/></svg>123    </div>124    <div class="header-divider"></div>125  </div>126 127  <!-- Groups list -->128  <div class="groups">129    <div class="group">130      <div class="avatar blue">131        <svg viewBox="0 0 64 64">132          <circle cx="24" cy="22" r="9" fill="#fff"/>133          <rect x="14" y="34" width="20" height="8" rx="4" fill="#fff"/>134          <circle cx="42" cy="20" r="9" fill="#fff" opacity="0.95"/>135          <rect x="32" y="32" width="20" height="8" rx="4" fill="#fff" opacity="0.95"/>136        </svg>137      </div>138      <div class="group-title">Coworkers (0)</div>139    </div>140    <div class="group">141      <div class="avatar red">142        <svg viewBox="0 0 64 64">143          <circle cx="24" cy="22" r="9" fill="#fff"/>144          <rect x="14" y="34" width="20" height="8" rx="4" fill="#fff"/>145          <circle cx="42" cy="20" r="9" fill="#fff" opacity="0.95"/>146          <rect x="32" y="32" width="20" height="8" rx="4" fill="#fff" opacity="0.95"/>147        </svg>148      </div>149      <div class="group-title">Family (2)</div>150    </div>151    <div class="group">152      <div class="avatar green">153        <svg viewBox="0 0 64 64">154          <circle cx="24" cy="22" r="9" fill="#fff"/>155          <rect x="14" y="34" width="20" height="8" rx="4" fill="#fff"/>156          <circle cx="42" cy="20" r="9" fill="#fff" opacity="0.95"/>157          <rect x="32" y="32" width="20" height="8" rx="4" fill="#fff" opacity="0.95"/>158        </svg>159      </div>160      <div class="group-title">Friends (2)</div>161    </div>162  </div>163 164  <!-- Floating actions -->165  <div class="fab-main">166    <svg viewBox="0 0 90 90">167      <circle cx="20" cy="20" r="6"/><circle cx="45" cy="20" r="6"/><circle cx="70" cy="20" r="6"/>168      <circle cx="20" cy="45" r="6"/><circle cx="45" cy="45" r="6"/><circle cx="70" cy="45" r="6"/>169      <circle cx="20" cy="70" r="6"/><circle cx="45" cy="70" r="6"/><circle cx="70" cy="70" r="6"/>170    </svg>171  </div>172  <div class="fab-plus">173    <svg viewBox="0 0 72 72">174      <rect x="32" y="12" width="8" height="48" rx="4"/>175      <rect x="12" y="32" width="48" height="8" rx="4"/>176    </svg>177  </div>178 179  <!-- Gesture pill -->180  <div class="gesture"></div>181 182  <!-- Bottom navigation -->183  <div class="navbar">184    <div class="nav-item">185      <!-- Contacts icon -->186      <svg viewBox="0 0 24 24">187        <circle cx="12" cy="7" r="4"/>188        <path d="M4 20c0-3.4 3.7-6 8-6s8 2.6 8 6H4z"/>189      </svg>190      <div class="nav-label">Contacts</div>191    </div>192    <div class="nav-item">193      <!-- Star outline -->194      <svg viewBox="0 0 24 24">195        <path d="M12 2l3 6 6 .9-4.5 4.2 1.1 6.2L12 16.7 6.4 19.3l1.1-6.2L3 8.9 9 8l3-6z"/>196      </svg>197      <div class="nav-label">Favorites</div>198    </div>199    <div class="nav-item active">200      <!-- Groups icon -->201      <svg viewBox="0 0 24 24">202        <circle cx="8" cy="9" r="3"/>203        <circle cx="16" cy="8" r="3"/>204        <path d="M2 20c0-3 3-5 6-5s6 2 6 5H2z"/>205        <path d="M12 20c.2-2.5 2.6-4.3 5.5-4.3 2.9 0 4.9 1.8 5.5 4.3H12z"/>206      </svg>207      <div class="nav-label">Groups</div>208    </div>209  </div>210</div>211</body>212</html>