Initial commit

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
+3
View File
@@ -0,0 +1,3 @@
/node_modules
.netlify
.env
+360
View File
@@ -0,0 +1,360 @@
<!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="About DSPR Mediglobe Healthcare LLP – Bridging ancient Ayurvedic wisdom with modern healthcare. Learn about our vision, mission, and commitment to natural healing." />
<title>About Us | MediGlobe Healthcare</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/about.css" />
</head>
<body class="about-page">
<!-- 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>
<span class="current">About Us</span>
</div>
</div>
<!-- ═══════════════════════════════════ -->
<!-- HERO -->
<!-- ═══════════════════════════════════ -->
<section class="about-hero">
<div class="about-hero-inner">
<!-- LEFT -->
<div>
<div class="about-hero-tag">
🌿 Est. DSPR Mediglobe Healthcare LLP
</div>
<h1>Healing the World,<br /><em>Naturally.</em></h1>
<p class="about-hero-desc">
A pioneering wellness enterprise bridging ancient Ayurvedic wisdom
with modern healthcare — formulating high-quality herbal remedies
that promote holistic healing for a global community.
</p>
<div class="about-hero-statement">
<span class="quote-mark">"</span>
<p>Universe of Medical Services: Healing the World, Naturally.</p>
</div>
</div>
<!-- RIGHT — Corporate Identity Cards -->
<div class="about-hero-cards">
<div class="identity-card">
<div class="identity-icon">🏢</div>
<div>
<div class="identity-label">Registered Name</div>
<div class="identity-value">DSPR Mediglobe Healthcare LLP</div>
</div>
</div>
<div class="identity-card">
<div class="identity-icon">🌿</div>
<div>
<div class="identity-label">Focus Area</div>
<div class="identity-value">
Ayurvedic Proprietary Medicines &amp; Herbal Cosmetics
</div>
</div>
</div>
<div class="identity-card">
<div class="identity-icon">✅</div>
<div>
<div class="identity-label">Core Philosophy</div>
<div class="identity-value">
100% Natural · Purity Driven · Result Oriented
</div>
</div>
</div>
</div>
</div>
</section>
<!-- ═══════════════════════════════════ -->
<!-- STATS STRIP -->
<!-- ═══════════════════════════════════ -->
<div class="stats-strip">
<div class="stats-inner">
<div class="stat-item">
<div class="stat-num">100<span>%</span></div>
<div class="stat-label">Natural &amp; Chemical-Free Products</div>
</div>
<div class="stat-item">
<div class="stat-num">8<span>+</span></div>
<div class="stat-label">Proprietary Herbal Formulations</div>
</div>
<!-- <div class="stat-item">
<div class="stat-num">80<span>+</span></div>
<div class="stat-label">Countries We Ship To</div>
</div> -->
<div class="stat-item">
<div class="stat-num">24<span>/7</span></div>
<div class="stat-label">Dedicated Customer Care</div>
</div>
</div>
</div>
<!-- ═══════════════════════════════════ -->
<!-- VISION & MISSION -->
<!-- ═══════════════════════════════════ -->
<div class="about-section">
<div class="section-label">🎯 Who We Are</div>
<h2 class="section-heading">Our Vision &amp; <em>Mission</em></h2>
<p class="section-subtext">
At DSPR Mediglobe, we don't just treat symptoms — we nurture the body's
innate ability to heal, ensuring a healthier, more vibrant life for our
global community.
</p>
<div class="vm-grid">
<!-- VISION -->
<div class="vm-card">
<div class="vm-icon">🌐</div>
<div class="vm-title">Our Vision</div>
<div class="vm-text">
To become a global benchmark in Ayurvedic Excellence, transforming
lives through innovative, nature-based healthcare solutions that are
accessible, sustainable, and scientifically grounded.
</div>
</div>
<!-- MISSION -->
<div class="vm-card mission-card">
<div class="vm-icon" style="background: #e6f9fb">🎯</div>
<div class="vm-title">Our Mission</div>
<div class="vm-text">
To manufacture and deliver products that merge the purity of
traditional Ayurvedic medicine with the rigour of modern science —
empowering lives through transparent, affordable, and genuinely
effective natural healthcare.
</div>
<!-- Mission pillars -->
<div class="pillars-grid" style="margin-top: var(--space-5)">
<div class="pillar-item">
<div class="pillar-dot"></div>
<div>
<div class="pillar-title">Quality First</div>
<div class="pillar-text">
100% natural, chemical-free products meeting the highest
safety and potency standards
</div>
</div>
</div>
<div class="pillar-item">
<div class="pillar-dot"></div>
<div>
<div class="pillar-title">Holistic Healing</div>
<div class="pillar-text">
Preventive healthcare integrating traditional herbal knowledge
with modern wellness
</div>
</div>
</div>
<div class="pillar-item">
<div class="pillar-dot"></div>
<div>
<div class="pillar-title">Empowering Lives</div>
<div class="pillar-text">
Restoring consumer confidence in natural healing through
transparency and affordability
</div>
</div>
</div>
<div class="pillar-item">
<div class="pillar-dot"></div>
<div>
<div class="pillar-title">Sustainable Innovation</div>
<div class="pillar-text">
Continuously developing new formulations for contemporary
lifestyle diseases using nature
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- ═══════════════════════════════════ -->
<!-- PHILOSOPHY STRIP -->
<!-- ═══════════════════════════════════ -->
<div class="philosophy-strip">
<div class="philosophy-inner">
<!-- Left — text -->
<div class="philosophy-text-col">
<div class="section-label">🌱 Our Philosophy</div>
<h2 class="section-heading">
Where Ancient Wisdom<br />Meets <em>Modern Science</em>
</h2>
<div class="philosophy-body">
<p>
DSPR Mediglobe Healthcare LLP was founded on a simple but powerful
conviction: nature holds the key to ultimate wellness. Rooted in
the rich heritage of Indian traditional medicine, every
formulation we create draws on centuries of Ayurvedic knowledge —
herbs, oils, and botanical extracts that have stood the test of
time as genuine healers.
</p>
<p>
What sets us apart is our refusal to choose between tradition and
science. Our in-house research and development team rigorously
validates every ingredient, ensuring that the ancient remedies we
bring to market meet contemporary standards of purity, potency,
and safety. The result is a product range that is both deeply
rooted and clinically credible.
</p>
<p>
From our advanced skincare solutions in the Ultimate Radiance
range to specialised therapeutic formulations like GS Crusher and
Arsha Heal, every product is a testament to our commitment to
providing healthcare that works — naturally.
</p>
</div>
</div>
<!-- Right — value cards -->
<div class="philosophy-values">
<div class="value-card">
<div class="value-icon">🌿</div>
<div>
<div class="value-title">100% Natural Ingredients</div>
<div class="value-desc">
Every formulation uses only plant-based, chemical-free raw
materials sourced from trusted Ayurvedic suppliers
</div>
</div>
</div>
<div class="value-card">
<div class="value-icon">🔬</div>
<div>
<div class="value-title">Scientifically Validated</div>
<div class="value-desc">
Each product is clinically tested for safety, potency, and
efficacy before it reaches your hands
</div>
</div>
</div>
<div class="value-card">
<div class="value-icon">🤝</div>
<div>
<div class="value-title">Transparent &amp; Trustworthy</div>
<div class="value-desc">
Full ingredient disclosure, honest claims, and no hidden
chemicals — ever
</div>
</div>
</div>
<div class="value-card">
<div class="value-icon">🌍</div>
<div>
<div class="value-title">Globally Accessible</div>
<div class="value-desc">
Delivering Ayurvedic excellence to customers in 80+ countries at
prices that respect every budget
</div>
</div>
</div>
</div>
</div>
</div>
<!-- ═══════════════════════════════════ -->
<!-- PRODUCT RANGE -->
<!-- ═══════════════════════════════════ -->
<div class="range-section">
<div class="range-inner">
<div class="section-label">💊 Our Range</div>
<h2 class="section-heading">
Formulations Built for <em>Every Need</em>
</h2>
<p class="section-subtext">
From daily skincare to targeted therapeutic treatments — each range is
formulated to address specific wellness needs using the power of
Ayurvedic botanicals.
</p>
<div class="range-grid">
<div class="range-card rc-1">
<div class="range-icon">✨</div>
<div class="range-tag">Herbal Cosmetics</div>
<div class="range-name">Ultimate Radiance</div>
<div class="range-desc">
Advanced skincare solutions designed to brighten, protect, and
restore your skin's natural glow. Powered by Vitamin C,
Niacinamide, Kojic Acid, and time-tested botanical extracts.
Includes our Fairness Cream, Anti Acne Cream, and Brightening Face
Wash.
</div>
</div>
<div class="range-card rc-2">
<div class="range-icon">💊</div>
<div class="range-tag">Ayurvedic Therapeutics</div>
<div class="range-name">GS Crusher &amp; Joint Care</div>
<div class="range-desc">
Specialised formulations targeting musculoskeletal health, joint
pain, and inflammatory conditions. Blending Boswellia, Shallaki,
and Guggul with modern nutraceuticals like Glucosamine and
Collagen Peptide for comprehensive relief.
</div>
</div>
<div class="range-card rc-3">
<div class="range-icon">🌿</div>
<div class="range-tag">Herbal Remedies</div>
<div class="range-name">Arsha Heal &amp; Wellness</div>
<div class="range-desc">
Targeted therapeutic preparations for digestive health, pain
management, and systemic wellness. Rooted in classical Ayurvedic
texts, updated for modern bioavailability and clinical efficacy
standards.
</div>
</div>
</div>
</div>
</div>
<!-- ═══════════════════════════════════ -->
<!-- CTA -->
<!-- ═══════════════════════════════════ -->
<section class="about-cta">
<div class="about-cta-inner">
<h2>Ready to Experience<br /><em>Natural Healing?</em></h2>
<p>
Explore our complete range of Ayurvedic formulations — crafted with
purity, backed by science, and delivered with care to your door.
</p>
<div class="cta-buttons">
<a href="index.html" class="btn-cta-primary">🛒 Shop All Products</a>
<a href="cart.html" class="btn-cta-outline">View My Cart →</a>
</div>
</div>
</section>
<!-- FOOTER -->
<div id="footer-placeholder"></div>
<script src="assets/js/components.js"></script>
<script>
// Update cart count in navbar once components load
document.addEventListener("components:ready", () => {
const cart = JSON.parse(localStorage.getItem("cart")) || [];
const total = cart.reduce((s, i) => s + i.quantity, 0);
const el = document.getElementById("nav-cart-count");
if (el) el.textContent = total;
});
</script>
</body>
</html>
+742
View File
@@ -0,0 +1,742 @@
/* ── ABOUT PAGE STYLES ── */
.about-page {
background: #f8fafc;
}
/* ── BREADCRUMB ── */
.breadcrumb-bar {
background: white;
border-bottom: 0.0625rem solid var(--gray-200);
padding: var(--space-3) 0;
}
.breadcrumb-inner {
max-width: 80rem;
margin: 0 auto;
padding: 0 var(--space-6);
display: flex;
align-items: center;
gap: var(--space-2);
font-size: var(--text-md);
color: var(--gray-400);
}
.breadcrumb-inner a {
color: var(--gray-600);
transition: color 0.2s;
}
.breadcrumb-inner a:hover {
color: var(--blue);
}
.breadcrumb-inner .sep {
color: var(--gray-300);
}
.breadcrumb-inner .current {
color: var(--blue);
font-weight: 600;
}
/* ── HERO BANNER ── */
.about-hero {
background: linear-gradient(135deg, #0e4da4 0%, #1a6fd4 50%, #17a2b8 100%);
padding: var(--space-14) var(--space-6);
position: relative;
overflow: hidden;
}
/* decorative circles */
.about-hero::before,
.about-hero::after {
content: "";
position: absolute;
border-radius: 50%;
opacity: 0.08;
background: white;
}
.about-hero::before {
width: 32rem;
height: 32rem;
top: -12rem;
right: -8rem;
}
.about-hero::after {
width: 20rem;
height: 20rem;
bottom: -8rem;
left: -4rem;
}
.about-hero-inner {
max-width: 80rem;
margin: 0 auto;
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-12);
align-items: center;
position: relative;
z-index: 1;
}
.about-hero-tag {
display: inline-flex;
align-items: center;
gap: var(--space-2);
background: rgba(255, 255, 255, 0.15);
color: rgba(255, 255, 255, 0.9);
font-size: var(--text-sm);
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
padding: var(--space-1) var(--space-3);
border-radius: var(--radius-full);
border: 0.0625rem solid rgba(255, 255, 255, 0.25);
margin-bottom: var(--space-4);
}
.about-hero h1 {
font-size: 2.75rem;
font-weight: 900;
color: white;
line-height: 1.15;
letter-spacing: -0.03em;
margin-bottom: var(--space-5);
}
.about-hero h1 em {
font-style: normal;
color: var(--yellow);
}
.about-hero-desc {
font-size: var(--text-xl);
color: rgba(255, 255, 255, 0.82);
line-height: 1.75;
margin-bottom: var(--space-6);
max-width: 30rem;
}
.about-hero-statement {
display: flex;
align-items: flex-start;
gap: var(--space-3);
background: rgba(255, 255, 255, 0.1);
border: 0.0625rem solid rgba(255, 255, 255, 0.2);
border-radius: var(--radius-xl);
padding: var(--space-4) var(--space-5);
backdrop-filter: blur(6px);
}
.about-hero-statement .quote-mark {
font-size: 3rem;
line-height: 1;
color: var(--yellow);
font-weight: 900;
margin-top: -0.5rem;
flex-shrink: 0;
}
.about-hero-statement p {
font-size: var(--text-lg);
color: rgba(255, 255, 255, 0.92);
font-style: italic;
line-height: 1.6;
font-weight: 500;
}
/* Hero right — identity cards */
.about-hero-cards {
display: flex;
flex-direction: column;
gap: var(--space-4);
}
.identity-card {
background: rgba(255, 255, 255, 0.12);
border: 0.0625rem solid rgba(255, 255, 255, 0.2);
border-radius: var(--radius-xl);
padding: var(--space-5) var(--space-6);
backdrop-filter: blur(8px);
display: flex;
align-items: center;
gap: var(--space-4);
transition: background 0.2s;
}
.identity-card:hover {
background: rgba(255, 255, 255, 0.18);
}
.identity-icon {
width: 3rem;
height: 3rem;
border-radius: var(--radius-lg);
background: rgba(255, 255, 255, 0.15);
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5rem;
flex-shrink: 0;
}
.identity-label {
font-size: var(--text-sm);
color: rgba(255, 255, 255, 0.6);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.06em;
margin-bottom: var(--space-1);
}
.identity-value {
font-size: var(--text-lg);
color: white;
font-weight: 700;
line-height: 1.3;
}
/* ── STATS STRIP ── */
.stats-strip {
background: white;
border-bottom: 0.0625rem solid var(--gray-200);
}
.stats-inner {
max-width: 80rem;
margin: 0 auto;
padding: var(--space-8) var(--space-6);
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--space-6);
}
.stat-item {
text-align: center;
padding: var(--space-5);
border-radius: var(--radius-xl);
transition: background 0.2s;
}
.stat-item:hover {
background: var(--gray-50);
}
.stat-num {
font-size: 2.5rem;
font-weight: 900;
color: var(--blue);
line-height: 1;
letter-spacing: -0.03em;
margin-bottom: var(--space-2);
}
.stat-num span {
color: var(--yellow);
}
.stat-label {
font-size: var(--text-md);
color: var(--gray-600);
font-weight: 500;
line-height: 1.4;
}
.stat-divider {
width: 0.0625rem;
background: var(--gray-200);
margin: var(--space-4) 0;
align-self: stretch;
}
/* ── SECTION WRAPPER ── */
.about-section {
max-width: 80rem;
margin: 0 auto;
padding: var(--space-12) var(--space-6);
}
.section-label {
display: inline-flex;
align-items: center;
gap: var(--space-2);
background: var(--blue-light);
color: var(--blue);
font-size: var(--text-sm);
font-weight: 700;
letter-spacing: 0.07em;
text-transform: uppercase;
padding: var(--space-1) var(--space-3);
border-radius: var(--radius-full);
margin-bottom: var(--space-4);
}
.section-heading {
font-size: var(--text-deal);
font-weight: 900;
color: var(--gray-800);
letter-spacing: -0.03em;
line-height: 1.15;
margin-bottom: var(--space-4);
}
.section-heading em {
font-style: normal;
color: var(--blue);
}
.section-subtext {
font-size: var(--text-xl);
color: var(--gray-600);
line-height: 1.75;
max-width: 40rem;
}
/* ── VISION & MISSION ── */
.vm-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-6);
margin-top: var(--space-8);
}
.vm-card {
background: white;
border: 0.0625rem solid var(--gray-200);
border-radius: var(--radius-xl);
padding: var(--space-8);
position: relative;
overflow: hidden;
transition: box-shadow 0.25s, transform 0.25s;
}
.vm-card:hover {
box-shadow: 0 0.75rem 2rem rgba(26, 111, 212, 0.1);
transform: translateY(-0.25rem);
}
/* accent bar */
.vm-card::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 0.25rem;
background: linear-gradient(90deg, var(--blue), var(--teal));
border-radius: var(--radius-xl) var(--radius-xl) 0 0;
}
.vm-card.mission-card::before {
background: linear-gradient(90deg, var(--teal), #17a2b8cc);
}
.vm-icon {
width: 3.5rem;
height: 3.5rem;
border-radius: var(--radius-lg);
background: var(--blue-light);
display: flex;
align-items: center;
justify-content: center;
font-size: 1.75rem;
margin-bottom: var(--space-5);
}
.mission-card .vm-icon {
background: #e6f9fb;
}
.vm-title {
font-size: var(--text-5xl);
font-weight: 800;
color: var(--gray-800);
margin-bottom: var(--space-3);
letter-spacing: -0.02em;
}
.vm-text {
font-size: var(--text-lg);
color: var(--gray-600);
line-height: 1.75;
}
/* ── MISSION PILLARS ── */
.pillars-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--space-4);
margin-top: var(--space-6);
}
.pillar-item {
display: flex;
align-items: flex-start;
gap: var(--space-4);
background: var(--gray-50);
border-radius: var(--radius-lg);
padding: var(--space-4) var(--space-5);
border: 0.0625rem solid var(--gray-200);
transition: all 0.2s;
}
.pillar-item:hover {
border-color: var(--blue);
background: var(--blue-light);
}
.pillar-dot {
width: 0.5rem;
height: 0.5rem;
background: var(--blue);
border-radius: var(--radius-full);
margin-top: 0.45rem;
flex-shrink: 0;
}
.pillar-title {
font-size: var(--text-md);
font-weight: 700;
color: var(--blue);
margin-bottom: var(--space-1);
}
.pillar-text {
font-size: var(--text-md);
color: var(--gray-600);
line-height: 1.6;
}
/* ── PHILOSOPHY STRIP ── */
.philosophy-strip {
background: linear-gradient(135deg, #edf4ff 0%, #e0edfc 50%, #d4e6f8 100%);
padding: var(--space-12) 0;
margin: var(--space-6) 0 0;
}
.philosophy-inner {
max-width: 80rem;
margin: 0 auto;
padding: 0 var(--space-6);
display: grid;
grid-template-columns: 1.1fr 1fr;
gap: var(--space-12);
align-items: center;
}
.philosophy-text-col .section-label {
margin-bottom: var(--space-4);
}
.philosophy-body {
font-size: var(--text-lg);
color: var(--gray-600);
line-height: 1.8;
margin-top: var(--space-5);
}
.philosophy-body p {
margin-bottom: var(--space-4);
}
.philosophy-body p:last-child {
margin-bottom: 0;
}
/* Philosophy values column */
.philosophy-values {
display: flex;
flex-direction: column;
gap: var(--space-4);
}
.value-card {
background: white;
border-radius: var(--radius-xl);
padding: var(--space-5) var(--space-6);
border: 0.0625rem solid var(--gray-200);
display: flex;
align-items: center;
gap: var(--space-4);
transition: all 0.2s;
}
.value-card:hover {
border-color: var(--blue);
box-shadow: 0 0.25rem 1rem rgba(26, 111, 212, 0.1);
transform: translateX(0.25rem);
}
.value-icon {
width: 3rem;
height: 3rem;
border-radius: var(--radius-md);
background: var(--blue-light);
display: flex;
align-items: center;
justify-content: center;
font-size: 1.375rem;
flex-shrink: 0;
}
.value-title {
font-size: var(--text-md);
font-weight: 800;
color: var(--gray-800);
margin-bottom: var(--space-1);
}
.value-desc {
font-size: var(--text-sm);
color: var(--gray-400);
line-height: 1.5;
}
/* ── PRODUCT RANGE SECTION ── */
.range-section {
background: white;
padding: var(--space-12) 0;
}
.range-inner {
max-width: 80rem;
margin: 0 auto;
padding: 0 var(--space-6);
}
.range-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-5);
margin-top: var(--space-8);
}
.range-card {
border-radius: var(--radius-xl);
padding: var(--space-7, 1.75rem) var(--space-6);
display: flex;
flex-direction: column;
gap: var(--space-3);
border: 0.0625rem solid var(--gray-200);
transition: all 0.25s;
position: relative;
overflow: hidden;
}
.range-card::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 0.1875rem;
background: linear-gradient(90deg, var(--blue), var(--teal));
transform: scaleX(0);
transition: transform 0.3s;
transform-origin: left;
}
.range-card:hover {
box-shadow: 0 0.75rem 2rem rgba(26, 111, 212, 0.1);
transform: translateY(-0.25rem);
border-color: var(--blue);
}
.range-card:hover::after {
transform: scaleX(1);
}
.rc-1 {
background: linear-gradient(135deg, #f9efe7 0%, white 60%);
}
.rc-2 {
background: linear-gradient(135deg, #e4edf8 0%, white 60%);
}
.rc-3 {
background: linear-gradient(135deg, #e8f2e8 0%, white 60%);
}
.range-icon {
font-size: 2.25rem;
margin-bottom: var(--space-2);
}
.range-name {
font-size: var(--text-3xl);
font-weight: 800;
color: var(--gray-800);
letter-spacing: -0.02em;
}
.range-tag {
display: inline-block;
background: var(--blue-light);
color: var(--blue);
font-size: var(--text-sm);
font-weight: 700;
padding: var(--space-1) var(--space-2);
border-radius: var(--radius-sm);
width: fit-content;
}
.range-desc {
font-size: var(--text-md);
color: var(--gray-600);
line-height: 1.65;
}
/* ── CTA SECTION ── */
.about-cta {
background: linear-gradient(135deg, #0e4da4 0%, #1a6fd4 60%, #17a2b8 100%);
padding: var(--space-14) var(--space-6);
text-align: center;
position: relative;
overflow: hidden;
}
.about-cta::before {
content: "";
position: absolute;
width: 28rem;
height: 28rem;
border-radius: 50%;
background: rgba(255, 255, 255, 0.06);
top: -10rem;
left: -6rem;
}
.about-cta::after {
content: "";
position: absolute;
width: 20rem;
height: 20rem;
border-radius: 50%;
background: rgba(255, 255, 255, 0.05);
bottom: -8rem;
right: -4rem;
}
.about-cta-inner {
max-width: 44rem;
margin: 0 auto;
position: relative;
z-index: 1;
}
.about-cta h2 {
font-size: var(--text-deal);
font-weight: 900;
color: white;
letter-spacing: -0.03em;
margin-bottom: var(--space-4);
line-height: 1.2;
}
.about-cta h2 em {
font-style: normal;
color: var(--yellow);
}
.about-cta p {
font-size: var(--text-xl);
color: rgba(255, 255, 255, 0.82);
line-height: 1.7;
margin-bottom: var(--space-8);
}
.cta-buttons {
display: flex;
align-items: center;
justify-content: center;
gap: var(--space-4);
flex-wrap: wrap;
}
.btn-cta-primary {
display: inline-flex;
align-items: center;
gap: var(--space-2);
background: white;
color: var(--blue);
border: none;
border-radius: var(--radius-md);
padding: var(--space-3) var(--space-7, 1.75rem);
font-size: var(--text-lg);
font-weight: 800;
cursor: pointer;
font-family: inherit;
text-decoration: none;
transition: all 0.2s;
}
.btn-cta-primary:hover {
background: var(--blue-light);
transform: translateY(-0.0625rem);
}
.btn-cta-outline {
display: inline-flex;
align-items: center;
gap: var(--space-2);
background: transparent;
color: white;
border: 0.125rem solid rgba(255, 255, 255, 0.5);
border-radius: var(--radius-md);
padding: var(--space-3) var(--space-7, 1.75rem);
font-size: var(--text-lg);
font-weight: 700;
cursor: pointer;
font-family: inherit;
text-decoration: none;
transition: all 0.2s;
}
.btn-cta-outline:hover {
border-color: white;
background: rgba(255, 255, 255, 0.1);
}
/* ── RESPONSIVE ── */
@media (max-width: 56.25rem) {
.about-hero-inner {
grid-template-columns: 1fr;
}
.about-hero h1 {
font-size: 2rem;
}
.stats-inner {
grid-template-columns: repeat(2, 1fr);
}
.vm-grid {
grid-template-columns: 1fr;
}
.pillars-grid {
grid-template-columns: 1fr;
}
.philosophy-inner {
grid-template-columns: 1fr;
}
.range-grid {
grid-template-columns: 1fr;
}
.about-cta h2 {
font-size: var(--text-6xl);
}
}
@media (max-width: 40rem) {
.stats-inner {
grid-template-columns: 1fr 1fr;
}
.nav-links,
.search-box {
display: none;
}
.topbar-right {
display: none;
}
.about-hero {
padding: var(--space-10) var(--space-4);
}
}
+595
View File
@@ -0,0 +1,595 @@
/* ── PAGE BASE ── */
body {
background: #f8fafc;
}
/* ── PAGE BACKGROUND ── */
.cart-page {
max-width: 100rem;
margin: 0 auto;
padding: var(--space-6);
}
/* ── PAGE TITLE ── */
.cart-page-title {
margin: 0 auto var(--space-6);
display: flex;
align-items: center;
gap: var(--space-3);
}
.cart-page-title h1 {
font-size: var(--text-deal, 2.125rem);
font-weight: 900;
color: var(--gray-800);
letter-spacing: -0.04em;
}
.cart-page-title .item-count {
background: var(--blue);
color: white;
font-size: var(--text-md);
font-weight: 700;
padding: var(--space-1) var(--space-3);
border-radius: var(--radius-full);
}
/* ── CART LAYOUT ── */
.cart-layout {
margin: 0 auto;
display: grid;
grid-template-columns: 3fr 1fr;
gap: var(--space-4);
align-items: start;
}
/* ── CART ITEMS PANEL ── */
.cart-items-panel {
display: flex;
flex-direction: column;
gap: var(--space-3);
}
/* Column headers */
.cart-col-headers {
display: grid;
grid-template-columns: 2fr 1fr 1fr 1fr auto;
gap: var(--space-4);
padding: 0 var(--space-5);
font-size: var(--text-sm);
font-weight: 700;
color: var(--gray-400);
text-transform: uppercase;
letter-spacing: 0.06em;
}
/* Single cart item card */
.cart-item {
margin-bottom: 1rem;
background: white;
border: 0.0625rem solid var(--gray-200);
border-radius: var(--radius-xl);
padding: var(--space-5);
display: grid;
grid-template-columns: 2fr 1fr 1fr 1fr auto;
gap: var(--space-4);
align-items: center;
transition: box-shadow 0.2s, border-color 0.2s;
}
.cart-item:hover {
border-color: var(--gray-300);
box-shadow: 0 0.25rem 1rem rgba(0, 0, 0, 0.06);
}
/* Product info cell */
.cart-item-info {
display: flex;
align-items: center;
gap: var(--space-4);
}
.cart-item-img {
width: 4.5rem;
height: 4.5rem;
border-radius: var(--radius-lg);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
overflow: hidden;
background: var(--gray-50);
}
/* when a real image is present */
.cart-item-img.has-image img {
width: 100%;
height: 100%;
object-fit: fill;
}
/* fallback emoji when no image */
.cart-item-img.no-image {
background: linear-gradient(135deg, #f5ece6, #e8d4c8);
font-size: 2rem;
}
.img-cream {
background: linear-gradient(135deg, #f9efe7, #eed9c4);
}
.img-fair {
background: linear-gradient(135deg, #f5ece6, #e8d4c8);
}
.img-oil {
background: linear-gradient(135deg, #e4edf8, #c8d8f0);
}
.img-wash {
background: linear-gradient(135deg, #e8f2e8, #c8dcc8);
}
.cart-item-name {
font-size: var(--text-md);
font-weight: 700;
color: var(--gray-800);
line-height: 1.4;
margin-bottom: var(--space-1);
}
.cart-item-sku {
font-size: var(--text-sm);
color: var(--gray-400);
}
/* Price cell */
.cart-item-price {
font-size: var(--text-xl);
font-weight: 700;
color: var(--gray-700);
}
/* Quantity cell */
.qty-control {
display: flex;
align-items: center;
gap: var(--space-2);
border: 0.0625rem solid var(--gray-200);
border-radius: var(--radius-md);
padding: var(--space-1) var(--space-2);
width: fit-content;
background: var(--gray-50);
}
.qty-btn {
background: none;
border: none;
cursor: pointer;
width: 1.5rem;
height: 1.5rem;
border-radius: var(--radius-sm);
display: flex;
align-items: center;
justify-content: center;
font-size: var(--text-lg);
font-weight: 700;
color: var(--gray-600);
transition: background 0.15s, color 0.15s;
line-height: 1;
}
.qty-btn:hover {
background: var(--blue-light);
color: var(--blue);
}
.qty-num {
font-size: var(--text-md);
font-weight: 700;
color: var(--gray-800);
min-width: 1.5rem;
text-align: center;
}
/* Subtotal cell */
.cart-item-subtotal {
font-size: var(--text-xl);
font-weight: 800;
color: var(--red);
}
/* Remove button */
.remove-btn {
background: none;
border: none;
cursor: pointer;
width: 2rem;
height: 2rem;
border-radius: var(--radius-md);
display: flex;
align-items: center;
justify-content: center;
color: var(--gray-400);
transition: background 0.2s, color 0.2s;
flex-shrink: 0;
}
.remove-btn:hover {
background: #fef2f2;
color: var(--red);
}
/* Empty cart state */
.empty-cart {
background: white;
border: 0.0625rem solid var(--gray-200);
border-radius: var(--radius-xl);
padding: var(--space-14) var(--space-10);
text-align: center;
display: none;
}
.empty-cart.visible {
display: block;
}
.empty-icon {
font-size: 4rem;
margin-bottom: var(--space-4);
opacity: 0.35;
}
.empty-cart h3 {
font-size: var(--text-4xl);
font-weight: 800;
color: var(--gray-800);
margin-bottom: var(--space-2);
}
.empty-cart p {
font-size: var(--text-md);
color: var(--gray-400);
margin-bottom: var(--space-6);
}
/* ── CART SUMMARY PANEL ── */
.cart-summary {
position: sticky;
top: calc(4.125rem + var(--space-4));
display: flex;
flex-direction: column;
gap: var(--space-4);
}
.summary-card {
background: white;
border: 0.0625rem solid var(--gray-200);
border-radius: var(--radius-xl);
overflow: hidden;
}
.summary-header {
padding: var(--space-5) var(--space-6);
border-bottom: 0.0625rem solid var(--gray-100);
}
.summary-header h2 {
font-size: var(--text-3xl);
font-weight: 800;
color: var(--gray-800);
}
.summary-body {
padding: var(--space-5) var(--space-6);
display: flex;
flex-direction: column;
gap: var(--space-4);
}
.summary-row {
display: flex;
align-items: center;
justify-content: space-between;
font-size: var(--text-md);
color: var(--gray-600);
}
.summary-row .label {
font-weight: 500;
}
.summary-row .value {
font-weight: 600;
color: var(--gray-800);
}
.summary-row .value.free {
color: var(--teal);
font-weight: 700;
}
.summary-divider {
border: none;
border-top: 0.0625rem solid var(--gray-100);
}
.summary-total-row {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--space-5) var(--space-6);
border-top: 0.0625rem solid var(--gray-200);
background: var(--gray-50);
}
.summary-total-row .total-label {
font-size: var(--text-lg);
font-weight: 800;
color: var(--gray-800);
}
.summary-total-row .total-value {
font-size: var(--text-deal-price, 1.625rem);
font-weight: 900;
color: var(--red);
}
/* Coupon input */
.coupon-card {
background: white;
border: 0.0625rem solid var(--gray-200);
border-radius: var(--radius-xl);
padding: var(--space-5) var(--space-6);
}
.coupon-card h3 {
font-size: var(--text-md);
font-weight: 700;
color: var(--gray-800);
margin-bottom: var(--space-3);
display: flex;
align-items: center;
gap: var(--space-2);
}
.coupon-field {
display: flex;
gap: var(--space-2);
}
.coupon-field input {
flex: 1;
border: 0.0625rem solid var(--gray-200);
border-radius: var(--radius-md);
padding: var(--space-2) var(--space-3);
font-size: var(--text-md);
font-family: inherit;
color: var(--gray-800);
outline: none;
transition: border-color 0.2s;
}
.coupon-field input::placeholder {
color: var(--gray-400);
}
.coupon-field input:focus {
border-color: var(--blue);
}
.coupon-field button {
background: var(--blue-light);
color: var(--blue);
border: none;
border-radius: var(--radius-md);
padding: var(--space-2) var(--space-4);
font-size: var(--text-md);
font-weight: 700;
cursor: pointer;
font-family: inherit;
transition: background 0.2s, color 0.2s;
white-space: nowrap;
}
.coupon-field button:hover {
background: var(--blue);
color: white;
}
/* CTA buttons */
.btn-checkout {
display: flex;
align-items: center;
justify-content: center;
gap: var(--space-2);
background: var(--blue);
color: white;
border: none;
border-radius: var(--radius-md);
padding: var(--space-4) var(--space-6);
font-size: var(--text-xl);
font-weight: 700;
cursor: pointer;
font-family: inherit;
width: 100%;
transition: background 0.2s, transform 0.15s;
}
.btn-checkout:hover {
background: var(--blue-dark);
transform: translateY(-0.0625rem);
}
.btn-checkout::after {
content: "→";
}
.btn-continue {
display: flex;
align-items: center;
justify-content: center;
gap: var(--space-2);
background: white;
color: var(--blue);
border: 0.09375rem solid var(--blue);
border-radius: var(--radius-md);
padding: var(--space-3) var(--space-6);
font-size: var(--text-md);
font-weight: 600;
cursor: pointer;
font-family: inherit;
width: 100%;
transition: background 0.2s, color 0.2s;
text-decoration: none;
}
.btn-continue:hover {
background: var(--blue-light);
}
.btn-continue::before {
content: "←";
}
.btn-clear {
display: flex;
align-items: center;
justify-content: center;
gap: var(--space-2);
background: none;
color: var(--gray-400);
border: none;
font-size: var(--text-md);
font-weight: 500;
cursor: pointer;
font-family: inherit;
width: 100%;
padding: var(--space-2);
border-radius: var(--radius-md);
transition: color 0.2s, background 0.2s;
}
.btn-clear:hover {
color: var(--red);
background: #fef2f2;
}
/* Trust badges */
.trust-badges {
display: flex;
flex-direction: column;
gap: var(--space-3);
padding: var(--space-5) var(--space-6);
border-top: 0.0625rem solid var(--gray-100);
}
.trust-item {
display: flex;
align-items: center;
gap: var(--space-3);
font-size: var(--text-md);
color: var(--gray-600);
}
.trust-item .ti-icon {
width: 2rem;
height: 2rem;
border-radius: var(--radius-md);
background: var(--blue-light);
display: flex;
align-items: center;
justify-content: center;
font-size: var(--text-xl);
flex-shrink: 0;
}
.trust-item .ti-text strong {
display: block;
font-weight: 700;
color: var(--gray-800);
font-size: var(--text-md);
}
.trust-item .ti-text span {
font-size: var(--text-sm);
color: var(--gray-400);
}
@media (max-width: 56.25rem) {
.cart-layout {
grid-template-columns: 1fr !important;
}
.cart-summary {
position: static;
width: 100%;
}
.cart-col-headers {
display: none;
}
.cart-item {
grid-template-columns: 1fr;
gap: var(--space-4);
padding: var(--space-4);
}
/* Keep price visible */
.cart-item-price {
font-size: var(--text-md);
font-weight: 600;
color: var(--gray-600);
}
/* Show subtotal but move below */
.cart-item-subtotal {
font-size: var(--text-lg);
font-weight: 800;
color: var(--red);
}
/* Stack quantity & remove nicely */
.qty-control {
margin-top: var(--space-2);
}
.remove-btn {
align-self: flex-end;
}
}
@media (max-width: 30rem) {
/* 480px */
.cart-page {
padding: var(--space-6) var(--space-4);
}
.cart-page-title {
flex-direction: column;
align-items: flex-start;
gap: var(--space-2);
}
.cart-item-info {
flex-direction: column;
align-items: flex-start;
gap: var(--space-2);
}
.cart-item-img {
width: 4rem;
height: 4rem;
}
.qty-control {
transform: scale(0.95);
}
.summary-header h2 {
font-size: var(--text-xl);
}
.summary-total-row .total-value {
font-size: var(--text-xl);
}
}
+165
View File
@@ -0,0 +1,165 @@
/* ── PAGE BASE ── */
body {
background: #f8fafc;
}
.checkout-page {
max-width: 100rem;
margin: 0 auto;
padding: var(--space-6);
}
/* ── PAGE TITLE ── */
.checkout-page-title {
margin: 0 auto var(--space-6);
display: flex;
align-items: center;
gap: var(--space-3);
}
.checkout-page-title h1 {
font-size: var(--text-deal, 2.125rem);
font-weight: 900;
color: var(--gray-800);
letter-spacing: -0.04em;
}
.checkout-layout {
margin: 0 auto;
display: grid;
grid-template-columns: 3fr 1fr;
gap: var(--space-4);
align-items: start;
}
.checkout-form-card,
.checkout-summary-card {
background: white;
border: 0.0625rem solid var(--gray-200);
border-radius: var(--radius-xl);
padding: var(--space-6);
}
.checkout-title {
font-size: var(--text-3xl);
font-weight: 800;
margin-bottom: var(--space-4);
color: var(--gray-800);
}
.checkout-form {
display: flex;
flex-direction: column;
gap: var(--space-3);
}
.checkout-form input {
border: 0.0625rem solid var(--gray-200);
border-radius: var(--radius-md);
padding: var(--space-3);
font-size: var(--text-md);
font-family: inherit;
outline: none;
transition: border-color 0.2s;
}
.checkout-form input:focus {
border-color: var(--blue);
}
.form-group {
display: flex;
flex-direction: column;
gap: var(--space-1);
flex: 1;
}
.form-group label {
font-size: var(--text-sm);
font-weight: 600;
color: var(--gray-700);
}
.form-group label span {
color: var(--red);
font-weight: 700;
}
.form-group input {
border: 0.0625rem solid var(--gray-200);
border-radius: var(--radius-md);
padding: var(--space-3);
font-size: var(--text-md);
font-family: inherit;
outline: none;
transition: border-color 0.2s, box-shadow 0.2s;
}
.form-group input:focus {
border-color: var(--blue);
box-shadow: 0 0 0 0.125rem rgba(26, 111, 212, 0.15);
}
.form-row {
display: flex;
gap: var(--space-4);
}
@media (max-width: 56.25rem) {
.form-row {
flex-direction: column;
}
}
.checkout-continue {
margin-top: var(--space-4);
}
.checkout-summary {
margin-top: var(--space-4);
display: flex;
flex-direction: column;
gap: var(--space-3);
}
.summary-row {
display: flex;
justify-content: space-between;
font-size: var(--text-md);
}
.total-row {
font-size: var(--text-xl);
font-weight: 800;
color: var(--red);
}
.qr-section {
margin-top: var(--space-6);
text-align: center;
}
.qr-wrapper {
margin-top: var(--space-3);
border-radius: var(--radius-lg);
overflow: hidden;
transition: filter 0.3s ease;
}
.qr-wrapper img {
width: 100%;
height: auto;
display: block;
}
.qr-wrapper.blurred {
filter: blur(12px);
pointer-events: none;
}
/* Responsive */
@media (max-width: 56.25rem) {
.checkout-layout {
grid-template-columns: 1fr;
}
}
+123
View File
@@ -0,0 +1,123 @@
.product-card {
background: white;
border: 0.0625rem solid var(--gray-200);
border-radius: var(--radius-xl);
overflow: hidden;
cursor: pointer;
transition: all 0.25s;
position: relative;
}
.product-card-link {
position: absolute;
inset: 0;
z-index: 1;
}
.product-card:hover {
border-color: var(--blue);
box-shadow: 0 0.5rem 1.5rem rgba(26, 111, 212, 0.12);
transform: translateY(-0.25rem);
}
.product-img {
height: 18rem;
background: var(--gray-50); /* neutral fallback while image loads */
display: flex;
align-items: center;
justify-content: center;
position: relative;
overflow: hidden;
}
.product-img img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.35s ease;
}
.product-card:hover .product-img img {
transform: scale(1.05); /* subtle zoom on hover */
}
.product-disc {
position: absolute;
top: var(--space-3);
left: var(--space-3);
background: var(--red);
color: white;
font-size: var(--text-xs);
font-weight: 800;
padding: var(--space-1) var(--space-2);
border-radius: var(--radius-sm);
z-index: 3;
pointer-events: none;
}
.product-body {
padding: var(--space-4);
}
.product-name {
font-size: var(--text-md);
font-weight: 700;
color: var(--gray-800);
margin-bottom: var(--space-2);
line-height: 1.4;
}
.product-rating {
font-size: var(--text-sm);
color: #f4b400;
margin-bottom: var(--space-2);
}
.product-price {
display: flex;
align-items: baseline;
gap: var(--space-2);
margin-bottom: var(--space-3);
}
.product-price .rp-now {
font-size: var(--text-xl);
font-weight: 800;
color: var(--blue);
}
.product-price .rp-old {
font-size: var(--text-md);
color: var(--gray-400);
text-decoration: line-through;
}
.product-add-btn {
display: flex;
align-items: center;
justify-content: center;
place-self: end;
gap: var(--space-2);
width: 100%;
background: var(--blue-light);
color: var(--blue);
border: none;
border-radius: var(--radius-md);
padding: var(--space-3);
font-size: var(--text-md);
font-weight: 700;
cursor: pointer;
font-family: inherit;
transition: all 0.25s ease;
position: relative;
overflow: hidden;
position: relative;
z-index: 2;
}
.product-add-btn svg {
width: 18px;
height: 18px;
}
.product-add-btn:hover {
background: var(--blue);
color: white;
}
File diff suppressed because it is too large Load Diff
File diff suppressed because it is too large Load Diff
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.

After

Width:  |  Height:  |  Size: 21 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 22 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 25 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 19 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 25 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 44 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 40 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 35 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 23 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 22 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 123 KiB

+110
View File
@@ -0,0 +1,110 @@
const Cart = (function () {
const STORAGE_KEY = "cart";
const TAX_RATE = 0.05;
let couponDiscount = 0;
// ─────────────────────────────
// Internal
// ─────────────────────────────
function getCart() {
return JSON.parse(localStorage.getItem(STORAGE_KEY)) || [];
}
function saveCart(cart) {
localStorage.setItem(STORAGE_KEY, JSON.stringify(cart));
window.dispatchEvent(new Event("cartUpdated"));
}
function findItem(cart, id) {
return cart.find((item) => item.id === id);
}
// ─────────────────────────────
// Public API
// ─────────────────────────────
function addItem(product, quantity = 1) {
const cart = getCart();
const existing = findItem(cart, product.id);
if (existing) {
existing.quantity += quantity;
} else {
cart.push({
id: product.id,
name: product.basic.name,
price: product.pricing.price,
image: product.media.mainImage,
quantity,
});
}
saveCart(cart);
}
function removeItem(id) {
const cart = getCart().filter((item) => item.id !== id);
saveCart(cart);
}
function updateQuantity(id, quantity) {
const cart = getCart();
const item = findItem(cart, id);
if (!item) return;
item.quantity = Math.max(1, quantity);
saveCart(cart);
}
function clear() {
localStorage.removeItem(STORAGE_KEY);
window.dispatchEvent(new Event("cartUpdated"));
}
function applyCoupon(code) {
if (code === "MEDI10") {
couponDiscount = 0.1;
window.dispatchEvent(new Event("cartUpdated"));
return true;
}
couponDiscount = 0;
window.dispatchEvent(new Event("cartUpdated"));
return false;
}
function getTotals() {
const cart = getCart();
const subtotal = cart.reduce(
(sum, item) => sum + item.price * item.quantity,
0
);
const tax = subtotal * TAX_RATE;
const discount = subtotal * couponDiscount;
const total = subtotal - discount;
return {
subtotal,
tax,
discount,
total,
};
}
function getTotalCount() {
return getCart().reduce((sum, item) => sum + item.quantity, 0);
}
return {
getCart,
addItem,
removeItem,
updateQuantity,
clear,
applyCoupon,
getTotals,
getTotalCount,
};
})();
+43
View File
@@ -0,0 +1,43 @@
document.addEventListener("DOMContentLoaded", () => {
const cartItemsContainer = document.getElementById("checkout-items");
const subtotalEl = document.getElementById("checkout-subtotal");
const totalEl = document.getElementById("checkout-total");
const qrWrapper = document.getElementById("qr-wrapper");
const form = document.getElementById("checkout-form");
const cart = Cart.getCart();
if (cart.length === 0) {
cartItemsContainer.innerHTML = "<p>Your cart is empty.</p>";
return;
}
let subtotal = 0;
cart.forEach((item) => {
subtotal += item.price * item.quantity;
const row = document.createElement("div");
row.className = "summary-row";
row.innerHTML = `
<span>${item.name} × ${item.quantity}</span>
<span>₹${(item.price * item.quantity).toFixed(2)}</span>
`;
cartItemsContainer.appendChild(row);
});
const total = subtotal;
subtotalEl.textContent = `₹${subtotal.toFixed(2)}`;
totalEl.textContent = `₹${total.toFixed(2)}`;
// Unlock QR on valid form submit
form.addEventListener("submit", (e) => {
e.preventDefault();
if (!form.checkValidity()) return;
qrWrapper.classList.remove("blurred");
});
});
+49
View File
@@ -0,0 +1,49 @@
async function loadComponent(id, file) {
const el = document.getElementById(id);
if (!el) return;
const res = await fetch(file);
const html = await res.text();
el.innerHTML = html;
}
async function initComponents() {
console.log("init");
await Promise.all([
loadComponent("topbar-placeholder", "components/topbar.html"),
loadComponent("navbar-placeholder", "components/navbar.html"),
loadComponent("footer-placeholder", "components/footer.html"),
loadComponent("toast-placeholder", "components/toast.html"),
]);
// ✅ DOM is fully ready now — safe to run these
setActiveNavLink();
updateCartCount();
// ✅ Tell cart.js it can now render
document.dispatchEvent(new Event("components:ready"));
const menuToggle = document.getElementById("menu-toggle");
const mobileMenu = document.getElementById("mobile-menu");
if (!menuToggle || !mobileMenu) return;
menuToggle.addEventListener("click", () => {
mobileMenu.classList.toggle("active");
});
}
function setActiveNavLink() {
const page = window.location.pathname.split("/").pop() || "index.html";
document.querySelectorAll(".nav-links a").forEach((a) => {
a.parentElement.classList.toggle("active", a.getAttribute("href") === page);
});
}
function updateCartCount() {
const cart = JSON.parse(localStorage.getItem("cart")) || [];
const total = cart.reduce((s, i) => s + i.quantity, 0);
const el = document.getElementById("nav-cart-count");
if (el) el.textContent = total;
}
initComponents();
+300
View File
@@ -0,0 +1,300 @@
function renderRelatedProducts(product) {
const container = document.querySelector(".related-grid");
if (!container || !product.relatedProductIds) return;
const relatedProducts = product.relatedProductIds
.map((id) => PRODUCTS.find((p) => p.id === id))
.filter(Boolean);
container.innerHTML = relatedProducts
.map(
(p) => `
<div class="product-card">
<div class="product-img">
${
p.pricing.discountPercent
? `<div class="product-disc">-${p.pricing.discountPercent}%</div>`
: ""
}
<img
src="${p.media.mainImage}"
alt="${p.basic.name}"
width="200"
height="200"
loading="lazy"
decoding="async"
draggable="false" />
</div>
<div class="product-body">
<div class="product-name">${p.basic.name}</div>
<div class="product-rating">★★★★★</div>
<div class="product-price">
<span class="rp-now">₹${p.pricing.price}</span>
${
p.pricing.originalPrice
? `<span class="rp-old">₹${p.pricing.originalPrice}</span>`
: ""
}
</div>
<a href="product.html?id=${
p.id
}" target="_blank" class="product-add-btn">
View Product
</a>
</div>
</div>
`
)
.join("");
}
function renderProduct(productId) {
const product = PRODUCTS.find((p) => p.id === productId);
if (!product) {
console.error("Product not found:", productId);
return;
}
// =========================
// BASIC INFO
// =========================
const { basic, pricing, media, rating } = product;
// Title
document.title = product.seo?.title || basic.name;
document.querySelector(".product-title").textContent = basic.name;
// Breadcrumb
const breadcrumbCurrent = document.querySelector(".breadcrumb-bar .current");
if (breadcrumbCurrent)
breadcrumbCurrent.textContent = basic.shortName || basic.name;
// Image
const mainImg = document.querySelector(".gallery-main img");
if (mainImg && media?.mainImage) {
mainImg.src = media.mainImage;
mainImg.alt = basic.name;
}
// =========================
// PRICING
// =========================
document.querySelector(".price-current").textContent = `₹${pricing.price}`;
document.querySelector(".price-original").textContent = pricing.originalPrice
? `₹${pricing.originalPrice}`
: "";
document.querySelector(".price-badge").textContent = pricing.discountPercent
? `-${pricing.discountPercent}%`
: "";
// Stock
const stockStatus = document.querySelector(".stock-status");
if (stockStatus) {
stockStatus.innerHTML = `
<span class="stock-dot"></span>
${pricing.stockStatus} — Ships within ${pricing.shipsWithin}
`;
}
// =========================
// RATING
// =========================
if (rating) {
document.querySelector(".rating-count").textContent =
rating.average.toFixed(1);
document.querySelector(
".review-link"
).textContent = `${rating.totalReviews} Reviews`;
const soldText = document.querySelector(".rating-row span[style]");
if (soldText) soldText.textContent = `${rating.sold} sold`;
// Reviews tab count
const reviewTabBtn = document.querySelectorAll(".tab-nav-btn")[2];
if (reviewTabBtn)
reviewTabBtn.textContent = `Reviews (${rating.totalReviews})`;
// Big rating
const scoreEl = document.querySelector(".rating-big .score");
if (scoreEl) scoreEl.textContent = rating.average.toFixed(1);
const totalEl = document.querySelector(".rating-big .total");
if (totalEl)
totalEl.textContent = `Based on ${rating.totalReviews} reviews`;
// Rating bars
const bars = document.querySelectorAll(".rating-bar-row");
bars.forEach((bar) => {
const label = bar.querySelector(".bar-label").textContent.trim()[0];
const count = rating.breakdown[label] || 0;
const percent = rating.totalReviews
? (count / rating.totalReviews) * 100
: 0;
bar.querySelector(".bar-fill").style.width = `${percent}%`;
bar.querySelector(".bar-count").textContent = count;
});
}
// =========================
// SUMMARY
// =========================
document.querySelector(".product-short-desc").textContent =
product.summary.shortDescription;
// Benefit pills
const pillsContainer = document.querySelector(".benefit-pills");
if (pillsContainer) {
pillsContainer.innerHTML = product.summary.benefitPills
.map((p) => `<span class="benefit-pill">${p.icon} ${p.text}</span>`)
.join("");
}
// Meta
document.querySelector(".meta-row span:last-child").textContent = basic.sku;
document
.querySelectorAll(".meta-row")[1]
.querySelector("span:last-child").textContent = basic.weight;
document
.querySelectorAll(".meta-row")[2]
.querySelector("span:last-child").textContent = `₹${pricing.price}`;
// Categories
const categoryContainer = document
.querySelectorAll(".meta-row")[3]
.querySelector("div");
categoryContainer.innerHTML = basic.category
.map((c) => `<span class="meta-tag">${c}</span>`)
.join("");
// Tags
const tagContainer = document
.querySelectorAll(".meta-row")[4]
.querySelector("div");
tagContainer.innerHTML = basic.tags
.map((t) => `<span class="meta-tag">${t}</span>`)
.join("");
// Ideal for
document
.querySelectorAll(".meta-row")[5]
.querySelector("span:last-child").textContent = basic.idealFor;
// =========================
// DESCRIPTION TAB
// =========================
const descTab = product.descriptionTab;
document.querySelector(".desc-lead").textContent = descTab.lead;
const descBody = document.querySelector(".desc-body");
descBody.innerHTML = descTab.paragraphs.map((p) => `<p>${p}</p>`).join("");
// Features
const featuresContainer = document.querySelector(".desc-features");
featuresContainer.innerHTML = descTab.features
.map(
(f) => `
<div class="desc-feature">
<div class="feat-icon">${f.icon}</div>
<div class="feat-text">
<strong>${f.title}</strong>
<span>${f.text}</span>
</div>
</div>
`
)
.join("");
// How To Use
const howSteps = document.querySelector(".how-steps");
howSteps.innerHTML = descTab.howToUse
.map(
(step, i) => `
<div class="how-step">
<div class="step-num">${i + 1}</div>
${step}
</div>
`
)
.join("");
// =========================
// INGREDIENTS TAB
// =========================
const ingTab = product.ingredientsTab;
document
.querySelectorAll(".tab-pane")[1]
.querySelector(".desc-lead").textContent = ingTab.lead;
const ingGrid = document.querySelector(".ingredients-grid");
ingGrid.innerHTML = ingTab.ingredients
.map(
(i) => `
<div class="ingredient-card">
<div class="ing-icon">${i.icon}</div>
<div class="ing-name">${i.name}</div>
<div class="ing-role">${i.role}</div>
</div>
`
)
.join("");
document.querySelector(
".full-ingredients"
).innerHTML = `<strong>Full Ingredient List:</strong> ${ingTab.fullIngredients}`;
// =========================
// REVIEWS TAB
// =========================
const reviewList = document.querySelector(".review-list");
reviewList.innerHTML = product.reviews
.map(
(r) => `
<div class="review-card">
<div class="review-header">
<div class="reviewer-info">
<div class="reviewer-avatar">${r.avatarLetter}</div>
<div>
<div class="reviewer-name">${r.name}</div>
<div class="reviewer-date">${r.date}</div>
</div>
</div>
<div class="review-stars">${"★".repeat(r.rating)}${"☆".repeat(
5 - r.rating
)}</div>
</div>
<div class="review-title">${r.title}</div>
<div class="review-text">${r.text}</div>
${
r.verified
? `<div class="verified-badge">✓ Verified Purchase</div>`
: ""
}
</div>
`
)
.join("");
// =========================
// SHIPPING TAB
// =========================
const shippingTab = product.shipping;
const shippingLead = document
.querySelectorAll(".tab-pane")[3]
.querySelector(".desc-lead");
shippingLead.textContent = shippingTab.lead;
const shippingBody = document
.querySelectorAll(".tab-pane")[3]
.querySelector(".desc-body");
shippingBody.innerHTML = shippingTab.policies
.map((p) => `<p><strong>${p.title}:</strong> ${p.text}</p>`)
.join("");
renderRelatedProducts(product);
}
File diff suppressed because it is too large Load Diff
+294
View File
@@ -0,0 +1,294 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>My Cart – MediGlobe Healthcare</title>
<link rel="stylesheet" href="assets/css/styles.css" />
<link rel="stylesheet" href="assets/css/cart.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="cart.html" class="current">My Cart</a>
</div>
</div>
<!-- CART PAGE -->
<div class="cart-page">
<!-- Page title -->
<div class="cart-page-title">
<h1>My Cart</h1>
<span class="item-count" id="title-count">0 items</span>
</div>
<!-- Main layout -->
<div class="cart-layout">
<!-- LEFT: Cart Items -->
<div class="cart-items-panel">
<!-- Column headers -->
<div class="cart-col-headers">
<span>Product</span>
<span>Price</span>
<span>Quantity</span>
<span>Subtotal</span>
<span></span>
</div>
<!-- Items injected by JS -->
<div id="cart-items"></div>
<!-- Empty state -->
<div class="empty-cart" id="empty-cart">
<div class="empty-icon">🛒</div>
<h3>Your cart is empty</h3>
<p>Looks like you haven't added anything yet.</p>
<a
href="index.html"
class="btn-primary"
style="display: inline-flex; text-decoration: none">
Start Shopping
</a>
</div>
</div>
<!-- RIGHT: Summary -->
<div class="cart-summary">
<!-- Order summary card -->
<div class="summary-card">
<div class="summary-header">
<h2>Order Summary</h2>
</div>
<div class="summary-body">
<div class="summary-row">
<span class="label">Subtotal</span>
<span class="value" id="summary-subtotal">₹0.00</span>
</div>
<hr class="summary-divider" />
<div class="summary-row">
<span class="label">Shipping</span>
<span class="value free">Free</span>
</div>
<hr class="summary-divider" />
<div class="summary-row">
<span class="label">Discount</span>
<span
class="value"
id="summary-discount"
style="color: var(--teal)"
>—</span
>
</div>
</div>
<div class="summary-total-row">
<span class="total-label">Total</span>
<span class="total-value" id="summary-total">₹0.00</span>
</div>
<div
style="
padding: var(--space-5) var(--space-6);
display: flex;
flex-direction: column;
gap: var(--space-3);
">
<a href="checkout.html" class="btn-checkout" id="checkout-btn">
Proceed to Checkout
</a>
<a href="index.html" class="btn-continue">Continue Shopping</a>
<button class="btn-clear" onclick="clearCart()">
🗑 Clear entire cart
</button>
</div>
<!-- Trust badges -->
<div class="trust-badges">
<div class="trust-item">
<div class="ti-icon">🔒</div>
<div class="ti-text">
<strong>Secure Checkout</strong>
<span>SSL encrypted payment</span>
</div>
</div>
<div class="trust-item">
<div class="ti-icon">🚚</div>
<div class="ti-text">
<strong>Free Shipping</strong>
<span>On all orders over ₹50</span>
</div>
</div>
<div class="trust-item">
<div class="ti-icon">↩️</div>
<div class="ti-text">
<strong>Easy Returns</strong>
<span>30-day return policy</span>
</div>
</div>
</div>
</div>
<!-- Coupon card -->
<div class="coupon-card">
<h3>🏷️ Have a coupon?</h3>
<div class="coupon-field">
<input
type="text"
placeholder="Enter coupon code"
id="coupon-input" />
<button onclick="applyCoupon()">Apply</button>
</div>
</div>
</div>
</div>
</div>
<div id="footer-placeholder"></div>
<script src="assets/js/components.js"></script>
<script src="assets/js/cart.js"></script>
<script>
function applyCoupon() {
const code = document
.getElementById("coupon-input")
.value.trim()
.toUpperCase();
const valid = Cart.applyCoupon(code);
document.getElementById("coupon-input").style.borderColor = valid
? "var(--teal)"
: "var(--red)";
}
function updateQuantity(id, delta) {
const item = Cart.getCart().find((i) => i.id === id);
if (!item) return;
Cart.updateQuantity(id, item.quantity + delta);
}
function removeItem(id) {
Cart.removeItem(id);
}
function clearCart() {
Cart.clear();
}
function renderCart() {
const cart = Cart.getCart();
const container = document.getElementById("cart-items");
const emptyState = document.getElementById("empty-cart");
const navCount = document.getElementById("nav-cart-count");
const titleCount = document.getElementById("title-count");
container.innerHTML = "";
const totalQty = Cart.getTotalCount();
if (navCount) navCount.textContent = totalQty;
titleCount.textContent =
totalQty === 1 ? "1 item" : `${totalQty} items`;
if (cart.length === 0) {
emptyState.classList.add("visible");
updateSummary();
return;
}
emptyState.classList.remove("visible");
cart.forEach((item) => {
const subtotal = item.price * item.quantity;
const imgHTML = item.image
? `<img
src="${item.image}"
alt="${item.name}"
width="72"
height="72"
loading="lazy"
decoding="async"
draggable="false"
/>`
: `<span class="cart-item-emoji">🧴</span>`;
const el = document.createElement("div");
el.className = "cart-item";
el.innerHTML = `
<div class="cart-item-info">
<div class="cart-item-img ${item.image ? "has-image" : "no-image"}">
${imgHTML}
</div>
<div>
<div class="cart-item-name">${item.name}</div>
<div class="cart-item-sku">ID: ${item.id}</div>
</div>
</div>
<div class="cart-item-price">₹${Number(item.price).toFixed(2)}</div>
<div class="qty-control">
<button class="qty-btn" onclick="updateQuantity('${item.id}', -1)">−</button>
<span class="qty-num">${item.quantity}</span>
<button class="qty-btn" onclick="updateQuantity('${item.id}', +1)">+</button>
</div>
<div class="cart-item-subtotal">₹${subtotal.toFixed(2)}</div>
<button class="remove-btn" onclick="removeItem('${
item.id
}')" title="Remove item">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2">
<polyline points="3 6 5 6 21 6"/>
<path d="M19 6l-1 14a2 2 0 01-2 2H8a2 2 0 01-2-2L5 6"/>
<path d="M10 11v6M14 11v6"/>
<path d="M9 6V4a1 1 0 011-1h4a1 1 0 011 1v2"/>
</svg>
</button>
`;
container.appendChild(el);
});
updateSummary();
}
function updateSummary() {
const totals = Cart.getTotals();
document.getElementById(
"summary-subtotal"
).textContent = `₹${totals.subtotal.toFixed(2)}`;
document.getElementById("summary-discount").textContent =
totals.discount > 0 ? `-₹${totals.discount.toFixed(2)}` : "—";
document.getElementById(
"summary-total"
).textContent = `₹${totals.total.toFixed(2)}`;
}
window.addEventListener("cartUpdated", renderCart);
document.addEventListener("components:ready", renderCart);
if (document.readyState === "complete") {
renderCart();
}
</script>
</body>
</html>
+124
View File
@@ -0,0 +1,124 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Checkout – MediGlobe</title>
<link rel="stylesheet" href="assets/css/styles.css" />
<link rel="stylesheet" href="assets/css/components.css" />
<link rel="stylesheet" href="assets/css/checkout.css" />
</head>
<body>
<!-- <div id="topbar-placeholder"></div> -->
<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="checkout.html" class="current">Checkout</a>
</div>
</div>
<div class="checkout-page">
<div class="checkout-page-title">
<h1>Checkout</h1>
</div>
<div class="checkout-layout">
<!-- LEFT: Billing Form -->
<div class="checkout-form-card">
<h2 class="checkout-title">Billing Details</h2>
<form id="checkout-form" class="checkout-form">
<div class="form-row">
<div class="form-group">
<label for="firstName">First Name <span>*</span></label>
<input type="text" id="firstName" required />
</div>
<div class="form-group">
<label for="lastName">Last Name <span>*</span></label>
<input type="text" id="lastName" required />
</div>
</div>
<div class="form-group">
<label for="email">Email Address </label>
<input type="email" id="email" />
</div>
<div class="form-group">
<label for="phone">Phone <span>*</span></label>
<input type="tel" id="phone" required />
</div>
<div class="form-group">
<label for="address">Street Address <span>*</span></label>
<input type="text" id="address" required />
</div>
<div class="form-row">
<div class="form-group">
<label for="city">City <span>*</span></label>
<input type="text" id="city" required />
</div>
<div class="form-group">
<label for="state">State <span>*</span></label>
<input type="text" id="state" required />
</div>
</div>
<div class="form-group">
<label for="postal">Postal Code <span>*</span></label>
<input type="text" id="postal" required />
</div>
<button type="submit" class="btn-primary checkout-continue">
Continue to Payment
</button>
</form>
</div>
<!-- RIGHT: Order Summary -->
<div class="checkout-summary-card">
<h2 class="checkout-title">Your Order</h2>
<div id="checkout-items"></div>
<div class="checkout-summary">
<div class="summary-row">
<span>Subtotal</span>
<span id="checkout-subtotal">₹0.00</span>
</div>
<hr />
<div class="summary-row total-row">
<span>Total</span>
<span id="checkout-total">₹0.00</span>
</div>
</div>
<!-- QR Section -->
<div class="qr-section">
<div class="qr-wrapper blurred" id="qr-wrapper">
<img src="assets/images/qr-code.jpeg" alt="Payment QR Code" />
</div>
<p class="qr-note">Fill billing details to unlock payment QR.</p>
</div>
</div>
</div>
</div>
<div id="footer-placeholder"></div>
<script src="assets/js/components.js"></script>
<script src="assets/js/cart.js"></script>
<script src="assets/js/checkout.js"></script>
</body>
</html>
+75
View File
@@ -0,0 +1,75 @@
<footer>
<div class="footer-grid">
<div>
<a href="index.html" class="logo">
<img
src="../assets/images/logo.webp"
alt="MediGlobe Logo"
class="logo-image" />
<!-- <div class="logo-texts">
<span class="brand">MEDI<em>GLOBE</em></span
><span class="sub">Healthcare</span>
</div> -->
</a>
<p class="footer-brand-desc">Healing the World, Naturally.</p>
<div class="footer-socials">
<div class="soc-btn">f</div>
<div class="soc-btn">𝕏</div>
<div class="soc-btn">📸</div>
<div class="soc-btn">in</div>
</div>
</div>
<div class="footer-col">
<h4>About Company</h4>
<ul>
<li><a href="#">Shipping Options</a></li>
<li><a href="#">My Wishlist</a></li>
<li><a href="#">My Account</a></li>
<li><a href="#">Return Policy</a></li>
<li><a href="#">Product Categories</a></li>
</ul>
</div>
<div class="footer-col">
<h4>Categories</h4>
<ul>
<li><a href="#">Skincare</a></li>
<li><a href="#">Vitamins & Supplements</a></li>
<li><a href="#">Health & Medicine</a></li>
<li><a href="#">Pain Relief</a></li>
<li><a href="#">Medical Equipment</a></li>
</ul>
</div>
<div class="footer-col">
<h4>Contact Us</h4>
<div class="contact-row">
<span class="ic">📍</span>
<span
>DSPR MEDIGLOBE Healthcare LLP<br />F NO G-11 GR-FLR ANANT TIRTH CHSL
PARNAKA KALYAN-W EST Kalyan-Dombivli (M Corp.) Ta:KALYAN Di:THANE
421301</span
>
</div>
<div class="contact-row">
<span class="ic">📞</span><span>9422682020</span>
</div>
<div class="contact-row">
<span class="ic">✉️</span
><span>dsprmediglobehealthcarelllp@gmail.com</span>
</div>
</div>
</div>
<div class="footer-bottom">
<p>Copyright 2024 MediGlobe Healthcare. All rights reserved.</p>
<div class="footer-bottom-links">
<a href="#">Home</a>
<a href="#">About Us</a>
<a href="#">Our Products</a>
<a href="#">Categories</a>
</div>
</div>
</footer>
+77
View File
@@ -0,0 +1,77 @@
<nav>
<div class="nav-inner">
<a href="index.html" class="logo">
<img
src="../assets/images/logo.webp"
alt="MediGlobe Logo"
class="logo-image" />
</a>
<ul class="nav-links">
<li><a href="index.html">Home</a></li>
<li><a href="#">Shop</a></li>
<li><a href="#">Categories</a></li>
<li><a href="about.html">About Us</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
<div class="nav-right">
<!-- <div class="search-box">
<input type="text" placeholder="Search products..." />
<button>
<svg
width="15"
height="15"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2.5">
<circle cx="11" cy="11" r="8" />
<line x1="21" y1="21" x2="16.65" y2="16.65" />
</svg>
</button>
</div> -->
<button class="icon-btn" id="menu-toggle">
<svg
width="20"
height="20"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2">
<line x1="3" y1="6" x2="21" y2="6" />
<line x1="3" y1="12" x2="21" y2="12" />
<line x1="3" y1="18" x2="21" y2="18" />
</svg>
</button>
<button class="cart-btn" onclick="window.location.href='cart.html'">
<span class="cart-count" id="nav-cart-count">0</span>
<svg
width="15"
height="15"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2.2">
<path d="M6 2L3 6v14a2 2 0 002 2h14a2 2 0 002-2V6l-3-4z" />
<line x1="3" y1="6" x2="21" y2="6" />
<path d="M16 10a4 4 0 01-8 0" />
</svg>
My Cart
</button>
</div>
</div>
<!-- MOBILE OVERLAY MENU -->
<div class="mobile-menu-overlay" id="mobile-menu">
<div class="mobile-menu-header">
<span class="mobile-menu-title">Menu</span>
<!-- <button class="close-menu" id="menu-close">✕</button> -->
</div>
<ul class="mobile-nav-links">
<li><a href="index.html">Home</a></li>
<li><a href="#">Shop</a></li>
<li><a href="#">Categories</a></li>
<li><a href="about.html">About Us</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>
</nav>
+12
View File
@@ -0,0 +1,12 @@
<div class="topbar">
<div class="topbar-inner">
<div class="topbar-welcome">
<div class="topbar-phone-badge">📞 9422682020</div>
</div>
<div class="topbar-right">
<a href="#">👤 Sign In</a>
<a href="#">📝 Sign Up</a>
<a href="#">♡ Wishlist</a>
</div>
</div>
</div>
+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>
+319
View File
@@ -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>