GD-ML/AndroidCode
13.4k
1<html lang="en">2<head>3<meta charset="UTF-8">4<title>PUMA Slides - Product Grid</title>5<meta name="viewport" content="width=1080, initial-scale=1.0">6<style>7 body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }8 #render-target {9 width: 1080px; height: 2400px; position: relative; overflow: hidden;10 background: #ffffff; color: #111;11 }12 13 /* Status bar */14 .status-bar {15 height: 92px;16 padding: 0 36px;17 display: flex; align-items: center; justify-content: space-between;18 font-weight: 600; font-size: 32px;19 }20 .status-icons { display: flex; gap: 18px; }21 .dot {22 width: 26px; height: 26px; border-radius: 50%; background: #3A3A3A;23 opacity: .7;24 }25 .sys-icons { display: flex; gap: 22px; align-items: center; }26 .sys-icons .icon-cell { width: 28px; height: 28px; background: #1f1f1f; border-radius: 6px; opacity: .85; }27 28 /* Top app bar */29 .app-bar {30 height: 100px; padding: 0 36px;31 display: flex; align-items: center; justify-content: space-between;32 }33 .left-group, .right-group { display: flex; align-items: center; gap: 26px; }34 .icon-btn {35 width: 64px; height: 64px; border-radius: 14px;36 display: flex; align-items: center; justify-content: center;37 background: #f4f4f4; border: 1px solid #e0e0e0;38 }39 .icon-btn svg { width: 34px; height: 34px; stroke: #111; }40 .cart-badge {41 position: absolute; top: -10px; right: -10px;42 background: #111; color: #fff; font-size: 28px; font-weight: 700;43 width: 42px; height: 42px; border-radius: 21px; display: flex; align-items: center; justify-content: center;44 }45 46 /* Title and sort */47 .title-row {48 padding: 10px 36px 12px 36px;49 display: flex; align-items: center; justify-content: space-between;50 }51 .title-row .title { font-size: 44px; font-weight: 800; letter-spacing: .5px; }52 .title-row .sort { font-size: 36px; font-weight: 700; color: #111; display: flex; align-items: center; gap: 16px; }53 .sort svg { width: 30px; height: 30px; stroke: #111; }54 55 /* Product grid */56 .content {57 padding: 18px 36px 0 36px;58 height: 1900px;59 overflow: hidden;60 }61 .grid {62 display: grid;63 grid-template-columns: 1fr 1fr;64 gap: 28px 28px;65 }66 .card {67 border-radius: 18px;68 overflow: visible;69 }70 .img-wrap {71 position: relative;72 width: 100%; height: 440px;73 border-radius: 18px;74 background: #E0E0E0; border: 1px solid #BDBDBD;75 display: flex; align-items: center; justify-content: center; color: #757575; font-size: 28px; text-align: center; padding: 16px;76 }77 .badge-new {78 position: absolute; top: 18px; left: 18px;79 background: #111; color: #fff; font-weight: 800; font-size: 28px; padding: 10px 16px; border-radius: 10px;80 }81 .heart {82 position: absolute; top: 18px; right: 18px; width: 52px; height: 52px;83 border-radius: 50%; background: #fff; border: 2px solid #e5e5e5;84 display: flex; align-items: center; justify-content: center;85 }86 .heart svg { width: 28px; height: 28px; fill: none; stroke: #111; stroke-width: 2.2; }87 88 .colors-row {89 display: flex; align-items: center; gap: 14px;90 font-size: 32px; color: #222; margin-top: 22px;91 }92 .chev {93 width: 26px; height: 26px;94 }95 96 .title-price {97 margin-top: 8px;98 }99 .prod-title { font-size: 40px; font-weight: 800; }100 .price { font-size: 40px; font-weight: 800; margin-top: 12px; }101 .promo {102 margin-top: 16px; font-size: 34px; line-height: 1.38; color: #8A3A27; font-weight: 700;103 }104 105 /* Bottom navigation */106 .bottom-nav {107 position: absolute; left: 0; bottom: 0; width: 100%;108 height: 210px; background: #fff; border-top: 1px solid #e6e6e6;109 display: flex; align-items: center; justify-content: space-around;110 }111 .nav-item {112 display: flex; flex-direction: column; align-items: center; gap: 14px; color: #777; font-size: 32px; font-weight: 800;113 }114 .nav-item .nav-icon {115 width: 64px; height: 64px; border-radius: 14px; border: 1px solid #dcdcdc; display: flex; align-items: center; justify-content: center; background: #f7f7f7;116 }117 .nav-item.active { color: #111; }118 .nav-item.active .nav-icon { background: #111; border-color: #111; }119 .nav-item.active .nav-icon svg { stroke: #fff; }120 .nav-item .nav-icon svg { width: 36px; height: 36px; stroke: #111; }121 122 /* Small helper colors for selected hearts etc */123 .muted { color: #666; }124</style>125</head>126<body>127<div id="render-target">128 129 <!-- Status bar -->130 <div class="status-bar">131 <div style="display:flex; align-items:center; gap:28px;">132 <div>10:17</div>133 <div class="status-icons">134 <div class="dot"></div>135 <div class="dot"></div>136 <div class="dot"></div>137 <div class="dot" style="opacity:.5;"></div>138 </div>139 </div>140 <div class="sys-icons">141 <div class="icon-cell"></div>142 <div class="icon-cell"></div>143 <div class="icon-cell"></div>144 </div>145 </div>146 147 <!-- App bar -->148 <div class="app-bar">149 <div class="left-group">150 <div class="icon-btn" title="Back">151 <svg viewBox="0 0 24 24" fill="none">152 <path d="M15 6l-6 6 6 6" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>153 </svg>154 </div>155 </div>156 <div class="right-group">157 <div class="icon-btn" title="Filters">158 <svg viewBox="0 0 24 24" fill="none">159 <path d="M4 7h16M8 12h8M10 17h4" stroke-width="2.5" stroke-linecap="round"/>160 </svg>161 </div>162 <div class="icon-btn" style="position:relative;" title="Cart">163 <div class="cart-badge">1</div>164 <svg viewBox="0 0 24 24" fill="none">165 <path d="M6 6h15l-2 9H7L6 6zM7 6l-2-2H3" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/>166 </svg>167 </div>168 <div class="icon-btn" title="Search">169 <svg viewBox="0 0 24 24" fill="none">170 <circle cx="11" cy="11" r="7" stroke-width="2.2"/>171 <path d="M20 20l-4-4" stroke-width="2.2" stroke-linecap="round"/>172 </svg>173 </div>174 </div>175 </div>176 177 <!-- Title and sort -->178 <div class="title-row">179 <div class="title">44 PRODUCTS</div>180 <div class="sort">SORT181 <svg viewBox="0 0 24 24" fill="none">182 <path d="M10 4l-3 3 3 3M14 20l3-3-3-3" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/>183 </svg>184 </div>185 </div>186 187 <!-- Content grid -->188 <div class="content">189 <div class="grid">190 191 <!-- Card 1 -->192 <div class="card">193 <div class="img-wrap">194 <div class="badge-new">NEW</div>195 <div class="heart">196 <svg viewBox="0 0 24 24">197 <path d="M12 21s-7-5.5-7-10.1C5 7 7.1 5 9.5 5c1.6 0 2.7.8 3.5 2 .8-1.2 1.9-2 3.5-2C18.9 5 21 7 21 10.9 21 15.5 12 21 12 21z"/>198 </svg>199 </div>200 <div>[IMG: Shibui Cat Slides - light sage foam]</div>201 </div>202 203 <div class="colors-row">204 <div>3 Colors</div>205 <svg class="chev" viewBox="0 0 24 24" fill="none">206 <path d="M6 9l6 6 6-6" stroke="#111" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/>207 </svg>208 </div>209 210 <div class="title-price">211 <div class="prod-title">Shibui Cat Slides</div>212 <div class="price">$45.00</div>213 <div class="promo">214 TAKE 40% OFF CLOTHING WHEN YOU BUY ANY SHOES. EXCLUSIONS APPLY. PRICE REFLECTED IN CART.215 </div>216 </div>217 </div>218 219 <!-- Card 2 -->220 <div class="card">221 <div class="img-wrap">222 <div class="badge-new">NEW</div>223 <div class="heart">224 <svg viewBox="0 0 24 24">225 <path d="M12 21s-7-5.5-7-10.1C5 7 7.1 5 9.5 5c1.6 0 2.7.8 3.5 2 .8-1.2 1.9-2 3.5-2C18.9 5 21 7 21 10.9 21 15.5 12 21 12 21z"/>226 </svg>227 </div>228 <div>[IMG: Softride Slides - white/black strap and outsole view]</div>229 </div>230 231 <div class="colors-row">232 <div>3 Colors</div>233 <svg class="chev" viewBox="0 0 24 24" fill="none">234 <path d="M6 9l6 6 6-6" stroke="#111" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/>235 </svg>236 </div>237 238 <div class="title-price">239 <div class="prod-title">Softride Slides</div>240 <div class="price">$45.00</div>241 <div class="promo">242 TAKE 40% OFF CLOTHING WHEN YOU BUY ANY SHOES. EXCLUSIONS APPLY. PRICE REFLECTED IN CART.243 </div>244 </div>245 </div>246 247 <!-- Card 3 -->248 <div class="card">249 <div class="img-wrap">250 <div class="badge-new">NEW</div>251 <div class="heart">252 <svg viewBox="0 0 24 24">253 <path d="M12 21s-7-5.5-7-10.1C5 7 7.1 5 9.5 5c1.6 0 2.7.8 3.5 2 .8-1.2 1.9-2 3.5-2C18.9 5 21 7 21 10.9 21 15.5 12 21 12 21z"/>254 </svg>255 </div>256 <div>[IMG: PUMA Slides - green strap with white logo, black footbed]</div>257 </div>258 259 <div class="colors-row">260 <div>5 Colors</div>261 <svg class="chev" viewBox="0 0 24 24" fill="none">262 <path d="M6 9l6 6 6-6" stroke="#111" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/>263 </svg>264 </div>265 266 <div class="title-price">267 <div class="prod-title">Leadcat 2.0</div>268 <div class="price">$45.00</div>269 <div class="promo">270 TAKE 40% OFF CLOTHING WHEN YOU BUY ANY SHOES. EXCLUSIONS APPLY. PRICE REFLECTED IN CART.271 </div>272 </div>273 </div>274 275 <!-- Card 4 -->276 <div class="card">277 <div class="img-wrap">278 <div class="heart">279 <svg viewBox="0 0 24 24">280 <path d="M12 21s-7-5.5-7-10.1C5 7 7.1 5 9.5 5c1.6 0 2.7.8 3.5 2 .8-1.2 1.9-2 3.5-2C18.9 5 21 7 21 10.9 21 15.5 12 21 12 21z"/>281 </svg>282 </div>283 <div>[IMG: Shibui Cat Slides - triple black profile]</div>284 </div>285 286 <div class="colors-row">287 <div>3 Colors</div>288 <svg class="chev" viewBox="0 0 24 24" fill="none">289 <path d="M6 9l6 6 6-6" stroke="#111" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/>290 </svg>291 </div>292 293 <div class="title-price">294 <div class="prod-title">Shibui Cat Slides</div>295 <div class="price">$45.00</div>296 </div>297 </div>298 299 </div>300 </div>301 302 <!-- Bottom Navigation -->303 <div class="bottom-nav">304 <div class="nav-item">305 <div class="nav-icon">306 <svg viewBox="0 0 24 24" fill="none">307 <path d="M3 11l9-7 9 7v9H6v-5" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/>308 </svg>309 </div>310 <div>HOME</div>311 </div>312 313 <div class="nav-item">314 <div class="nav-icon">315 <svg viewBox="0 0 24 24" fill="none">316 <path d="M7 4h10v6H7zM4 14h16v6H4z" stroke-width="2.2" stroke-linejoin="round"/>317 </svg>318 </div>319 <div>DROPS</div>320 </div>321 322 <div class="nav-item active">323 <div class="nav-icon">324 <svg viewBox="0 0 24 24" fill="none">325 <path d="M4 6h16l-3 12H7L4 6z" stroke-width="2.2" stroke-linejoin="round"/>326 </svg>327 </div>328 <div>SHOP</div>329 </div>330 331 <div class="nav-item">332 <div class="nav-icon">333 <svg viewBox="0 0 24 24" fill="none">334 <path d="M6 6h15l-2 9H7L6 6zM8 21a1 1 0 100-2 1 1 0 000 2zm9 0a1 1 0 100-2 1 1 0 000 2z" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/>335 </svg>336 </div>337 <div>CART</div>338 </div>339 340 <div class="nav-item">341 <div class="nav-icon">342 <svg viewBox="0 0 24 24" fill="none">343 <circle cx="12" cy="8" r="4" stroke-width="2.2"/>344 <path d="M4 20c1.8-4 6.2-4 8-4s6.2 0 8 4" stroke-width="2.2" stroke-linecap="round"/>345 </svg>346 </div>347 <div>ACCOUNT</div>348 </div>349 </div>350 351</div>352</body>353</html>