GD-ML/AndroidCode

1<!DOCTYPE html>2<html>3<head>4<meta charset="utf-8">5<title>Contacts UI</title>6<style>7  body { margin: 0; padding: 0; background: transparent; }8  #render-target {9    width: 1080px; height: 2400px;10    position: relative; overflow: hidden;11    background: #2f2f2f;12    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;13    color: #fff;14  }15 16  /* Header / App bar */17  .appbar {18    position: absolute;19    top: 0; left: 0; right: 0;20    height: 300px;21    background: #f57c00;22  }23  .statusbar {24    height: 80px;25    padding: 0 36px;26    display: flex;27    align-items: center;28    justify-content: space-between;29    color: #fff;30    font-size: 34px;31    opacity: 0.95;32  }33  .status-icons {34    display: flex; align-items: center; gap: 18px; font-size: 32px;35  }36  .appbar-title {37    margin-left: 48px;38    margin-top: 40px;39    font-size: 64px;40    font-weight: 600;41    letter-spacing: 0.3px;42  }43  .appbar-actions {44    position: absolute;45    right: 36px;46    bottom: 24px;47    display: flex; gap: 38px;48  }49  .icon-btn svg { width: 48px; height: 48px; }50 51  /* Content list */52  .content {53    position: absolute;54    top: 300px; left: 0; right: 0; bottom: 260px;55    padding-top: 10px;56  }57  .list {58    padding: 20px 0 0 0;59  }60  .item {61    display: flex; align-items: center;62    padding: 24px 36px;63    height: 150px;64  }65  .avatar {66    width: 100px; height: 100px; border-radius: 50%;67    display: flex; align-items: center; justify-content: center;68    font-size: 48px; font-weight: 700; color: #fff;69    box-shadow: 0 2px 8px rgba(0,0,0,0.25);70  }71  .name {72    color: #eaeaea;73    font-size: 44px;74    margin-left: 36px;75  }76 77  /* Right letter index */78  .alpha-index {79    position: absolute;80    right: 24px;81    top: 420px;82    display: flex; flex-direction: column; gap: 42px;83    color: #bdbdbd;84    font-size: 36px;85    letter-spacing: 2px;86  }87 88  /* Floating actions */89  .fab {90    position: absolute;91    bottom: 330px; left: 50%;92    transform: translateX(-50%);93    width: 160px; height: 160px; border-radius: 50%;94    background: #f57c00;95    box-shadow: 0 16px 26px rgba(0,0,0,0.35);96    display: flex; align-items: center; justify-content: center;97  }98  .fab-right {99    position: absolute;100    bottom: 330px; right: 80px;101    width: 160px; height: 160px; border-radius: 34px;102    background: #f57c00;103    box-shadow: 0 16px 26px rgba(0,0,0,0.35);104    display: flex; align-items: center; justify-content: center;105  }106 107  /* Bottom navigation */108  .bottom-nav {109    position: absolute;110    left: 0; right: 0; bottom: 0;111    height: 260px;112    background: #3a3a3a;113    border-top: 1px solid rgba(255,255,255,0.08);114    display: flex; align-items: center; justify-content: space-around;115    padding-bottom: 30px;116  }117  .nav-item {118    display: flex; flex-direction: column; align-items: center; gap: 16px;119    color: #eaeaea;120    font-size: 32px;121  }122  .nav-item .label { font-size: 32px; }123  .nav-item svg { width: 56px; height: 56px; }124  .nav-item.active { color: #f57c00; }125  .home-indicator {126    position: absolute; bottom: 190px; left: 50%;127    transform: translateX(-50%);128    width: 320px; height: 12px; border-radius: 8px;129    background: rgba(255,255,255,0.65);130  }131</style>132</head>133<body>134<div id="render-target">135 136  <!-- Orange header with status bar -->137  <div class="appbar">138    <div class="statusbar">139      <div>2:53</div>140      <div class="status-icons">141        <svg width="34" height="34" viewBox="0 0 24 24"><path fill="#fff" d="M4 10h16v8H4z"/><path fill="#fff" d="M7 6h10v2H7z"/></svg>142        <svg width="34" height="34" viewBox="0 0 24 24"><path fill="#fff" d="M12 3a9 9 0 1 0 0 18a9 9 0 0 0 0-18zm0 2a7 7 0 1 1 0 14a7 7 0 0 1 0-14z"/></svg>143        <div style="display:flex; align-items:center; gap:8px;">144          <svg width="32" height="32" viewBox="0 0 24 24"><path fill="#fff" d="M12 4l6 6H6z"/></svg>145          <span style="font-size:32px;">100%</span>146        </div>147      </div>148    </div>149    <div class="appbar-title">Contacts</div>150    <div class="appbar-actions">151      <div class="icon-btn">152        <svg viewBox="0 0 24 24">153          <path d="M12 17.3l-5.3 3 1-6.1L3 9.8l6.2-.9L12 3.5l2.8 5.4 6.2.9-4.7 4.4 1 6.1z"154                fill="none" stroke="#fff" stroke-width="2" stroke-linejoin="round"/>155        </svg>156      </div>157      <div class="icon-btn">158        <svg viewBox="0 0 24 24">159          <circle cx="12" cy="12" r="4" fill="none" stroke="#fff" stroke-width="2"/>160          <path d="M12 2v3M12 19v3M4.9 4.9l2.1 2.1M17 17l2.1 2.1M2 12h3M19 12h3M4.9 19.1l2.1-2.1M17 7l2.1-2.1"161                stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round"/>162        </svg>163      </div>164      <div class="icon-btn">165        <svg viewBox="0 0 24 24">166          <circle cx="12" cy="5" r="2.2" fill="#fff"/>167          <circle cx="12" cy="12" r="2.2" fill="#fff"/>168          <circle cx="12" cy="19" r="2.2" fill="#fff"/>169        </svg>170      </div>171    </div>172  </div>173 174  <!-- Content list -->175  <div class="content">176    <div class="list">177      <div class="item">178        <div class="avatar" style="background:#1e73be;">A</div>179        <div class="name">Andreas Wagner</div>180      </div>181      <div class="item">182        <div class="avatar" style="background:#1e73be;">C</div>183        <div class="name">Clara</div>184      </div>185      <div class="item">186        <div class="avatar" style="background:#1e73be;">C</div>187        <div class="name">Contacts+ Support</div>188      </div>189      <div class="item">190        <div class="avatar" style="background:#b21758;">M</div>191        <div class="name">MMM</div>192      </div>193      <div class="item">194        <div class="avatar" style="background:#0f6a60;">M</div>195        <div class="name">Monu</div>196      </div>197      <div class="item">198        <div class="avatar" style="background:#b5241f;">R</div>199        <div class="name">Ritu</div>200      </div>201      <div class="item">202        <div class="avatar" style="background:#b21758;">S</div>203        <div class="name">Sonu</div>204      </div>205    </div>206 207    <!-- Right-side alphabetical index -->208    <div class="alpha-index">209      <div>A</div>210      <div>C</div>211      <div>M</div>212      <div>R</div>213      <div>S</div>214    </div>215  </div>216 217  <!-- Floating center dialer -->218  <div class="fab">219    <svg width="80" height="80" viewBox="0 0 80 80">220      <circle cx="20" cy="20" r="6" fill="#fff"/>221      <circle cx="40" cy="20" r="6" fill="#fff"/>222      <circle cx="60" cy="20" r="6" fill="#fff"/>223      <circle cx="20" cy="40" r="6" fill="#fff"/>224      <circle cx="40" cy="40" r="6" fill="#fff"/>225      <circle cx="60" cy="40" r="6" fill="#fff"/>226      <circle cx="20" cy="60" r="6" fill="#fff"/>227      <circle cx="40" cy="60" r="6" fill="#fff"/>228      <circle cx="60" cy="60" r="6" fill="#fff"/>229    </svg>230  </div>231 232  <!-- Floating add button -->233  <div class="fab-right">234    <svg width="80" height="80" viewBox="0 0 24 24">235      <path d="M12 5v14M5 12h14" stroke="#fff" stroke-width="2.5" stroke-linecap="round"/>236    </svg>237  </div>238 239  <!-- Home indicator bar -->240  <div class="home-indicator"></div>241 242  <!-- Bottom navigation -->243  <div class="bottom-nav">244    <div class="nav-item active">245      <svg viewBox="0 0 24 24">246        <circle cx="12" cy="8" r="3.2" fill="#f57c00"/>247        <path d="M5 19c0-3.5 3.1-6 7-6s7 2.5 7 6" fill="none" stroke="#f57c00" stroke-width="2" stroke-linecap="round"/>248      </svg>249      <div class="label">Contacts</div>250    </div>251    <div class="nav-item">252      <svg viewBox="0 0 24 24">253        <path d="M12 17.3l-5.3 3 1-6.1L3 9.8l6.2-.9L12 3.5l2.8 5.4 6.2.9-4.7 4.4 1 6.1z"254              fill="none" stroke="#fff" stroke-width="2" stroke-linejoin="round"/>255      </svg>256      <div class="label">Favorites</div>257    </div>258    <div class="nav-item">259      <svg viewBox="0 0 24 24">260        <circle cx="9" cy="9" r="3" fill="#fff"/>261        <circle cx="16" cy="11" r="2.6" fill="#fff"/>262        <path d="M3 20c0-3.3 3.2-5.4 7-5.4 1.6 0 3 .3 4.2.9" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round"/>263        <path d="M13.8 20c.5-1.8 2.2-3.2 4.2-3.2 1 0 2 .2 2.8.6" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round"/>264      </svg>265      <div class="label">Groups</div>266    </div>267  </div>268 269</div>270</body>271</html>