353 lines
11 KiB
HTML
353 lines
11 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||
<meta
|
||
name="description"
|
||
content="MediGlobe Healthcare – Buy genuine medical products, pain relief oils, skincare, and wellness essentials online at affordable prices." />
|
||
<title>MediGlobe Healthcare | Medical & Wellness Products Online</title>
|
||
|
||
<link rel="icon" href="assets/images/favicon.ico" type="image/x-icon" />
|
||
<link rel="stylesheet" href="assets/css/styles.css" />
|
||
<link rel="stylesheet" href="assets/css/components.css" />
|
||
</head>
|
||
<body>
|
||
<!-- TOP BAR -->
|
||
<!-- <div id="topbar-placeholder"></div> -->
|
||
|
||
<!-- NAVBAR -->
|
||
<div id="navbar-placeholder"></div>
|
||
|
||
<!-- HERO SECTION -->
|
||
<div class="hero-section">
|
||
<!-- Main Banner -->
|
||
<div class="hero-main">
|
||
<div class="hero-content">
|
||
<div class="hero-cat">Pain Relief Oil</div>
|
||
<h1 class="hero-h1">MEDI ORTHO</h1>
|
||
<p class="hero-desc">
|
||
An Ayurvedic pain relief oil formulated to reduce inflammation,
|
||
soothe stiffness, and promote smooth mobility.
|
||
</p>
|
||
<a href="product.html?id=mo-3381" class="btn-primary hero-buy-btn">
|
||
<span class="btn-text">BUY NOW</span>
|
||
<span class="btn-check">✓ Added</span>
|
||
</a>
|
||
</div>
|
||
|
||
<!-- Discount sticker -->
|
||
<div class="hero-disc">
|
||
<span class="pct">29%</span>
|
||
<span class="off">OFF</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- FEATURED CATEGORY BANNERS -->
|
||
<div class="featured-strip">
|
||
<!-- Fairness Cream -->
|
||
<a href="product.html?id=ur-9043" class="feat-card bg-cream">
|
||
<div class="feat-card-bg"></div>
|
||
<div class="feat-overlay"></div>
|
||
<div class="feat-disc">
|
||
<span class="p">20%</span><span class="o">OFF</span>
|
||
</div>
|
||
<div class="feat-info">
|
||
<div class="feat-tag">All Skin Type</div>
|
||
<div class="feat-name">Fairness Cream</div>
|
||
<div class="feat-shop">SHOP NOW</div>
|
||
</div>
|
||
</a>
|
||
|
||
<!-- Face Wash -->
|
||
<a href="product.html?id=pf-6621" class="feat-card bg-facewash">
|
||
<div class="feat-card-bg"></div>
|
||
<div class="feat-overlay"></div>
|
||
<div class="feat-disc">
|
||
<span class="p">10%</span><span class="o">OFF</span>
|
||
</div>
|
||
<div class="feat-info">
|
||
<div class="feat-tag">100% Natural</div>
|
||
<div class="feat-name">Face Wash</div>
|
||
<div class="feat-shop">SHOP NOW</div>
|
||
</div>
|
||
</a>
|
||
|
||
<!-- Anti Acne Cream -->
|
||
<a href="product.html?id=cs-5572" class="feat-card bg-acne">
|
||
<div class="feat-card-bg"></div>
|
||
<div class="feat-overlay"></div>
|
||
<div class="feat-disc">
|
||
<span class="p">30%</span><span class="o">OFF</span>
|
||
</div>
|
||
<div class="feat-info">
|
||
<div class="feat-tag">100% Natural</div>
|
||
<div class="feat-name">Anti Acne Cream</div>
|
||
<div class="feat-shop">SHOP NOW</div>
|
||
</div>
|
||
</a>
|
||
</div>
|
||
|
||
<div class="section-wrap-span-2">
|
||
<!-- HERBAL ORTHO MEDS -->
|
||
<div class="">
|
||
<div class="sec-row">
|
||
<h2 class="sec-title">Herbal Ortho Meds</h2>
|
||
</div>
|
||
<div class="products-grid-span-2" id="products-grid-ortho"></div>
|
||
</div>
|
||
|
||
<!-- HERBAL GASTRO MEDS -->
|
||
<div class="">
|
||
<div class="sec-row">
|
||
<h2 class="sec-title">Herbal Gastro Meds</h2>
|
||
</div>
|
||
<div class="products-grid-span-2" id="products-grid-gastro"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- HERBAL COSMETICS -->
|
||
<div class="section-wrap">
|
||
<div class="sec-row">
|
||
<h2 class="sec-title">Herbal Cosmetics</h2>
|
||
</div>
|
||
<div class="products-grid" id="products-grid-cosmetics"></div>
|
||
</div>
|
||
|
||
<!-- FOOTER -->
|
||
<div id="footer-placeholder"></div>
|
||
|
||
<!-- TOAST — same as product pages -->
|
||
<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>
|
||
|
||
<script src="assets/js/components.js"></script>
|
||
<script src="assets/js/products.js"></script>
|
||
<script src="assets/js/cart.js"></script>
|
||
|
||
<script>
|
||
const orthoGrid = document.getElementById("products-grid-ortho");
|
||
const gastroGrid = document.getElementById("products-grid-gastro");
|
||
const cosmeticsGrid = document.getElementById("products-grid-cosmetics");
|
||
|
||
/* ─────────────────────────────
|
||
RENDER PRODUCTS (FILTERED)
|
||
───────────────────────────── */
|
||
function renderProducts(gridEl, categoryName) {
|
||
if (!gridEl) return;
|
||
gridEl.innerHTML = "";
|
||
|
||
const list = categoryName
|
||
? PRODUCTS.filter((p) => p.basic?.homeCategory === categoryName)
|
||
: PRODUCTS;
|
||
|
||
list.forEach((product) => {
|
||
const discount = product.pricing.originalPrice
|
||
? Math.round(
|
||
((product.pricing.originalPrice - product.pricing.price) /
|
||
product.pricing.originalPrice) *
|
||
100
|
||
)
|
||
: 0;
|
||
|
||
const el = document.createElement("div");
|
||
el.className = "product-card";
|
||
|
||
el.innerHTML = `
|
||
<!-- Clickable overlay -->
|
||
<a href="/product.html?id=${product.id}"
|
||
target="_blank"
|
||
class="product-card-link"
|
||
aria-label="View ${product.basic.name}">
|
||
</a>
|
||
|
||
<div class="product-img">
|
||
${discount > 0 ? `<div class="product-disc">-${discount}%</div>` : ""}
|
||
<img src="${product.media.mainImage}"
|
||
alt="${product.basic.name}" />
|
||
</div>
|
||
|
||
<div class="product-body">
|
||
<div class="product-name">
|
||
${product.basic.name}
|
||
</div>
|
||
|
||
<div class="product-rating">★★★★★</div>
|
||
|
||
<div class="product-price">
|
||
<span class="rp-now">₹${product.pricing.price}</span>
|
||
${
|
||
product.pricing.originalPrice
|
||
? `<span class="rp-old">₹${product.pricing.originalPrice}</span>`
|
||
: ""
|
||
}
|
||
</div>
|
||
|
||
<button class="product-add-btn" data-id="${product.id}">
|
||
<svg viewBox="0 0 24 24" fill="none"
|
||
stroke="currentColor" stroke-width="2"
|
||
stroke-linecap="round" stroke-linejoin="round">
|
||
<circle cx="9" cy="21" r="1"></circle>
|
||
<circle cx="20" cy="21" r="1"></circle>
|
||
<path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"></path>
|
||
</svg>
|
||
Add to Cart
|
||
</button>
|
||
</div>
|
||
`;
|
||
|
||
gridEl.appendChild(el);
|
||
});
|
||
}
|
||
|
||
/* ─────────────────────────────
|
||
UPDATE NAV COUNT + BADGES
|
||
───────────────────────────── */
|
||
function updateUIFromCart() {
|
||
const total = Cart.getTotalCount();
|
||
|
||
const navCount = document.getElementById("nav-cart-count");
|
||
if (navCount) navCount.textContent = total;
|
||
|
||
document.querySelectorAll(".prod-qty-badge").forEach((badge) => {
|
||
const id = badge.dataset.id;
|
||
const item = Cart.getCart().find((i) => i.id === id);
|
||
|
||
if (item) {
|
||
badge.style.display = "block";
|
||
badge.textContent = item.quantity;
|
||
} else {
|
||
badge.style.display = "none";
|
||
}
|
||
});
|
||
}
|
||
|
||
/* ─────────────────────────────
|
||
ADD TO CART
|
||
───────────────────────────── */
|
||
function handleAddToCart(button) {
|
||
const id = button.dataset.id;
|
||
const product = PRODUCTS.find((p) => p.id === id);
|
||
if (!product) return;
|
||
|
||
Cart.addItem(product, 1);
|
||
showToast(product.basic.name);
|
||
|
||
button.classList.add("added");
|
||
setTimeout(() => button.classList.remove("added"), 1000);
|
||
|
||
animateToCart(button);
|
||
}
|
||
|
||
/* ─────────────────────────────
|
||
TOAST
|
||
───────────────────────────── */
|
||
function showToast(name) {
|
||
const toast = document.getElementById("toast");
|
||
document.getElementById("toast-msg").textContent = `"${name.substring(
|
||
0,
|
||
30
|
||
)}…" added to cart!`;
|
||
|
||
toast.classList.add("show");
|
||
setTimeout(() => toast.classList.remove("show"), 3500);
|
||
}
|
||
|
||
/* ─────────────────────────────
|
||
FLY ANIMATION (UNCHANGED)
|
||
───────────────────────────── */
|
||
function animateToCart(button) {
|
||
const cartBtn = document.querySelector(".cart-btn");
|
||
if (!cartBtn) return;
|
||
|
||
const imgBox = button
|
||
.closest(".product-card")
|
||
.querySelector(".product-img img");
|
||
|
||
const clone = imgBox.cloneNode(true);
|
||
|
||
const rect = imgBox.getBoundingClientRect();
|
||
|
||
clone.style.cssText = `
|
||
position: fixed;
|
||
z-index: 9999;
|
||
width: 80px;
|
||
height: 80px;
|
||
object-fit: contain;
|
||
pointer-events: none;
|
||
top: ${rect.top}px;
|
||
left: ${rect.left}px;
|
||
transition: all 0.7s cubic-bezier(.6,-0.28,.74,.05);
|
||
`;
|
||
|
||
document.body.appendChild(clone);
|
||
|
||
const cartRect = cartBtn.getBoundingClientRect();
|
||
|
||
requestAnimationFrame(() => {
|
||
clone.style.top = cartRect.top + "px";
|
||
clone.style.left = cartRect.left + "px";
|
||
clone.style.width = "20px";
|
||
clone.style.height = "20px";
|
||
clone.style.opacity = "0.3";
|
||
});
|
||
|
||
setTimeout(() => clone.remove(), 700);
|
||
}
|
||
|
||
/* ─────────────────────────────
|
||
EVENT DELEGATION (ALL GRIDS)
|
||
───────────────────────────── */
|
||
document.addEventListener("click", function (e) {
|
||
const button = e.target.closest(".product-add-btn");
|
||
if (!button) return;
|
||
|
||
e.stopPropagation();
|
||
|
||
const id = button.dataset.id;
|
||
const product = PRODUCTS.find((p) => p.id === id);
|
||
if (!product) return;
|
||
|
||
Cart.addItem(product, 1);
|
||
showToast(product.basic.name);
|
||
animateToCart(button);
|
||
});
|
||
|
||
/* ─────────────────────────────
|
||
REACT TO CART UPDATES
|
||
───────────────────────────── */
|
||
window.addEventListener("cartUpdated", updateUIFromCart);
|
||
|
||
/* ─────────────────────────────
|
||
INIT
|
||
───────────────────────────── */
|
||
renderProducts(orthoGrid, "Herbal Ortho Meds");
|
||
renderProducts(gastroGrid, "Herbal Gastro Meds");
|
||
renderProducts(cosmeticsGrid, "Herbal Cosmetics");
|
||
updateUIFromCart();
|
||
|
||
document.addEventListener("components:ready", () => {
|
||
renderProducts(orthoGrid, "Herbal Ortho Meds");
|
||
renderProducts(gastroGrid, "Herbal Gastro Meds");
|
||
renderProducts(cosmeticsGrid, "Herbal Cosmetics");
|
||
updateUIFromCart();
|
||
});
|
||
</script>
|
||
|
||
<style>
|
||
/* featured strip cards are now <a> tags — reset default link styles */
|
||
a.feat-card {
|
||
text-decoration: none;
|
||
color: inherit;
|
||
display: block;
|
||
}
|
||
</style>
|
||
</body>
|
||
</html>
|