GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Shopping Grid - Sofas</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: #ffffff;14 }15 16 /* Status bar */17 .status-bar {18 height: 120px;19 background: #ffffff;20 display: flex;21 align-items: center;22 padding: 0 36px;23 box-sizing: border-box;24 border-bottom: 1px solid #eee;25 }26 .status-left { font-size: 38px; color: #333; font-weight: 600; }27 .status-right { margin-left: auto; display: flex; align-items: center; gap: 28px; }28 .icon { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; }29 .icon svg { width: 44px; height: 44px; }30 31 /* Content grid */32 .content {33 position: absolute;34 top: 120px;35 bottom: 160px;36 left: 0;37 right: 0;38 overflow: hidden;39 }40 .cards {41 display: grid;42 grid-template-columns: repeat(2, 1fr);43 grid-column-gap: 36px;44 grid-row-gap: 42px;45 padding: 24px 36px 180px 36px;46 box-sizing: border-box;47 }48 .card {49 width: 100%;50 }51 .img-holder {52 width: 100%;53 height: 420px;54 background: #E0E0E0;55 border: 1px solid #BDBDBD;56 border-radius: 24px;57 box-sizing: border-box;58 color: #757575;59 display: flex;60 align-items: center;61 justify-content: center;62 position: relative;63 font-size: 28px;64 }65 .badge {66 position: absolute;67 left: 20px;68 bottom: 20px;69 background: #ef524f;70 color: #fff;71 padding: 14px 24px;72 border-radius: 12px;73 font-size: 28px;74 font-weight: 700;75 }76 .wish {77 position: absolute;78 right: 18px;79 top: 18px;80 width: 88px;81 height: 88px;82 border-radius: 50%;83 background: #ffffff;84 box-shadow: 0 2px 8px rgba(0,0,0,0.15);85 display: flex;86 align-items: center;87 justify-content: center;88 }89 .wish svg { width: 56px; height: 56px; }90 .price-row {91 margin-top: 18px;92 display: flex;93 align-items: baseline;94 gap: 18px;95 }96 .price {97 color: #e53935;98 font-size: 40px;99 font-weight: 800;100 }101 .mrp {102 color: #9e9e9e;103 font-size: 34px;104 text-decoration: line-through;105 }106 .title {107 margin-top: 12px;108 font-size: 34px;109 color: #222;110 line-height: 1.25;111 }112 113 /* Bottom toolbar */114 .toolbar {115 position: absolute;116 left: 0; right: 0; bottom: 92px;117 height: 140px;118 background: #ffffff;119 border-top: 1px solid #e5e5e5;120 display: flex;121 align-items: center;122 justify-content: space-around;123 box-sizing: border-box;124 }125 .tool {126 display: flex;127 align-items: center;128 gap: 24px;129 color: #111;130 font-size: 34px;131 font-weight: 700;132 }133 .tool svg { width: 48px; height: 48px; }134 .divider {135 width: 1px;136 height: 60px;137 background: #ddd;138 }139 140 /* Gesture bar */141 .gesture {142 position: absolute;143 bottom: 24px;144 left: 50%;145 transform: translateX(-50%);146 width: 240px;147 height: 16px;148 background: #000;149 border-radius: 16px;150 }151</style>152</head>153<body>154<div id="render-target">155 <div class="status-bar">156 <div class="status-left">1:29</div>157 <div class="status-right">158 <span class="icon" aria-hidden="true">159 <!-- Gear -->160 <svg viewBox="0 0 24 24" fill="#666"><path d="M12 8a4 4 0 1 0 0 8 4 4 0 0 0 0-8zm10 4-2.2.6c-.1.4-.3.8-.5 1.2l1.3 1.9-2 2-1.9-1.3c-.4.2-.8.4-1.2.5L14 22h-4l-.5-2.2c-.4-.1-.8-.3-1.2-.5l-1.9 1.3-2-2 1.3-1.9c-.2-.4-.4-.8-.5-1.2L2 12l2.2-.6c.1-.4.3-.8.5-1.2L3.4 8.3l2-2 1.9 1.3c.4-.2.8-.4 1.2-.5L10 4h4l.6 2.2c.4.1.8.3 1.2.5l1.9-1.3 2 2-1.3 1.9c.2.4.4.8.5 1.2L22 12z"/></svg>161 </span>162 <span class="icon" aria-hidden="true">163 <!-- Cloud -->164 <svg viewBox="0 0 24 24" fill="#666"><path d="M6 18h11a4 4 0 0 0 .4-8A6 6 0 0 0 6 7a5 5 0 0 0 0 11z"/></svg>165 </span>166 <span class="icon" aria-hidden="true">167 <!-- WiFi -->168 <svg viewBox="0 0 24 24" fill="#666"><path d="M2 8a16 16 0 0 1 20 0l-2 2a13 13 0 0 0-16 0L2 8zm4 4a10 10 0 0 1 12 0l-2 2a7 7 0 0 0-8 0l-2-2zm4 4a4 4 0 0 1 4 0l-2 2-2-2z"/></svg>169 </span>170 <span class="icon" aria-hidden="true">171 <!-- Battery -->172 <svg viewBox="0 0 28 24"><rect x="2" y="5" width="22" height="14" rx="2" ry="2" fill="#666"/><rect x="24" y="9" width="4" height="6" fill="#666"/></svg>173 </span>174 </div>175 </div>176 177 <div class="content">178 <div class="cards">179 <!-- Row 1 -->180 <div class="card">181 <div class="img-holder">182 [IMG: Living room sofa set - Beige]183 <div class="wish" aria-label="Add to wishlist">184 <svg viewBox="0 0 24 24" fill="none" stroke="#111" stroke-width="1.6">185 <path d="M12 21s-7-4.5-7-9a4 4 0 0 1 7-2 4 4 0 0 1 7 2c0 4.5-7 9-7 9z"/>186 <path d="M12 7v6M9 10h6" />187 </svg>188 </div>189 <div class="badge">50% OFF</div>190 </div>191 <div class="price-row">192 <div class="price">₹ 30,998</div>193 <div class="mrp">₹ 61,996</div>194 </div>195 <div class="title">Emily Fabric 3+1 Seater Sofa Set - Beige</div>196 </div>197 198 <div class="card">199 <div class="img-holder">200 [IMG: Living room sofa set - Brown]201 <div class="wish" aria-label="Add to wishlist">202 <svg viewBox="0 0 24 24" fill="none" stroke="#111" stroke-width="1.6">203 <path d="M12 21s-7-4.5-7-9a4 4 0 0 1 7-2 4 4 0 0 1 7 2c0 4.5-7 9-7 9z"/>204 <path d="M12 7v6M9 10h6" />205 </svg>206 </div>207 <div class="badge">50% OFF</div>208 </div>209 <div class="price-row">210 <div class="price">₹ 30,998</div>211 <div class="mrp">₹ 61,996</div>212 </div>213 <div class="title">Emily Fabric 3+1 Seater Sofa Set - Brown</div>214 </div>215 216 <!-- Row 2 -->217 <div class="card">218 <div class="img-holder">219 [IMG: Living room sofa set - Beige]220 <div class="wish" aria-label="Add to wishlist">221 <svg viewBox="0 0 24 24" fill="none" stroke="#111" stroke-width="1.6">222 <path d="M12 21s-7-4.5-7-9a4 4 0 0 1 7-2 4 4 0 0 1 7 2c0 4.5-7 9-7 9z"/>223 <path d="M12 7v6M9 10h6" />224 </svg>225 </div>226 <div class="badge">50% OFF</div>227 </div>228 <div class="price-row">229 <div class="price">₹ 43,997</div>230 <div class="mrp">₹ 87,994</div>231 </div>232 <div class="title">Emily Fabric 3+1+1 Seater Sofa Set - Beige</div>233 </div>234 235 <div class="card">236 <div class="img-holder">237 [IMG: Living room sofa set - Brown]238 <div class="wish" aria-label="Add to wishlist">239 <svg viewBox="0 0 24 24" fill="none" stroke="#111" stroke-width="1.6">240 <path d="M12 21s-7-4.5-7-9a4 4 0 0 1 7-2 4 4 0 0 1 7 2c0 4.5-7 9-7 9z"/>241 <path d="M12 7v6M9 10h6" />242 </svg>243 </div>244 <div class="badge">50% OFF</div>245 </div>246 <div class="price-row">247 <div class="price">₹ 43,997</div>248 <div class="mrp">₹ 87,994</div>249 </div>250 <div class="title">Emily Fabric 3+1+1 Seater Sofa Set - Brown</div>251 </div>252 253 <!-- Row 3 -->254 <div class="card">255 <div class="img-holder">256 [IMG: Living room sofa set - Beige]257 <div class="wish" aria-label="Add to wishlist">258 <svg viewBox="0 0 24 24" fill="none" stroke="#111" stroke-width="1.6">259 <path d="M12 21s-7-4.5-7-9a4 4 0 0 1 7-2 4 4 0 0 1 7 2c0 4.5-7 9-7 9z"/>260 <path d="M12 7v6M9 10h6" />261 </svg>262 </div>263 <div class="badge">50% OFF</div>264 </div>265 <div class="price-row">266 <div class="price">₹ 32,998</div>267 <div class="mrp">₹ 65,996</div>268 </div>269 <div class="title">Emily Fabric 3+2 Seater Sofa Set - Beige</div>270 </div>271 272 <div class="card">273 <div class="img-holder">274 [IMG: Living room sofa set - Beige & Brown]275 <div class="wish" aria-label="Add to wishlist">276 <svg viewBox="0 0 24 24" fill="none" stroke="#111" stroke-width="1.6">277 <path d="M12 21s-7-4.5-7-9a4 4 0 0 1 7-2 4 4 0 0 1 7 2c0 4.5-7 9-7 9z"/>278 <path d="M12 7v6M9 10h6" />279 </svg>280 </div>281 <div class="badge">50% OFF</div>282 </div>283 <div class="price-row">284 <div class="price">₹ 32,998</div>285 <div class="mrp">₹ 65,996</div>286 </div>287 <div class="title">Emily Fabric 3+2 Seater Sofa Set - Beige and Brown</div>288 </div>289 290 <!-- Extra row to fill height (matching repeated pattern) -->291 <div class="card">292 <div class="img-holder">293 [IMG: Living room sofa set - Beige]294 <div class="wish" aria-label="Add to wishlist">295 <svg viewBox="0 0 24 24" fill="none" stroke="#111" stroke-width="1.6">296 <path d="M12 21s-7-4.5-7-9a4 4 0 0 1 7-2 4 4 0 0 1 7 2c0 4.5-7 9-7 9z"/>297 <path d="M12 7v6M9 10h6" />298 </svg>299 </div>300 <div class="badge">50% OFF</div>301 </div>302 <div class="price-row">303 <div class="price">₹ 30,998</div>304 <div class="mrp">₹ 61,996</div>305 </div>306 <div class="title">Emily Fabric 3+1 Seater Sofa Set - Beige</div>307 </div>308 309 <div class="card">310 <div class="img-holder">311 [IMG: Living room sofa set - Brown]312 <div class="wish" aria-label="Add to wishlist">313 <svg viewBox="0 0 24 24" fill="none" stroke="#111" stroke-width="1.6">314 <path d="M12 21s-7-4.5-7-9a4 4 0 0 1 7-2 4 4 0 0 1 7 2c0 4.5-7 9-7 9z"/>315 <path d="M12 7v6M9 10h6" />316 </svg>317 </div>318 <div class="badge">50% OFF</div>319 </div>320 <div class="price-row">321 <div class="price">₹ 43,997</div>322 <div class="mrp">₹ 87,994</div>323 </div>324 <div class="title">Emily Fabric 3+1+1 Seater Sofa Set - Brown</div>325 </div>326 </div>327 </div>328 329 <div class="toolbar">330 <div class="tool">331 <!-- Sort icon: up/down arrows -->332 <svg viewBox="0 0 24 24" stroke="#111" fill="none" stroke-width="2">333 <path d="M7 4l-3 3h6l-3-3zM17 20l3-3h-6l3 3zM12 7v10"/>334 </svg>335 <span>SORT</span>336 </div>337 <div class="divider"></div>338 <div class="tool">339 <!-- Refine icon: sliders -->340 <svg viewBox="0 0 24 24" stroke="#111" fill="none" stroke-width="2">341 <circle cx="7" cy="6" r="2"/><path d="M2 6h3M9 6h13"/>342 <circle cx="15" cy="12" r="2"/><path d="M2 12h11M17 12h5"/>343 <circle cx="10" cy="18" r="2"/><path d="M2 18h6M12 18h10"/>344 </svg>345 <span>REFINE</span>346 </div>347 </div>348 349 <div class="gesture"></div>350</div>351</body>352</html>