BDutta18 · Asmi768 · Aug 15, 2025
diff --git a/public/BMI Calculator.html b/public/BMI Calculator.html
@@ -0,0 +1,70 @@
+<section id="bmi-calculator" class="bmi-section">
+  <div class="container">
+    <h2 class="section-title">BMI Calculator</h2>
+    <p class="section-subtitle">Know your Body Mass Index and get instant tips.</p>
+
+    <div class="bmi-grid">
+      <!-- FORM -->
+      <form id="bmiForm" class="bmi-card">
+        <h3>Enter your details</h3>
+
+        <div class="field">
+          <label for="height">Height (cm)</label>
+          <input type="number" id="height" min="80" max="250" placeholder="e.g., 170" required>
+        </div>
+
+        <div class="field">
+          <label for="weight">Weight (kg)</label>
+          <input type="number" id="weight" min="20" max="250" placeholder="e.g., 65" required>
+        </div>
+
+        <div class="field inline">
+          <div>
+            <label for="age">Age</label>
+            <input type="number" id="age" min="10" max="100" placeholder="e.g., 22">
+          </div>
+          <div>
+            <label for="gender">Gender</label>
+            <select id="gender">
+              <option value="">Prefer not to say</option>
+              <option>Female</option>
+              <option>Male</option>
+              <option>Other</option>
+            </select>
+          </div>
+        </div>
+
+        <button type="submit" class="btn-primary">
+          <i class="ri-calculator-line"></i> Calculate BMI
+        </button>
+
+        <p class="muted note">* This tool uses standard WHO BMI categories (adults).</p>
+      </form>
+
+      <!-- RESULT -->
+      <div class="bmi-result bmi-card" aria-live="polite">
+        <h3>Your Result</h3>
+
+        <div class="bmi-score-wrap">
+          <div class="bmi-score" id="bmiScore">--</div>
+          <div class="bmi-category" id="bmiCategory">Awaiting input…</div>
+        </div>
+
+        <div class="progress">
+          <span id="bmiBar" style="width:0%"></span>
+        </div>
+
+        <ul class="bmi-tips" id="bmiTips">
+          <li>Enter your height and weight, then press Calculate.</li>
+        </ul>
+
+        <div class="bmi-legend">
+          <span><i class="dot under"></i> Underweight &lt; 18.5</span>
+          <span><i class="dot normal"></i> Normal 18.5–24.9</span>
+          <span><i class="dot over"></i> Overweight 25–29.9</span>
+          <span><i class="dot obese"></i> Obese ≥ 30</span>
+        </div>
+      </div>
+    </div>
+  </div>
+</section>
diff --git a/public/index.html b/public/index.html
@@ -7,6 +7,7 @@
       href="https://cdn.jsdelivr.net/npm/remixicon@3.4.0/fonts/remixicon.css"
       rel="stylesheet"
     />
+    <link href="https://cdn.jsdelivr.net/npm/remixicon@3.5.0/fonts/remixicon.css" rel="stylesheet" />
     <link
       href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined"
       rel="stylesheet"
@@ -40,6 +41,10 @@
       <li class="link"><a href="#testimonials">About</a></li>
       <li class="link"><a href="#pricing">Pricing Plan</a></li>
       <li class="link"><a href="#join">Contact Us</a></li>
+     <a href="#bmi-calculator">BMI Calculator</a>
+    <button id="themeToggle" class="theme-toggle" aria-label="Toggle color theme">
+      <i class="ri-moon-line" id="themeIcon"></i>
+    </button>
     </ul>
 
     <!-- Profile Button -->

diff --git a/public/script.js b/public/script.js
@@ -569,3 +569,127 @@ enhancedStyle.textContent = `
   }
 `;
 document.head.appendChild(enhancedStyle);
