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: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; color:#111; }9 #render-target {10 width: 1080px;11 height: 2400px;12 position: relative;13 overflow: hidden;14 background: #ffffff;15 }16 17 /* Top system/status bar */18 .status-bar {19 height: 120px;20 background:#000;21 color:#fff;22 display:flex;23 align-items:center;24 padding: 0 36px;25 box-sizing: border-box;26 font-size: 40px;27 letter-spacing: .5px;28 }29 .status-left { flex:1; }30 .status-right { display:flex; gap:28px; align-items:center; }31 .status-dot { width:10px; height:10px; background:#fff; border-radius:50%; opacity:.8; }32 33 /* Header */34 .header {35 height: 150px;36 display:flex;37 align-items:center;38 padding: 0 36px;39 box-sizing:border-box;40 border-bottom:1px solid #eee;41 background:#fff;42 }43 .header .title {44 font-size: 50px;45 font-weight: 700;46 }47 .header .left, .header .right {48 display:flex; align-items:center;49 }50 .header .left { width: 160px; }51 .header .right { margin-left:auto; gap:36px; }52 .icon-btn {53 width: 72px; height: 72px; display:flex; align-items:center; justify-content:center;54 border-radius: 36px;55 }56 .icon {57 width: 48px; height: 48px;58 }59 60 /* Grid */61 .content {62 position: absolute;63 top: 270px; /* 120 + 150 */64 left: 0; right: 0; bottom: 0;65 overflow: hidden;66 }67 .grid {68 padding: 24px 36px 180px;69 box-sizing: border-box;70 display: grid;71 grid-template-columns: repeat(2, 1fr);72 gap: 30px;73 }74 .card {75 position: relative;76 background:#fff;77 }78 .prod-img {79 width: 100%;80 height: 360px;81 background:#E0E0E0;82 border:1px solid #BDBDBD;83 display:flex; align-items:center; justify-content:center;84 color:#757575; font-size: 30px;85 }86 .heart {87 position:absolute;88 top: 20px; right: 20px;89 width: 88px; height: 88px;90 background:#fff;91 border-radius: 44px;92 box-shadow: 0 2px 6px rgba(0,0,0,.12);93 display:flex; align-items:center; justify-content:center;94 }95 .heart svg { width: 44px; height: 44px; stroke:#111; }96 97 .text {98 padding: 28px 10px 10px;99 }100 .name {101 font-size: 38px; font-weight: 700; margin-bottom: 8px;102 }103 .sub {104 font-size: 30px; color:#8a8a8a; margin-bottom: 26px;105 }106 .price {107 font-size: 34px; font-weight: 700; margin-bottom: 10px;108 }109 .strike {110 font-size: 30px; color:#9e9e9e; text-decoration: line-through; margin-left: 10px; font-weight: 600;111 }112 .dim {113 color:#8a8a8a;114 font-weight: 600;115 }116 .badge {117 color:#e65100; font-weight: 800; font-size: 30px; margin-bottom: 8px;118 }119 120 .dots { display:flex; gap:18px; padding: 18px 0 8px; }121 .dot { width: 22px; height: 22px; border-radius:50%; background:#d0d0d0; }122 .dot.outline { background:#fff; border:2px solid #cfcfcf; }123 124 /* Floating filter button */125 .fab {126 position: absolute;127 right: 48px;128 bottom: 340px;129 width: 140px; height: 140px;130 background:#fff;131 border-radius: 70px;132 box-shadow: 0 10px 30px rgba(0,0,0,.18);133 display:flex; align-items:center; justify-content:center;134 }135 .fab svg { width: 60px; height: 60px; }136 137 /* Bottom home indicator */138 .home-indicator {139 position: absolute;140 bottom: 24px;141 left: 50%;142 transform: translateX(-50%);143 width: 420px;144 height: 16px;145 background:#000;146 border-radius: 16px;147 opacity: .9;148 }149</style>150</head>151<body>152<div id="render-target">153 154 <!-- Status bar -->155 <div class="status-bar">156 <div class="status-left">2:56</div>157 <div class="status-right">158 <span>●</span><span>●</span><span>●</span><span>●</span>159 <div class="status-dot"></div>160 <span>◔</span><span>▴</span>161 </div>162 </div>163 164 <!-- Header -->165 <div class="header">166 <div class="left">167 <div class="icon-btn">168 <svg class="icon" viewBox="0 0 32 32" fill="none" stroke="#111" stroke-width="3.2" stroke-linecap="round" stroke-linejoin="round">169 <path d="M20 6 L10 16 L20 26"></path>170 </svg>171 </div>172 </div>173 <div class="title">All Shoes</div>174 <div class="right">175 <div class="icon-btn">176 <svg class="icon" viewBox="0 0 32 32" fill="none" stroke="#111" stroke-width="3">177 <circle cx="14" cy="14" r="9"></circle>178 <path d="M21 21 L28 28"></path>179 </svg>180 </div>181 <div class="icon-btn">182 <svg class="icon" viewBox="0 0 32 32" fill="none" stroke="#111" stroke-width="2.8" stroke-linejoin="round">183 <path d="M4 8h24l-3 14H7L4 8z"></path>184 <circle cx="12" cy="26" r="2.5" fill="#111"></circle>185 <circle cx="22" cy="26" r="2.5" fill="#111"></circle>186 </svg>187 </div>188 </div>189 </div>190 191 <!-- Content -->192 <div class="content">193 <div class="grid">194 195 <!-- Card 1 -->196 <div class="card">197 <div class="prod-img">[IMG: Pink Nike Shoe]</div>198 <div class="heart">199 <svg viewBox="0 0 32 32" fill="none" stroke-width="2.2">200 <path d="M16 27s-8-5.4-10.5-9.3C3.3 14.6 4.3 10.6 8 10c2.7-.4 4.1 1.2 5.1 2.4.9-1.2 2.4-2.8 5.1-2.4 3.7.6 4.7 4.6 2.5 7.7C24 21.6 16 27 16 27z" stroke="#111" fill="none"/>201 </svg>202 </div>203 <div class="text">204 <div class="name">Nike Court Vision Alta</div>205 <div class="sub">Women's Shoes</div>206 <div class="price"><span class="dim">MRP :</span> ₹ 5 995.00</div>207 </div>208 </div>209 210 <!-- Card 2 -->211 <div class="card">212 <div class="prod-img">[IMG: Beige Nike Dunk High]</div>213 <div class="heart">214 <svg viewBox="0 0 32 32" fill="none" stroke-width="2.2">215 <path d="M16 27s-8-5.4-10.5-9.3C3.3 14.6 4.3 10.6 8 10c2.7-.4 4.1 1.2 5.1 2.4.9-1.2 2.4-2.8 5.1-2.4 3.7.6 4.7 4.6 2.5 7.7C24 21.6 16 27 16 27z" stroke="#111" fill="none"/>216 </svg>217 </div>218 <div class="text">219 <div class="name">Nike Dunk High</div>220 <div class="sub">Women's Shoes</div>221 <div class="price">₹ 8 827.00 <span class="dim">MRP :</span> <span class="strike">₹ 9 295.00</span></div>222 </div>223 </div>224 225 <!-- Card 3 -->226 <div class="card">227 <div class="prod-img">[IMG: Grey Nike AF1 07 SE]</div>228 <div class="heart">229 <svg viewBox="0 0 32 32" fill="none" stroke-width="2.2">230 <path d="M16 27s-8-5.4-10.5-9.3C3.3 14.6 4.3 10.6 8 10c2.7-.4 4.1 1.2 5.1 2.4.9-1.2 2.4-2.8 5.1-2.4 3.7.6 4.7 4.6 2.5 7.7C24 21.6 16 27 16 27z" stroke="#111" fill="none"/>231 </svg>232 </div>233 <div class="text">234 <div class="badge">Member Access</div>235 <div class="name">Nike Air Force 1 '07 SE</div>236 <div class="sub">Women's Shoes</div>237 <div class="price"><span class="dim">MRP :</span> ₹ 10 795.00</div>238 <div class="dots">239 <div class="dot"></div>240 <div class="dot outline"></div>241 </div>242 </div>243 </div>244 245 <!-- Card 4 -->246 <div class="card">247 <div class="prod-img">[IMG: Multicolor AF1 Low x UNDEFEATED]</div>248 <div class="heart">249 <svg viewBox="0 0 32 32" fill="none" stroke-width="2.2">250 <path d="M16 27s-8-5.4-10.5-9.3C3.3 14.6 4.3 10.6 8 10c2.7-.4 4.1 1.2 5.1 2.4.9-1.2 2.4-2.8 5.1-2.4 3.7.6 4.7 4.6 2.5 7.7C24 21.6 16 27 16 27z" stroke="#111" fill="none"/>251 </svg>252 </div>253 <div class="text">254 <div class="name">Nike Air Force 1 Low x<br>UNDEFEATED</div>255 <div class="sub">Men's Shoes</div>256 <div class="price"><span class="dim">MRP :</span> ₹ 13 995.00</div>257 </div>258 </div>259 260 <!-- Card 5 -->261 <div class="card">262 <div class="prod-img">[IMG: Green/Orange Low Shoe]</div>263 <div class="heart">264 <svg viewBox="0 0 32 32" fill="none" stroke-width="2.2">265 <path d="M16 27s-8-5.4-10.5-9.3C3.3 14.6 4.3 10.6 8 10c2.7-.4 4.1 1.2 5.1 2.4.9-1.2 2.4-2.8 5.1-2.4 3.7.6 4.7 4.6 2.5 7.7C24 21.6 16 27 16 27z" stroke="#111" fill="none"/>266 </svg>267 </div>268 <div class="text">269 <div class="name">Nike Waffle One</div>270 <div class="sub">Women's Shoes</div>271 <div class="price"><span class="dim">MRP :</span> ₹ 8 295.00</div>272 </div>273 </div>274 275 <!-- Card 6 -->276 <div class="card">277 <div class="prod-img">[IMG: Light Grey Low Shoe]</div>278 <div class="heart">279 <svg viewBox="0 0 32 32" fill="none" stroke-width="2.2">280 <path d="M16 27s-8-5.4-10.5-9.3C3.3 14.6 4.3 10.6 8 10c2.7-.4 4.1 1.2 5.1 2.4.9-1.2 2.4-2.8 5.1-2.4 3.7.6 4.7 4.6 2.5 7.7C24 21.6 16 27 16 27z" stroke="#111" fill="none"/>281 </svg>282 </div>283 <div class="text">284 <div class="name">Nike Court Legacy</div>285 <div class="sub">Men's Shoes</div>286 <div class="price"><span class="dim">MRP :</span> ₹ 5 695.00</div>287 </div>288 </div>289 290 </div>291 292 <!-- Floating action button (filters) -->293 <div class="fab" aria-label="Filters">294 <svg viewBox="0 0 24 24" fill="none" stroke="#111" stroke-width="2.2" stroke-linecap="round">295 <path d="M4 6h12"></path>296 <circle cx="19" cy="6" r="2.5" fill="#111"></circle>297 <path d="M4 12h12"></path>298 <circle cx="19" cy="12" r="2.5" fill="#111"></circle>299 <path d="M4 18h12"></path>300 <circle cx="19" cy="18" r="2.5" fill="#111"></circle>301 </svg>302 </div>303 </div>304 305 <!-- Bottom home indicator -->306 <div class="home-indicator"></div>307</div>308</body>309</html>