GD-ML/AndroidCode
13.4k
1<html>2<head>3<meta charset="utf-8">4<title>Myntra Style - Mock UI</title>5<meta name="viewport" content="width=1080, initial-scale=1.0">6<style>7 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }8 #render-target {9 width: 1080px;10 height: 2400px;11 position: relative;12 overflow: hidden;13 background: #ffffff;14 }15 16 /* Status bar */17 .status-bar {18 height: 90px;19 padding: 0 30px;20 display: flex;21 align-items: center;22 justify-content: space-between;23 font-weight: 600;24 font-size: 40px;25 color: #2a2a2a;26 }27 .status-icons { display: flex; gap: 26px; align-items: center; }28 .icon { width: 44px; height: 44px; }29 .header {30 height: 120px;31 padding: 0 30px;32 display: flex;33 align-items: center;34 justify-content: space-between;35 }36 .brand {37 display: flex;38 align-items: center;39 gap: 18px;40 }41 .brand-logo {42 width: 60px; height: 60px; border-radius: 14px; background:#ff2d73;43 }44 .brand-text { font-size: 36px; font-weight: 700; color:#1d1d1d; }45 .insider-pill {46 font-size: 26px; color:#7d7d7d;47 }48 .header-actions { display:flex; gap:32px; }49 .round-icon {50 width: 72px; height: 72px; border-radius: 50%; border:1px solid #ddd; display:flex; align-items:center; justify-content:center;51 }52 53 /* Tabs */54 .tabs {55 display: flex;56 gap: 24px;57 padding: 20px 24px;58 }59 .tab-pill {60 flex: 1;61 height: 120px;62 border-radius: 60px;63 display:flex; align-items:center; padding: 0 40px; gap:26px;64 box-sizing: border-box;65 }66 .tab-dark {67 background:#242633; color:#fff; box-shadow: inset 0 0 0 2px #1b1e29;68 }69 .tab-light {70 background:#f1f3f6; color:#111; border:1px solid #e0e0e0;71 }72 .tab-title { font-size: 42px; font-weight: 800; }73 74 /* Category quick links */75 .categories {76 display:flex; gap:34px; padding: 24px 24px 0;77 }78 .cat-item { width: 180px; }79 .cat-img {80 width: 180px; height: 180px; background:#E0E0E0; border:1px solid #BDBDBD;81 display:flex; align-items:center; justify-content:center; color:#757575; font-size:24px; border-radius: 24px;82 }83 .cat-label { text-align:center; margin-top:12px; font-size:28px; font-weight:700; color:#505050; }84 85 /* CTA banner */86 .cta-banner {87 margin: 24px; height: 110px; background:#14161f; color:#fff; border-radius: 18px;88 display:flex; align-items:center; justify-content:center; gap: 16px; font-size: 36px; font-weight:700;89 }90 .cta-banner span { font-weight: 500; font-size: 32px; }91 92 /* Coupon strip */93 .coupon {94 margin: 24px;95 background:#fff; border:2px dashed #d5d5d5; border-radius: 18px;96 display:flex; justify-content:space-between; align-items:center; padding:30px 34px;97 }98 .coupon-left { font-size: 34px; color:#333; }99 .coupon-left .big { font-size: 64px; font-weight: 900; }100 .coupon-right { text-align:center; }101 .coupon-code {102 display:inline-block; background:#ffeec2; border:1px solid #f7d889; padding:16px 24px; border-radius: 12px;103 font-size: 42px; font-weight:800; color:#2a2a2a; letter-spacing:1px;104 }105 .coupon-sub { font-size:30px; color:#666; margin-bottom: 10px; }106 107 /* Hero */108 .hero {109 margin: 0 24px;110 background:#fbf3db;111 border-radius: 24px;112 display:flex;113 overflow:hidden;114 }115 .hero-left {116 width: 520px; padding: 40px 34px;117 }118 .hero-title {119 font-size: 70px; font-weight: 900; color:#2b2b2b; line-height: 1.1;120 }121 .hero-dates { margin-top: 14px; font-size: 34px; color:#a04f3a; font-weight: 800; }122 .hero-off { margin-top: 26px; font-size: 60px; font-weight: 900; color:#222; }123 .hero-live { margin-top: 26px; font-size: 54px; font-weight: 900; color:#e03a54; }124 .hero-shop {125 margin-top: 24px; display:inline-flex; align-items:center; gap:16px; background:#fff; border:1px solid #ddd;126 border-radius: 16px; padding: 18px 26px; font-size: 34px; font-weight:700; color:#333;127 }128 .hero-right {129 flex:1; display:flex; align-items:center; justify-content:center; padding: 20px;130 }131 .img-placeholder {132 width: 100%; height: 900px; background:#E0E0E0; border:1px solid #BDBDBD; color:#757575;133 display:flex; align-items:center; justify-content:center; font-size: 34px; border-radius: 24px;134 }135 136 .dots {137 display:flex; gap:20px; justify-content:center; margin: 30px 0;138 }139 .dot { width: 20px; height: 20px; border-radius: 50%; background:#d0d5db; }140 .dot.active { background:#6c8ab6; }141 142 /* Benefits bar */143 .benefits {144 margin: 0 24px; background:#f1db9c; border-radius: 24px; padding: 26px 24px;145 display:flex; justify-content:space-between; align-items:center;146 }147 .benefit { display:flex; align-items:center; gap:20px; color:#3b2f18; }148 .benefit .b-title { font-size: 36px; font-weight:900; }149 .benefit .b-sub { font-size: 28px; color:#5a4c2b; }150 .benefit-icon { width: 52px; height: 52px; border-radius: 50%; background:#f8e7b7; border:1px solid #e8cf85; display:flex; align-items:center; justify-content:center; }151 152 /* Bank promo */153 .bank {154 margin: 24px; background:#ffffff; border:1px solid #e5e5e5; border-radius: 20px; padding: 24px;155 display:flex; align-items:center; gap:24px;156 }157 .bank-badge {158 width: 220px; height: 140px; background:#E0E0E0; border:1px solid #BDBDBD; color:#757575;159 display:flex; align-items:center; justify-content:center; border-radius: 18px; font-size: 30px;160 }161 .bank-text { font-size: 40px; font-weight: 800; color:#333; }162 .bank-sub { font-size: 32px; color:#666; }163 164 /* Bottom nav */165 .bottom-nav {166 position: absolute; bottom: 0; left: 0; width: 100%;167 height: 156px; border-top: 1px solid #e6e6e6; background:#ffffff;168 display:flex; justify-content:space-around; align-items:center;169 }170 .nav-item { display:flex; flex-direction:column; align-items:center; gap:12px; color:#d22d66; }171 .nav-item.inactive { color:#6c6c6c; }172 .nav-item svg { width: 60px; height: 60px; }173 .nav-label { font-size: 28px; font-weight:700; }174 175 /* Floating XPLORE */176 .xplore {177 position: absolute; right: 24px; bottom: 180px;178 background:#2f2f3a; color:#fff; border-radius: 60px; padding: 22px 34px;179 display:flex; align-items:center; gap:20px; box-shadow: 0 8px 20px rgba(0,0,0,0.2);180 }181 .xplore-logo { width: 54px; height: 54px; border-radius: 50%; background:#ff2d73; }182 .xplore-text { font-size: 34px; font-weight: 800; letter-spacing: 1px; }183 184</style>185</head>186<body>187<div id="render-target">188 189 <!-- Status Bar -->190 <div class="status-bar">191 <div>12:59</div>192 <div class="status-icons">193 <svg class="icon" viewBox="0 0 24 24"><path d="M3 12l4-4 6 6 4-4 4 4" fill="none" stroke="#555" stroke-width="2"/></svg>194 <svg class="icon" viewBox="0 0 24 24"><rect x="2" y="9" width="5" height="10" fill="#555"/><rect x="9" y="6" width="5" height="13" fill="#777"/><rect x="16" y="3" width="5" height="16" fill="#999"/></svg>195 <svg class="icon" viewBox="0 0 24 24"><path d="M12 20a6 6 0 006-6" stroke="#555" stroke-width="2" fill="none"/><circle cx="12" cy="20" r="2" fill="#555"/></svg>196 <svg class="icon" viewBox="0 0 24 24"><path d="M3 6h18v12H3z" fill="none" stroke="#555" stroke-width="2"/><path d="M7 10h10" stroke="#555" stroke-width="2"/></svg>197 </div>198 </div>199 200 <!-- App Header -->201 <div class="header">202 <div class="brand">203 <div class="brand-logo"></div>204 <div>205 <div class="brand-text">BECOME</div>206 <div class="insider-pill">INSIDER ›</div>207 </div>208 </div>209 <div class="header-actions">210 <div class="round-icon">211 <svg class="icon" viewBox="0 0 24 24"><circle cx="11" cy="11" r="7" stroke="#333" stroke-width="2" fill="none"/><path d="M20 20l-4-4" stroke="#333" stroke-width="2"/></svg>212 </div>213 <div class="round-icon">214 <svg class="icon" viewBox="0 0 24 24"><path d="M12 3a6 6 0 016 6v5l2 3H4l2-3V9a6 6 0 016-6z" fill="none" stroke="#333" stroke-width="2"/></svg>215 </div>216 <div class="round-icon">217 <svg class="icon" viewBox="0 0 24 24"><path d="M12 21l-6-6h12z" fill="none" stroke="#333" stroke-width="2"/><path d="M12 3v6" stroke="#333" stroke-width="2"/></svg>218 </div>219 <div class="round-icon">220 <svg class="icon" viewBox="0 0 24 24"><path d="M6 7h12l-2 12H8L6 7z" fill="none" stroke="#333" stroke-width="2"/><path d="M10 7V5a2 2 0 012-2h0a2 2 0 012 2v2" stroke="#333" stroke-width="2"/></svg>221 </div>222 </div>223 </div>224 225 <!-- Tabs -->226 <div class="tabs">227 <div class="tab-pill tab-dark">228 <svg width="56" height="56" viewBox="0 0 24 24"><path d="M6 20V10l6-3 6 3v10H6z" fill="#fff"/></svg>229 <div class="tab-title">Fashion</div>230 </div>231 <div class="tab-pill tab-light">232 <svg width="56" height="56" viewBox="0 0 24 24"><path d="M12 3l2 5 5 1-4 4 1 6-4-3-5 3 2-6-4-4 5-1z" fill="#ff6a6a"/></svg>233 <div class="tab-title">Beauty</div>234 </div>235 </div>236 237 <!-- Categories -->238 <div class="categories">239 <div class="cat-item">240 <div class="cat-img">[IMG: Rakhi Jewelry]</div>241 <div class="cat-label">THE RAKHI EDIT</div>242 </div>243 <div class="cat-item">244 <div class="cat-img">[IMG: Men's Kurta]</div>245 <div class="cat-label">MEN</div>246 </div>247 <div class="cat-item">248 <div class="cat-img">[IMG: Women's Dress]</div>249 <div class="cat-label">WOMEN</div>250 </div>251 <div class="cat-item">252 <div class="cat-img">[IMG: Kids Wear]</div>253 <div class="cat-label">KIDS</div>254 </div>255 <div class="cat-item">256 <div class="cat-img">[IMG: Footwear]</div>257 <div class="cat-label">FOOTWEAR</div>258 </div>259 </div>260 261 <!-- CTA Banner -->262 <div class="cta-banner">263 <div>Sign Up For Exciting Deals!</div>264 <span>›</span>265 </div>266 267 <!-- Coupon strip -->268 <div class="coupon">269 <div class="coupon-left">270 <div style="font-size:30px; color:#777; margin-bottom:6px;">NEW ON MYNTRA?</div>271 <div class="big">FLAT ₹300 OFF</div>272 <div style="margin-top:8px; font-size:34px;">JUST FOR YOU!</div>273 </div>274 <div class="coupon-right">275 <div class="coupon-sub">CODE :</div>276 <div class="coupon-code">MYNTRA300</div>277 </div>278 </div>279 280 <!-- Hero section -->281 <div class="hero">282 <div class="hero-left">283 <div class="hero-title">Indian<br>At<br>Heart</div>284 <div class="hero-dates">AUG 18-22</div>285 <div class="hero-off">40-70% OFF</div>286 <div class="hero-live">IT’S LIVE!</div>287 <div class="hero-shop">288 <span>Shop Now</span>289 <svg width="30" height="30" viewBox="0 0 24 24"><path d="M9 5l7 7-7 7" fill="none" stroke="#333" stroke-width="2"/></svg>290 </div>291 </div>292 <div class="hero-right">293 <div class="img-placeholder">[IMG: Family Fashion Banner]</div>294 </div>295 </div>296 297 <!-- Dots -->298 <div class="dots">299 <div class="dot active"></div>300 <div class="dot"></div>301 <div class="dot"></div>302 <div class="dot"></div>303 <div class="dot"></div>304 <div class="dot"></div>305 <div class="dot"></div>306 </div>307 308 <!-- Benefits -->309 <div class="benefits">310 <div class="benefit">311 <div class="benefit-icon">312 <svg width="30" height="30" viewBox="0 0 24 24"><path d="M4 13l5 5L20 7" fill="none" stroke="#7a632c" stroke-width="2"/></svg>313 </div>314 <div>315 <div class="b-title">100% ORIGINAL</div>316 <div class="b-sub">PRODUCTS</div>317 </div>318 </div>319 <div class="benefit">320 <div class="benefit-icon">321 <svg width="30" height="30" viewBox="0 0 24 24"><path d="M6 12h12M6 16h8" stroke="#7a632c" stroke-width="2"/><path d="M6 8h12" stroke="#7a632c" stroke-width="2"/></svg>322 </div>323 <div>324 <div class="b-title">EASY RETURNS</div>325 <div class="b-sub">& REFUNDS</div>326 </div>327 </div>328 <div class="benefit">329 <div class="benefit-icon">330 <svg width="30" height="30" viewBox="0 0 24 24"><circle cx="12" cy="12" r="9" fill="none" stroke="#7a632c" stroke-width="2"/><path d="M12 7v5l3 3" stroke="#7a632c" stroke-width="2"/></svg>331 </div>332 <div>333 <div class="b-title">100% SECURE</div>334 <div class="b-sub">PAYMENTS</div>335 </div>336 </div>337 </div>338 339 <!-- Bank promo -->340 <div class="bank">341 <div class="bank-badge">[IMG: AU Small Finance Bank]</div>342 <div>343 <div class="bank-text">15% Instant Discount*</div>344 <div class="bank-sub">On AU Bank Credit & Debit Cards</div>345 </div>346 </div>347 348 <!-- Floating XPLORE -->349 <div class="xplore">350 <div class="xplore-logo"></div>351 <div class="xplore-text">XPLORE</div>352 </div>353 354 <!-- Bottom Navigation -->355 <div class="bottom-nav">356 <div class="nav-item">357 <svg viewBox="0 0 24 24"><path d="M3 12l9-7 9 7v8H3z" fill="none" stroke="#d22d66" stroke-width="2"/></svg>358 <div class="nav-label">Home</div>359 </div>360 <div class="nav-item inactive">361 <svg viewBox="0 0 24 24"><path d="M12 2l3 7h7l-5.5 4 2.5 7-7-4-7 4 2.5-7L2 9h7z" fill="none" stroke="#6c6c6c" stroke-width="2"/></svg>362 <div class="nav-label">Hot Trends</div>363 </div>364 <div class="nav-item inactive">365 <svg viewBox="0 0 24 24"><rect x="6" y="5" width="12" height="10" fill="none" stroke="#6c6c6c" stroke-width="2"/><path d="M6 15c3 3 9 3 12 0" stroke="#6c6c6c" stroke-width="2"/></svg>366 <div class="nav-label">Everyday</div>367 </div>368 <div class="nav-item inactive">369 <svg viewBox="0 0 24 24"><path d="M12 2l6 9-6 11-6-11 6-9z" fill="none" stroke="#6c6c6c" stroke-width="2"/></svg>370 <div class="nav-label">Luxe</div>371 </div>372 <div class="nav-item inactive">373 <svg viewBox="0 0 24 24"><circle cx="12" cy="8" r="4" fill="none" stroke="#6c6c6c" stroke-width="2"/><path d="M4 22c0-4 4-7 8-7s8 3 8 7" fill="none" stroke="#6c6c6c" stroke-width="2"/></svg>374 <div class="nav-label">Profile</div>375 </div>376 </div>377 378</div>379</body>380</html>