+/* =========================
+   DARK MODE (persistent)
+========================= */
+(function themeInit(){
+  const KEY = "bc_theme";
+  const root = document.documentElement;
+  const saved = localStorage.getItem(KEY) || "light";
+  root.setAttribute("data-theme", saved);
+
+  const btn = document.getElementById("themeToggle");
+  const icon = document.getElementById("themeIcon");
+  if (icon) icon.className = saved === "dark" ? "ri-sun-line" : "ri-moon-line";
+
+  if (btn){
+    btn.addEventListener("click", () => {
+      const cur = root.getAttribute("data-theme") || "light";
+      const next = cur === "dark" ? "light" : "dark";
+      root.setAttribute("data-theme", next);
+      localStorage.setItem(KEY, next);
+      if (icon) icon.className = next === "dark" ? "ri-sun-line" : "ri-moon-line";
+    });
+  }
+})();
+
+/* =========================
+   RESPONSIVE NAV
+========================= */
+(function navInit(){
+  const toggle = document.getElementById("navToggle");
+  const nav = document.getElementById("mainNav");
+  if (!toggle || !nav) return;
+
+  toggle.addEventListener("click", () => {
+    const open = nav.classList.toggle("show");
+    toggle.setAttribute("aria-expanded", open ? "true" : "false");
+    toggle.innerHTML = open ? '<i class="ri-close-line"></i>' : '<i class="ri-menu-line"></i>';
+  });
+
+  // Close on link click (mobile)
+  nav.querySelectorAll("a").forEach(a => {
+    a.addEventListener("click", () => {
+      if (nav.classList.contains("show")) {
+        nav.classList.remove("show");
+        toggle.setAttribute("aria-expanded","false");
+        toggle.innerHTML = '<i class="ri-menu-line"></i>';
+      }
+    });
+  });
+})();
+
+/* =========================
+   BMI CALCULATOR
+========================= */
+(function bmiInit(){
+  const form = document.getElementById("bmiForm");
+  const heightEl = document.getElementById("height");
+  const weightEl = document.getElementById("weight");
+  const bmiScoreEl = document.getElementById("bmiScore");
+  const bmiCategoryEl = document.getElementById("bmiCategory");
+  const bar = document.getElementById("bmiBar");
+  const tips = document.getElementById("bmiTips");
+
+  if (!form) return;
+
+  function clamp(n, min, max){ return Math.max(min, Math.min(max, n)); }
+
+  function categorize(bmi){
+    if (bmi < 18.5) return { label:"Underweight", color:"#60a5fa", idx:10, tips:[
+      "Increase calorie intake with nutrient-dense foods.",
+      "Add strength training 2–3× per week.",
+      "Aim for balanced macros and adequate sleep."
+    ]};
+    if (bmi < 25) return { label:"Normal", color:"#22c55e", idx:35, tips:[
+      "Maintain a balanced diet and regular workouts.",
+      "Mix cardio + resistance training 3–5× weekly.",
+      "Keep hydrated and track consistency."
+    ]};
+    if (bmi < 30) return { label:"Overweight", color:"#f59e0b", idx:65, tips:[
+      "Create a slight calorie deficit (200–400/day).",
+      "Prioritize protein + daily steps/cardio.",
+      "Introduce progressive strength training."
+    ]};
+    return { label:"Obese", color:"#ef4444", idx:90, tips:[
+      "Consult a coach/doctor for a safe plan.",
+      "Low-impact cardio + gradual diet changes.",
+      "Focus on habits: sleep, hydration, step goals."
+    ]};
+  }
+
+  function render(bmi){
+    if (!isFinite(bmi)){ 
+      bmiScoreEl.textContent = "--";
+      bmiCategoryEl.textContent = "Awaiting input…";
+      bar.style.width = "0%";
+      tips.innerHTML = "<li>Enter your height and weight, then press Calculate.</li>";
+      return;
+    }
+    const rounded = Math.round(bmi * 10) / 10;
+    const meta = categorize(rounded);
+    bmiScoreEl.textContent = String(rounded);
+    bmiCategoryEl.textContent = meta.label;
+    bmiCategoryEl.style.color = meta.color;
+
+    // map BMI ~ 10–40 to bar width (0–100%)
+    const width = clamp(((rounded - 10) / (40 - 10)) * 100, 0, 100);
+    bar.style.width = width + "%";
+
+    tips.innerHTML = meta.tips.map(t => `<li>${t}</li>`).join("");
+  }
+
+  form.addEventListener("submit", (e) => {
+    e.preventDefault();
+    const h = parseFloat(heightEl.value); // cm
+    const w = parseFloat(weightEl.value); // kg
+
+    if (!h || !w || h <= 0 || w <= 0){
+      render(NaN);
+      return;
+    }
+    const meters = h / 100;
+    const bmi = w / (meters * meters);
+    render(bmi);
+  });
+})();
diff --git a/public/styles.css b/public/styles.css
@@ -1988,4 +1988,110 @@ contact-us
   .section__container {
     padding: 2rem 0;
   }
