122 lines
4.4 KiB
HTML
122 lines
4.4 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="id">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>OmahCitra Store — Toko Online Terlaris Indonesia</title>
|
|
<link rel="stylesheet" href="css/style.css">
|
|
</head>
|
|
<body>
|
|
|
|
<!-- ===== HEADER ===== -->
|
|
<header class="topbar">
|
|
<div class="container topbar-inner">
|
|
<a href="#" class="brand" data-view="catalog">
|
|
<span class="brand-logo">🛍️</span>
|
|
<span class="brand-name">OmahCitra<span class="brand-dot">Store</span></span>
|
|
</a>
|
|
<div class="search-box">
|
|
<input type="text" id="searchInput" placeholder="Cari produk terlaris...">
|
|
</div>
|
|
<button class="cart-btn" id="cartBtn">
|
|
🛒 Keranjang <span class="cart-count" id="cartCount">0</span>
|
|
</button>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- ===== CATEGORY NAV ===== -->
|
|
<nav class="catnav">
|
|
<div class="container catnav-inner" id="catNav"></div>
|
|
</nav>
|
|
|
|
<main class="container main">
|
|
|
|
<!-- ===== VIEW: KATALOG ===== -->
|
|
<section id="view-catalog" class="view active">
|
|
<div class="hero">
|
|
<h1>Produk Paling Laku di Indonesia 🇮🇩</h1>
|
|
<p>Belanja koleksi terlaris — elektronik, fashion, makanan, & rumah tangga.</p>
|
|
</div>
|
|
<div class="product-grid" id="productGrid"></div>
|
|
<p class="empty-note" id="emptyNote" style="display:none">Produk tidak ditemukan.</p>
|
|
</section>
|
|
|
|
<!-- ===== VIEW: KERANJANG ===== -->
|
|
<section id="view-cart" class="view">
|
|
<h2>🛒 Keranjang Belanja</h2>
|
|
<div id="cartItems" class="cart-list"></div>
|
|
<div id="cartEmpty" class="cart-empty" style="display:none">
|
|
<p>Keranjang kamu masih kosong.</p>
|
|
<button class="btn-primary" data-view="catalog">← Lanjut Belanja</button>
|
|
</div>
|
|
<div class="cart-summary" id="cartSummary" style="display:none">
|
|
<div class="summary-row"><span>Subtotal</span><span id="sumSubtotal">Rp0</span></div>
|
|
<button class="btn-primary" id="toCheckout">Lanjut ke Pembayaran →</button>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ===== VIEW: CHECKOUT (ORDER / PAYMENT / SHIPPING) ===== -->
|
|
<section id="view-checkout" class="view">
|
|
<h2>📦 Checkout</h2>
|
|
<div class="checkout-grid">
|
|
<div class="checkout-left">
|
|
<div class="card">
|
|
<h3>1. Data Penerima & Pengiriman</h3>
|
|
<label>Nama Lengkap</label>
|
|
<input type="text" id="custName" placeholder="Nama penerima">
|
|
<label>Alamat Lengkap</label>
|
|
<textarea id="custAddr" placeholder="Jalan, nomor, RT/RW, kelurahan, kecamatan, kota"></textarea>
|
|
<label>No. HP / WhatsApp</label>
|
|
<input type="text" id="custPhone" placeholder="08xxxxxxxxxx">
|
|
|
|
<label>Pilih Kurir</label>
|
|
<div id="courierOptions" class="opt-list"></div>
|
|
</div>
|
|
|
|
<div class="card">
|
|
<h3>2. Metode Pembayaran</h3>
|
|
<div id="paymentOptions" class="opt-list"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<aside class="checkout-right">
|
|
<div class="card summary-card">
|
|
<h3>Ringkasan Order</h3>
|
|
<div id="orderItems" class="order-items"></div>
|
|
<div class="summary-row"><span>Subtotal</span><span id="coSubtotal">Rp0</span></div>
|
|
<div class="summary-row"><span>Ongkos Kirim</span><span id="coShipping">Rp0</span></div>
|
|
<div class="summary-row total"><span>Total Bayar</span><span id="coTotal">Rp0</span></div>
|
|
<button class="btn-primary full" id="placeOrder">Buat Pesanan</button>
|
|
</div>
|
|
</aside>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ===== VIEW: KONFIRMASI ORDER ===== -->
|
|
<section id="view-done" class="view">
|
|
<div class="done-box">
|
|
<div class="done-icon">✅</div>
|
|
<h2>Pesanan Berhasil Dibuat!</h2>
|
|
<p>No. Pesanan: <strong id="orderNo"></strong></p>
|
|
<div id="doneDetail" class="done-detail"></div>
|
|
<button class="btn-primary" data-view="catalog">Belanja Lagi</button>
|
|
</div>
|
|
</section>
|
|
|
|
</main>
|
|
|
|
<footer class="footer">
|
|
<div class="container">
|
|
<p>© 2026 OmahCitra Store — Demo toko online. Dibangun dengan HTML, CSS & jQuery.</p>
|
|
</div>
|
|
</footer>
|
|
|
|
<!-- Toast -->
|
|
<div class="toast" id="toast"></div>
|
|
|
|
<script src="js/jquery-3.7.1.min.js"></script>
|
|
<script src="js/products.js"></script>
|
|
<script src="js/app.js"></script>
|
|
</body>
|
|
</html>
|