GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Wooden Sofa Listing</title>6<style>7 body { margin: 0; padding: 0; background: transparent; font-family: "SF Pro Text", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, 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 position: absolute;19 top: 0;20 left: 0;21 width: 1080px;22 height: 120px;23 background: #131313;24 color: #fff;25 display: flex;26 align-items: center;27 padding: 0 36px;28 box-sizing: border-box;29 font-size: 36px;30 }31 .status-bar .time { font-weight: 600; margin-right: 24px; }32 .status-icons {33 margin-left: auto;34 display: flex;35 align-items: center;36 gap: 24px;37 }38 .status-icons svg { opacity: 0.9; }39 40 /* Header */41 .header {42 position: absolute;43 top: 120px;44 left: 0;45 width: 1080px;46 height: 168px;47 background: #1e1e1e;48 color: #fff;49 box-sizing: border-box;50 padding: 0 36px;51 display: flex;52 align-items: center;53 }54 .header-left {55 display: flex;56 align-items: center;57 gap: 24px;58 }59 .back-btn svg { width: 48px; height: 48px; }60 .title-wrap { line-height: 1.15; }61 .title-wrap .title {62 font-size: 52px;63 font-weight: 700;64 text-transform: lowercase;65 }66 .title-wrap .sub {67 font-size: 30px;68 color: #c9c9c9;69 margin-top: 8px;70 }71 .header-actions {72 margin-left: auto;73 display: flex;74 align-items: center;75 gap: 42px;76 }77 .header-actions svg { width: 50px; height: 50px; }78 79 /* Floating scroll indicator */80 .scroll-indicator {81 position: absolute;82 top: 310px;83 left: 50%;84 transform: translateX(-50%);85 background: #5c5c5c;86 color: #fff;87 padding: 18px 36px;88 border-radius: 32px;89 font-size: 34px;90 box-shadow: 0 4px 8px rgba(0,0,0,0.35);91 display: flex;92 align-items: center;93 gap: 16px;94 }95 .scroll-indicator .arrow {96 width: 28px;97 height: 28px;98 border-radius: 50%;99 background: rgba(255,255,255,0.25);100 display: inline-flex;101 align-items: center;102 justify-content: center;103 }104 105 /* Content area */106 .content {107 position: absolute;108 top: 288px;109 left: 0;110 width: 1080px;111 bottom: 220px; /* leave room for bottom bar + home indicator */112 overflow: hidden;113 background: #fff;114 }115 116 /* Grid of cards */117 .grid {118 display: grid;119 grid-template-columns: repeat(2, 1fr);120 gap: 36px;121 padding: 36px;122 box-sizing: border-box;123 }124 .card {125 border-radius: 22px;126 overflow: hidden;127 background: #fff;128 }129 .card .img {130 position: relative;131 height: 520px;132 background: #E0E0E0;133 border: 1px solid #BDBDBD;134 border-radius: 22px;135 display: flex;136 align-items: center;137 justify-content: center;138 color: #757575;139 font-size: 32px;140 }141 .fav-icon, .tag-icon {142 position: absolute;143 width: 66px;144 height: 66px;145 border-radius: 16px;146 background: rgba(255,255,255,0.9);147 display: flex;148 align-items: center;149 justify-content: center;150 box-shadow: 0 4px 8px rgba(0,0,0,0.08);151 }152 .fav-icon { top: 22px; right: 22px; }153 .tag-icon { bottom: 22px; right: 22px; }154 .card .info {155 padding: 22px 4px 8px 4px;156 }157 .brand {158 font-size: 38px;159 font-weight: 800;160 color: #222;161 margin-bottom: 8px;162 padding-left: 8px;163 }164 .desc {165 color: #6b6b6b;166 font-size: 30px;167 line-height: 1.35;168 padding-left: 8px;169 margin-bottom: 8px;170 }171 .price-row {172 display: flex;173 align-items: center;174 gap: 16px;175 padding-left: 8px;176 margin-top: 8px;177 margin-bottom: 8px;178 }179 .price {180 font-size: 42px;181 font-weight: 900;182 color: #1b1b1b;183 }184 .strike {185 font-size: 32px;186 color: #9e9e9e;187 text-decoration: line-through;188 }189 .discount {190 font-size: 32px;191 color: #2e7d32;192 font-weight: 700;193 }194 .alert {195 padding-left: 8px;196 font-size: 30px;197 color: #d84315;198 margin-top: 4px;199 margin-bottom: 12px;200 }201 .rating {202 display: inline-flex;203 align-items: center;204 gap: 10px;205 border: 1px solid #dcdcdc;206 border-radius: 14px;207 padding: 10px 14px;208 margin-left: 8px;209 color: #2e7d32;210 font-weight: 700;211 font-size: 30px;212 background: #f7f7f7;213 }214 .rating small {215 color: #7a7a7a;216 font-weight: 600;217 margin-left: 10px;218 font-size: 28px;219 }220 221 /* Bottom bar */222 .bottom-bar {223 position: absolute;224 bottom: 84px;225 left: 0;226 width: 1080px;227 height: 160px;228 background: #ffffff;229 border-top: 1px solid #e5e5e5;230 display: flex;231 align-items: center;232 box-sizing: border-box;233 padding: 0 36px;234 gap: 36px;235 }236 .bar-section {237 flex: 1;238 display: flex;239 align-items: center;240 gap: 20px;241 color: #222;242 }243 .bar-section.center { justify-content: center; }244 .bar-section.right { justify-content: flex-end; }245 .bar-icon svg { width: 48px; height: 48px; }246 .bar-title { font-size: 36px; font-weight: 700; }247 .bar-sub { font-size: 30px; color: #e91e63; margin-left: 4px; }248 .divider {249 width: 1px;250 height: 80px;251 background: #e5e5e5;252 }253 .badge {254 background: #ff4875;255 color: #fff;256 font-size: 26px;257 padding: 6px 12px;258 border-radius: 18px;259 margin-left: 8px;260 font-weight: 700;261 }262 263 /* Home indicator */264 .home-indicator {265 position: absolute;266 bottom: 24px;267 left: 50%;268 transform: translateX(-50%);269 width: 360px;270 height: 16px;271 background: #000;272 opacity: 0.85;273 border-radius: 8px;274 }275</style>276</head>277<body>278<div id="render-target">279 280 <!-- Status bar -->281 <div class="status-bar">282 <div class="time">3:57</div>283 <div class="status-icons">284 <!-- simple cellular icon -->285 <svg width="40" height="40" viewBox="0 0 24 24">286 <rect x="2" y="15" width="3" height="7" fill="#fff"></rect>287 <rect x="7" y="12" width="3" height="10" fill="#fff"></rect>288 <rect x="12" y="9" width="3" height="13" fill="#fff"></rect>289 <rect x="17" y="6" width="3" height="16" fill="#fff"></rect>290 </svg>291 <!-- wifi icon -->292 <svg width="40" height="40" viewBox="0 0 24 24">293 <path d="M2 9c4.5-4 15.5-4 20 0" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round"></path>294 <path d="M5 12c3-3 11-3 14 0" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round"></path>295 <path d="M8 15c2-2 6-2 8 0" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round"></path>296 <circle cx="12" cy="18" r="1.8" fill="#fff"></circle>297 </svg>298 <!-- battery icon -->299 <svg width="48" height="40" viewBox="0 0 28 16">300 <rect x="1" y="2" width="22" height="12" rx="2" ry="2" stroke="#fff" fill="none" stroke-width="2"></rect>301 <rect x="3" y="4" width="16" height="8" fill="#fff"></rect>302 <rect x="24" y="5" width="3" height="6" rx="1" fill="#fff"></rect>303 </svg>304 </div>305 </div>306 307 <!-- Header -->308 <div class="header">309 <div class="header-left">310 <div class="back-btn">311 <svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">312 <path d="M15 19L8 12l7-7"></path>313 </svg>314 </div>315 <div class="title-wrap">316 <div class="title">wooden sofa</div>317 <div class="sub">253 Products</div>318 </div>319 </div>320 <div class="header-actions">321 <!-- search -->322 <svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round">323 <circle cx="11" cy="11" r="7"></circle>324 <line x1="17" y1="17" x2="22" y2="22"></line>325 </svg>326 <!-- wishlist heart -->327 <svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">328 <path d="M12 21s-6-4.35-8.2-6.55C1.5 12.15 2.5 8.5 5.6 8.2c2-.2 3.3 1.1 4.4 2.3 1.1-1.2 2.4-2.5 4.4-2.3 3.1.3 4.1 3.95 1.8 6.25C18 16.65 12 21 12 21z"></path>329 </svg>330 <!-- bag -->331 <svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">332 <rect x="3" y="7" width="18" height="14" rx="2"></rect>333 <path d="M7 7a5 5 0 0 1 10 0"></path>334 </svg>335 </div>336 </div>337 338 <!-- Floating indicator -->339 <div class="scroll-indicator">340 <div class="arrow">341 <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round">342 <path d="M12 19V5"></path>343 <path d="M5 12l7-7 7 7"></path>344 </svg>345 </div>346 6/253347 </div>348 349 <!-- Content grid -->350 <div class="content">351 <div class="grid">352 <!-- Card 1 -->353 <div class="card">354 <div class="img">355 [IMG: Beige 3 Seater Sofa in living room]356 <div class="fav-icon">357 <svg viewBox="0 0 24 24" fill="none" stroke="#222" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">358 <path d="M12 21s-6-4.35-8.2-6.55C1.5 12.15 2.5 8.5 5.6 8.2c2-.2 3.3 1.1 4.4 2.3 1.1-1.2 2.4-2.5 4.4-2.3 3.1.3 4.1 3.95 1.8 6.25C18 16.65 12 21 12 21z"></path>359 </svg>360 </div>361 <div class="tag-icon">362 <svg viewBox="0 0 24 24" fill="none" stroke="#222" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">363 <path d="M6 2h10v20l-5-3-5 3V2z"></path>364 </svg>365 </div>366 </div>367 <div class="info">368 <div class="brand">Duroflex</div>369 <div class="desc">Duroflex Utopia Beige Pinewood 3 Seater Sofa</div>370 <div class="price-row">371 <div class="price">₹26,862</div>372 <div class="strike">₹48,840</div>373 <div class="discount">45% Off</div>374 </div>375 <div class="rating">376 <svg width="28" height="28" viewBox="0 0 24 24" fill="#2e7d32">377 <path d="M12 .8l3.1 6.3 7 .9-5.1 4.8 1.4 6.9L12 16.9 5.6 19.7l1.4-6.9L2 8l7-.9L12 .8z"></path>378 </svg>379 5.0 <small>(1)</small>380 </div>381 </div>382 </div>383 384 <!-- Card 2 -->385 <div class="card">386 <div class="img">387 [IMG: Caramel Brown Leatherette 1 Seater Armchair]388 <div class="fav-icon">389 <svg viewBox="0 0 24 24" fill="none" stroke="#222" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">390 <path d="M12 21s-6-4.35-8.2-6.55C1.5 12.15 2.5 8.5 5.6 8.2c2-.2 3.3 1.1 4.4 2.3 1.1-1.2 2.4-2.5 4.4-2.3 3.1.3 4.1 3.95 1.8 6.25C18 16.65 12 21 12 21z"></path>391 </svg>392 </div>393 <div class="tag-icon">394 <svg viewBox="0 0 24 24" fill="none" stroke="#222" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">395 <path d="M6 2h10v20l-5-3-5 3V2z"></path>396 </svg>397 </div>398 </div>399 <div class="info">400 <div class="brand">Durian</div>401 <div class="desc">Durian Nadia Caramel Brown Premium Leatherette 1 Seater</div>402 <div class="price-row">403 <div class="price">₹20,460</div>404 <div class="strike">₹37,200</div>405 <div class="discount">45% Off</div>406 </div>407 <div class="alert">Limited stock!</div>408 <div class="rating">409 <svg width="28" height="28" viewBox="0 0 24 24" fill="#2e7d32">410 <path d="M12 .8l3.1 6.3 7 .9-5.1 4.8 1.4 6.9L12 16.9 5.6 19.7l1.4-6.9L2 8l7-.9L12 .8z"></path>411 </svg>412 5.0 <small>(1)</small>413 </div>414 </div>415 </div>416 417 <!-- Card 3 -->418 <div class="card">419 <div class="img">420 [IMG: Charcoal Grey Fabric 3 Seater Sofa in bright room]421 <div class="fav-icon">422 <svg viewBox="0 0 24 24" fill="none" stroke="#222" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">423 <path d="M12 21s-6-4.35-8.2-6.55C1.5 12.15 2.5 8.5 5.6 8.2c2-.2 3.3 1.1 4.4 2.3 1.1-1.2 2.4-2.5 4.4-2.3 3.1.3 4.1 3.95 1.8 6.25C18 16.65 12 21 12 21z"></path>424 </svg>425 </div>426 <div class="tag-icon">427 <svg viewBox="0 0 24 24" fill="none" stroke="#222" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">428 <path d="M6 2h10v20l-5-3-5 3V2z"></path>429 </svg>430 </div>431 </div>432 <div class="info">433 <div class="brand">Urban Living</div>434 <div class="desc">Compact Wooden Base 3 Seater Sofa</div>435 <div class="price-row">436 <div class="price">₹13,999</div>437 <div class="strike">₹22,500</div>438 <div class="discount">38% Off</div>439 </div>440 <div class="rating">441 <svg width="28" height="28" viewBox="0 0 24 24" fill="#2e7d32">442 <path d="M12 .8l3.1 6.3 7 .9-5.1 4.8 1.4 6.9L12 16.9 5.6 19.7l1.4-6.9L2 8l7-.9L12 .8z"></path>443 </svg>444 5.0 <small>(1)</small>445 </div>446 </div>447 </div>448 449 <!-- Card 4 -->450 <div class="card">451 <div class="img">452 [IMG: Dark Grey Leatherette 1 Seater Sofa with curved arms]453 <div class="fav-icon">454 <svg viewBox="0 0 24 24" fill="none" stroke="#222" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">455 <path d="M12 21s-6-4.35-8.2-6.55C1.5 12.15 2.5 8.5 5.6 8.2c2-.2 3.3 1.1 4.4 2.3 1.1-1.2 2.4-2.5 4.4-2.3 3.1.3 4.1 3.95 1.8 6.25C18 16.65 12 21 12 21z"></path>456 </svg>457 </div>458 <div class="tag-icon">459 <svg viewBox="0 0 24 24" fill="none" stroke="#222" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">460 <path d="M6 2h10v20l-5-3-5 3V2z"></path>461 </svg>462 </div>463 </div>464 <div class="info">465 <div class="brand">Classic Home</div>466 <div class="desc">Premium Leatherette 1 Seater</div>467 <div class="price-row">468 <div class="price">₹16,999</div>469 <div class="strike">₹30,834</div>470 <div class="discount">45% Off</div>471 </div>472 <div class="rating">473 <svg width="28" height="28" viewBox="0 0 24 24" fill="#2e7d32">474 <path d="M12 .8l3.1 6.3 7 .9-5.1 4.8 1.4 6.9L12 16.9 5.6 19.7l1.4-6.9L2 8l7-.9L12 .8z"></path>475 </svg>476 5.0 <small>(1)</small>477 </div>478 </div>479 </div>480 481 </div>482 </div>483 484 <!-- Bottom controls bar -->485 <div class="bottom-bar">486 <div class="bar-section">487 <div class="bar-icon">488 <!-- grid icon -->489 <svg viewBox="0 0 24 24" fill="none" stroke="#444" stroke-width="2">490 <rect x="3" y="4" width="8" height="6" rx="1"></rect>491 <rect x="13" y="4" width="8" height="6" rx="1"></rect>492 <rect x="3" y="14" width="8" height="6" rx="1"></rect>493 <rect x="13" y="14" width="8" height="6" rx="1"></rect>494 </svg>495 </div>496 </div>497 <div class="divider"></div>498 <div class="bar-section center">499 <div class="bar-icon">500 <!-- sort icon -->501 <svg viewBox="0 0 24 24" fill="none" stroke="#444" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">502 <path d="M6 6h12"></path>503 <path d="M6 12h8"></path>504 <path d="M6 18h5"></path>505 </svg>506 </div>507 <div class="bar-title">Sort</div>508 <div class="bar-sub">Popularity</div>509 </div>510 <div class="divider"></div>511 <div class="bar-section right">512 <div class="bar-icon">513 <!-- filter/sliders icon -->514 <svg viewBox="0 0 24 24" fill="none" stroke="#444" stroke-width="2" stroke-linecap="round">515 <line x1="4" y1="5" x2="20" y2="5"></line>516 <circle cx="9" cy="5" r="2"></circle>517 <line x1="4" y1="12" x2="20" y2="12"></line>518 <circle cx="14" cy="12" r="2"></circle>519 <line x1="4" y1="19" x2="20" y2="19"></line>520 <circle cx="7" cy="19" r="2"></circle>521 </svg>522 </div>523 <div class="bar-title">Filter</div>524 <div class="badge">1</div>525 </div>526 </div>527 528 <!-- Home indicator -->529 <div class="home-indicator"></div>530 531</div>532</body>533</html>