GD-ML/AndroidCode

1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Send To UI</title>5<style>6  body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }7  #render-target {8    width: 1080px;9    height: 2400px;10    position: relative;11    overflow: hidden;12    background: #000000;13    color: #ffffff;14  }15  /* Status bar */16  .status-bar {17    position: absolute;18    top: 0;19    left: 0;20    width: 1080px;21    height: 90px;22    display: flex;23    align-items: center;24    justify-content: space-between;25    padding: 0 40px;26    color: #fff;27    font-size: 34px;28  }29  .status-icons {30    display: flex;31    align-items: center;32    gap: 20px;33  }34  .battery {35    display: inline-flex;36    align-items: center;37    gap: 10px;38    font-size: 32px;39  }40  .battery svg { width: 36px; height: 20px; }41  /* App bar */42  .app-bar {43    position: absolute;44    top: 90px;45    left: 0;46    width: 1080px;47    height: 130px;48    display: flex;49    align-items: center;50    padding: 0 36px;51    box-sizing: border-box;52  }53  .back-btn {54    width: 72px;55    height: 72px;56    display: inline-flex;57    align-items: center;58    justify-content: center;59    margin-right: 16px;60  }61  .app-title {62    font-size: 58px;63    font-weight: 700;64    flex: 1;65  }66  .app-action {67    font-size: 40px;68    font-weight: 700;69    color: #e0e0e0;70  }71  /* Search bar */72  .search-bar {73    position: absolute;74    top: 230px;75    left: 36px;76    width: 1008px;77    height: 120px;78    border-radius: 60px;79    background: #2a2a2a;80    display: flex;81    align-items: center;82    padding: 0 40px;83    box-sizing: border-box;84    color: #bdbdbd;85    font-size: 42px;86    letter-spacing: 0.2px;87  }88  .search-bar svg { width: 46px; height: 46px; margin-right: 22px; fill: #bdbdbd; }89  /* Section title */90  .section-title {91    position: relative;92    margin: 40px 36px 16px 36px;93    color: #9e9e9e;94    font-size: 40px;95    font-weight: 700;96  }97  /* Rows */98  .list {99    position: absolute;100    left: 0;101    width: 1080px;102  }103  .row {104    width: 1080px;105    height: 140px;106    display: flex;107    align-items: center;108    padding: 0 36px;109    box-sizing: border-box;110    gap: 28px;111  }112  .avatar {113    width: 104px;114    height: 104px;115    border-radius: 52px;116    background: #E0E0E0;117    border: 1px solid #BDBDBD;118    display: flex;119    align-items: center;120    justify-content: center;121    color: #757575;122    font-size: 26px;123  }124  .name {125    font-size: 48px;126    font-weight: 700;127    flex: 1;128  }129  .pill {130    min-width: 170px;131    height: 88px;132    padding: 0 28px;133    border-radius: 44px;134    background: #303030;135    color: #ffffff;136    font-size: 36px;137    font-weight: 800;138    display: inline-flex;139    align-items: center;140    justify-content: center;141  }142  .pill.gray { background: #2d2d2d; color: #9e9e9e; }143  /* More ways to share */144  .story-row .name {145    display: flex;146    flex-direction: column;147    justify-content: center;148    gap: 6px;149  }150  .story-title { font-size: 48px; font-weight: 800; }151  .story-sub { font-size: 34px; color: #bdbdbd; }152  .gear {153    width: 96px;154    height: 96px;155    background: #2d2d2d;156    border-radius: 48px;157    display: inline-flex;158    align-items: center;159    justify-content: center;160    margin-right: 16px;161  }162  .gear svg { width: 54px; height: 54px; fill: #eeeeee; }163  /* Suggested avatars with accent */164  .avatar.purple {165    background: #7b3df2;166    border-color: #6a2ee0;167    color: #e9ddff;168  }169  /* Bottom gesture bar */170  .gesture-bar {171    position: absolute;172    bottom: 48px;173    left: 50%;174    transform: translateX(-50%);175    width: 780px;176    height: 14px;177    background: #e0e0e0;178    border-radius: 7px;179    opacity: 0.7;180  }181</style>182</head>183<body>184<div id="render-target">185 186  <!-- Status bar -->187  <div class="status-bar">188    <div>9:19</div>189    <div class="status-icons">190      <svg width="32" height="32" viewBox="0 0 24 24" fill="#fff"><path d="M12 2a10 10 0 100 20 10 10 0 000-20zm1 11H6v-2h7v2z"/></svg>191      <svg width="32" height="32" viewBox="0 0 24 24" fill="#fff"><circle cx="12" cy="12" r="10" opacity="0.2"/><path d="M10.5 7l5.5 5-5.5 5V7z" fill="#fff"/></svg>192      <svg width="32" height="32" viewBox="0 0 24 24" fill="#fff"><path d="M5 3h14v2H5zM5 8h14v2H5zM5 13h14v2H5z"/></svg>193      <div class="battery">194        <svg viewBox="0 0 28 14"><rect x="1" y="2" width="24" height="10" rx="2" ry="2" fill="none" stroke="#fff" stroke-width="2"/><rect x="3" y="4" width="18" height="6" fill="#fff"/><rect x="25" y="5" width="2" height="4" fill="#fff"/></svg>195        <span>100%</span>196      </div>197    </div>198  </div>199 200  <!-- App bar -->201  <div class="app-bar">202    <div class="back-btn">203      <svg viewBox="0 0 24 24" fill="#fff"><path d="M15.5 19l-7-7 7-7 1.5 1.5-5.5 5.5 5.5 5.5z"/></svg>204    </div>205    <div class="app-title">Send to</div>206    <div class="app-action">CREATE GROUP</div>207  </div>208 209  <!-- Search -->210  <div class="search-bar">211    <svg viewBox="0 0 24 24"><path d="M10 2a8 8 0 015.9 13.6l4.2 4.2-1.4 1.4-4.2-4.2A8 8 0 1110 2zm0 2a6 6 0 100 12 6 6 0 000-12z"/></svg>212    Search213  </div>214 215  <!-- Lists -->216  <div class="list" style="top: 380px;">217    <div class="section-title">Recents</div>218 219    <div class="row">220      <div class="avatar">Avatar</div>221      <div class="name">Amelia Miller</div>222      <div class="pill gray">SENT</div>223    </div>224 225    <div class="row">226      <div class="avatar">[IMG: Floral Avatar]</div>227      <div class="name">Natalie Larson</div>228      <div class="pill">SEND</div>229    </div>230 231    <div class="section-title" style="margin-top: 34px;">More ways to share</div>232 233    <div class="row story-row">234      <div class="avatar purple">Avatar</div>235      <div class="name">236        <div class="story-title">Your story</div>237        <div class="story-sub">Visible on Messenger and Facebook for 24 hours</div>238      </div>239      <div class="gear">240        <svg viewBox="0 0 24 24"><path d="M12 8a4 4 0 100 8 4 4 0 000-8zm9.4 4a7.4 7.4 0 00-.2-1.7l2-1.6-2-3.5-2.4.8a7.6 7.6 0 00-1.5-1L14.7 2h-5.4L8.7 3.4c-.5.3-1 .6-1.5 1L4.8 3.6l-2 3.5 2 1.6c-.1.6-.2 1.1-.2 1.7s.1 1.1.2 1.7l-2 1.6 2 3.5 2.4-.8c.5.4 1 .7 1.5 1L9.3 22h5.4l.6-1.4c.5-.3 1-.6 1.5-1l2.4.8 2-3.5-2-1.6c.2-.6.3-1.1.2-1.7z"/></svg>241      </div>242      <div class="pill">ADD</div>243    </div>244 245    <div class="section-title" style="margin-top: 34px;">Suggested</div>246 247    <div class="row">248      <div class="avatar">Avatar</div>249      <div class="name">Abs Cde</div>250      <div class="pill">SEND</div>251    </div>252 253    <div class="row">254      <div class="avatar purple">Avatar</div>255      <div class="name">Richard Wagner</div>256      <div class="pill">SEND</div>257    </div>258  </div>259 260  <!-- Bottom gesture bar -->261  <div class="gesture-bar"></div>262</div>263</body>264</html>