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>Sneakers Category</title>7<style>8 body { margin: 0; padding: 0; background: transparent; }9 #render-target {10 position: relative;11 width: 1080px;12 height: 2400px;13 overflow: hidden;14 background: #ffffff;15 font-family: "Inter", Arial, sans-serif;16 color: #222;17 }18 19 /* Status bar */20 .status-bar {21 height: 150px;22 background: #CFCFCF;23 display: flex;24 align-items: center;25 padding: 0 40px;26 box-sizing: border-box;27 justify-content: space-between;28 color: #fff;29 font-weight: 600;30 letter-spacing: 0.5px;31 }32 .status-time { font-size: 38px; color: #fff; }33 .status-icons { display: flex; gap: 24px; align-items: center; }34 .status-icons svg { width: 46px; height: 46px; }35 36 /* App bar */37 .app-bar {38 height: 170px;39 display: flex;40 align-items: center;41 padding: 0 48px;42 box-sizing: border-box;43 border-bottom: 1px solid #eee;44 }45 .menu-icon { width: 64px; height: 64px; margin-right: 30px; }46 .brand {47 font-size: 60px;48 font-weight: 700;49 letter-spacing: 0.5px;50 }51 .right-icons {52 margin-left: auto;53 display: flex;54 gap: 40px;55 align-items: center;56 }57 .right-icons svg { width: 60px; height: 60px; }58 59 /* Filter header */60 .filter-header {61 display: flex;62 justify-content: space-between;63 padding: 40px 60px 30px 60px;64 box-sizing: border-box;65 align-items: center;66 border-bottom: 1px solid #F0F0F0;67 font-weight: 700;68 }69 .filter-item {70 display: flex;71 align-items: center;72 gap: 18px;73 font-size: 38px;74 }75 .filter-item .label { letter-spacing: 1px; }76 .filter-item svg { width: 44px; height: 44px; }77 78 /* Sub filters row */79 .sub-filters {80 display: flex;81 justify-content: space-between;82 align-items: center;83 padding: 26px 60px;84 box-sizing: border-box;85 }86 .breadcrumbs { display: flex; gap: 28px; align-items: baseline; }87 .breadcrumbs span { font-size: 36px; color: #777; }88 .breadcrumbs a {89 font-size: 36px;90 color: #D7261E;91 text-decoration: none;92 border-bottom: 3px solid #D7261E;93 padding-bottom: 6px;94 }95 .count-view {96 display: flex;97 align-items: center;98 gap: 28px;99 }100 .count-view .items { font-size: 34px; color: #333; }101 .view-icons { display: flex; gap: 18px; }102 .view-icons svg { width: 50px; height: 50px; }103 104 /* Search chip */105 .chip-row {106 display: flex;107 justify-content: center;108 padding: 20px 0 40px;109 }110 .chip {111 display: flex;112 border: 1px solid #eee;113 border-radius: 8px;114 overflow: hidden;115 box-shadow: 0 2px 0 rgba(0,0,0,0.05);116 }117 .chip .text {118 font-size: 38px;119 padding: 24px 40px;120 background: #fff;121 }122 .chip .close {123 width: 120px;124 background: #F3EAE6;125 display: flex;126 align-items: center;127 justify-content: center;128 }129 .chip .close svg { width: 40px; height: 40px; }130 131 /* Product grid */132 .product-grid {133 display: grid;134 grid-template-columns: 1fr 1fr;135 column-gap: 50px;136 row-gap: 60px;137 padding: 20px 60px 160px;138 box-sizing: border-box;139 }140 .card {141 background: #FAFAFA;142 border: 1px solid #eee;143 border-radius: 4px;144 overflow: hidden;145 }146 .product-image {147 position: relative;148 height: 620px;149 margin: 24px;150 border: 1px solid #BDBDBD;151 background: #E0E0E0;152 display: flex;153 align-items: center;154 justify-content: center;155 color: #757575;156 font-size: 34px;157 text-align: center;158 }159 .tag {160 position: absolute;161 left: 0;162 bottom: 0;163 background: #EADFCF;164 color: #6C5B3E;165 font-weight: 700;166 font-size: 34px;167 padding: 14px 22px;168 border-top-right-radius: 6px;169 }170 .fav {171 position: absolute;172 right: 18px;173 bottom: -58px;174 width: 64px;175 height: 64px;176 }177 .fav svg { width: 64px; height: 64px; }178 179 .card-body {180 padding: 24px 28px 34px;181 box-sizing: border-box;182 }183 .title {184 font-size: 40px;185 margin-bottom: 18px;186 color: #222;187 }188 .price {189 font-size: 40px;190 font-weight: 600;191 margin-bottom: 24px;192 }193 .swatches { display: flex; gap: 18px; }194 .dot {195 width: 26px;196 height: 26px;197 border-radius: 50%;198 border: 2px solid #bbb;199 }200 .dot.grey { background: #BDBDBD; }201 202 /* Bottom home indicator */203 .home-indicator {204 position: absolute;205 bottom: 26px;206 left: 50%;207 transform: translateX(-50%);208 width: 420px;209 height: 18px;210 background: #000;211 border-radius: 12px;212 opacity: 0.75;213 }214</style>215</head>216<body>217<div id="render-target">218 219 <!-- Status bar -->220 <div class="status-bar">221 <div class="status-time">12:56</div>222 <div class="status-icons">223 <!-- WiFi -->224 <svg viewBox="0 0 24 24">225 <path d="M2 8c5-4 15-4 20 0" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round"/>226 <path d="M5 11c4-3 10-3 14 0" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round"/>227 <circle cx="12" cy="15" r="2" fill="#fff"/>228 </svg>229 <!-- Battery -->230 <svg viewBox="0 0 28 16">231 <rect x="1" y="3" width="22" height="10" rx="2" ry="2" stroke="#fff" fill="none" stroke-width="2"/>232 <rect x="3" y="5" width="16" height="6" fill="#fff"/>233 <rect x="23" y="6" width="4" height="4" fill="#fff"/>234 </svg>235 </div>236 </div>237 238 <!-- App bar -->239 <div class="app-bar">240 <!-- Menu -->241 <svg class="menu-icon" viewBox="0 0 24 24">242 <path d="M3 5h18M3 12h18M3 19h18" stroke="#000" stroke-width="2" stroke-linecap="round"/>243 </svg>244 <div class="brand">sneakers</div>245 <div class="right-icons">246 <!-- Search -->247 <svg viewBox="0 0 24 24">248 <circle cx="11" cy="11" r="7" stroke="#000" stroke-width="2" fill="none"/>249 <path d="M20 20l-4-4" stroke="#000" stroke-width="2" stroke-linecap="round"/>250 </svg>251 <!-- User -->252 <svg viewBox="0 0 24 24">253 <circle cx="12" cy="8" r="4" stroke="#000" stroke-width="2" fill="none"/>254 <path d="M4 21c0-4 4-7 8-7s8 3 8 7" stroke="#000" stroke-width="2" fill="none" stroke-linecap="round"/>255 </svg>256 <!-- Heart -->257 <svg viewBox="0 0 24 24">258 <path d="M12 21s-7-4.5-9-8.5C1 9 3.5 6 7 6c2 0 3.3 1 5 3 1.7-2 3-3 5-3 3.5 0 6 3 4 6.5C19 16.5 12 21 12 21z" stroke="#000" stroke-width="2" fill="none" stroke-linejoin="round"/>259 </svg>260 <!-- Bag -->261 <svg viewBox="0 0 24 24">262 <rect x="4" y="8" width="16" height="12" rx="2" stroke="#000" stroke-width="2" fill="none"/>263 <path d="M8 8V6a4 4 0 018 0v2" stroke="#000" stroke-width="2" fill="none"/>264 </svg>265 </div>266 </div>267 268 <!-- Filter header -->269 <div class="filter-header">270 <div class="filter-item">271 <span class="label">DEPARTMENT</span>272 <svg viewBox="0 0 24 24">273 <path d="M6 9l6 6 6-6" stroke="#000" stroke-width="2" fill="none" stroke-linecap="round"/>274 </svg>275 </div>276 <div class="filter-item">277 <span class="label">FILTER & SORT</span>278 <!-- slider icon -->279 <svg viewBox="0 0 24 24">280 <path d="M5 6h14M5 12h14M5 18h14" stroke="#000" stroke-width="2" stroke-linecap="round"/>281 <circle cx="9" cy="6" r="2" fill="#000"/>282 <circle cx="15" cy="12" r="2" fill="#000"/>283 <circle cx="7" cy="18" r="2" fill="#000"/>284 </svg>285 </div>286 </div>287 288 <!-- Sub filters -->289 <div class="sub-filters">290 <div class="breadcrumbs">291 <span>Model</span>292 <a href="#">Product</a>293 </div>294 <div class="count-view">295 <div class="items">12 Items</div>296 <div class="view-icons">297 <!-- single column icon -->298 <svg viewBox="0 0 24 24">299 <rect x="3" y="3" width="18" height="18" stroke="#777" stroke-width="2" fill="none"/>300 </svg>301 <!-- 2x2 red grid icon -->302 <svg viewBox="0 0 24 24">303 <rect x="3" y="3" width="8" height="8" fill="#D7261E"/>304 <rect x="13" y="3" width="8" height="8" fill="#D7261E"/>305 <rect x="3" y="13" width="8" height="8" fill="#D7261E"/>306 <rect x="13" y="13" width="8" height="8" fill="#D7261E"/>307 </svg>308 </div>309 </div>310 </div>311 312 <!-- Search chip -->313 <div class="chip-row">314 <div class="chip">315 <div class="text">Sneaker socks</div>316 <div class="close">317 <svg viewBox="0 0 24 24">318 <path d="M5 5l14 14M19 5L5 19" stroke="#222" stroke-width="2" stroke-linecap="round"/>319 </svg>320 </div>321 </div>322 </div>323 324 <!-- Product grid -->325 <div class="product-grid">326 <!-- Card 1 -->327 <div class="card">328 <div class="product-image">329 [IMG: Sneaker socks pack - dark tones]330 <div class="tag">3f2</div>331 <div class="fav">332 <svg viewBox="0 0 24 24">333 <path d="M12 21s-7-4.5-9-8.5C1 9 3.5 6 7 6c2 0 3.3 1 5 3 1.7-2 3-3 5-3 3.5 0 6 3 4 6.5C19 16.5 12 21 12 21z" stroke="#000" stroke-width="2" fill="none" stroke-linejoin="round"/>334 </svg>335 </div>336 </div>337 <div class="card-body">338 <div class="title">5-pack trainer socks</div>339 <div class="price">Rs. 599.00</div>340 <div class="swatches">341 <div class="dot grey"></div>342 <div class="dot"></div>343 </div>344 </div>345 </div>346 347 <!-- Card 2 -->348 <div class="card">349 <div class="product-image">350 [IMG: Sneaker socks pack - light tones]351 <div class="tag">3f2</div>352 <div class="fav">353 <svg viewBox="0 0 24 24">354 <path d="M12 21s-7-4.5-9-8.5C1 9 3.5 6 7 6c2 0 3.3 1 5 3 1.7-2 3-3 5-3 3.5 0 6 3 4 6.5C19 16.5 12 21 12 21z" stroke="#000" stroke-width="2" fill="none" stroke-linejoin="round"/>355 </svg>356 </div>357 </div>358 <div class="card-body">359 <div class="title">5-pack trainer socks</div>360 <div class="price">Rs. 599.00</div>361 <div class="swatches">362 <div class="dot"></div>363 </div>364 </div>365 </div>366 367 <!-- Card 3 -->368 <div class="card">369 <div class="product-image">370 [IMG: Sneaker socks pack - white]371 <div class="tag">3f2</div>372 <div class="fav">373 <svg viewBox="0 0 24 24">374 <path d="M12 21s-7-4.5-9-8.5C1 9 3.5 6 7 6c2 0 3.3 1 5 3 1.7-2 3-3 5-3 3.5 0 6 3 4 6.5C19 16.5 12 21 12 21z" stroke="#000" stroke-width="2" fill="none" stroke-linejoin="round"/>375 </svg>376 </div>377 </div>378 <div class="card-body">379 <div class="title">5-pack trainer socks</div>380 <div class="price">Rs. 599.00</div>381 <div class="swatches">382 <div class="dot"></div>383 <div class="dot"></div>384 </div>385 </div>386 </div>387 388 <!-- Card 4 -->389 <div class="card">390 <div class="product-image">391 [IMG: Sneaker socks pack - mixed colors]392 <div class="tag">3f2</div>393 <div class="fav">394 <svg viewBox="0 0 24 24">395 <path d="M12 21s-7-4.5-9-8.5C1 9 3.5 6 7 6c2 0 3.3 1 5 3 1.7-2 3-3 5-3 3.5 0 6 3 4 6.5C19 16.5 12 21 12 21z" stroke="#000" stroke-width="2" fill="none" stroke-linejoin="round"/>396 </svg>397 </div>398 </div>399 <div class="card-body">400 <div class="title">5-pack trainer socks</div>401 <div class="price">Rs. 599.00</div>402 <div class="swatches">403 <div class="dot"></div>404 </div>405 </div>406 </div>407 </div>408 409 <div class="home-indicator"></div>410</div>411</body>412</html>