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 & sectionals</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 .hero {20 width: 100%;21 height: 520px;22 position: relative;23 }24 .img-placeholder {25 width: 100%;26 height: 100%;27 background: #E0E0E0;28 border: 1px solid #BDBDBD;29 display: flex;30 align-items: center;31 justify-content: center;32 color: #757575;33 font-size: 34px;34 letter-spacing: 0.2px;35 }36 37 .back-btn {38 position: absolute;39 left: 36px;40 top: 320px;41 width: 120px;42 height: 120px;43 border-radius: 60px;44 background: #fff;45 display: flex;46 align-items: center;47 justify-content: center;48 box-shadow: 0 8px 20px rgba(0,0,0,0.18);49 }50 .back-btn svg { width: 48px; height: 48px; }51 52 .content {53 padding: 48px;54 }55 .title {56 font-size: 64px;57 font-weight: 800;58 margin: 12px 0 36px 0;59 }60 61 .cards {62 display: grid;63 grid-template-columns: 1fr 1fr;64 gap: 36px;65 }66 .card {67 background: #f6f6f6;68 border-radius: 8px;69 overflow: hidden;70 }71 .card .photo {72 height: 320px;73 }74 .card .label {75 background: #efefef;76 padding: 28px;77 font-size: 34px;78 }79 80 .chips {81 display: flex;82 gap: 24px;83 margin: 36px 0 28px 0;84 flex-wrap: wrap;85 }86 .chip {87 padding: 24px 42px;88 background: #F1F1F1;89 border-radius: 50px;90 font-weight: 700;91 font-size: 32px;92 color: #222;93 }94 .chip.active {95 background: #fff;96 border: 6px solid #111;97 padding: 18px 36px; /* keep visual size with border */98 }99 100 .scroll-indicator {101 height: 4px;102 width: 100%;103 background: #EEEEEE;104 border-radius: 2px;105 }106 .scroll-indicator .bar {107 width: 140px;108 height: 6px;109 background: #111;110 border-radius: 3px;111 margin-top: -1px;112 }113 114 .availability {115 margin: 36px -48px 0 -48px;116 padding: 36px 48px;117 background: #F5F5F5;118 }119 .availability .inner {120 background: #F1F1F1;121 border-radius: 24px;122 padding: 40px;123 display: flex;124 align-items: center;125 justify-content: space-between;126 }127 .availability .left {128 display: flex;129 align-items: center;130 gap: 24px;131 }132 .icons {133 display: flex;134 align-items: center;135 gap: 18px;136 color: #111;137 }138 .availability .title-line {139 font-size: 42px;140 font-weight: 800;141 }142 .availability .sub {143 margin-top: 10px;144 font-size: 30px;145 color: #555;146 max-width: 620px;147 line-height: 1.36;148 }149 .toggle {150 width: 240px;151 height: 120px;152 border-radius: 60px;153 background: #111;154 display: flex;155 align-items: center;156 justify-content: center;157 }158 .toggle svg { width: 54px; height: 54px; fill: #fff; }159 160 .results {161 padding-top: 36px;162 font-size: 34px;163 }164 165 /* Bottom navigation */166 .bottom-nav {167 position: absolute;168 left: 0;169 bottom: 0;170 width: 100%;171 height: 180px;172 background: #ffffff;173 border-top: 1px solid #e6e6e6;174 display: flex;175 align-items: center;176 justify-content: space-around;177 padding-bottom: 34px;178 }179 .nav-item {180 display: flex;181 flex-direction: column;182 align-items: center;183 gap: 10px;184 color: #9E9E9E;185 font-size: 24px;186 }187 .nav-item svg { width: 56px; height: 56px; stroke: #9E9E9E; fill: none; stroke-width: 2.6; }188 189 .home-active svg { stroke: #BDBDBD; }190 191 .home-indicator {192 position: absolute;193 bottom: 16px;194 left: 50%;195 transform: translateX(-50%);196 width: 320px;197 height: 10px;198 background: #000;199 opacity: 0.9;200 border-radius: 8px;201 }202</style>203</head>204<body>205<div id="render-target">206 <div class="hero">207 <div class="img-placeholder">[IMG: Beige sofa hero]</div>208 <div class="back-btn">209 <svg viewBox="0 0 24 24">210 <path d="M15.5 4.5L7 12l8.5 7.5" stroke="#111" stroke-width="2.4" fill="none" stroke-linecap="round" stroke-linejoin="round"/>211 </svg>212 </div>213 </div>214 215 <div class="content">216 <div class="title">Sofas & sectionals</div>217 218 <div class="cards">219 <div class="card">220 <div class="photo img-placeholder">[IMG: Fabric sofa]</div>221 <div class="label">Fabric sofas</div>222 </div>223 <div class="card">224 <div class="photo img-placeholder">[IMG: Black leather sofa]</div>225 <div class="label">Leather & faux leather sofas</div>226 </div>227 </div>228 229 <div class="chips">230 <div class="chip active">Best match</div>231 <div class="chip">Category</div>232 <div class="chip">Price</div>233 <div class="chip">Color</div>234 </div>235 236 <div class="scroll-indicator">237 <div class="bar"></div>238 </div>239 240 <div class="availability">241 <div class="inner">242 <div class="left">243 <div class="icons">244 <svg viewBox="0 0 24 24" width="44" height="44">245 <rect x="3" y="7" width="18" height="12" rx="1.5" stroke="#111" fill="none" stroke-width="2"/>246 <path d="M3 11h18" stroke="#111" stroke-width="2"/>247 </svg>248 <svg viewBox="0 0 24 24" width="44" height="44">249 <rect x="2" y="6" width="13" height="10" rx="2" stroke="#111" fill="none" stroke-width="2"/>250 <path d="M15 9h3l3 3v4h-6V9z" stroke="#111" fill="none" stroke-width="2"/>251 <circle cx="7" cy="18" r="2" fill="#111"/>252 <circle cx="19" cy="18" r="2" fill="#111"/>253 </svg>254 </div>255 <div>256 <div class="title-line">Show availability</div>257 <div class="sub">Select store or Zip code to see what’s in stock.</div>258 </div>259 </div>260 <div class="toggle" aria-label="availability settings">261 <svg viewBox="0 0 24 24">262 <path d="M12 8.5a3.5 3.5 0 1 0 0 7 3.5 3.5 0 0 0 0-7zm8.5 3h-2.02a6.99 6.99 0 0 0-1.08-2.6l1.43-1.43-1.92-1.92-1.43 1.43A7 7 0 0 0 13.5 3.5V1h-3v2.5a7 7 0 0 0-2.98 1.48L6.1 3.55 4.18 5.47l1.43 1.43A7 7 0 0 0 3.5 9.5H1v3h2.5c.2 1.07.64 2.06 1.28 2.9l-1.5 1.5 1.92 1.92 1.5-1.5c.84.64 1.83 1.08 2.9 1.28V23h3v-2.5c1.07-.2 2.06-.64 2.9-1.28l1.5 1.5 1.92-1.92-1.5-1.5c.64-.84 1.08-1.83 1.28-2.9H20.5v-3z" fill="#fff"/>263 </svg>264 </div>265 </div>266 </div>267 268 <div class="results">Showing 1807 products</div>269 </div>270 271 <div class="bottom-nav">272 <div class="nav-item home-active" aria-label="Home">273 <svg viewBox="0 0 24 24">274 <path d="M3 10l9-7 9 7v10h-6v-6H9v6H3z"/>275 </svg>276 </div>277 <div class="nav-item" aria-label="Search">278 <svg viewBox="0 0 24 24">279 <circle cx="11" cy="11" r="6.5" stroke-width="2.6"/>280 <path d="M16.5 16.5L21 21" stroke-width="2.6"/>281 </svg>282 </div>283 <div class="nav-item" aria-label="Categories">284 <svg viewBox="0 0 24 24">285 <rect x="3" y="3" width="8" height="8" rx="1.5"/>286 <rect x="13" y="3" width="8" height="8" rx="1.5"/>287 <rect x="3" y="13" width="8" height="8" rx="1.5"/>288 <rect x="13" y="13" width="8" height="8" rx="1.5"/>289 </svg>290 </div>291 <div class="nav-item" aria-label="Favorites">292 <svg viewBox="0 0 24 24">293 <path d="M12 21s-7-4.35-7-10a4.5 4.5 0 0 1 8-2.7A4.5 4.5 0 0 1 19 11c0 5.65-7 10-7 10z"/>294 </svg>295 </div>296 <div class="nav-item" aria-label="Cart">297 <svg viewBox="0 0 24 24">298 <path d="M3 5h3l2.2 10.5h9.6L20 8H7" stroke-width="2.6"/>299 <circle cx="10" cy="20" r="1.7" fill="#9E9E9E"/>300 <circle cx="17" cy="20" r="1.7" fill="#9E9E9E"/>301 </svg>302 </div>303 </div>304 305 <div class="home-indicator"></div>306</div>307</body>308</html>