pramod.rai/mediglobe
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Initial commit

Browse Source
This commit is contained in:
Azmat Ali
2026-03-02 13:22:47 +05:30
commit e4c373f050
36 changed files with 7304 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+352
View File
@@ -0,0 +1,352 @@
<!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>