GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Share Sheet UI</title>6<style>7  body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }8  #render-target {9    position: relative;10    width: 1080px;11    height: 2400px;12    overflow: hidden;13    background: linear-gradient(#0a0a0a 0%, #101317 45%, #141820 100%);14    border-radius: 24px;15    box-shadow: 0 20px 60px rgba(0,0,0,0.35);16  }17 18  /* Status bar */19  .status-bar {20    position: absolute;21    top: 20px;22    left: 24px;23    right: 24px;24    height: 64px;25    color: #ffffff;26    display: flex;27    align-items: center;28    justify-content: space-between;29    font-size: 32px;30    letter-spacing: 0.5px;31    opacity: 0.95;32  }33  .status-icons { display: flex; align-items: center; gap: 22px; }34  .status-dot {35    width: 18px; height: 18px; border-radius: 50%; background: #fff; opacity: 0.9;36  }37  .wifi {38    width: 42px; height: 24px;39  }40  .battery {41    width: 48px; height: 24px;42  }43 44  /* Background content card (behind share sheet) */45  .bg-card {46    position: absolute;47    top: 200px;48    left: 72px;49    width: 936px;50    height: 660px;51    background: #1b1f25;52    border-radius: 32px;53    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.04);54  }55  .more-menu {56    position: absolute;57    top: 230px;58    right: 84px;59    width: 12px;60    height: 48px;61    border-radius: 12px;62    display: flex;63    flex-direction: column;64    justify-content: center;65    gap: 8px;66    opacity: 0.4;67  }68  .more-menu span {69    display: block;70    width: 12px; height: 12px; background: #bfc4cb; border-radius: 50%;71  }72 73  /* Back button */74  .back-btn {75    position: absolute;76    top: 268px;77    left: 36px;78    width: 64px; height: 64px;79    display: flex; align-items: center; justify-content: center;80  }81  .back-btn svg { width: 36px; height: 36px; }82  .back-btn svg path { stroke: #bfc4cb; stroke-width: 4; fill: none; }83 84  /* Share sheet card */85  .share-card {86    position: absolute;87    left: 36px;88    right: 36px;89    top: 980px;90    background: #262a32;91    color: #ffffff;92    border-radius: 28px;93    box-shadow: 0 30px 60px rgba(0,0,0,0.55);94    padding: 44px 48px 36px 48px;95  }96 97  .sheet-header {98    display: grid;99    grid-template-columns: 96px auto;100    gap: 22px;101    align-items: center;102    margin-bottom: 22px;103  }104  .img-ph {105    width: 96px; height: 96px;106    background: #E0E0E0;107    border: 1px solid #BDBDBD;108    border-radius: 16px;109    color: #757575;110    display: flex; align-items: center; justify-content: center;111    font-size: 20px;112  }113  .title {114    font-size: 40px; font-weight: 600; letter-spacing: 0.2px;115  }116  .subtitle {117    font-size: 28px; color: #aeb4bd; margin-top: 6px;118  }119 120  .promo {121    margin-top: 18px;122    font-size: 44px;123    line-height: 1.28;124    font-weight: 600;125  }126 127  .share-grid {128    margin-top: 36px;129    display: grid;130    grid-template-columns: repeat(3, 1fr);131    gap: 46px 40px;132  }133  .share-item { text-align: center; }134  .icon-circle {135    width: 200px; height: 200px;136    margin: 0 auto 18px auto;137    border-radius: 50%;138    display: flex; align-items: center; justify-content: center;139    box-shadow: 0 8px 20px rgba(0,0,0,0.3);140  }141  .label {142    font-size: 28px;143    color: #cfd5dd;144  }145 146  /* Circle colors */147  .copy { background: #ffffff; }148  .wa { background: #1f9f6b; }149  .ig { background: #c64f78; }150  .fb { background: #3b5998; }151  .tw { background: #1da1f2; }152  .sc { background: #f4df6b; }153 154  .icon-circle svg { width: 92px; height: 92px; }155  .icon-dark path, .icon-dark circle, .icon-dark rect { stroke: #222831; fill: none; stroke-width: 6; }156  .icon-light path, .icon-light circle, .icon-light rect { stroke: #ffffff; fill: none; stroke-width: 6; }157  .icon-light .fill { fill: #ffffff; stroke: none; }158 159  /* Divider and more options row */160  .divider {161    height: 1px;162    background: rgba(255,255,255,0.25);163    margin: 30px 0 18px 0;164  }165  .more-row {166    display: flex; align-items: center; justify-content: space-between;167    color: #e7e9ec;168    font-size: 32px;169    padding-bottom: 8px;170  }171  .chev {172    width: 36px; height: 36px;173  }174  .chev path { stroke: #e7e9ec; stroke-width: 6; fill: none; }175 176  /* Cancel bar */177  .cancel-bar {178    position: absolute;179    left: 36px;180    right: 36px;181    bottom: 220px;182    background: #3a3f47;183    height: 140px;184    border-radius: 28px;185    color: #ffffff;186    display: flex; align-items: center; justify-content: center;187    font-size: 40px; font-weight: 600;188    box-shadow: 0 10px 20px rgba(0,0,0,0.45);189  }190 191  /* Gesture pill */192  .gesture-pill {193    position: absolute;194    left: 50%;195    transform: translateX(-50%);196    bottom: 120px;197    width: 220px; height: 14px;198    background: #e9e9ea;199    border-radius: 8px;200    opacity: 0.85;201  }202</style>203</head>204<body>205<div id="render-target">206 207  <div class="status-bar">208    <div>12:24</div>209    <div class="status-icons">210      <!-- placeholder mini icons -->211      <svg class="wifi" viewBox="0 0 48 24">212        <path d="M2 10 Q24 -2 46 10" stroke="#fff" stroke-width="3" fill="none" opacity="0.9"></path>213        <path d="M7 14 Q24 5 41 14" stroke="#fff" stroke-width="3" fill="none" opacity="0.8"></path>214        <circle cx="24" cy="18" r="3" fill="#fff"></circle>215      </svg>216      <svg class="battery" viewBox="0 0 48 24">217        <rect x="2" y="4" width="38" height="16" rx="3" ry="3" stroke="#fff" stroke-width="3" fill="none"></rect>218        <rect x="6" y="8" width="28" height="8" fill="#fff"></rect>219        <rect x="42" y="8" width="4" height="8" fill="#fff"></rect>220      </svg>221    </div>222  </div>223 224  <div class="bg-card"></div>225  <div class="more-menu" aria-hidden="true">226    <span></span><span></span><span></span>227  </div>228 229  <div class="back-btn">230    <svg viewBox="0 0 36 36">231      <path d="M24 6 L12 18 L24 30"></path>232    </svg>233  </div>234 235  <div class="share-card">236    <div class="sheet-header">237      <div class="img-ph">[IMG: List Cover]</div>238      <div>239        <div class="title">Chill List</div>240        <div class="subtitle">Just Updated</div>241      </div>242    </div>243 244    <div class="promo">Know someone who'll love this?<br>Share the love!</div>245 246    <div class="share-grid">247      <!-- Copy Link -->248      <div class="share-item">249        <div class="icon-circle copy">250          <svg class="icon-dark" viewBox="0 0 48 48" aria-hidden="true">251            <!-- simple link/paperclip -->252            <path d="M30 12 l6 6 c4 4 4 10 0 14 l-9 9 c-4 4-10 4-14 0 c-4-4-4-10 0-14 l9-9" stroke-linecap="round" stroke-linejoin="round"></path>253            <path d="M15 33 l-3 -3 c-3 -3 -3 -7 0 -10 l9 -9 c3 -3 7 -3 10 0" stroke-linecap="round" stroke-linejoin="round"></path>254          </svg>255        </div>256        <div class="label">Copy Link</div>257      </div>258 259      <!-- WhatsApp -->260      <div class="share-item">261        <div class="icon-circle wa">262          <svg class="icon-light" viewBox="0 0 48 48" aria-hidden="true">263            <path d="M10 40 l4 -8 c-4 -6 -4 -12 1 -16 c6 -6 15 -6 21 0 c6 6 6 15 0 21 c-4 4 -10 5 -16 1 l-10 2 z" stroke-linecap="round" stroke-linejoin="round"></path>264            <path d="M19 20 c2 4 6 7 10 9" stroke-linecap="round"></path>265          </svg>266        </div>267        <div class="label">WhatsApp</div>268      </div>269 270      <!-- Instagram Stories -->271      <div class="share-item">272        <div class="icon-circle ig">273          <svg class="icon-light" viewBox="0 0 48 48" aria-hidden="true">274            <rect x="10" y="10" width="28" height="28" rx="7" ry="7"></rect>275            <circle cx="24" cy="24" r="7"></circle>276            <circle cx="32" cy="16" r="2" class="fill"></circle>277          </svg>278        </div>279        <div class="label">Instagram Stories</div>280      </div>281 282      <!-- Facebook -->283      <div class="share-item">284        <div class="icon-circle fb">285          <svg viewBox="0 0 48 48" aria-hidden="true">286            <text x="24" y="32" text-anchor="middle" font-size="26" font-weight="700" fill="#ffffff" font-family="Segoe UI, Arial">f</text>287          </svg>288        </div>289        <div class="label">Facebook</div>290      </div>291 292      <!-- Twitter -->293      <div class="share-item">294        <div class="icon-circle tw">295          <svg viewBox="0 0 48 48" aria-hidden="true">296            <text x="24" y="32" text-anchor="middle" font-size="26" font-weight="700" fill="#ffffff" font-family="Segoe UI, Arial">t</text>297          </svg>298        </div>299        <div class="label">Twitter</div>300      </div>301 302      <!-- Snapchat -->303      <div class="share-item">304        <div class="icon-circle sc">305          <svg viewBox="0 0 48 48" aria-hidden="true">306            <text x="24" y="32" text-anchor="middle" font-size="26" font-weight="700" fill="#000000" font-family="Segoe UI, Arial">👻</text>307          </svg>308        </div>309        <div class="label">Snapchat</div>310      </div>311    </div>312 313    <div class="divider"></div>314    <div class="more-row">315      <div>More Options</div>316      <svg class="chev" viewBox="0 0 36 36" aria-hidden="true">317        <path d="M8 14 L18 24 L28 14" stroke-linecap="round" stroke-linejoin="round"></path>318      </svg>319    </div>320  </div>321 322  <div class="cancel-bar">Cancel</div>323  <div class="gesture-pill"></div>324</div>325</body>326</html>