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>Sofas Listing</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }9 #render-target {10 position: relative;11 overflow: hidden;12 width: 1080px;13 height: 2400px;14 background: #FFFFFF;15 color: #1a1a1a;16 }17 18 /* Status bar */19 .status-bar {20 position: absolute;21 top: 0;22 left: 0;23 width: 100%;24 height: 96px;25 padding: 0 40px;26 display: flex;27 align-items: center;28 justify-content: space-between;29 font-size: 36px;30 color: #222;31 }32 .status-left, .status-right {33 display: flex;34 align-items: center;35 gap: 24px;36 }37 .status-icon svg { width: 40px; height: 40px; }38 39 /* App bar */40 .app-bar {41 position: absolute;42 top: 96px;43 left: 0;44 width: 100%;45 height: 140px;46 display: flex;47 align-items: center;48 padding: 0 32px;49 border-bottom: 1px solid #eee;50 }51 .app-left { display: flex; align-items: center; gap: 24px; }52 .app-title { font-size: 56px; font-weight: 700; }53 .app-actions {54 margin-left: auto;55 display: flex;56 align-items: center;57 gap: 36px;58 }59 .icon-btn { width: 64px; height: 64px; display: inline-flex; align-items: center; justify-content: center; }60 .icon-btn svg { width: 48px; height: 48px; stroke: #000; }61 62 /* Subheader */63 .subheader {64 position: absolute;65 top: 236px;66 left: 0;67 width: 100%;68 height: 110px;69 display: flex;70 align-items: center;71 padding: 0 32px;72 }73 .subheader .count { font-size: 40px; color: #4a4a4a; }74 .subheader .layout-toggle { margin-left: auto; width: 72px; height: 72px; display: flex; align-items: center; justify-content: center; }75 76 /* Grid */77 .content {78 position: absolute;79 top: 346px;80 left: 0;81 right: 0;82 bottom: 180px; /* leave space for bottom bar */83 padding: 0 32px;84 overflow: hidden;85 }86 .grid {87 display: flex;88 flex-wrap: wrap;89 gap: 24px;90 }91 .card {92 width: calc((100% - 24px) / 2);93 }94 .card-image {95 position: relative;96 width: 100%;97 height: 360px;98 background: #E0E0E0;99 border: 1px solid #BDBDBD;100 border-radius: 24px;101 display: flex;102 align-items: center;103 justify-content: center;104 color: #757575;105 font-size: 34px;106 text-align: center;107 overflow: hidden;108 }109 .badge {110 position: absolute;111 left: 24px;112 bottom: 24px;113 background: #E85645;114 color: #fff;115 padding: 12px 20px;116 font-size: 32px;117 border-radius: 14px;118 font-weight: 600;119 }120 .wish-circle {121 position: absolute;122 top: 18px;123 right: 18px;124 width: 84px;125 height: 84px;126 border-radius: 50%;127 background: #fff;128 border: 1px solid #ddd;129 display: flex;130 align-items: center;131 justify-content: center;132 box-shadow: 0 4px 10px rgba(0,0,0,0.08);133 }134 .wish-circle svg { width: 56px; height: 56px; }135 136 .price-row {137 margin-top: 18px;138 display: flex;139 align-items: baseline;140 gap: 18px;141 }142 .price-now { color: #D63E37; font-size: 44px; font-weight: 700; }143 .price-old { color: #A0A0A0; font-size: 38px; text-decoration: line-through; }144 .card-title {145 margin-top: 8px;146 font-size: 38px;147 color: #434343;148 line-height: 1.25;149 }150 151 /* Bottom bar */152 .bottom-bar {153 position: absolute;154 left: 0;155 right: 0;156 bottom: 60px;157 height: 160px;158 background: #fff;159 border-top: 1px solid #eee;160 display: flex;161 align-items: center;162 justify-content: space-between;163 padding: 0 64px;164 }165 .bar-btn {166 display: flex;167 align-items: center;168 gap: 24px;169 font-size: 40px;170 font-weight: 600;171 color: #111;172 }173 .bar-btn svg { width: 48px; height: 48px; stroke: #111; }174 .bar-divider {175 width: 1px;176 height: 80px;177 background: #E0E0E0;178 }179 /* Home indicator */180 .home-indicator {181 position: absolute;182 left: 50%;183 transform: translateX(-50%);184 bottom: 20px;185 width: 300px;186 height: 12px;187 background: #000;188 opacity: 0.08;189 border-radius: 12px;190 }191</style>192</head>193<body>194<div id="render-target">195 196 <!-- Status Bar -->197 <div class="status-bar">198 <div class="status-left">199 <div>1:29</div>200 <div class="status-icon">201 <svg viewBox="0 0 24 24" fill="none" stroke="#666" stroke-width="2">202 <circle cx="12" cy="12" r="9"></circle>203 <path d="M12 7v5l3 2"></path>204 </svg>205 </div>206 <div class="status-icon">207 <svg viewBox="0 0 24 24" fill="#888"><path d="M6 15c0-3 3-6 6-6s6 3 6 6H6z"></path></svg>208 </div>209 </div>210 <div class="status-right">211 <div class="status-icon">212 <svg viewBox="0 0 24 24" fill="none" stroke="#666" stroke-width="2">213 <path d="M3 10h18l-3 4H6z"></path>214 <path d="M20 6h1v12h-1z" fill="#666"></path>215 </svg>216 </div>217 <div class="status-icon">218 <svg viewBox="0 0 24 24" fill="none" stroke="#666" stroke-width="2">219 <rect x="7" y="4" width="10" height="16" rx="2"></rect>220 <path d="M10 2h4"></path>221 </svg>222 </div>223 </div>224 </div>225 226 <!-- App Bar -->227 <div class="app-bar">228 <div class="app-left">229 <div class="icon-btn">230 <svg viewBox="0 0 24 24" fill="none" stroke="#111" stroke-width="2">231 <path d="M15 6l-6 6 6 6"></path>232 </svg>233 </div>234 <div class="app-title">Sofas</div>235 </div>236 <div class="app-actions">237 <div class="icon-btn">238 <svg viewBox="0 0 24 24" fill="none" stroke="#111" stroke-width="2">239 <circle cx="11" cy="11" r="7"></circle>240 <path d="M21 21l-4-4"></path>241 </svg>242 </div>243 <div class="icon-btn">244 <svg viewBox="0 0 24 24" fill="none" stroke="#111" stroke-width="2">245 <path d="M12 21c3-2 6-5 6-9a6 6 0 00-12 0c0 4 3 7 6 9z"></path>246 </svg>247 </div>248 <div class="icon-btn">249 <svg viewBox="0 0 24 24" fill="none" stroke="#111" stroke-width="2">250 <path d="M6 7h12l-1 12H7L6 7z"></path>251 <path d="M9 7V5a3 3 0 016 0v2"></path>252 </svg>253 </div>254 </div>255 </div>256 257 <!-- Subheader -->258 <div class="subheader">259 <div class="count">308 Products</div>260 <div class="layout-toggle">261 <svg viewBox="0 0 24 24" fill="none" stroke="#111" stroke-width="2">262 <rect x="4" y="5" width="16" height="6" rx="2"></rect>263 <rect x="4" y="13" width="16" height="6" rx="2"></rect>264 </svg>265 </div>266 </div>267 268 <!-- Content Grid -->269 <div class="content">270 <div class="grid">271 <!-- Card 1 -->272 <div class="card">273 <div class="card-image">274 <div>[IMG: Emily Fabric 1-Seater Sofa - Beige]</div>275 <div class="wish-circle">276 <svg viewBox="0 0 24 24" fill="none" stroke="#000" stroke-width="2">277 <path d="M12 21c3-2 6-5 6-9a6 6 0 00-12 0c0 4 3 7 6 9z"></path>278 <path d="M12 8v6"></path>279 <path d="M9 11h6"></path>280 </svg>281 </div>282 <div class="badge">50% OFF</div>283 </div>284 <div class="price-row">285 <div class="price-now">₹ 12,999</div>286 <div class="price-old">₹ 25,998</div>287 </div>288 <div class="card-title">Emily Fabric 1-Seater Sofa - Beige</div>289 </div>290 291 <!-- Card 2 -->292 <div class="card">293 <div class="card-image">294 <div>[IMG: Emily Fabric 1-Seater Sofa - Brown]</div>295 <div class="wish-circle">296 <svg viewBox="0 0 24 24" fill="none" stroke="#000" stroke-width="2">297 <path d="M12 21c3-2 6-5 6-9a6 6 0 00-12 0c0 4 3 7 6 9z"></path>298 <path d="M12 8v6"></path>299 <path d="M9 11h6"></path>300 </svg>301 </div>302 <div class="badge">50% OFF</div>303 </div>304 <div class="price-row">305 <div class="price-now">₹ 12,999</div>306 <div class="price-old">₹ 25,998</div>307 </div>308 <div class="card-title">Emily Fabric 1-Seater Sofa - Brown</div>309 </div>310 311 <!-- Card 3 -->312 <div class="card">313 <div class="card-image">314 <div>[IMG: Emily Fabric 2-Seater Sofa - Beige]</div>315 <div class="wish-circle">316 <svg viewBox="0 0 24 24" fill="none" stroke="#000" stroke-width="2">317 <path d="M12 21c3-2 6-5 6-9a6 6 0 00-12 0c0 4 3 7 6 9z"></path>318 <path d="M12 8v6"></path>319 <path d="M9 11h6"></path>320 </svg>321 </div>322 <div class="badge">50% OFF</div>323 </div>324 <div class="price-row">325 <div class="price-now">₹ 14,999</div>326 <div class="price-old">₹ 29,998</div>327 </div>328 <div class="card-title">Emily Fabric 2-Seater Sofa - Beige</div>329 </div>330 331 <!-- Card 4 -->332 <div class="card">333 <div class="card-image">334 <div>[IMG: Emily Fabric 2-Seater Sofa - Brown]</div>335 <div class="wish-circle">336 <svg viewBox="0 0 24 24" fill="none" stroke="#000" stroke-width="2">337 <path d="M12 21c3-2 6-5 6-9a6 6 0 00-12 0c0 4 3 7 6 9z"></path>338 <path d="M12 8v6"></path>339 <path d="M9 11h6"></path>340 </svg>341 </div>342 <div class="badge">50% OFF</div>343 </div>344 <div class="price-row">345 <div class="price-now">₹ 14,999</div>346 <div class="price-old">₹ 29,998</div>347 </div>348 <div class="card-title">Emily Fabric 2-Seater Sofa - Brown</div>349 </div>350 351 <!-- Card 5 -->352 <div class="card">353 <div class="card-image">354 <div>[IMG: 3-Piece Sofa Set - Beige]</div>355 <div class="wish-circle">356 <svg viewBox="0 0 24 24" fill="none" stroke="#000" stroke-width="2">357 <path d="M12 21c3-2 6-5 6-9a6 6 0 00-12 0c0 4 3 7 6 9z"></path>358 <path d="M12 8v6"></path>359 <path d="M9 11h6"></path>360 </svg>361 </div>362 <div class="badge">50% OFF</div>363 </div>364 <div class="price-row">365 <div class="price-now">₹ 18,999</div>366 <div class="price-old">₹ 37,998</div>367 </div>368 <div class="card-title">Emily Fabric Sofa Set - Beige</div>369 </div>370 371 <!-- Card 6 -->372 <div class="card">373 <div class="card-image">374 <div>[IMG: 3-Piece Sofa Set - Brown]</div>375 <div class="wish-circle">376 <svg viewBox="0 0 24 24" fill="none" stroke="#000" stroke-width="2">377 <path d="M12 21c3-2 6-5 6-9a6 6 0 00-12 0c0 4 3 7 6 9z"></path>378 <path d="M12 8v6"></path>379 <path d="M9 11h6"></path>380 </svg>381 </div>382 <div class="badge">50% OFF</div>383 </div>384 <div class="price-row">385 <div class="price-now">₹ 18,999</div>386 <div class="price-old">₹ 37,998</div>387 </div>388 <div class="card-title">Emily Fabric Sofa Set - Brown</div>389 </div>390 </div>391 </div>392 393 <!-- Bottom Bar -->394 <div class="bottom-bar">395 <div class="bar-btn">396 <svg viewBox="0 0 24 24" fill="none" stroke="#111" stroke-width="2">397 <path d="M8 19V5M4 9l4-4 4 4"></path>398 <path d="M16 5v14M20 15l-4 4-4-4"></path>399 </svg>400 <span>SORT</span>401 </div>402 <div class="bar-divider"></div>403 <div class="bar-btn">404 <svg viewBox="0 0 24 24" fill="none" stroke="#111" stroke-width="2">405 <path d="M4 6h10"></path><circle cx="16" cy="6" r="2"></circle>406 <path d="M4 12h6"></path><circle cx="12" cy="12" r="2"></circle>407 <path d="M4 18h14"></path><circle cx="20" cy="18" r="2"></circle>408 </svg>409 <span>REFINE</span>410 </div>411 </div>412 413 <div class="home-indicator"></div>414</div>415</body>416</html>