GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Nike Shoes Listing - Mock</title>6<meta name="viewport" content="width=1080, initial-scale=1.0">7<style>8 body { margin: 0; padding: 0; background: transparent; }9 #render-target {10 width: 1080px;11 height: 2400px;12 position: relative;13 overflow: hidden;14 background: #ffffff;15 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;16 color: #111111;17 }18 19 /* Status bar */20 .status-bar {21 height: 96px;22 background: #000;23 color: #fff;24 padding: 0 28px;25 display: flex;26 align-items: center;27 justify-content: space-between;28 font-size: 34px;29 letter-spacing: 0.5px;30 }31 .status-icons { display: flex; align-items: center; gap: 18px; opacity: 0.9; }32 .dot { width: 10px; height: 10px; background: #fff; border-radius: 50%; display: inline-block; opacity: 0.8; }33 34 /* Top navigation */35 .top-nav {36 height: 120px;37 background: #fff;38 border-bottom: 1px solid #ededed;39 display: flex;40 align-items: center;41 padding: 0 32px;42 }43 .top-nav .left, .top-nav .right { display: flex; align-items: center; }44 .top-nav .left { gap: 18px; }45 .top-nav .right { margin-left: auto; gap: 34px; }46 .title { font-size: 42px; font-weight: 600; }47 48 .icon-btn { width: 60px; height: 60px; display: inline-flex; align-items: center; justify-content: center; color: #111; }49 .icon { width: 48px; height: 48px; }50 51 /* Two-column intro text */52 .intro {53 padding: 28px 36px 18px;54 background: #fff;55 }56 .intro-grid {57 display: grid;58 grid-template-columns: 1fr 1fr;59 gap: 36px;60 }61 .intro-card .badge { color: #e74a2f; font-weight: 700; font-size: 34px; }62 .intro-card .name { font-size: 38px; font-weight: 700; line-height: 1.2; margin-top: 8px; }63 .intro-card .sub { color: #8a8a8a; font-size: 32px; margin-top: 6px; }64 .intro-card .price { margin-top: 22px; font-size: 34px; }65 .pager-dots { display: flex; gap: 20px; align-items: center; padding: 22px 10px 8px 10px; }66 .dot-lg { width: 28px; height: 28px; border-radius: 50%; background: #cfcfcf; }67 .dot-lg.off { background: #eaeaea; border: 2px solid #cfcfcf; box-sizing: border-box; }68 69 /* Product grid */70 .product-section { padding: 10px 36px 140px; }71 .grid {72 display: grid;73 grid-template-columns: 1fr 1fr;74 gap: 32px;75 }76 .product-card {77 background: #fff;78 }79 .card-image {80 position: relative;81 width: 100%;82 height: 360px;83 background: #E0E0E0;84 border: 1px solid #BDBDBD;85 display: flex;86 align-items: center;87 justify-content: center;88 color: #757575;89 font-size: 30px;90 }91 .fav {92 position: absolute;93 top: 18px;94 right: 18px;95 width: 84px;96 height: 84px;97 border-radius: 50%;98 background: #fff;99 box-shadow: 0 2px 6px rgba(0,0,0,0.12);100 display: flex;101 align-items: center;102 justify-content: center;103 color: #111;104 }105 .product-info { padding: 24px 8px 10px; }106 .p-title { font-size: 36px; font-weight: 700; line-height: 1.25; }107 .p-sub { color: #8a8a8a; font-size: 32px; margin-top: 8px; }108 .p-price { font-size: 36px; margin-top: 22px; }109 .mrp-inline { color: #8a8a8a; font-size: 32px; margin-left: 8px; }110 .p-old { color: #8a8a8a; text-decoration: line-through; font-size: 32px; margin-top: 8px; }111 112 /* Floating filter button */113 .fab {114 position: absolute;115 right: 56px;116 bottom: 220px;117 width: 140px;118 height: 140px;119 background: #fff;120 border-radius: 70px;121 box-shadow: 0 10px 30px rgba(0,0,0,0.18);122 display: flex;123 align-items: center;124 justify-content: center;125 color: #111;126 }127 128 /* Bottom area with names row and home indicator */129 .bottom-bar {130 position: absolute;131 left: 0; right: 0; bottom: 0;132 height: 150px;133 background: #ffffff;134 border-top: 1px solid #ececec;135 display: flex;136 align-items: flex-start;137 padding: 12px 36px 0;138 }139 .bottom-names {140 width: 100%;141 display: grid;142 grid-template-columns: 1fr 1fr;143 gap: 32px;144 }145 .bottom-name {146 font-size: 38px;147 font-weight: 700;148 padding-bottom: 12px;149 }150 .home-indicator {151 position: absolute;152 left: 50%;153 bottom: 18px;154 transform: translateX(-50%);155 width: 300px;156 height: 10px;157 background: #1a1a1a;158 border-radius: 8px;159 opacity: 0.85;160 }161</style>162</head>163<body>164<div id="render-target">165 166 <!-- Status bar -->167 <div class="status-bar">168 <div>2:56</div>169 <div class="status-icons">170 <span class="dot"></span>171 <span class="dot"></span>172 <span class="dot"></span>173 <span class="dot"></span>174 <span class="dot" style="opacity:0.6;"></span>175 </div>176 <div class="status-icons">177 <!-- simple signal/wifi/battery placeholders -->178 <svg class="icon" viewBox="0 0 24 24" fill="#fff" aria-hidden="true">179 <rect x="3" y="14" width="3" height="7"></rect>180 <rect x="8" y="10" width="3" height="11"></rect>181 <rect x="13" y="6" width="3" height="15"></rect>182 </svg>183 <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2" aria-hidden="true">184 <circle cx="12" cy="12" r="6"></circle>185 <path d="M16 16l5 5"></path>186 </svg>187 <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2" aria-hidden="true">188 <rect x="6" y="5" width="12" height="14" rx="2"></rect>189 <path d="M9 5v-1a3 3 0 0 1 6 0v1"></path>190 </svg>191 </div>192 </div>193 194 <!-- Top navigation -->195 <div class="top-nav">196 <div class="left">197 <span class="icon-btn">198 <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">199 <path d="M15 18l-6-6 6-6"></path>200 </svg>201 </span>202 <div class="title">All Shoes</div>203 </div>204 <div class="right">205 <span class="icon-btn">206 <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">207 <circle cx="11" cy="11" r="7"></circle>208 <path d="M21 21l-4.3-4.3"></path>209 </svg>210 </span>211 <span class="icon-btn">212 <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">213 <rect x="6" y="7" width="12" height="12" rx="2"></rect>214 <path d="M9 7V6a3 3 0 0 1 6 0v1"></path>215 </svg>216 </span>217 </div>218 </div>219 220 <!-- Intro two-column text -->221 <div class="intro">222 <div class="intro-grid">223 <div class="intro-card">224 <div class="badge">Member Access</div>225 <div class="name">Nike Air Force 1 '07 SE</div>226 <div class="sub">Women's Shoes</div>227 <div class="price">MRP : ₹ 10 795.00</div>228 </div>229 <div class="intro-card">230 <div class="name">Nike Air Force 1 Low x UNDEFEATED</div>231 <div class="sub">Men's Shoes</div>232 <div class="price">MRP : ₹ 13 995.00</div>233 </div>234 </div>235 <div class="pager-dots">236 <span class="dot-lg"></span>237 <span class="dot-lg off"></span>238 </div>239 </div>240 241 <!-- Product grid -->242 <div class="product-section">243 <div class="grid">244 245 <!-- Card 1 -->246 <div class="product-card">247 <div class="card-image">248 <div>[IMG: Air Jordan 2 Retro Low - shoe]</div>249 <div class="fav">250 <svg viewBox="0 0 24 24" width="40" height="40" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">251 <path d="M12 21s-6-4.35-9-7.5C-1 8 2 3 6 3c2.1 0 3.9 1.4 6 3.4C14.1 4.4 15.9 3 18 3c4 0 7 5 3 10.5-3 3.15-9 7.5-9 7.5z"/>252 </svg>253 </div>254 </div>255 <div class="product-info">256 <div class="p-title">Air Jordan 2 Retro Low Titan</div>257 <div class="p-sub">Shoes</div>258 <div class="p-price">₹ 19 277.00 <span class="mrp-inline">MRP :</span></div>259 <div class="p-old">₹ 20 295.00</div>260 </div>261 </div>262 263 <!-- Card 2 -->264 <div class="product-card">265 <div class="card-image">266 <div>[IMG: Nike Air Force 1 '07 LV8 EMB - shoe]</div>267 <div class="fav">268 <svg viewBox="0 0 24 24" width="40" height="40" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">269 <path d="M12 21s-6-4.35-9-7.5C-1 8 2 3 6 3c2.1 0 3.9 1.4 6 3.4C14.1 4.4 15.9 3 18 3c4 0 7 5 3 10.5-3 3.15-9 7.5-9 7.5z"/>270 </svg>271 </div>272 </div>273 <div class="product-info">274 <div class="p-title">Nike Air Force 1 '07 LV8 EMB</div>275 <div class="p-sub">Shoes</div>276 <div class="p-price">₹ 10 257.00 <span class="mrp-inline">MRP :</span></div>277 <div class="p-old">₹ 10 795.00</div>278 </div>279 </div>280 281 <!-- Card 3 -->282 <div class="product-card">283 <div class="card-image">284 <div>[IMG: Nike Dunk Low - shoe]</div>285 <div class="fav">286 <svg viewBox="0 0 24 24" width="40" height="40" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">287 <path d="M12 21s-6-4.35-9-7.5C-1 8 2 3 6 3c2.1 0 3.9 1.4 6 3.4C14.1 4.4 15.9 3 18 3c4 0 7 5 3 10.5-3 3.15-9 7.5-9 7.5z"/>288 </svg>289 </div>290 </div>291 <div class="product-info">292 <div class="p-title">Nike Dunk Low</div>293 <div class="p-sub">Shoes</div>294 <div class="p-price">₹ 10 795.00</div>295 </div>296 </div>297 298 <!-- Card 4 -->299 <div class="product-card">300 <div class="card-image">301 <div>[IMG: Nike Air Force 1 Low Billie - shoe]</div>302 <div class="fav">303 <svg viewBox="0 0 24 24" width="40" height="40" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">304 <path d="M12 21s-6-4.35-9-7.5C-1 8 2 3 6 3c2.1 0 3.9 1.4 6 3.4C14.1 4.4 15.9 3 18 3c4 0 7 5 3 10.5-3 3.15-9 7.5-9 7.5z"/>305 </svg>306 </div>307 </div>308 <div class="product-info">309 <div class="p-title">Nike Air Force 1 Low Billie</div>310 <div class="p-sub">Shoes</div>311 <div class="p-price">₹ 10 995.00</div>312 </div>313 </div>314 315 </div>316 </div>317 318 <!-- Floating filter button -->319 <div class="fab" title="Filter & Sort">320 <svg viewBox="0 0 24 24" width="64" height="64" fill="none" stroke="currentColor" stroke-width="2">321 <path d="M3 6h14"></path>322 <circle cx="19" cy="6" r="2.5"></circle>323 <path d="M3 12h8"></path>324 <circle cx="13" cy="12" r="2.5"></circle>325 <path d="M3 18h4"></path>326 <circle cx="9" cy="18" r="2.5"></circle>327 </svg>328 </div>329 330 <!-- Bottom bar with names and home indicator -->331 <div class="bottom-bar">332 <div class="bottom-names">333 <div class="bottom-name">Nike Dunk Low</div>334 <div class="bottom-name">Nike Air Force 1 Low Billie</div>335 </div>336 <div class="home-indicator"></div>337 </div>338 339</div>340</body>341</html>