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>Chunky Sneakers - Category</title>7<style>8 /* Reset and base */9 html, body { margin:0; padding:0; }10 body { background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif; color:#111; }11 * { box-sizing: border-box; }12 13 /* Render target */14 #render-target {15 width:1080px;16 height:2400px;17 position:relative;18 overflow:hidden;19 background:#ffffff;20 }21 22 /* Status bar */23 .status-bar {24 height:110px;25 background:#D8D8D8;26 display:flex;27 align-items:flex-end;28 padding:0 36px 18px;29 font-size:34px;30 color:#fff;31 letter-spacing:0.5px;32 }33 .status-left { flex:1; }34 .status-right {35 display:flex;36 align-items:center;37 gap:18px;38 }39 .sb-dot { width:12px; height:12px; background:#fff; border-radius:50%; display:inline-block; opacity:.8; }40 41 /* Top app bar */42 .app-bar {43 height:160px;44 padding:0 36px;45 display:flex;46 align-items:center;47 gap:28px;48 border-bottom:1px solid #eee;49 background:#fff;50 }51 .title {52 font-size:56px;53 font-weight:700;54 flex:1;55 }56 .icon-btn { width:72px; height:72px; display:flex; align-items:center; justify-content:center; }57 .icon { width:48px; height:48px; stroke:#111; fill:none; stroke-width:3; }58 59 /* Menus row */60 .filters-row {61 height:120px;62 padding:0 36px;63 display:flex;64 align-items:center;65 justify-content:space-between;66 border-bottom:1px solid #eee;67 }68 .filter-item {69 display:flex;70 align-items:center;71 gap:14px;72 font-weight:700;73 letter-spacing:0.5px;74 }75 .filter-item span { font-size:36px; }76 .chev { width:30px; height:30px; }77 .sliders { width:52px; height:52px; }78 79 /* Sort/Count row */80 .sort-row {81 height:100px;82 padding:0 36px;83 display:flex;84 align-items:center;85 justify-content:space-between;86 color:#333;87 }88 .tabs { display:flex; gap:28px; align-items:center; font-size:34px; }89 .tab { color:#666; }90 .tab.active { color:#e02022; position:relative; }91 .tab.active:after {92 content:"";93 position:absolute; left:0; right:0; bottom:-16px;94 height:4px; background:#e02022;95 }96 .count-and-view { display:flex; align-items:center; gap:24px; font-size:32px; color:#666; }97 .view-ico { display:flex; gap:18px; align-items:center; }98 .square {99 width:38px; height:38px; border:3px solid #999; border-radius:6px;100 }101 .grid { display:grid; grid-template-columns: repeat(2, 16px); grid-gap:8px; }102 .grid div { width:16px; height:16px; border-radius:3px; background:#e02022; }103 104 /* Product grid */105 .products {106 padding:0 36px 120px;107 }108 .grid2 {109 display:grid;110 grid-template-columns: repeat(2, 1fr);111 gap:48px;112 }113 .product-card {114 width:calc(50% - 24px);115 }116 .img-wrap {117 position:relative;118 width:100%;119 height:560px;120 background:#E0E0E0;121 border:1px solid #BDBDBD;122 display:flex;123 align-items:center;124 justify-content:center;125 color:#757575;126 font-size:34px;127 }128 .wish {129 position:absolute;130 right:28px; bottom:28px;131 width:80px; height:80px; border-radius:40px;132 background:#fff; border:2px solid #ddd;133 display:flex; align-items:center; justify-content:center;134 }135 .heart { width:44px; height:44px; stroke:#111; fill:none; stroke-width:3; }136 .badge {137 position:absolute; right:0; bottom:0;138 background:#e02022; color:#fff; font-weight:700;139 padding:16px 18px; border-top-left-radius:10px;140 font-size:32px;141 }142 .p-title {143 margin:28px 0 8px; font-size:40px; font-weight:700;144 }145 .p-price { font-size:36px; margin-bottom:18px; }146 .colors { display:flex; gap:18px; }147 .dot {148 width:26px; height:26px; border-radius:50%;149 border:3px solid #bbb;150 }151 152 /* Home indicator */153 .home-indicator {154 position:absolute; bottom:18px; left:50%;155 transform:translateX(-50%);156 width:420px; height:12px; background:#111; border-radius:12px; opacity:.85;157 }158</style>159</head>160<body>161<div id="render-target">162 163 <!-- Status bar -->164 <div class="status-bar">165 <div class="status-left">4:20 • • •</div>166 <div class="status-right">167 <span class="sb-dot"></span><span class="sb-dot"></span><span class="sb-dot"></span>168 <svg width="44" height="28"><rect x="2" y="6" width="30" height="16" rx="4" fill="none" stroke="#fff" stroke-width="3"/><rect x="34" y="10" width="6" height="8" fill="#fff"/></svg>169 </div>170 </div>171 172 <!-- App bar -->173 <div class="app-bar">174 <!-- Menu icon with dot -->175 <div class="icon-btn">176 <svg class="icon" viewBox="0 0 24 24">177 <circle cx="4" cy="4" r="3" fill="#e02022"></circle>178 <line x1="2" y1="10" x2="22" y2="10"></line>179 <line x1="2" y1="16" x2="22" y2="16"></line>180 <line x1="2" y1="22" x2="22" y2="22"></line>181 </svg>182 </div>183 <div class="title">Chunky sneakers</div>184 <!-- Search -->185 <div class="icon-btn">186 <svg class="icon" viewBox="0 0 24 24">187 <circle cx="10" cy="10" r="7"></circle>188 <line x1="16" y1="16" x2="22" y2="22"></line>189 </svg>190 </div>191 <!-- Profile -->192 <div class="icon-btn">193 <svg class="icon" viewBox="0 0 24 24">194 <circle cx="12" cy="8" r="4"></circle>195 <path d="M3 22c3-6 15-6 18 0" />196 </svg>197 </div>198 <!-- Favorite -->199 <div class="icon-btn">200 <svg class="icon" viewBox="0 0 24 24">201 <path d="M12 21s-7-4-9-8c-2-5 4-9 9-4 5-5 11-1 9 4-2 4-9 8-9 8z"></path>202 </svg>203 </div>204 <!-- Bag with count -->205 <div class="icon-btn" style="position:relative;">206 <svg class="icon" viewBox="0 0 24 24">207 <rect x="4" y="7" width="16" height="14" rx="2"></rect>208 <path d="M8 7a4 4 0 0 1 8 0" />209 </svg>210 <div style="position:absolute; right:6px; top:4px; width:38px; height:38px; background:#fff; border:2px solid #111; border-radius:8px; font-size:26px; display:flex; align-items:center; justify-content:center;">7</div>211 </div>212 </div>213 214 <!-- Filters row -->215 <div class="filters-row">216 <div class="filter-item">217 <span>DEPARTMENT</span>218 <svg class="chev" viewBox="0 0 24 24"><path d="M4 8l8 8 8-8" stroke="#111" stroke-width="3" fill="none"/></svg>219 </div>220 <div class="filter-item">221 <span>FILTER & SORT</span>222 <svg class="sliders" viewBox="0 0 24 24">223 <line x1="3" y1="6" x2="21" y2="6" stroke="#111" stroke-width="3"/>224 <circle cx="9" cy="6" r="3" fill="#fff" stroke="#111" stroke-width="3"/>225 <line x1="3" y1="12" x2="21" y2="12" stroke="#111" stroke-width="3"/>226 <circle cx="15" cy="12" r="3" fill="#fff" stroke="#111" stroke-width="3"/>227 </svg>228 </div>229 </div>230 231 <!-- Sort / items row -->232 <div class="sort-row">233 <div class="tabs">234 <div class="tab">Model</div>235 <div class="tab active">Product</div>236 </div>237 <div class="count-and-view">238 <div>37 Items</div>239 <div class="square" title="List view"></div>240 <div class="view-ico grid" title="Grid view">241 <div></div><div></div><div></div><div></div>242 </div>243 </div>244 </div>245 246 <!-- Products list -->247 <div class="products">248 <div class="grid2">249 <!-- Product 1 -->250 <div class="product-card">251 <div class="img-wrap">252 [IMG: White/Grey Chunky Sneaker]253 <div class="wish">254 <svg class="heart" viewBox="0 0 24 24">255 <path d="M12 21s-7-4-9-8c-2-5 4-9 9-4 5-5 11-1 9 4-2 4-9 8-9 8z"></path>256 </svg>257 </div>258 </div>259 <div class="p-title">Chunky Sneakers</div>260 <div class="p-price">$49.99</div>261 <div class="colors">262 <span class="dot" style="background:#fff;"></span>263 <span class="dot" style="background:#222;"></span>264 </div>265 </div>266 267 <!-- Product 2 -->268 <div class="product-card">269 <div class="img-wrap">270 [IMG: Light Grey Chunky Sneaker]271 <div class="wish">272 <svg class="heart" viewBox="0 0 24 24">273 <path d="M12 21s-7-4-9-8c-2-5 4-9 9-4 5-5 11-1 9 4-2 4-9 8-9 8z"></path>274 </svg>275 </div>276 </div>277 <div class="p-title">Chunky Sneakers</div>278 <div class="p-price">$49.99</div>279 <div class="colors">280 <span class="dot" style="background:#bdbdbd;"></span>281 <span class="dot" style="background:#c7c7c7;"></span>282 </div>283 </div>284 285 <!-- Product 3 -->286 <div class="product-card">287 <div class="img-wrap">288 [IMG: Beige/Grey Chunky Sneaker]289 <div class="wish">290 <svg class="heart" viewBox="0 0 24 24">291 <path d="M12 21s-7-4-9-8c-2-5 4-9 9-4 5-5 11-1 9 4-2 4-9 8-9 8z"></path>292 </svg>293 </div>294 </div>295 <div class="p-title">Chunky Sneakers</div>296 <div class="p-price">$49.99</div>297 <div class="colors">298 <span class="dot" style="background:#e4e4e4;"></span>299 <span class="dot" style="background:#c9c7c3;"></span>300 </div>301 </div>302 303 <!-- Product 4 with sale -->304 <div class="product-card">305 <div class="img-wrap">306 [IMG: Trail Style Chunky Sneaker]307 <div class="badge">-38%</div>308 <div class="wish">309 <svg class="heart" viewBox="0 0 24 24">310 <path d="M12 21s-7-4-9-8c-2-5 4-9 9-4 5-5 11-1 9 4-2 4-9 8-9 8z"></path>311 </svg>312 </div>313 </div>314 <div class="p-title">Chunky Sneakers</div>315 <div class="p-price">$49.99</div>316 <div class="colors">317 <span class="dot" style="background:#eee;"></span>318 <span class="dot" style="background:#111;"></span>319 </div>320 </div>321 </div>322 </div>323 324 <!-- Home indicator -->325 <div class="home-indicator"></div>326</div>327</body>328</html>