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 Kids - 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: #222;15 }16 17 /* Status bar */18 .status-bar {19 height: 80px;20 padding: 0 32px;21 display: flex;22 align-items: center;23 justify-content: space-between;24 font-size: 28px;25 color: #111;26 }27 .status-icons { display: flex; gap: 28px; align-items: center; }28 .ic { width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; }29 30 /* Top navigation */31 .top-nav {32 height: 120px;33 padding: 0 24px;34 display: flex;35 align-items: center;36 justify-content: space-between;37 }38 .left-wrap { display: flex; align-items: center; gap: 16px; }39 .title {40 font-weight: 700;41 font-size: 40px;42 line-height: 1.1;43 }44 .subtitle {45 font-weight: 500;46 font-size: 26px;47 color: #666;48 }49 .nav-icons { display: flex; gap: 26px; align-items: center; }50 51 /* Filter chips */52 .chip-row {53 padding: 8px 16px 12px 16px;54 display: flex;55 gap: 16px;56 }57 .chip {58 display: inline-flex;59 align-items: center;60 gap: 12px;61 padding: 18px 22px;62 border: 1px solid #ddd;63 border-radius: 24px;64 font-size: 28px;65 color: #333;66 background: #fff;67 }68 69 /* Banner */70 .banner {71 margin: 8px 16px;72 height: 220px;73 border-radius: 16px;74 background: #fde9ef;75 display: grid;76 grid-template-columns: 1fr 1fr;77 overflow: hidden;78 border: 1px solid #ecc9d3;79 }80 .banner-left, .banner-right {81 padding: 24px;82 position: relative;83 }84 .banner-left .truck {85 position: absolute; left: 24px; bottom: 24px;86 width: 76px; height: 50px; background: #fff; border: 2px solid #c0c0c0; border-radius: 6px;87 }88 .banner-title { font-size: 34px; font-weight: 700; color: #333; }89 .banner-sub { font-size: 28px; color: #666; margin-top: 6px; }90 .coupon-stamp {91 position: absolute; right: 26px; top: 26px;92 background: #e43f5a; color: #fff; font-weight: 800;93 padding: 10px 16px; border-radius: 10px; font-size: 26px;94 transform: rotate(-12deg);95 }96 .banner-right .big { font-size: 34px; font-weight: 800; color: #333; }97 .code {98 display: inline-block; margin-top: 16px;99 padding: 12px 16px; border: 2px dashed #c0392b; border-radius: 10px;100 font-weight: 800; color: #222; background: #fff;101 }102 103 /* Dots */104 .dots { display: flex; justify-content: center; gap: 14px; margin-top: 8px; }105 .dot { width: 12px; height: 12px; border-radius: 50%; background: #9ea3a8; }106 .dot.active { background: #2d3a45; }107 108 /* Product grid */109 .products { padding: 12px 10px 0 10px; display: grid; grid-template-columns: 1fr 1fr; grid-gap: 14px; }110 .card { position: relative; }111 .img {112 background: #E0E0E0;113 border: 1px solid #BDBDBD;114 color: #666;115 display: flex; align-items: center; justify-content: center;116 text-align: center;117 font-size: 28px;118 }119 .img.tall { height: 740px; }120 .img.mid { height: 520px; }121 .heart {122 position: absolute; right: 26px; top: 20px; background: #ffffffdd; border-radius: 50%;123 width: 64px; height: 64px; display: flex; align-items: center; justify-content: center; border: 1px solid #ddd;124 }125 .badge {126 position: absolute; left: 18px; top: 18px; background: #ffffffee;127 padding: 8px 14px; border-radius: 10px; font-size: 22px; font-weight: 700; border: 1px solid #ddd;128 }129 .rating-chip {130 position: absolute; left: 24px; bottom: 12px; background: #fff; border: 1px solid #ddd;131 padding: 10px 14px; border-radius: 18px; font-size: 26px; display: inline-flex; gap: 10px; align-items: center;132 }133 .details { padding: 14px 10px 18px 10px; }134 .brand { font-size: 34px; font-weight: 800; margin-bottom: 6px; }135 .desc { font-size: 26px; color: #666; margin-bottom: 8px; }136 .price-row { font-size: 28px; display: flex; gap: 12px; align-items: baseline; }137 .strike { text-decoration: line-through; color: #6b6b6b; }138 .offer { color: #111; font-weight: 800; }139 .off { color: #e67e22; font-weight: 700; }140 .best { font-size: 26px; color: #0a8f37; margin-top: 6px; }141 .shipping { margin-top: 6px; font-size: 24px; color: #666; display: flex; align-items: center; gap: 10px; }142 .express { display: inline-block; padding: 4px 10px; border: 1px solid #d00; color: #d00; border-radius: 6px; font-size: 22px; font-weight: 700; }143 144 /* Bottom action bar */145 .bottom-bar {146 position: absolute; left: 0; right: 0; bottom: 0;147 height: 140px; border-top: 1px solid #ddd; background: #fff;148 display: grid; grid-template-columns: 1fr 1fr 1fr; align-items: center; text-align: center;149 }150 .bottom-item { color: #222; font-weight: 800; font-size: 30px; display: flex; flex-direction: column; gap: 8px; align-items: center; justify-content: center; }151 .bottom-item .label { font-size: 30px; }152 .handle {153 position: absolute; left: 50%; transform: translateX(-50%);154 bottom: 16px; width: 360px; height: 8px; background: #c7c7c7; border-radius: 6px;155 }156</style>157</head>158<body>159<div id="render-target">160 161 <!-- Status bar -->162 <div class="status-bar">163 <div>1:00</div>164 <div class="status-icons">165 <span class="ic">166 <svg viewBox="0 0 24 24" width="28" height="28"><path d="M6 3l12 9-12 9V3z" fill="#555"/></svg>167 </span>168 <span class="ic">169 <svg viewBox="0 0 24 24" width="28" height="28"><path d="M12 3a9 9 0 100 18 9 9 0 000-18zm1 5v6l5 3" fill="none" stroke="#555" stroke-width="2"/></svg>170 </span>171 <span class="ic">172 <svg viewBox="0 0 24 24" width="28" height="28"><path d="M3 18h18v3H3zM6 3h12l-1 12H7z" fill="#555"/></svg>173 </span>174 </div>175 </div>176 177 <!-- Top navigation -->178 <div class="top-nav">179 <div class="left-wrap">180 <div class="ic" style="width:48px;height:48px;">181 <svg viewBox="0 0 24 24" width="48" height="48"><path d="M15 18l-6-6 6-6" stroke="#222" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>182 </div>183 <div>184 <div class="title">KIDS</div>185 <div class="subtitle">166601 Items</div>186 </div>187 </div>188 <div class="nav-icons">189 <div class="ic" style="width:48px;height:48px;">190 <svg viewBox="0 0 24 24" width="44" height="44"><circle cx="11" cy="11" r="7" stroke="#222" stroke-width="2" fill="none"/><path d="M20 20l-3.5-3.5" stroke="#222" stroke-width="2"/></svg>191 </div>192 <div class="ic" style="width:48px;height:48px;">193 <svg viewBox="0 0 24 24" width="44" height="44"><path d="M12 21l-1.5-1.3C5 15 3 12 3 9.5 3 7 5 5 7.5 5c1.6 0 3.1.9 3.9 2.2C12.9 5.9 14.4 5 16 5 18.5 5 20.5 7 20.5 9.5c0 2.5-2 5.5-7.5 10.2L12 21z" fill="none" stroke="#222" stroke-width="2"/></svg>194 </div>195 <div class="ic" style="width:48px;height:48px;">196 <svg viewBox="0 0 24 24" width="44" height="44"><path d="M6 6h15l-2 12H6L4 3H1" fill="none" stroke="#222" stroke-width="2"/><circle cx="9" cy="21" r="1.5" fill="#222"/><circle cx="18" cy="21" r="1.5" fill="#222"/></svg>197 </div>198 </div>199 </div>200 201 <!-- Filter chips -->202 <div class="chip-row">203 <div class="chip">204 <svg width="28" height="28" viewBox="0 0 24 24"><path d="M12 2l3 6 6 1-4 4 1 6-6-3-6 3 1-6-4-4 6-1 3-6z" fill="#444"/></svg>205 <span>Top Brands</span>206 </div>207 <div class="chip">208 <svg width="28" height="28" viewBox="0 0 24 24"><circle cx="12" cy="12" r="9" stroke="#444" stroke-width="2" fill="none"/><path d="M3 12h18M12 3c3 3 3 15 0 18" stroke="#444" stroke-width="2"/></svg>209 <span>Global Brands</span>210 </div>211 <div class="chip">212 <svg width="28" height="28" viewBox="0 0 24 24"><path d="M4 14l6-6 4 4 6-6" fill="none" stroke="#444" stroke-width="2"/><path d="M4 20h16" stroke="#444" stroke-width="2"/></svg>213 <span>Hot Trends</span>214 </div>215 </div>216 217 <!-- Banner -->218 <div class="banner">219 <div class="banner-left">220 <div class="banner-title">Free Shipping on</div>221 <div class="banner-title">your first order</div>222 <div class="banner-sub">₹200 OFF</div>223 <div class="coupon-stamp">₹200</div>224 <div class="truck"></div>225 </div>226 <div class="banner-right" style="background:#ffe8d6;">227 <div class="big">₹200 off for you</div>228 <div class="code">MYNTRA200</div>229 </div>230 </div>231 232 <!-- Dots -->233 <div class="dots">234 <div class="dot"></div>235 <div class="dot active"></div>236 </div>237 238 <!-- Products grid -->239 <div class="products">240 241 <!-- Card 1 -->242 <div class="card">243 <div class="img tall">[IMG: Girl in printed kurta set with yellow bottoms]</div>244 <div class="heart">245 <svg viewBox="0 0 24 24" width="30" height="30"><path d="M12 21l-1.5-1.3C5 15 3 12 3 9.5 3 7 5 5 7.5 5c1.6 0 3.1.9 3.9 2.2C12.9 5.9 14.4 5 16 5 18.5 5 20.5 7 20.5 9.5c0 2.5-2 5.5-7.5 10.2L12 21z" fill="none" stroke="#666" stroke-width="2"/></svg>246 </div>247 <div class="details">248 <div class="brand">BAESD</div>249 <div class="desc">Girls Printed Kurta Sets</div>250 <div class="price-row">251 <span class="strike">₹3,999</span>252 <span class="offer">₹799</span>253 <span class="off">Rs.3200 OFF</span>254 </div>255 <div class="best">Best Price ₹654 with coupon</div>256 </div>257 </div>258 259 <!-- Card 2 -->260 <div class="card">261 <div class="img tall">[IMG: Girl wearing teal jacket over pink lehenga choli]</div>262 <div class="heart">263 <svg viewBox="0 0 24 24" width="30" height="30"><path d="M12 21l-1.5-1.3C5 15 3 12 3 9.5 3 7 5 5 7.5 5c1.6 0 3.1.9 3.9 2.2C12.9 5.9 14.4 5 16 5 18.5 5 20.5 7 20.5 9.5c0 2.5-2 5.5-7.5 10.2L12 21z" fill="none" stroke="#666" stroke-width="2"/></svg>264 </div>265 <div class="rating-chip">266 <span>3.8 ★</span><span style="color:#666;">212</span>267 </div>268 <div class="details">269 <div class="brand">Bitiya by Bhama</div>270 <div class="desc">Ready to Wear Lehenga Choli</div>271 <div class="price-row">272 <span class="strike">₹3,999</span>273 <span class="offer">₹799</span>274 <span class="off">80% OFF</span>275 </div>276 <div class="best">Best Price ₹654 with coupon</div>277 <div class="shipping">278 <span class="express">EXPRESS</span>279 <span>1 Day Delivery</span>280 </div>281 </div>282 </div>283 284 <!-- Card 3 -->285 <div class="card">286 <div class="img mid">[IMG: Girl in floral top with black paper-bag pants]</div>287 <div class="badge">AD</div>288 <div class="details">289 <div class="brand">Trendy Kids</div>290 <div class="desc">Floral Top with Trousers</div>291 <div class="price-row">292 <span class="strike">₹1,999</span>293 <span class="offer">₹799</span>294 <span class="off">60% OFF</span>295 </div>296 <div class="best">Best Price ₹654 with coupon</div>297 </div>298 </div>299 300 <!-- Card 4 -->301 <div class="card">302 <div class="img mid">[IMG: Girl in yellow printed kurta sharara set with pink dupatta]</div>303 <div class="badge" style="left:18px; top:18px; background:#fef3d8; border-color:#f2c54c;">NEW</div>304 <div class="details">305 <div class="brand">Aurelia Kids</div>306 <div class="desc">Kurta Sharara Set</div>307 <div class="price-row">308 <span class="strike">₹2,999</span>309 <span class="offer">₹1,099</span>310 <span class="off">63% OFF</span>311 </div>312 <div class="best">Best Price ₹999 with coupon</div>313 </div>314 </div>315 316 </div>317 318 <!-- Bottom action bar -->319 <div class="bottom-bar">320 <div class="bottom-item">321 <svg viewBox="0 0 24 24" width="40" height="40"><path d="M4 21V9l8-6 8 6v12H4zM9 21v-6h6v6" fill="none" stroke="#222" stroke-width="2"/></svg>322 <div class="label">GIRLS</div>323 </div>324 <div class="bottom-item">325 <svg viewBox="0 0 24 24" width="40" height="40"><path d="M12 3v18M3 12h18" stroke="#222" stroke-width="2"/></svg>326 <div class="label">SORT</div>327 </div>328 <div class="bottom-item">329 <svg viewBox="0 0 24 24" width="40" height="40"><path d="M4 6h16M7 12h10M10 18h4" stroke="#222" stroke-width="2" stroke-linecap="round"/></svg>330 <div class="label">FILTER</div>331 </div>332 <div class="handle"></div>333 </div>334 335</div>336</body>337</html>