GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<title>Send To UI</title>5<style>6  body { margin: 0; padding: 0; background: transparent; }7  #render-target {8    width: 1080px;9    height: 2400px;10    position: relative;11    overflow: hidden;12    background: #000;13    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";14    color: #fff;15  }16  .status-bar {17    height: 100px;18    padding: 0 36px;19    display: flex;20    align-items: center;21    justify-content: space-between;22    color: #fff;23    font-weight: 600;24    font-size: 40px;25  }26  .status-icons {27    display: flex;28    align-items: center;29    gap: 22px;30  }31  .title-bar {32    height: 120px;33    padding: 0 36px;34    display: flex;35    align-items: center;36    justify-content: space-between;37  }38  .title-left {39    display: flex;40    align-items: center;41    gap: 24px;42  }43  .title-text {44    font-size: 64px;45    font-weight: 700;46  }47  .link-right {48    font-size: 40px;49    font-weight: 700;50    color: #ffffff;51    letter-spacing: 1px;52  }53  .search-box {54    margin: 24px 48px 16px;55    height: 120px;56    border-radius: 60px;57    background: #252525;58    display: flex;59    align-items: center;60    gap: 24px;61    padding: 0 40px;62    color: #cfcfcf;63    font-size: 42px;64  }65  .section-title {66    color: #a9a9a9;67    font-size: 40px;68    font-weight: 700;69    padding: 20px 48px 10px;70  }71  .row {72    padding: 18px 48px;73    display: flex;74    align-items: center;75    justify-content: space-between;76  }77  .left {78    display: flex;79    align-items: center;80    gap: 28px;81  }82  .avatar {83    width: 96px;84    height: 96px;85    border-radius: 50%;86    background: #E0E0E0;87    border: 1px solid #BDBDBD;88    display: flex;89    align-items: center;90    justify-content: center;91    color: #757575;92    font-size: 24px;93  }94  .name {95    font-size: 48px;96    font-weight: 700;97    color: #fff;98  }99  .send-btn, .add-btn {100    background: #2f2f2f;101    color: #fff;102    border: none;103    border-radius: 44px;104    padding: 24px 46px;105    font-size: 40px;106    font-weight: 800;107  }108  .share-row {109    padding: 24px 48px;110    display: flex;111    align-items: center;112    justify-content: space-between;113  }114  .share-left {115    display: flex;116    align-items: center;117    gap: 28px;118  }119  .share-texts {120    display: flex;121    flex-direction: column;122    gap: 10px;123  }124  .share-title {125    font-size: 48px;126    font-weight: 800;127  }128  .share-sub {129    font-size: 34px;130    color: #b0b0b0;131    max-width: 600px;132  }133  .right-actions {134    display: flex;135    align-items: center;136    gap: 28px;137  }138  .icon-btn {139    width: 100px;140    height: 100px;141    border-radius: 28px;142    background: #2a2a2a;143    display: flex;144    align-items: center;145    justify-content: center;146  }147  .home-indicator {148    position: absolute;149    bottom: 34px;150    left: 50%;151    transform: translateX(-50%);152    width: 640px;153    height: 14px;154    border-radius: 8px;155    background: #ffffff;156    opacity: 0.9;157  }158  /* Helpers */159  .divider-space { height: 8px; }160</style>161</head>162<body>163<div id="render-target">164 165  <!-- Status Bar -->166  <div class="status-bar">167    <div>9:18</div>168    <div class="status-icons">169      <!-- simple round app icons -->170      <svg width="36" height="36"><circle cx="18" cy="18" r="16" fill="#fff"/></svg>171      <svg width="36" height="36"><circle cx="18" cy="18" r="16" fill="#fff"/></svg>172      <svg width="36" height="36"><circle cx="18" cy="18" r="16" fill="#fff"/></svg>173      <!-- WiFi -->174      <svg width="48" height="36" viewBox="0 0 48 36" fill="none">175        <path d="M4 14c8-8 32-8 40 0" stroke="#fff" stroke-width="4" stroke-linecap="round"/>176        <path d="M10 20c6-6 22-6 28 0" stroke="#fff" stroke-width="4" stroke-linecap="round"/>177        <circle cx="24" cy="26" r="3" fill="#fff"/>178      </svg>179      <!-- Battery + percentage -->180      <svg width="64" height="36" viewBox="0 0 64 36" fill="none">181        <rect x="2" y="8" width="52" height="20" rx="4" stroke="#fff" stroke-width="3"/>182        <rect x="54" y="12" width="6" height="12" rx="2" fill="#fff"/>183        <rect x="6" y="12" width="44" height="12" rx="2" fill="#fff"/>184      </svg>185      <div style="font-size:36px;">100%</div>186    </div>187  </div>188 189  <!-- Title Bar -->190  <div class="title-bar">191    <div class="title-left">192      <!-- Back Arrow -->193      <svg width="54" height="54" viewBox="0 0 24 24" fill="none">194        <path d="M15 19L8 12l7-7" stroke="#fff" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>195      </svg>196      <div class="title-text">Send to</div>197    </div>198    <div class="link-right">CREATE GROUP</div>199  </div>200 201  <!-- Search -->202  <div class="search-box">203    <!-- Search Icon -->204    <svg width="48" height="48" viewBox="0 0 24 24" fill="none">205      <circle cx="11" cy="11" r="7" stroke="#cfcfcf" stroke-width="2"/>206      <path d="M20 20l-5-5" stroke="#cfcfcf" stroke-width="2" stroke-linecap="round"/>207    </svg>208    <div>Search</div>209  </div>210 211  <!-- Recents -->212  <div class="section-title">Recents</div>213 214  <div class="row">215    <div class="left">216      <div class="avatar">[IMG: User Avatar]</div>217      <div class="name">Amelia Miller</div>218    </div>219    <button class="send-btn">SEND</button>220  </div>221 222  <div class="row">223    <div class="left">224      <div class="avatar">[IMG: User Avatar]</div>225      <div class="name">Natalie Larson</div>226    </div>227    <button class="send-btn">SEND</button>228  </div>229 230  <!-- More ways to share -->231  <div class="section-title" style="padding-top: 36px;">More ways to share</div>232 233  <div class="share-row">234    <div class="share-left">235      <div class="avatar">[IMG: User Avatar]</div>236      <div class="share-texts">237        <div class="share-title">Your story</div>238        <div class="share-sub">Visible on Messenger and Facebook for 24 hours</div>239      </div>240    </div>241    <div class="right-actions">242      <div class="icon-btn">243        <!-- Gear icon -->244        <svg width="48" height="48" viewBox="0 0 24 24" fill="none">245          <circle cx="12" cy="12" r="3" stroke="#fff" stroke-width="2"/>246          <path d="M12 2v3M12 19v3M4.6 5.6l2.1 2.1M17.3 16.3l2.1 2.1M2 12h3M19 12h3M4.6 18.4l2.1-2.1M17.3 7.7l2.1-2.1" stroke="#fff" stroke-width="2" stroke-linecap="round"/>247        </svg>248      </div>249      <button class="add-btn">ADD</button>250    </div>251  </div>252 253  <!-- Suggested -->254  <div class="section-title">Suggested</div>255 256  <div class="row">257    <div class="left">258      <div class="avatar">[IMG: User Avatar]</div>259      <div class="name">Abs Cde</div>260    </div>261    <button class="send-btn">SEND</button>262  </div>263 264  <div class="row">265    <div class="left">266      <div class="avatar">[IMG: User Avatar]</div>267      <div class="name">Richard Wagner</div>268    </div>269    <button class="send-btn">SEND</button>270  </div>271 272  <!-- Home indicator -->273  <div class="home-indicator"></div>274 275</div>276</body>277</html>