GD-ML/AndroidCode
13.4k
1<html lang="en">2<head>3<meta charset="UTF-8">4<title>FENTY x PUMA Listing</title>5<style>6 body { margin:0; padding:0; background:transparent; }7 #render-target {8 width:1080px; height:2400px; position:relative; overflow:hidden;9 background:#ffffff; font-family: Arial, Helvetica, sans-serif; color:#111;10 }11 /* Status bar */12 .status-bar {13 height:72px; padding:0 24px; display:flex; align-items:center; justify-content:space-between;14 font-weight:600; font-size:34px; color:#333;15 }16 .status-icons { display:flex; gap:18px; align-items:center; }17 .status-circle { width:20px; height:20px; border-radius:50%; background:#222; display:inline-block; }18 .status-shape { width:28px; height:18px; border:2px solid #222; border-radius:3px; display:inline-block; }19 /* Top app bar */20 .app-bar {21 display:flex; align-items:center; justify-content:space-between;22 padding:20px 32px; height:84px;23 }24 .app-left { display:flex; align-items:center; gap:18px; }25 .icon-btn { width:56px; height:56px; display:flex; align-items:center; justify-content:center; border-radius:12px; }26 .app-right { display:flex; align-items:center; gap:24px; }27 .title {28 font-size:64px; font-weight:800; letter-spacing:1px; padding:0 32px; margin-top:10px;29 }30 .sub-head {31 padding:6px 32px; display:flex; justify-content:space-between; align-items:center; color:#444;32 }33 .products-count { font-size:34px; font-weight:700; }34 .sort-row { display:flex; align-items:center; gap:14px; font-size:34px; font-weight:700; }35 /* Grid */36 .grid {37 padding:10px 32px 0 32px;38 display:flex; flex-wrap:wrap; gap:0; justify-content:space-between;39 }40 .product-card {41 width:496px; margin-bottom:42px; position:relative;42 }43 .img-wrap {44 width:496px; height:420px; background:#E0E0E0; border:1px solid #BDBDBD;45 display:flex; align-items:center; justify-content:center; color:#757575; font-weight:700;46 position:relative; border-radius:6px;47 }48 .fav {49 position:absolute; right:18px; top:18px; width:56px; height:56px; display:flex; align-items:center; justify-content:center;50 background:rgba(255,255,255,0.9); border-radius:28px; border:1px solid #ddd;51 }52 .tag {53 position:absolute; left:14px; bottom:14px; background:#111; color:#fff; font-size:28px; font-weight:800;54 padding:12px 18px; border-radius:4px; letter-spacing:0.5px;55 }56 .colors {57 margin-top:14px; font-size:30px; color:#666; display:flex; align-items:center; gap:12px;58 }59 .prod-title {60 margin-top:10px; font-size:38px; font-weight:800; line-height:1.15;61 }62 .price {63 margin-top:10px; font-size:40px; font-weight:800;64 }65 /* bottom nav */66 .bottom-nav {67 position:absolute; bottom:0; left:0; right:0; height:150px; border-top:1px solid #e5e5e5; background:#fff;68 display:flex; align-items:center; justify-content:space-around;69 }70 .nav-item { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; color:#666; font-size:28px; }71 .nav-item.active { color:#111; font-weight:800; }72 .badge {73 position:absolute; right:60px; bottom:96px;74 background:#222; color:#fff; border-radius:20px; font-size:28px; font-weight:800; padding:4px 12px;75 }76 /* small helper icons */77 svg { display:block; }78</style>79</head>80<body>81<div id="render-target">82 83 <!-- Status bar simulation -->84 <div class="status-bar">85 <div>8:21</div>86 <div class="status-icons">87 <div class="status-circle"></div>88 <div class="status-circle"></div>89 <div class="status-circle"></div>90 <div class="status-circle" style="background:#999;"></div>91 <div class="status-shape"></div>92 </div>93 </div>94 95 <!-- App bar -->96 <div class="app-bar">97 <div class="app-left">98 <div class="icon-btn">99 <svg width="36" height="36" viewBox="0 0 24 24">100 <path d="M15 18l-6-6 6-6" fill="none" stroke="#111" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>101 </svg>102 </div>103 </div>104 <div class="app-right">105 <div class="icon-btn">106 <!-- Filter / sliders -->107 <svg width="36" height="36" viewBox="0 0 24 24">108 <path d="M4 6h16M8 6v6M4 12h10M14 12v6M4 18h16" stroke="#111" stroke-width="2" fill="none" stroke-linecap="round"/>109 </svg>110 </div>111 <div class="icon-btn">112 <!-- Search -->113 <svg width="36" height="36" viewBox="0 0 24 24">114 <circle cx="11" cy="11" r="7" stroke="#111" stroke-width="2" fill="none"/>115 <path d="M21 21l-4.3-4.3" stroke="#111" stroke-width="2" fill="none" stroke-linecap="round"/>116 </svg>117 </div>118 </div>119 </div>120 121 <div class="title">FENTY X PUMA</div>122 123 <div class="sub-head">124 <div class="products-count">15 PRODUCTS</div>125 <div class="sort-row">126 <div>SORT</div>127 <svg width="34" height="34" viewBox="0 0 24 24">128 <path d="M8 4l-4 4h8zM16 20l4-4h-8z" fill="#111"/>129 </svg>130 </div>131 </div>132 133 <!-- Grid -->134 <div class="grid">135 136 <!-- Card 1 -->137 <div class="product-card">138 <div class="img-wrap">139 [IMG: Fenty Creeper Sneaker - Blue]140 <div class="fav">141 <svg width="28" height="28" viewBox="0 0 24 24">142 <path d="M12 21s-6-4.35-8.5-7.05C1.5 11.2 2.7 7.5 6.2 7.5c2 0 3.2 1.3 3.8 2.4.6-1.1 1.8-2.4 3.8-2.4 3.5 0 4.7 3.7 2.7 6.45C18 16.65 12 21 12 21z" fill="none" stroke="#111" stroke-width="1.8"/>143 </svg>144 </div>145 <div class="tag">COMING SOON</div>146 </div>147 <div class="colors">148 <div>3 Colors</div>149 <svg width="22" height="22" viewBox="0 0 24 24"><path d="M6 9l6 6 6-6" stroke="#777" stroke-width="2" fill="none" stroke-linecap="round"/></svg>150 </div>151 <div class="prod-title">FENTY x PUMA Creeper Phatty Unisex Sneakers</div>152 <div class="price">£120.00</div>153 </div>154 155 <!-- Card 2 -->156 <div class="product-card">157 <div class="img-wrap">158 [IMG: Fenty Creeper Sneaker - White/Pink]159 <div class="fav">160 <svg width="28" height="28" viewBox="0 0 24 24">161 <path d="M12 21s-6-4.35-8.5-7.05C1.5 11.2 2.7 7.5 6.2 7.5c2 0 3.2 1.3 3.8 2.4.6-1.1 1.8-2.4 3.8-2.4 3.5 0 4.7 3.7 2.7 6.45C18 16.65 12 21 12 21z" fill="none" stroke="#111" stroke-width="1.8"/>162 </svg>163 </div>164 <div class="tag">COMING SOON</div>165 </div>166 <div class="colors">167 <div>3 Colors</div>168 <svg width="22" height="22" viewBox="0 0 24 24"><path d="M6 9l6 6 6-6" stroke="#777" stroke-width="2" fill="none" stroke-linecap="round"/></svg>169 </div>170 <div class="prod-title">FENTY x PUMA Creeper Phatty Unisex Sneakers</div>171 <div class="price">£120.00</div>172 </div>173 174 <!-- Card 3 -->175 <div class="product-card">176 <div class="img-wrap">177 [IMG: Fenty Creeper Sneaker - Grey]178 <div class="fav">179 <svg width="28" height="28" viewBox="0 0 24 24">180 <path d="M12 21s-6-4.35-8.5-7.05C1.5 11.2 2.7 7.5 6.2 7.5c2 0 3.2 1.3 3.8 2.4.6-1.1 1.8-2.4 3.8-2.4 3.5 0 4.7 3.7 2.7 6.45C18 16.65 12 21 12 21z" fill="none" stroke="#111" stroke-width="1.8"/>181 </svg>182 </div>183 <div class="tag">COMING SOON</div>184 </div>185 <div class="colors">186 <div>3 Colors</div>187 <svg width="22" height="22" viewBox="0 0 24 24"><path d="M6 9l6 6 6-6" stroke="#777" stroke-width="2" fill="none" stroke-linecap="round"/></svg>188 </div>189 <div class="prod-title">FENTY x PUMA Creeper Phatty Unisex Sneakers</div>190 <div class="price">£120.00</div>191 </div>192 193 <!-- Card 4 -->194 <div class="product-card">195 <div class="img-wrap" style="opacity:0.85;">196 [IMG: Fenty Creeper Sneaker - Kids]197 <div class="fav">198 <svg width="28" height="28" viewBox="0 0 24 24">199 <path d="M12 21s-6-4.35-8.5-7.05C1.5 11.2 2.7 7.5 6.2 7.5c2 0 3.2 1.3 3.8 2.4.6-1.1 1.8-2.4 3.8-2.4 3.5 0 4.7 3.7 2.7 6.45C18 16.65 12 21 12 21z" fill="none" stroke="#111" stroke-width="1.8"/>200 </svg>201 </div>202 <div class="tag">COMING SOON</div>203 </div>204 <div class="colors">205 <div>3 Colors</div>206 <svg width="22" height="22" viewBox="0 0 24 24"><path d="M6 9l6 6 6-6" stroke="#777" stroke-width="2" fill="none" stroke-linecap="round"/></svg>207 </div>208 <div class="prod-title">FENTY x PUMA Creeper Phatty Kids' Sneakers</div>209 <div class="price">£70.00</div>210 </div>211 212 <!-- Space to resemble more cards below -->213 <div class="product-card">214 <div class="img-wrap">215 [IMG: Fenty Creeper Sneaker - Black]216 <div class="fav">217 <svg width="28" height="28" viewBox="0 0 24 24">218 <path d="M12 21s-6-4.35-8.5-7.05C1.5 11.2 2.7 7.5 6.2 7.5c2 0 3.2 1.3 3.8 2.4.6-1.1 1.8-2.4 3.8-2.4 3.5 0 4.7 3.7 2.7 6.45C18 16.65 12 21 12 21z" fill="none" stroke="#111" stroke-width="1.8"/>219 </svg>220 </div>221 <div class="tag">COMING SOON</div>222 </div>223 <div class="colors">224 <div>3 Colors</div>225 <svg width="22" height="22" viewBox="0 0 24 24"><path d="M6 9l6 6 6-6" stroke="#777" stroke-width="2" fill="none" stroke-linecap="round"/></svg>226 </div>227 <div class="prod-title">FENTY x PUMA Creeper Phatty Unisex Sneakers</div>228 <div class="price">£120.00</div>229 </div>230 231 <div class="product-card">232 <div class="img-wrap">233 [IMG: Fenty Creeper Sneaker - Green]234 <div class="fav">235 <svg width="28" height="28" viewBox="0 0 24 24">236 <path d="M12 21s-6-4.35-8.5-7.05C1.5 11.2 2.7 7.5 6.2 7.5c2 0 3.2 1.3 3.8 2.4.6-1.1 1.8-2.4 3.8-2.4 3.5 0 4.7 3.7 2.7 6.45C18 16.65 12 21 12 21z" fill="none" stroke="#111" stroke-width="1.8"/>237 </svg>238 </div>239 <div class="tag">COMING SOON</div>240 </div>241 <div class="colors">242 <div>3 Colors</div>243 <svg width="22" height="22" viewBox="0 0 24 24"><path d="M6 9l6 6 6-6" stroke="#777" stroke-width="2" fill="none" stroke-linecap="round"/></svg>244 </div>245 <div class="prod-title">FENTY x PUMA Creeper Phatty Unisex Sneakers</div>246 <div class="price">£120.00</div>247 </div>248 249 </div>250 251 <!-- Bottom navigation -->252 <div class="bottom-nav">253 <div class="nav-item">254 <svg width="46" height="46" viewBox="0 0 24 24">255 <path d="M3 10l9-7 9 7v9H3z" fill="none" stroke="#666" stroke-width="2"/>256 </svg>257 <div>HOME</div>258 </div>259 <div class="nav-item">260 <svg width="46" height="46" viewBox="0 0 24 24">261 <path d="M4 6h16v4H4zM6 14h12v4H6z" fill="none" stroke="#666" stroke-width="2"/>262 </svg>263 <div>DROPS</div>264 </div>265 <div class="nav-item active">266 <svg width="46" height="46" viewBox="0 0 24 24">267 <circle cx="10" cy="10" r="6" stroke="#111" stroke-width="2" fill="none"/>268 <path d="M21 21l-5-5" stroke="#111" stroke-width="2" fill="none" stroke-linecap="round"/>269 </svg>270 <div>SHOP</div>271 </div>272 <div class="nav-item">273 <svg width="46" height="46" viewBox="0 0 24 24">274 <path d="M3 7h18l-2 12H5zM7 7l2-3h6l2 3" stroke="#666" stroke-width="2" fill="none"/>275 </svg>276 <div>CART</div>277 </div>278 <div class="nav-item">279 <svg width="46" height="46" viewBox="0 0 24 24">280 <circle cx="12" cy="8" r="4" stroke="#666" stroke-width="2" fill="none"/>281 <path d="M4 20c2-4 14-4 16 0" stroke="#666" stroke-width="2" fill="none"/>282 </svg>283 <div>ACCOUNT</div>284 </div>285 </div>286 <div class="badge">9</div>287 288</div>289</body>290</html>