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 - Product Grid</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }9 #render-target {10 width: 1080px;11 height: 2400px;12 position: relative;13 overflow: hidden;14 background: #FFFFFF;15 }16 17 /* Status bar */18 .status-bar {19 height: 120px;20 background: #D3D3D3;21 color: #FFFFFF;22 position: relative;23 padding: 0 40px;24 display: flex;25 align-items: center;26 justify-content: space-between;27 box-sizing: border-box;28 font-size: 42px;29 letter-spacing: 1px;30 }31 .status-icons {32 display: flex; gap: 28px; align-items: center;33 }34 .status-icons svg { width: 44px; height: 44px; fill: none; stroke: #FFFFFF; stroke-width: 3; }35 36 /* App bar */37 .appbar {38 height: 150px;39 background: #FFFFFF;40 display: flex;41 align-items: center;42 padding: 0 40px;43 box-sizing: border-box;44 border-bottom: 1px solid #EEEEEE;45 }46 .appbar .left { width: 120px; display: flex; align-items: center; justify-content: flex-start; }47 .appbar .title { flex: 1; font-size: 54px; font-weight: 700; color: #111; }48 .appbar .actions { width: 420px; display: flex; justify-content: space-between; align-items: center; }49 .icon-btn svg { width: 56px; height: 56px; stroke: #111; fill: none; stroke-width: 3; }50 51 /* Filters row */52 .filter-top {53 height: 120px;54 display: flex;55 align-items: center;56 padding: 0 40px;57 box-sizing: border-box;58 border-bottom: 1px solid #EFEFEF;59 gap: 40px;60 }61 .filter-item {62 font-size: 38px; font-weight: 700; color: #222; letter-spacing: 1px;63 display: flex; align-items: center; gap: 16px;64 }65 .filter-item svg { width: 30px; height: 30px; stroke: #222; stroke-width: 3; fill: none; }66 67 /* Subtabs */68 .subtabs {69 height: 110px;70 display: flex;71 align-items: center;72 padding: 0 40px;73 box-sizing: border-box;74 gap: 28px;75 }76 .subtabs .tab {77 font-size: 34px; color: #777;78 }79 .subtabs .tab.active {80 color: #D61E2D; font-weight: 700; border-bottom: 4px solid #D61E2D; padding-bottom: 8px;81 }82 .subtabs .right {83 margin-left: auto; display: flex; align-items: center; gap: 22px; font-size: 34px; color: #333;84 }85 .subtabs .right svg { width: 42px; height: 42px; stroke-width: 3; stroke: #999; fill: none; }86 .subtabs .right .grid svg { stroke: #D61E2D; }87 88 /* Product grid */89 .grid {90 padding: 20px 32px 0 32px;91 box-sizing: border-box;92 display: grid;93 grid-template-columns: 1fr 1fr;94 grid-column-gap: 32px;95 grid-row-gap: 60px;96 }97 .card {98 background: #fff;99 }100 .product-image {101 height: 820px;102 background: #E0E0E0;103 border: 1px solid #BDBDBD;104 display: flex; align-items: flex-end; justify-content: center;105 position: relative;106 color: #757575;107 font-size: 36px;108 }109 .sale-badge {110 position: absolute; right: 0; bottom: 0;111 background: #D61E2D; color: #fff; font-weight: 700;112 padding: 18px 26px; font-size: 34px;113 }114 .fav {115 position: absolute; right: 26px; bottom: -42px;116 width: 76px; height: 76px; background: #fff; border-radius: 76px;117 border: 2px solid #E6E6E6; display: flex; align-items: center; justify-content: center;118 }119 .fav svg { width: 44px; height: 44px; stroke: #333; fill: none; stroke-width: 3; }120 121 .card-body { padding: 34px 6px 0 6px; }122 .brand { font-size: 30px; letter-spacing: 1px; color: #333; font-weight: 700; }123 .name { margin-top: 12px; font-size: 34px; color: #222; }124 .price-row { margin-top: 18px; display: flex; align-items: baseline; gap: 18px; }125 .price { color: #D61E2D; font-size: 36px; font-weight: 700; }126 .old { color: #000; text-decoration: line-through; opacity: 0.7; font-size: 30px; }127 .swatches { margin-top: 18px; display: flex; gap: 16px; }128 .dot { width: 20px; height: 20px; border-radius: 50%; border: 2px solid #CCC; background: #F5F5F5; }129 130 /* Bottom home indicator */131 .home-indicator-wrap {132 position: absolute; bottom: 18px; left: 0; right: 0; height: 90px; background: rgba(0,0,0,0.85);133 display: flex; align-items: center; justify-content: center;134 }135 .home-indicator {136 width: 360px; height: 10px; background: #E6E6E6; border-radius: 8px;137 }138</style>139</head>140<body>141<div id="render-target">142 143 <!-- Status bar -->144 <div class="status-bar">145 <div class="time">12:52</div>146 <div class="status-icons">147 <!-- WiFi -->148 <svg viewBox="0 0 24 24">149 <path d="M2 8c6-5 14-5 20 0" />150 <path d="M5 12c4-3 10-3 14 0" />151 <path d="M9 16c2-2 4-2 6 0" />152 <circle cx="12" cy="20" r="1.5" fill="#FFFFFF" stroke="none"/>153 </svg>154 <!-- Battery -->155 <svg viewBox="0 0 28 16">156 <rect x="1" y="3" width="22" height="10" rx="2"/>157 <rect x="24" y="6" width="3" height="4" rx="1" />158 <rect x="3" y="5" width="18" height="6" fill="#FFFFFF" stroke="none"/>159 </svg>160 </div>161 </div>162 163 <!-- App bar -->164 <div class="appbar">165 <div class="left icon-btn" title="menu">166 <svg viewBox="0 0 24 24">167 <path d="M3 6h18M3 12h18M3 18h18" />168 </svg>169 </div>170 <div class="title">sneakers</div>171 <div class="actions">172 <div class="icon-btn" title="search">173 <svg viewBox="0 0 24 24">174 <circle cx="11" cy="11" r="7"></circle>175 <path d="M16 16l5 5"></path>176 </svg>177 </div>178 <div class="icon-btn" title="account">179 <svg viewBox="0 0 24 24">180 <circle cx="12" cy="8" r="4"></circle>181 <path d="M4 20c2.5-4 13.5-4 16 0"></path>182 </svg>183 </div>184 <div class="icon-btn" title="favorites">185 <svg viewBox="0 0 24 24">186 <path d="M12 21s-7-4.5-9-8.5C1 8 3.5 5.5 6.5 6.5 8 7 9 8.5 12 10.5 15 8.5 16 7 17.5 6.5 20.5 5.5 23 8 21 12.5 19 16.5 12 21 12 21z"></path>187 </svg>188 </div>189 <div class="icon-btn" title="bag">190 <svg viewBox="0 0 24 24">191 <rect x="4" y="7" width="16" height="14" rx="2"></rect>192 <path d="M8 7V6a4 4 0 0 1 8 0v1"></path>193 </svg>194 </div>195 </div>196 </div>197 198 <!-- Filters row -->199 <div class="filter-top">200 <div class="filter-item">201 <span>DEPARTMENT</span>202 <svg viewBox="0 0 24 24"><path d="M6 9l6 6 6-6"/></svg>203 </div>204 <div class="filter-item" style="margin-left:auto;">205 <span>FILTER & SORT</span>206 <svg viewBox="0 0 24 24">207 <path d="M4 6h16M10 6v6M4 12h10M14 12v6M4 18h6"></path>208 </svg>209 </div>210 </div>211 212 <!-- Subtabs -->213 <div class="subtabs">214 <div class="tab">Model</div>215 <div class="tab active">Product</div>216 <div class="right">217 <span>15 Items</span>218 <!-- list icon -->219 <svg viewBox="0 0 24 24">220 <rect x="3" y="4" width="18" height="16" rx="2"></rect>221 </svg>222 <!-- grid icon (active) -->223 <div class="grid">224 <svg viewBox="0 0 24 24">225 <rect x="3" y="3" width="7" height="7"></rect>226 <rect x="14" y="3" width="7" height="7"></rect>227 <rect x="3" y="14" width="7" height="7"></rect>228 <rect x="14" y="14" width="7" height="7"></rect>229 </svg>230 </div>231 </div>232 </div>233 234 <!-- Grid -->235 <div class="grid">236 <!-- Card 1 -->237 <div class="card">238 <div class="product-image">239 <div>[IMG: Minimal White Sneaker]</div>240 <div class="sale-badge">-40%</div>241 <div class="fav">242 <svg viewBox="0 0 24 24">243 <path d="M12 21s-7-4.5-9-8.5C1 8 3.5 5.5 6.5 6.5 8 7 9 8.5 12 10.5 15 8.5 16 7 17.5 6.5 20.5 5.5 23 8 21 12.5 19 16.5 12 21 12 21z"></path>244 </svg>245 </div>246 </div>247 <div class="card-body">248 <div class="brand">ESSENTIALS</div>249 <div class="name">Essentials: THE SNEAKER</div>250 <div class="price-row">251 <div class="price">Rs. 3,299.00</div>252 <div class="old">Rs. 5,499.00</div>253 </div>254 <div class="swatches">255 <div class="dot"></div>256 <div class="dot"></div>257 <div class="dot"></div>258 </div>259 </div>260 </div>261 262 <!-- Card 2 -->263 <div class="card">264 <div class="product-image">265 <div>[IMG NB: Clean White Sneaker]</div>266 <div class="sale-badge">-40%</div>267 <div class="fav">268 <svg viewBox="0 0 24 24">269 <path d="M12 21s-7-4.5-9-8.5C1 8 3.5 5.5 6.5 6.5 8 7 9 8.5 12 10.5 15 8.5 16 7 17.5 6.5 20.5 5.5 23 8 21 12.5 19 16.5 12 21 12 21z"></path>270 </svg>271 </div>272 </div>273 <div class="card-body">274 <div class="brand">ESSENTIALS</div>275 <div class="name">Essentials: THE SNEAKER</div>276 <div class="price-row">277 <div class="price">Rs. 3,299.00</div>278 <div class="old">Rs. 5,499.00</div>279 </div>280 <div class="swatches">281 <div class="dot"></div>282 <div class="dot"></div>283 <div class="dot"></div>284 </div>285 </div>286 </div>287 288 <!-- Card 3 -->289 <div class="card">290 <div class="product-image" style="height: 760px;">291 <div>[IMG: White Sneaker Pair Angled]</div>292 <div class="fav" style="bottom:-40px;">293 <svg viewBox="0 0 24 24">294 <path d="M12 21s-7-4.5-9-8.5C1 8 3.5 5.5 6.5 6.5 8 7 9 8.5 12 10.5 15 8.5 16 7 17.5 6.5 20.5 5.5 23 8 21 12.5 19 16.5 12 21 12 21z"></path>295 </svg>296 </div>297 </div>298 <div class="card-body">299 <div class="brand">ESSENTIALS</div>300 <div class="name">Essentials: THE SNEAKER</div>301 <div class="price-row">302 <div class="price">Rs. 3,299.00</div>303 <div class="old">Rs. 5,499.00</div>304 </div>305 <div class="swatches">306 <div class="dot"></div>307 <div class="dot"></div>308 <div class="dot"></div>309 </div>310 </div>311 </div>312 313 <!-- Card 4 -->314 <div class="card">315 <div class="product-image" style="height: 760px;">316 <div>[IMG: Ankle Socks Set - Grey/Black]</div>317 <div class="fav" style="bottom:-40px;">318 <svg viewBox="0 0 24 24">319 <path d="M12 21s-7-4.5-9-8.5C1 8 3.5 5.5 6.5 6.5 8 7 9 8.5 12 10.5 15 8.5 16 7 17.5 6.5 20.5 5.5 23 8 21 12.5 19 16.5 12 21 12 21z"></path>320 </svg>321 </div>322 </div>323 <div class="card-body">324 <div class="brand">ACCESSORIES</div>325 <div class="name">No-show Socks (5 pairs)</div>326 <div class="price-row">327 <div class="price">Rs. 799.00</div>328 <div class="old">Rs. 999.00</div>329 </div>330 <div class="swatches">331 <div class="dot"></div>332 <div class="dot"></div>333 <div class="dot"></div>334 </div>335 </div>336 </div>337 </div>338 339 <!-- Bottom home indicator -->340 <div class="home-indicator-wrap">341 <div class="home-indicator"></div>342 </div>343 344</div>345</body>346</html>