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>Wooden Sofa Search - UI</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Helvetica Neue", Arial, sans-serif; color: #212121; }9 #render-target {10 position: relative;11 width: 1080px;12 height: 2400px;13 overflow: hidden;14 background: #f6f6f6;15 border-radius: 36px;16 box-shadow: 0 20px 60px rgba(0,0,0,0.15);17 }18 19 /* Header */20 .header {21 position: relative;22 background: #1e1e1e;23 color: #fff;24 padding: 28px 36px 34px 36px;25 }26 .header .top-row {27 display: flex;28 align-items: center;29 justify-content: space-between;30 margin-top: 12px;31 }32 .header .left-group {33 display: flex;34 align-items: center;35 gap: 24px;36 }37 .header-title {38 margin-top: 22px;39 }40 .header-title .title {41 font-size: 46px;42 font-weight: 600;43 line-height: 1.2;44 letter-spacing: 0.2px;45 }46 .header-title .subtitle {47 font-size: 26px;48 color: #bdbdbd;49 margin-top: 6px;50 }51 .icon-btn {52 width: 60px;53 height: 60px;54 border-radius: 30px;55 display: inline-flex;56 align-items: center;57 justify-content: center;58 }59 60 /* Notice */61 .notice {62 background: #ffffff;63 padding: 28px 36px;64 border-top-left-radius: 24px;65 border-top-right-radius: 24px;66 font-size: 32px;67 color: #757575;68 }69 70 /* Grid */71 .grid {72 display: flex;73 flex-wrap: wrap;74 gap: 24px;75 padding: 24px 24px 280px 24px; /* extra bottom padding to avoid bottom bar overlap */76 }77 .card {78 width: 504px; /* (1080 - 24*2 padding - 24 gap) / 2 */79 background: #ffffff;80 border-radius: 24px;81 box-shadow: 0 6px 16px rgba(0,0,0,0.06);82 overflow: hidden;83 }84 .card .image {85 position: relative;86 height: 520px;87 background: #E0E0E0;88 border: 1px solid #BDBDBD;89 border-bottom: none;90 display: flex;91 align-items: center;92 justify-content: center;93 color: #757575;94 font-size: 28px;95 }96 .card .badge {97 position: absolute;98 top: 18px;99 left: 18px;100 background: #F3E38A;101 color: #5d5303;102 font-size: 26px;103 padding: 8px 18px;104 border-radius: 18px;105 box-shadow: 0 2px 6px rgba(0,0,0,0.08);106 }107 .card .fav {108 position: absolute;109 top: 16px;110 right: 16px;111 width: 58px;112 height: 58px;113 background: rgba(255,255,255,0.95);114 border-radius: 50%;115 display: flex;116 align-items: center;117 justify-content: center;118 box-shadow: 0 2px 6px rgba(0,0,0,0.12);119 }120 .card .corner-tag {121 position: absolute;122 bottom: 18px;123 right: 18px;124 width: 46px;125 height: 58px;126 background: rgba(255,255,255,0.9);127 border-radius: 8px;128 border: 1px solid #e0e0e0;129 }130 .card .content {131 padding: 24px;132 }133 .brand {134 font-size: 36px;135 font-weight: 700;136 margin-bottom: 8px;137 }138 .desc {139 font-size: 28px;140 color: #616161;141 line-height: 1.3;142 min-height: 76px;143 }144 .price-row {145 margin-top: 16px;146 display: flex;147 align-items: baseline;148 gap: 12px;149 flex-wrap: wrap;150 }151 .price {152 font-size: 34px;153 font-weight: 700;154 }155 .old {156 font-size: 28px;157 color: #9e9e9e;158 text-decoration: line-through;159 }160 .off {161 font-size: 28px;162 color: #2e7d32;163 font-weight: 600;164 }165 .rating-row {166 margin-top: 14px;167 display: flex;168 align-items: center;169 gap: 10px;170 }171 .rating-pill {172 display: inline-flex;173 align-items: center;174 gap: 8px;175 border: 1px solid #e0e0e0;176 border-radius: 22px;177 padding: 8px 14px;178 font-size: 26px;179 color: #424242;180 background: #fff;181 }182 .rating-star {183 width: 22px; height: 22px;184 }185 186 /* Bottom bar */187 .bottom-bar {188 position: absolute;189 left: 0;190 right: 0;191 bottom: 120px; /* leave room for safe area */192 background: #ffffff;193 border-top: 1px solid #e0e0e0;194 height: 180px;195 display: flex;196 align-items: center;197 justify-content: space-evenly;198 padding: 0 24px;199 }200 .bar-item {201 display: flex;202 align-items: center;203 gap: 16px;204 }205 .bar-label {206 font-size: 32px;207 font-weight: 600;208 color: #3d3d3d;209 }210 .bar-sub {211 font-size: 28px;212 color: #e91e63;213 margin-top: 6px;214 }215 .v-divider {216 width: 1px;217 height: 60px;218 background: #e0e0e0;219 }220 .filter-badge {221 position: absolute;222 top: -8px;223 right: -10px;224 background: #e91e63;225 color: #fff;226 font-size: 22px;227 width: 36px;228 height: 36px;229 border-radius: 18px;230 display: flex;231 align-items: center;232 justify-content: center;233 }234 235 /* Safe area with home indicator */236 .safe-area {237 position: absolute;238 bottom: 0;239 left: 0; right: 0;240 height: 120px;241 background: #000000;242 }243 .home-indicator {244 position: absolute;245 bottom: 28px;246 left: 50%;247 transform: translateX(-50%);248 width: 240px;249 height: 12px;250 background: #bdbdbd;251 border-radius: 6px;252 }253 254 /* Simple SVG strokes colors */255 .icon-white path, .icon-white circle, .icon-white polyline, .icon-white rect, .icon-white line { stroke: #ffffff; }256 .icon-dark path, .icon-dark circle, .icon-dark polyline, .icon-dark rect, .icon-dark line { stroke: #424242; }257</style>258</head>259<body>260<div id="render-target">261 262 <!-- Header -->263 <div class="header">264 <div class="top-row">265 <div class="left-group">266 <div class="icon-btn">267 <svg class="icon-white" width="36" height="36" viewBox="0 0 36 36" fill="none">268 <polyline points="22,8 10,18 22,28" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"></polyline>269 </svg>270 </div>271 </div>272 <div class="left-group" style="gap:22px;">273 <div class="icon-btn">274 <svg class="icon-white" width="34" height="34" viewBox="0 0 36 36" fill="none">275 <circle cx="16" cy="16" r="10" stroke-width="3"></circle>276 <line x1="24" y1="24" x2="32" y2="32" stroke-width="3" stroke-linecap="round"></line>277 </svg>278 </div>279 <div class="icon-btn">280 <svg class="icon-white" width="34" height="34" viewBox="0 0 36 36" fill="none">281 <path d="M18 7 C13 7 10 10 10 14 V28 H26 V14 C26 10 23 7 18 7 Z" stroke-width="3" stroke-linejoin="round"></path>282 <line x1="13" y1="14" x2="23" y2="14" stroke-width="3"></line>283 </svg>284 </div>285 <div class="icon-btn">286 <svg class="icon-white" width="34" height="34" viewBox="0 0 36 36" fill="none">287 <path d="M9 11 L27 11 L25 30 H11 L9 11 Z" stroke-width="3" stroke-linejoin="round"></path>288 <line x1="14" y1="11" x2="14" y2="7" stroke-width="3"></line>289 <line x1="22" y1="11" x2="22" y2="7" stroke-width="3"></line>290 </svg>291 </div>292 </div>293 </div>294 <div class="header-title">295 <div class="title">wooden sofa</div>296 <div class="subtitle">253 Products</div>297 </div>298 </div>299 300 <!-- Notice -->301 <div class="notice">302 No results found for 'wooden sofa'. Showing results for 'sofa' instead303 </div>304 305 <!-- Products Grid -->306 <div class="grid">307 308 <!-- Card 1 -->309 <div class="card">310 <div class="image">311 [IMG: Brown Recliner Chair in Living Room]312 <div class="fav">313 <svg width="28" height="28" viewBox="0 0 32 32" fill="none">314 <path d="M16 26 L8 20 C4 16 6 10 12 10 C14 10 16 11 16 12 C16 11 18 10 20 10 C26 10 28 16 24 20 L16 26 Z" stroke="#757575" stroke-width="2" fill="none"></path>315 </svg>316 </div>317 <div class="corner-tag"></div>318 </div>319 <div class="content">320 <div class="brand">Duroflex</div>321 <div class="desc">Duroflex Avalon Saddle Brown Pinewood Single Seater Recliner</div>322 <div class="price-row">323 <div class="price">₹16,999</div>324 <div class="old">₹30,834</div>325 <div class="off">45% Off</div>326 </div>327 <div class="rating-row">328 <div class="rating-pill">329 <span>5.0</span>330 <svg class="rating-star" viewBox="0 0 24 24" fill="#4CAF50">331 <polygon points="12,2 15,9 22,9 16.5,13.5 18.5,20.5 12,16.5 5.5,20.5 7.5,13.5 2,9 9,9"></polygon>332 </svg>333 <span>(1)</span>334 </div>335 </div>336 </div>337 </div>338 339 <!-- Card 2 -->340 <div class="card">341 <div class="image">342 [IMG: Solid Brown 3 Seater Sofa cum Bed]343 <div class="badge">On Offer</div>344 <div class="fav">345 <svg width="28" height="28" viewBox="0 0 32 32" fill="none">346 <path d="M16 26 L8 20 C4 16 6 10 12 10 C14 10 16 11 16 12 C16 11 18 10 20 10 C26 10 28 16 24 20 L16 26 Z" stroke="#757575" stroke-width="2" fill="none"></path>347 </svg>348 </div>349 <div class="corner-tag"></div>350 </div>351 <div class="content">352 <div class="brand">Ikiriya</div>353 <div class="desc">Ikiriya Naples Solid Brown Wood 3 Seater Sofa cum Bed Sparkle</div>354 <div class="price-row">355 <div class="price">₹13,999</div>356 <div class="old">₹22,500</div>357 <div class="off">38% Off</div>358 </div>359 </div>360 </div>361 362 <!-- Card 3 -->363 <div class="card">364 <div class="image">365 [IMG: Light Beige Fabric 2/3 Seater Sofa]366 <div class="fav">367 <svg width="28" height="28" viewBox="0 0 32 32" fill="none">368 <path d="M16 26 L8 20 C4 16 6 10 12 10 C14 10 16 11 16 12 C16 11 18 10 20 10 C26 10 28 16 24 20 L16 26 Z" stroke="#757575" stroke-width="2" fill="none"></path>369 </svg>370 </div>371 <div class="corner-tag"></div>372 </div>373 <div class="content">374 <div class="brand">FurniCraft</div>375 <div class="desc">Minimal Beige Fabric 3 Seater Sofa for Living Room</div>376 <div class="price-row">377 <div class="price">₹12,999</div>378 <div class="old">₹18,000</div>379 <div class="off">28% Off</div>380 </div>381 </div>382 </div>383 384 <!-- Card 4 -->385 <div class="card">386 <div class="image">387 [IMG: Brown Leather Single Seater Armchair]388 <div class="fav">389 <svg width="28" height="28" viewBox="0 0 32 32" fill="none">390 <path d="M16 26 L8 20 C4 16 6 10 12 10 C14 10 16 11 16 12 C16 11 18 10 20 10 C26 10 28 16 24 20 L16 26 Z" stroke="#757575" stroke-width="2" fill="none"></path>391 </svg>392 </div>393 <div class="corner-tag"></div>394 </div>395 <div class="content">396 <div class="brand">LeatherLux</div>397 <div class="desc">Classic Brown Leather Armchair with Wide Arms</div>398 <div class="price-row">399 <div class="price">₹15,499</div>400 <div class="old">₹19,999</div>401 <div class="off">23% Off</div>402 </div>403 </div>404 </div>405 406 </div>407 408 <!-- Bottom action bar -->409 <div class="bottom-bar">410 <div class="bar-item">411 <svg class="icon-dark" width="40" height="40" viewBox="0 0 36 36" fill="none">412 <rect x="6" y="10" width="10" height="6" rx="2" stroke-width="3"></rect>413 <rect x="20" y="10" width="10" height="6" rx="2" stroke-width="3"></rect>414 <rect x="6" y="20" width="10" height="6" rx="2" stroke-width="3"></rect>415 <rect x="20" y="20" width="10" height="6" rx="2" stroke-width="3"></rect>416 </svg>417 </div>418 419 <div class="v-divider"></div>420 421 <div>422 <div class="bar-item">423 <svg class="icon-dark" width="42" height="42" viewBox="0 0 36 36" fill="none">424 <line x1="6" y1="12" x2="22" y2="12" stroke-width="3" stroke-linecap="round"></line>425 <polyline points="26,8 30,12 26,16" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"></polyline>426 <line x1="6" y1="22" x2="18" y2="22" stroke-width="3" stroke-linecap="round"></line>427 </svg>428 <div>429 <div class="bar-label">Sort</div>430 <div class="bar-sub">Popularity</div>431 </div>432 </div>433 </div>434 435 <div class="v-divider"></div>436 437 <div class="bar-item" style="position: relative;">438 <svg class="icon-dark" width="44" height="44" viewBox="0 0 36 36" fill="none">439 <line x1="6" y1="10" x2="30" y2="10" stroke-width="3"></line>440 <circle cx="14" cy="10" r="3" fill="none" stroke-width="3"></circle>441 <line x1="6" y1="18" x2="30" y2="18" stroke-width="3"></line>442 <circle cx="22" cy="18" r="3" fill="none" stroke-width="3"></circle>443 <line x1="6" y1="26" x2="30" y2="26" stroke-width="3"></line>444 <circle cx="10" cy="26" r="3" fill="none" stroke-width="3"></circle>445 </svg>446 <div class="bar-label">Filter</div>447 <div class="filter-badge">1</div>448 </div>449 </div>450 451 <!-- Safe area -->452 <div class="safe-area">453 <div class="home-indicator"></div>454 </div>455 456</div>457</body>458</html>