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>Search - Floor Lamp</title>7<style>8 body { margin:0; padding:0; background:transparent; }9 #render-target{10 width:1080px; height:2400px; position:relative; overflow:hidden;11 background:#ffffff; font-family:system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; color:#111;12 }13 14 /* Top gradient header */15 .grad-header{16 background: linear-gradient(135deg,#a9e6e2,#69d3c7);17 padding: 18px 30px 20px 30px;18 }19 .status-bar{20 height:44px; display:flex; align-items:center; justify-content:space-between; color:#0a0a0a; font-weight:600;21 }22 .status-left{font-size:30px;}23 .status-right{display:flex; gap:22px; align-items:center;}24 .dot{width:22px; height:22px; background:#0a0a0a; border-radius:50%;}25 .pill-icon{26 width:28px; height:18px; border:3px solid #0a0a0a; border-radius:4px; position:relative;27 }28 .pill-icon:after{content:""; position:absolute; right:-8px; top:2px; width:6px; height:6px; border-radius:50%; background:#0a0a0a;}29 30 .top-row{31 display:flex; align-items:center; gap:24px; margin-top:16px;32 }33 .back-btn{34 width:60px; height:60px; display:flex; align-items:center; justify-content:center;35 }36 .search-bar{37 flex:1;38 background:#fff; border-radius:24px; box-shadow:0 4px 12px rgba(0,0,0,0.12);39 padding:18px 24px; display:flex; align-items:center; gap:18px; font-size:36px; color:#666;40 }41 .search-bar .right-icons{margin-left:auto; display:flex; gap:18px; align-items:center;}42 .icon{width:36px; height:36px; display:inline-flex; align-items:center; justify-content:center; color:#666;}43 .location-row{44 display:flex; align-items:center; gap:16px; font-size:32px; color:#0f1111; margin-top:26px;45 }46 .location-row .muted{color:#0f1111;}47 .filters-row{48 margin-top:22px; display:flex; align-items:center; justify-content:space-between;49 }50 .left-filters{display:flex; align-items:center; gap:18px;}51 .prime-chip{display:flex; align-items:center; gap:10px; color:#0aa1ff; font-weight:700; font-size:30px;}52 .toggle{53 width:86px; height:46px; background:#f1f1f1; border-radius:26px; position:relative; border:1px solid #ddd;54 }55 .toggle:after{56 content:""; position:absolute; width:38px; height:38px; background:#fff; border-radius:50%; border:1px solid #cfcfcf;57 left:4px; top:3px;58 }59 .pill{60 background:#f3f4f6; color:#333; font-size:32px; padding:12px 22px; border-radius:18px; border:1px solid #e5e7eb;61 }62 .filters-link{color:#0a99ff; font-size:32px; display:flex; align-items:center; gap:8px;}63 64 /* Content area */65 .content{66 position:absolute; left:0; right:0; top:356px; bottom:160px; /* space for bottom bar */67 overflow:auto; padding: 22px 24px 160px 24px; background:#fff;68 }69 70 /* Sponsored Brand module */71 .brand-card{72 background:#fff; padding:24px; border-bottom:1px solid #e6e6e6;73 }74 .brand-header{display:flex; align-items:center; gap:18px; margin-bottom:12px;}75 .brand-avatar{76 width:96px; height:96px; border-radius:50%; background:#E0E0E0; border:1px solid #BDBDBD;77 display:flex; align-items:center; justify-content:center; color:#757575; font-size:22px;78 }79 .brand-title{font-size:38px; font-weight:700;}80 .brand-grid{display:flex; gap:22px; margin:22px 0;}81 .img-ph{82 width:316px; height:240px; background:#E0E0E0; border:1px solid #BDBDBD; display:flex; align-items:center; justify-content:center; color:#757575; font-size:28px;83 }84 .cap{font-size:28px; color:#333; margin-top:8px;}85 .brand-link{86 display:flex; align-items:center; justify-content:space-between; padding-top:18px; border-top:1px solid #ececec; color:#0a99ff; font-size:32px;87 }88 .sponsored-note{color:#8a8a8a; font-size:26px; display:flex; align-items:center; gap:8px;}89 .info-dot{90 width:26px; height:26px; background:#d0d0d0; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; color:#666; font-size:20px;91 }92 93 /* advisory text */94 .advice{color:#6b7280; font-size:30px; line-height:1.35; padding:18px 8px 24px 8px;}95 96 /* Product card */97 .product{98 background:#fff; border:1px solid #eee; border-radius:18px; box-shadow:0 2px 6px rgba(0,0,0,0.04);99 display:flex; gap:22px; padding:22px; margin-bottom:26px;100 }101 .p-img{width:420px; height:420px;}102 .p-right{flex:1; min-width:0;}103 .sponsored{color:#6b7280; font-size:26px; margin-bottom:6px;}104 .p-title{font-size:36px; font-weight:700; line-height:1.2; margin-bottom:10px;}105 .rating{display:flex; align-items:center; gap:10px; font-size:30px; color:#0a99ff; margin:6px 0 12px 0;}106 .stars{color:#ff9800; letter-spacing:4px; font-size:30px;}107 .price{font-size:48px; font-weight:800; margin:8px 0;}108 .coupon{display:inline-block; background:#c7f2c5; color:#1b5e20; font-weight:700; padding:6px 12px; border-radius:8px; font-size:30px; margin-bottom:6px;}109 .ship{font-size:30px; color:#111; margin-top:8px;}110 .fast{font-size:30px; color:#111; margin-top:2px;}111 .stock{font-size:30px; color:#c62828; margin-top:4px;}112 .variants{font-size:30px; color:#0a99ff; margin:10px 0 18px 0;}113 .cta{114 width:100%; background:#ffce00; border:none; border-radius:14px; padding:22px 0; font-size:36px; font-weight:800; color:#111; cursor:pointer;115 box-shadow:0 2px 0 #d6ae00 inset;116 }117 118 /* Bottom tab bar */119 .bottom-bar{120 position:absolute; left:0; right:0; bottom:0; height:160px; background:#fff; border-top:1px solid #e6e6e6;121 display:flex; align-items:center; justify-content:space-around; padding-bottom:16px;122 }123 .tab{display:flex; flex-direction:column; align-items:center; gap:10px; font-size:26px; color:#111; width:20%;}124 .tab .icon{width:44px; height:44px;}125 .active{color:#00a4a4;}126 .cart-badge{127 position:absolute; top:-6px; right:-10px; background:#00a4a4; color:#fff; font-size:22px; width:32px; height:32px; border-radius:50%;128 display:flex; align-items:center; justify-content:center;129 }130 .home-indicator{131 position:absolute; bottom:162px; left:50%; transform:translateX(-50%);132 width:360px; height:10px; background:#cfcfcf; border-radius:6px;133 }134 135 /* Helpers */136 .row{display:flex; gap:16px;}137 .small-muted{color:#6b7280;}138</style>139</head>140<body>141<div id="render-target">142 143 <div class="grad-header">144 <div class="status-bar">145 <div class="status-left">10:14</div>146 <div class="status-right">147 <div class="dot"></div>148 <div class="dot" style="background:#000;"></div>149 <div class="pill-icon"></div>150 <div class="dot" style="width:14px;height:14px;background:#444;"></div>151 <svg class="icon" viewBox="0 0 24 24" fill="#111"><path d="M18 6l-3 0 0-2-6 0 0 2-3 0-2 3 0 9 2 2 14 0 2-2 0-9-2-3zm-6 12a4 4 0 1 1 0-8 4 4 0 0 1 0 8z"/></svg>152 </div>153 </div>154 155 <div class="top-row">156 <div class="back-btn">157 <svg viewBox="0 0 24 24" width="36" height="36">158 <path d="M15 6 L9 12 L15 18" stroke="#111" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/>159 </svg>160 </div>161 <div class="search-bar">162 <svg class="icon" viewBox="0 0 24 24">163 <circle cx="11" cy="11" r="7" stroke="#666" stroke-width="2" fill="none"/>164 <path d="M16.5 16.5 L21 21" stroke="#666" stroke-width="2" stroke-linecap="round"/>165 </svg>166 <span>floor lamp</span>167 <div class="right-icons">168 <svg class="icon" viewBox="0 0 24 24">169 <rect x="3" y="6" width="18" height="12" rx="2" ry="2" stroke="#666" fill="none" stroke-width="2"/>170 <circle cx="8" cy="12" r="2" fill="#666"/>171 <circle cx="16" cy="12" r="2" fill="#666"/>172 </svg>173 <svg class="icon" viewBox="0 0 24 24">174 <path d="M12 3a3 3 0 0 0-3 3v4a3 3 0 0 0 6 0V6a3 3 0 0 0-3-3zM6 14h12v2H6z" fill="#666"/>175 </svg>176 </div>177 </div>178 </div>179 180 <div class="location-row">181 <svg class="icon" viewBox="0 0 24 24">182 <path d="M12 2C8.7 2 6 4.7 6 8c0 4.5 6 12 6 12s6-7.5 6-12c0-3.3-2.7-6-6-6zm0 8a2 2 0 1 1 0-4 2 2 0 0 1 0 4z" fill="#0a0a0a"/>183 </svg>184 <div>Delivering to Delhi 110001 - Update location</div>185 <svg class="icon" viewBox="0 0 24 24"><path d="M6 9l6 6 6-6" fill="none" stroke="#111" stroke-width="2" stroke-linecap="round"/></svg>186 </div>187 188 <div class="filters-row">189 <div class="left-filters">190 <div class="prime-chip">191 <span>prime</span>192 <div class="toggle"></div>193 </div>194 <div class="pill">Under ₹500</div>195 </div>196 <div class="filters-link">197 <span>Filters</span>198 <svg class="icon" viewBox="0 0 24 24"><path d="M4 5h16M7 12h10M10 19h4" stroke="#0a99ff" stroke-width="2" stroke-linecap="round"/></svg>199 </div>200 </div>201 </div>202 203 <div class="content">204 <!-- Sponsored brand -->205 <div class="brand-card">206 <div class="brand-header">207 <div class="brand-avatar">[IMG]</div>208 <div class="brand-title">Premium Quality Floor Lamps And Table Lamps.</div>209 </div>210 211 <div class="brand-grid">212 <div>213 <div class="img-ph p-img" style="width:316px; height:240px;">[IMG: Floor Standing Lamp]</div>214 <div class="cap">Floor Standing Lamps</div>215 </div>216 <div>217 <div class="img-ph p-img" style="width:316px; height:240px;">[IMG: Table Lamp]</div>218 <div class="cap">Table Lamps</div>219 </div>220 <div>221 <div class="img-ph p-img" style="width:316px; height:240px;">[IMG: Popular Lamps]</div>222 <div class="cap">The Most Loved Lamps</div>223 </div>224 </div>225 226 <div class="brand-link">227 <div>Shop the Divine Trends Store on Amazon ›</div>228 <div class="sponsored-note">229 <span>Sponsored</span>230 <span class="info-dot">i</span>231 </div>232 </div>233 </div>234 235 <div class="advice">236 Check each product page for other buying options. Price and other details may vary based on product size and colour.237 </div>238 239 <!-- Product card -->240 <div class="product">241 <div class="img-ph p-img">[IMG: Blue floor lamp beside sofa]</div>242 <div class="p-right">243 <div class="sponsored">Sponsored</div>244 <div class="p-title">BlueBite Club Floor Lamp (Blue) | 4.75 ft | Jute Fabric Cone Shape | White Metal Base | White LED...</div>245 <div class="rating">246 <span>5.0</span>247 <span class="stars">★★★★★</span>248 <span class="small-muted">(4)</span>249 </div>250 <div class="price">₹2,999</div>251 <div class="coupon">Save ₹100</div> <span class="small-muted">with coupon</span>252 <div class="ship">FREE delivery Wed, 10 Jan</div>253 <div class="fast">Or fastest delivery Tomorrow, 9 Jan</div>254 <div class="stock">Only 1 left in stock.</div>255 <div class="variants">+6 colours/patterns</div>256 <button class="cta">Add to Cart</button>257 </div>258 </div>259 260 <!-- spacer -->261 <div style="height:320px;"></div>262 </div>263 264 <!-- Home indicator -->265 <div class="home-indicator"></div>266 267 <!-- Bottom bar -->268 <div class="bottom-bar">269 <div class="tab active">270 <svg class="icon" viewBox="0 0 24 24">271 <path d="M3 11l9-7 9 7v8a2 2 0 0 1-2 2h-4v-6h-6v6H5a2 2 0 0 1-2-2z" fill="#00a4a4"/>272 </svg>273 <div>Home</div>274 </div>275 <div class="tab">276 <svg class="icon" viewBox="0 0 24 24">277 <circle cx="12" cy="8" r="4" fill="#111"/>278 <path d="M4 20c1.5-4 5-6 8-6s6.5 2 8 6" stroke="#111" stroke-width="2" fill="none" stroke-linecap="round"/>279 </svg>280 <div>You</div>281 </div>282 <div class="tab">283 <svg class="icon" viewBox="0 0 24 24">284 <path d="M3 7h18v4H3zM6 13h12v4H6z" fill="#111"/>285 </svg>286 <div>More</div>287 </div>288 <div class="tab" style="position:relative;">289 <svg class="icon" viewBox="0 0 24 24">290 <path d="M6 6h2l2 10h8l2-7H9" fill="none" stroke="#111" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>291 <circle cx="10" cy="20" r="1.6" fill="#111"/>292 <circle cx="18" cy="20" r="1.6" fill="#111"/>293 </svg>294 <div class="cart-badge">2</div>295 <div>Cart</div>296 </div>297 <div class="tab">298 <svg class="icon" viewBox="0 0 24 24">299 <path d="M3 6h18M3 12h18M3 18h18" stroke="#111" stroke-width="2" stroke-linecap="round"/>300 </svg>301 <div>Menu</div>302 </div>303 </div>304 305</div>306</body>307</html>