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>Home décor Listing</title>7<style>8 body { margin: 0; padding: 0; background: transparent; }9 #render-target {10 width: 1080px;11 height: 2400px;12 position: relative;13 overflow: hidden;14 background: #ffffff;15 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;16 color: #111;17 }18 19 /* Header */20 .header {21 position: relative;22 height: 200px;23 padding: 36px 40px 0 40px;24 }25 .back-btn {26 position: absolute;27 left: 32px;28 top: 110px;29 width: 72px;30 height: 72px;31 display: flex;32 align-items: center;33 justify-content: center;34 cursor: default;35 }36 .header .title {37 text-align: center;38 font-weight: 700;39 font-size: 48px;40 line-height: 1;41 margin-top: 96px;42 }43 44 /* Filters */45 .filters {46 display: flex;47 gap: 24px;48 padding: 24px 28px 10px 28px;49 }50 .pill {51 border: 2px solid transparent;52 background: #F2F2F2;53 color: #111;54 border-radius: 44px;55 padding: 22px 36px;56 font-size: 34px;57 font-weight: 600;58 white-space: nowrap;59 }60 .pill.active {61 background: #FFFFFF;62 border-color: #111;63 }64 .progress {65 height: 6px;66 margin: 8px 28px 22px;67 background: #e8e8e8;68 position: relative;69 border-radius: 3px;70 }71 .progress::before {72 content: "";73 position: absolute;74 left: 0;75 top: 0;76 height: 100%;77 width: 140px;78 background: #202020;79 border-radius: 3px;80 }81 82 /* Grid */83 .grid {84 display: grid;85 grid-template-columns: 1fr 1fr;86 column-gap: 28px;87 row-gap: 30px;88 padding: 8px 28px 0 28px;89 }90 .card {91 position: relative;92 padding: 10px 6px 160px 6px; /* extra bottom space for FAB */93 }94 .top-badge {95 display: inline-block;96 background: #C9334D;97 color: #fff;98 font-weight: 700;99 font-size: 30px;100 padding: 14px 22px;101 border-radius: 12px;102 margin-left: 16px;103 }104 .fav {105 position: absolute;106 right: 22px;107 top: 6px;108 width: 64px;109 height: 64px;110 display: flex;111 align-items: center;112 justify-content: center;113 }114 115 .img-box {116 width: 100%;117 height: 360px;118 background: #E0E0E0;119 border: 1px solid #BDBDBD;120 margin-top: 18px;121 display: flex;122 align-items: center;123 justify-content: center;124 color: #757575;125 font-size: 30px;126 text-align: center;127 padding: 12px;128 border-radius: 6px;129 }130 131 .name {132 margin-top: 26px;133 font-weight: 800;134 font-size: 40px;135 letter-spacing: 0.3px;136 }137 .desc {138 margin-top: 8px;139 font-size: 34px;140 line-height: 1.28;141 color: #444;142 }143 .price {144 margin-top: 18px;145 font-weight: 800;146 font-size: 64px;147 }148 .price .currency { font-size: 36px; vertical-align: top; }149 .price .cents { font-size: 32px; vertical-align: top; }150 .options {151 margin-top: 16px;152 display: inline-block;153 color: #6b6b6b;154 font-size: 34px;155 text-decoration: underline;156 }157 158 .fab {159 position: absolute;160 right: 28px;161 bottom: 18px;162 width: 120px;163 height: 120px;164 background: #184C8D;165 color: #fff;166 border: none;167 border-radius: 60px;168 display: flex;169 align-items: center;170 justify-content: center;171 box-shadow: 0 6px 14px rgba(0,0,0,0.18);172 }173 174 .divider {175 height: 2px;176 background: #e4e4e4;177 width: calc(100% - 56px);178 margin: 12px 28px 8px;179 }180 181 /* Second preview row (partial) */182 .row-preview {183 display: grid;184 grid-template-columns: 1fr 1fr;185 column-gap: 28px;186 padding: 4px 28px 0 28px;187 }188 .preview-card {189 position: relative;190 padding: 8px 6px 40px 6px;191 }192 .preview-card .fav {193 top: -6px;194 }195 .preview-card .img-box {196 height: 300px;197 }198 199 /* Bottom navigation */200 .bottom-nav {201 position: absolute;202 left: 0;203 right: 0;204 bottom: 74px;205 height: 150px;206 background: #ffffff;207 border-top: 1px solid #e6e6e6;208 display: flex;209 align-items: center;210 justify-content: space-around;211 padding: 0 24px;212 }213 .nav-item {214 width: 120px;215 height: 120px;216 display: flex;217 align-items: center;218 justify-content: center;219 color: #888;220 position: relative;221 }222 .badge {223 position: absolute;224 right: 14px;225 top: 16px;226 background: #1E5AAE;227 color: #fff;228 font-weight: 700;229 font-size: 24px;230 height: 42px;231 min-width: 42px;232 padding: 0 10px;233 border-radius: 21px;234 display: flex;235 align-items: center;236 justify-content: center;237 }238 .gesture {239 position: absolute;240 left: 0;241 right: 0;242 bottom: 18px;243 height: 10px;244 background: #000;245 border-radius: 5px;246 width: 420px;247 margin: 0 auto;248 }249 250 /* Simple svg coloring */251 svg { display: block; }252 .stroke { stroke: #111; }253 .stroke-gray { stroke: #8a8a8a; }254 .stroke-light { stroke: #9a9a9a; }255</style>256</head>257<body>258<div id="render-target">259 260 <!-- Header -->261 <div class="header">262 <div class="back-btn" aria-label="Back">263 <svg width="44" height="44" viewBox="0 0 24 24">264 <polyline points="15,3 6,12 15,21" fill="none" stroke="#111" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5"></polyline>265 </svg>266 </div>267 <div class="title">Home décor</div>268 </div>269 270 <!-- Filters -->271 <div class="filters">272 <div class="pill active">Best match</div>273 <div class="pill">Color</div>274 <div class="pill">Category</div>275 <div class="pill">Size</div>276 </div>277 <div class="progress"></div>278 279 <!-- Product Grid (first row) -->280 <div class="grid">281 <!-- Card 1 -->282 <div class="card">283 <span class="top-badge">Top seller</span>284 <div class="fav" aria-hidden="true">285 <svg width="40" height="40" viewBox="0 0 24 24">286 <path d="M12 21s-7-4.5-7-10a4 4 0 0 1 7-2.5A4 4 0 0 1 19 11c0 5.5-7 10-7 10z" fill="none" stroke="#9b9b9b" stroke-width="1.8" stroke-linejoin="round"/>287 </svg>288 </div>289 <div class="img-box">[IMG: White picture ledge shelf]</div>290 <div class="info">291 <div class="name">MOSSLANDA</div>292 <div class="desc">Picture ledge, white, 45 1/4 "</div>293 <div class="price"><span class="currency">$</span>19<span class="cents">.99</span></div>294 <a class="options">+ Options</a>295 </div>296 <button class="fab" aria-label="Add to cart">297 <svg width="44" height="44" viewBox="0 0 24 24">298 <path d="M6 8h12l-1 9H7L6 8z" fill="none" stroke="#fff" stroke-width="2"></path>299 <path d="M9 8a3 3 0 0 1 6 0" fill="none" stroke="#fff" stroke-width="2"></path>300 <path d="M12 10v6M9 13h6" stroke="#fff" stroke-width="2" stroke-linecap="round"></path>301 </svg>302 </button>303 </div>304 305 <!-- Card 2 -->306 <div class="card">307 <div class="fav" aria-hidden="true" style="right: 22px; top: 6px;">308 <svg width="40" height="40" viewBox="0 0 24 24">309 <path d="M12 21s-7-4.5-7-10a4 4 0 0 1 7-2.5A4 4 0 0 1 19 11c0 5.5-7 10-7 10z" fill="none" stroke="#9b9b9b" stroke-width="1.8" stroke-linejoin="round"/>310 </svg>311 </div>312 <div class="img-box">[IMG: Green glass vase]</div>313 <div class="info">314 <div class="name">KONSTFULL</div>315 <div class="desc">Vase, green, 4 "</div>316 <div class="price"><span class="currency">$</span>7<span class="cents">.99</span></div>317 <a class="options">+ Options</a>318 </div>319 <button class="fab" aria-label="Add to cart">320 <svg width="44" height="44" viewBox="0 0 24 24">321 <path d="M6 8h12l-1 9H7L6 8z" fill="none" stroke="#fff" stroke-width="2"></path>322 <path d="M9 8a3 3 0 0 1 6 0" fill="none" stroke="#fff" stroke-width="2"></path>323 <path d="M12 10v6M9 13h6" stroke="#fff" stroke-width="2" stroke-linecap="round"></path>324 </svg>325 </button>326 </div>327 </div>328 329 <div class="divider"></div>330 331 <!-- Second row preview (partial, like in screenshot) -->332 <div class="row-preview">333 <div class="preview-card">334 <span class="top-badge">Top seller</span>335 <div class="fav">336 <svg width="40" height="40" viewBox="0 0 24 24">337 <path d="M12 21s-7-4.5-7-10a4 4 0 0 1 7-2.5A4 4 0 0 1 19 11c0 5.5-7 10-7 10z" fill="none" stroke="#c0c0c0" stroke-width="1.8" stroke-linejoin="round"/>338 </svg>339 </div>340 <div class="img-box">[IMG: Clear glass vases set]</div>341 </div>342 <div class="preview-card">343 <div class="fav">344 <svg width="40" height="40" viewBox="0 0 24 24">345 <path d="M12 21s-7-4.5-7-10a4 4 0 0 1 7-2.5A4 4 0 0 1 19 11c0 5.5-7 10-7 10z" fill="none" stroke="#c0c0c0" stroke-width="1.8" stroke-linejoin="round"/>346 </svg>347 </div>348 <div class="img-box">[IMG: Green watering can and tools]</div>349 </div>350 </div>351 352 <!-- Bottom navigation -->353 <div class="bottom-nav">354 <div class="nav-item" aria-label="Home">355 <svg width="44" height="44" viewBox="0 0 24 24">356 <path d="M3 11l9-7 9 7v8a2 2 0 0 1-2 2h-3v-6H8v6H5a2 2 0 0 1-2-2v-8z" fill="none" stroke="#8e8e8e" stroke-width="2" stroke-linejoin="round"/>357 </svg>358 </div>359 <div class="nav-item" aria-label="Search">360 <svg width="44" height="44" viewBox="0 0 24 24">361 <circle cx="11" cy="11" r="7" fill="none" stroke="#8e8e8e" stroke-width="2"></circle>362 <path d="M21 21l-3.5-3.5" stroke="#8e8e8e" stroke-width="2" stroke-linecap="round"></path>363 </svg>364 </div>365 <div class="nav-item" aria-label="Category">366 <svg width="44" height="44" viewBox="0 0 24 24">367 <rect x="4" y="4" width="7" height="7" fill="none" stroke="#8e8e8e" stroke-width="2"></rect>368 <rect x="13" y="4" width="7" height="7" fill="none" stroke="#8e8e8e" stroke-width="2"></rect>369 <rect x="4" y="13" width="7" height="7" fill="none" stroke="#8e8e8e" stroke-width="2"></rect>370 <rect x="13" y="13" width="7" height="7" fill="none" stroke="#8e8e8e" stroke-width="2"></rect>371 </svg>372 </div>373 <div class="nav-item" aria-label="Favorites">374 <svg width="44" height="44" viewBox="0 0 24 24">375 <path d="M12 21s-7-4.5-7-10a4 4 0 0 1 7-2.5A4 4 0 0 1 19 11c0 5.5-7 10-7 10z" fill="none" stroke="#b5b5b5" stroke-width="2" stroke-linejoin="round"/>376 </svg>377 </div>378 <div class="nav-item" aria-label="Cart" style="color:#8e8e8e;">379 <span class="badge">1</span>380 <svg width="44" height="44" viewBox="0 0 24 24">381 <path d="M6 8h12l-1 9H7L6 8z" fill="none" stroke="#8e8e8e" stroke-width="2"></path>382 <path d="M9 8a3 3 0 0 1 6 0" fill="none" stroke="#8e8e8e" stroke-width="2"></path>383 </svg>384 </div>385 </div>386 387 <div class="gesture"></div>388</div>389</body>390</html>