GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Share Listing UI</title>6<style>7 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }8 #render-target {9 width: 1080px; height: 2400px;10 position: relative; overflow: hidden;11 background: #000000;12 border-radius: 44px;13 box-shadow: 0 10px 30px rgba(0,0,0,0.45);14 color: #ffffff;15 }16 17 /* Status bar */18 .status-bar {19 position: absolute; top: 22px; left: 32px; right: 32px; height: 48px;20 display: flex; align-items: center; justify-content: space-between;21 color: #fff; font-size: 32px; letter-spacing: 0.5px;22 }23 .status-right { display: flex; align-items: center; gap: 24px; }24 .status-dot { width: 10px; height: 10px; background: #fff; border-radius: 50%; opacity: 0.9; }25 .icon-battery, .icon-wifi { width: 40px; height: 24px; }26 27 /* Top navigation */28 .top-nav {29 position: absolute; top: 120px; left: 24px; right: 24px; height: 80px;30 display: flex; align-items: center; gap: 24px;31 }32 .nav-btn {33 width: 72px; height: 72px; border-radius: 36px;34 background: rgba(255,255,255,0.08);35 display: flex; align-items: center; justify-content: center;36 }37 .nav-title { font-size: 44px; font-weight: 600; margin-right: auto; color: #ffffff; opacity: 0.95; }38 39 /* Product hero area (dimmed background) */40 .hero {41 position: absolute; top: 260px; left: 64px; right: 64px; height: 180px;42 display: flex; align-items: center; justify-content: center;43 background: rgba(255,255,255,0.08); border-radius: 12px;44 overflow: hidden;45 }46 .hero .img {47 width: 100%; height: 100%; background: #E0E0E0; border: 1px solid #BDBDBD;48 display: flex; align-items: center; justify-content: center; color: #757575; font-size: 28px;49 }50 .heart {51 position: absolute; right: 40px; top: 140px; width: 100px; height: 100px;52 border-radius: 50%; background: rgba(255,255,255,0.08);53 display: flex; align-items: center; justify-content: center;54 }55 56 .title {57 position: absolute; top: 520px; left: 64px; right: 64px;58 font-size: 52px; font-weight: 800; line-height: 1.15; color: #ffffff; opacity: 0.9;59 }60 .seller {61 position: absolute; top: 810px; left: 64px; right: 64px;62 display: flex; align-items: center; gap: 24px; color: #bdbdbd; font-size: 32px;63 opacity: 0.7;64 }65 .seller .avatar {66 width: 88px; height: 88px; border-radius: 50%; background: #E0E0E0; border: 1px solid #BDBDBD;67 display: flex; align-items: center; justify-content: center; color: #757575; font-size: 22px;68 }69 70 /* Bottom sheet */71 .sheet {72 position: absolute; bottom: 0; left: 0; right: 0; height: 1160px;73 background: #1f1f1f; border-top-left-radius: 32px; border-top-right-radius: 32px;74 box-shadow: 0 -8px 20px rgba(0,0,0,0.6);75 padding: 32px 40px;76 }77 .handle {78 width: 120px; height: 8px; background: #3a3a3a; border-radius: 4px; margin: 8px auto 18px;79 }80 .sheet h2 {81 margin: 16px 0 28px; font-size: 52px; font-weight: 800; color: #fff;82 }83 84 .list-row {85 display: flex; align-items: center; gap: 28px;86 background: transparent; margin-bottom: 40px;87 }88 .list-row .thumb {89 width: 220px; height: 220px; background: #E0E0E0; border: 1px solid #BDBDBD;90 display: flex; align-items: center; justify-content: center; color: #757575; font-size: 26px;91 }92 .list-row .text {93 font-size: 44px; line-height: 1.2; color: #ffffff;94 }95 96 .section-label {97 font-size: 40px; font-weight: 700; color: #ffffff; margin: 16px 0 26px;98 }99 .share-row {100 display: flex; gap: 54px; align-items: flex-start; margin-bottom: 40px;101 }102 .circle-icon {103 width: 160px; height: 160px; border-radius: 50%;104 display: flex; align-items: center; justify-content: center;105 box-shadow: inset 0 0 0 2px rgba(0,0,0,0.08);106 }107 .share-item { display: flex; flex-direction: column; align-items: center; gap: 16px; }108 .share-item span { color: #d9d9d9; font-size: 34px; }109 110 .actions {111 display: flex; gap: 120px; margin-top: 16px;112 }113 .action-item { display: flex; flex-direction: column; align-items: center; gap: 16px; }114 .action-item span { color: #d9d9d9; font-size: 34px; }115 116 /* Home indicator */117 .home-indicator {118 position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%);119 width: 300px; height: 10px; background: #cfcfcf; border-radius: 8px; opacity: 0.8;120 }121 122 /* SVG styles */123 svg { fill: none; stroke: #ffffff; stroke-width: 3; }124 .svg-solid { fill: #ffffff; stroke: none; }125</style>126</head>127<body>128<div id="render-target">129 130 <!-- Status bar -->131 <div class="status-bar">132 <div>4:48</div>133 <div class="status-right">134 <div class="status-dot"></div>135 <div class="status-dot"></div>136 <div class="status-dot"></div>137 <svg class="icon-wifi" viewBox="0 0 24 24">138 <path d="M3 8c4-3 14-3 18 0" />139 <path d="M6 11c3-2 9-2 12 0" />140 <path d="M9 14c2-1 6-1 8 0" />141 <circle cx="12" cy="18" r="2" class="svg-solid"></circle>142 </svg>143 <svg class="icon-battery" viewBox="0 0 40 24">144 <rect x="2" y="4" width="32" height="16" rx="3" stroke="#fff"></rect>145 <rect x="5" y="7" width="22" height="10" class="svg-solid"></rect>146 <rect x="34" y="9" width="4" height="6" class="svg-solid"></rect>147 </svg>148 </div>149 </div>150 151 <!-- Top navigation -->152 <div class="top-nav">153 <div class="nav-btn">154 <svg width="36" height="36" viewBox="0 0 24 24"><path d="M15 5l-7 7 7 7"/></svg>155 </div>156 <div class="nav-title">Item</div>157 <div class="nav-btn">158 <svg width="36" height="36" viewBox="0 0 24 24">159 <circle cx="11" cy="11" r="7"></circle><line x1="20" y1="20" x2="16" y2="16" stroke="#ffffff"></line>160 </svg>161 </div>162 <div class="nav-btn">163 <svg width="36" height="36" viewBox="0 0 24 24">164 <path d="M6 6h14l-2 10H8L6 6z"></path>165 <circle cx="9" cy="19" r="2" class="svg-solid"></circle>166 <circle cx="17" cy="19" r="2" class="svg-solid"></circle>167 </svg>168 </div>169 <div class="nav-btn">170 <svg width="36" height="36" viewBox="0 0 24 24">171 <circle cx="6" cy="12" r="2" class="svg-solid"></circle>172 <circle cx="12" cy="8" r="2" class="svg-solid"></circle>173 <circle cx="18" cy="14" r="2" class="svg-solid"></circle>174 <path d="M7 12l4-3M13 9l4 4" />175 </svg>176 </div>177 <div class="nav-btn">178 <svg width="8" height="32" viewBox="0 0 8 24">179 <circle cx="4" cy="4" r="3" class="svg-solid"></circle>180 <circle cx="4" cy="12" r="3" class="svg-solid"></circle>181 <circle cx="4" cy="20" r="3" class="svg-solid"></circle>182 </svg>183 </div>184 </div>185 186 <!-- Product hero area -->187 <div class="hero">188 <div class="img">[IMG: Product gallery banner]</div>189 </div>190 <div class="heart">191 <svg width="48" height="48" viewBox="0 0 24 24">192 <path d="M12 21s-7-4.5-9-8.5C1 9 3 6 6 6s4 2 6 4c2-2 3-4 6-4s5 3 3 6.5C19 16.5 12 21 12 21z"></path>193 </svg>194 </div>195 196 <!-- Title and seller -->197 <div class="title">FDW Robot Vacuum Cleaner 2000Pa Strong Suction, 4400mAh, Black</div>198 <div class="seller">199 <div class="avatar">[IMG]</div>200 <div>xpectmoreforless (435402) · 96.5% positive feedback</div>201 </div>202 203 <!-- Bottom sheet -->204 <div class="sheet">205 <div class="handle"></div>206 <h2>Share Listing</h2>207 208 <div class="list-row">209 <div class="thumb">[IMG: Robot Vacuum]</div>210 <div class="text">211 FDW Robot Vacuum Cleaner<br>212 2000Pa Strong Suction,<br>213 4400mAh, Black214 </div>215 </div>216 217 <div class="section-label">Share To</div>218 <div class="share-row">219 <div class="share-item">220 <div class="circle-icon" style="background:#1877F2;">221 <svg width="70" height="70" viewBox="0 0 24 24">222 <path class="svg-solid" d="M14 8h3V4h-3c-3 0-5 2-5 5v3H5v4h4v7h4v-7h3l1-4h-4V9c0-.6.4-1 1-1z"></path>223 </svg>224 </div>225 <span>Facebook</span>226 </div>227 <div class="share-item">228 <div class="circle-icon" style="background:#2196F3;">229 <svg width="76" height="76" viewBox="0 0 24 24">230 <path class="svg-solid" d="M4 4h16v12H7l-3 4V4z"></path>231 </svg>232 </div>233 <span>SMS</span>234 </div>235 <div class="share-item">236 <div class="circle-icon" style="background:#EA4335;">237 <svg width="76" height="76" viewBox="0 0 24 24">238 <rect x="3" y="5" width="18" height="14" rx="2" class="svg-solid"></rect>239 <path d="M3 7l9 7 9-7" stroke="#1f1f1f" stroke-width="2"></path>240 </svg>241 </div>242 <span>Email</span>243 </div>244 <div class="share-item">245 <div class="circle-icon" style="background:#FFEB3B;">246 <svg width="76" height="76" viewBox="0 0 24 24">247 <path class="svg-solid" d="M12 3c2 0 4 2 4 4 0 2-1 3-1 4 0 1 2 1 2 2s-2 1-2 2c0 1 1 1 1 2s-2 1-4 1-4 0-4-1 1-1 1-2-2-1-2-2 2-1 2-2c0-1-1-2-1-4 0-2 2-4 4-4z"></path>248 </svg>249 </div>250 <span>Snapchat</span>251 </div>252 </div>253 254 <div class="section-label">Actions</div>255 <div class="actions">256 <div class="action-item">257 <div class="circle-icon" style="background:#2a2a2a;">258 <svg width="76" height="76" viewBox="0 0 24 24">259 <circle cx="6" cy="12" r="3"></circle>260 <circle cx="12" cy="7" r="3"></circle>261 <circle cx="18" cy="14" r="3"></circle>262 <path d="M9 11l2-3M14 9l2 3"></path>263 </svg>264 </div>265 <span>More Apps</span>266 </div>267 <div class="action-item">268 <div class="circle-icon" style="background:#2a2a2a;">269 <svg width="76" height="76" viewBox="0 0 24 24">270 <rect x="7" y="7" width="10" height="10" class="svg-solid"></rect>271 <rect x="3" y="3" width="10" height="10"></rect>272 <path d="M12 12l0 0"></path>273 </svg>274 </div>275 <span>Copy Link</span>276 </div>277 </div>278 </div>279 280 <div class="home-indicator"></div>281</div>282</body>283</html>