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>Women • Soccer • Cleats</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }9 #render-target {10 width: 1080px; height: 2400px;11 position: relative; overflow: hidden;12 background: #ffffff;13 }14 15 /* Top status bar */16 .status-bar {17 height: 80px;18 display: flex;19 align-items: center;20 justify-content: space-between;21 padding: 0 32px;22 color: #5a5a5a;23 font-size: 36px;24 }25 .status-icons {26 display: flex; gap: 20px; align-items: center;27 }28 .status-dot { width: 26px; height: 26px; background:#c4c4c4; border-radius: 6px; }29 30 /* Header */31 .header {32 border-bottom: 1px solid #ececec;33 padding: 20px 24px 12px 24px;34 }35 .header-row {36 display: flex; align-items: center; justify-content: space-between;37 }38 .title {39 font-weight: 700;40 font-size: 40px;41 letter-spacing: 4px;42 text-transform: uppercase;43 color: #111;44 }45 .results {46 text-align: center;47 color: #777;48 font-size: 30px;49 margin-top: 8px;50 padding-bottom: 8px;51 }52 .icon-btn { width: 72px; height: 72px; display: flex; align-items: center; justify-content: center; }53 54 /* Filters */55 .filters {56 display: flex; align-items: center; gap: 24px;57 padding: 24px;58 border-top: 1px solid #efefef;59 border-bottom: 1px solid #efefef;60 }61 .filter-square {62 width: 84px; height: 84px; border: 2px solid #bbb; border-radius: 10px;63 display: flex; align-items: center; justify-content: center;64 }65 .pill {66 height: 72px; padding: 0 28px; border: 2px solid #d3d3d3; border-radius: 12px;67 color: #777; font-weight: 700; letter-spacing: 2px; font-size: 26px;68 display: inline-flex; align-items: center;69 background: #fff;70 }71 72 /* Grid */73 .grid {74 display: grid;75 grid-template-columns: 1fr 1fr;76 column-gap: 0;77 row-gap: 0;78 }79 .card {80 background: #eef1f4;81 border-right: 1px solid #dedede;82 border-bottom: 1px solid #dedede;83 }84 .card:nth-child(2n) { border-right: none; }85 .image-wrap { position: relative; }86 .img-placeholder {87 width: 100%; height: 420px;88 background: #E0E0E0;89 border: 1px solid #BDBDBD;90 color: #757575;91 display: flex; align-items: center; justify-content: center;92 font-size: 28px;93 }94 .heart {95 position: absolute; right: 24px; top: 24px; width: 60px; height: 60px;96 background: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center;97 box-shadow: 0 1px 0 rgba(0,0,0,0.06);98 }99 .details {100 padding: 20px 24px 28px 24px;101 }102 .badge-row { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }103 .badge {104 background: #ffffff; border: 1px solid #d9d9d9; font-weight: 700;105 font-size: 24px; color: #111; padding: 8px 12px; border-radius: 4px;106 }107 .price {108 background: #ffffff; border: 1px solid #d9d9d9; font-weight: 700;109 font-size: 28px; color: #111; padding: 10px 14px; border-radius: 6px;110 }111 .title-line {112 font-size: 34px; color: #111; font-weight: 800; line-height: 1.25; margin-top: 16px;113 }114 .subtitle {115 color: #555; font-size: 28px; margin-top: 12px;116 }117 .variant {118 float: right; display: flex; align-items: center; gap: 8px; font-size: 28px; color: #555; margin-top: -36px;119 }120 .dot { width: 16px; height: 16px; border-radius: 50%; display: inline-block; }121 .dot.red { background: #ea4335; }122 .dot.blue { background: #4285f4; }123 .dot.yellow { background: #fbbc05; }124 .dot.green { background: #34a853; }125 126 /* Bottom Nav */127 .bottom-nav {128 position: absolute; left: 0; right: 0; bottom: 0;129 height: 150px; background: #ffffff; border-top: 1px solid #e5e5e5;130 display: flex; align-items: center; justify-content: space-around;131 padding: 0 24px;132 }133 .nav-item { width: 100px; height: 100px; display: flex; align-items: center; justify-content: center; position: relative; }134 .badge-num {135 position: absolute; bottom: 8px; right: 8px; background: #eaeaea; border: 1px solid #cfcfcf;136 color: #333; font-size: 24px; padding: 2px 10px; border-radius: 6px;137 }138 .home-indicator {139 position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%);140 width: 360px; height: 12px; background: #dcdcdc; border-radius: 6px;141 }142</style>143</head>144<body>145<div id="render-target">146 147 <!-- Simulated status bar -->148 <div class="status-bar">149 <div>3:17</div>150 <div class="status-icons">151 <div class="status-dot"></div>152 <div class="status-dot" style="width:34px;"></div>153 <div class="status-dot" style="background:#9c9c9c;"></div>154 </div>155 </div>156 157 <!-- Header -->158 <div class="header">159 <div class="header-row">160 <div class="icon-btn">161 <svg width="48" height="48" viewBox="0 0 48 48">162 <path d="M30 10 L14 24 L30 38" stroke="#000" stroke-width="4" fill="none" stroke-linecap="round" stroke-linejoin="round"/>163 </svg>164 </div>165 <div class="title">WOMEN • SOCCER • CLEATS</div>166 <div class="icon-btn">167 <svg width="48" height="48" viewBox="0 0 48 48">168 <circle cx="20" cy="20" r="12" stroke="#000" stroke-width="4" fill="none"></circle>169 <line x1="30" y1="30" x2="42" y2="42" stroke="#000" stroke-width="4" stroke-linecap="round"></line>170 </svg>171 </div>172 </div>173 <div class="results">93 RESULTS</div>174 </div>175 176 <!-- Filters -->177 <div class="filters">178 <div class="filter-square">179 <svg width="42" height="42" viewBox="0 0 42 42">180 <line x1="6" y1="10" x2="36" y2="10" stroke="#555" stroke-width="3" />181 <line x1="12" y1="21" x2="36" y2="21" stroke="#555" stroke-width="3" />182 <line x1="18" y1="32" x2="36" y2="32" stroke="#555" stroke-width="3" />183 </svg>184 </div>185 <div class="pill">PRIMEKNIT</div>186 <div class="pill">BOUNCE</div>187 <div class="pill">LIGHTSTRIKE</div>188 </div>189 190 <!-- Product Grid -->191 <div class="grid">192 193 <!-- Card 1 -->194 <div class="card">195 <div class="image-wrap">196 <div class="img-placeholder">[IMG: Predator Accuracy+ Artificial Grass Cleats]</div>197 <div class="heart">198 <svg width="34" height="34" viewBox="0 0 24 24">199 <path d="M12 20s-7-4.6-7-9a4.2 4.2 0 0 1 7-2.8A4.2 4.2 0 0 1 19 11c0 4.4-7 9-7 9z" fill="none" stroke="#333" stroke-width="1.8"/>200 </svg>201 </div>202 </div>203 <div class="details">204 <div class="badge-row">205 <div class="badge">NEW</div>206 <div class="price">$300.00</div>207 </div>208 <div class="title-line">Predator Accuracy+ Artificial Grass Cleats</div>209 <div class="subtitle">Performance</div>210 <div class="variant">211 +1212 <span class="dot blue"></span><span class="dot red"></span><span class="dot yellow"></span><span class="dot green"></span>213 </div>214 </div>215 </div>216 217 <!-- Card 2 -->218 <div class="card">219 <div class="image-wrap">220 <div class="img-placeholder">[IMG: Predator Accuracy+ FG Cleats]</div>221 <div class="heart">222 <svg width="34" height="34" viewBox="0 0 24 24">223 <path d="M12 20s-7-4.6-7-9a4.2 4.2 0 0 1 7-2.8A4.2 4.2 0 0 1 19 11c0 4.4-7 9-7 9z" fill="none" stroke="#333" stroke-width="1.8"/>224 </svg>225 </div>226 </div>227 <div class="details">228 <div class="badge-row">229 <div class="badge">NEW</div>230 <div class="price">$300.00</div>231 </div>232 <div class="title-line" style="text-transform: uppercase;">Predator Accuracy+ FG</div>233 <div class="subtitle">Performance</div>234 <div class="variant">235 +3236 <span class="dot blue"></span><span class="dot red"></span><span class="dot yellow"></span><span class="dot green"></span>237 </div>238 </div>239 </div>240 241 <!-- Card 3 -->242 <div class="card">243 <div class="image-wrap">244 <div class="img-placeholder">[IMG: X CRAZYFAST+ FG Cleats]</div>245 <div class="heart">246 <svg width="34" height="34" viewBox="0 0 24 24">247 <path d="M12 20s-7-4.6-7-9a4.2 4.2 0 0 1 7-2.8A4.2 4.2 0 0 1 19 11c0 4.4-7 9-7 9z" fill="none" stroke="#333" stroke-width="1.8"/>248 </svg>249 </div>250 </div>251 <div class="details">252 <div class="badge-row">253 <div class="badge" style="letter-spacing:2px;">BEST SELLER</div>254 <div class="price">$300.00</div>255 </div>256 <div class="title-line">X CRAZYFAST+ FG</div>257 <div class="subtitle">Performance</div>258 </div>259 </div>260 261 <!-- Card 4 -->262 <div class="card">263 <div class="image-wrap">264 <div class="img-placeholder">[IMG: Copa Pure II+ Firm Ground Cleats]</div>265 <div class="heart">266 <svg width="34" height="34" viewBox="0 0 24 24">267 <path d="M12 20s-7-4.6-7-9a4.2 4.2 0 0 1 7-2.8A4.2 4.2 0 0 1 19 11c0 4.4-7 9-7 9z" fill="none" stroke="#333" stroke-width="1.8"/>268 </svg>269 </div>270 </div>271 <div class="details">272 <div class="badge-row">273 <div class="badge">NEW</div>274 <div class="price">$280.00</div>275 </div>276 <div class="title-line">Copa Pure II+ Firm Ground Cleats</div>277 <div class="subtitle">Performance</div>278 <div class="variant">279 +2280 <span class="dot blue"></span><span class="dot red"></span><span class="dot yellow"></span><span class="dot green"></span>281 </div>282 </div>283 </div>284 285 </div>286 287 <!-- Bottom navigation -->288 <div class="bottom-nav">289 <div class="nav-item">290 <svg width="44" height="44" viewBox="0 0 44 44">291 <path d="M12 30c0-8 8-10 10-18 3 6 8 8 8 14 0 4-3 8-8 8s-10-2-10-4z" fill="none" stroke="#222" stroke-width="2"/>292 </svg>293 </div>294 <div class="nav-item">295 <svg width="52" height="52" viewBox="0 0 48 48">296 <circle cx="20" cy="20" r="12" stroke="#222" stroke-width="4" fill="none"></circle>297 <line x1="30" y1="30" x2="42" y2="42" stroke="#222" stroke-width="4" stroke-linecap="round"></line>298 </svg>299 </div>300 <div class="nav-item">301 <svg width="50" height="50" viewBox="0 0 24 24">302 <path d="M12 20s-7-4.6-7-9a4.2 4.2 0 0 1 7-2.8A4.2 4.2 0 0 1 19 11c0 4.4-7 9-7 9z" fill="none" stroke="#222" stroke-width="2"/>303 </svg>304 <div class="badge-num">1</div>305 </div>306 <div class="nav-item">307 <svg width="48" height="48" viewBox="0 0 48 48">308 <rect x="6" y="6" width="16" height="16" stroke="#222" stroke-width="3" fill="none"></rect>309 <rect x="26" y="12" width="16" height="16" stroke="#222" stroke-width="3" fill="none"></rect>310 </svg>311 <div class="badge-num">4</div>312 </div>313 <div class="nav-item">314 <svg width="52" height="52" viewBox="0 0 48 48">315 <circle cx="24" cy="24" r="16" stroke="#222" stroke-width="3" fill="none"></circle>316 <circle cx="24" cy="24" r="6" fill="#222"></circle>317 </svg>318 </div>319 </div>320 <div class="home-indicator"></div>321 322</div>323</body>324</html>