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 - Mock</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }9 #render-target {10 width: 1080px;11 height: 2400px;12 position: relative;13 overflow: hidden;14 background: #ffffff;15 color: #111;16 }17 18 /* Status bar */19 .status-bar {20 height: 110px;21 padding: 0 40px;22 display: flex;23 align-items: center;24 justify-content: space-between;25 color: #333;26 font-size: 36px;27 }28 .status-icons {29 display: flex;30 gap: 22px;31 align-items: center;32 }33 .status-dot { width: 20px; height: 20px; background:#777; border-radius: 50%; display:inline-block; }34 .status-rect { width: 40px; height: 40px; background:#bdbdbd; border-radius:8px; display:inline-block; }35 36 /* Header */37 .header {38 height: 130px;39 padding: 0 32px;40 display: flex;41 align-items: center;42 position: relative;43 }44 .back-btn {45 width: 90px; height: 90px;46 display: flex; align-items: center; justify-content: center;47 }48 .header h1 {49 position: absolute;50 left: 0; right: 0;51 text-align: center;52 font-size: 46px;53 font-weight: 700;54 }55 .divider { height: 12px; background: #f2f2f2; }56 57 /* Filter chips */58 .filters {59 padding: 28px 32px;60 display: flex;61 gap: 20px;62 align-items: center;63 }64 .chip {65 padding: 26px 38px;66 background: #eee;67 border-radius: 999px;68 font-size: 34px;69 color: #222;70 }71 .chip.outlined {72 background: #fff;73 border: 4px solid #111;74 }75 .filters-underline { height: 6px; background: #111; width: 140px; margin: 0 32px 20px; border-radius: 3px; }76 77 /* Availability banner */78 .availability {79 margin-top: 10px;80 background: #f5f5f5;81 padding: 42px 32px;82 display: flex;83 align-items: center;84 justify-content: space-between;85 }86 .avail-left {87 display: flex;88 gap: 26px;89 align-items: center;90 }91 .avail-text .title {92 font-size: 40px; font-weight: 700;93 }94 .avail-text .subtitle {95 margin-top: 10px; color: #666; font-size: 34px; line-height: 1.3;96 }97 .gear-pill {98 width: 280px; height: 120px; background:#111; border-radius: 60px;99 display: flex; align-items: center; justify-content: center;100 }101 102 /* Product section */103 .section-info {104 padding: 36px 32px;105 font-size: 40px;106 }107 .products {108 padding: 0 32px 200px;109 display: flex; gap: 36px;110 }111 .product {112 width: calc(50% - 18px);113 }114 .top-row {115 display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px;116 }117 .badge {118 display: inline-block;119 background: #d30c5c;120 color: #fff;121 padding: 18px 26px;122 border-radius: 12px;123 font-size: 34px; font-weight: 700;124 }125 .heart-btn { width: 60px; height: 60px; }126 .img-ph {127 width: 100%; height: 360px;128 background: #E0E0E0; border: 1px solid #BDBDBD;129 display: flex; align-items: center; justify-content: center;130 color: #757575; font-size: 32px;131 margin-bottom: 22px;132 }133 .label-red { color: #e00034; font-weight: 700; font-size: 34px; }134 .label-orange { color: #d26a00; font-weight: 700; font-size: 34px; }135 .product h3 {136 font-size: 44px; font-weight: 800; margin: 8px 0;137 }138 .desc { color: #555; font-size: 34px; line-height: 1.35; }139 .old-price { color: #9e9e9e; text-decoration: line-through; font-size: 34px; margin-top: 8px; }140 .price { font-size: 46px; font-weight: 800; margin-top: 10px; }141 .options { margin-top: 18px; color: #666; font-size: 34px; text-decoration: underline; }142 143 /* Bottom nav */144 .bottom-nav {145 position: absolute; left: 0; right: 0; bottom: 70px;146 height: 150px; background: #fff; border-top: 2px solid #e5e5e5;147 display: flex; align-items: center; justify-content: space-around;148 }149 .nav-item { display: flex; flex-direction: column; align-items: center; gap: 10px; color: #777; font-size: 28px; }150 .gesture-bar {151 position: absolute; left: 50%; transform: translateX(-50%);152 bottom: 20px; width: 300px; height: 16px; background: #111; border-radius: 12px;153 }154 155 /* Simple icons */156 svg { display: block; }157</style>158</head>159<body>160<div id="render-target">161 162 <!-- Status bar -->163 <div class="status-bar">164 <div>11:14</div>165 <div class="status-icons">166 <span class="status-rect"></span>167 <span class="status-rect"></span>168 <span class="status-dot"></span>169 <span class="status-dot"></span>170 <span class="status-dot"></span>171 <!-- Right side placeholders -->172 <span class="status-rect"></span>173 <span class="status-rect"></span>174 </div>175 </div>176 177 <!-- Header -->178 <div class="header">179 <div class="back-btn">180 <svg width="54" height="54" viewBox="0 0 24 24">181 <path d="M15.5 19l-7-7 7-7" fill="none" stroke="#000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>182 </svg>183 </div>184 <h1>Sofas & sectionals</h1>185 </div>186 187 <div class="divider"></div>188 189 <!-- Filters -->190 <div class="filters">191 <div class="chip outlined">Best match</div>192 <div class="chip">Category</div>193 <div class="chip">Price</div>194 <div class="chip">Color</div>195 </div>196 <div class="divider" style="height: 8px;"></div>197 <div class="filters-underline"></div>198 199 <!-- Availability banner -->200 <div class="availability">201 <div class="avail-left">202 <svg width="60" height="60" viewBox="0 0 24 24">203 <rect x="3" y="5" width="14" height="12" fill="none" stroke="#000" stroke-width="2"/>204 <rect x="7" y="9" width="6" height="4" fill="none" stroke="#000" stroke-width="2"/>205 </svg>206 <svg width="60" height="60" viewBox="0 0 24 24">207 <rect x="1" y="6" width="15" height="10" fill="none" stroke="#000" stroke-width="2"/>208 <rect x="16" y="10" width="7" height="6" fill="none" stroke="#000" stroke-width="2"/>209 <circle cx="6" cy="18" r="2" fill="#000"/>210 <circle cx="18" cy="18" r="2" fill="#000"/>211 </svg>212 <div class="avail-text">213 <div class="title">Show availability</div>214 <div class="subtitle">Select store or Zip code to see what’s in stock.</div>215 </div>216 </div>217 <div class="gear-pill">218 <svg width="48" height="48" viewBox="0 0 24 24">219 <path d="M12 15a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm8-3l-2.1-.6.5-2.1-1.8-1.3-1.6 1.4-1.9-.8-.6-2.1h-2.3l-.6 2.1-1.9.8-1.6-1.4-1.8 1.3.5 2.1L4 12l.5 2.1-.5 2.1 1.8 1.3 1.6-1.4 1.9.8.6 2.1h2.3l.6-2.1 1.9-.8 1.6 1.4 1.8-1.3-.5-2.1L20 12z" fill="#fff"/>220 </svg>221 </div>222 </div>223 224 <!-- Info -->225 <div class="section-info">Showing 1807 products</div>226 227 <!-- Products -->228 <div class="products">229 <!-- Product 1 -->230 <div class="product">231 <div class="top-row">232 <span class="badge">Top seller</span>233 <svg class="heart-btn" viewBox="0 0 24 24">234 <path d="M12 21s-7-4.8-9-8.6C1.1 9.7 2.7 7 5.7 7c1.7 0 3.1 1 4.3 2.3C11.2 8 12.6 7 14.3 7c3 0 4.6 2.7 2.7 5.4C19 16.2 12 21 12 21z" fill="none" stroke="#777" stroke-width="1.8"/>235 </svg>236 </div>237 <div class="img-ph">[IMG: Gray sleeper sectional sofa]</div>238 <div class="label-red">New lower price</div>239 <h3>FRIHETEN</h3>240 <div class="desc">Sleeper sectional, 3 seat w/storage, Skiftebo dark gray</div>241 <div class="old-price">$949.00</div>242 <div class="price">$899.00</div>243 <div class="options">+ Options</div>244 </div>245 246 <!-- Product 2 -->247 <div class="product">248 <div class="top-row">249 <span></span>250 <svg class="heart-btn" viewBox="0 0 24 24">251 <path d="M12 21s-7-4.8-9-8.6C1.1 9.7 2.7 7 5.7 7c1.7 0 3.1 1 4.3 2.3C11.2 8 12.6 7 14.3 7c3 0 4.6 2.7 2.7 5.4C19 16.2 12 21 12 21z" fill="none" stroke="#777" stroke-width="1.8"/>252 </svg>253 </div>254 <div class="img-ph">[IMG: Beige sofa with chaise]</div>255 <div class="label-orange">New</div>256 <h3>KIVIK</h3>257 <div class="desc">Sofa with chaise, Gunnared beige</div>258 <div class="price">$1,299.00</div>259 <div class="options">+ Options</div>260 </div>261 </div>262 263 <!-- Bottom navigation -->264 <div class="bottom-nav">265 <div class="nav-item">266 <svg width="44" height="44" viewBox="0 0 24 24">267 <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="#888" stroke-width="2"/>268 </svg>269 <span>Home</span>270 </div>271 <div class="nav-item">272 <svg width="44" height="44" viewBox="0 0 24 24">273 <circle cx="11" cy="11" r="6" fill="none" stroke="#000" stroke-width="2"/>274 <path d="M20 20l-4-4" stroke="#000" stroke-width="2" fill="none" stroke-linecap="round"/>275 </svg>276 <span>Search</span>277 </div>278 <div class="nav-item">279 <svg width="44" height="44" viewBox="0 0 24 24">280 <rect x="3" y="6" width="18" height="12" fill="none" stroke="#888" stroke-width="2"/>281 <path d="M7 10h4v5H7zM15 10h4v5h-4z" fill="none" stroke="#888" stroke-width="2"/>282 </svg>283 <span>Stores</span>284 </div>285 <div class="nav-item">286 <svg width="44" height="44" viewBox="0 0 24 24">287 <path d="M12 21s-7-4.8-9-8.6C1.1 9.7 2.7 7 5.7 7c1.7 0 3.1 1 4.3 2.3C11.2 8 12.6 7 14.3 7c3 0 4.6 2.7 2.7 5.4C19 16.2 12 21 12 21z" fill="none" stroke="#888" stroke-width="2"/>288 </svg>289 <span>Favorites</span>290 </div>291 <div class="nav-item">292 <svg width="44" height="44" viewBox="0 0 24 24">293 <path d="M6 7l2-3h8l2 3" fill="none" stroke="#888" stroke-width="2"/>294 <rect x="5" y="7" width="14" height="13" fill="none" stroke="#888" stroke-width="2"/>295 </svg>296 <span>Bag</span>297 </div>298 </div>299 <div class="gesture-bar"></div>300 301</div>302</body>303</html>