GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Mobile UI - Share Sheet over Gallery</title>6<meta name="viewport" content="width=1080, initial-scale=1">7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: Roboto, Arial, sans-serif; }9  #render-target {10    position: relative;11    width: 1080px;12    height: 2400px;13    overflow: hidden;14    background: #f2f4f5;15  }16  /* Status bar + App bar */17  .status-bar {18    height: 84px;19    background: #0d5aa7;20    color: #fff;21    display: flex;22    align-items: center;23    padding: 0 32px;24    font-size: 40px;25    letter-spacing: 0.5px;26  }27  .status-icons {28    margin-left: auto;29    display: flex;30    align-items: center;31    gap: 18px;32  }33  .app-bar {34    height: 128px;35    background: #0d5aa7;36    color: #fff;37    display: flex;38    align-items: center;39    padding: 0 28px;40    box-sizing: border-box;41  }42  .app-title {43    font-size: 52px;44    font-weight: 600;45    margin-left: 16px;46  }47  .spacer { flex: 1; }48  .icon-btn {49    width: 72px;50    height: 72px;51    display: inline-flex;52    align-items: center;53    justify-content: center;54    border-radius: 36px;55  }56  /* Content area */57  .content {58    background: #f7f7f8;59    height: calc(2400px - 84px - 128px);60    box-sizing: border-box;61    padding: 24px 0 0 0;62    position: relative;63  }64  .header-row {65    background: #ffffff;66    padding: 32px 36px;67    display: flex;68    align-items: center;69    font-size: 36px;70    color: #616161;71    border-top: 1px solid #e0e0e0;72    border-bottom: 1px solid #efefef;73  }74  .header-row .right {75    margin-left: auto;76    color: #7e7e7e;77    display: flex;78    align-items: center;79    gap: 10px;80    font-size: 34px;81    letter-spacing: 0.5px;82  }83  .list-item {84    background: #ffffff;85    padding: 28px 36px 36px 36px;86    display: flex;87    gap: 28px;88    align-items: flex-start;89    border-bottom: 1px solid #eee;90  }91  .thumb {92    width: 360px;93    height: 204px;94    background: #E0E0E0;95    border: 1px solid #BDBDBD;96    border-radius: 14px;97    display: flex; align-items: center; justify-content: center;98    color: #757575;99    position: relative;100    overflow: hidden;101  }102  .duration {103    position: absolute;104    right: 10px;105    bottom: 10px;106    background: rgba(0,0,0,0.8);107    color: #fff;108    font-size: 28px;109    padding: 6px 10px;110    border-radius: 8px;111  }112  .item-meta {113    flex: 1;114    padding-top: 6px;115  }116  .item-title {117    font-size: 48px;118    font-weight: 600;119    color: #212121;120    margin: 0 0 12px 0;121  }122  .item-sub {123    font-size: 34px;124    color: #7a7a7a;125  }126  /* Dim overlay for modal */127  .dim {128    position: absolute;129    left: 0; right: 0; top: 0; bottom: 0;130    background: rgba(0,0,0,0.52);131  }132  /* Share sheet */133  .sheet {134    position: absolute;135    left: 0;136    right: 0;137    bottom: 0;138    height: 920px;139    background: #1d1f21;140    border-top-left-radius: 36px;141    border-top-right-radius: 36px;142    color: #fff;143    padding: 22px 40px 40px;144    box-sizing: border-box;145  }146  .handle {147    width: 120px;148    height: 12px;149    background: #444;150    border-radius: 6px;151    margin: 8px auto 28px;152  }153  .link-row {154    font-size: 40px;155    letter-spacing: 0.3px;156    margin-bottom: 28px;157    color: #eaeaea;158    word-break: break-all;159  }160  .btn-row {161    display: flex;162    gap: 24px;163    margin-bottom: 36px;164  }165  .outline-btn {166    display: inline-flex;167    align-items: center;168    gap: 14px;169    padding: 18px 26px;170    border-radius: 18px;171    border: 2px solid #66c2b6;172    color: #cdebe5;173    font-size: 36px;174  }175  /* Share target grid */176  .targets-grid {177    display: grid;178    grid-template-columns: repeat(3, 1fr);179    gap: 26px 18px;180    margin-bottom: 22px;181  }182  .target {183    display: flex;184    flex-direction: column;185    align-items: center;186    gap: 12px;187  }188  .circle {189    width: 140px; height: 140px; border-radius: 50%;190    display: flex; align-items: center; justify-content: center;191    font-size: 72px; color: #1d1f21; font-weight: 700;192    position: relative;193  }194  .badge {195    position: absolute;196    right: -2px;197    bottom: -2px;198    width: 44px; height: 44px;199    background: #2f6ef2;200    border: 4px solid #1d1f21;201    border-radius: 50%;202  }203  .target label {204    color: #e9e9e9;205    font-size: 30px;206    text-align: center;207    line-height: 1.2;208  }209  .apps-grid {210    display: grid;211    grid-template-columns: repeat(4, 1fr);212    gap: 26px 18px;213    margin-top: 18px;214  }215  .app .circle {216    font-size: 54px;217    color: #2b2b2b;218    font-weight: 700;219  }220  /* Simple colors for avatars/apps */221  .bg-teal { background: #67d3e0; }222  .bg-orange { background: #ffb04c; }223  .bg-pink { background: #ff7ab0; }224  .bg-white { background: #ffffff; border: 1px solid #ddd; }225  .bg-blue { background: #8cc8ff; }226  .bg-gray { background: #d6dee6; }227  /* Gestural home indicator */228  .home-indicator {229    position: absolute;230    bottom: 20px;231    left: 50%;232    transform: translateX(-50%);233    width: 320px;234    height: 10px;235    background: rgba(255,255,255,0.9);236    border-radius: 8px;237  }238  /* Tiny helper icons */239  .icon-3dots {240    width: 36px; height: 36px;241    display: inline-flex; align-items: center; justify-content: center;242  }243</style>244</head>245<body>246<div id="render-target">247  <!-- Status bar -->248  <div class="status-bar">249    <div>10:51</div>250    <div class="status-icons">251      <!-- Wi-Fi icon -->252      <svg width="36" height="36" viewBox="0 0 24 24" fill="#fff">253        <path d="M12 18.5a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3zM2 9.5C6.4 6 17.6 6 22 9.5l-2 2C16.9 9.7 7.1 9.7 4 11.5L2 9.5zM6 13c4-2.5 8-2.5 12 0l-2 2c-2.7-1.7-5.3-1.7-8 0L6 13z"/>254      </svg>255      <!-- Battery icon -->256      <svg width="40" height="40" viewBox="0 0 24 24" fill="#fff">257        <path d="M16 7h2a2 2 0 0 1 2 2v6a2 2 0 0 1-2 2h-2v1h-2v-1H6a2 2 0 0 1-2-2V9a2 2 0 0 1 2-2h10zm-1 2H6v6h9V9z"/>258      </svg>259    </div>260  </div>261 262  <!-- App bar -->263  <div class="app-bar">264    <div class="icon-btn" aria-label="Close">265      <svg width="40" height="40" viewBox="0 0 24 24" stroke="#fff" fill="none" stroke-width="2">266        <path d="M6 6l12 12M18 6L6 18"/>267      </svg>268    </div>269    <div class="app-title">Yoga</div>270    <div class="spacer"></div>271    <div class="icon-btn" aria-label="More">272      <svg class="icon-3dots" viewBox="0 0 24 24">273        <circle cx="12" cy="5" r="2" fill="#fff"/>274        <circle cx="12" cy="12" r="2" fill="#fff"/>275        <circle cx="12" cy="19" r="2" fill="#fff"/>276      </svg>277    </div>278  </div>279 280  <!-- Main content (under dim) -->281  <div class="content">282    <div class="header-row">283      <div>1 ITEM</div>284      <div class="right">285        <svg width="30" height="30" viewBox="0 0 24 24" fill="#7e7e7e" style="transform: translateY(-2px);">286          <path d="M7 10l5 5 5-5H7z"/>287        </svg>288        <span>DATE ADDED</span>289      </div>290    </div>291 292    <div class="list-item">293      <div class="thumb">294        [IMG: Yoga video thumbnail]295        <div class="duration">00:29</div>296      </div>297      <div class="item-meta">298        <div class="item-title">Untitled</div>299        <div class="item-sub">0 views • 15 minutes ago</div>300      </div>301      <div class="icon-btn" aria-label="Item menu" style="margin-left:auto; margin-top:4px;">302        <svg class="icon-3dots" viewBox="0 0 24 24">303          <circle cx="12" cy="6" r="2.2" fill="#666"/>304          <circle cx="12" cy="12" r="2.2" fill="#666"/>305          <circle cx="12" cy="18" r="2.2" fill="#666"/>306        </svg>307      </div>308    </div>309 310    <!-- Dim overlay -->311    <div class="dim"></div>312  </div>313 314  <!-- Share sheet -->315  <div class="sheet">316    <div class="handle"></div>317    <div class="link-row">https://vimeo.com/866863454</div>318    <div class="btn-row">319      <div class="outline-btn">320        <svg width="34" height="34" viewBox="0 0 24 24" fill="none" stroke="#cdebe5" stroke-width="2">321          <rect x="9" y="9" width="10" height="10" rx="2"/>322          <rect x="5" y="5" width="10" height="10" rx="2"/>323        </svg>324        <span>Copy</span>325      </div>326      <div class="outline-btn">327        <svg width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="#cdebe5" stroke-width="2">328          <path d="M4 7l5 0-2-2m-3 12l5 0-2 2M20 7l-5 0 2-2m3 12l-5 0 2 2"/>329        </svg>330        <span>Nearby</span>331      </div>332    </div>333 334    <div class="targets-grid">335      <div class="target">336        <div class="circle bg-teal">M<span class="badge"></span></div>337        <label>Mike Waggoner</label>338      </div>339      <div class="target">340        <div class="circle bg-orange">J<span class="badge"></span></div>341        <label>Josan Smith</label>342      </div>343      <div class="target">344        <div class="circle bg-pink">J<span class="badge"></span></div>345        <label>Janet</label>346      </div>347    </div>348 349    <div class="apps-grid">350      <div class="target app">351        <div class="circle bg-white">G</div>352        <label>Gmail</label>353      </div>354      <div class="target app">355        <div class="circle bg-white">D</div>356        <label>Drive</label>357      </div>358      <div class="target app">359        <div class="circle bg-blue">TB</div>360        <label>TeraBox</label>361      </div>362      <div class="target app">363        <div class="circle bg-white">M</div>364        <label>Messages</label>365      </div>366    </div>367  </div>368 369  <div class="home-indicator"></div>370</div>371</body>372</html>