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; font-family: Arial, Helvetica, 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 16  /* Status bar */17  .status-bar {18    position: absolute;19    top: 0;20    left: 0;21    right: 0;22    height: 90px;23    padding: 0 36px;24    display: flex;25    align-items: center;26    justify-content: space-between;27    color: #fff;28    font-weight: 600;29    font-size: 34px;30  }31  .status-right {32    display: flex;33    align-items: center;34    gap: 24px;35    color: #fff;36    font-size: 30px;37  }38  .icon { width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; }39  .battery svg, .wifi svg { fill: none; stroke: #fff; stroke-width: 3; }40 41  /* Header */42  .header {43    position: absolute;44    top: 90px;45    left: 0;46    right: 0;47    height: 140px;48    padding: 0 36px;49    display: flex;50    align-items: center;51    justify-content: space-between;52  }53  .header-left {54    display: flex;55    align-items: center;56    gap: 24px;57  }58  .back-icon svg { fill: none; stroke: #fff; stroke-width: 8; }59  .title { font-size: 64px; font-weight: 700; }60 61  .create-group {62    font-size: 36px;63    font-weight: 700;64    color: #BDBDBD;65    letter-spacing: 1px;66  }67 68  /* Search bar */69  .search-wrapper {70    position: absolute;71    top: 240px;72    left: 36px;73    right: 36px;74  }75  .search {76    height: 110px;77    border-radius: 55px;78    background: #1D1D1D;79    display: flex;80    align-items: center;81    gap: 24px;82    padding: 0 36px;83    color: #A5A5A5;84    font-size: 40px;85  }86  .search svg { stroke: #A5A5A5; fill: none; stroke-width: 6; }87 88  /* Section headings */89  .section {90    position: absolute;91    left: 36px;92    right: 36px;93    color: #A9A9A9;94    font-size: 40px;95    font-weight: 700;96  }97 98  /* List items */99  .list {100    position: absolute;101    left: 0;102    right: 0;103  }104  .row {105    display: flex;106    align-items: center;107    justify-content: space-between;108    padding: 18px 36px;109    height: 130px;110  }111  .row-left {112    display: flex;113    align-items: center;114    gap: 28px;115  }116  .avatar {117    width: 96px;118    height: 96px;119    border-radius: 50%;120    background: #E0E0E0;121    border: 1px solid #BDBDBD;122    color: #757575;123    font-size: 22px;124    display: flex;125    align-items: center;126    justify-content: center;127  }128  .name {129    font-size: 44px;130    font-weight: 600;131    color: #FFFFFF;132  }133  .pill {134    background: #2C2C2C;135    color: #FFFFFF;136    padding: 18px 40px;137    border-radius: 40px;138    font-size: 36px;139    font-weight: 700;140  }141  .undo {142    color: #3EA6FF;143    font-size: 36px;144    font-weight: 700;145  }146 147  /* "Your story" item */148  .subtext {149    color: #B8B8B8;150    font-size: 30px;151    margin-top: 6px;152    font-weight: 500;153  }154  .story-right {155    display: flex;156    align-items: center;157    gap: 24px;158  }159  .gear {160    width: 90px;161    height: 90px;162    background: #2C2C2C;163    border-radius: 50%;164    display: flex;165    align-items: center;166    justify-content: center;167  }168  .gear svg { fill: none; stroke: #FFFFFF; stroke-width: 4; }169 170  /* Bottom gesture bar */171  .gesture {172    position: absolute;173    bottom: 30px;174    left: 50%;175    transform: translateX(-50%);176    width: 520px;177    height: 12px;178    background: #FFFFFF;179    border-radius: 6px;180    opacity: 0.9;181  }182</style>183</head>184<body>185<div id="render-target">186 187  <!-- Status Bar -->188  <div class="status-bar">189    <div class="status-left">9:18</div>190    <div class="status-right">191      <div class="wifi icon">192        <svg viewBox="0 0 48 48">193          <path d="M6 18c9-8 27-8 36 0"></path>194          <path d="M12 24c7-6 17-6 24 0"></path>195          <path d="M18 30c4-4 8-4 12 0"></path>196          <circle cx="24" cy="36" r="2" fill="#fff"></circle>197        </svg>198      </div>199      <div class="battery icon">200        <svg viewBox="0 0 48 48">201          <rect x="2" y="10" width="38" height="26" rx="4"></rect>202          <rect x="42" y="17" width="4" height="12" rx="2"></rect>203          <rect x="6" y="14" width="30" height="18" fill="#fff"></rect>204        </svg>205      </div>206      <div style="font-size:30px; color:#fff;">100%</div>207    </div>208  </div>209 210  <!-- Header -->211  <div class="header">212    <div class="header-left">213      <div class="back-icon icon" style="width:54px;height:54px;">214        <svg viewBox="0 0 48 48">215          <path d="M30 6 L12 24 L30 42"></path>216        </svg>217      </div>218      <div class="title">Send to</div>219    </div>220    <div class="create-group">CREATE GROUP</div>221  </div>222 223  <!-- Search -->224  <div class="search-wrapper">225    <div class="search">226      <svg width="48" height="48" viewBox="0 0 48 48">227        <circle cx="20" cy="20" r="14"></circle>228        <line x1="32" y1="32" x2="46" y2="46"></line>229      </svg>230      <div>Search</div>231    </div>232  </div>233 234  <!-- Recents Section -->235  <div class="section" style="top: 380px;">Recents</div>236 237  <div class="list" style="top: 430px;">238    <!-- Amelia (selected with undo) -->239    <div class="row">240      <div class="row-left">241        <div class="avatar">[IMG: Avatar]</div>242        <div class="name">Amelia Miller</div>243      </div>244      <div class="undo">UNDO</div>245    </div>246 247    <!-- Natalie -->248    <div class="row">249      <div class="row-left">250        <div class="avatar">[IMG: Avatar]</div>251        <div class="name">Natalie Larson</div>252      </div>253      <div class="pill">SEND</div>254    </div>255  </div>256 257  <!-- More ways to share -->258  <div class="section" style="top: 740px;">More ways to share</div>259 260  <div class="list" style="top: 800px;">261    <!-- Your story -->262    <div class="row" style="height: 160px;">263      <div class="row-left" style="align-items: flex-start;">264        <div class="avatar">[IMG: Story avatar]</div>265        <div>266          <div class="name">Your story</div>267          <div class="subtext">Visible on Messenger and Facebook for 24 hours</div>268        </div>269      </div>270      <div class="story-right">271        <div class="gear">272          <svg viewBox="0 0 48 48">273            <circle cx="24" cy="24" r="8"></circle>274            <circle cx="24" cy="24" r="3" fill="#FFFFFF"></circle>275            <path d="M24 4 v8"></path>276            <path d="M24 36 v8"></path>277            <path d="M4 24 h8"></path>278            <path d="M36 24 h8"></path>279            <path d="M10 10 l6 6"></path>280            <path d="M32 32 l6 6"></path>281            <path d="M38 10 l-6 6"></path>282            <path d="M10 38 l6-6"></path>283          </svg>284        </div>285        <div class="pill">ADD</div>286      </div>287    </div>288  </div>289 290  <!-- Suggested -->291  <div class="section" style="top: 1060px;">Suggested</div>292 293  <div class="list" style="top: 1110px;">294    <!-- Abs Cde -->295    <div class="row">296      <div class="row-left">297        <div class="avatar">[IMG: Avatar]</div>298        <div class="name">Abs Cde</div>299      </div>300      <div class="pill">SEND</div>301    </div>302 303    <!-- Richard Wagner -->304    <div class="row">305      <div class="row-left">306        <div class="avatar">[IMG: Avatar]</div>307        <div class="name">Richard Wagner</div>308      </div>309      <div class="pill">SEND</div>310    </div>311  </div>312 313  <!-- Bottom gesture bar -->314  <div class="gesture"></div>315</div>316</body>317</html>