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>All Shoes - 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 color: #111;16 }17 18 /* Status bar */19 .status-bar {20 position: absolute;21 top: 0;22 left: 0;23 width: 1080px;24 height: 120px;25 background: #000;26 display: flex;27 align-items: center;28 padding: 0 36px;29 box-sizing: border-box;30 color: #fff;31 font-size: 40px;32 letter-spacing: 1px;33 }34 .status-left { display: flex; align-items: center; gap: 24px; }35 .sb-dot { width: 20px; height: 20px; border-radius: 50%; background: #fff; opacity: 0.9; }36 .status-spacer { flex: 1; }37 .status-right { display: flex; align-items: center; gap: 24px; }38 .icon-small svg { width: 40px; height: 40px; fill: #fff; }39 40 /* Header */41 .app-bar {42 position: absolute;43 top: 120px;44 left: 0;45 width: 1080px;46 height: 120px;47 background: #fff;48 border-bottom: 1px solid #e8e8e8;49 display: flex;50 align-items: center;51 box-sizing: border-box;52 padding: 0 36px;53 }54 .app-title {55 font-size: 44px;56 font-weight: 600;57 color: #111;58 }59 .app-left, .app-right {60 display: flex; align-items: center;61 }62 .app-left { gap: 24px; }63 .app-right { margin-left: auto; gap: 32px; }64 .icon-btn {65 width: 72px; height: 72px; display: flex; align-items: center; justify-content: center;66 color: #111;67 }68 .icon-btn svg { width: 48px; height: 48px; fill: none; stroke: #111; stroke-width: 3; }69 70 /* Content area */71 .content {72 position: absolute;73 top: 240px; /* status + app bar */74 left: 0;75 right: 0;76 bottom: 120px; /* space above home indicator */77 overflow: hidden;78 }79 80 .grid {81 width: 100%;82 height: 100%;83 overflow-y: auto;84 box-sizing: border-box;85 padding: 24px 36px 180px 36px;86 display: grid;87 grid-template-columns: 1fr 1fr;88 grid-auto-rows: min-content;89 gap: 24px;90 }91 92 .card {93 background: #fff;94 }95 96 .img {97 width: 100%;98 height: 420px;99 background: #E0E0E0;100 border: 1px solid #BDBDBD;101 display: flex;102 align-items: center;103 justify-content: center;104 color: #757575;105 font-size: 28px;106 position: relative;107 box-sizing: border-box;108 }109 110 .favorite {111 position: absolute;112 top: 18px; right: 18px;113 width: 84px; height: 84px;114 background: #fff;115 border-radius: 50%;116 box-shadow: 0 2px 8px rgba(0,0,0,0.15);117 display: flex; align-items: center; justify-content: center;118 }119 .favorite svg { width: 44px; height: 44px; stroke: #111; fill: none; stroke-width: 3; }120 121 .title {122 margin-top: 24px;123 font-size: 34px;124 font-weight: 700;125 color: #111;126 }127 .subtitle {128 margin-top: 6px;129 font-size: 26px;130 color: #6b6b6b;131 line-height: 1.3;132 }133 .price {134 margin-top: 22px;135 font-size: 30px;136 font-weight: 700;137 }138 139 .swatches {140 margin-top: 18px;141 display: flex;142 align-items: center;143 gap: 16px;144 }145 .swatch {146 width: 26px; height: 26px;147 border-radius: 50%;148 border: 2px solid #d0d0d0;149 }150 .swatch.dark { border-color: #000; }151 .swatch.green { background: #0b8a55; }152 .swatch.gray { background: #ececec; }153 .swatch.black { background: #222; }154 .swatch.pink { background: #f1c1ef; }155 .more {156 font-size: 26px; color: #6b6b6b;157 }158 159 /* Floating filter FAB */160 .fab {161 position: absolute;162 right: 36px;163 bottom: 230px;164 width: 120px; height: 120px;165 background: #fff;166 border-radius: 50%;167 box-shadow: 0 10px 24px rgba(0,0,0,0.18);168 display: flex; align-items: center; justify-content: center;169 }170 .fab svg { width: 64px; height: 64px; stroke: #111; fill: none; stroke-width: 4; }171 172 /* Bottom system bar */173 .system-bar {174 position: absolute;175 bottom: 0; left: 0; width: 1080px; height: 110px; background: #000;176 display: flex; align-items: center; justify-content: center;177 }178 .home-pill {179 width: 320px; height: 10px; border-radius: 8px; background: #fff; opacity: 0.9;180 }181 182 /* Utility for currency spacing similar to screenshot */183 .price .currency { letter-spacing: 1px; }184</style>185</head>186<body>187<div id="render-target">188 189 <!-- Status Bar -->190 <div class="status-bar">191 <div class="status-left">192 <div>2:54</div>193 <div class="sb-dot"></div>194 <div class="sb-dot"></div>195 <div class="sb-dot"></div>196 <div class="sb-dot"></div>197 <div class="sb-dot"></div>198 <div class="sb-dot" style="width:8px;height:8px;opacity:0.7;"></div>199 </div>200 <div class="status-spacer"></div>201 <div class="status-right">202 <span class="icon-small">203 <!-- WiFi -->204 <svg viewBox="0 0 24 24"><path d="M2 8c5-4 15-4 20 0" stroke="white" stroke-width="2" fill="none"/><path d="M5 12c3-3 11-3 14 0" stroke="white" stroke-width="2" fill="none"/><path d="M9 16c2-2 4-2 6 0" stroke="white" stroke-width="2" fill="none"/><circle cx="12" cy="19" r="1.5" fill="white"/></svg>205 </span>206 <span class="icon-small">207 <!-- Battery -->208 <svg viewBox="0 0 24 24"><rect x="2" y="6" width="18" height="12" rx="2" ry="2" fill="none" stroke="white" stroke-width="2"/><rect x="4" y="8" width="12" height="8" fill="white"/><rect x="20" y="10" width="2" height="6" fill="white"/></svg>209 </span>210 </div>211 </div>212 213 <!-- App Bar -->214 <div class="app-bar">215 <div class="app-left">216 <div class="icon-btn" title="Back">217 <svg viewBox="0 0 24 24"><path d="M15 4 L7 12 L15 20" /></svg>218 </div>219 <div class="app-title">All Shoes</div>220 </div>221 <div class="app-right">222 <div class="icon-btn" title="Search">223 <svg viewBox="0 0 24 24">224 <circle cx="11" cy="11" r="7"></circle>225 <line x1="16" y1="16" x2="21" y2="21"></line>226 </svg>227 </div>228 <div class="icon-btn" title="Bag">229 <svg viewBox="0 0 24 24">230 <path d="M6 8h12l-1 12H7z"></path>231 <path d="M9 8V6a3 3 0 1 1 6 0v2"></path>232 </svg>233 </div>234 </div>235 </div>236 237 <!-- Content -->238 <div class="content">239 <div class="grid">240 241 <!-- Card 1 -->242 <div class="card">243 <div class="img">244 <div>[IMG: Teal Road Running Shoe]</div>245 <div class="favorite">246 <svg viewBox="0 0 24 24">247 <path d="M12 21s-7-4.4-7-9.5C5 8 6.9 6 9.2 6c1.5 0 2.6.8 2.8 1.9C12.3 6.8 13.4 6 14.9 6 17.2 6 19 8 19 11.5 19 16.6 12 21 12 21z"></path>248 </svg>249 </div>250 </div>251 <div class="title">Nike Invincible 3</div>252 <div class="subtitle">Women's Road Running Shoes</div>253 <div class="price">MRP : <span class="currency">₹ 16 995.00</span></div>254 <div class="swatches">255 <span class="swatch green"></span>256 <span class="swatch gray"></span>257 <span class="swatch black"></span>258 <span class="swatch" style="background:#f3f3f3;"></span>259 <span class="swatch pink"></span>260 <span class="more">+2</span>261 </div>262 </div>263 264 <!-- Card 2 -->265 <div class="card">266 <div class="img">267 <div>[IMG: Cream Low Sneakers]</div>268 <div class="favorite">269 <svg viewBox="0 0 24 24">270 <path d="M12 21s-7-4.4-7-9.5C5 8 6.9 6 9.2 6c1.5 0 2.6.8 2.8 1.9C12.3 6.8 13.4 6 14.9 6 17.2 6 19 8 19 11.5 19 16.6 12 21 12 21z"></path>271 </svg>272 </div>273 </div>274 <div class="title">Nike Dunk Low LX NBHD</div>275 <div class="subtitle">Women's Shoes</div>276 <div class="price">MRP : <span class="currency">₹ 10 795.00</span></div>277 </div>278 279 <!-- Card 3 -->280 <div class="card">281 <div class="img">282 <div>[IMG: Teal Walking Shoe]</div>283 <div class="favorite">284 <svg viewBox="0 0 24 24">285 <path d="M12 21s-7-4.4-7-9.5C5 8 6.9 6 9.2 6c1.5 0 2.6.8 2.8 1.9C12.3 6.8 13.4 6 14.9 6 17.2 6 19 8 19 11.5 19 16.6 12 21 12 21z"></path>286 </svg>287 </div>288 </div>289 <div class="title">Nike Motiva</div>290 <div class="subtitle">Women's Walking Shoes</div>291 <div class="price">MRP : <span class="currency">₹ 9 695.00</span></div>292 <div class="swatches">293 <span class="swatch green"></span>294 <span class="swatch black dark"></span>295 </div>296 </div>297 298 <!-- Card 4 -->299 <div class="card">300 <div class="img">301 <div>[IMG: White Workout Shoe]</div>302 <div class="favorite">303 <svg viewBox="0 0 24 24">304 <path d="M12 21s-7-4.4-7-9.5C5 8 6.9 6 9.2 6c1.5 0 2.6.8 2.8 1.9C12.3 6.8 13.4 6 14.9 6 17.2 6 19 8 19 11.5 19 16.6 12 21 12 21z"></path>305 </svg>306 </div>307 </div>308 <div class="title">Nike Metcon 9 AMP</div>309 <div class="subtitle">Women's Workout Shoes</div>310 <div class="price">MRP : <span class="currency">₹ 12 795.00</span></div>311 </div>312 313 <!-- Extra spacer cards to emulate scroll feel (optional visual continuity) -->314 <div class="card">315 <div class="img"><div>[IMG: Lifestyle Shoe]</div></div>316 <div class="title">Nike Air Zoom</div>317 <div class="subtitle">Women's Shoes</div>318 <div class="price">MRP : <span class="currency">₹ 8 995.00</span></div>319 </div>320 <div class="card">321 <div class="img"><div>[IMG: Retro Low Shoe]</div></div>322 <div class="title">Nike Court Retro</div>323 <div class="subtitle">Women's Shoes</div>324 <div class="price">MRP : <span class="currency">₹ 7 495.00</span></div>325 </div>326 327 </div>328 </div>329 330 <!-- Floating Filter Button -->331 <div class="fab" title="Filter">332 <svg viewBox="0 0 24 24">333 <line x1="4" y1="6" x2="20" y2="6"></line>334 <circle cx="9" cy="6" r="2"></circle>335 <line x1="4" y1="12" x2="20" y2="12"></line>336 <circle cx="15" cy="12" r="2"></circle>337 <line x1="4" y1="18" x2="20" y2="18"></line>338 <circle cx="12" cy="18" r="2"></circle>339 </svg>340 </div>341 342 <!-- Bottom system bar -->343 <div class="system-bar">344 <div class="home-pill"></div>345 </div>346 347</div>348</body>349</html>