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