Initial commit

product.html

@@ -0,0 +1,319 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="UTF-8" />
+		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+
+		<title>Loading Product...</title>
+
+		<link rel="stylesheet" href="assets/css/styles.css" />
+		<link rel="stylesheet" href="assets/css/product.css" />
+		<link rel="stylesheet" href="assets/css/components.css" />
+	</head>
+
+	<body>
+		<!-- TOP BAR -->
+		<!-- <div id="topbar-placeholder"></div> -->
+
+		<!-- NAVBAR -->
+		<div id="navbar-placeholder"></div>
+
+		<!-- BREADCRUMB -->
+		<div class="breadcrumb-bar">
+			<div class="breadcrumb-inner">
+				<a href="index.html">Home</a>
+				<span class="sep">›</span>
+				<a href="#">Product</a>
+				<span class="sep">›</span>
+				<span class="current">Loading...</span>
+			</div>
+		</div>
+
+		<div class="product-page">
+			<!-- ========================= -->
+			<!-- TOP SECTION -->
+			<!-- ========================= -->
+			<div class="product-top">
+				<!-- GALLERY -->
+				<div class="gallery-col">
+					<div class="gallery-main">
+						<img
+							src=""
+							alt=""
+							width="600"
+							height="600"
+							loading="eager"
+							decoding="async"
+							draggable="false" />
+					</div>
+				</div>
+
+				<!-- SUMMARY -->
+				<div class="summary-col">
+					<div class="product-title-row">
+						<h1 class="product-title"></h1>
+					</div>
+
+					<!-- Rating -->
+					<div class="rating-row">
+						<span class="stars">★★★★★</span>
+						<span class="rating-count"></span>
+						<span class="rating-divider">|</span>
+						<span class="review-link"></span>
+						<span class="rating-divider">|</span>
+						<span class="sold-count"></span>
+					</div>
+
+					<!-- Price -->
+					<div class="product-price-row">
+						<span class="price-current"></span>
+						<span class="price-original"></span>
+						<span class="price-badge"></span>
+					</div>
+
+					<!-- Short desc -->
+					<p class="product-short-desc"></p>
+
+					<!-- Benefit pills -->
+					<div class="benefit-pills"></div>
+
+					<!-- Stock -->
+					<div class="stock-status"></div>
+
+					<hr class="prod-divider" />
+
+					<!-- Qty + Add to Cart -->
+					<div class="qty-cart-row">
+						<div class="qty-control">
+							<button class="qty-btn" onclick="changeQty(-1)">−</button>
+							<span class="qty-num" id="qty">1</span>
+							<button class="qty-btn" onclick="changeQty(1)">+</button>
+						</div>
+
+						<button class="add-to-cart-btn" onclick="addCurrentProductToCart()">
+							ADD TO CART
+						</button>
+					</div>
+
+					<hr class="prod-divider" />
+
+					<!-- Meta -->
+					<div class="product-meta-block">
+						<div class="meta-row">
+							<span class="meta-label">SKU:</span>
+							<span class="meta-sku"></span>
+						</div>
+						<div class="meta-row">
+							<span class="meta-label">Weight:</span>
+							<span class="meta-weight"></span>
+						</div>
+						<div class="meta-row">
+							<span class="meta-label">Price:</span>
+							<span class="meta-price"></span>
+						</div>
+						<div class="meta-row">
+							<span class="meta-label">Categories:</span>
+							<div class="meta-categories"></div>
+						</div>
+						<div class="meta-row">
+							<span class="meta-label">Tags:</span>
+							<div class="meta-tags"></div>
+						</div>
+						<div class="meta-row">
+							<span class="meta-label">Ideal For:</span>
+							<span class="meta-ideal"></span>
+						</div>
+					</div>
+				</div>
+			</div>
+
+			<!-- ========================= -->
+			<!-- TABS SECTION -->
+			<!-- ========================= -->
+
+			<div class="product-lower">
+				<div class="tabs-panel">
+					<div class="tab-nav">
+						<button class="tab-nav-btn active" onclick="switchTab(0)">
+							Description
+						</button>
+						<button class="tab-nav-btn" onclick="switchTab(1)">
+							Ingredients
+						</button>
+						<button class="tab-nav-btn" onclick="switchTab(2)">Reviews</button>
+						<button class="tab-nav-btn" onclick="switchTab(3)">Shipping</button>
+					</div>
+
+					<!-- DESCRIPTION -->
+					<div class="tab-pane active">
+						<p class="desc-lead"></p>
+						<div class="desc-body"></div>
+						<div class="desc-features"></div>
+						<div class="how-to-use">
+							<h4>📋 How to Use</h4>
+							<div class="how-steps"></div>
+						</div>
+					</div>
+
+					<!-- INGREDIENTS -->
+					<div class="tab-pane">
+						<p class="desc-lead"></p>
+						<div class="ingredients-grid"></div>
+						<div class="full-ingredients"></div>
+					</div>
+
+					<!-- REVIEWS -->
+					<div class="tab-pane">
+						<div class="reviews-summary">
+							<div class="rating-big">
+								<div class="score"></div>
+								<div class="stars-big">★★★★★</div>
+								<div class="total"></div>
+							</div>
+							<div class="rating-bars"></div>
+						</div>
+						<div class="review-list"></div>
+					</div>
+
+					<!-- SHIPPING -->
+					<div class="tab-pane">
+						<p class="desc-lead"></p>
+						<div class="desc-body"></div>
+					</div>
+				</div>
+			</div>
+
+			<!-- ========================= -->
+			<!-- RELATED PRODUCTS SECTION -->
+			<!-- ========================= -->
+
+			<div class="related-section">
+				<div class="related-header">
+					<h2 class="related-title">Related Products</h2>
+				</div>
+
+				<div class="related-grid"></div>
+			</div>
+		</div>
+
+		<!-- FOOTER -->
+		<div id="footer-placeholder"></div>
+
+		<div class="toast" id="toast">
+			<span class="toast-icon">🛒</span>
+			<span id="toast-msg">Item added to cart!</span>
+			<span class="toast-view" onclick="window.location.href='cart.html'">
+				View Cart
+			</span>
+		</div>
+
+		<!-- SCRIPTS -->
+		<script src="assets/js/components.js"></script>
+		<script src="assets/js/products.js"></script>
+		<script src="assets/js/cart.js"></script>
+		<script src="assets/js/product-renderer.js"></script>
+
+		<script>
+			let qty = 1;
+			let currentProduct = null;
+
+			// -----------------------------
+			// TOAST
+			// -----------------------------
+			function showToast(name) {
+				const toast = document.getElementById("toast");
+				const msg = document.getElementById("toast-msg");
+
+				msg.textContent = `"${name.substring(0, 30)}" added to cart!`;
+
+				toast.classList.add("show");
+
+				setTimeout(() => {
+					toast.classList.remove("show");
+				}, 3500);
+			}
+
+			// -----------------------------
+			// TABS
+			// -----------------------------
+			function switchTab(index) {
+				const panes = document.querySelectorAll(".tab-pane");
+				const buttons = document.querySelectorAll(".tab-nav-btn");
+
+				panes.forEach((pane, i) => {
+					pane.classList.toggle("active", i === index);
+				});
+
+				buttons.forEach((btn, i) => {
+					btn.classList.toggle("active", i === index);
+				});
+
+				if (index === 2) {
+					document
+						.querySelector(".tabs-panel")
+						.scrollIntoView({ behavior: "smooth", block: "start" });
+				}
+			}
+
+			// -----------------------------
+			// QUANTITY
+			// -----------------------------
+			function changeQty(delta) {
+				qty = Math.max(1, qty + delta);
+				document.getElementById("qty").textContent = qty;
+			}
+
+			// -----------------------------
+			// NAV CART COUNT (Uses Cart Module)
+			// -----------------------------
+			function updateNavCartCount() {
+				const countEl = document.getElementById("nav-cart-count");
+				if (countEl) {
+					countEl.textContent = Cart.getTotalCount();
+				}
+			}
+
+			// Listen for global cart updates
+			window.addEventListener("cartUpdated", updateNavCartCount);
+
+			// -----------------------------
+			// ADD TO CART (Uses Cart Module)
+			// -----------------------------
+			function addCurrentProductToCart() {
+				if (!currentProduct) return;
+
+				Cart.addItem(currentProduct, qty);
+				showToast(currentProduct.basic.name);
+			}
+
+			// -----------------------------
+			// INIT PAGE
+			// -----------------------------
+			(function () {
+				const params = new URLSearchParams(window.location.search);
+				const productId = params.get("id");
+
+				if (!productId) {
+					document.querySelector(".product-page").innerHTML =
+						"<h2 style='padding:40px'>Product not found</h2>";
+					return;
+				}
+
+				const product = PRODUCTS.find((p) => p.id === productId);
+
+				if (!product) {
+					document.querySelector(".product-page").innerHTML =
+						"<h2 style='padding:40px'>Product not found</h2>";
+					return;
+				}
+
+				currentProduct = product;
+
+				renderProduct(product.id);
+
+				// Set initial cart badge value
+				updateNavCartCount();
+			})();
+		</script>
+	</body>
+</html>