Initial commit
@@ -0,0 +1,3 @@
|
|||||||
|
/node_modules
|
||||||
|
.netlify
|
||||||
|
.env
|
||||||
@@ -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 & 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 & 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 & <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 & 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 & 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 & 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>
|
||||||
@@ -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);
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -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);
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -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;
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -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;
|
||||||
|
}
|
||||||
|
After Width: | Height: | Size: 21 KiB |
|
After Width: | Height: | Size: 22 KiB |
|
After Width: | Height: | Size: 25 KiB |
|
After Width: | Height: | Size: 19 KiB |
|
After Width: | Height: | Size: 25 KiB |
|
After Width: | Height: | Size: 44 KiB |
|
After Width: | Height: | Size: 40 KiB |
|
After Width: | Height: | Size: 35 KiB |
|
After Width: | Height: | Size: 23 KiB |
|
After Width: | Height: | Size: 22 KiB |
|
After Width: | Height: | Size: 123 KiB |
@@ -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,
|
||||||
|
};
|
||||||
|
})();
|
||||||
@@ -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");
|
||||||
|
});
|
||||||
|
});
|
||||||
@@ -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();
|
||||||
@@ -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);
|
||||||
|
}
|
||||||
@@ -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>
|
||||||
@@ -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>
|
||||||
@@ -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>
|
||||||
@@ -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>
|
||||||
@@ -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>
|
||||||
@@ -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>
|
||||||
@@ -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>
|
||||||