| <!DOCTYPE html>
|
| <html lang="en">
|
| <head>
|
| <meta charset="UTF-8">
|
| <meta name="viewport" content="width=device-width, initial-scale=1.0">
|
| <title>LK Fashion Store</title>
|
| <link rel="stylesheet" href="styles.css">
|
| </head>
|
| <body>
|
|
|
| <div id="landing-page" class="page active">
|
| <div class="landing-container">
|
| <div class="landing-content">
|
| <h1>LK Fashion Store</h1>
|
| <p class="tagline">Your destination for premium fashion apparel</p>
|
| <div class="landing-buttons">
|
| <button class="btn btn-primary" onclick="showPage('customer-page')">
|
| <span class="icon">🛍️</span>
|
| Shop Now
|
| </button>
|
| <button class="btn btn-secondary" onclick="showPage('admin-login')">
|
| <span class="icon">🔐</span>
|
| Admin Login
|
| </button>
|
| </div>
|
| <div class="tracking-section">
|
| <h3>Track Your Order</h3>
|
| <div class="tracking-form">
|
| <input type="text" id="tracking-input" placeholder="Enter tracking ID" class="input">
|
| <button class="btn btn-accent" onclick="trackOrder()">Track</button>
|
| </div>
|
| </div>
|
| </div>
|
| </div>
|
| </div>
|
|
|
|
|
| <div id="admin-login" class="page">
|
| <div class="login-container">
|
| <div class="login-box">
|
| <h2>Admin Login</h2>
|
| <form onsubmit="adminLogin(event)">
|
| <div class="form-group">
|
| <label>API Key</label>
|
| <input type="password" id="api-key-input" class="input" placeholder="Enter your API key" required>
|
| </div>
|
| <button type="submit" class="btn btn-primary full-width">Login</button>
|
| <button type="button" class="btn btn-secondary full-width" onclick="showPage('landing-page')">Back</button>
|
| </form>
|
| </div>
|
| </div>
|
| </div>
|
|
|
|
|
| <div id="customer-page" class="page">
|
| <header class="header">
|
| <div class="container">
|
| <h1 class="logo">LK Fashion</h1>
|
| <div class="header-actions">
|
| <button class="btn btn-icon" onclick="showCart()">
|
| 🛒 Cart <span id="cart-count" class="badge">0</span>
|
| </button>
|
| <button class="btn btn-secondary" onclick="showPage('landing-page')">Back</button>
|
| </div>
|
| </div>
|
| </header>
|
|
|
| <div class="container">
|
|
|
| <div class="filters">
|
| <input type="text" id="product-search" class="input" placeholder="Search products..." onkeyup="searchProducts()">
|
| <select id="category-filter" class="input" onchange="filterProducts()">
|
| <option value="">All Categories</option>
|
| </select>
|
| </div>
|
|
|
|
|
| <div id="products-grid" class="products-grid">
|
| <div class="loading">Loading products...</div>
|
| </div>
|
|
|
|
|
| <div id="pagination" class="pagination"></div>
|
| </div>
|
| </div>
|
|
|
|
|
| <div id="admin-page" class="page">
|
| <header class="header admin-header">
|
| <div class="container">
|
| <h1 class="logo">Admin Dashboard</h1>
|
| <div class="header-actions">
|
| <button class="btn btn-secondary" onclick="logout()">Logout</button>
|
| </div>
|
| </div>
|
| </header>
|
|
|
| <div class="container">
|
| <div class="admin-tabs">
|
| <button class="tab-btn active" onclick="showAdminTab('products')">Products</button>
|
| <button class="tab-btn" onclick="showAdminTab('orders')">Orders</button>
|
| </div>
|
|
|
|
|
| <div id="admin-products" class="admin-tab active">
|
| <div class="admin-actions">
|
| <button class="btn btn-primary" onclick="showProductModal()">+ Add Product</button>
|
| <input type="text" id="admin-product-search" class="input" placeholder="Search products..." onkeyup="searchAdminProducts()">
|
| </div>
|
| <div id="admin-products-list" class="admin-list">
|
| <div class="loading">Loading products...</div>
|
| </div>
|
| </div>
|
|
|
|
|
| <div id="admin-orders" class="admin-tab">
|
| <div class="admin-actions">
|
| <select id="order-status-filter" class="input" onchange="filterOrders()">
|
| <option value="">All Status</option>
|
| <option value="pending">Pending</option>
|
| <option value="processing">Processing</option>
|
| <option value="shipped">Shipped</option>
|
| <option value="delivered">Delivered</option>
|
| <option value="cancelled">Cancelled</option>
|
| </select>
|
| <input type="text" id="admin-order-search" class="input" placeholder="Search orders..." onkeyup="searchAdminOrders()">
|
| </div>
|
| <div id="admin-orders-list" class="admin-list">
|
| <div class="loading">Loading orders...</div>
|
| </div>
|
| </div>
|
| </div>
|
| </div>
|
|
|
|
|
| <div id="tracking-modal" class="modal">
|
| <div class="modal-content">
|
| <span class="close" onclick="closeModal('tracking-modal')">×</span>
|
| <h2>Order Tracking</h2>
|
| <div id="tracking-result"></div>
|
| </div>
|
| </div>
|
|
|
|
|
| <div id="product-modal" class="modal">
|
| <div class="modal-content">
|
| <span class="close" onclick="closeModal('product-modal')">×</span>
|
| <div id="product-details"></div>
|
| </div>
|
| </div>
|
|
|
|
|
| <div id="cart-modal" class="modal">
|
| <div class="modal-content large">
|
| <span class="close" onclick="closeModal('cart-modal')">×</span>
|
| <h2>Shopping Cart</h2>
|
| <div id="cart-items"></div>
|
| <div class="cart-footer">
|
| <div class="cart-total">
|
| <strong>Subtotal:</strong> <span id="cart-subtotal">$0.00</span>
|
| </div>
|
| <button class="btn btn-primary" onclick="showCheckout()">Proceed to Checkout</button>
|
| </div>
|
| </div>
|
| </div>
|
|
|
|
|
| <div id="checkout-modal" class="modal">
|
| <div class="modal-content large">
|
| <span class="close" onclick="closeModal('checkout-modal')">×</span>
|
| <h2>Checkout</h2>
|
| <form onsubmit="placeOrder(event)">
|
| <div class="form-group">
|
| <label>Name *</label>
|
| <input type="text" id="customer-name" class="input" required>
|
| </div>
|
| <div class="form-group">
|
| <label>Email</label>
|
| <input type="email" id="customer-email" class="input">
|
| </div>
|
| <div class="form-group">
|
| <label>Phone *</label>
|
| <input type="tel" id="customer-phone" class="input" required>
|
| </div>
|
| <div class="form-group">
|
| <label>Shipping Address *</label>
|
| <textarea id="shipping-address" class="input" rows="3" required></textarea>
|
| </div>
|
| <div class="form-group">
|
| <label>Notes</label>
|
| <textarea id="order-notes" class="input" rows="2"></textarea>
|
| </div>
|
| <div class="checkout-summary">
|
| <div class="summary-row">
|
| <span>Subtotal:</span>
|
| <span id="checkout-subtotal">$0.00</span>
|
| </div>
|
| <div class="summary-row">
|
| <span>Shipping Fee:</span>
|
| <span>$10.00</span>
|
| </div>
|
| <div class="summary-row total">
|
| <strong>Total:</strong>
|
| <strong id="checkout-total">$0.00</strong>
|
| </div>
|
| </div>
|
| <button type="submit" class="btn btn-primary full-width">Place Order</button>
|
| </form>
|
| </div>
|
| </div>
|
|
|
|
|
| <div id="admin-product-modal" class="modal">
|
| <div class="modal-content large">
|
| <span class="close" onclick="closeModal('admin-product-modal')">×</span>
|
| <h2 id="product-modal-title">Add Product</h2>
|
| <form onsubmit="saveProduct(event)">
|
| <input type="hidden" id="edit-product-id">
|
| <div class="form-group">
|
| <label>Product Name *</label>
|
| <input type="text" id="product-name" class="input" required>
|
| </div>
|
| <div class="form-group">
|
| <label>Description</label>
|
| <textarea id="product-description" class="input" rows="3"></textarea>
|
| </div>
|
| <div class="form-row">
|
| <div class="form-group">
|
| <label>Base Price *</label>
|
| <input type="number" id="product-price" class="input" step="0.01" required>
|
| </div>
|
| <div class="form-group">
|
| <label>Category *</label>
|
| <input type="text" id="product-category" class="input" required>
|
| </div>
|
| </div>
|
| <div class="form-group">
|
| <label>
|
| <input type="checkbox" id="product-active" checked> Active
|
| </label>
|
| </div>
|
| <button type="submit" class="btn btn-primary">Save Product</button>
|
| <button type="button" class="btn btn-secondary" onclick="closeModal('admin-product-modal')">Cancel</button>
|
| </form>
|
| </div>
|
| </div>
|
|
|
| <script src="app.js"></script>
|
| </body>
|
| </html>
|
|
|
