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>Stained Window Glass - Listing</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; color: #fff; }9 #render-target {10 width: 1080px; height: 2400px;11 position: relative; overflow: hidden;12 background: #111315;13 }14 15 /* Top status bar */16 .status-bar {17 height: 90px;18 padding: 0 40px;19 display: flex;20 align-items: center;21 color: #ffffff;22 font-weight: 600;23 font-size: 36px;24 background: #0f1012;25 }26 .status-bar .right {27 margin-left: auto;28 display: flex; align-items: center; gap: 26px;29 }30 .icon-dot {31 width: 12px; height: 12px; background: #d9d9d9; border-radius: 50%;32 }33 .battery {34 width: 48px; height: 26px; border: 2px solid #d9d9d9; border-radius: 6px; position: relative;35 }36 .battery::after {37 content: ""; position: absolute; right: -8px; top: 6px; width: 6px; height: 12px; background: #d9d9d9; border-radius: 2px;38 }39 .battery .level { width: 32px; height: 18px; background: #d9d9d9; position: absolute; left: 4px; top: 3px; border-radius: 3px; }40 41 /* Search header */42 .search-bar {43 height: 120px; padding: 0 40px; display: flex; align-items: center; gap: 26px;44 background: #1a1c1f; border-bottom: 1px solid #222;45 }46 .search-text {47 flex: 1; font-size: 40px; color: #ffffff;48 }49 .icon-btn { width: 64px; height: 64px; display: flex; align-items: center; justify-content: center; border-radius: 32px; }50 .icon-btn svg { fill: none; stroke: #fff; stroke-width: 4px; }51 52 /* Filter chips */53 .chips {54 display: flex; gap: 22px; padding: 28px 40px; background: #1a1c1f; border-bottom: 1px solid #222;55 }56 .chip {57 display: inline-flex; align-items: center; gap: 16px; padding: 20px 28px;58 background: #2a2d31; color: #fff; border-radius: 40px; font-size: 32px; border: 1px solid #3a3d41;59 white-space: nowrap;60 }61 .chip svg { width: 30px; height: 30px; stroke: #fff; stroke-width: 3px; fill: none; }62 .chip .caret { width: 0; height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; border-top: 12px solid #fff; margin-left: 8px; }63 64 /* Items count */65 .items-count { padding: 10px 40px 24px 40px; background: #1a1c1f; font-size: 30px; color: #b9b9b9; display: flex; align-items: center; }66 .items-count .info { margin-left: 12px; width: 28px; height: 28px; border-radius: 50%; border: 2px solid #b9b9b9; display: inline-flex; align-items: center; justify-content: center; font-size: 22px; color: #b9b9b9; }67 68 /* Grid */69 .grid { padding: 24px 24px 220px 24px; display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }70 .card { background: transparent; border-radius: 16px; overflow: hidden; }71 .image-wrap {72 position: relative; width: 100%; height: 520px;73 background: #E0E0E0; border: 1px solid #BDBDBD; display: flex; align-items: center; justify-content: center;74 color: #757575; font-size: 34px; text-align: center;75 }76 .fav {77 position: absolute; right: 20px; top: 20px; width: 72px; height: 72px; border-radius: 36px; background: #ffffffcc;78 display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 8px rgba(0,0,0,0.4);79 }80 .fav svg { width: 34px; height: 34px; fill: none; stroke: #111; stroke-width: 4px; }81 82 .card-body { padding: 16px 12px 12px 12px; }83 .title { font-size: 34px; color: #ffffff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 12px; }84 .rating { display: flex; align-items: center; gap: 8px; font-size: 28px; color: #fff; }85 .stars { display: inline-flex; gap: 6px; margin-left: 6px; }86 .stars svg { width: 26px; height: 26px; }87 .count { color: #b9b9b9; margin-left: 10px; }88 89 .badge {90 display: inline-flex; align-items: center; padding: 10px 16px; border-radius: 28px; font-size: 28px; margin-top: 12px;91 }92 .badge.green { background: #3e5f4a; color: #d7f2de; }93 .badge.beige { background: #d6c6af; color: #2a2a2a; }94 95 .price-row { display: flex; align-items: center; gap: 16px; margin-top: 12px; font-size: 34px; }96 .price-current { color: #35c25a; font-weight: 700; }97 .price-old { color: #8a8a8a; text-decoration: line-through; }98 .sale { color: #8a8a8a; font-size: 30px; }99 .adtext { color: #8a8a8a; font-size: 28px; margin-top: 8px; }100 101 /* Bottom navigation */102 .bottom-nav {103 position: absolute; left: 0; right: 0; bottom: 0; height: 168px; background: #1a1c1f; border-top: 1px solid #26292d;104 display: flex; align-items: center; justify-content: space-around; padding-bottom: 18px;105 }106 .tab { display: flex; flex-direction: column; align-items: center; gap: 16px; color: #ffffff; }107 .tab svg { width: 48px; height: 48px; stroke: #fff; stroke-width: 3px; fill: none; }108 .tab-label { font-size: 28px; }109 .home-indicator { position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); width: 360px; height: 10px; background: #ccc; border-radius: 6px; opacity: 0.8; }110</style>111</head>112<body>113<div id="render-target">114 115 <!-- Status Bar -->116 <div class="status-bar">117 9:50118 <div class="right">119 <div class="icon-dot"></div>120 <div class="icon-dot"></div>121 <div class="icon-dot"></div>122 <div style="width:28px;height:28px;border-radius:14px;border:2px solid #d9d9d9;"></div>123 <div class="battery"><div class="level"></div></div>124 </div>125 </div>126 127 <!-- Search Bar -->128 <div class="search-bar">129 <div class="icon-btn">130 <svg viewBox="0 0 24 24"><path d="M15 6l-6 6 6 6"/></svg>131 </div>132 <div class="search-text">stained window glass</div>133 <div class="icon-btn">134 <svg viewBox="0 0 24 24"><path d="M5 5l14 14M19 5L5 19"/></svg>135 </div>136 </div>137 138 <!-- Filter Chips -->139 <div class="chips">140 <div class="chip">141 <svg viewBox="0 0 24 24"><path d="M3 6h8M13 6h8M7 12h14M3 12h2M10 18h11M3 18h5"/></svg>142 Filter143 </div>144 <div class="chip">Price <span class="caret"></span></div>145 <div class="chip">Ships from <span class="caret"></span></div>146 <div class="chip">Free shipping</div>147 </div>148 149 <!-- Items count -->150 <div class="items-count">151 122,027 items with Ads152 <div class="info">i</div>153 </div>154 155 <!-- Grid of products -->156 <div class="grid">157 158 <!-- Card 1 -->159 <div class="card">160 <div class="image-wrap">[IMG: Custom stained glass panel with mountains and greens]161 <div class="fav">162 <svg viewBox="0 0 24 24"><path d="M12 21s-7-4.5-7-10a4 4 0 0 1 7-2 4 4 0 0 1 7 2c0 5.5-7 10-7 10z"/></svg>163 </div>164 </div>165 <div class="card-body">166 <div class="title">Custom stained glass panel...</div>167 <div class="rating">168 5.0169 <div class="stars">170 <svg viewBox="0 0 24 24"><polygon points="12,1 14,7 21,7 15.5,11 18,18 12,13.5 6,18 8.5,11 3,7 10,7" fill="#fff"/></svg>171 <svg viewBox="0 0 24 24"><polygon points="12,1 14,7 21,7 15.5,11 18,18 12,13.5 6,18 8.5,11 3,7 10,7" fill="#fff"/></svg>172 <svg viewBox="0 0 24 24"><polygon points="12,1 14,7 21,7 15.5,11 18,18 12,13.5 6,18 8.5,11 3,7 10,7" fill="#fff"/></svg>173 <svg viewBox="0 0 24 24"><polygon points="12,1 14,7 21,7 15.5,11 18,18 12,13.5 6,18 8.5,11 3,7 10,7" fill="#fff"/></svg>174 <svg viewBox="0 0 24 24"><polygon points="12,1 14,7 21,7 15.5,11 18,18 12,13.5 6,18 8.5,11 3,7 10,7" fill="#fff"/></svg>175 </div>176 <span class="count">(33,245)</span>177 </div>178 <div class="badge green">Free shipping</div>179 <div class="price-row">180 <div class="price-current">$343.00</div>181 <div class="price-old">$490.00</div>182 <div class="sale">(30% off)</div>183 </div>184 <div class="adtext">Ad by Etsy seller</div>185 </div>186 </div>187 188 <!-- Card 2 -->189 <div class="card">190 <div class="image-wrap">[IMG: Round forest fox stained glass]191 <div class="fav">192 <svg viewBox="0 0 24 24"><path d="M12 21s-7-4.5-7-10a4 4 0 0 1 7-2 4 4 0 0 1 7 2c0 5.5-7 10-7 10z"/></svg>193 </div>194 </div>195 <div class="card-body">196 <div class="title">Forest Fox #2: Stained Glas...</div>197 <div class="rating">198 4.8199 <div class="stars">200 <svg viewBox="0 0 24 24"><polygon points="12,1 14,7 21,7 15.5,11 18,18 12,13.5 6,18 8.5,11 3,7 10,7" fill="#fff"/></svg>201 <svg viewBox="0 0 24 24"><polygon points="12,1 14,7 21,7 15.5,11 18,18 12,13.5 6,18 8.5,11 3,7 10,7" fill="#fff"/></svg>202 <svg viewBox="0 0 24 24"><polygon points="12,1 14,7 21,7 15.5,11 18,18 12,13.5 6,18 8.5,11 3,7 10,7" fill="#fff"/></svg>203 <svg viewBox="0 0 24 24"><polygon points="12,1 14,7 21,7 15.5,11 18,18 12,13.5 6,18 8.5,11 3,7 10,7" fill="#fff"/></svg>204 <svg viewBox="0 0 24 24"><polygon points="12,1 14,7 21,7 15.5,11 18,18 12,13.5 6,18 8.5,11 3,7 10,7" fill="#fff" opacity="0.4"/></svg>205 </div>206 <span class="count">(732)</span>207 </div>208 <div class="price-row">209 <div class="price-current">$33.75</div>210 <div class="price-old">$45.00</div>211 <div class="sale">(25% off)</div>212 </div>213 <div class="adtext">Ad by Etsy seller</div>214 </div>215 </div>216 217 <!-- Card 3 -->218 <div class="card">219 <div class="image-wrap">[IMG: Tiffany style stained glass geometric panel]220 <div class="fav">221 <svg viewBox="0 0 24 24"><path d="M12 21s-7-4.5-7-10a4 4 0 0 1 7-2 4 4 0 0 1 7 2c0 5.5-7 10-7 10z"/></svg>222 </div>223 </div>224 <div class="card-body">225 <div class="title">Tiffany Style Stained Glass...</div>226 <div class="rating">227 4.8228 <div class="stars">229 <svg viewBox="0 0 24 24"><polygon points="12,1 14,7 21,7 15.5,11 18,18 12,13.5 6,18 8.5,11 3,7 10,7" fill="#fff"/></svg>230 <svg viewBox="0 0 24 24"><polygon points="12,1 14,7 21,7 15.5,11 18,18 12,13.5 6,18 8.5,11 3,7 10,7" fill="#fff"/></svg>231 <svg viewBox="0 0 24 24"><polygon points="12,1 14,7 21,7 15.5,11 18,18 12,13.5 6,18 8.5,11 3,7 10,7" fill="#fff"/></svg>232 <svg viewBox="0 0 24 24"><polygon points="12,1 14,7 21,7 15.5,11 18,18 12,13.5 6,18 8.5,11 3,7 10,7" fill="#fff"/></svg>233 <svg viewBox="0 0 24 24"><polygon points="12,1 14,7 21,7 15.5,11 18,18 12,13.5 6,18 8.5,11 3,7 10,7" fill="#fff" opacity="0.4"/></svg>234 </div>235 <span class="count">(1,217)</span>236 </div>237 <div class="badge beige">Bestseller</div>238 <div class="price-row">239 <div class="price-current" style="color:#fff;font-weight:600;">$190.00</div>240 </div>241 </div>242 </div>243 244 <!-- Card 4 -->245 <div class="card">246 <div class="image-wrap">[IMG: Vertical stained glass strips with bubbles]247 <div class="fav">248 <svg viewBox="0 0 24 24"><path d="M12 21s-7-4.5-7-10a4 4 0 0 1 7-2 4 4 0 0 1 7 2c0 5.5-7 10-7 10z"/></svg>249 </div>250 </div>251 <div class="card-body">252 <div class="title">ColorStreams - Stained Glass</div>253 <div class="rating">254 4.9255 <div class="stars">256 <svg viewBox="0 0 24 24"><polygon points="12,1 14,7 21,7 15.5,11 18,18 12,13.5 6,18 8.5,11 3,7 10,7" fill="#fff"/></svg>257 <svg viewBox="0 0 24 24"><polygon points="12,1 14,7 21,7 15.5,11 18,18 12,13.5 6,18 8.5,11 3,7 10,7" fill="#fff"/></svg>258 <svg viewBox="0 0 24 24"><polygon points="12,1 14,7 21,7 15.5,11 18,18 12,13.5 6,18 8.5,11 3,7 10,7" fill="#fff"/></svg>259 <svg viewBox="0 0 24 24"><polygon points="12,1 14,7 21,7 15.5,11 18,18 12,13.5 6,18 8.5,11 3,7 10,7" fill="#fff"/></svg>260 <svg viewBox="0 0 24 24"><polygon points="12,1 14,7 21,7 15.5,11 18,18 12,13.5 6,18 8.5,11 3,7 10,7" fill="#fff" opacity="0.6"/></svg>261 </div>262 <span class="count">(175)</span>263 </div>264 <div class="badge beige">Bestseller</div>265 <div class="price-row">266 <div class="price-current" style="color:#fff;font-weight:600;">$46.00</div>267 </div>268 </div>269 </div>270 271 <!-- Card 5 (partial) -->272 <div class="card">273 <div class="image-wrap">[IMG: Placeholder for additional stained glass item]274 <div class="fav">275 <svg viewBox="0 0 24 24"><path d="M12 21s-7-4.5-7-10a4 4 0 0 1 7-2 4 4 0 0 1 7 2c0 5.5-7 10-7 10z"/></svg>276 </div>277 </div>278 </div>279 280 <!-- Card 6 (partial) -->281 <div class="card">282 <div class="image-wrap">[IMG: Round tree stained glass sun scene]283 <div class="fav">284 <svg viewBox="0 0 24 24"><path d="M12 21s-7-4.5-7-10a4 4 0 0 1 7-2 4 4 0 0 1 7 2c0 5.5-7 10-7 10z"/></svg>285 </div>286 </div>287 </div>288 289 </div>290 291 <!-- Bottom Navigation -->292 <div class="bottom-nav">293 <div class="tab">294 <svg viewBox="0 0 24 24"><path d="M3 10l9-7 9 7v10H14V13H10v7H3z"/></svg>295 <div class="tab-label">Home</div>296 </div>297 <div class="tab">298 <svg viewBox="0 0 24 24"><path d="M12 21s-7-4.5-7-10a4 4 0 0 1 7-2 4 4 0 0 1 7 2c0 5.5-7 10-7 10z"/></svg>299 <div class="tab-label">Favorites</div>300 </div>301 <div class="tab">302 <svg viewBox="0 0 24 24"><path d="M4 7h16M4 12h16M4 17h10"/></svg>303 <div class="tab-label">Deals</div>304 </div>305 <div class="tab">306 <svg viewBox="0 0 24 24"><circle cx="12" cy="7" r="4"/><path d="M4 21c0-4 4-7 8-7s8 3 8 7"/></svg>307 <div class="tab-label">You</div>308 </div>309 <div class="tab">310 <svg viewBox="0 0 24 24"><path d="M6 6h15l-1.5 9H7L6 6z"/><circle cx="9" cy="19" r="2"/><circle cx="17" cy="19" r="2"/></svg>311 <div class="tab-label">Cart</div>312 </div>313 <div class="home-indicator"></div>314 </div>315 316</div>317</body>318</html>