GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Sofa Results - Dark Grid</title>6<style>7 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }8 #render-target {9 width: 1080px;10 height: 2400px;11 position: relative;12 overflow: hidden;13 background: #1b1b1b;14 color: #f5f5f5;15 }16 17 /* Status bar (OS mock) */18 .statusbar {19 height: 88px;20 background: #4a4a4a;21 padding: 0 32px;22 display: flex;23 align-items: center;24 justify-content: space-between;25 font-size: 38px;26 color: #fff;27 box-sizing: border-box;28 }29 .status-icons {30 display: flex;31 align-items: center;32 gap: 28px;33 }34 .dot { width: 10px; height: 10px; background: #dcdcdc; border-radius: 50%; display: inline-block; }35 36 /* App header */37 .appbar {38 background: #212121;39 height: 360px;40 position: relative;41 padding: 28px 32px 24px 32px;42 box-sizing: border-box;43 }44 .appbar .row {45 display: flex;46 align-items: center;47 justify-content: space-between;48 }49 .appbar .left-icons { display: flex; align-items: center; gap: 24px; }50 .icon-btn {51 width: 72px; height: 72px; border-radius: 12px;52 display: inline-flex; align-items: center; justify-content: center;53 background: transparent; border: none; padding: 0; cursor: default;54 }55 .title {56 margin-top: 16px;57 font-size: 86px;58 font-weight: 800;59 letter-spacing: 0.5px;60 }61 .subtitle {62 margin-top: 8px;63 font-size: 42px;64 color: #cfcfcf;65 }66 .accent-track {67 width: 100%;68 height: 14px;69 background: #2f2f2f;70 border-radius: 8px;71 margin-top: 20px;72 position: relative;73 }74 .accent-track .accent {75 position: absolute; top: 0; left: 0; height: 100%; width: 320px;76 background: #f0a500; border-radius: 8px;77 }78 79 /* Right side tool icons */80 .tools {81 position: absolute;82 right: 24px;83 top: 148px;84 display: flex;85 flex-direction: column;86 gap: 28px;87 align-items: center;88 }89 .grid-ic { opacity: 0.8; }90 91 /* Floating cart with badge */92 .cart-fab {93 position: absolute;94 top: 120px;95 right: 24px;96 width: 96px; height: 96px;97 border-radius: 18px;98 background: #2a2a2a;99 border: 2px solid #3a3a3a;100 display: flex; align-items: center; justify-content: center;101 }102 .cart-badge {103 position: absolute; top: -6px; right: -6px;104 background: #ffbf00; color: #1b1b1b; border: 3px solid #1b1b1b;105 width: 40px; height: 40px; border-radius: 20px;106 font-size: 26px; display: flex; align-items: center; justify-content: center;107 font-weight: 700;108 }109 110 /* Product grid */111 .content {112 position: absolute;113 top: 448px; left: 0; right: 0; bottom: 220px;114 padding: 0 20px 20px 20px;115 box-sizing: border-box;116 overflow: hidden;117 }118 .grid {119 display: grid;120 grid-template-columns: 1fr 1fr;121 gap: 22px;122 height: 100%;123 overflow-y: auto;124 padding-right: 6px;125 }126 .card {127 background: #141414;128 border: 2px solid #0e0e0e;129 border-radius: 6px;130 overflow: hidden;131 display: flex;132 flex-direction: column;133 }134 .card .img {135 background: #E0E0E0;136 color: #757575;137 border-bottom: 2px solid #BDBDBD;138 height: 360px;139 display: flex; align-items: center; justify-content: center;140 font-size: 34px;141 font-weight: 600;142 }143 .card .body {144 padding: 24px;145 box-sizing: border-box;146 }147 .price {148 color: #ffbf00;149 font-size: 46px;150 font-weight: 800;151 margin-bottom: 8px;152 }153 .compare-row {154 display: flex; justify-content: space-between; align-items: center;155 }156 .desc {157 font-size: 34px; line-height: 1.3; color: #d3d3d3;158 }159 .strike {160 font-size: 30px; color: #a7a7a7; text-decoration: line-through;161 margin-top: 6px;162 }163 .chip {164 display: inline-block; padding: 10px 18px; border-radius: 10px; font-size: 30px; font-weight: 800;165 }166 .chip.off { background: #ededed; color: #111; }167 .chip.best { background: #f0a500; color: #1b1b1b; }168 169 /* Bottom navigation */170 .bottom-nav {171 position: absolute; left: 0; right: 0; bottom: 0;172 height: 200px; background: #2b2b2b; border-top: 2px solid #3a3a3a;173 }174 .nav-items {175 height: 100%; display: flex; align-items: center; justify-content: space-around;176 padding: 0 20px;177 }178 .nav-item { display: flex; flex-direction: column; align-items: center; gap: 10px; color: #d8d8d8; font-size: 30px; }179 .nav-item .label { font-size: 28px; }180 .nav-center {181 position: absolute; top: -36px; left: 50%; transform: translateX(-50%);182 width: 132px; height: 132px; border-radius: 50%;183 background: #e0e0e0; border: 6px solid #2b2b2b;184 display: flex; align-items: center; justify-content: center; color: #1b1b1b; font-weight: 800; font-size: 42px;185 }186 .handle {187 position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%);188 width: 240px; height: 12px; background: #e6e6e6; border-radius: 6px; opacity: 0.85;189 }190 191 /* Simple helper icons */192 svg { display: block; }193 .muted { color: #bdbdbd; }194</style>195</head>196<body>197<div id="render-target">198 199 <!-- Mock status bar -->200 <div class="statusbar">201 <div>9:23</div>202 <div class="status-icons">203 <span class="dot"></span>204 <span class="dot"></span>205 <span class="dot"></span>206 <svg width="42" height="42" viewBox="0 0 24 24" fill="#fff"><path d="M12 3C7 3 3 7 3 12h2a7 7 0 0 1 14 0h2c0-5-4-9-9-9z"/></svg>207 <svg width="42" height="42" viewBox="0 0 24 24" fill="#fff"><path d="M17 7H7v10h10V7zm-1 9H8V8h8v8z"/></svg>208 </div>209 </div>210 211 <!-- App header -->212 <div class="appbar">213 <div class="row">214 <div class="left-icons">215 <button class="icon-btn" aria-label="Back">216 <svg width="42" height="42" viewBox="0 0 24 24" fill="#eaeaea"><path d="M15.5 19 9 12l6.5-7v14z"/></svg>217 </button>218 <button class="icon-btn" aria-label="Back2">219 <svg width="42" height="42" viewBox="0 0 24 24" fill="#eaeaea"><path d="M14 7H8v2h6V7zm0 4H6v2h8v-2zm0 4H9v2h5v-2z"/></svg>220 </button>221 </div>222 <div style="display:flex; gap:20px; align-items:center;">223 <!-- Placeholder right slot -->224 </div>225 </div>226 227 <div class="title">Results</div>228 <div class="subtitle">3-seater sofa in the Beige color</div>229 <div class="accent-track"><div class="accent"></div></div>230 231 <!-- Right side tools -->232 <div class="tools">233 <svg width="64" height="64" viewBox="0 0 24 24" fill="#cfcfcf"><path d="M10 18h4v-2h-4v2zM3 6v2h18V6H3zm3 7h12v-2H6v2z"/></svg>234 <svg width="64" height="64" viewBox="0 0 24 24" fill="#cfcfcf"><path d="M6 13h12l-4 5H10l-4-5zm12-2H6l4-5h4l4 5z"/></svg>235 <svg class="grid-ic" width="64" height="64" viewBox="0 0 24 24" fill="#cfcfcf"><path d="M3 3h8v8H3V3zm10 0h8v8h-8V3zM3 13h8v8H3v-8zm10 0h8v8h-8v-8z"/></svg>236 </div>237 238 <!-- Floating cart -->239 <div class="cart-fab">240 <svg width="44" height="44" viewBox="0 0 24 24" fill="#dcdcdc"><path d="M7 4h-2l-1 2v2h2l3 7h7l3-7H7zM7 20a2 2 0 1 0 .001-3.999A2 2 0 0 0 7 20zm9 0a2 2 0 1 0 .001-3.999A2 2 0 0 0 16 20z"/></svg>241 <div class="cart-badge">0</div>242 </div>243 </div>244 245 <!-- Product grid -->246 <div class="content">247 <div class="grid">248 249 <!-- Card 1 -->250 <div class="card">251 <div class="img">[IMG: Beige 3-seater Sofa in bright room]</div>252 <div class="body">253 <div class="price">INR 48692.00</div>254 <div class="desc">HIFIT 79” Modern Sofas Couches for Living Room, Comfy Faux Leather</div>255 </div>256 </div>257 258 <!-- Card 2 -->259 <div class="card">260 <div class="img">[IMG: Beige Sofa top-down view]</div>261 <div class="body">262 <div class="price">INR 39225.00</div>263 <div class="desc">Lepfun Large Sofa, Three-seat Sofa Classic Tufted Chesterfield</div>264 </div>265 </div>266 267 <!-- Card 3 -->268 <div class="card">269 <div class="img">[IMG: Beige sectional with Xmas decor]</div>270 <div class="body">271 <div class="chip off">7% OFF</div>272 <div class="strike">INR 34003.00</div>273 <div class="price">INR 31904.00</div>274 <div class="desc">ZeeFu Convertible Sectional Sofa Couch, Modern Beige Linen Fabric</div>275 </div>276 </div>277 278 <!-- Card 4 -->279 <div class="card">280 <div class="img">[IMG: Beige sofa with throw blanket]</div>281 <div class="body">282 <div class="chip best">Best Seller</div>283 <div class="price" style="margin-top:10px;">INR 47642.00</div>284 <div class="desc">VanAcc 89" Sofa, Comfy Sofa Couch with Extra Deep Seats, Modern Sofa-</div>285 </div>286 </div>287 288 <!-- Card 5 -->289 <div class="card">290 <div class="img">[IMG: Living room with beige couch and wood accents]</div>291 <div class="body">292 <div class="price">INR 45490.00</div>293 <div class="desc">CozyHome 3-Seater, Soft Linen Upholstery with Plush Cushions</div>294 </div>295 </div>296 297 <!-- Card 6 -->298 <div class="card">299 <div class="img">[IMG: Minimal beige sofa near tall windows]</div>300 <div class="body">301 <div class="price">INR 43999.00</div>302 <div class="desc">Urban Loft Modern Sofa, Durable Fabric and Sturdy Frame</div>303 </div>304 </div>305 306 </div>307 </div>308 309 <!-- Bottom navigation -->310 <div class="bottom-nav">311 <div class="nav-center">US</div>312 <div class="nav-items">313 <div class="nav-item">314 <svg width="48" height="48" viewBox="0 0 24 24" fill="#dcdcdc"><path d="M12 3l9 8h-3v8h-5v-5H11v5H6v-8H3l9-8z"/></svg>315 <div class="label">Explore</div>316 </div>317 <div class="nav-item">318 <svg width="48" height="48" viewBox="0 0 24 24" fill="#dcdcdc"><path d="M12 2L3 7v5c0 5 3.8 9.7 9 10 5.2-.3 9-5 9-10V7l-9-5zm0 4.3L17 9v3c0 3.1-2.1 6.2-5 6.7-2.9-.5-5-3.6-5-6.7V9l5-2.7z"/></svg>319 <div class="label">Deals</div>320 </div>321 <div class="nav-item">322 <svg width="48" height="48" viewBox="0 0 24 24" fill="#dcdcdc"><path d="M12 7a5 5 0 1 0 0 10 5 5 0 0 0 0-10z"/></svg>323 <div class="label">Favorites</div>324 </div>325 <div class="nav-item">326 <svg width="48" height="48" viewBox="0 0 24 24" fill="#dcdcdc"><path d="M15.5 14h-.79l-.28-.27A6.5 6.5 0 1 0 16 15.5l3.5 3.5 1.5-1.5L15.5 14zM10 14a4 4 0 1 1 .001-8.001A4 4 0 0 1 10 14z"/></svg>327 <div class="label">Search</div>328 </div>329 </div>330 <div class="handle"></div>331 </div>332 333</div>334</body>335</html>