Spaces:
Sleeping
Sleeping
| <html lang="uz"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <meta name="theme-color" content="#0D1F23"> | |
| <meta name="description" content="Mahsulot tafsilotlari — M-TEXTILE"> | |
| <title>Mahsulot — M-TEXTILE</title> | |
| <link rel="stylesheet" href="css/global.css"> | |
| <link rel="stylesheet" href="css/components.css"> | |
| <link rel="stylesheet" href="css/pages.css"> | |
| <link rel="stylesheet" href="css/premium.css"> | |
| <link rel="manifest" href="manifest.json"> | |
| <!-- AOS CSS --> | |
| <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet"> | |
| </head> | |
| <body> | |
| <!-- Global Preloader --> | |
| <div id="global-preloader" class="preloader"> | |
| <div class="preloader-spinner"></div> | |
| </div> | |
| <div class="page-wrapper"> | |
| <div class="page-content"> | |
| <section class="section-padding" style="padding-top: calc(var(--navbar-height) + 2rem);"> | |
| <div class="container"> | |
| <!-- Breadcrumb --> | |
| <div class="flex items-center gap-sm mb-xl" style="font-size:0.85rem;color:var(--clr-text-muted);"> | |
| <a href="index.html" style="color:var(--clr-text-muted)">Bosh sahifa</a> | |
| <span>/</span> | |
| <a href="catalog.html" style="color:var(--clr-text-muted)">Katalog</a> | |
| <span>/</span> | |
| <span id="breadcrumbCategory">—</span> | |
| </div> | |
| <div class="product-detail" id="productDetail"> | |
| <!-- Gallery --> | |
| <div class="product-gallery"> | |
| <div class="product-main-image"> | |
| <img id="mainImage" src="" alt=""> | |
| </div> | |
| </div> | |
| <!-- Info --> | |
| <div> | |
| <div class="product-info-header"> | |
| <div class="product-info-category" id="pdCategory"></div> | |
| <h1 class="product-info-title" id="pdName"></h1> | |
| <div class="product-info-rating"> | |
| <span class="stars" id="pdStars"></span> | |
| <span class="rating-text" id="pdRating"></span> | |
| </div> | |
| <div class="product-info-price" id="pdPrice"></div> | |
| </div> | |
| <p style="color:var(--clr-text-secondary);line-height:1.7;margin-bottom:1.5rem;" | |
| id="pdDesc"></p> | |
| <div class="product-option-group"> | |
| <div class="product-option-label" | |
| style="display:flex;justify-content:space-between;align-items:center;"> | |
| <span>O'lcham: <span id="selectedSize">—</span></span> | |
| <button class="btn btn-ghost btn-sm" onclick="openSizeGuide()" | |
| style="font-size:0.75rem;color:var(--clr-mid);">📏 O'lcham yo'riqnomasi</button> | |
| </div> | |
| <div class="size-selector" id="pdSizes"></div> | |
| </div> | |
| <!-- Color selector --> | |
| <div class="product-option-group"> | |
| <div class="product-option-label">Rang: <span id="selectedColor">—</span></div> | |
| <div class="color-selector" id="pdColors"></div> | |
| </div> | |
| <!-- Quantity --> | |
| <div class="product-option-group"> | |
| <div class="product-option-label">Miqdor:</div> | |
| <div class="qty-control"> | |
| <button class="qty-btn" id="qtyMinus">−</button> | |
| <span class="qty-value" id="qtyValue">1</span> | |
| <button class="qty-btn" id="qtyPlus">+</button> | |
| </div> | |
| </div> | |
| <!-- Actions --> | |
| <div class="product-actions"> | |
| <button class="btn btn-primary btn-lg" id="addToCartBtn">🛒 Savatga qo'shish</button> | |
| <button class="btn btn-outline btn-icon" id="wishlistBtn" title="Sevimlilar" | |
| style="padding:0.75rem 1rem;"></button> | |
| </div> | |
| <!-- Features --> | |
| <div class="product-features"> | |
| <div class="product-feature-item">🏬 Do'kondan olib ketish</div> | |
| <div class="product-feature-item">🛡️ Kafolat</div> | |
| <div class="product-feature-item">🔄 30 kun qaytarish</div> | |
| </div> | |
| <!-- Tabs --> | |
| <div style="margin-top:2rem;"> | |
| <div class="tabs"> | |
| <button class="tab-btn active" data-tab="desc">Tavsif</button> | |
| <button class="tab-btn" data-tab="specs">Xususiyatlari</button> | |
| <button class="tab-btn" data-tab="reviews">Sharhlar</button> | |
| </div> | |
| <div class="tab-content active" id="tab-desc"></div> | |
| <div class="tab-content" id="tab-specs"> | |
| <table style="width:100%;font-size:0.9rem;"> | |
| <tr style="border-bottom:1px solid var(--clr-border)"> | |
| <td style="padding:0.75rem 0;color:var(--clr-text-muted)">Kategoriya</td> | |
| <td id="specCat"></td> | |
| </tr> | |
| <tr style="border-bottom:1px solid var(--clr-border)"> | |
| <td style="padding:0.75rem 0;color:var(--clr-text-muted)">Mavjud o'lchamlar | |
| </td> | |
| <td id="specSizes"></td> | |
| </tr> | |
| <tr style="border-bottom:1px solid var(--clr-border)"> | |
| <td style="padding:0.75rem 0;color:var(--clr-text-muted)">Mavjud ranglar | |
| </td> | |
| <td id="specColors"></td> | |
| </tr> | |
| <tr> | |
| <td style="padding:0.75rem 0;color:var(--clr-text-muted)">Holati</td> | |
| <td id="specStock"></td> | |
| </tr> | |
| </table> | |
| </div> | |
| <div class="tab-content" id="tab-reviews"> | |
| <p style="color:var(--clr-text-muted);">Hozircha sharhlar yo'q. Birinchi sharh | |
| qoldiradigan siz bo'ling!</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Similar Products --> | |
| <div style="margin-top:4rem;"> | |
| <div class="section-header"> | |
| <h2>O'xshash mahsulotlar</h2> | |
| <div class="section-line"></div> | |
| </div> | |
| <div class="grid grid-4 stagger" id="similarGrid"></div> | |
| </div> | |
| </div> | |
| </section> | |
| </div> | |
| </div> | |
| <script src="js/products.js"></script> | |
| <script src="https://www.gstatic.com/firebasejs/10.12.0/firebase-app-compat.js"></script> | |
| <script src="https://www.gstatic.com/firebasejs/10.12.0/firebase-auth-compat.js"></script> | |
| <script src="js/firebase-config.js"></script> | |
| <script src="js/api.js"></script> | |
| <script src="js/store.js"></script> | |
| <script src="js/app.js"></script> | |
| <script src="js/product-detail.js"></script> | |
| <script> | |
| if ('serviceWorker' in navigator) navigator.serviceWorker.register('sw.js').then(() => console.log('SW Registered')).catch(e => console.error('SW Error', e)); | |
| </script> | |
| <!-- AOS JS --> | |
| <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script> | |
| </body> | |
| </html> |