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 - Black Formal Pants</title>6<style>7 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }8 #render-target {9 position: relative;10 width: 1080px;11 height: 2400px;12 overflow: hidden;13 background: #ffffff;14 color: #222;15 }16 17 /* Status bar */18 .status-bar {19 height: 88px;20 padding: 20px 30px;21 display: flex;22 align-items: center;23 justify-content: space-between;24 font-size: 36px;25 color: #000;26 }27 .status-left { display: flex; gap: 24px; align-items: center; }28 .status-right { display: flex; gap: 24px; align-items: center; }29 .dot {30 width: 18px; height: 18px; background: #555; border-radius: 50%;31 display: inline-block;32 }33 .icon-battery,34 .icon-signal { width: 40px; height: 24px; display: inline-block; }35 .icon-battery { border: 3px solid #000; border-radius: 4px; position: relative; }36 .icon-battery::after {37 content: ""; position: absolute; right: -9px; top: 6px; width: 6px; height: 10px; background: #000; border-radius: 2px;38 }39 .icon-signal { display: inline-flex; gap: 4px; align-items: flex-end; }40 .icon-signal span { width: 6px; background: #000; }41 .icon-signal span:nth-child(1){ height: 8px; }42 .icon-signal span:nth-child(2){ height: 12px; }43 .icon-signal span:nth-child(3){ height: 18px; }44 45 /* Header */46 .header {47 padding: 0 24px 16px 24px;48 }49 .toolbar {50 height: 96px;51 display: flex;52 align-items: center;53 justify-content: space-between;54 }55 .toolbar-left { display: flex; align-items: center; gap: 22px; }56 .back-btn {57 width: 60px; height: 60px; display: inline-flex; align-items: center; justify-content: center;58 }59 .back-btn svg { width: 36px; height: 36px; }60 .brand {61 width: 64px; height: 64px; background: #ff4f7d; color: #fff; border-radius: 18px;62 display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 36px;63 }64 .toolbar-right { display: flex; align-items: center; gap: 28px; }65 .toolbar-right svg { width: 38px; height: 38px; }66 .title-block {67 margin-top: 6px;68 padding: 0 6px;69 }70 .page-title {71 font-size: 42px;72 font-weight: 800;73 letter-spacing: 0.5px;74 }75 .item-count {76 margin-top: 6px;77 color: #777;78 font-size: 26px;79 }80 81 /* Tabs */82 .tabs {83 margin: 18px 24px;84 background: #f1f2f4;85 border-radius: 44px;86 height: 94px;87 display: flex;88 align-items: center;89 padding: 8px;90 gap: 8px;91 }92 .tab {93 flex: 1;94 height: 78px;95 display: flex; align-items: center; justify-content: center;96 border-radius: 38px;97 font-size: 32px;98 color: #444;99 font-weight: 700;100 }101 .tab.active { background: #121217; color: #fff; }102 103 /* Chips row */104 .chips {105 display: flex; gap: 18px; align-items: center;106 padding: 0 24px;107 }108 .chip {109 height: 76px; padding: 0 26px; border: 1px solid #ddd; border-radius: 38px;110 display: inline-flex; align-items: center; gap: 14px; font-size: 30px; color: #333; background: #fff;111 }112 .chip svg { width: 30px; height: 30px; }113 .tooltip {114 position: absolute;115 top: 388px;116 left: 520px;117 background: #14313d;118 color: #fff;119 border-radius: 22px;120 padding: 22px 26px;121 font-size: 30px;122 box-shadow: 0 8px 18px rgba(0,0,0,0.15);123 }124 .tooltip:after {125 content:"";126 position:absolute;127 left: 52px; top:-16px;128 width:0; height:0; border-left:16px solid transparent; border-right:16px solid transparent; border-bottom:16px solid #14313d;129 }130 .tooltip .hash {131 width: 54px; height: 54px; border-radius: 12px; background: #9fe6d1; color:#0a2a32;132 display:inline-flex; align-items:center; justify-content:center; font-weight:800; margin-right: 16px;133 }134 135 /* Banner */136 .banner {137 margin: 20px 24px 10px 24px;138 height: 220px; border-radius: 22px;139 background: linear-gradient(0deg, #ffe9ef, #ffe9ef);140 display: grid; grid-template-columns: 1fr 1fr; gap: 0;141 border: 1px solid #f3c6cf;142 overflow: hidden;143 }144 .banner-left, .banner-right {145 padding: 28px;146 display: flex; gap: 18px; align-items: center;147 }148 .truck {149 width: 84px; height: 84px; border: 2px solid #ff648d; border-radius: 16px; display:flex; align-items:center; justify-content:center;150 }151 .banner-title { font-size: 40px; font-weight: 800; color: #333; }152 .banner-sub { font-size: 28px; color: #666; margin-top: 6px; }153 .coupon-badge {154 margin-left: 8px;155 padding: 6px 12px;156 background: #ff4f7d;157 color: #fff; border-radius: 10px; font-size: 26px;158 }159 .code-box {160 margin-top: 8px;161 display: inline-block;162 padding: 10px 18px;163 border: 2px dashed #ff4f7d;164 border-radius: 12px;165 color: #333; font-weight: 800; font-size: 32px;166 background: #fff;167 }168 169 .dots {170 display: flex; gap: 10px; justify-content: center;171 margin: 8px 0 18px 0;172 }173 .dot-small {174 width: 14px; height: 14px; border-radius: 50%;175 background: #cfd8dc;176 }177 .dot-small.active { background: #607d8b; }178 179 /* Product grid */180 .grid {181 display: grid;182 grid-template-columns: 1fr 1fr;183 gap: 18px;184 padding: 0 24px;185 }186 .card {187 background: #fff;188 border-radius: 10px;189 overflow: hidden;190 border: 1px solid #eee;191 }192 .card-img {193 height: 760px;194 background: #E0E0E0;195 border-bottom: 1px solid #BDBDBD;196 display: flex; align-items: center; justify-content: center;197 color: #757575; font-size: 30px; text-align: center; padding: 12px;198 position: relative;199 }200 .rating-pill {201 position: absolute;202 left: 20px; bottom: 20px;203 background: rgba(255,255,255,0.95);204 border: 1px solid #ddd;205 border-radius: 28px;206 padding: 10px 18px;207 font-size: 28px; color: #333; display: inline-flex; align-items: center; gap: 10px;208 }209 .rating-pill .star {210 color: #00b35f; font-weight: 800;211 }212 .card-body {213 padding: 18px 18px 24px 18px;214 }215 .card-title {216 font-size: 36px; font-weight: 800; color: #222; margin-bottom: 8px;217 display: flex; align-items: center; justify-content: space-between;218 }219 .wishlist-btn svg { width: 44px; height: 44px; }220 .card-sub { font-size: 28px; color: #666; }221 .price-row { margin-top: 12px; display: flex; gap: 10px; align-items: baseline; font-size: 32px; }222 .price-row .old { color: #888; text-decoration: line-through; font-size: 28px; }223 .badge-off {224 font-size: 26px; color: #ff4f7d; font-weight: 800; padding-left: 8px;225 }226 .best-price { margin-top: 10px; font-size: 28px; color: #008a3a; font-weight: 700; }227 .express-row {228 margin-top: 10px; font-size: 26px; color: #555; display: flex; gap: 12px; align-items: center;229 }230 .express-tag {231 font-size: 24px; background: #efefef; border: 1px solid #ddd; padding: 6px 10px; border-radius: 8px; color:#333;232 }233 234 /* Bottom action bar */235 .bottom-bar {236 position: absolute; left: 0; bottom: 0;237 width: 100%; height: 116px; border-top: 1px solid #ddd;238 background: #fff; display: flex; justify-content: space-around; align-items: center;239 font-size: 34px; font-weight: 700;240 }241 .bottom-item { display:flex; align-items:center; gap: 16px; color: #333; }242 .bottom-item svg { width: 40px; height: 40px; }243 244</style>245</head>246<body>247<div id="render-target">248 249 <!-- Status Bar -->250 <div class="status-bar">251 <div class="status-left">252 <div>8:50</div>253 <span class="dot"></span>254 <span class="dot" style="background:#777;"></span>255 <span class="dot" style="background:#999;"></span>256 </div>257 <div class="status-right">258 <div class="icon-signal"><span></span><span></span><span></span></div>259 <div class="icon-battery"></div>260 </div>261 </div>262 263 <!-- Header -->264 <div class="header">265 <div class="toolbar">266 <div class="toolbar-left">267 <div class="back-btn">268 <svg viewBox="0 0 24 24"><path fill="#000" d="M15.5 19.4 8.1 12l7.4-7.4-1.7-1.7L4.7 12l9 9z"/></svg>269 </div>270 <div class="brand">M</div>271 <div class="title-block">272 <div class="page-title">BLACK FORMAL PANTS FOR...</div>273 <div class="item-count">599 Items</div>274 </div>275 </div>276 <div class="toolbar-right">277 <!-- search -->278 <svg viewBox="0 0 24 24"><path fill="#000" d="M15.5 14h-.8l-.3-.3a6.5 6.5 0 1 0-.7.7l.3.3v.8l5 5 1.5-1.5-5-5zm-6 0A4.5 4.5 0 1 1 14 9.5 4.5 4.5 0 0 1 9.5 14z"/></svg>279 <!-- heart -->280 <svg viewBox="0 0 24 24"><path fill="none" stroke="#000" stroke-width="2" d="M12 21s-7-4.7-9.5-8.2C-0.5 9.2 2.1 5 6.2 5c2.2 0 3.9 1.1 4.8 2.6C11.9 6.1 13.6 5 15.8 5c4.1 0 6.7 4.2 3.7 7.8C19 16.3 12 21 12 21z"/></svg>281 <!-- bag -->282 <svg viewBox="0 0 24 24"><path fill="#000" d="M6 7V6a6 6 0 1 1 12 0v1h2v14H4V7h2zm2 0h8V6a4 4 0 1 0-8 0v1z"/></svg>283 </div>284 </div>285 286 <!-- Tabs -->287 <div class="tabs">288 <div class="tab active">Shopping</div>289 <div class="tab">Trends</div>290 </div>291 292 <!-- Chips -->293 <div class="chips">294 <div class="chip">295 <span>Popular Filters</span>296 <svg viewBox="0 0 24 24"><path fill="#555" d="M7 10l5 5 5-5z"/></svg>297 </div>298 <div class="chip">299 <svg viewBox="0 0 24 24"><path fill="#ff9800" d="M12 17.27 18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg>300 <span>Try & Buy</span>301 </div>302 </div>303 304 <!-- Tooltip -->305 <div class="tooltip">306 <span class="hash">#</span>307 <span>Find out what's hot</span>308 <span style="margin-left:8px">😍</span>309 <div style="margin-top:6px; font-size:24px; color:#b0d7df;">Check out the latest trends.</div>310 </div>311 312 <!-- Banner -->313 <div class="banner">314 <div class="banner-left">315 <div class="truck">316 <svg viewBox="0 0 24 24" width="54" height="54"><path fill="#ff648d" d="M3 6h12v8H3zM15 9h4l2 3v2h-6zM6 18a2 2 0 1 0 0-4 2 2 0 0 0 0 4zm10 0a2 2 0 1 0 0-4 2 2 0 0 0 0 4z"/></svg>317 </div>318 <div>319 <div class="banner-title">Free Shipping on</div>320 <div class="banner-sub">your first order <span class="coupon-badge">₹200 OFF</span></div>321 </div>322 </div>323 <div class="banner-right">324 <div style="display:flex; flex-direction:column;">325 <div class="banner-title">₹200 off for you</div>326 <div class="code-box">MYNTRA200</div>327 </div>328 </div>329 </div>330 331 <!-- Dots -->332 <div class="dots">333 <div class="dot-small active"></div>334 <div class="dot-small"></div>335 </div>336 </div>337 338 <!-- Product Grid -->339 <div class="grid">340 341 <!-- Card 1 -->342 <div class="card">343 <div class="card-img">344 [IMG: Woman in black formal trousers, standing]345 <div class="rating-pill">346 <span>4.3</span>347 <span class="star">★</span>348 <span>821</span>349 </div>350 </div>351 <div class="card-body">352 <div class="card-title">353 <span>Smarty Pants</span>354 <span class="wishlist-btn">355 <svg viewBox="0 0 24 24"><path fill="none" stroke="#777" stroke-width="2" d="M12 21s-7-4.7-9.5-8.2C-0.5 9.2 2.1 5 6.2 5c2.2 0 3.9 1.1 4.8 2.6C11.9 6.1 13.6 5 15.8 5c4.1 0 6.7 4.2 3.7 7.8C19 16.3 12 21 12 21z"/></svg>356 </span>357 </div>358 <div class="card-sub">Women Cotton Formal Trousers</div>359 <div class="price-row">360 <span class="old">₹1,599</span>361 <span style="font-weight:800; color:#222;">₹799</span>362 <span class="badge-off">50% OFF!</span>363 </div>364 <div class="best-price">Best Price ₹599 with coupon</div>365 </div>366 </div>367 368 <!-- Card 2 -->369 <div class="card">370 <div class="card-img">371 [IMG: Black formal trousers with heels]372 <div class="rating-pill">373 <span>3.8</span>374 <span class="star">★</span>375 <span>1.4k</span>376 </div>377 </div>378 <div class="card-body">379 <div class="card-title">380 <span>Mast & Harbour</span>381 <span class="wishlist-btn">382 <svg viewBox="0 0 24 24"><path fill="none" stroke="#777" stroke-width="2" d="M12 21s-7-4.7-9.5-8.2C-0.5 9.2 2.1 5 6.2 5c2.2 0 3.9 1.1 4.8 2.6C11.9 6.1 13.6 5 15.8 5c4.1 0 6.7 4.2 3.7 7.8C19 16.3 12 21 12 21z"/></svg>383 </span>384 </div>385 <div class="card-sub">Women Formal Trousers</div>386 <div class="price-row">387 <span class="old">₹2,199</span>388 <span style="font-weight:800; color:#222;">₹791</span>389 <span class="badge-off">64% OFF!</span>390 </div>391 <div class="best-price">Best Price ₹544 with coupon</div>392 <div class="express-row">393 <span class="express-tag">EXPRESS</span>394 <span>1 Day Delivery</span>395 </div>396 </div>397 </div>398 399 <!-- Card 3 (left next row) -->400 <div class="card">401 <div class="card-img" style="height: 720px;">402 [IMG: Black crinkled midi skirt - product image]403 </div>404 <div class="card-body">405 <div class="card-title"><span>Elegant Skirt</span></div>406 <div class="card-sub">Women Black Mesh Midi</div>407 </div>408 </div>409 410 <!-- Card 4 (right next row) -->411 <div class="card">412 <div class="card-img" style="height: 720px;">413 [IMG: Woman in white shirt and black formal pants]414 </div>415 <div class="card-body">416 <div class="card-title"><span>Classic Trousers</span></div>417 <div class="card-sub">Women Formal Pants</div>418 </div>419 </div>420 421 </div>422 423 <!-- Bottom Bar -->424 <div class="bottom-bar">425 <div class="bottom-item">426 <svg viewBox="0 0 24 24"><path fill="#333" d="M3 18h6v-2H3v2zm0-5h12v-2H3v2zm0-5h18V6H3v2z"/></svg>427 <span>SORT</span>428 </div>429 <div class="bottom-item">430 <svg viewBox="0 0 24 24"><path fill="#333" d="M10 18h4v-2h-4v2zm-6-5h16v-2H4v2zm2-5h12V6H6v2z"/></svg>431 <span>FILTER</span>432 </div>433 </div>434 435</div>436</body>437</html>