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>Share Sheet UI</title>7  <style>8    body { margin: 0; padding: 0; background: transparent; }9    #render-target {10      width: 1080px; height: 2400px;11      position: relative; overflow: hidden;12      background: #ffffff;13      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Inter, Arial, sans-serif;14      color: #212121;15    }16 17    /* Status bar */18    .status-bar {19      position: absolute; top: 0; left: 0; width: 100%; height: 140px;20      background: #000;21      color: #fff;22      display: flex; align-items: center;23      padding: 0 36px;24      box-sizing: border-box;25      font-size: 44px;26    }27    .status-time { font-weight: 600; }28    .status-icons { margin-left: auto; display: flex; gap: 28px; align-items: center; }29    .sb-icon { width: 36px; height: 36px; opacity: 0.9; }30 31    /* Header */32    .header {33      position: absolute; top: 140px; left: 0; width: 100%; height: 170px;34      background: #fff;35      display: flex; align-items: center;36      padding: 0 40px;37      box-sizing: border-box;38      border-bottom: 1px solid #eee;39    }40    .back-btn { width: 72px; height: 72px; display: flex; align-items: center; justify-content: center; margin-right: 12px; }41    .header-title { font-size: 58px; font-weight: 600; letter-spacing: 0.2px; }42    .header-action {43      margin-left: auto;44      font-size: 44px; font-weight: 700; color: #6C4BFF;45    }46 47    /* Toast banner */48    .toast {49      position: absolute; top: 310px; left: 0; width: 100%; height: 92px;50      background: #2F7A76; color: #fff;51      display: flex; align-items: center; box-sizing: border-box; padding: 0 40px;52    }53    .toast .close {54      width: 48px; height: 48px; display: flex; align-items: center; justify-content: center;55      margin-right: 24px;56    }57    .toast .msg { font-size: 36px; font-weight: 500; }58 59    /* List */60    .list { position: absolute; top: 412px; left: 0; width: 100%; }61    .item {62      height: 170px; display: flex; align-items: center;63      padding: 0 40px; box-sizing: border-box;64      border-bottom: 1px solid #eee;65    }66    .icon-circle {67      width: 110px; height: 110px; border-radius: 55px;68      display: flex; align-items: center; justify-content: center;69      color: #fff; font-weight: 700;70      font-size: 48px;71    }72    .label { margin-left: 36px; font-size: 44px; font-weight: 500; color: #222; }73    .spacer { margin-left: auto; }74    .chev { width: 32px; height: 32px; }75    .divider { height: 1px; background: #eee; margin: 0 40px; }76 77    /* Brand icon fills */78    .pinterest { background: #D64B40; }79    .photos { background: #5B3BFF; }80    .instagram {81      background: radial-gradient(circle at 70% 30%, #FFD54F 0%, #FF7043 35%, #E64A19 55%, #8E24AA 85%, #5C6BC0 100%);82    }83    .snapchat { background: #FFD600; color: #fff; }84    .more { background: #BDBDBD; color: #fff; }85 86    /* Inline icon sizing */87    .icon-svg { width: 54px; height: 54px; }88 89    /* Ad banner */90    .ad-banner {91      position: absolute; left: 30px; bottom: 120px;92      width: 1020px; height: 220px;93      background: #fff; border: 1px solid #DADADA;94      border-radius: 18px;95      box-shadow: 0 3px 12px rgba(0,0,0,0.12);96      display: flex; align-items: center; gap: 24px;97      padding: 20px; box-sizing: border-box;98    }99    .ad-img {100      width: 320px; height: 180px; background: #E0E0E0;101      border: 1px solid #BDBDBD; display: flex; align-items: center; justify-content: center;102      color: #757575; font-size: 30px; text-align: center;103    }104    .ad-content { flex: 1; display: flex; align-items: center; justify-content: space-between; }105    .ad-text { display: flex; flex-direction: column; gap: 10px; }106    .ad-title { font-size: 42px; font-weight: 700; }107    .ad-by { font-size: 32px; color: #616161; }108    .ad-cta {109      background: #2E7DFF; color: #fff; font-weight: 700; font-size: 36px;110      padding: 18px 28px; border-radius: 12px;111    }112 113    /* Home bar */114    .home-bar {115      position: absolute; bottom: 0; left: 0; width: 100%; height: 120px; background: #000;116    }117    .home-indicator {118      position: absolute; bottom: 36px; left: 50%; transform: translateX(-50%);119      width: 220px; height: 16px; border-radius: 12px;120      background: rgba(255,255,255,0.75);121    }122  </style>123</head>124<body>125  <div id="render-target">126    <!-- Status bar -->127    <div class="status-bar">128      <div class="status-time">4:18</div>129      <div class="status-icons">130        <!-- Signal -->131        <svg class="sb-icon" viewBox="0 0 24 24">132          <path fill="#fff" d="M2 18h2v2H2v-2zm4-4h2v6H6v-6zm4-4h2v10h-2V10zm4-4h2v14h-2V6zm4-2h2v16h-2V4z"/>133        </svg>134        <!-- WiFi -->135        <svg class="sb-icon" viewBox="0 0 24 24">136          <path fill="#fff" d="M12 18.5l2.5 2.5-2.5 2.5-2.5-2.5L12 18.5z" opacity="0"/>137          <path fill="#fff" d="M12 17c.8 0 1.5.7 1.5 1.5S12.8 20 12 20s-1.5-.7-1.5-1.5S11.2 17 12 17z"/>138          <path fill="none" stroke="#fff" stroke-width="2" d="M4.5 11.5C7.5 9 10.5 8 12 8s4.5 1 7.5 3.5"/>139          <path fill="none" stroke="#fff" stroke-width="2" d="M2 8c3.7-3 7.5-4.5 10-4.5S18.3 5 22 8"/>140        </svg>141        <!-- Battery -->142        <svg class="sb-icon" viewBox="0 0 24 24">143          <rect x="2" y="6" width="18" height="12" rx="2" ry="2" fill="none" stroke="#fff" stroke-width="2"/>144          <rect x="4" y="8" width="14" height="8" fill="#fff"/>145          <rect x="20" y="10" width="2" height="4" fill="#fff"/>146        </svg>147      </div>148    </div>149 150    <!-- Header -->151    <div class="header">152      <div class="back-btn">153        <svg width="48" height="48" viewBox="0 0 24 24">154          <path d="M15 18l-6-6 6-6" fill="none" stroke="#424242" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>155        </svg>156      </div>157      <div class="header-title">Also Share To</div>158      <div class="header-action">DONE</div>159    </div>160 161    <!-- Toast -->162    <div class="toast">163      <div class="close">164        <svg width="36" height="36" viewBox="0 0 24 24">165          <path d="M6 6l12 12M18 6L6 18" stroke="#fff" stroke-width="2" stroke-linecap="round"/>166        </svg>167      </div>168      <div class="msg">Saved to your photo Gallery</div>169    </div>170 171    <!-- Share list -->172    <div class="list">173      <!-- Pinterest -->174      <div class="item">175        <div class="icon-circle pinterest">176          <span style="font-size:54px; line-height:1;">P</span>177        </div>178        <div class="label">Pinterest</div>179        <div class="spacer"></div>180        <svg class="chev" viewBox="0 0 24 24">181          <path d="M8 4l8 8-8 8" fill="none" stroke="#BDBDBD" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>182        </svg>183      </div>184 185      <!-- Photos -->186      <div class="item">187        <div class="icon-circle photos">188          <svg class="icon-svg" viewBox="0 0 24 24">189            <path d="M12 5v10" stroke="#fff" stroke-width="2" stroke-linecap="round"/>190            <path d="M8 11l4 4 4-4" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>191            <rect x="5" y="19" width="14" height="2" fill="#fff"/>192          </svg>193        </div>194        <div class="label">Photos</div>195        <div class="spacer"></div>196        <svg class="chev" viewBox="0 0 24 24">197          <path d="M8 4l8 8-8 8" fill="none" stroke="#BDBDBD" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>198        </svg>199      </div>200 201      <!-- Instagram -->202      <div class="item">203        <div class="icon-circle instagram">204          <svg class="icon-svg" viewBox="0 0 24 24">205            <rect x="5" y="5" width="14" height="14" rx="3" ry="3" fill="none" stroke="#fff" stroke-width="2"/>206            <circle cx="12" cy="12" r="4" fill="none" stroke="#fff" stroke-width="2"/>207            <circle cx="17" cy="7.5" r="1.5" fill="#fff"/>208          </svg>209        </div>210        <div class="label">Instagram</div>211        <div class="spacer"></div>212        <svg class="chev" viewBox="0 0 24 24">213          <path d="M8 4l8 8-8 8" fill="none" stroke="#BDBDBD" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>214        </svg>215      </div>216 217      <!-- Snapchat -->218      <div class="item">219        <div class="icon-circle snapchat">220          <span style="font-size:52px; line-height:1;">👻</span>221        </div>222        <div class="label">Snapchat</div>223        <div class="spacer"></div>224        <svg class="chev" viewBox="0 0 24 24">225          <path d="M8 4l8 8-8 8" fill="none" stroke="#BDBDBD" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>226        </svg>227      </div>228 229      <!-- More -->230      <div class="item">231        <div class="icon-circle more">232          <svg class="icon-svg" viewBox="0 0 24 24">233            <circle cx="6" cy="12" r="2.2" fill="#fff"/>234            <circle cx="12" cy="12" r="2.2" fill="#fff"/>235            <circle cx="18" cy="12" r="2.2" fill="#fff"/>236          </svg>237        </div>238        <div class="label">More</div>239        <div class="spacer"></div>240        <svg class="chev" viewBox="0 0 24 24">241          <path d="M8 4l8 8-8 8" fill="none" stroke="#BDBDBD" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>242        </svg>243      </div>244    </div>245 246    <!-- Ad banner -->247    <div class="ad-banner">248      <div class="ad-img">[IMG: Sports Promo]</div>249      <div class="ad-content">250        <div class="ad-text">251          <div class="ad-title">Make your team and win big!</div>252          <div class="ad-by">Ad by Dream11</div>253        </div>254        <div class="ad-cta">Play Now</div>255      </div>256    </div>257 258    <!-- Bottom home bar -->259    <div class="home-bar">260      <div class="home-indicator"></div>261    </div>262  </div>263</body>264</html>