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, Helvetica, Arial, sans-serif;16 color: #111;17 }18 .status-bar {19 height: 80px;20 padding: 0 40px;21 display: flex;22 align-items: center;23 justify-content: space-between;24 font-size: 32px;25 color: #555;26 }27 .header {28 height: 120px;29 display: flex;30 align-items: center;31 padding: 0 36px;32 position: relative;33 }34 .header .title {35 position: absolute;36 left: 0;37 right: 0;38 text-align: center;39 font-weight: 600;40 font-size: 44px;41 color: #111;42 }43 .icon-btn {44 width: 72px;45 height: 72px;46 display: flex;47 align-items: center;48 justify-content: center;49 border-radius: 36px;50 }51 .filters {52 padding: 16px 28px 8px 28px;53 display: flex;54 gap: 24px;55 }56 .chip {57 padding: 22px 40px;58 border-radius: 999px;59 background: #f1f1f1;60 font-size: 34px;61 color: #111;62 }63 .chip.primary {64 background: #fff;65 border: 4px solid #111;66 box-shadow: 0 0 0 2px #fff inset;67 }68 .section-sep {69 height: 2px;70 background: #e5e5e5;71 margin: 12px 28px 0 28px;72 }73 .prod-text-row {74 padding: 24px 36px 0 36px;75 display: grid;76 grid-template-columns: 1fr 1fr;77 column-gap: 36px;78 }79 .prod-text {80 min-height: 210px;81 }82 .prod-text .name {83 font-size: 38px;84 line-height: 52px;85 color: #333;86 margin-bottom: 10px;87 }88 .price {89 font-size: 56px;90 font-weight: 800;91 margin-top: 12px;92 }93 .price small {94 font-size: 28px;95 font-weight: 700;96 vertical-align: super;97 }98 .link {99 font-size: 34px;100 color: #6d6d6d;101 text-decoration: underline;102 margin-top: 18px;103 }104 .yellow-tag {105 display: inline-block;106 background: #ffd94d;107 color: #111;108 font-weight: 800;109 font-size: 44px;110 padding: 14px 22px;111 border-radius: 6px;112 position: relative;113 border: 2px solid #caa100;114 }115 .yellow-tag:after {116 content: "";117 position: absolute;118 left: 8px;119 right: 8px;120 bottom: -10px;121 height: 6px;122 background: #d23c55;123 border-radius: 2px;124 }125 .muted {126 color: #8b8b8b;127 font-size: 36px;128 padding: 22px 36px;129 }130 .actions-row {131 display: grid;132 grid-template-columns: 1fr 1fr;133 column-gap: 36px;134 padding: 10px 36px 30px 36px;135 align-items: center;136 }137 .cart-round {138 width: 140px;139 height: 140px;140 background: #235e9f;141 border-radius: 70px;142 display: flex;143 align-items: center;144 justify-content: center;145 margin: 10px auto;146 }147 .divider {148 height: 2px;149 background: #e7e7e7;150 margin: 24px 36px;151 }152 .grid {153 padding: 10px 36px 0 36px;154 display: grid;155 grid-template-columns: 1fr 1fr;156 column-gap: 36px;157 }158 .card {159 position: relative;160 }161 .badge {162 position: absolute;163 top: -8px;164 left: 50%;165 transform: translateX(-50%);166 background: #d83b57;167 color: #fff;168 font-size: 34px;169 padding: 12px 24px;170 border-radius: 999px;171 font-weight: 600;172 }173 .fav {174 position: absolute;175 top: -8px;176 right: 18px;177 width: 56px;178 height: 56px;179 display: flex;180 align-items: center;181 justify-content: center;182 }183 .img {184 width: 100%;185 height: 480px;186 background: #E0E0E0;187 border: 1px solid #BDBDBD;188 display: flex;189 align-items: center;190 justify-content: center;191 color: #757575;192 font-size: 34px;193 text-align: center;194 }195 .details {196 padding-top: 26px;197 }198 .title {199 font-size: 44px;200 font-weight: 800;201 letter-spacing: 0.5px;202 margin-bottom: 6px;203 }204 .desc {205 font-size: 34px;206 color: #444;207 }208 .price-line {209 margin-top: 16px;210 font-size: 48px;211 font-weight: 800;212 }213 .price-line small {214 font-size: 26px;215 font-weight: 700;216 vertical-align: super;217 }218 .subtle {219 margin-top: 14px;220 font-size: 34px;221 color: #8b8b8b;222 }223 .link.small {224 font-size: 32px;225 }226 .bottom-nav {227 position: absolute;228 left: 0;229 right: 0;230 bottom: 0;231 height: 150px;232 border-top: 2px solid #e5e5e5;233 background: #fff;234 display: grid;235 grid-template-columns: repeat(5, 1fr);236 align-items: center;237 padding: 0 40px;238 }239 .nav-item {240 display: flex;241 justify-content: center;242 align-items: center;243 }244 .badge-dot {245 position: absolute;246 right: 60px;247 bottom: 98px;248 background: #1a73e8;249 color: #fff;250 font-size: 28px;251 width: 50px;252 height: 50px;253 border-radius: 25px;254 display: flex;255 align-items: center;256 justify-content: center;257 font-weight: 700;258 }259</style>260</head>261<body>262<div id="render-target">263 <!-- Status bar -->264 <div class="status-bar">265 <div>11:11</div>266 <div style="display:flex; gap:24px;">267 <!-- simple status glyphs -->268 <span>▸</span>269 <span>◈</span>270 <span>🔋</span>271 </div>272 </div>273 274 <!-- Header -->275 <div class="header">276 <div class="icon-btn">277 <svg width="48" height="48" viewBox="0 0 24 24" fill="none">278 <path d="M15 6l-6 6 6 6" stroke="#111" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>279 </svg>280 </div>281 <div class="title">Home décor</div>282 </div>283 284 <!-- Filters -->285 <div class="filters">286 <div class="chip primary">Best match</div>287 <div class="chip">Color</div>288 <div class="chip">Category</div>289 <div class="chip">Size</div>290 </div>291 <div class="section-sep"></div>292 293 <!-- Text-only first row -->294 <div class="prod-text-row">295 <div class="prod-text">296 <div class="name">Vase/watering can, yellow, 6 ¾ "</div>297 <div class="price">$6<small>.99</small></div>298 <div class="link">+ Options</div>299 </div>300 <div class="prod-text">301 <div class="name">Vase, white, 6 ¾ "</div>302 <div class="yellow-tag">$2<small>.99</small></div>303 </div>304 </div>305 306 <div class="muted">Last chance to buy</div>307 308 <!-- Add to cart quick actions -->309 <div class="actions-row">310 <div class="cart-round">311 <svg width="64" height="64" viewBox="0 0 24 24" fill="none">312 <path d="M3 6h2l2 10h10l2-6H8" stroke="#fff" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/>313 <path d="M12 3v6M9 6h6" stroke="#fff" stroke-width="2.2" stroke-linecap="round"/>314 </svg>315 </div>316 <div class="cart-round">317 <svg width="64" height="64" viewBox="0 0 24 24" fill="none">318 <path d="M3 6h2l2 10h10l2-6H8" stroke="#fff" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/>319 <path d="M12 3v6M9 6h6" stroke="#fff" stroke-width="2.2" stroke-linecap="round"/>320 </svg>321 </div>322 </div>323 324 <div class="divider"></div>325 326 <!-- Product grid with images -->327 <div class="grid">328 <!-- Left card -->329 <div class="card">330 <div class="fav">331 <svg width="42" height="42" viewBox="0 0 24 24" fill="none">332 <path d="M12 21s-6-4.35-8.5-7.3C1.5 11.5 3 8 6.5 8c2 0 3.1 1 3.5 2 0.4-1 1.5-2 3.5-2 3.5 0 5 3.5 3 5.7C18 16.7 12 21 12 21z" stroke="#9B9B9B" stroke-width="1.8" fill="none"/>333 </svg>334 </div>335 <div class="img">[IMG: Poster collage]</div>336 <div class="details">337 <div class="title">BILD</div>338 <div class="desc">Poster, 12 ¼x16 ¼ "</div>339 <div class="price-line">$10<small>.00</small> / 4 pack</div>340 <div class="subtle">Last chance to buy</div>341 </div>342 </div>343 344 <!-- Right card -->345 <div class="card">346 <div class="badge">Top seller</div>347 <div class="fav">348 <svg width="42" height="42" viewBox="0 0 24 24" fill="none">349 <path d="M12 21s-6-4.35-8.5-7.3C1.5 11.5 3 8 6.5 8c2 0 3.1 1 3.5 2 0.4-1 1.5-2 3.5-2 3.5 0 5 3.5 3 5.7C18 16.7 12 21 12 21z" stroke="#9B9B9B" stroke-width="1.8" fill="none"/>350 </svg>351 </div>352 <div class="img">[IMG: Clear glass vase]</div>353 <div class="details">354 <div class="title">BERÄKNA</div>355 <div class="desc">Vase, white, 6 "</div>356 <div class="price-line">$4<small>.99</small></div>357 <div class="link small">+ Options</div>358 </div>359 </div>360 </div>361 362 <!-- Bottom navigation -->363 <div class="bottom-nav">364 <div class="nav-item">365 <svg width="56" height="56" viewBox="0 0 24 24" fill="none">366 <path d="M3 10l9-7 9 7v9a2 2 0 0 1-2 2h-3v-7H8v7H5a2 2 0 0 1-2-2v-9z" stroke="#777" stroke-width="2" fill="none"/>367 </svg>368 </div>369 <div class="nav-item">370 <svg width="56" height="56" viewBox="0 0 24 24" fill="none">371 <circle cx="11" cy="11" r="7" stroke="#111" stroke-width="2"/>372 <path d="M21 21l-4.3-4.3" stroke="#111" stroke-width="2" stroke-linecap="round"/>373 </svg>374 </div>375 <div class="nav-item">376 <svg width="56" height="56" viewBox="0 0 24 24" fill="none">377 <rect x="3" y="3" width="7" height="7" stroke="#777" stroke-width="2"/>378 <rect x="14" y="3" width="7" height="7" stroke="#777" stroke-width="2"/>379 <rect x="3" y="14" width="7" height="7" stroke="#777" stroke-width="2"/>380 <rect x="14" y="14" width="7" height="7" stroke="#777" stroke-width="2"/>381 </svg>382 </div>383 <div class="nav-item">384 <svg width="56" height="56" viewBox="0 0 24 24" fill="none">385 <path d="M12 21s-6-4.35-8.5-7.3C1.5 11.5 3 8 6.5 8c2 0 3.1 1 3.5 2 0.4-1 1.5-2 3.5-2 3.5 0 5 3.5 3 5.7C18 16.7 12 21 12 21z" stroke="#777" stroke-width="2" fill="none"/>386 </svg>387 </div>388 <div class="nav-item" style="position: relative;">389 <svg width="56" height="56" viewBox="0 0 24 24" fill="none">390 <path d="M6 6h14l-2 10H8L6 6z" stroke="#777" stroke-width="2"/>391 <circle cx="9" cy="20" r="1.5" fill="#777"/>392 <circle cx="18" cy="20" r="1.5" fill="#777"/>393 </svg>394 </div>395 </div>396 <div class="badge-dot">1</div>397</div>398</body>399</html>