GD-ML/AndroidCode

1<!DOCTYPE html>2<html>3<head>4<meta charset="UTF-8">5<title>Send To - UI Mock</title>6<style>7  body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; }8  #render-target {9    width: 1080px;10    height: 2400px;11    position: relative;12    overflow: hidden;13    background: #000000;14  }15 16  /* Top system bar */17  .system-bar {18    position: absolute;19    top: 0;20    left: 0;21    right: 0;22    height: 80px;23    color: #ffffff;24    display: flex;25    align-items: center;26    justify-content: space-between;27    padding: 0 28px;28    font-size: 32px;29    letter-spacing: 0.2px;30  }31  .sys-right {32    display: flex;33    align-items: center;34    gap: 22px;35  }36  .sys-icon svg { width: 34px; height: 34px; fill: #ffffff; opacity: 0.9; }37 38  /* Header */39  .header {40    position: absolute;41    top: 80px;42    left: 0;43    right: 0;44    height: 100px;45    display: flex;46    align-items: center;47    color: #fff;48    padding: 0 32px;49  }50  .back-btn {51    width: 84px;52    height: 84px;53    display: flex;54    align-items: center;55    justify-content: center;56  }57  .back-btn svg { width: 44px; height: 44px; fill: #fff; }58  .title {59    font-size: 48px;60    font-weight: 600;61    margin-left: 8px;62  }63  .create-group {64    margin-left: auto;65    font-size: 34px;66    font-weight: 600;67    letter-spacing: 0.2px;68  }69 70  /* Search bar */71  .search-bar {72    position: absolute;73    top: 190px;74    left: 32px;75    width: 1016px;76    height: 92px;77    background: #1e1e1e;78    border-radius: 48px;79    display: flex;80    align-items: center;81    padding: 0 28px;82  }83  .search-icon svg { width: 36px; height: 36px; fill: #9e9e9e; }84  .search-placeholder {85    color: #9e9e9e;86    font-size: 36px;87    margin-left: 18px;88  }89 90  /* List / sections */91  .content {92    position: absolute;93    top: 300px;94    left: 32px;95    right: 32px;96    bottom: 0;97  }98  .row {99    display: flex;100    align-items: center;101    height: 140px;102    color: #fff;103  }104  .avatar {105    width: 96px;106    height: 96px;107    border-radius: 50%;108    background: #E0E0E0;109    border: 1px solid #BDBDBD;110    display: flex;111    justify-content: center;112    align-items: center;113    color: #757575;114    font-size: 24px;115    margin-right: 26px;116    position: relative;117    overflow: hidden;118  }119  .stack-avatars {120    width: 120px;121    position: relative;122    margin-right: 16px;123    height: 96px;124  }125  .stack-avatars .avatar {126    position: absolute;127    top: 0;128  }129  .stack-avatars .avatar:nth-child(1) { left: 0; }130  .stack-avatars .avatar:nth-child(2) { left: 48px; }131  .online-dot {132    position: absolute;133    right: 6px;134    bottom: 4px;135    width: 20px;136    height: 20px;137    background: #29d45d;138    border-radius: 50%;139    border: 3px solid #000;140  }141  .text-block {142    flex: 1;143    display: flex;144    flex-direction: column;145    justify-content: center;146  }147  .title-line {148    font-size: 42px;149    font-weight: 600;150  }151  .sub-line {152    font-size: 28px;153    color: #bdbdbd;154    margin-top: 6px;155  }156  .section-label {157    font-size: 32px;158    color: #bdbdbd;159    margin: 16px 0 4px 0;160  }161 162  /* Actions */163  .pill {164    padding: 16px 34px;165    border-radius: 40px;166    background: #2a2a2a;167    color: #ffffff;168    font-size: 34px;169    font-weight: 700;170    border: 1px solid #3a3a3a;171  }172  .link-blue {173    color: #4e8ef7;174    font-size: 34px;175    font-weight: 700;176  }177  .settings-btn {178    width: 84px;179    height: 84px;180    border-radius: 42px;181    background: #2a2a2a;182    border: 1px solid #3a3a3a;183    display: flex;184    align-items: center;185    justify-content: center;186    margin-right: 16px;187  }188  .settings-btn svg { width: 40px; height: 40px; fill: #ffffff; }189 190  /* Bottom gesture bar */191  .gesture {192    position: absolute;193    bottom: 36px;194    left: 50%;195    transform: translateX(-50%);196    width: 260px;197    height: 10px;198    background: #e6e6e6;199    border-radius: 8px;200    opacity: 0.9;201  }202</style>203</head>204<body>205<div id="render-target">206 207  <!-- System status bar -->208  <div class="system-bar">209    <div class="sys-left">12:58</div>210    <div class="sys-right">211      <div class="sys-icon">212        <!-- location pin -->213        <svg viewBox="0 0 24 24"><path d="M12 2c3.3 0 6 2.7 6 6 0 4.9-6 12-6 12S6 12.9 6 8c0-3.3 2.7-6 6-6zm0 8a2 2 0 1 0 0-4 2 2 0 0 0 0 4z"/></svg>214      </div>215      <div class="sys-icon">216        <!-- bell off -->217        <svg viewBox="0 0 24 24"><path d="M12 22a2 2 0 0 0 2-2H10a2 2 0 0 0 2 2zM4 9c0-3.3 2.7-6 6-6 1.2 0 2.3.4 3.2 1.1l-8.6 8.6C4.2 11.9 4 10.5 4 9zm16 6-2-2V9c0-1.6-.6-3.1-1.7-4.2l-8.8 8.8 1.5 1.5h11z"/></svg>218      </div>219      <div class="sys-icon">220        <!-- wifi -->221        <svg viewBox="0 0 24 24"><path d="M12 18a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm6-6-2 2c-2.2-2.2-5.8-2.2-8 0L6 12c3.3-3.3 8.7-3.3 12 0zm4-4-2 2c-4.4-4.4-11.6-4.4-16 0L2 8c6.6-6.6 17.4-6.6 24 0z" transform="scale(.75) translate(4 4)"/></svg>222      </div>223      <div class="sys-icon">224        <!-- battery -->225        <svg viewBox="0 0 24 24"><path d="M20 8h2v8h-2v2H4V6h16v2zM6 8v8h12V8H6z"/></svg>226      </div>227    </div>228  </div>229 230  <!-- Header -->231  <div class="header">232    <div class="back-btn">233      <svg viewBox="0 0 24 24"><path d="M15.5 19l-7-7 7-7v14z"/></svg>234    </div>235    <div class="title">Send to</div>236    <div class="create-group">CREATE GROUP</div>237  </div>238 239  <!-- Search -->240  <div class="search-bar">241    <div class="search-icon">242      <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>243    </div>244    <div class="search-placeholder">Search</div>245  </div>246 247  <div class="content">248 249    <!-- Your story row -->250    <div class="row">251      <div class="avatar">[IMG: Avatar]</div>252      <div class="text-block">253        <div class="title-line">Your story</div>254        <div class="sub-line">Visible on Messenger and Facebook for 24 hours</div>255      </div>256      <div class="settings-btn" title="Settings">257        <svg viewBox="0 0 24 24"><path d="M12 8a4 4 0 1 0 0 8 4 4 0 0 0 0-8zm10 4-2.1.3a7.2 7.2 0 0 1-.6 1.5l1.3 1.7-1.8 1.8-1.7-1.3c-.5.3-1 .4-1.5.6L14 20h-4l-.3-2.1a7.2 7.2 0 0 1-1.5-.6l-1.7 1.3-1.8-1.8 1.3-1.7c-.3-.5-.4-1-.6-1.5L2 12l2.1-.3c.1-.5.3-1 .6-1.5L3.4 8.5 5.2 6.7l1.7 1.3c.5-.3 1-.4 1.5-.6L10 5h4l.3 2.1c.5.1 1 .3 1.5.6l1.7-1.3 1.8 1.8-1.3 1.7c.3.5.4 1 .6 1.5L22 12z"/></svg>258      </div>259      <div class="pill">ADD</div>260    </div>261 262    <!-- Recents label -->263    <div class="section-label">Recents</div>264 265    <!-- Natalie Larson -->266    <div class="row">267      <div class="avatar">268        [IMG: Floral Avatar]269        <span class="online-dot"></span>270      </div>271      <div class="text-block">272        <div class="title-line">Natalie Larson</div>273      </div>274      <div class="link-blue">UNDO</div>275    </div>276 277    <!-- Friends group -->278    <div class="row">279      <div class="stack-avatars">280        <div class="avatar">[IMG: Floral]</div>281        <div class="avatar">[IMG: Purple]</div>282      </div>283      <div class="text-block">284        <div class="title-line">Friends</div>285        <div class="sub-line">Natalie, Richard</div>286      </div>287      <div class="pill">SEND</div>288    </div>289 290    <!-- Suggested label -->291    <div class="section-label" style="margin-top: 12px;">Suggested</div>292 293    <!-- Richard Wagner -->294    <div class="row">295      <div class="avatar">[IMG: Avatar]</div>296      <div class="text-block">297        <div class="title-line">Richard Wagner</div>298      </div>299      <div class="pill">SEND</div>300    </div>301 302    <!-- Jane Corbet -->303    <div class="row">304      <div class="avatar">[IMG: Leaf Avatar]</div>305      <div class="text-block">306        <div class="title-line">Jane Corbet</div>307      </div>308      <div class="pill">SEND</div>309    </div>310 311    <!-- Andrew Reed -->312    <div class="row">313      <div class="avatar">[IMG: Default Avatar]</div>314      <div class="text-block">315        <div class="title-line">Andrew Reed</div>316      </div>317      <div class="pill">SEND</div>318    </div>319 320  </div>321 322  <!-- Bottom gesture bar -->323  <div class="gesture"></div>324</div>325</body>326</html>