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 UI Mock</title>6<style>7 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }8 #render-target {9 width: 1080px; height: 2400px;10 position: relative; overflow: hidden;11 background: #ffffff; color: #222;12 }13 14 /* Top App Bar */15 .app-bar {16 height: 100px;17 padding: 0 30px;18 display: flex; align-items: center; justify-content: space-between;19 border-bottom: 1px solid #ececec;20 }21 .left-actions { display: flex; align-items: center; gap: 28px; }22 .right-actions { display: flex; align-items: center; gap: 40px; }23 .icon-btn { width: 46px; height: 46px; display: inline-flex; align-items: center; justify-content: center; }24 .icon { width: 36px; height: 36px; fill: none; stroke: #333; stroke-width: 3; }25 26 /* Categories Grid */27 .category-section { padding: 20px 24px 10px; }28 .cat-grid { display: flex; flex-wrap: wrap; }29 .cat-item {30 width: 20%;31 text-align: center;32 margin-bottom: 28px;33 }34 .circle {35 width: 160px; height: 160px; border-radius: 50%;36 margin: 0 auto 12px;37 display: flex; align-items: center; justify-content: center;38 box-shadow: inset 0 0 0 1px rgba(0,0,0,0.06);39 }40 .circle .img {41 width: 120px; height: 120px;42 background: #E0E0E0; border: 1px solid #BDBDBD;43 display: flex; align-items: center; justify-content: center; font-size: 20px; color: #757575; text-align: center; padding: 8px;44 border-radius: 12px;45 }46 .cat-label { font-size: 32px; font-weight: 600; color: #3b3b3b; }47 48 /* Coupon Banner */49 .coupon {50 margin: 8px 16px 18px;51 background: #fff8e0;52 border: 2px dashed #e6d18d;53 border-radius: 18px;54 display: grid;55 grid-template-columns: 1fr 6px 420px;56 align-items: center;57 min-height: 180px;58 }59 .coupon-left { padding: 24px 28px; }60 .coupon-left .new { font-size: 34px; color: #666; letter-spacing: 0.5px; }61 .coupon-left .big { font-size: 64px; font-weight: 800; margin: 6px 0; }62 .coupon-left .small { font-size: 32px; color: #444; }63 .coupon-divider { height: 100%; border-left: 3px dashed #d8c27a; }64 .coupon-right { padding: 24px; display: flex; flex-direction: column; align-items: center; gap: 16px; }65 .coupon-right .code-label { font-size: 34px; color: #444; }66 .coupon-right .code {67 background: #f5d07c; padding: 12px 26px; border-radius: 10px;68 font-size: 40px; font-weight: 800; color: #2d2d2d;69 }70 71 /* Hero Banner */72 .hero {73 margin: 0 0 10px;74 height: 740px;75 position: relative;76 }77 .hero .img {78 position: absolute; inset: 0;79 background: #E0E0E0; border-top: 1px solid #BDBDBD; border-bottom: 1px solid #BDBDBD;80 display: flex; align-items: center; justify-content: center; color: #757575; font-size: 32px;81 }82 .hero .title {83 position: absolute; left: 24px; top: 24px;84 color: #222; font-size: 60px; line-height: 1.05; font-weight: 800;85 }86 .hero .subtitle { position: absolute; left: 26px; top: 160px; color: #666; font-size: 36px; }87 .hero .offer {88 position: absolute; left: 26px; bottom: 120px;89 color: #fff; font-size: 56px; font-weight: 800; text-shadow: 0 2px 8px rgba(0,0,0,0.45);90 }91 .hero .chevron {92 position: absolute; right: 26px; bottom: 116px;93 width: 72px; height: 72px; border-radius: 50%; background: rgba(255,255,255,0.85);94 display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 8px rgba(0,0,0,0.2);95 }96 .dots { display: flex; gap: 18px; justify-content: center; align-items: center; margin-top: 8px; }97 .dot { width: 18px; height: 18px; border-radius: 50%; background: #d0d0d0; }98 .dot.active { background: #7aa0ff; }99 100 /* Shop by Age */101 .age-section { padding: 20px 24px; }102 .age-title {103 font-size: 72px; font-weight: 900; text-align: center; letter-spacing: 1px;104 }105 .age-title .decor { display: inline-block; width: 22px; height: 22px; background: #c9c9ff; border-radius: 50%; margin: 0 18px 10px; }106 .age-grid { display: flex; gap: 24px; padding-top: 24px; }107 .age-card {108 flex: 1;109 background: #fff9d8; border: 1px solid #eee5aa; border-radius: 48px;110 height: 320px; padding: 28px; position: relative;111 }112 .age-card h3 { margin: 0; font-size: 40px; font-weight: 800; }113 .age-card .range { font-size: 28px; color: #6b6b6b; margin-top: 6px; }114 .age-card .img {115 position: absolute; left: 28px; right: 28px; bottom: 22px;116 height: 160px;117 background: #E0E0E0; border: 1px solid #BDBDBD;118 display: flex; align-items: center; justify-content: center; color: #757575; font-size: 24px; border-radius: 16px;119 }120 121 /* Bottom gesture bar */122 .gesture-bar {123 position: absolute; left: 50%; transform: translateX(-50%);124 bottom: 26px; width: 420px; height: 12px; border-radius: 8px; background: #cccccc;125 }126 127 /* Circle background colors (approximate to screenshot) */128 .bg1 { background: #f0f5ff; }129 .bg2 { background: #fff0c7; }130 .bg3 { background: #e6f5ff; }131 .bg4 { background: #f9f1ff; }132 .bg5 { background: #ecfbff; }133 .bg6 { background: #eefdd9; }134 .bg7 { background: #f2f5ff; }135 .bg8 { background: #efe8ff; }136 .bg9 { background: #fff2f0; }137 .bg10 { background: #e9f8ff; }138 139 /* Small label under circles tweak */140 .cat-label { font-size: 30px; }141</style>142</head>143<body>144<div id="render-target">145 146 <!-- Top App Bar -->147 <div class="app-bar">148 <div class="left-actions">149 <div class="icon-btn" aria-label="Back">150 <svg class="icon" viewBox="0 0 24 24">151 <path d="M14 5l-7 7 7 7" />152 </svg>153 </div>154 </div>155 <div class="right-actions">156 <div class="icon-btn" aria-label="Search">157 <svg class="icon" viewBox="0 0 24 24">158 <circle cx="10.5" cy="10.5" r="6.8"></circle>159 <path d="M16 16l5 5"></path>160 </svg>161 </div>162 <div class="icon-btn" aria-label="Wishlist">163 <svg class="icon" viewBox="0 0 24 24">164 <path d="M12 20s-7-4.5-7-9.5A4.5 4.5 0 0 1 12 7a4.5 4.5 0 0 1 7 3.5C19 15.5 12 20 12 20z"></path>165 </svg>166 </div>167 <div class="icon-btn" aria-label="Bag">168 <svg class="icon" viewBox="0 0 24 24">169 <path d="M4 9h16l-2 11H6L4 9z"></path>170 <path d="M8 9V7a4 4 0 0 1 8 0v2"></path>171 </svg>172 </div>173 </div>174 </div>175 176 <!-- Category Grid -->177 <div class="category-section">178 <div class="cat-grid">179 <div class="cat-item">180 <div class="circle bg1"><div class="img">[IMG: New Season Kids Outfits]</div></div>181 <div class="cat-label">NEW SEASON</div>182 </div>183 <div class="cat-item">184 <div class="circle bg2"><div class="img">[IMG: Girls Fashion]</div></div>185 <div class="cat-label">GIRLS</div>186 </div>187 <div class="cat-item">188 <div class="circle bg3"><div class="img">[IMG: Boys Fashion]</div></div>189 <div class="cat-label">BOYS</div>190 </div>191 <div class="cat-item">192 <div class="circle bg4"><div class="img">[IMG: Infants Clothing]</div></div>193 <div class="cat-label">INFANTS</div>194 </div>195 <div class="cat-item">196 <div class="circle bg5"><div class="img">[IMG: Teens Apparel]</div></div>197 <div class="cat-label">TEENS</div>198 </div>199 200 <div class="cat-item">201 <div class="circle bg6"><div class="img">[IMG: Ethnic Wear]</div></div>202 <div class="cat-label">ETHNIC WEAR</div>203 </div>204 <div class="cat-item">205 <div class="circle bg7"><div class="img">[IMG: International Brands]</div></div>206 <div class="cat-label">INTERNATIONAL BRANDS</div>207 </div>208 <div class="cat-item">209 <div class="circle bg8"><div class="img">[IMG: Kids Footwear]</div></div>210 <div class="cat-label">FOOTWEAR</div>211 </div>212 <div class="cat-item">213 <div class="circle bg9"><div class="img">[IMG: Baby Care Product]</div></div>214 <div class="cat-label">BABY CARE</div>215 </div>216 <div class="cat-item">217 <div class="circle bg10"><div class="img">[IMG: Toys]</div></div>218 <div class="cat-label">TOYS</div>219 </div>220 </div>221 </div>222 223 <!-- Coupon -->224 <div class="coupon">225 <div class="coupon-left">226 <div class="new">NEW ON MYNTRA?</div>227 <div class="big">FLAT ₹300 OFF</div>228 <div class="small">JUST FOR YOU!</div>229 </div>230 <div class="coupon-divider"></div>231 <div class="coupon-right">232 <div class="code-label">CODE :</div>233 <div class="code">MYNTRA300</div>234 </div>235 </div>236 237 <!-- Hero Banner -->238 <div class="hero">239 <div class="img">[IMG: Beachside Kidswear Campaign]</div>240 <div class="title">Indian<br>at Heart</div>241 <div class="subtitle">AUG 18-22</div>242 <div class="offer">Kids Wear 50-80% OFF</div>243 <div class="chevron">244 <svg viewBox="0 0 24 24" width="34" height="34" stroke="#333" fill="none" stroke-width="3">245 <path d="M9 6l6 6-6 6"></path>246 </svg>247 </div>248 </div>249 250 <div class="dots">251 <div class="dot active"></div>252 <div class="dot"></div>253 <div class="dot"></div>254 <div class="dot"></div>255 <div class="dot"></div>256 <div class="dot"></div>257 <div class="dot"></div>258 <div class="dot"></div>259 </div>260 261 <!-- Shop by Age -->262 <div class="age-section">263 <div class="age-title"><span class="decor"></span>SHOP BY AGE<span class="decor"></span></div>264 <div class="age-grid">265 <div class="age-card">266 <h3>Babies</h3>267 <div class="range">0-2 Years</div>268 <div class="img">[IMG: Baby Apparel Preview]</div>269 </div>270 <div class="age-card">271 <h3>Toddlers</h3>272 <div class="range">2-4 Years</div>273 <div class="img">[IMG: Toddler Clothing Preview]</div>274 </div>275 <div class="age-card">276 <h3>Kids</h3>277 <div class="range">4-8 Years</div>278 <div class="img">[IMG: Kids Clothing Preview]</div>279 </div>280 <div class="age-card">281 <h3>Tweens</h3>282 <div class="range">8-12 Years</div>283 <div class="img">[IMG: Tweens Apparel Preview]</div>284 </div>285 </div>286 </div>287 288 <!-- Bottom gesture bar -->289 <div class="gesture-bar"></div>290</div>291</body>292</html>