GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html>3<head>4<meta charset="utf-8">5<meta name="viewport" content="width=1080, initial-scale=1.0">6<title>Nike - All Shoes</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }9 #render-target {10 position: relative;11 overflow: hidden;12 width: 1080px;13 height: 2400px;14 background: #ffffff;15 }16 17 /* Status bar */18 .status-bar {19 position: absolute;20 top: 0;21 left: 0;22 width: 1080px;23 height: 120px;24 background: #000;25 color: #fff;26 display: flex;27 align-items: center;28 padding: 0 40px;29 box-sizing: border-box;30 font-size: 42px;31 }32 .status-bar .left { flex: 1; }33 .status-bar .center { flex: 1; text-align: center; letter-spacing: 14px; opacity: 0.9; }34 .status-bar .right { flex: 1; display: flex; justify-content: flex-end; gap: 24px; }35 .status-icon { width: 40px; height: 40px; fill: #fff; }36 37 /* Header */38 .header {39 position: absolute;40 top: 120px;41 left: 0;42 width: 1080px;43 height: 150px;44 background: #fff;45 border-bottom: 1px solid #eee;46 display: flex;47 align-items: center;48 padding: 0 36px;49 box-sizing: border-box;50 }51 .header .title {52 font-size: 54px;53 font-weight: 600;54 color: #111;55 margin-left: 24px;56 }57 .header .actions {58 margin-left: auto;59 display: flex;60 gap: 36px;61 }62 .icon-btn { width: 72px; height: 72px; display: inline-flex; align-items: center; justify-content: center; }63 64 /* Content wrapper */65 .content {66 position: absolute;67 top: 270px; /* below status + header */68 left: 0;69 width: 100%;70 height: calc(100% - 270px);71 overflow: hidden;72 }73 .inner {74 padding: 36px;75 box-sizing: border-box;76 }77 78 /* Intro two-column text */79 .two-col {80 display: grid;81 grid-template-columns: 1fr 1fr;82 gap: 36px;83 margin-bottom: 30px;84 }85 .intro-block .badge {86 color: #e64a19;87 font-weight: 700;88 font-size: 40px;89 margin-bottom: 8px;90 }91 .intro-block .name {92 font-size: 46px;93 font-weight: 700;94 color: #111;95 line-height: 1.2;96 }97 .intro-block .category {98 font-size: 34px;99 color: #8e8e8e;100 margin-top: 6px;101 }102 .intro-block .price {103 font-size: 38px;104 color: #111;105 margin-top: 26px;106 }107 .carousel-dots {108 display: flex;109 gap: 24px;110 padding: 22px 8px 30px;111 }112 .dot {113 width: 28px;114 height: 28px;115 border-radius: 50%;116 background: #d0d0d0;117 }118 .dot.light { background: #ededed; border: 1px solid #d6d6d6; }119 120 /* Product grid */121 .grid {122 display: grid;123 grid-template-columns: 1fr 1fr;124 gap: 30px;125 }126 .card {127 background: #fff;128 border-radius: 8px;129 overflow: hidden;130 }131 .card .img {132 position: relative;133 width: 100%;134 height: 480px;135 background: #E0E0E0;136 border: 1px solid #BDBDBD;137 display: flex;138 align-items: center;139 justify-content: center;140 color: #757575;141 font-size: 36px;142 }143 .heart-wrap {144 position: absolute;145 top: 22px;146 right: 22px;147 width: 88px;148 height: 88px;149 background: #fff;150 border-radius: 44px;151 box-shadow: 0 2px 8px rgba(0,0,0,0.1);152 display: flex;153 align-items: center;154 justify-content: center;155 }156 .heart-icon { width: 44px; height: 44px; stroke: #111; fill: none; stroke-width: 3px; }157 158 .card .info {159 padding: 22px 8px;160 }161 .card .title {162 font-size: 44px;163 font-weight: 700;164 color: #111;165 margin-bottom: 8px;166 }167 .card .sub {168 color: #8e8e8e;169 font-size: 34px;170 margin-bottom: 22px;171 }172 .price-line {173 font-size: 42px;174 color: #111;175 margin-bottom: 6px;176 }177 .mrp-line {178 font-size: 36px;179 color: #9a9a9a;180 text-decoration: line-through;181 }182 183 /* Bottom labels (as shown on last row) */184 .bottom-labels {185 display: grid;186 grid-template-columns: 1fr 1fr;187 gap: 30px;188 padding-top: 10px;189 padding-bottom: 90px;190 }191 .bottom-label {192 font-size: 44px;193 font-weight: 700;194 color: #111;195 padding: 10px 8px;196 }197 198 /* Floating filter button */199 .fab {200 position: absolute;201 right: 42px;202 bottom: 240px;203 width: 140px;204 height: 140px;205 background: #fff;206 border-radius: 70px;207 box-shadow: 0 8px 24px rgba(0,0,0,0.18);208 display: flex;209 align-items: center;210 justify-content: center;211 }212 .slider-icon { width: 64px; height: 64px; stroke: #111; stroke-width: 8px; fill: none; }213 214 /* Home indicator */215 .home-indicator {216 position: absolute;217 left: 50%;218 transform: translateX(-50%);219 bottom: 40px;220 width: 420px;221 height: 18px;222 background: #000;223 opacity: 0.8;224 border-radius: 9px;225 }226 227 /* Simple button icon styles */228 .icon {229 width: 56px;230 height: 56px;231 }232 .back-icon { width: 64px; height: 64px; }233</style>234</head>235<body>236<div id="render-target">237 238 <!-- Status bar -->239 <div class="status-bar">240 <div class="left">2:56</div>241 <div class="center">••••• •</div>242 <div class="right">243 <svg class="status-icon" viewBox="0 0 24 24"><path d="M2 8h20v8H2z" fill="#fff"/></svg>244 <svg class="status-icon" viewBox="0 0 24 24"><path d="M6 3h12l2 4v10a4 4 0 0 1-4 4H8a4 4 0 0 1-4-4V7l2-4z" fill="#fff"/></svg>245 </div>246 </div>247 248 <!-- Header -->249 <div class="header">250 <div class="icon-btn">251 <svg class="back-icon" viewBox="0 0 24 24">252 <path d="M15 19L8 12l7-7" stroke="#111" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/>253 </svg>254 </div>255 <div class="title">All Shoes</div>256 <div class="actions">257 <div class="icon-btn">258 <svg class="icon" viewBox="0 0 24 24">259 <circle cx="11" cy="11" r="7" stroke="#111" stroke-width="2.5" fill="none"/>260 <path d="M20 20l-4-4" stroke="#111" stroke-width="2.5" stroke-linecap="round"/>261 </svg>262 </div>263 <div class="icon-btn">264 <svg class="icon" viewBox="0 0 24 24">265 <path d="M6 7h12v11H6z" stroke="#111" stroke-width="2.5" fill="none"/>266 <path d="M8 7V5h8v2" stroke="#111" stroke-width="2.5"/>267 </svg>268 </div>269 </div>270 </div>271 272 <!-- Content -->273 <div class="content">274 <div class="inner">275 276 <!-- Intro two-column text blocks -->277 <div class="two-col">278 <div class="intro-block">279 <div class="badge">Member Access</div>280 <div class="name">Nike Air Force 1 '07 SE</div>281 <div class="category">Women's Shoes</div>282 <div class="price">MRP : ₹ 10 795.00</div>283 </div>284 <div class="intro-block">285 <div class="name">Nike Air Force 1 Low x UNDEFEATED</div>286 <div class="category">Men's Shoes</div>287 <div class="price">MRP : ₹ 13 995.00</div>288 </div>289 </div>290 291 <div class="carousel-dots">292 <div class="dot"></div>293 <div class="dot light"></div>294 </div>295 296 <!-- Product grid -->297 <div class="grid">298 299 <!-- Card 1 -->300 <div class="card">301 <div class="img">[IMG: Air Jordan 2 Retro Low Titan]302 <div class="heart-wrap">303 <svg class="heart-icon" viewBox="0 0 24 24">304 <path d="M12 21s-6-4.6-8.3-7C1 10.3 2.9 6.5 6.4 6.5c2 0 3.3 1.3 3.6 2 0.3-0.7 1.6-2 3.6-2 3.5 0 5.4 3.8 2.7 7.5C18 16.4 12 21 12 21z"/>305 </svg>306 </div>307 </div>308 <div class="info">309 <div class="title">Air Jordan 2 Retro Low Titan</div>310 <div class="sub">Shoes</div>311 <div class="price-line">₹ 19 277.00 <span style="color:#9a9a9a;">MRP :</span></div>312 <div class="mrp-line">₹ 20 295.00</div>313 </div>314 </div>315 316 <!-- Card 2 -->317 <div class="card">318 <div class="img">[IMG: Nike Air Force 1 '07 LV8 EMB]319 <div class="heart-wrap">320 <svg class="heart-icon" viewBox="0 0 24 24">321 <path d="M12 21s-6-4.6-8.3-7C1 10.3 2.9 6.5 6.4 6.5c2 0 3.3 1.3 3.6 2 0.3-0.7 1.6-2 3.6-2 3.5 0 5.4 3.8 2.7 7.5C18 16.4 12 21 12 21z"/>322 </svg>323 </div>324 </div>325 <div class="info">326 <div class="title">Nike Air Force 1 '07 LV8 EMB</div>327 <div class="sub">Shoes</div>328 <div class="price-line">₹ 10 257.00 <span style="color:#9a9a9a;">MRP :</span></div>329 <div class="mrp-line">₹ 10 795.00</div>330 </div>331 </div>332 333 <!-- Card 3 -->334 <div class="card">335 <div class="img">[IMG: Nike Dunk Low]336 <div class="heart-wrap">337 <svg class="heart-icon" viewBox="0 0 24 24">338 <path d="M12 21s-6-4.6-8.3-7C1 10.3 2.9 6.5 6.4 6.5c2 0 3.3 1.3 3.6 2 0.3-0.7 1.6-2 3.6-2 3.5 0 5.4 3.8 2.7 7.5C18 16.4 12 21 12 21z"/>339 </svg>340 </div>341 </div>342 <div class="info">343 <div class="title">Nike Dunk Low</div>344 <div class="sub">Shoes</div>345 </div>346 </div>347 348 <!-- Card 4 -->349 <div class="card">350 <div class="img">[IMG: Nike Air Force 1 Low Billie]351 <div class="heart-wrap">352 <svg class="heart-icon" viewBox="0 0 24 24">353 <path d="M12 21s-6-4.6-8.3-7C1 10.3 2.9 6.5 6.4 6.5c2 0 3.3 1.3 3.6 2 0.3-0.7 1.6-2 3.6-2 3.5 0 5.4 3.8 2.7 7.5C18 16.4 12 21 12 21z"/>354 </svg>355 </div>356 </div>357 <div class="info">358 <div class="title">Nike Air Force 1 Low Billie</div>359 <div class="sub">Shoes</div>360 </div>361 </div>362 363 </div>364 365 <!-- Bottom labels shown under last row images -->366 <div class="bottom-labels">367 <div class="bottom-label">Nike Dunk Low</div>368 <div class="bottom-label">Nike Air Force 1 Low Billie</div>369 </div>370 371 </div>372 </div>373 374 <!-- Floating filter button -->375 <div class="fab">376 <svg class="slider-icon" viewBox="0 0 64 64">377 <line x1="12" y1="20" x2="52" y2="20" />378 <circle cx="26" cy="20" r="5" fill="#111"/>379 <line x1="12" y1="44" x2="52" y2="44" />380 <circle cx="38" cy="44" r="5" fill="#111"/>381 </svg>382 </div>383 384 <!-- Home indicator -->385 <div class="home-indicator"></div>386 387</div>388</body>389</html>