GD-ML/AndroidCode
13.4k
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>Item Share Sheet</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }9 #render-target {10 width: 1080px; height: 2400px;11 position: relative; overflow: hidden;12 background: #000000;13 }14 15 /* Status bar */16 .status-bar {17 height: 110px;18 color: #f5f5f5;19 padding: 28px 36px 0 36px;20 box-sizing: border-box;21 display: flex;22 align-items: center;23 justify-content: space-between;24 opacity: 0.9;25 }26 .status-icons { display: flex; align-items: center; gap: 20px; }27 .dot { width: 12px; height: 12px; background: #eaeaea; border-radius: 50%; display: inline-block; opacity: 0.9; }28 29 /* Header */30 .header {31 display: flex; align-items: center; justify-content: space-between;32 padding: 20px 36px;33 color: #eaeaea;34 }35 .header-left { display: flex; align-items: center; gap: 22px; }36 .back-btn {37 width: 64px; height: 64px; border-radius: 32px;38 background: rgba(255,255,255,0.06);39 display: flex; align-items: center; justify-content: center;40 }41 .title { font-size: 40px; font-weight: 600; letter-spacing: 0.4px; }42 43 .header-actions { display: flex; align-items: center; gap: 18px; }44 .icon-btn {45 width: 84px; height: 84px; border-radius: 42px;46 background: rgba(255,255,255,0.08);47 display: flex; align-items: center; justify-content: center;48 }49 50 /* Image area */51 .image-strip {52 margin: 18px 60px 14px 60px;53 height: 160px;54 border-radius: 12px;55 background: #E0E0E0;56 border: 1px solid #BDBDBD;57 display: flex; align-items: center; justify-content: center;58 color: #757575;59 font-size: 30px;60 }61 .carousel-dots {62 display: flex; gap: 16px; justify-content: center; align-items: center;63 margin-bottom: 26px;64 }65 .carousel-dots span {66 width: 18px; height: 18px; border-radius: 9px;67 background: #5e5e5e;68 }69 .carousel-dots span.active { background: #bdbdbd; }70 71 /* Content */72 .item-title {73 color: #e6e6e6; font-size: 46px; font-weight: 800; line-height: 60px;74 padding: 0 60px;75 }76 .seller-row {77 display: flex; align-items: center; justify-content: space-between;78 padding: 28px 60px 10px 60px; color: #c9c9c9;79 }80 .seller-info { display: flex; align-items: center; gap: 22px; }81 .avatar {82 width: 94px; height: 94px; border-radius: 47px; overflow: hidden;83 background: #E0E0E0; border: 1px solid #BDBDBD;84 display: flex; align-items: center; justify-content: center; color: #757575; font-size: 22px;85 }86 .seller-text { display: flex; flex-direction: column; }87 .seller-name { font-size: 32px; color: #e6e6e6; }88 .feedback { font-size: 28px; color: #b5b5b5; }89 90 .price-block { padding: 28px 60px; color: #ffffff; }91 .price { font-size: 64px; font-weight: 800; margin-bottom: 10px; }92 .subtext { font-size: 30px; color: #b5b5b5; }93 94 .condition-row {95 display: flex; align-items: center; gap: 22px;96 padding: 16px 60px; color: #cfcfcf; font-size: 34px;97 }98 .condition-value { color: #ffffff; font-weight: 600; }99 .info-icon {100 width: 36px; height: 36px; border-radius: 18px; background: #3a3a3a;101 display: inline-flex; align-items: center; justify-content: center; color: #ffffff; font-size: 24px;102 }103 104 .place-bid {105 position: absolute; bottom: 920px; left: 60px;106 width: 960px; height: 120px; border-radius: 30px;107 background: #2f4f7e; color: #ffffff; font-weight: 700; font-size: 40px;108 display: flex; align-items: center; justify-content: center;109 opacity: 0.6;110 }111 112 /* Share sheet */113 .sheet {114 position: absolute; left: 0; right: 0; bottom: 0;115 height: 1100px; background: #1f1f1f; color: #ffffff;116 border-top-left-radius: 36px; border-top-right-radius: 36px;117 box-shadow: 0 -12px 40px rgba(0,0,0,0.6);118 padding: 34px 44px;119 box-sizing: border-box;120 }121 .handle {122 width: 120px; height: 8px; border-radius: 4px; background: #7a7a7a;123 margin: 0 auto 24px auto;124 }125 .sheet-title { font-size: 46px; font-weight: 800; margin-bottom: 30px; }126 127 .share-listing-row { display: flex; align-items: center; gap: 28px; margin-bottom: 36px; }128 .product-thumb {129 width: 220px; height: 220px; background: #E0E0E0; border: 1px solid #BDBDBD;130 display: flex; align-items: center; justify-content: center; color: #757575; font-size: 26px;131 }132 .product-text { font-size: 36px; color: #e6e6e6; line-height: 46px; }133 134 .section-label { font-size: 38px; font-weight: 800; margin: 22px 0 24px; color: #f1f1f1; }135 136 .share-options { display: flex; gap: 42px; align-items: flex-start; margin-bottom: 38px; }137 .share-option { width: 180px; display: flex; flex-direction: column; align-items: center; gap: 16px; }138 .circle {139 width: 138px; height: 138px; border-radius: 69px;140 display: flex; align-items: center; justify-content: center;141 }142 .label { font-size: 30px; color: #e9e9e9; }143 144 /* Simple icon sizes */145 svg { width: 44px; height: 44px; fill: none; stroke: #ffffff; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }146 .icon-heart svg { stroke: none; fill: #ffffff; }147</style>148</head>149<body>150<div id="render-target">151 152 <!-- Status bar -->153 <div class="status-bar">154 <div style="font-size:36px; font-weight:600;">4:48</div>155 <div class="status-icons">156 <span class="dot"></span>157 <span class="dot"></span>158 <span class="dot"></span>159 <span class="dot"></span>160 <span class="dot"></span>161 <span class="dot"></span>162 </div>163 </div>164 165 <!-- Header -->166 <div class="header">167 <div class="header-left">168 <div class="back-btn">169 <svg viewBox="0 0 48 48">170 <path d="M30 10 L16 24 L30 38"></path>171 </svg>172 </div>173 <div class="title">Item</div>174 </div>175 <div class="header-actions">176 <div class="icon-btn">177 <!-- search -->178 <svg viewBox="0 0 48 48">179 <circle cx="22" cy="22" r="12"></circle>180 <path d="M33 33 L44 44"></path>181 </svg>182 </div>183 <div class="icon-btn">184 <!-- cart -->185 <svg viewBox="0 0 48 48">186 <path d="M6 12 H12 L16 32 H38 L42 18 H18"></path>187 <circle cx="20" cy="38" r="3"></circle>188 <circle cx="34" cy="38" r="3"></circle>189 </svg>190 </div>191 <div class="icon-btn">192 <!-- share -->193 <svg viewBox="0 0 48 48">194 <circle cx="12" cy="24" r="5"></circle>195 <circle cx="36" cy="12" r="5"></circle>196 <circle cx="36" cy="36" r="5"></circle>197 <path d="M16 23 L31 14"></path>198 <path d="M16 25 L31 34"></path>199 </svg>200 </div>201 <div class="icon-btn icon-heart">202 <!-- heart -->203 <svg viewBox="0 0 48 48">204 <path d="M24 40 C24 40 8 30 8 20 C8 14 12 10 18 10 C22 10 24 12 24 12 C24 12 26 10 30 10 C36 10 40 14 40 20 C40 30 24 40 24 40 Z"></path>205 </svg>206 </div>207 </div>208 </div>209 210 <!-- Image area -->211 <div class="image-strip">[IMG: Product gallery banner]</div>212 <div class="carousel-dots">213 <span class="active"></span><span></span><span></span><span></span><span></span>214 </div>215 216 <!-- Title -->217 <div class="item-title">218 FDW Robot Vacuum Cleaner 2000Pa<br>Strong Suction, 4400mAh, Black219 </div>220 221 <!-- Seller info -->222 <div class="seller-row">223 <div class="seller-info">224 <div class="avatar">[IMG]</div>225 <div class="seller-text">226 <div class="seller-name">xpectmoreforless (435402)</div>227 <div class="feedback">96.5% positive feedback</div>228 </div>229 </div>230 <div>231 <svg viewBox="0 0 48 48">232 <path d="M18 10 L30 24 L18 38"></path>233 </svg>234 </div>235 </div>236 237 <!-- Price -->238 <div class="price-block">239 <div class="price">$29.99</div>240 <div class="subtext">Starting bid · 2d 17h left</div>241 </div>242 243 <!-- Condition -->244 <div class="condition-row">245 <div style="color:#bdbdbd;">Condition</div>246 <div class="condition-value">New</div>247 <div class="info-icon">i</div>248 </div>249 250 <!-- Place bid button glimpsed behind sheet -->251 <div class="place-bid">Place bid</div>252 253 <!-- Share sheet -->254 <div class="sheet">255 <div class="handle"></div>256 <div class="sheet-title">Share Listing</div>257 258 <div class="share-listing-row">259 <div class="product-thumb">[IMG: Robot Vacuum]</div>260 <div class="product-text">261 FDW Robot Vacuum Cleaner<br>262 2000Pa Strong Suction,<br>263 4400mAh, Black264 </div>265 </div>266 267 <div class="section-label">Share To</div>268 <div class="share-options">269 <!-- Facebook -->270 <div class="share-option">271 <div class="circle" style="background:#1877F2;">272 <svg viewBox="0 0 48 48">273 <path d="M26 16 H31 V12 H26 C21 12 19 15 19 19 V22 H16 V26 H19 V36 H23 V26 H28 V22 H23 V19 C23 17 24 16 26 16 Z" fill="#ffffff" stroke="none"></path>274 </svg>275 </div>276 <div class="label">Facebook</div>277 </div>278 279 <!-- SMS -->280 <div class="share-option">281 <div class="circle" style="background:#3D8BFF;">282 <svg viewBox="0 0 48 48">283 <path d="M8 12 H40 V30 H18 L12 36 V30 H8 Z"></path>284 </svg>285 </div>286 <div class="label">SMS</div>287 </div>288 289 <!-- Email -->290 <div class="share-option">291 <div class="circle" style="background:#EA4335;">292 <svg viewBox="0 0 48 48">293 <rect x="8" y="12" width="32" height="24" rx="2" ry="2"></rect>294 <path d="M8 14 L24 26 L40 14"></path>295 </svg>296 </div>297 <div class="label">Email</div>298 </div>299 300 <!-- Snapchat -->301 <div class="share-option">302 <div class="circle" style="background:#FFEB3B;">303 <svg viewBox="0 0 48 48" style="stroke:#000000;">304 <path d="M16 18 C16 12 20 10 24 10 C28 10 32 12 32 18 C32 22 30 24 30 26 C30 27 31 28 34 29 C33 31 30 32 28 32 C26 36 22 36 20 32 C18 32 15 31 14 29 C17 28 18 27 18 26 C18 24 16 22 16 18 Z"></path>305 </svg>306 </div>307 <div class="label">Snapchat</div>308 </div>309 </div>310 311 <div class="section-label">Actions</div>312 </div>313 314</div>315</body>316</html>