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>Choose friends UI</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: #FFFFFF;15    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Helvetica Neue", Arial, sans-serif;16    color: #111;17  }18 19  /* Status bar */20  .status-bar {21    position: absolute;22    top: 0;23    left: 0;24    width: 100%;25    height: 96px;26    display: flex;27    align-items: center;28    justify-content: space-between;29    padding: 0 40px;30    box-sizing: border-box;31    color: #000;32    font-size: 34px;33  }34  .status-icons {35    display: flex;36    align-items: center;37    gap: 22px;38  }39  .dot { width: 10px; height: 10px; background: #666; border-radius: 50%; display: inline-block; }40 41  /* Header */42  .header {43    position: absolute;44    top: 96px;45    left: 0;46    width: 100%;47    height: 128px;48    display: flex;49    align-items: center;50    box-sizing: border-box;51    padding: 0 32px;52  }53  .back-btn {54    width: 80px;55    height: 80px;56    display: flex;57    align-items: center;58    justify-content: center;59  }60  .header-title {61    flex: 1;62    text-align: left;63    font-size: 48px;64    font-weight: 600;65    padding-left: 8px;66  }67  .header-action {68    color: #1E88E5;69    font-size: 40px;70    font-weight: 600;71    padding: 0 16px;72  }73 74  .sub-label {75    position: absolute;76    top: 224px;77    left: 48px;78    font-size: 34px;79    color: #808080;80  }81 82  /* Search bar */83  .search-bar {84    position: absolute;85    top: 288px;86    left: 48px;87    width: 984px;88    height: 96px;89    background: #F2F3F5;90    border-radius: 48px;91    display: flex;92    align-items: center;93    box-sizing: border-box;94    padding: 0 28px;95    color: #A0A0A0;96    font-size: 36px;97    gap: 20px;98  }99  .search-placeholder { color: #A0A0A0; }100 101  /* Selected avatars */102  .selected-row {103    position: absolute;104    top: 420px;105    left: 48px;106    display: flex;107    gap: 80px;108    align-items: flex-start;109  }110  .friend {111    width: 220px;112  }113  .avatar-wrap {114    position: relative;115    width: 170px;116    height: 170px;117    border-radius: 50%;118    overflow: hidden;119    background: #E0E0E0;120    border: 1px solid #BDBDBD;121    display: flex;122    align-items: center;123    justify-content: center;124    color: #757575;125    font-size: 26px;126  }127  .close-chip {128    position: absolute;129    top: -10px;130    right: -10px;131    width: 54px;132    height: 54px;133    background: #FFFFFF;134    border: 1px solid #D0D0D0;135    border-radius: 50%;136    display: flex;137    align-items: center;138    justify-content: center;139    box-shadow: 0 1px 3px rgba(0,0,0,0.15);140  }141  .presence {142    position: absolute;143    right: 6px;144    bottom: 6px;145    width: 30px;146    height: 30px;147    background: #2ECC71;148    border: 3px solid #FFFFFF;149    border-radius: 50%;150  }151  .friend-name {152    margin-top: 16px;153    font-size: 34px;154    color: #222;155  }156 157  /* Suggested section */158  .suggested-label {159    position: absolute;160    top: 740px;161    left: 48px;162    font-size: 34px;163    color: #9E9E9E;164    font-weight: 600;165  }166  .suggest-item {167    position: absolute;168    top: 820px;169    left: 48px;170    width: 984px;171    height: 120px;172    display: flex;173    align-items: center;174    justify-content: space-between;175    box-sizing: border-box;176    padding-right: 24px;177  }178  .suggest-left {179    display: flex;180    align-items: center;181    gap: 28px;182  }183  .suggest-avatar {184    width: 88px;185    height: 88px;186    border-radius: 50%;187    background: #E0E0E0;188    border: 1px solid #BDBDBD;189    display: flex;190    align-items: center;191    justify-content: center;192    color: #757575;193    font-size: 22px;194  }195  .suggest-name {196    font-size: 40px;197    color: #222;198  }199  .check {200    width: 64px;201    height: 64px;202    border-radius: 50%;203    background: #1E88E5;204    display: flex;205    align-items: center;206    justify-content: center;207  }208  /* Bottom home indicator */209  .home-indicator {210    position: absolute;211    bottom: 54px;212    left: 50%;213    transform: translateX(-50%);214    width: 300px;215    height: 12px;216    background: #8E8E8E;217    border-radius: 12px;218  }219</style>220</head>221<body>222<div id="render-target">223  <!-- Status bar -->224  <div class="status-bar">225    <div>2:36</div>226    <div class="status-icons">227      <span class="dot"></span>228      <span class="dot"></span>229      <span class="dot"></span>230    </div>231  </div>232 233  <!-- Header -->234  <div class="header">235    <div class="back-btn" aria-label="Back">236      <svg width="40" height="40" viewBox="0 0 24 24" fill="none">237        <path d="M15 18L9 12L15 6" stroke="#000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>238      </svg>239    </div>240    <div class="header-title">Choose friends</div>241    <div class="header-action">OK</div>242  </div>243 244  <div class="sub-label">Group name (optional)</div>245 246  <!-- Search bar -->247  <div class="search-bar">248    <svg width="40" height="40" viewBox="0 0 24 24" fill="none">249      <circle cx="10" cy="10" r="6" stroke="#9E9E9E" stroke-width="2"></circle>250      <path d="M15 15L20 20" stroke="#9E9E9E" stroke-width="2" stroke-linecap="round"></path>251    </svg>252    <div class="search-placeholder">Search</div>253  </div>254 255  <!-- Selected friends -->256  <div class="selected-row">257    <div class="friend">258      <div class="avatar-wrap">259        [IMG: User Avatar]260        <div class="close-chip">261          <svg width="22" height="22" viewBox="0 0 24 24">262            <path d="M6 6L18 18M18 6L6 18" stroke="#000" stroke-width="2" stroke-linecap="round"/>263          </svg>264        </div>265        <div class="presence"></div>266      </div>267      <div class="friend-name">Richard</div>268    </div>269 270    <div class="friend">271      <div class="avatar-wrap">272        [IMG: User Avatar]273        <div class="close-chip">274          <svg width="22" height="22" viewBox="0 0 24 24">275            <path d="M6 6L18 18M18 6L6 18" stroke="#000" stroke-width="2" stroke-linecap="round"/>276          </svg>277        </div>278      </div>279      <div class="friend-name">Amelia</div>280    </div>281  </div>282 283  <!-- Suggested -->284  <div class="suggested-label">Suggested</div>285  <div class="suggest-item">286    <div class="suggest-left">287      <div class="suggest-avatar">[IMG: User]</div>288      <div class="suggest-name">Amelia Miller</div>289    </div>290    <div class="check" aria-label="Selected">291      <svg width="32" height="32" viewBox="0 0 24 24">292        <path d="M5 13L9 17L19 7" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>293      </svg>294    </div>295  </div>296 297  <!-- Bottom home indicator -->298  <div class="home-indicator"></div>299</div>300</body>301</html>