GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Share Sheet - Item View</title>6<style>7 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }8 #render-target {9 width: 1080px;10 height: 2400px;11 position: relative;12 overflow: hidden;13 background: #121212;14 color: #EDEDED;15 }16 17 /* Status bar */18 .status-bar {19 position: absolute;20 top: 0;21 left: 0;22 width: 1080px;23 height: 90px;24 padding: 0 28px;25 box-sizing: border-box;26 display: flex;27 align-items: center;28 justify-content: space-between;29 color: #fff;30 font-size: 36px;31 letter-spacing: 1px;32 }33 .status-icons {34 display: flex;35 align-items: center;36 gap: 18px;37 }38 .status-dot { width: 10px; height: 10px; background: #fff; border-radius: 50%; opacity: 0.9; }39 40 /* Header */41 .header {42 position: absolute;43 top: 90px;44 left: 0;45 width: 1080px;46 height: 92px;47 display: flex;48 align-items: center;49 padding: 0 24px;50 box-sizing: border-box;51 color: #EDEDED;52 font-size: 44px;53 font-weight: 600;54 }55 .header .title { margin-left: 18px; }56 57 /* Main content */58 .content {59 position: absolute;60 top: 182px;61 left: 0;62 width: 1080px;63 padding: 0 40px;64 box-sizing: border-box;65 }66 67 .carousel {68 position: relative;69 width: 100%;70 height: 170px;71 border-radius: 10px;72 overflow: hidden;73 background: transparent;74 margin: 18px 0 10px;75 }76 .carousel .img-ph {77 width: 100%;78 height: 100%;79 background: #E0E0E0;80 border: 1px solid #BDBDBD;81 display: flex;82 justify-content: center;83 align-items: center;84 color: #606060;85 font-size: 28px;86 }87 .fav-btn {88 position: absolute;89 right: 24px; top: 50%;90 transform: translateY(-50%);91 width: 94px; height: 94px; border-radius: 50%;92 background: rgba(255,255,255,0.1);93 display: flex; justify-content: center; align-items: center;94 }95 .dots {96 width: 100%;97 display: flex;98 justify-content: center;99 gap: 16px;100 margin: 16px 0 12px;101 }102 .dot {103 width: 14px; height: 14px; border-radius: 50%;104 background: #6E6E6E;105 }106 .dot.active { background: #BDBDBD; }107 108 .title {109 font-size: 52px;110 font-weight: 800;111 line-height: 1.2;112 color: #EDEDED;113 margin: 18px 0;114 }115 116 .seller-row {117 display: flex;118 align-items: center;119 justify-content: space-between;120 margin: 18px 0 30px;121 }122 .seller-info {123 display: flex;124 align-items: center;125 gap: 20px;126 }127 .avatar {128 width: 96px; height: 96px; border-radius: 50%;129 background: #E0E0E0; border: 1px solid #BDBDBD;130 display: flex; justify-content: center; align-items: center;131 color: #757575; font-size: 22px;132 }133 .seller-text .name { font-size: 34px; color: #DADADA; }134 .seller-text .meta { font-size: 30px; color: #9AA0A6; margin-top: 6px; }135 136 .price {137 font-size: 56px;138 font-weight: 800;139 margin: 10px 0 40px;140 }141 142 /* Share Sheet */143 .sheet {144 position: absolute;145 left: 0;146 width: 1080px;147 height: 1220px;148 bottom: 110px;149 background: #1F2327;150 border-top-left-radius: 36px;151 border-top-right-radius: 36px;152 box-shadow: 0 -10px 30px rgba(0,0,0,0.5);153 padding: 18px 34px 30px;154 box-sizing: border-box;155 }156 .handle {157 width: 140px; height: 10px;158 background: #3A3F45; border-radius: 6px;159 margin: 16px auto 14px;160 }161 .sheet h2 {162 margin: 8px 0 20px;163 font-size: 48px; font-weight: 800; color: #EDEDED;164 }165 166 .listing-row {167 display: flex;168 gap: 28px;169 align-items: center;170 margin-bottom: 26px;171 }172 .thumb {173 width: 220px; height: 160px;174 background: #E0E0E0; border: 1px solid #BDBDBD;175 display: flex; justify-content: center; align-items: center;176 color: #666; font-size: 26px;177 }178 .listing-text .ltitle {179 font-size: 36px; color: #E0E0E0; font-weight: 700; line-height: 1.25;180 }181 .link-block {182 background: transparent;183 border-radius: 12px;184 color: #D0D0D0;185 font-size: 30px;186 line-height: 1.4;187 padding: 10px 0 20px;188 word-break: break-all;189 }190 .btn-row {191 display: flex;192 gap: 28px;193 margin: 6px 0 18px;194 flex-wrap: wrap;195 }196 .pill-btn {197 display: inline-flex; align-items: center; gap: 12px;198 border: 2px solid #3C4043;199 border-radius: 18px;200 color: #EDEDED;201 padding: 18px 26px;202 font-size: 32px;203 }204 205 /* Share grid */206 .share-grid {207 display: grid;208 grid-template-columns: repeat(4, 1fr);209 gap: 34px 26px;210 margin-top: 18px;211 }212 .share-item {213 display: flex; flex-direction: column; align-items: center; text-align: center;214 }215 .circle {216 width: 140px; height: 140px; border-radius: 50%;217 background: #2C7EF8; display: flex; align-items: center; justify-content: center;218 color: #fff; font-weight: 800; font-size: 54px;219 position: relative;220 }221 .badge {222 position: absolute; right: -6px; bottom: -6px;223 width: 42px; height: 42px; background: #34B7F1; border-radius: 50%;224 border: 4px solid #1F2327;225 }226 .share-label {227 margin-top: 12px; font-size: 26px; color: #D1D5DB; line-height: 1.2;228 }229 .circle.gmail { background: #EA4335; }230 .circle.msg { background: #1A73E8; }231 .circle.bt { background: #4A90E2; }232 .circle.fb { background: #1877F2; }233 234 /* Gesture bar */235 .gesture {236 position: absolute; bottom: 34px; left: 50%;237 transform: translateX(-50%);238 width: 360px; height: 10px; background: #E6E6E6; border-radius: 8px; opacity: 0.9;239 }240 241 /* Utility for SVG icons in buttons */242 .icon {243 width: 36px; height: 36px; display: inline-block;244 }245 246 /* Chevron right for seller row */247 .chev {248 width: 40px; height: 40px;249 }250</style>251</head>252<body>253<div id="render-target">254 255 <!-- Status Bar -->256 <div class="status-bar">257 <div>4:51</div>258 <div class="status-icons">259 <!-- mimic small app dots -->260 <div class="status-dot"></div>261 <div class="status-dot"></div>262 <div class="status-dot"></div>263 <div class="status-dot"></div>264 <div class="status-dot" style="opacity:.6;"></div>265 <!-- Wi-Fi -->266 <svg class="icon" viewBox="0 0 24 24" fill="#fff">267 <path d="M12 20a2 2 0 1 0 .001-4.001A2 2 0 0 0 12 20zm6.5-6.5a10 10 0 0 0-13 0l1.8 1.8a7 7 0 0 1 9.4 0l1.8-1.8zm4-4a16 16 0 0 0-21 0l2 2a13 13 0 0 1 17 0l2-2z"/>268 </svg>269 <!-- Battery -->270 <svg class="icon" viewBox="0 0 24 24" fill="#fff">271 <path d="M20 8h1a1 1 0 0 1 1 1v6a1 1 0 0 1-1 1h-1v2H4V6h16v2z"/>272 </svg>273 </div>274 </div>275 276 <!-- Header -->277 <div class="header">278 <svg width="44" height="44" viewBox="0 0 24 24" fill="#EDEDED">279 <path d="M15.4 3.4 13.99 2 5 11l8.99 9 1.41-1.41L8.83 11l6.57-7.6z"/>280 </svg>281 <div class="title">Item</div>282 </div>283 284 <!-- Main content -->285 <div class="content">286 <div class="carousel">287 <div class="img-ph">[IMG: Product Image Carousel]</div>288 <div class="fav-btn">289 <svg width="44" height="44" viewBox="0 0 24 24" fill="#fff">290 <path d="M12 21s-6-4.35-9-7.35C1.5 12.15 1 10.9 1 9.5A5.5 5.5 0 0 1 6.5 4c1.74 0 3.41.81 4.5 2.09A6 6 0 0 1 20 4.5 5.5 5.5 0 0 1 25 10c0 1.4-.5 2.65-2 4.15C18 16.65 12 21 12 21z"/>291 </svg>292 </div>293 </div>294 <div class="dots">295 <div class="dot active"></div>296 <div class="dot"></div>297 <div class="dot"></div>298 <div class="dot"></div>299 <div class="dot"></div>300 </div>301 302 <div class="title">303 FDW Robot Vacuum Cleaner 2000Pa<br>304 Strong Suction, 4400mAh, Black305 </div>306 307 <div class="seller-row">308 <div class="seller-info">309 <div class="avatar">[IMG: Seller Avatar]</div>310 <div class="seller-text">311 <div class="name">xpectmoreforless (435402)</div>312 <div class="meta">96.5% positive feedback</div>313 </div>314 </div>315 <svg class="chev" viewBox="0 0 24 24" fill="#9AA0A6">316 <path d="M9 6l6 6-6 6z"/>317 </svg>318 </div>319 320 <div class="price">$29.99</div>321 </div>322 323 <!-- Share Sheet Bottom -->324 <div class="sheet">325 <div class="handle"></div>326 <h2>Share Listing</h2>327 328 <div class="listing-row">329 <div class="thumb">[IMG: Robot Vacuum]</div>330 <div class="listing-text">331 <div class="ltitle">FDW Robot Vacuum Cleaner 2000Pa Strong Suction</div>332 </div>333 </div>334 335 <div class="link-block">336 https://www.ebay.com/itm/134742755024?mkcid=16&mkevt=1&mkrid=711-127632-2357-0&ssspo=x4SKO...337 </div>338 339 <div class="btn-row">340 <div class="pill-btn">341 <svg class="icon" viewBox="0 0 24 24" fill="#EDEDED">342 <path d="M16 1H8v4H3v18h13v-4h5V5h-5V1zm-2 2v2H10V3h4zm3 6v10H5V7h3v4h9zm5-4v10h-3V7h-6V5h9z"/>343 </svg>344 Copy345 </div>346 <div class="pill-btn">347 <svg class="icon" viewBox="0 0 24 24" fill="#EDEDED">348 <path d="M12 3a9 9 0 0 1 9 9h-3l4 4 4-4h-3A11 11 0 0 0 12 1v2zm0 18a9 9 0 0 1-9-9h3L2 8l-4 4h3a11 11 0 0 0 11 11v-2z"/>349 </svg>350 Nearby351 </div>352 </div>353 354 <div class="share-grid">355 <div class="share-item">356 <div class="circle" style="background:#0EA5E9;">👥<span class="badge"></span></div>357 <div class="share-label">Andrew Reed,<br>Eliza</div>358 </div>359 <div class="share-item">360 <div class="circle" style="background:#0EA5E9;">El<span class="badge"></span></div>361 <div class="share-label">Eliza</div>362 </div>363 <div class="share-item">364 <div class="circl