GD-ML/AndroidCode
13.4k
1<html lang="en">2<head>3<meta charset="UTF-8">4<meta name="viewport" content="width=1080, initial-scale=1.0">5<title>Kitchen & appliances - Mock UI</title>6<style>7 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }8 #render-target {9 position: relative;10 width: 1080px;11 height: 2400px;12 overflow: hidden;13 background: #ffffff;14 border-radius: 0;15 }16 17 /* Status bar */18 .status-bar {19 position: absolute;20 top: 0;21 left: 0;22 width: 1080px;23 height: 110px;24 padding: 0 40px;25 display: flex;26 align-items: center;27 justify-content: space-between;28 color: #000;29 font-weight: 600;30 box-sizing: border-box;31 }32 .status-right {33 display: flex;34 gap: 22px;35 align-items: center;36 }37 .icon-small { width: 34px; height: 34px; }38 39 /* Header */40 .header {41 position: absolute;42 top: 110px;43 left: 0;44 width: 1080px;45 height: 150px;46 display: flex;47 align-items: center;48 box-sizing: border-box;49 padding: 0 40px;50 border-bottom: 1px solid #eee;51 }52 .back-btn {53 width: 80px;54 height: 80px;55 display: flex;56 align-items: center;57 justify-content: center;58 margin-right: 20px;59 cursor: pointer;60 }61 .title {62 font-size: 44px;63 font-weight: 700;64 color: #111;65 }66 67 /* Filter chips */68 .chip-row {69 position: absolute;70 top: 260px;71 left: 0;72 width: 1080px;73 padding: 0 30px;74 box-sizing: border-box;75 display: flex;76 gap: 22px;77 overflow: hidden;78 }79 .chip {80 min-width: 220px;81 height: 110px;82 border-radius: 55px;83 border: 2px solid #ddd;84 display: flex;85 align-items: center;86 justify-content: center;87 font-size: 36px;88 color: #333;89 background: #fafafa;90 }91 .chip.active {92 background: #fff;93 border-color: #bbb;94 font-weight: 700;95 }96 97 /* Top partial product prices (as seen above cards) */98 .top-prices {99 position: absolute;100 top: 410px;101 left: 35px;102 width: 1010px;103 display: grid;104 grid-template-columns: 1fr 1fr;105 column-gap: 40px;106 color: #111;107 }108 .top-prices .price {109 font-size: 60px;110 font-weight: 800;111 }112 .top-prices .desc {113 font-size: 34px;114 color: #333;115 line-height: 1.3;116 }117 118 /* Floating add buttons */119 .fab {120 position: absolute;121 width: 140px;122 height: 140px;123 background: #184D8F;124 border-radius: 70px;125 display: flex;126 align-items: center;127 justify-content: center;128 box-shadow: 0 8px 18px rgba(0,0,0,0.15);129 }130 .fab svg { width: 70px; height: 70px; color: #fff; }131 132 /* Grid of product cards */133 .product-grid {134 position: absolute;135 top: 850px;136 left: 0;137 width: 1080px;138 padding: 0 40px 40px;139 box-sizing: border-box;140 display: grid;141 grid-template-columns: 1fr 1fr;142 gap: 40px;143 }144 .card {145 position: relative;146 background: #fff;147 border-radius: 10px;148 }149 .top-seller {150 position: absolute;151 top: -60px;152 left: 0;153 background: #E24B5A;154 color: #fff;155 padding: 18px 28px;156 border-radius: 14px;157 font-size: 34px;158 font-weight: 700;159 }160 .wish {161 position: absolute;162 top: -52px;163 right: 30px;164 width: 72px;165 height: 72px;166 }167 .img {168 width: 100%;169 height: 520px;170 background: #E0E0E0;171 border: 1px solid #BDBDBD;172 display: flex;173 align-items: center;174 justify-content: center;175 color: #757575;176 font-size: 34px;177 border-radius: 6px;178 }179 .name {180 margin-top: 34px;181 font-size: 44px;182 font-weight: 800;183 color: #111;184 }185 .subtitle {186 margin-top: 10px;187 font-size: 36px;188 color: #222;189 }190 .dim {191 margin-top: 6px;192 font-size: 34px;193 color: #666;194 }195 .price-row {196 margin-top: 20px;197 display: flex;198 align-items: baseline;199 gap: 18px;200 }201 .price {202 font-size: 58px;203 font-weight: 800;204 color: #111;205 }206 .price-strike {207 font-size: 40px;208 color: #9E9E9E;209 text-decoration: line-through;210 }211 .flag-red {212 margin-top: 18px;213 font-size: 40px;214 color: #d52b2b;215 font-weight: 800;216 }217 .options-link {218 margin-top: 28px;219 font-size: 36px;220 color: #6b6b6b;221 text-decoration: none;222 }223 224 /* Bottom nav */225 .bottom-nav {226 position: absolute;227 bottom: 0;228 left: 0;229 width: 1080px;230 height: 160px;231 border-top: 1px solid #e6e6e6;232 background: #fff;233 display: flex;234 align-items: center;235 justify-content: space-around;236 }237 .nav-item { width: 100px; height: 100px; display: flex; align-items: center; justify-content: center; }238 .home-indicator {239 position: absolute;240 bottom: 18px;241 left: 50%;242 transform: translateX(-50%);243 width: 280px;244 height: 12px;245 background: #d8d8d8;246 border-radius: 6px;247 }248</style>249</head>250<body>251<div id="render-target">252 253 <!-- Status bar -->254 <div class="status-bar">255 <div style="display:flex; align-items:center; gap:22px;">256 <span style="font-size:36px;">1:15</span>257 </div>258 <div class="status-right">259 <!-- simple dots to represent status icons -->260 <svg class="icon-small" viewBox="0 0 24 24">261 <circle cx="12" cy="12" r="10" fill="#444"></circle>262 </svg>263 <svg class="icon-small" viewBox="0 0 24 24">264 <rect x="5" y="5" width="14" height="14" fill="#888"></rect>265 </svg>266 <svg class="icon-small" viewBox="0 0 24 24">267 <path d="M3 12h18" stroke="#000" stroke-width="2"></path>268 </svg>269 </div>270 </div>271 272 <!-- Header -->273 <div class="header">274 <div class="back-btn">275 <svg width="44" height="44" viewBox="0 0 24 24">276 <path d="M15 18l-6-6 6-6" stroke="#000" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>277 </svg>278 </div>279 <div class="title">Kitchen & appliances</div>280 </div>281 282 <!-- Chips -->283 <div class="chip-row">284 <div class="chip active">Best match</div>285 <div class="chip">Size</div>286 <div class="chip">Color</div>287 <div class="chip">Type</div>288 </div>289 290 <!-- Partial top product info (just text & prices like in screenshot) -->291 <div class="top-prices">292 <div>293 <div class="desc">Base cabinet w door/2 drawers, white, 15x24x30"</div>294 <div class="price">$288<span style="font-size:34px;">.00</span></div>295 <a class="options-link" href="#">+ Options</a>296 </div>297 <div>298 <div class="desc">Kitchen island, 49 5/8x35 3/8"</div>299 <div class="price">$569<span style="font-size:34px;">.00</span></div>300 </div>301 </div>302 303 <!-- Floating add buttons -->304 <div class="fab" style="left: 300px; top: 760px;">305 <svg viewBox="0 0 24 24">306 <path d="M7 6h14l-2 10H9L7 6z" fill="none" stroke="white" stroke-width="2"/>307 <circle cx="9" cy="20" r="1.5" fill="#fff"/>308 <circle cx="17" cy="20" r="1.5" fill="#fff"/>309 <path d="M12 9v4M10 11h4" stroke="#fff" stroke-width="2" stroke-linecap="round"/>310 </svg>311 </div>312 <div class="fab" style="right: 70px; top: 760px;">313 <svg viewBox="0 0 24 24">314 <path d="M7 6h14l-2 10H9L7 6z" fill="none" stroke="white" stroke-width="2"/>315 <circle cx="9" cy="20" r="1.5" fill="#fff"/>316 <circle cx="17" cy="20" r="1.5" fill="#fff"/>317 <path d="M12 9v4M10 11h4" stroke="#fff" stroke-width="2" stroke-linecap="round"/>318 </svg>319 </div>320 321 <!-- Product Grid -->322 <div class="product-grid">323 324 <!-- Left card -->325 <div class="card">326 <div class="top-seller">Top seller</div>327 <svg class="wish" viewBox="0 0 24 24">328 <path d="M12 21s-6-4.35-8.5-7.17C1 11.3 2.5 8 5.5 8c2 0 3.5 1.5 4.5 2.5C11.5 9.5 13 8 15 8c3 0 4.5 3.3 2 5.83C18 16.65 12 21 12 21z" fill="none" stroke="#777" stroke-width="2"/>329 </svg>330 <div class="img">[IMG: Black 3-tier utility cart]</div>331 <div class="name">NISSAFORS</div>332 <div class="subtitle">Utility cart, black, 19</div>333 <div class="dim">7/8x11 3/4x32 5/8"</div>334 <div class="price-row">335 <div class="price">$29<span style="font-size:34px;">.99</span></div>336 </div>337 <a class="options-link" href="#">+ Options</a>338 </div>339 340 <!-- Right card -->341 <div class="card">342 <div class="top-seller">Top seller</div>343 <svg class="wish" viewBox="0 0 24 24">344 <path d="M12 21s-6-4.35-8.5-7.17C1 11.3 2.5 8 5.5 8c2 0 3.5 1.5 4.5 2.5C11.5 9.5 13 8 15 8c3 0 4.5 3.3 2 5.83C18 16.65 12 21 12 21z" fill="none" stroke="#777" stroke-width="2"/>345 </svg>346 <div class="img">[IMG: White kitchen island with wood top]</div>347 <div class="flag-red">New lower price</div>348 <div class="name">TORNVIKEN</div>349 <div class="subtitle">Kitchen island, 49 5/8x30</div>350 <div class="dim">3/8"</div>351 <div class="price-row">352 <div class="price-strike">$459.99</div>353 </div>354 <div class="price-row">355 <div class="price">$399<span style="font-size:34px;">.99</span></div>356 </div>357 <a class="options-link" href="#">+ Options</a>358 </div>359 360 </div>361 362 <!-- Bottom navigation -->363 <div class="bottom-nav">364 <div class="nav-item">365 <svg width="60" height="60" viewBox="0 0 24 24">366 <path d="M3 10l9-7 9 7v10H3V10z" fill="none" stroke="#333" stroke-width="2"/>367 </svg>368 </div>369 <div class="nav-item">370 <svg width="60" height="60" viewBox="0 0 24 24">371 <circle cx="11" cy="11" r="7" fill="none" stroke="#333" stroke-width="2"/>372 <path d="M20 20l-4-4" stroke="#333" stroke-width="2" stroke-linecap="round"/>373 </svg>374 </div>375 <div class="nav-item">376 <svg width="60" height="60" viewBox="0 0 24 24">377 <rect x="5" y="5" width="14" height="14" fill="none" stroke="#333" stroke-width="2"/>378 <path d="M8 9h8M8 13h8M8 17h8" stroke="#333" stroke-width="2"/>379 </svg>380 </div>381 <div class="nav-item">382 <svg width="60" height="60" viewBox="0 0 24 24">383 <path d="M12 21s-6-4.35-8.5-7.17C1 11.3 2.5 8 5.5 8c2 0 3.5 1.5 4.5 2.5C11.5 9.5 13 8 15 8c3 0 4.5 3.3 2 5.83C18 16.65 12 21 12 21z" fill="none" stroke="#333" stroke-width="2"/>384 </svg>385 </div>386 <div class="nav-item">387 <svg width="60" height="60" viewBox="0 0 24 24">388 <path d="M7 6h14l-2 12H9L7 6z" fill="none" stroke="#333" stroke-width="2"/>389 <circle cx="10" cy="21" r="1.5" fill="#333"/>390 <circle cx="18" cy="21" r="1.5" fill="#333"/>391 </svg>392 </div>393 </div>394 <div class="home-indicator"></div>395 396</div>397</body>398</html>