GD-ML/AndroidCode
13.4k
1<html>2<head>3<meta charset="UTF-8">4<title>Myntra UI Mock</title>5<style>6 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }7 * { box-sizing: border-box; }8 #render-target {9 position: relative;10 overflow: hidden;11 width: 1080px;12 height: 2400px;13 background: #ffffff;14 }15 16 /* Status bar */17 .status-bar {18 position: absolute;19 top: 0;20 left: 0;21 width: 1080px;22 height: 90px;23 padding: 0 24px;24 display: flex;25 align-items: center;26 justify-content: space-between;27 color: #222;28 font-size: 30px;29 }30 .status-left { display: flex; align-items: center; gap: 18px; }31 .dot { width: 10px; height: 10px; background:#444; border-radius:50%; display:inline-block; }32 .status-right { display: flex; align-items: center; gap: 22px; }33 34 /* Header */35 .header {36 position: absolute;37 top: 90px;38 left: 0;39 width: 1080px;40 height: 90px;41 padding: 0 28px;42 display: flex;43 align-items: center;44 justify-content: space-between;45 }46 .brand {47 display: flex;48 align-items: center;49 gap: 14px;50 font-weight: 700;51 color: #111;52 }53 .brand .logo {54 width: 44px; height: 44px; border-radius: 12px; background: #ff2d6b;55 display:flex; align-items:center; justify-content:center; color:#fff; font-weight:900;56 }57 .header-actions { display:flex; align-items:center; gap:26px; }58 .icon-btn {59 width: 56px; height: 56px; border-radius: 16px; display:flex; align-items:center; justify-content:center;60 }61 62 /* Search */63 .search-wrap {64 position: absolute;65 top: 170px;66 left: 40px;67 width: 1000px;68 height: 90px;69 background: #f3f4f6;70 border: 1px solid #e0e0e0;71 border-radius: 44px;72 display: flex;73 align-items: center;74 padding: 0 22px;75 gap: 18px;76 }77 .search-input {78 flex: 1;79 height: 100%;80 border: none;81 outline: none;82 background: transparent;83 font-size: 30px;84 color: #333;85 }86 .search-tools { display:flex; align-items:center; gap:20px; }87 88 /* Tabs */89 .tabs {90 position: absolute;91 top: 280px;92 left: 24px;93 width: 1032px;94 display: flex;95 gap: 26px;96 }97 .tab {98 flex: 1;99 height: 110px;100 border-radius: 56px;101 display: flex;102 align-items: center;103 justify-content: center;104 gap: 16px;105 font-size: 36px;106 font-weight: 700;107 border: 2px solid #dfe3e8;108 color: #111;109 background: #fff;110 }111 .tab.dark {112 background: #1c2340;113 color: #fff;114 border-color: #1c2340;115 }116 .tab .mini-img {117 width: 56px; height: 56px; background:#E0E0E0; border:1px solid #BDBDBD;118 border-radius: 12px; display:flex; align-items:center; justify-content:center; font-size: 20px; color:#757575;119 }120 121 /* Categories grid */122 .categories {123 position: absolute;124 top: 410px;125 left: 24px;126 width: 1032px;127 }128 .cat-row {129 display: grid;130 grid-template-columns: repeat(6, 1fr);131 gap: 18px;132 }133 .cat-item { text-align: center; }134 .cat-img {135 width: 160px; height: 160px; margin: 0 auto 14px;136 background: #E0E0E0; border: 1px solid #BDBDBD; border-radius: 22px;137 display:flex; align-items:center; justify-content:center; color:#757575; font-size:22px; padding: 8px; }138 .cat-label { font-size: 26px; color: #333; }139 140 /* Promo overlay card */141 .promo {142 position: absolute;143 top: 760px;144 left: 80px;145 width: 920px;146 height: 1340px;147 background: linear-gradient(180deg, #f7e5c7 0%, #fbf0dc 60%, #f7e5c7 100%);148 border: 2px solid #e6cda8;149 border-radius: 20px;150 box-shadow: 0 14px 30px rgba(0,0,0,0.18);151 padding: 40px;152 }153 .promo h2 {154 margin: 0;155 font-size: 44px;156 color: #333;157 line-height: 1.2;158 }159 .promo .sub {160 margin-top: 10px;161 font-size: 38px;162 color: #f28b2d;163 font-weight: 700;164 }165 .credit-card {166 margin: 60px auto 0;167 width: 700px; height: 420px;168 background: #E0E0E0; border: 1px solid #BDBDBD; border-radius: 18px;169 display:flex; align-items:center; justify-content:center; color:#757575; font-size: 30px;170 transform: rotate(-6deg);171 box-shadow: 0 10px 20px rgba(0,0,0,0.15);172 }173 .promo .fine-print {174 position: absolute;175 bottom: 36px;176 right: 36px;177 display:flex; align-items:center; gap: 14px;178 color:#666; font-size: 24px;179 }180 .logo-small {181 width: 100px; height: 56px; background:#E0E0E0; border:1px solid #BDBDBD;182 display:flex; align-items:center; justify-content:center; color:#757575; font-size: 20px; border-radius: 8px;183 }184 185 /* Continue browsing */186 .browse {187 position: absolute;188 top: 1980px;189 left: 28px;190 width: 1024px;191 }192 .browse-title {193 font-size: 42px;194 font-weight: 800;195 color: #1f2937;196 letter-spacing: 1px;197 }198 .brand-grid {199 margin-top: 26px;200 display: grid;201 grid-template-columns: 1fr 1fr;202 gap: 26px;203 }204 .brand-card {205 height: 160px;206 background:#E0E0E0; border:1px solid #BDBDBD; border-radius: 16px;207 display:flex; align-items:center; justify-content:center; color:#757575; font-size: 30px;208 }209 210 /* Floating XPLORE button */211 .xplore {212 position: absolute;213 right: 60px;214 bottom: 320px;215 height: 120px;216 width: 360px;217 border-radius: 60px;218 background: #2b2b46;219 color: #fff;220 font-weight: 800;221 display:flex; align-items:center; justify-content:center; gap: 20px;222 box-shadow: 0 12px 24px rgba(0,0,0,0.25);223 border: 2px solid #3a3a62;224 }225 .xplore .badge {226 width: 80px; height: 80px; border-radius: 40px; background:#ff2d6b; display:flex; align-items:center; justify-content:center; color:#fff; font-weight:900; }227 228 /* Bottom navigation bar */229 .bottom-nav {230 position: absolute;231 bottom: 0;232 left: 0;233 width: 1080px;234 height: 180px;235 background: #ffffff;236 border-top: 1px solid #e6e6e6;237 display: flex;238 align-items: center;239 justify-content: space-around;240 }241 .nav-item { width: 150px; display:flex; flex-direction:column; align-items:center; gap: 8px; color:#1f2937; }242 .nav-item .label { font-size: 26px; }243 .nav-icon { width: 64px; height: 64px; display:flex; align-items:center; justify-content:center; }244 245 /* Android navigation handle */246 .handle {247 position: absolute;248 bottom: 190px;249 left: 50%;250 transform: translateX(-50%);251 width: 240px; height: 10px; border-radius: 5px; background:#c9c9c9;252 }253</style>254</head>255<body>256<div id="render-target">257 258 <!-- Status Bar -->259 <div class="status-bar">260 <div class="status-left">261 <div>8:48</div>262 <span class="dot"></span>263 <span class="dot"></span>264 <span class="dot"></span>265 </div>266 <div class="status-right">267 <!-- WiFi icon -->268 <svg width="36" height="36" viewBox="0 0 24 24">269 <path d="M2 8c5-4 15-4 20 0" stroke="#333" stroke-width="2" fill="none" stroke-linecap="round"/>270 <path d="M5 11c4-3 10-3 14 0" stroke="#333" stroke-width="2" fill="none" stroke-linecap="round"/>271 <path d="M8 14c3-2 5-2 8 0" stroke="#333" stroke-width="2" fill="none" stroke-linecap="round"/>272 <circle cx="12" cy="17" r="1.5" fill="#333"/>273 </svg>274 <!-- Battery icon -->275 <svg width="42" height="36" viewBox="0 0 26 16">276 <rect x="1" y="2" width="20" height="12" rx="2" ry="2" stroke="#333" stroke-width="2" fill="none"/>277 <rect x="3" y="4" width="14" height="8" fill="#4caf50"/>278 <rect x="22" y="6" width="3" height="4" rx="1" fill="#333"/>279 </svg>280 </div>281 </div>282 283 <!-- Header -->284 <div class="header">285 <div class="brand">286 <div class="logo">M</div>287 <div>288 <div style="font-size:28px; font-weight:800;">BECOME</div>289 <div style="font-size:26px; color:#ff2d6b; font-weight:800;">INSIDER ›</div>290 </div>291 </div>292 <div class="header-actions">293 <div class="icon-btn">294 <!-- Bell -->295 <svg width="36" height="36" viewBox="0 0 24 24">296 <path d="M12 22c1.2 0 2-.8 2-2h-4c0 1.2.8 2 2 2z" fill="#333"/>297 <path d="M18 16V10a6 6 0 10-12 0v6l-2 2h16l-2-2z" stroke="#333" stroke-width="2" fill="none" stroke-linejoin="round"/>298 </svg>299 </div>300 <div class="icon-btn">301 <!-- Heart -->302 <svg width="36" height="36" viewBox="0 0 24 24">303 <path d="M12 21s-7-4.7-9.5-7.7A5.5 5.5 0 017.8 4.3c1.6 0 3 .8 4.2 2 1.2-1.2 2.6-2 4.2-2A5.5 5.5 0 0121.5 13.3C19 16.3 12 21 12 21z" stroke="#333" stroke-width="2" fill="none"/>304 </svg>305 </div>306 <div class="icon-btn">307 <!-- Bag -->308 <svg width="36" height="36" viewBox="0 0 24 24">309 <rect x="4" y="7" width="16" height="13" rx="2" stroke="#333" stroke-width="2" fill="none"/>310 <path d="M8 7a4 4 0 018 0" stroke="#333" stroke-width="2" fill="none"/>311 </svg>312 </div>313 </div>314 </div>315 316 <!-- Search -->317 <div class="search-wrap">318 <!-- Magnifier -->319 <svg width="34" height="34" viewBox="0 0 24 24">320 <circle cx="11" cy="11" r="7" stroke="#666" stroke-width="2" fill="none"/>321 <path d="M20 20l-4.5-4.5" stroke="#666" stroke-width="2" stroke-linecap="round"/>322 </svg>323 <input class="search-input" placeholder="Search for brands and products"/>324 <div class="search-tools">325 <!-- Camera -->326 <svg width="40" height="40" viewBox="0 0 24 24">327 <rect x="3" y="6" width="18" height="14" rx="2" stroke="#666" stroke-width="2" fill="none"/>328 <circle cx="12" cy="13" r="4" stroke="#666" stroke-width="2" fill="none"/>329 <rect x="8" y="4" width="8" height="3" rx="1" fill="#666"/>330 </svg>331 <!-- Mic -->332 <svg width="34" height="34" viewBox="0 0 24 24">333 <rect x="9" y="3" width="6" height="10" rx="3" stroke="#666" stroke-width="2" fill="none"/>334 <path d="M5 11a7 7 0 0014 0M12 18v3" stroke="#666" stroke-width="2" fill="none" stroke-linecap="round"/>335 </svg>336 </div>337 </div>338 339 <!-- Tabs -->340 <div class="tabs">341 <div class="tab dark">342 <div class="mini-img">[IMG]</div>343 <div>Fashion</div>344 </div>345 <div class="tab">346 <div class="mini-img">[IMG]</div>347 <div>Beauty</div>348 </div>349 </div>350 351 <!-- Categories -->352 <div class="categories">353 <div class="cat-row">354 <div class="cat-item">355 <div class="cat-img">[IMG: Shirts]</div>356 <div class="cat-label">Shirts</div>357 </div>358 <div class="cat-item">359 <div class="cat-img">[IMG: T-Shirts]</div>360 <div class="cat-label">T-Shirts</div>361 </div>362 <div class="cat-item">363 <div class="cat-img">[IMG: Shoes]</div>364 <div class="cat-label">Shoes</div>365 </div>366 <div class="cat-item">367 <div class="cat-img">[IMG: Jeans]</div>368 <div class="cat-label">Jeans For Him</div>369 </div>370 <div class="cat-item">371 <div class="cat-img">[IMG: Trousers]</div>372 <div class="cat-label">Trousers</div>373 </div>374 <div class="cat-item">375 <div class="cat-img">[IMG: Sarees]</div>376 <div class="cat-label">Sarees</div>377 </div>378 </div>379 </div>380 381 <!-- Promo Overlay -->382 <div class="promo">383 <h2>Get your Myntra Kotak Credit card</h2>384 <div class="sub">and be festive ready</div>385 <div class="credit-card">[IMG: Kotak Myntra Credit Card]</div>386 <div style="margin-top: 24px; color:#777; font-size: 26px;">T&C Apply</div>387 <div class="fine-print">388 <span>Powered by</span>389 <div class="logo-small">[IMG: RuPay]</div>390 <div class="logo-small">[IMG: Mastercard]</div>391 </div>392 </div>393 394 <!-- Continue Browsing -->395 <div class="browse">396 <div class="browse-title">CONTINUE BROWSING THESE BRANDS</div>397 <div class="brand-grid">398 <div class="brand-card">[IMG: Brand Collection]</div>399 <div class="brand-card">[IMG: Brand Collection]</div>400 </div>401 </div>402 403 <!-- Floating XPLORE -->404 <div class="xplore">405 <div class="badge">M</div>406 <div style="font-size:40px;">XPLORE</div>407 </div>408 409 <!-- Android handle -->410 <div class="handle"></div>411 412 <!-- Bottom Navigation -->413 <div class="bottom-nav">414 <div class="nav-item">415 <div class="nav-icon">416 <!-- Home -->417 <svg width="44" height="44" viewBox="0 0 24 24">418 <path d="M3 11l9-7 9 7v8a2 2 0 01-2 2H5a2 2 0 01-2-2v-8z" stroke="#333" stroke-width="2" fill="none"/>419 <path d="M9 21v-6h6v6" stroke="#333" stroke-width="2" fill="none"/>420 </svg>421 </div>422 <div class="label">Home</div>423 </div>424 <div class="nav-item">425 <div class="nav-icon">426 <div style="width:44px;height:44px;border-radius:10px;border:1px solid #333; display:flex;align-items:center;justify-content:center;font-weight:800;">fwd</div>427 </div>428 <div class="label">Hot Trends</div>429 </div>430 <div class="nav-item">431 <div class="nav-icon">432 <!-- T-shirt -->433 <svg width="44" height="44" viewBox="0 0 24 24">434 <path d="M16 4l4 3-3 3v9H7V10L4 7l4-3a6 6 0 004 0z" stroke="#333" stroke-width="2" fill="none" stroke-linejoin="round"/>435 </svg>436 </div>437 <div class="label">Everyday</div>438 </div>439 <div class="nav-item">440 <div class="nav-icon">441 <!-- Diamond -->442 <svg width="44" height="44" viewBox="0 0 24 24">443 <path d="M12 3l6 5-6 13-6-13 6-5z" stroke="#333" stroke-width="2" fill="none"/>444 <path d="M6 8h12" stroke="#333" stroke-width="2"/>445 </svg>446 </div>447 <div class="label">Luxe</div>448 </div>449 <div class="nav-item">450 <div class="nav-icon">451 <!-- User -->452 <svg width="44" height="44" viewBox="0 0 24 24">453 <circle cx="12" cy="8" r="4" stroke="#333" stroke-width="2" fill="none"/>454 <path d="M4 20a8 8 0 0116 0" stroke="#333" stroke-width="2" fill="none"/>455 </svg>456 </div>457 <div class="label">Profile</div>458 </div>459 </div>460 461</div>462</body>463</html>