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>Product Listing - Floor Lamp</title>7<style>8 body { margin: 0; padding: 0; background: transparent; }9 #render-target {10 width: 1080px;11 height: 2400px;12 position: relative;13 overflow: hidden;14 background: #ffffff;15 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;16 color: #222;17 }18 .top-gradient {19 height: 260px;20 background: linear-gradient(180deg, #8edbd2 0%, #b9e9be 100%);21 position: relative;22 padding: 0 36px;23 }24 /* Status bar */25 .status-bar {26 height: 64px;27 padding-top: 18px;28 display: flex;29 align-items: center;30 justify-content: space-between;31 color: #1b1b1b;32 font-weight: 600;33 }34 .status-icons { display: flex; align-items: center; gap: 18px; }35 .dot { width: 10px; height: 10px; background: #1b1b1b; border-radius: 50%; display: inline-block; }36 .battery {37 width: 26px; height: 14px; border: 2px solid #1b1b1b; border-radius: 3px; position: relative;38 }39 .battery::after {40 content: ""; position: absolute; right: -6px; top: 3px; width: 4px; height: 8px; background: #1b1b1b; border-radius: 1px;41 }42 .battery .level { width: 70%; height: 100%; background: #1b1b1b; }43 44 /* Search area */45 .search-row { display: flex; align-items: center; margin-top: 18px; gap: 18px; }46 .icon-btn {47 width: 64px; height: 64px; border-radius: 32px;48 display: flex; align-items: center; justify-content: center;49 background: transparent;50 }51 .search-bar {52 flex: 1;53 height: 98px;54 background: #fff;55 border-radius: 28px;56 box-shadow: 0 4px 12px rgba(0,0,0,0.12);57 display: flex; align-items: center; padding: 0 26px; gap: 18px;58 font-size: 40px; color: #555;59 }60 .search-bar .pill-actions { margin-left: auto; display: flex; align-items: center; gap: 20px; color: #666; }61 .search-text { color: #444; font-size: 40px; }62 /* Sponsored mini card */63 .sponsored {64 margin: 16px 0 0;65 background: #ffffff;66 border-bottom: 1px solid #e6e6e6;67 padding: 18px 36px 14px;68 position: relative;69 }70 .sponsored .label {71 position: absolute;72 top: 16px;73 right: 44px;74 font-size: 28px;75 color: #7b7b7b;76 display: flex; align-items: center; gap: 8px;77 }78 .s-card {79 display: grid;80 grid-template-columns: 120px 1fr auto;81 gap: 18px; align-items: center;82 }83 .thumb {84 width: 120px; height: 120px; background: #E0E0E0; border: 1px solid #BDBDBD;85 display: flex; align-items: center; justify-content: center; color: #757575; font-size: 22px;86 }87 .s-title { font-weight: 700; color: #111; font-size: 32px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }88 .price-line { margin-top: 6px; font-size: 36px; color: #c83c00; font-weight: 700; }89 .prime { font-size: 26px; color: #1683ff; margin-left: 8px; font-weight: 600; }90 /* Product meta */91 .content { padding: 18px 36px 0; }92 .row-between { display: flex; align-items: center; justify-content: space-between; }93 .store-link { color: #1a73e8; font-size: 36px; font-weight: 600; }94 .rating { display: flex; align-items: center; gap: 10px; color: #555; font-size: 30px; }95 .stars { display: inline-flex; gap: 4px; }96 .product-title { margin-top: 12px; font-size: 34px; color: #5b5b5b; }97 .chips { margin-top: 18px; display: flex; gap: 16px; flex-wrap: wrap; }98 .chip {99 background: #f1f3f4; padding: 14px 18px; border-radius: 14px; border: 1px solid #e2e2e2; color: #444; font-weight: 600; font-size: 30px;100 }101 /* Main image */102 .image-wrap {103 margin: 28px auto 10px;104 width: 840px;105 height: 1220px;106 position: relative;107 }108 .img-ph {109 width: 100%; height: 100%;110 background: #E0E0E0; border: 1px solid #BDBDBD;111 display: flex; align-items: center; justify-content: center; color: #757575; font-size: 36px; text-align: center; padding: 20px;112 }113 .badge {114 position: absolute; left: -44px; top: 180px;115 width: 140px; height: 140px; background: #a62c00; color: #fff; border-radius: 50%;116 font-size: 38px; font-weight: 800; display: flex; align-items: center; justify-content: center; text-align: center; line-height: 1.1;117 box-shadow: 0 6px 14px rgba(0,0,0,0.15);118 }119 .share-btn {120 position: absolute; right: -6px; top: 24px; width: 72px; height: 72px; border-radius: 36px;121 background: #fff; box-shadow: 0 2px 8px rgba(0,0,0,0.15); display: flex; align-items: center; justify-content: center;122 }123 .wish {124 position: absolute; left: 60px; top: 1560px; width: 72px; height: 72px; border-radius: 36px; background: #ffffff;125 display: flex; align-items: center; justify-content: center; border: 1px solid #e5e5e5;126 }127 /* Pager dots */128 .dots { display: flex; justify-content: center; gap: 18px; margin: 22px 0 8px; }129 .dot-p {130 width: 20px; height: 20px; border-radius: 50%; background: #d8d8d8;131 }132 .dot-p.active { background: #0b7e7c; width: 24px; height: 24px; }133 .meta-note { text-align: center; color: #6b6b6b; font-size: 30px; margin-top: 6px; }134 /* Bottom nav */135 .bottom-nav {136 position: absolute; left: 0; right: 0; bottom: 60px;137 height: 180px; background: #ffffff; border-top: 1px solid #e6e6e6;138 display: grid; grid-template-columns: repeat(5, 1fr); align-items: center; text-align: center;139 }140 .nav-item { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; color: #4b4b4b; font-size: 28px; }141 .nav-item.active { color: #0b7e7c; }142 .cart-badge {143 position: absolute; top: -6px; right: 260px; /* approximate over cart icon */144 background: #0b7e7c; color: #fff; width: 36px; height: 36px; border-radius: 18px; font-size: 22px;145 display: flex; align-items: center; justify-content: center;146 }147 .gesture {148 position: absolute; left: 50%; transform: translateX(-50%);149 bottom: 16px; width: 280px; height: 10px; background: #c9c9c9; border-radius: 8px;150 }151 svg { width: 40px; height: 40px; }152</style>153</head>154<body>155<div id="render-target">156 157 <div class="top-gradient">158 <div class="status-bar">159 <div style="font-size:28px;">10:26</div>160 <div class="status-icons">161 <span class="dot"></span>162 <span class="dot"></span>163 <span class="dot"></span>164 <svg viewBox="0 0 24 24" style="width:28px;height:28px;fill:#1b1b1b;"><path d="M12 3c-4.97 0-9 4.03-9 9h3l-4 4-4-4h3c0-6.08 4.93-11 11-11v3z"/></svg>165 <div class="battery"><div class="level"></div></div>166 </div>167 </div>168 169 <div class="search-row">170 <div class="icon-btn">171 <svg viewBox="0 0 24 24"><path fill="#1b1b1b" d="M15.5 12h-8l3.5 3.5-1.4 1.4L3.7 11l5.9-5.9 1.4 1.4L7.5 10h8v2z"/></svg>172 </div>173 <div class="search-bar">174 <svg viewBox="0 0 24 24"><path fill="#666" d="M15.5 14h-.79l-.28-.27A6.471 6.471 0 0016 9.5 6.5 6.5 0 109.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zM4 9.5C4 6.46 6.46 4 9.5 4S15 6.46 15 9.5 12.54 15 9.5 15 4 12.54 4 9.5z"/></svg>175 <span class="search-text">floor lamp</span>176 <div class="pill-actions">177 <svg viewBox="0 0 24 24"><path fill="#666" d="M3 7h4V3h2v6H3V7zm12-4h2v4h4v2h-6V3zM3 13h6v6H7v-4H3v-2zm18 0v2h-4v4h-2v-6h6z"/></svg>178 <svg viewBox="0 0 24 24"><path fill="#666" d="M12 14a3 3 0 003-3V8a3 3 0 10-6 0v3a3 3 0 003 3zm5-3a5 5 0 01-10 0V8a5 5 0 1110 0v3zm-5 5c-3.33 0-6 1.34-6 3v1h12v-1c0-1.66-2.67-3-6-3z"/></svg>179 </div>180 </div>181 </div>182 </div>183 184 <div class="sponsored">185 <div class="label">Sponsored <span style="display:inline-block;width:20px;height:20px;border:1px solid #bdbdbd;border-radius:50%;text-align:center;line-height:18px;font-size:16px;">i</span></div>186 <div class="s-card">187 <div class="thumb">[IMG: Bamboo Light]</div>188 <div>189 <div class="s-title">AKWAY Bamboo Hanging Light for Living Room Cane...</div>190 <div class="price-line">₹1,299.00 <span class="prime">✓prime</span></div>191 </div>192 <div></div>193 </div>194 </div>195 196 <div class="content">197 <div class="row-between">198 <div class="store-link">Visit the Crosscut Furniture Store</div>199 <div class="rating">200 <span>4.2</span>201 <span class="stars">202 <svg viewBox="0 0 24 24"><path fill="#f39c12" d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg>203 <svg viewBox="0 0 24 24"><path fill="#f39c12" d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg>204 <svg viewBox="0 0 24 24"><path fill="#f39c12" d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg>205 <svg viewBox="0 0 24 24"><path fill="#f39c12" d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg>206 <svg viewBox="0 0 24 24"><path fill="#f39c12" d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg>207 </span>208 <span>106</span>209 </div>210 </div>211 212 <div class="product-title">Crosscut Furniture Minimalist Design Floor Lamp All (Jute Shade)</div>213 214 <div class="chips">215 <div class="chip">Energy Efficient</div>216 <div class="chip">LED</div>217 <div class="chip">Jute shade</div>218 </div>219 220 <div class="image-wrap">221 <div class="img-ph">[IMG: Floor lamp beside blue couch against white brick wall]</div>222 <div class="badge">74% off</div>223 <div class="share-btn">224 <svg viewBox="0 0 24 24"><path fill="#555" d="M18 16.08c-.76 0-1.44.3-1.96.77L8.91 12.7a3.3 3.3 0 000-1.39l7-4.11A2.99 2.99 0 0018 6a3 3 0 10-3-3c0 .23.03.45.08.66l-7 4.11a3 3 0 100 4.46l6.95 4.07c-.05.2-.08.41-.08.63a3 3 0 103-3z"/></svg>225 </div>226 </div>227 228 <div class="dots">229 <div class="dot-p active"></div>230 <div class="dot-p"></div>231 <div class="dot-p"></div>232 <div class="dot-p"></div>233 <div class="dot-p"></div>234 </div>235 236 <div class="meta-note">200+ bought in past month</div>237 </div>238 239 <div class="wish" title="Save">240 <svg viewBox="0 0 24 24"><path fill="none" stroke="#444" stroke-width="2" d="M12.1 8.64l-.1.1-.11-.11C9.14 6 5.6 7.28 5.6 10.3c0 1.69 1.24 3.22 3.55 5.39l2.75 2.6 2.75-2.6c2.31-2.17 3.55-3.7 3.55-5.39 0-3.02-3.54-4.3-6.0-1.66z"/></svg>241 </div>242 243 <div class="bottom-nav">244 <div class="nav-item active">245 <svg viewBox="0 0 24 24"><path fill="#0b7e7c" d="M12 3l9 8h-3v9h-4v-6H10v6H6v-9H3l9-8z"/></svg>246 <div>Home</div>247 </div>248 <div class="nav-item">249 <svg viewBox="0 0 24 24"><path fill="#4b4b4b" d="M12 12a5 5 0 100-10 5 5 0 000 10zm0 2c-4 0-8 2-8 5v3h16v-3c0-3-4-5-8-5z"/></svg>250 <div>You</div>251 </div>252 <div class="nav-item">253 <svg viewBox="0 0 24 24"><path fill="#4b4b4b" d="M3 13h8V3H3v10zm0 8h8v-6H3v6zm10 0h8V11h-8v10zm0-18v6h8V3h-8z"/></svg>254 <div>More</div>255 </div>256 <div class="nav-item" style="position:relative;">257 <svg viewBox="0 0 24 24"><path fill="#4b4b4b" d="M7 4h-2l-1 2H1v2h2l3.6 7.59-1.35 2.44A2 2 0 007 20h12v-2H7.42a.25.25 0 01-.22-.36l.74-1.34H18a2 2 0 001.8-1.11l3.24-6.49A1 1 0 0022.1 7H6.21l-.94-2zM7 22a2 2 0 100-4 2 2 0 000 4zm10 0a2 2 0 100-4 2 2 0 000 4z"/></svg>258 <div>Cart</div>259 </div>260 <div class="nav-item">261 <svg viewBox="0 0 24 24"><path fill="#4b4b4b" d="M3 6h18v2H3V6zm0 5h18v2H3v-2zm0 5h18v2H3v-2z"/></svg>262 <div>Menu</div>263 </div>264 <div class="cart-badge">3</div>265 </div>266 267 <div class="gesture"></div>268</div>269</body>270</html>