-}
+}
+/* =========================
+   THEME (light/dark)
+========================= */
+:root{
+  --bg: #ffffff;
+  --card: #ffffff;
+  --text: #111827;
+  --muted: #6b7280;
+  --brand: #0aa07f;
+  --brand-2: #06b19e;
+  --border: #e5e7eb;
+  --shadow: 0 10px 30px rgba(0,0,0,0.08);
+}
+html[data-theme="dark"]{
+  --bg: #0f172a;
+  --card: #131c36;
+  --text: #e5e7eb;
+  --muted: #93a3b3;
+  --border: #203156;
+  --shadow: 0 12px 30px rgba(0,0,0,0.35);
+}
+body{ background:var(--bg); color:var(--text); transition:background .2s ease,color .2s ease; }
+
+/* =========================
+   HEADER / NAV
+========================= */
+.bc-header{
+  display:flex; align-items:center; justify-content:space-between;
+  gap:16px; padding:14px 20px; position:sticky; top:0; z-index:50;
+  background:var(--bg); border-bottom:1px solid var(--border);
+}
+.bc-header .logo{ font-weight:800; text-decoration:none; color:var(--text); }
+.nav-links{ display:flex; align-items:center; gap:16px; }
+.nav-links a{ color:var(--text); text-decoration:none; font-weight:600; }
+.theme-toggle{ border:0; background:var(--card); padding:8px 10px; border-radius:10px; cursor:pointer; box-shadow:var(--shadow); }
+.nav-toggle{ display:none; border:0; background:var(--card); padding:8px 10px; border-radius:10px; cursor:pointer; box-shadow:var(--shadow); }
+
+/* Mobile menu */
+@media (max-width: 920px){
+  .nav-toggle{ display:block; }
+  .nav-links{
+    position: absolute; left:0; right:0; top:64px; background:var(--bg);
+    border-bottom:1px solid var(--border);
+    display:none; flex-direction:column; padding:12px 16px;
+  }
+  .nav-links.show{ display:flex; }
+}
+
+/* =========================
+   BMI SECTION
+========================= */
+.bmi-section{ padding:60px 0; }
+.container{ max-width:1100px; margin:0 auto; padding:0 16px; }
+
+.section-title{ font-size:2rem; font-weight:800; text-align:center; margin-bottom:6px; }
+.section-subtitle{ text-align:center; color:var(--muted); margin-bottom:26px; }
+
+.bmi-grid{
+  display:grid; gap:20px; grid-template-columns: 1fr 1fr;
+}
+@media (max-width: 900px){
+  .bmi-grid{ grid-template-columns: 1fr; }
+}
+
+.bmi-card{
+  background:var(--card); border:1px solid var(--border); border-radius:16px;
+  box-shadow:var(--shadow); padding:18px;
+}
+.bmi-card h3{ margin-bottom:12px; }
+
+.field{ display:flex; flex-direction:column; gap:6px; margin-bottom:14px; }
+.field.inline{ display:grid; grid-template-columns: 1fr 1fr; gap:12px; }
+.field input, .field select{
+  padding:10px 12px; border:1px solid var(--border); border-radius:10px; background:transparent; color:var(--text);
+}
+
+.btn-primary{
+  display:inline-flex; align-items:center; gap:8px; padding:10px 14px; border:0; border-radius:12px;
+  background:linear-gradient(90deg,var(--brand),var(--brand-2)); color:white; font-weight:700; cursor:pointer;
+}
+.muted{ color:var(--muted); }
+.note{ font-size:.85rem; margin-top:10px; }
+
+.bmi-score-wrap{ display:flex; align-items:baseline; gap:14px; }
+.bmi-score{ font-size:2.5rem; font-weight:900; }
+.bmi-category{ font-weight:800; }
+
+.progress{ width:100%; height:12px; background:#e9edf2; border-radius:999px; overflow:hidden; margin:12px 0; }
+.progress > span{
+  display:block; height:100%;
+  background: linear-gradient(90deg, #4ade80, #facc15, #f97316, #ef4444);
+  width:0%;
+  transition: width .25s ease;
+}
+
+.bmi-tips{ margin:10px 0 0 16px; }
+.bmi-tips li{ margin:6px 0; }
+
+.bmi-legend{
+  display:flex; flex-wrap:wrap; gap:14px; margin-top:14px; color:var(--muted);
+}
+.dot{ display:inline-block; width:10px; height:10px; border-radius:999px; margin-right:6px; }
+.dot.under{ background:#60a5fa; }
+.dot.normal{ background:#4ade80; }
+.dot.over{ background:#f59e0b; }
+.dot.obese{ background:#ef4444; }