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>PUMA Shoes Listing 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 }15 16 /* Top status bar */17 .status-bar {18 height: 90px;19 padding: 20px 32px;20 display: flex;21 align-items: center;22 justify-content: space-between;23 color: #1a1a1a;24 font-weight: 600;25 font-size: 34px;26 }27 .status-icons {28 display: flex;29 gap: 28px;30 align-items: center;31 }32 .status-dot {33 width: 14px; height: 14px; background:#999; border-radius:50%;34 }35 .ico {36 display: inline-flex; align-items: center; justify-content: center;37 }38 .ico svg { width: 40px; height: 40px; stroke: #222; fill: none; stroke-width: 4; }39 40 /* App bar */41 .app-bar {42 height: 120px;43 padding: 0 32px;44 display: flex;45 align-items: center;46 justify-content: space-between;47 }48 .app-actions { display: flex; gap: 32px; }49 .back-btn svg { width: 54px; height: 54px; stroke-width: 6; }50 .top-btn svg { width: 54px; height: 54px; stroke-width: 5; }51 52 /* Page title */53 .page-title {54 padding: 0 32px;55 }56 .page-title h1 {57 margin: 0;58 font-size: 84px;59 letter-spacing: 2px;60 font-weight: 800;61 color: #111;62 }63 .subhead {64 margin-top: 12px;65 font-size: 34px;66 color: #666;67 font-weight: 700;68 }69 70 /* Filters and sort */71 .filters-sort {72 margin-top: 28px;73 padding: 0 32px;74 display: flex;75 align-items: center;76 justify-content: space-between;77 }78 .chips {79 display: flex;80 gap: 20px;81 flex-wrap: nowrap;82 }83 .chip {84 padding: 18px 34px;85 border-radius: 44px;86 border: 1px solid #D9D9D9;87 font-size: 34px;88 color: #222;89 background: #fff;90 font-weight: 700;91 }92 .chip.active {93 background: #111;94 color: #fff;95 border-color: #111;96 }97 .sort {98 display: flex;99 align-items: center;100 gap: 16px;101 font-size: 36px;102 font-weight: 800;103 color: #222;104 }105 .sort svg { width: 40px; height: 40px; stroke: #222; stroke-width: 5; }106 107 /* Product grid */108 .grid {109 margin-top: 30px;110 padding: 0 32px 220px;111 display: grid;112 grid-template-columns: 1fr 1fr;113 column-gap: 36px;114 row-gap: 46px;115 }116 .card {117 position: relative;118 background: #fff;119 }120 .badge {121 position: absolute;122 top: 18px; left: 18px;123 background: #111;124 color: #fff;125 font-size: 34px;126 font-weight: 900;127 padding: 10px 18px;128 }129 .heart {130 position: absolute;131 top: 22px; right: 22px;132 width: 64px; height: 64px;133 border-radius: 50%;134 border: 2px solid #C9C9C9;135 display: flex; align-items: center; justify-content: center;136 color: #333; font-size: 42px;137 background: #fff;138 }139 .img {140 width: 100%;141 height: 420px;142 background: #E0E0E0;143 border: 1px solid #BDBDBD;144 display: flex; align-items: center; justify-content: center;145 color: #757575; font-size: 34px; text-align: center; padding: 10px;146 box-sizing: border-box;147 }148 .meta {149 margin-top: 24px;150 font-size: 34px;151 color: #444;152 font-weight: 600;153 }154 .name {155 margin-top: 10px;156 font-size: 42px;157 line-height: 1.2;158 font-weight: 800;159 color: #111;160 }161 .price {162 margin-top: 16px;163 font-size: 42px;164 font-weight: 900;165 color: #111;166 }167 .promo {168 margin-top: 16px;169 font-size: 34px;170 line-height: 1.35;171 color: #A54A2A;172 font-weight: 800;173 }174 175 /* Bottom nav */176 .bottom-nav {177 position: absolute;178 left: 0; right: 0; bottom: 0;179 height: 172px;180 background: #fff;181 border-top: 1px solid #E5E5E5;182 display: flex;183 justify-content: space-around;184 align-items: center;185 }186 .nav-item {187 width: 20%;188 text-align: center;189 color: #8a8a8a;190 font-size: 30px;191 font-weight: 700;192 }193 .nav-item svg { width: 60px; height: 60px; stroke: #8a8a8a; stroke-width: 5; fill: none; }194 .nav-item.active { color: #111; }195 .nav-item.active svg { stroke: #111; }196 .label { margin-top: 8px; }197 198 /* Utility */199 .sr { font-size: 0; }200</style>201</head>202<body>203<div id="render-target">204 205 <!-- Status bar -->206 <div class="status-bar">207 <div>12:36</div>208 <div class="status-icons">209 <div class="ico">210 <!-- bell -->211 <svg viewBox="0 0 48 48"><path d="M24 6c-6 0-10 5-10 11v7l-4 5h28l-4-5v-7c0-6-4-11-10-11z"/><path d="M18 36c1 3 3 5 6 5s5-2 6-5"/></svg>212 </div>213 <div class="ico">214 <!-- airplane (notification style) -->215 <svg viewBox="0 0 48 48"><path d="M6 28l36-12-12 12 12 12-36-12z"/></svg>216 </div>217 <div class="status-dot"></div>218 <div class="ico">219 <!-- wifi -->220 <svg viewBox="0 0 48 48"><path d="M6 18c9-6 27-6 36 0"/><path d="M12 24c6-4 18-4 24 0"/><path d="M18 30c3-2 9-2 12 0"/><circle cx="24" cy="36" r="2" /></svg>221 </div>222 <div class="ico">223 <!-- battery -->224 <svg viewBox="0 0 48 48"><rect x="6" y="12" width="34" height="24" rx="4" /><rect x="40" y="18" width="4" height="12" /></svg>225 </div>226 </div>227 </div>228 229 <!-- App bar -->230 <div class="app-bar">231 <div class="back-btn ico">232 <svg viewBox="0 0 48 48"><path d="M30 10 L16 24 L30 38" /></svg>233 </div>234 <div class="app-actions">235 <div class="top-btn ico">236 <!-- filter/sliders -->237 <svg viewBox="0 0 48 48">238 <path d="M10 12h28M18 12v12M10 24h28M30 24v12M10 36h28"/>239 </svg>240 </div>241 <div class="top-btn ico">242 <!-- search -->243 <svg viewBox="0 0 48 48">244 <circle cx="20" cy="20" r="12"/>245 <path d="M32 32l10 10"/>246 </svg>247 </div>248 </div>249 </div>250 251 <!-- Title -->252 <div class="page-title">253 <h1>SHOES</h1>254 <div class="subhead">542 PRODUCTS</div>255 </div>256 257 <!-- Filters and sort -->258 <div class="filters-sort">259 <div class="chips">260 <div class="chip active">ALL</div>261 <div class="chip">RUNNING</div>262 <div class="chip">MOTORSPORT</div>263 <div class="chip">BASKET</div>264 </div>265 <div class="sort">266 <div>SORT</div>267 <svg viewBox="0 0 48 48">268 <path d="M16 10v28M16 10l-6 6M16 38l-6-6"/>269 <path d="M32 10v28M32 10l6 6M32 38l6-6"/>270 </svg>271 </div>272 </div>273 274 <!-- Product grid -->275 <div class="grid">276 277 <!-- Card 1 -->278 <div class="card">279 <div class="badge">NEW</div>280 <div class="heart">♡</div>281 <div class="img">[IMG: White/Gray PUMA shoe with Neon Green sole]</div>282 <div class="meta">1 Color</div>283 <div class="name">PUMA x LAMELO BALL<br>MB.02 Lo LaMel-O Me...</div>284 <div class="price">$125.00</div>285 <div class="promo">TAKE 40% OFF CLOTHING WHEN YOU BUY ANY SHOES. EXCLUSIONS APPLY. PRICE REFLECTED IN CART.</div>286 </div>287 288 <!-- Card 2 -->289 <div class="card">290 <div class="badge">NEW</div>291 <div class="heart">♡</div>292 <div class="img">[IMG: Orange/Blue PUMA x Thundercats sneaker]</div>293 <div class="meta">1 Color</div>294 <div class="name">PUMA x THUNDERCATS<br>RS-X T3CH Thunderca...</div>295 <div class="price">$120.00</div>296 <div class="promo">TAKE 40% OFF CLOTHING WHEN YOU BUY ANY SHOES. EXCLUSIONS APPLY. PRICE REFLECTED IN CART.</div>297 </div>298 299 <!-- Card 3 -->300 <div class="card">301 <div class="badge">NEW</div>302 <div class="heart">♡</div>303 <div class="img">[IMG: Blue/White PUMA x Thundercats sneaker]</div>304 <div class="meta">1 Color</div>305 <div class="name">PUMA x THUNDERCATS<br>RS-X T3CH (Blue)</div>306 <div class="price">$120.00</div>307 <div class="promo">TAKE 40% OFF CLOTHING WHEN YOU BUY ANY SHOES. EXCLUSIONS APPLY. PRICE REFLECTED IN CART.</div>308 </div>309 310 <!-- Card 4 -->311 <div class="card">312 <div class="badge">NEW</div>313 <div class="heart">♡</div>314 <div class="img">[IMG: Red/Blue PUMA sneaker]</div>315 <div class="meta">1 Color</div>316 <div class="name">PUMA RS-X T3CH<br>Thundercats (Red/Blue)</div>317 <div class="price">$120.00</div>318 <div class="promo">TAKE 40% OFF CLOTHING WHEN YOU BUY ANY SHOES. EXCLUSIONS APPLY. PRICE REFLECTED IN CART.</div>319 </div>320 321 </div>322 323 <!-- Bottom navigation -->324 <div class="bottom-nav">325 <div class="nav-item">326 <div class="ico">327 <svg viewBox="0 0 48 48"><path d="M6 24l18-12 18 12v14H30V26H18v12H6z"/></svg>328 </div>329 <div class="label">HOME</div>330 </div>331 <div class="nav-item">332 <div class="ico">333 <svg viewBox="0 0 48 48"><rect x="8" y="10" width="32" height="28" rx="4"/><path d="M8 18h32"/><path d="M16 26h8"/><path d="M28 26h8"/></svg>334 </div>335 <div class="label">DROPS</div>336 </div>337 <div class="nav-item active">338 <div class="ico">339 <svg viewBox="0 0 48 48"><circle cx="20" cy="20" r="12"/><path d="M32 32l12 12"/></svg>340 </div>341 <div class="label">SHOP</div>342 </div>343 <div class="nav-item">344 <div class="ico">345 <svg viewBox="0 0 48 48"><path d="M8 12h6l4 20h18l4-12H18"/><circle cx="18" cy="38" r="3"/><circle cx="34" cy="38" r="3"/></svg>346 </div>347 <div class="label">CART</div>348 </div>349 <div class="nav-item">350 <div class="ico">351 <svg viewBox="0 0 48 48"><circle cx="24" cy="16" r="8"/><path d="M8 40c4-10 28-10 32 0"/></svg>352 </div>353 <div class="label">ACCOUNT</div>354 </div>355 </div>356 357</div>358</body>359</html>