GD-ML/AndroidCode
13.4k
1<html>2<head>3<meta charset="UTF-8">4<title>Printed Tops with Trousers - UI Mock</title>5<style>6 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }7 #render-target {8 position: relative;9 overflow: hidden;10 width: 1080px;11 height: 2400px;12 background: #ffffff;13 color: #222;14 }15 .status-bar {16 height: 60px;17 padding: 0 24px;18 display: flex;19 align-items: center;20 font-size: 28px;21 color: #333;22 }23 .status-icons {24 margin-left: auto;25 display: flex;26 gap: 18px;27 }28 .status-dot { width: 18px; height: 18px; border-radius: 50%; background:#999; }29 .topbar {30 height: 92px;31 display: flex;32 align-items: center;33 padding: 0 24px;34 border-bottom: 1px solid #eee;35 }36 .icon-btn {37 width: 60px; height: 60px; display:flex; align-items:center; justify-content:center;38 }39 .title {40 font-weight: 700;41 font-size: 36px;42 margin-left: 16px;43 }44 .topbar-actions {45 margin-left: auto;46 display: flex;47 gap: 18px;48 }49 .subtitle {50 font-size: 26px;51 color: #666;52 padding: 8px 24px 0 84px;53 }54 /* chips */55 .chip-row {56 padding: 20px 24px;57 display: flex;58 gap: 20px;59 }60 .chip {61 flex: none;62 display: flex;63 align-items: center;64 gap: 14px;65 padding: 18px 26px;66 border: 1px solid #ddd;67 border-radius: 16px;68 font-size: 28px;69 background: #fff;70 }71 .chip svg { width: 32px; height: 32px; }72 /* banner */73 .banner {74 margin: 12px 24px;75 background: #ffe8ef;76 border: 1px solid #f3cbd5;77 border-radius: 12px;78 padding: 24px;79 display: flex;80 align-items: center;81 justify-content: space-between;82 font-size: 30px;83 }84 .coupon {85 background: #fff0f5;86 padding: 10px 16px;87 border: 1px dashed #d77;88 border-radius: 10px;89 font-weight: 700;90 margin-top: 8px;91 display: inline-block;92 }93 /* carousel */94 .carousel-head {95 display: flex;96 align-items: center;97 padding: 10px 24px;98 font-size: 28px;99 color:#444;100 }101 .carousel {102 margin: 6px 24px 10px 24px;103 position: relative;104 height: 330px;105 border-radius: 10px;106 }107 .img-ph {108 background: #E0E0E0;109 border: 1px solid #BDBDBD;110 display: flex;111 justify-content: center;112 align-items: center;113 color: #757575;114 }115 .img-ph span { padding: 0 14px; text-align: center; font-size: 28px; }116 .carousel .img-ph { height: 330px; }117 .carousel-dots {118 position: absolute;119 bottom: 8px;120 left: 50%;121 transform: translateX(-50%);122 display: flex; gap: 10px;123 }124 .dot {125 width: 14px; height: 14px; border-radius: 50%;126 background: #d0d0d0;127 }128 .dot.active { background:#ef4f87; }129 /* grid */130 .grid {131 display: flex;132 padding: 0 24px;133 gap: 24px;134 }135 .card {136 width: 516px;137 background: #fff;138 border-radius: 8px;139 }140 .card-img { height: 640px; border-radius: 8px; }141 .card-content { padding: 14px; }142 .brand { font-size: 32px; font-weight: 700; }143 .title-small { font-size: 28px; color:#555; margin-top: 6px; }144 .price-row { display:flex; gap: 14px; align-items: baseline; margin-top: 10px; }145 .price-now { font-size: 32px; font-weight: 700; }146 .price-old { font-size: 26px; color:#777; text-decoration: line-through; }147 .discount { font-size: 26px; color:#e64a19; }148 .best-price { font-size: 28px; color:#1b8d4a; margin-top: 8px; }149 .delivery { font-size: 26px; color:#555; margin-top: 8px; }150 .wishlist {151 position: absolute;152 top: 16px; right: 16px;153 width: 56px; height: 56px; display:flex; align-items:center; justify-content:center;154 background:#fff; border-radius: 28px; border:1px solid #ddd;155 }156 .card-top {157 position: relative;158 }159 .tag {160 position: absolute;161 top: 16px; left: 16px;162 background: #ff6d6d;163 color: #fff;164 font-size: 24px;165 padding: 8px 12px;166 border-radius: 20px;167 font-weight: 700;168 }169 .rating-chip {170 position: absolute;171 bottom: 16px; left: 16px;172 background:#fff;173 border:1px solid #ddd;174 border-radius: 24px;175 padding: 6px 12px;176 display:flex; align-items:center; gap:10px;177 font-size: 26px;178 }179 .rating-count { color:#777; }180 /* small ad images */181 .row-ads {182 display:flex;183 gap:24px;184 padding: 12px 24px;185 }186 .small-ad {187 width: 516px;188 height: 230px;189 position: relative;190 border-radius: 10px;191 }192 .ad-badge {193 position: absolute;194 top: 12px; right: 12px;195 background:#f0f0f0; color:#666; border:1px solid #d5d5d5;196 font-size: 24px; padding:6px 10px; border-radius: 6px;197 }198 /* bottom bar */199 .bottom-bar {200 position: absolute;201 bottom: 0;202 left: 0;203 width: 1080px;204 border-top: 1px solid #eee;205 background:#fff;206 display:flex;207 justify-content: space-between;208 padding: 16px 24px;209 }210 .bottom-item {211 width: 32%;212 display:flex;213 align-items:center;214 justify-content:center;215 gap: 14px;216 font-size: 34px;217 color:#333;218 padding: 18px 0;219 border:1px solid #eee;220 border-radius: 12px;221 }222 /* simple utilities */223 .muted { color:#777; }224 .spacer-8 { height: 8px; }225</style>226</head>227<body>228<div id="render-target">229 230 <!-- Status bar -->231 <div class="status-bar">232 <div>1:03</div>233 <div class="status-icons">234 <div class="status-dot"></div>235 <div class="status-dot"></div>236 <div class="status-dot"></div>237 <div class="status-dot"></div>238 </div>239 </div>240 241 <!-- Top navigation bar -->242 <div class="topbar">243 <div class="icon-btn">244 <svg viewBox="0 0 24 24" width="36" height="36">245 <path d="M15 6l-6 6 6 6" stroke="#222" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>246 </svg>247 </div>248 <div class="title">PRINTED TOPS WITH TROUSERS</div>249 <div class="topbar-actions">250 <div class="icon-btn">251 <svg viewBox="0 0 24 24" width="32" height="32"><circle cx="11" cy="11" r="7" stroke="#222" stroke-width="2" fill="none"/><path d="M20 20l-3-3" stroke="#222" stroke-width="2" fill="none" stroke-linecap="round"/></svg>252 </div>253 <div class="icon-btn">254 <svg viewBox="0 0 24 24" width="32" height="32">255 <path d="M12 21s-7-4.4-7-10a5 5 0 0 1 9-3 5 5 0 0 1 9 3c0 5.6-7 10-7 10z" stroke="#222" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>256 </svg>257 </div>258 <div class="icon-btn">259 <svg viewBox="0 0 24 24" width="32" height="32">260 <path d="M6 6h14l-2 12H8L6 6z" stroke="#222" stroke-width="2" fill="none"/><circle cx="9" cy="21" r="1.8" fill="#222"/><circle cx="17" cy="21" r="1.8" fill="#222"/>261 </svg>262 </div>263 </div>264 </div>265 <div class="subtitle">2344 Items</div>266 267 <!-- Quick filter chips -->268 <div class="chip-row">269 <div class="chip">270 <svg viewBox="0 0 24 24"><path d="M12 2l3 6 6 .9-4.5 4.2L18 20l-6-3-6 3 1.5-6.9L3 8.9 9 8z" fill="none" stroke="#222" stroke-width="2"/></svg>271 <div>Top Brands</div>272 </div>273 <div class="chip">274 <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="9" stroke="#222" stroke-width="2" fill="none"/><path d="M3 12h18M12 3v18" stroke="#222" stroke-width="2"/></svg>275 <div>Global Brands</div>276 </div>277 <div class="chip">278 <svg viewBox="0 0 24 24"><path d="M12 2v6M12 16v6M4 12h6M14 12h6" stroke="#222" stroke-width="2" fill="none" stroke-linecap="round"/></svg>279 <div>Hot Trends</div>280 </div>281 </div>282 283 <!-- Promo banner -->284 <div class="banner">285 <div>286 <div style="display:flex; align-items:center; gap:12px;">287 <div style="width:40px; height:40px; background:#ef4f87; border-radius:6px;"></div>288 <div>Free Shipping on your first order</div>289 </div>290 </div>291 <div style="text-align:right;">292 <div style="font-weight:700;">₹200 off for you</div>293 <div class="coupon">MYNTRA200</div>294 </div>295 </div>296 297 <!-- Carousel -->298 <div class="carousel-head">299 <div style="flex:1;">Arrivals</div>300 <div style="width:40px; height:40px; border:1px solid #ccc; border-radius:20px; display:flex; align-items:center; justify-content:center;">301 <svg viewBox="0 0 24 24" width="24" height="24"><path d="M9 6l6 6-6 6" stroke="#222" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>302 </div>303 </div>304 <div class="carousel">305 <div class="img-ph card-img" style="height: 330px;"><span>[IMG: Carousel - Printed ethnic wear showcase]</span></div>306 <div class="carousel-dots">307 <div class="dot"></div>308 <div class="dot active"></div>309 <div class="dot"></div>310 <div class="dot"></div>311 </div>312 </div>313 314 <!-- Product grid -->315 <div class="grid">316 <!-- Left card -->317 <div class="card">318 <div class="card-top">319 <div class="img-ph card-img"><span>[IMG: Kids printed top & pyjamas on hanger]</span></div>320 <div class="wishlist">321 <svg viewBox="0 0 24 24" width="24" height="24">322 <path d="M12 21s-7-4.4-7-10a5 5 0 0 1 9-3 5 5 0 0 1 9 3c0 5.6-7 10-7 10z" stroke="#222" stroke-width="2" fill="none"/>323 </svg>324 </div>325 </div>326 <div class="card-content">327 <div class="brand">Chicco</div>328 <div class="title-small">Kids Printed Top & Pyjamas</div>329 <div class="price-row">330 <div class="price-old">₹1,999</div>331 <div class="price-now">₹999</div>332 <div class="discount">50% OFF</div>333 </div>334 <div class="best-price">Best Price ₹817 with coupon</div>335 <div class="delivery">Delivery by Aug 24</div>336 </div>337 </div>338 339 <!-- Right card -->340 <div class="card">341 <div class="card-top">342 <div class="tag">NEW SEASON</div>343 <div class="img-ph card-img"><span>[IMG: Printed top with trousers - studio shot]</span></div>344 <div class="rating-chip">345 <svg viewBox="0 0 24 24" width="24" height="24"><path d="M12 2l3 6 6 .9-4.5 4.2L18 20l-6-3-6 3 1.5-6.9L3 8.9 9 8z" fill="none" stroke="#ef4f87" stroke-width="2"/></svg>346 <div>4.2</div>347 <div class="rating-count">562</div>348 </div>349 <div class="wishlist">350 <svg viewBox="0 0 24 24" width="24" height="24">351 <path d="M12 21s-7-4.4-7-10a5 5 0 0 1 9-3 5 5 0 0 1 9 3c0 5.6-7 10-7 10z" stroke="#222" stroke-width="2" fill="none"/>352 </svg>353 </div>354 </div>355 <div class="card-content">356 <div class="brand">anayna</div>357 <div class="title-small">Printed Top with Trousers</div>358 <div class="price-row">359 <div class="price-old">₹3,450</div>360 <div class="price-now">₹1,449</div>361 <div class="discount">58% OFF</div>362 </div>363 <div class="best-price">Best Price ₹1,207 with coupon</div>364 </div>365 </div>366 </div>367 368 <!-- Small ad row under cards -->369 <div class="row-ads">370 <div class="small-ad img-ph"><span>[IMG: Category ad - sleeveless printed top]</span><div class="ad-badge">AD</div></div>371 <div class="small-ad img-ph"><span>[IMG: Category ad - printed kurta set]</span><div class="ad-badge">AD</div></div>372 </div>373 374 <!-- Bottom toolbar -->375 <div class="bottom-bar">376 <div class="bottom-item">377 <svg viewBox="0 0 24 24" width="28" height="28"><path d="M12 22s-7-6-7-12a7 7 0 0 1 14 0c0 6-7 12-7 12z" fill="none" stroke="#222" stroke-width="2"/></svg>378 <div>GENDER</div>379 </div>380 <div class="bottom-item">381 <svg viewBox="0 0 24 24" width="28" height="28"><path d="M6 16l6-6 6 6" stroke="#222" stroke-width="2" fill="none" stroke-linecap="round"/><path d="M6 8l6 6 6-6" stroke="#222" stroke-width="2" fill="none" stroke-linecap="round"/></svg>382 <div>SORT</div>383 </div>384 <div class="bottom-item">385 <svg viewBox="0 0 24 24" width="28" height="28"><path d="M4 6h16M6 6v8l6 4V6" stroke="#222" stroke-width="2" fill="none" stroke-linecap="round"/></svg>386 <div>FILTER</div>387 </div>388 </div>389 390</div>391</body>392</html>