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"> | |
| <title>Buyurtma berish — 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"> | |
| <div class="checkout-layout"> | |
| <h1 style="text-align:center;margin-bottom:2rem;">Buyurtma berish</h1> | |
| <!-- Progress Steps --> | |
| <div class="progress-steps" id="progressSteps"> | |
| <div class="progress-step active" data-step="1"> | |
| <span class="step-num">1</span> | |
| <span class="step-label">Ma'lumotlar</span> | |
| </div> | |
| <div class="progress-step" data-step="2"> | |
| <span class="step-num">2</span> | |
| <span class="step-label">Do'kon</span> | |
| </div> | |
| <div class="progress-step" data-step="3"> | |
| <span class="step-num">3</span> | |
| <span class="step-label">To'lov</span> | |
| </div> | |
| <div class="progress-step" data-step="4"> | |
| <span class="step-num">4</span> | |
| <span class="step-label">Tasdiqlash</span> | |
| </div> | |
| </div> | |
| <!-- Step 1: Personal Info --> | |
| <div class="checkout-step active" id="step1"> | |
| <h2 class="checkout-step-title">Shaxsiy ma'lumotlar</h2> | |
| <div class="form-group"> | |
| <label class="form-label">Ismingiz *</label> | |
| <input type="text" class="form-input" id="userName" placeholder="To'liq ismingiz" | |
| required> | |
| <div class="form-error" id="nameError"></div> | |
| </div> | |
| <div class="form-group"> | |
| <label class="form-label">Telefon raqam *</label> | |
| <input type="tel" class="form-input" id="userPhone" placeholder="+998 90 123 45 67" | |
| required> | |
| <div class="form-error" id="phoneError"></div> | |
| </div> | |
| <div class="form-group"> | |
| <label class="form-label">Email (ixtiyoriy)</label> | |
| <input type="email" class="form-input" id="userEmail" placeholder="email@example.com"> | |
| <div class="form-error" id="emailError"></div> | |
| </div> | |
| <div class="flex justify-end gap-md"> | |
| <a href="cart.html" class="btn btn-outline">← Savatchaga qaytish</a> | |
| <button class="btn btn-primary" onclick="nextStep(1)">Keyingi →</button> | |
| </div> | |
| </div> | |
| <!-- Step 2: Store Location --> | |
| <div class="checkout-step" id="step2"> | |
| <h2 class="checkout-step-title">Do'kondan olib ketish</h2> | |
| <p style="color:var(--clr-text-secondary);margin-bottom:1.5rem;">Buyurtmangiz tayyor | |
| bo'lgach, uni quyidagi manzildan olib ketishingiz mumkin.</p> | |
| <div id="storeLocationDisplay" | |
| style="border:1px solid var(--clr-border);border-radius:var(--radius-md);overflow:hidden;background:var(--clr-surface);"> | |
| <div style="padding:1.5rem;border-bottom:1px solid var(--clr-border);"> | |
| <div | |
| style="font-weight:600;margin-bottom:0.5rem;display:flex;align-items:center;gap:0.5rem;"> | |
| 📍 Do'kon Manzili:</div> | |
| <div id="storeAddressText" style="color:var(--clr-text-secondary);">Hozircha | |
| kiritilmagan</div> | |
| </div> | |
| <div id="storeMapContainer" | |
| style="height:250px;width:100%;display:none;background:var(--clr-border);"></div> | |
| </div> | |
| <div class="flex justify-between mt-xl"> | |
| <button class="btn btn-outline" onclick="prevStep(2)">← Orqaga</button> | |
| <button class="btn btn-primary" onclick="nextStep(2)" id="step2NextBtn">Keyingi | |
| →</button> | |
| </div> | |
| </div> | |
| <!-- Step 3: Payment --> | |
| <div class="checkout-step" id="step3"> | |
| <h2 class="checkout-step-title">To'lov usuli</h2> | |
| <div style="display:flex;flex-direction:column;gap:1rem;"> | |
| <label class="filter-option active" | |
| style="padding:1rem;border:1px solid var(--clr-border);border-radius:var(--radius-md);cursor:pointer;" | |
| data-payment="cash"> | |
| <div class="filter-checkbox"></div> | |
| <div> | |
| <div style="font-weight:600;">💵 Naqd pul</div> | |
| <div style="font-size:0.8rem;color:var(--clr-text-muted)">Do'kondan olib ketish | |
| vaqtida to'lash</div> | |
| </div> | |
| </label> | |
| <label class="filter-option" | |
| style="padding:1rem;border:1px solid var(--clr-border);border-radius:var(--radius-md);cursor:pointer;" | |
| data-payment="card"> | |
| <div class="filter-checkbox"></div> | |
| <div> | |
| <div style="font-weight:600;">💳 Plastik karta</div> | |
| <div style="font-size:0.8rem;color:var(--clr-text-muted)">Uzcard, Humo</div> | |
| </div> | |
| </label> | |
| <label class="filter-option" | |
| style="padding:1rem;border:1px solid var(--clr-border);border-radius:var(--radius-md);cursor:pointer;" | |
| data-payment="click"> | |
| <div class="filter-checkbox"></div> | |
| <div> | |
| <div style="font-weight:600;">📱 Click / Payme</div> | |
| <div style="font-size:0.8rem;color:var(--clr-text-muted)">Onlayn to'lov</div> | |
| </div> | |
| </label> | |
| </div> | |
| <div class="flex justify-between mt-xl"> | |
| <button class="btn btn-outline" onclick="prevStep(3)">← Orqaga</button> | |
| <button class="btn btn-primary" onclick="nextStep(3)">Keyingi →</button> | |
| </div> | |
| </div> | |
| <!-- Step 4: Confirm --> | |
| <div class="checkout-step" id="step4"> | |
| <h2 class="checkout-step-title">Buyurtmani tasdiqlash</h2> | |
| <div id="orderSummary" | |
| style="background:var(--clr-surface);border:1px solid var(--clr-border);border-radius:var(--radius-lg);padding:1.5rem;margin-bottom:2rem;"> | |
| </div> | |
| <div class="flex justify-between"> | |
| <button class="btn btn-outline" onclick="prevStep(4)">← Orqaga</button> | |
| <button class="btn btn-primary btn-lg" id="confirmBtn" onclick="confirmOrder()">✓ | |
| Buyurtmani tasdiqlash</button> | |
| </div> | |
| </div> | |
| <!-- Success --> | |
| <div class="checkout-step" id="stepSuccess" style="display:none;"> | |
| <div class="order-success"> | |
| <div class="order-success-icon">🎉</div> | |
| <h2 class="order-success-title">Buyurtma qabul qilindi!</h2> | |
| <div class="order-success-id" id="orderId"></div> | |
| <p class="order-success-text">Buyurtmangiz muvaffaqiyatli qabul qilindi. Tez orada siz | |
| bilan bog'lanamiz.</p> | |
| <div class="flex justify-center gap-md"> | |
| <a href="profile.html" class="btn btn-outline">Buyurtmalarni ko'rish</a> | |
| <a href="index.html" class="btn btn-primary">Bosh sahifaga</a> | |
| </div> | |
| </div> | |
| </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/checkout.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> |