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</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #FFFFFF;15  }16 17  /* Status bar */18  .status-bar {19    position: absolute;20    top: 0;21    left: 0;22    right: 0;23    height: 96px;24    padding: 0 36px;25    display: flex;26    align-items: center;27    justify-content: space-between;28    color: #000;29    font-size: 34px;30  }31  .status-icons {32    display: flex;33    align-items: center;34    gap: 28px;35  }36  .status-icons svg { display: block; }37 38  /* Header / Title bar */39  .header {40    position: absolute;41    top: 96px;42    left: 0;43    right: 0;44    height: 160px;45    display: flex;46    align-items: center;47    padding: 0 40px;48  }49  .back-btn {50    width: 72px;51    height: 72px;52    display: flex;53    align-items: center;54    justify-content: center;55    margin-right: 12px;56  }57  .title {58    font-size: 56px;59    font-weight: 600;60    color: #111;61  }62  .header-ok {63    margin-left: auto;64    font-size: 40px;65    color: #9E9E9E;66    font-weight: 600;67  }68  .header-divider {69    position: absolute;70    top: 256px;71    left: 0;72    right: 0;73    height: 1px;74    background: #E9E9E9;75  }76 77  /* Content area */78  .content {79    position: absolute;80    top: 256px;81    left: 0;82    right: 0;83    bottom: 0;84    padding: 32px 40px;85  }86 87  .group-label {88    font-size: 36px;89    color: #9E9E9E;90    margin: 12px 0 24px 0;91  }92 93  .search-bar {94    height: 112px;95    border-radius: 56px;96    background: #F2F2F2;97    display: flex;98    align-items: center;99    padding: 0 32px;100    gap: 20px;101    color: #9E9E9E;102    font-size: 40px;103  }104  .search-bar svg { flex: 0 0 auto; }105 106  /* Selected friend */107  .selected-wrap {108    margin-top: 36px;109    margin-left: 8px;110    width: 190px;111  }112  .avatar {113    position: relative;114    width: 160px;115    height: 160px;116    border-radius: 50%;117    background: #E0E0E0;118    border: 1px solid #BDBDBD;119    display: flex;120    align-items: center;121    justify-content: center;122    color: #757575;123    font-size: 26px;124    text-align: center;125  }126  .avatar .close-pill {127    position: absolute;128    top: -6px;129    left: -6px;130    width: 52px;131    height: 52px;132    border-radius: 50%;133    background: #FFFFFF;134    border: 1px solid #DADADA;135    display: flex;136    align-items: center;137    justify-content: center;138    box-shadow: 0 1px 2px rgba(0,0,0,0.12);139  }140  .avatar .online-dot {141    position: absolute;142    right: 6px;143    bottom: 6px;144    width: 34px;145    height: 34px;146    border-radius: 50%;147    background: #22C55E;148    border: 4px solid #FFFFFF;149  }150  .selected-name {151    margin-top: 16px;152    font-size: 40px;153    color: #111;154  }155 156  /* Suggested section */157  .section-title {158    margin-top: 40px;159    font-size: 36px;160    color: #9E9E9E;161    font-weight: 600;162  }163 164  .contact-row {165    margin-top: 24px;166    height: 140px;167    display: flex;168    align-items: center;169    justify-content: space-between;170    padding-right: 24px;171  }172  .contact-left {173    display: flex;174    align-items: center;175    gap: 28px;176    padding-left: 8px;177  }178  .contact-avatar {179    width: 96px;180    height: 96px;181    border-radius: 50%;182    background: #E0E0E0;183    border: 1px solid #BDBDBD;184    display: flex;185    align-items: center;186    justify-content: center;187    color: #757575;188    font-size: 22px;189    text-align: center;190  }191  .contact-name {192    font-size: 44px;193    color: #111;194  }195  .select-ring {196    width: 56px;197    height: 56px;198    border-radius: 50%;199    border: 6px solid #BDBDBD;200    background: transparent;201  }202 203  /* Home indicator */204  .home-indicator {205    position: absolute;206    bottom: 36px;207    left: 50%;208    transform: translateX(-50%);209    width: 360px;210    height: 16px;211    background: #7E7E7E;212    border-radius: 10px;213  }214</style>215</head>216<body>217<div id="render-target">218 219  <!-- Status bar -->220  <div class="status-bar">221    <div class="status-time">2:36</div>222    <div class="status-icons">223      <!-- Simple signal icon -->224      <svg width="32" height="32" viewBox="0 0 24 24">225        <path d="M3 17h2v4H3zm4-4h2v8H7zm4-4h2v12h-2zm4-4h2v16h-2z" fill="#555"/>226      </svg>227      <!-- Wi-Fi icon -->228      <svg width="32" height="32" viewBox="0 0 24 24">229        <path d="M12 18.5a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3z" fill="#555"/>230        <path d="M4 12c4.5-4 11.5-4 16 0" stroke="#555" stroke-width="2" fill="none" stroke-linecap="round"/>231        <path d="M7 14.5c3-2.5 7-2.5 10 0" stroke="#555" stroke-width="2" fill="none" stroke-linecap="round"/>232      </svg>233      <!-- Battery icon -->234      <svg width="40" height="32" viewBox="0 0 28 16">235        <rect x="1" y="1" width="22" height="14" rx="2" ry="2" fill="none" stroke="#555" stroke-width="2"/>236        <rect x="3" y="3" width="18" height="10" fill="#555"/>237        <rect x="24" y="5" width="3" height="6" rx="1" fill="#555"/>238      </svg>239    </div>240  </div>241 242  <!-- Header -->243  <div class="header">244    <div class="back-btn">245      <svg width="56" height="56" viewBox="0 0 24 24">246        <path d="M15 6L9 12l6 6" stroke="#111" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/>247      </svg>248    </div>249    <div class="title">Choose friends</div>250    <div class="header-ok">OK</div>251  </div>252  <div class="header-divider"></div>253 254  <!-- Content -->255  <div class="content">256    <div class="group-label">Group name (optional)</div>257 258    <div class="search-bar">259      <svg width="44" height="44" viewBox="0 0 24 24">260        <circle cx="11" cy="11" r="7" stroke="#8A8A8A" stroke-width="2" fill="none"/>261        <path d="M20 20l-4.5-4.5" stroke="#8A8A8A" stroke-width="2" stroke-linecap="round"/>262      </svg>263      <div>Search</div>264    </div>265 266    <div class="selected-wrap">267      <div class="avatar">268        <div>[IMG: User Avatar]</div>269        <div class="close-pill">270          <svg width="24" height="24" viewBox="0 0 24 24">271            <path d="M6 6l12 12M18 6L6 18" stroke="#111" stroke-width="2" stroke-linecap="round"/>272          </svg>273        </div>274        <div class="online-dot"></div>275      </div>276      <div class="selected-name">Richard</div>277    </div>278 279    <div class="section-title">Suggested</div>280 281    <div class="contact-row">282      <div class="contact-left">283        <div class="contact-avatar">[IMG: User Avatar]</div>284        <div class="contact-name">Amelia Miller</div>285      </div>286      <div class="select-ring"></div>287    </div>288  </div>289 290  <!-- Home indicator -->291  <div class="home-indicator"></div>292</div>293</body>294</html>