GD-ML/AndroidCode
13.4k
1<html lang="en">2<head>3<meta charset="UTF-8">4<meta name="viewport" content="width=1080, initial-scale=1.0">5<title>Myntra Nike Shoes Listing - Mock</title>6<style>7 body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }8 #render-target {9 width: 1080px;10 height: 2400px;11 position: relative;12 overflow: hidden;13 background: #ffffff;14 color: #202124;15 }16 17 /* Status bar */18 .status-bar {19 height: 72px;20 padding: 0 24px;21 display: flex;22 align-items: center;23 justify-content: space-between;24 color: #202124;25 font-weight: 600;26 font-size: 30px;27 }28 .status-icons { display: flex; gap: 22px; align-items: center; }29 .dot { width: 10px; height: 10px; background: #999; border-radius: 50%; display: inline-block; }30 .sb-icon { width: 26px; height: 26px; background: #bbb; border-radius: 3px; }31 32 /* Top app bar */33 .app-bar {34 height: 120px;35 padding: 0 24px;36 display: flex;37 align-items: center;38 gap: 20px;39 border-bottom: 1px solid #eee;40 }41 .back-btn {42 width: 60px; height: 60px; border-radius: 30px;43 display: flex; align-items: center; justify-content: center;44 }45 .title-wrap { flex: 1; }46 .title { font-size: 44px; font-weight: 700; }47 .subtitle { font-size: 26px; color: #6b7280; margin-top: 4px; }48 .app-actions { display: flex; gap: 28px; }49 .icon-btn { width: 56px; height: 56px; border-radius: 28px; display: flex; align-items: center; justify-content: center; }50 51 /* Filter chips row */52 .chips {53 display: flex;54 gap: 16px;55 padding: 20px 24px;56 overflow: hidden;57 }58 .chip {59 display: inline-flex;60 align-items: center;61 gap: 14px;62 padding: 18px 26px;63 border: 1px solid #e5e7eb;64 border-radius: 18px;65 background: #fff;66 font-size: 28px;67 box-shadow: 0 1px 0 rgba(0,0,0,0.03);68 white-space: nowrap;69 }70 .chip .chip-ico { width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; }71 .chip.badge { background: #fff; }72 73 /* Promo banner */74 .promo {75 margin: 6px 24px 16px;76 height: 180px;77 border-radius: 16px;78 background: linear-gradient(90deg,#fde7ef,#fff5e6);79 border: 1px solid #f1d7dc;80 display: flex;81 align-items: center;82 padding: 24px;83 gap: 26px;84 }85 .promo .truck {86 width: 100px; height: 100px; background: #fff; border: 1px solid #e3e3e3; border-radius: 12px;87 display: flex; align-items: center; justify-content: center; color: #888; font-size: 22px;88 }89 .promo .promo-text { flex: 1; }90 .promo .promo-text .h1 { font-size: 38px; font-weight: 800; }91 .promo .promo-text .h2 { font-size: 30px; margin-top: 6px; color: #6b7280; }92 .promo .coupon {93 display: flex; align-items: center; gap: 18px;94 }95 .tag {96 padding: 10px 16px;97 background: #ffebee;98 border: 1px dashed #e57373;99 border-radius: 10px;100 color: #e53935;101 font-weight: 700;102 font-size: 26px;103 }104 .code {105 padding: 10px 18px;106 background: #fff; border: 2px dashed #f4a261; border-radius: 10px; font-weight: 800; color: #333; font-size: 28px;107 }108 109 /* Slider banner */110 .brand-slider {111 margin: 0 24px 20px;112 height: 300px;113 display: flex;114 gap: 20px;115 }116 .slide {117 flex: 1;118 border: 2px solid #bdbdbd;119 background: #e0e0e0;120 border-radius: 12px;121 display: flex; align-items: center; justify-content: center;122 color: #616161; font-weight: 600; font-size: 30px;123 }124 .indicator {125 display: flex; gap: 14px; justify-content: center; margin-bottom: 14px;126 }127 .dot-ind { width: 16px; height: 16px; border-radius: 9px; background: #212121; opacity: 0.7; }128 .dot-ind.dim { background: #bbb; opacity: 0.8; }129 130 /* Grid */131 .grid {132 display: grid;133 grid-template-columns: 1fr 1fr;134 padding: 10px 0 120px;135 gap: 0;136 }137 .card {138 width: 540px;139 padding-bottom: 22px;140 border-right: 1px solid #f1f1f1;141 border-bottom: 10px solid #f8f8f8;142 position: relative;143 }144 .card-pad { padding: 0 24px; }145 .season-flag {146 position: absolute; top: 8px; left: 24px;147 background: #ffebf1; color: #ef4770; font-weight: 800;148 font-size: 22px; padding: 8px 16px; border-radius: 10px;149 }150 .product-img {151 margin: 90px 24px 12px;152 height: 360px;153 border: 1px solid #bdbdbd; background: #e0e0e0; border-radius: 8px;154 display: flex; align-items: center; justify-content: center; color: #616161; font-size: 28px; text-align: center;155 }156 .fav {157 position: absolute; right: 28px; top: 420px; width: 64px; height: 64px; border-radius: 32px;158 display: flex; align-items: center; justify-content: center; background: #fff; border: 1px solid #e5e7eb;159 }160 .rating { display: flex; align-items: center; gap: 14px; color: #374151; font-size: 28px; margin: 8px 24px; }161 .brand { font-size: 34px; font-weight: 800; margin: 10px 24px 4px; }162 .desc { font-size: 28px; color: #4b5563; margin: 0 24px 12px; }163 .price-row { display: flex; align-items: baseline; gap: 12px; margin: 4px 24px; }164 .price-strike { color: #9ca3af; text-decoration: line-through; font-size: 28px; }165 .price { font-size: 34px; font-weight: 800; }166 .off { color: #ef4444; font-weight: 800; font-size: 26px; }167 .best { color: #1b7f4a; font-weight: 800; margin: 8px 24px 0; font-size: 28px; }168 .muted { color: #6b7280; font-weight: 500; }169 .divider-bottom { height: 16px; background: #f7f7f7; }170 171 /* Bottom bar */172 .bottom-bar {173 position: absolute; bottom: 0; left: 0; right: 0;174 height: 120px; background: #fff; border-top: 1px solid #e5e7eb;175 display: grid; grid-template-columns: repeat(3,1fr);176 }177 .bb-item {178 display: flex; align-items: center; justify-content: center; gap: 12px; font-weight: 800; font-size: 32px;179 }180 181 /* Simple SVG icon styles */182 svg { display: block; }183</style>184</head>185<body>186<div id="render-target">187 188 <!-- Android-like status bar -->189 <div class="status-bar">190 <div>10:46</div>191 <div class="status-icons">192 <span class="sb-icon"></span>193 <span class="dot"></span>194 <span class="sb-icon"></span>195 <span class="sb-icon"></span>196 </div>197 </div>198 199 <!-- App bar -->200 <div class="app-bar">201 <div class="back-btn" aria-label="Back">202 <svg width="40" height="40" viewBox="0 0 24 24">203 <path d="M14 6l-6 6 6 6" fill="none" stroke="#111" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>204 </svg>205 </div>206 <div class="title-wrap">207 <div class="title">NIKE SHOES</div>208 <div class="subtitle">729 Items</div>209 </div>210 <div class="app-actions">211 <div class="icon-btn" aria-label="Search">212 <svg width="36" height="36" viewBox="0 0 24 24">213 <circle cx="11" cy="11" r="7" stroke="#111" stroke-width="2" fill="none"></circle>214 <path d="M20 20l-3.5-3.5" stroke="#111" stroke-width="2" stroke-linecap="round"/>215 </svg>216 </div>217 <div class="icon-btn" aria-label="Wishlist">218 <svg width="36" height="36" viewBox="0 0 24 24">219 <path d="M12 21s-7-4.6-9-8.5C1 9 2.5 6 6 6c2 0 3.2 1.1 4 2 0.8-0.9 2-2 4-2 3.5 0 5 3 3 6.5S12 21 12 21z" fill="none" stroke="#111" stroke-width="2" stroke-linejoin="round"/>220 </svg>221 </div>222 <div class="icon-btn" aria-label="Bag">223 <svg width="36" height="36" viewBox="0 0 24 24">224 <path d="M6 8h12l-1 12H7L6 8z" fill="none" stroke="#111" stroke-width="2"/>225 <path d="M9 8V6a3 3 0 0 1 6 0v2" fill="none" stroke="#111" stroke-width="2"/>226 </svg>227 </div>228 </div>229 </div>230 231 <!-- Chips -->232 <div class="chips">233 <div class="chip">234 <span class="chip-ico">235 <svg width="24" height="24" viewBox="0 0 24 24"><path d="M3 12h18" stroke="#ff9800" stroke-width="2"/></svg>236 </span>237 Crazy Deal238 </div>239 <div class="chip">240 <span class="chip-ico">241 <svg width="24" height="24" viewBox="0 0 24 24"><circle cx="12" cy="8" r="4" stroke="#374151" stroke-width="2" fill="none"/><path d="M3 21c2-4 6-6 9-6s7 2 9 6" stroke="#374151" stroke-width="2" fill="none"/></svg>242 </span>243 Top Brands244 </div>245 <div class="chip">246 <span class="chip-ico">247 <svg width="24" height="24" viewBox="0 0 24 24"><path d="M12 2l2.5 5 5.5.8-4 3.9.9 5.6L12 15l-4.9 2.3.9-5.6-4-3.9 5.5-.8L12 2z" fill="none" stroke="#374151" stroke-width="2"/></svg>248 </span>249 Top Rated250 </div>251 <div class="chip badge">252 <span class="chip-ico">253 <svg width="24" height="24" viewBox="0 0 24 24">254 <circle cx="12" cy="12" r="10" fill="#ff3f6c"/>255 </svg>256 </span>257 Only258 </div>259 </div>260 261 <!-- Promo banner -->262 <div class="promo">263 <div class="truck">[IMG: Truck]</div>264 <div class="promo-text">265 <div class="h1">Free Shipping on</div>266 <div class="h1">your first order</div>267 <div class="coupon" style="margin-top:10px;">268 <span class="tag">₹200 OFF</span>269 <span class="h2">₹200 off for you</span>270 <span class="code">MYNTRA200</span>271 </div>272 </div>273 </div>274 275 <!-- Slider -->276 <div class="indicator" style="margin-top:-6px;">277 <div class="dot-ind"></div>278 <div class="dot-ind dim"></div>279 </div>280 <div class="brand-slider">281 <div class="slide">[IMG: Nike Street Skate Visual]</div>282 <div class="slide">[IMG: Nike Brand Store Banner]</div>283 </div>284 285 <!-- Product grid -->286 <div class="grid">287 <!-- Card 1 -->288 <div class="card">289 <div class="season-flag">NEW SEASON</div>290 <div class="product-img">[IMG: Black Nike Revolution 5 Running Shoes]</div>291 <div class="fav">292 <svg width="30" height="30" viewBox="0 0 24 24">293 <path d="M12 21s-7-4.6-9-8.5C1 9 2.5 6 6 6c2 0 3.2 1.1 4 2 0.8-0.9 2-2 4-2 3.5 0 5 3 3 6.5S12 21 12 21z" fill="none" stroke="#374151" stroke-width="2" stroke-linejoin="round"/>294 </svg>295 </div>296 <div class="rating">297 <span>4.3</span>298 <svg width="22" height="22" viewBox="0 0 24 24"><path d="M12 3l2.2 4.5 5 .7-3.6 3.5.9 5-4.5-2.4-4.5 2.4.9-5L4.8 8.2l5-.7L12 3z" fill="#16a34a"/></svg>299 <span>1.1k</span>300 </div>301 <div class="brand">Nike</div>302 <div class="desc">Revolution 5 Running Shoes</div>303 <div class="price-row">304 <div class="price-strike">₹3,695</div>305 <div class="price">₹2,882</div>306 <div class="off">22% OFF</div>307 </div>308 <div class="best">Best Price ₹2,522 <span class="muted">with coupon</span></div>309 </div>310 311 <!-- Card 2 -->312 <div class="card">313 <div class="season-flag">NEW SEASON</div>314 <div class="product-img">[IMG: Beige Women Running Shoes]</div>315 <div class="fav" style="top: 420px;">316 <svg width="30" height="30" viewBox="0 0 24 24">317 <path d="M12 21s-7-4.6-9-8.5C1 9 2.5 6 6 6c2 0 3.2 1.1 4 2 0.8-0.9 2-2 4-2 3.5 0 5 3 3 6.5S12 21 12 21z" fill="none" stroke="#374151" stroke-width="2" stroke-linejoin="round"/>318 </svg>319 </div>320 <div class="rating">321 <span>4.1</span>322 <svg width="22" height="22" viewBox="0 0 24 24"><path d="M12 3l2.2 4.5 5 .7-3.6 3.5.9 5-4.5-2.4-4.5 2.4.9-5L4.8 8.2l5-.7L12 3z" fill="#16a34a"/></svg>323 <span>103</span>324 </div>325 <div class="brand">Nike</div>326 <div class="desc">Women Running Shoes</div>327 <div class="price-row">328 <div class="price">₹3,995</div>329 </div>330 <div class="best">Best Price ₹3,595 <span class="muted">with coupon</span></div>331 </div>332 333 <!-- Row filler to hint more content -->334 <div class="card">335 <div class="season-flag">NEW SEASON</div>336 <div class="product-img">[IMG: Top view Shoe Placeholder]</div>337 </div>338 <div class="card">339 <div class="season-flag">NEW SEASON</div>340 <div class="product-img">[IMG: Dark Theme Banner Placeholder]</div>341 </div>342 </div>343 344 <!-- Bottom bar -->345 <div class="bottom-bar">346 <div class="bb-item">347 <svg width="30" height="30" viewBox="0 0 24 24"><path d="M7 12h10" stroke="#111" stroke-width="2" stroke-linecap="round"/></svg>348 GENDER349 </div>350 <div class="bb-item">351 <svg width="30" height="30" viewBox="0 0 24 24"><path d="M12 4v16M4 12h16" stroke="#111" stroke-width="2" stroke-linecap="round"/></svg>352 SORT353 </div>354 <div class="bb-item">355 <svg width="30" height="30" viewBox="0 0 24 24"><path d="M4 6h16M7 12h10M10 18h4" stroke="#111" stroke-width="2" stroke-linecap="round"/></svg>356 FILTER357 </div>358 </div>359 360</div>361</body>362</html>