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>Send To 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: #000000;15    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;16    color: #ffffff;17  }18 19  .status-bar {20    height: 90px;21    padding: 0 40px;22    display: flex;23    align-items: center;24    justify-content: space-between;25    color: #fff;26    font-weight: 600;27    font-size: 36px;28  }29  .status-icons {30    display: flex;31    gap: 26px;32    align-items: center;33  }34  .status-icons svg { width: 38px; height: 38px; fill: #fff; }35 36  .title-row {37    padding: 0 40px;38    height: 140px;39    display: flex;40    align-items: center;41    justify-content: space-between;42  }43  .left-title {44    display: flex;45    align-items: center;46    gap: 24px;47  }48  .back-icon svg { width: 56px; height: 56px; fill: #ffffff; }49  .screen-title { font-size: 60px; font-weight: 700; }50  .create-group { font-size: 38px; font-weight: 700; color: #ffffff; }51 52  .content { padding: 0 40px; }53 54  .search-bar {55    height: 116px;56    border-radius: 58px;57    background: #2A2A2A;58    display: flex;59    align-items: center;60    padding: 0 40px;61    gap: 24px;62    color: #9E9E9E;63    font-size: 40px;64    margin-bottom: 30px;65  }66  .search-bar svg { width: 48px; height: 48px; fill: #9E9E9E; }67 68  .list-row {69    padding: 22px 0;70    display: flex;71    align-items: center;72    justify-content: space-between;73  }74  .left-cell {75    display: flex;76    align-items: center;77    gap: 24px;78  }79  .avatar {80    width: 110px;81    height: 110px;82    border-radius: 50%;83    background: #E0E0E0;84    border: 1px solid #BDBDBD;85    display: flex;86    justify-content: center;87    align-items: center;88    color: #757575;89    font-size: 26px;90    text-align: center;91  }92  .text-block {93    display: flex;94    flex-direction: column;95    justify-content: center;96  }97  .title { font-size: 44px; font-weight: 600; color: #FFFFFF; }98  .subtitle { font-size: 34px; color: #A8A8A8; margin-top: 6px; }99 100  .pill-btn {101    background: #2E2E2E;102    color: #fff;103    border: none;104    border-radius: 50px;105    padding: 22px 42px;106    font-size: 34px;107    font-weight: 700;108  }109 110  .actions {111    display: flex;112    align-items: center;113    gap: 24px;114  }115  .icon-round {116    width: 100px;117    height: 100px;118    border-radius: 50px;119    background: #2E2E2E;120    display: flex;121    align-items: center;122    justify-content: center;123  }124  .icon-round svg { width: 48px; height: 48px; fill: #FFFFFF; }125 126  .section-title {127    color: #9E9E9E;128    font-size: 36px;129    font-weight: 600;130    margin-top: 24px;131    margin-bottom: 10px;132  }133 134  .group-avatars {135    position: relative;136    width: 130px;137    height: 110px;138  }139  .group-avatars .avatar {140    position: absolute;141    top: 0;142  }143  .group-avatars .a1 { left: 0; }144  .group-avatars .a2 { left: 50px; border: 3px solid #000; } /* overlap styling */145 146  .gesture-bar {147    position: absolute;148    bottom: 36px;149    left: 50%;150    transform: translateX(-50%);151    width: 360px;152    height: 14px;153    background: #E0E0E0;154    border-radius: 8px;155    opacity: 0.85;156  }157</style>158</head>159<body>160<div id="render-target">161  <!-- Status Bar -->162  <div class="status-bar">163    <div class="status-time">12:57</div>164    <div class="status-icons">165      <!-- location pin -->166      <svg viewBox="0 0 24 24"><path d="M12 2a7 7 0 0 0-7 7c0 5.25 7 13 7 13s7-7.75 7-13a7 7 0 0 0-7-7zm0 9.5a2.5 2.5 0 1 1 0-5 2.5 2.5 0 0 1 0 5z"/></svg>167      <!-- bell (notifications off style simple) -->168      <svg viewBox="0 0 24 24"><path d="M12 22a2 2 0 0 0 2-2H10a2 2 0 0 0 2 2zm8-6c-1.1-1.3-2-2.7-2-5V8a6 6 0 0 0-12 0v3c0 2.3-.9 3.7-2 5l-1 1h18l-1-1z"/></svg>169      <!-- message bubble -->170      <svg viewBox="0 0 24 24"><path d="M2 4h20v12H7l-5 4V4z"/></svg>171      <!-- dot -->172      <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="3"/></svg>173      <!-- wifi -->174      <svg viewBox="0 0 24 24"><path d="M12 18a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm-7-7 1.5 1.5a9 9 0 0 1 13 0L21 11a11 11 0 0 0-16 0zm3 3 1.5 1.5a5 5 0 0 1 7 0L17 14a7 7 0 0 0-10 0z"/></svg>175      <!-- battery -->176      <svg viewBox="0 0 24 24"><path d="M2 7h18v10H2V7zm20 3v4h-2V10h2z"/></svg>177    </div>178  </div>179 180  <!-- Title Row -->181  <div class="title-row">182    <div class="left-title">183      <div class="back-icon">184        <svg viewBox="0 0 24 24"><path d="M15.5 19 8 12l7.5-7 1.5 1.5L11 12l6 5.5z"/></svg>185      </div>186      <div class="screen-title">Send to</div>187    </div>188    <div class="create-group">CREATE GROUP</div>189  </div>190 191  <div class="content">192    <!-- Search -->193    <div class="search-bar">194      <svg viewBox="0 0 24 24"><path d="M15.5 14h-.8l-.3-.3a6.5 6.5 0 1 0-.9.9l.3.3v.8l5 5 1.5-1.5-5-5zm-6 0a4.5 4.5 0 1 1 0-9 4.5 4.5 0 0 1 0 9z"/></svg>195      <span>Search</span>196    </div>197 198    <!-- Your story -->199    <div class="list-row">200      <div class="left-cell">201        <div class="avatar">[IMG: Default avatar]</div>202        <div class="text-block">203          <div class="title">Your story</div>204          <div class="subtitle">Visible on Messenger and Facebook for 24 hours</div>205        </div>206      </div>207      <div class="actions">208        <div class="icon-round">209          <!-- gear -->210          <svg viewBox="0 0 24 24"><path d="M12 8a4 4 0 1 0 0 8 4 4 0 0 0 0-8zm9 4-2.2.5a7 7 0 0 1-.6 1.4l1.3 1.9-2 2-1.9-1.3a7 7 0 0 1-1.4.6L13 21h-2l-.5-2.2a7 7 0 0 1-1.4-.6l-1.9 1.3-2-2 1.3-1.9a7 7 0 0 1-.6-1.4L3 12V10l2.2-.5a7 7 0 0 1 .6-1.4L4.5 6.2l2-2L8.4 5.5a7 7 0 0 1 1.4-.6L10.9 3h2l.5 2.2a7 7 0 0 1 1.4.6l1.9-1.3 2 2-1.3 1.9c.3.45.5.93.6 1.4L21 10v2z"/></svg>211        </div>212        <button class="pill-btn">ADD</button>213      </div>214    </div>215 216    <!-- Recents -->217    <div class="section-title">Recents</div>218    <div class="list-row">219      <div class="left-cell">220        <div class="avatar">[IMG: Floral avatar]</div>221        <div class="text-block">222          <div class="title">Natalie Larson</div>223        </div>224      </div>225      <button class="pill-btn">SEND</button>226    </div>227 228    <div class="list-row">229      <div class="left-cell">230        <div class="group-avatars">231          <div class="avatar a1">[IMG: Avatar]</div>232          <div class="avatar a2">[IMG: Avatar]</div>233        </div>234        <div class="text-block">235          <div class="title">Friends</div>236          <div class="subtitle">Natalie, Richard</div>237        </div>238      </div>239      <button class="pill-btn">SEND</button>240    </div>241 242    <!-- Suggested -->243    <div class="section-title" style="margin-top: 26px;">Suggested</div>244 245    <div class="list-row">246      <div class="left-cell">247        <div class="avatar">[IMG: Purple avatar]</div>248        <div class="text-block">249          <div class="title">Richard Wagner</div>250        </div>251      </div>252      <button class="pill-btn">SEND</button>253    </div>254 255    <div class="list-row">256      <div class="left-cell">257        <div class="avatar">[IMG: Leaf avatar]</div>258        <div class="text-block">259          <div class="title">Jane Corbet</div>260        </div>261      </div>262      <button class="pill-btn">SEND</button>263    </div>264 265    <div class="list-row">266      <div class="left-cell">267        <div class="avatar">[IMG: Default avatar]</div>268        <div class="text-block">269          <div class="title">Andrew Reed</div>270        </div>271      </div>272      <button class="pill-btn">SEND</button>273    </div>274  </div>275 276  <!-- Gesture bar -->277  <div class="gesture-bar"></div>278</div>279</body>280</html>