From 840d7302562d8482603b293cb2554c92e8d632c5 Mon Sep 17 00:00:00 2001
From: mdfaizaanalam <faizanalam327@gmail.com>
Date: Fri, 4 Oct 2024 11:32:21 +0530
Subject: [PATCH] Update

---
 index.html |  17 ++--
 main.js    | 248 ++++++++++++++++++++++++++++-------------------------
 style.css  | 197 ++++++++++++++++++++++++++----------------
 3 files changed, 265 insertions(+), 197 deletions(-)

diff --git a/index.html b/index.html
index b87a57c..a45a93a 100644
--- a/index.html
+++ b/index.html
@@ -19,22 +19,25 @@
     <div class="nav__bar">
       <div class="nav__header">
         <div class="nav__logo">
-          <a href="#"><img src="assets/logo.png" alt="logo" /></a>
+          <a href="#header"><img src="assets/logo.png" alt="logo" /></a>
         </div>
         <div class="nav__menu__btn" id="menu-btn">
           <i class="ri-menu-line"></i>
         </div>
       </div>
       <ul class="nav__links" id="nav-links">
-        <li class="nav_style"><a href="#home">HOME</a></li>
-        <li class="nav_style"><a href="#about">ABOUT</a></li>
-        <li class="nav_style"><a href="#trainer">TRAINER</a></li>
-        <li class="nav_style"><a href="#client">CLIENT</a></li>
-        <li class="nav_style"><a href="#blog">BLOG</a></li>
-        <li class="nav_style"><a href="#contact">CONTACT</a></li>
+        <li><a href="#header" class="active">HOME</a></li>
+        <li><a href="#about">ABOUT</a></li>
+        <li><a href="#trainer">TRAINER</a></li>
+        <li><a href="#client">CLIENT</a></li>
+        <li><a href="#blog">BLOG</a></li>
+        <li><a href="#contact">CONTACT</a></li>
+        <i class="ri-close-line"></i>
       </ul>
     </div>
   </nav>
+
+
   <header class="header" id="header">
     <div class="section__container header__container">
       <div class="header__content">
diff --git a/main.js b/main.js
index f9e831c..8284b02 100644
--- a/main.js
+++ b/main.js
@@ -1,128 +1,144 @@
-// Existing Menu Button and ScrollReveal Logic
+/*---------------------Slider-------------------------*/
 const menuBtn = document.getElementById("menu-btn");
 const navLinks = document.getElementById("nav-links");
-const menuBtnIcon = menuBtn.querySelector("i");
-const bmiBtn = document.getElementById("btn");
+const closeIcon = navLinks.querySelector("i.ri-close-line");
 
-menuBtn.addEventListener("click", (e) => {
-    navLinks.classList.toggle("open");
-
-    const isOpen = navLinks.classList.contains("open");
-    menuBtnIcon.setAttribute("class", isOpen ? "ri-close-line" : "ri-menu-line");
+// Toggle the mobile menu visibility
+menuBtn.addEventListener("click", () => {
+  navLinks.classList.add("open");
+  menuBtn.setAttribute("aria-expanded", "true"); // Accessibility
 });
 
-navLinks.addEventListener('click', (e) => {
-    navLinks.classList.remove('open');
-    menuBtnIcon.setAttribute('class', 'ri-menu-line');
-});
+// Close the menu when the close icon is clicked
+if (closeIcon) {
+  closeIcon.addEventListener("click", () => {
+    navLinks.classList.remove("open");
+    menuBtn.setAttribute("aria-expanded", "false");
+  });
+}
 
-const scrollRevealOption = {
-    distance: '50px',
-    origin: 'bottom',
-    duration: 1000,
-};
-
-ScrollReveal().reveal(".header__content h1", {...scrollRevealOption});
-ScrollReveal().reveal(".header__content h2", {...scrollRevealOption, delay: 500});
-ScrollReveal().reveal(".header__content p", {...scrollRevealOption, delay: 1000});
-ScrollReveal().reveal(".header__content .header__btn", {...scrollRevealOption, delay: 1500});
-ScrollReveal().reveal(".about__card", {duration: 1000, interval: 500});
-ScrollReveal().reveal(".trainer__card", {...scrollRevealOption, interval: 500});
-ScrollReveal().reveal(".blog__card", {...scrollRevealOption, interval: 500});
-
-const swiper = new Swiper(".swiper", {
-    loop: true,
-    pagination: {
-        el: ".swiper-pagination",
-    },
-});
+/*---------------------Navigation Active Link & Smooth Scroll-------------------------*/
+function handleNavigationClick(event) {
+  // Prevent the default behavior of the anchor tag
+  event.preventDefault();
 
-// Existing BMI Calculator Logic
-bmiBtn.addEventListener("click", () => {
-    const height = parseInt(document.getElementById("height").value);
-    const weight = parseInt(document.getElementById("weight").value);
-    const result = document.getElementById("output");
-    let heightStatus = false, weightStatus = false;
+  // Remove the 'active' class from all navigation links
+  const links = document.querySelectorAll("nav ul li");
+  links.forEach((link) => link.classList.remove("active"));
 
-    if (height === '' || isNaN(height) || height <= 0) {
-        document.getElementById('height_error').innerHTML = 'Please provide a valid height';
-    } else {
-        document.getElementById('height_error').innerHTML = '';
-        heightStatus = true;
-    }
+  // Add the 'active' class to the clicked link's parent li element
+  event.target.parentNode.classList.add("active");
 
-    if (weight === '' || isNaN(weight) || weight <= 0) {
-        document.getElementById('weight_error').innerHTML = 'Please provide a valid weight';
-    } else {
-        document.getElementById('weight_error').innerHTML = '';
-        weightStatus = true;
-    }
+  // Smooth scroll to the target section
+  const targetId = event.target.getAttribute("href").substring(1);
+  const targetSection = document.getElementById(targetId);
+  if (targetSection) {
+    targetSection.scrollIntoView({ behavior: "smooth" });
+  }
 
-    if (heightStatus && weightStatus) {
-        const bmi = (weight / ((height * height) / 10000)).toFixed(2);
+  // Close the menu after clicking on a link (for mobile)
+  navLinks.classList.remove("open");
+  menuBtn.setAttribute("aria-expanded", "false");
+}
+
+const navLinksItems = document.querySelectorAll("nav ul li a");
+navLinksItems.forEach((link) => {
+  link.addEventListener("click", handleNavigationClick);
+});
 
-        if (bmi < 18.6) {
-            result.innerHTML = 'Underweight: ' + bmi;
-        } else if (bmi > 24.9) {
-            result.innerHTML = 'Overweight: ' + bmi;
-        } else {
-            result.innerHTML = 'Normal: ' + bmi;
-        }
+// Existing BMI Calculator Logic
+bmiBtn.addEventListener("click", () => {
+  const height = parseInt(document.getElementById("height").value);
+  const weight = parseInt(document.getElementById("weight").value);
+  const result = document.getElementById("output");
+  let heightStatus = false,
+    weightStatus = false;
+
+  if (height === "" || isNaN(height) || height <= 0) {
+    document.getElementById("height_error").innerHTML =
+      "Please provide a valid height";
+  } else {
+    document.getElementById("height_error").innerHTML = "";
+    heightStatus = true;
+  }
+
+  if (weight === "" || isNaN(weight) || weight <= 0) {
+    document.getElementById("weight_error").innerHTML =
+      "Please provide a valid weight";
+  } else {
+    document.getElementById("weight_error").innerHTML = "";
+    weightStatus = true;
+  }
+
+  if (heightStatus && weightStatus) {
+    const bmi = (weight / ((height * height) / 10000)).toFixed(2);
+
+    if (bmi < 18.6) {
+      result.innerHTML = "Underweight: " + bmi;
+    } else if (bmi > 24.9) {
+      result.innerHTML = "Overweight: " + bmi;
     } else {
-        alert('The form has errors');
-        result.innerHTML = '';
+      result.innerHTML = "Normal: " + bmi;
     }
+  } else {
+    alert("The form has errors");
+    result.innerHTML = "";
+  }
 });
 
 // Add Protein Intake Calculator Logic
-document.getElementById("protein-btn").addEventListener("click", function() {
-    let weight = parseFloat(document.getElementById("protein-weight").value);
-    let goal = document.getElementById("protein-goal").value;
-    let proteinIntake;
-
-    // Protein intake values based on goals (in grams per kg)
-    if (goal === "maintenance") {
-        proteinIntake = weight * 1.2;
-    } else if (goal === "muscle-gain") {
-        proteinIntake = weight * 1.6;
-    } else if (goal === "fat-loss") {
-        proteinIntake = weight * 2.0;
-    }
-
-    document.getElementById("protein-output").innerHTML = 
-      `You need approximately ${proteinIntake.toFixed(2)} grams of protein per day.`;
+document.getElementById("protein-btn").addEventListener("click", function () {
+  let weight = parseFloat(document.getElementById("protein-weight").value);
+  let goal = document.getElementById("protein-goal").value;
+  let proteinIntake;
+
+  // Protein intake values based on goals (in grams per kg)
+  if (goal === "maintenance") {
+    proteinIntake = weight * 1.2;
+  } else if (goal === "muscle-gain") {
+    proteinIntake = weight * 1.6;
+  } else if (goal === "fat-loss") {
+    proteinIntake = weight * 2.0;
+  }
+
+  document.getElementById(
+    "protein-output"
+  ).innerHTML = `You need approximately ${proteinIntake.toFixed(
+    2
+  )} grams of protein per day.`;
 });
 
 // Add Macronutrient Calculator Logic
-document.getElementById("macro-btn").addEventListener("click", function() {
-    let weight = parseFloat(document.getElementById("macro-weight").value);
-    let goal = document.getElementById("macro-goal").value;
-    let calories = parseFloat(document.getElementById("macro-calories").value);
-
-    let proteinRatio, carbRatio, fatRatio;
-
-    // Macro ratios based on fitness goals
-    if (goal === "maintenance") {
-        proteinRatio = 0.3;
-        carbRatio = 0.4;
-        fatRatio = 0.3;
-    } else if (goal === "bulking") {
-        proteinRatio = 0.25;
-        carbRatio = 0.5;
-        fatRatio = 0.25;
-    } else if (goal === "cutting") {
-        proteinRatio = 0.35;
-        carbRatio = 0.3;
-        fatRatio = 0.35;
-    }
-
-    // Calculate macros in grams
-    let proteinGrams = (calories * proteinRatio) / 4;
-    let carbGrams = (calories * carbRatio) / 4;
-    let fatGrams = (calories * fatRatio) / 9;
-
-    document.getElementById("macro-output").innerHTML = 
-      `Your daily macronutrient breakdown: 
+document.getElementById("macro-btn").addEventListener("click", function () {
+  let weight = parseFloat(document.getElementById("macro-weight").value);
+  let goal = document.getElementById("macro-goal").value;
+  let calories = parseFloat(document.getElementById("macro-calories").value);
+
+  let proteinRatio, carbRatio, fatRatio;
+
+  // Macro ratios based on fitness goals
+  if (goal === "maintenance") {
+    proteinRatio = 0.3;
+    carbRatio = 0.4;
+    fatRatio = 0.3;
+  } else if (goal === "bulking") {
+    proteinRatio = 0.25;
+    carbRatio = 0.5;
+    fatRatio = 0.25;
+  } else if (goal === "cutting") {
+    proteinRatio = 0.35;
+    carbRatio = 0.3;
+    fatRatio = 0.35;
+  }
+
+  // Calculate macros in grams
+  let proteinGrams = (calories * proteinRatio) / 4;
+  let carbGrams = (calories * carbRatio) / 4;
+  let fatGrams = (calories * fatRatio) / 9;
+
+  document.getElementById(
+    "macro-output"
+  ).innerHTML = `Your daily macronutrient breakdown: 
       Protein: ${proteinGrams.toFixed(2)}g, 
       Carbs: ${carbGrams.toFixed(2)}g, 
       Fats: ${fatGrams.toFixed(2)}g.`;
@@ -130,15 +146,13 @@ document.getElementById("macro-btn").addEventListener("click", function() {
 
 // Send email logic
 function sendEmail() {
-    Email.send({
-        Host: "smtp.gmail.com",
-        Username: "pallavi867709@gmail.com",
-        Password: "Pallavi@2005??",
-        To: 'pallavi867709@gmail.com',
-        From: document.getElementById("email").value,
-        Subject: "This is the subject",
-        Body: "And this is the body"
-    }).then(
-      message => alert(message)
-    );
+  Email.send({
+    Host: "smtp.gmail.com",
+    Username: "pallavi867709@gmail.com",
+    Password: "Pallavi@2005??",
+    To: "pallavi867709@gmail.com",
+    From: document.getElementById("email").value,
+    Subject: "This is the subject",
+    Body: "And this is the body",
+  }).then((message) => alert(message));
 }
diff --git a/style.css b/style.css
index c08687e..2c66587 100644
--- a/style.css
+++ b/style.css
@@ -87,65 +87,95 @@ nav {
   background-color: var(--text-dark);
   position: fixed;
   width: 100%;
-  z-index: 9;
+  z-index: 100;
 }
 
 .nav__bar {
   width: 100%;
   max-width: var(--max-width);
   margin-inline: auto;
-}
-
-.nav__header {
-  padding: 1rem;
   display: flex;
   align-items: center;
-  justify-content: space-between;
-  background-color: var(--text-dark);
+  color: white;
 }
 
 .nav__logo img {
-  max-width: 90px;
-}
-
-.nav__menu__btn {
-  font-size: 1.5rem;
-  color: var(--white);
-  cursor: pointer;
+  max-width: 110px;
 }
 
-.nav__links {
-  position: absolute;
-  top: 68px;
-  left: 0;
-  width: 100%;
-  padding: 2rem;
+.nav__links { 
   list-style: none;
   display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-direction: column;
   gap: 2rem;
-  background-color: var(--text-dark);
-  transition: 0.5s;
-  z-index: -1;
-  transform: translateY(-100%); /*IMP*/
 }
 
-.nav__links.open {
-  transform: translateY(0);
+.nav__links li {
+  display: inline;
+  position: relative; /* Ensure the hover line is positioned relative to each link */
 }
 
-.nav__links a {
+.nav__links li a {
+  color: white;
+  text-decoration: none;
+  transition: color 0.3s ease;
   font-size: 1.1rem;
   font-family: var(--header-font);
   white-space: nowrap;
   color: var(--white);
-  transition: 0.3s;
 }
 
-.nav__links a:hover {
-  color: var(--primary-color);
+/* Hover effect: Red line under link */
+.nav__links li a::after {
+  content: "";
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  width: 0;
+  height: 2px;
+  background-color: red;
+  transition: width 0.05s ease;
+}
+
+.nav__links li a:hover::after {
+  width: 100%; /* Line expands on hover */
+}
+
+.nav__links li a:hover {
+  color: white; /* Text remains white on hover */
+}
+
+.nav__links li.active a {
+  color: red; /* Red color for the active link */
+}
+
+.nav__links li.active a::after {
+  display: none; 
+}
+
+.nav__menu__btn {
+  display: none;
+  font-size: 24px;
+  color: white;
+  cursor: pointer;
+}
+
+.nav__links i {
+  display: none;
+  font-size: 24px;
+  color: white;
+  cursor: pointer;
+}
+
+.nav__header {
+  padding: 1rem;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  background-color: var(--text-dark);
+}
+
+.nav__bar {
+  gap: 10rem;
 }
 
 .header {
@@ -158,6 +188,7 @@ nav {
   background-size: cover;
   background-position: center center;
   background-repeat: no-repeat;
+  margin-top: 60px;
 }
 
 /* card hover effect */
@@ -876,9 +907,6 @@ url("assets/banner-2.png");
   text-align: center;
 }
 
-
-
-
 @media (width > 540px) {
   .about__grid {
     grid-template-columns: repeat(2, 1fr);
@@ -906,41 +934,6 @@ url("assets/banner-2.png");
 }
 
 @media (width > 768px){
-  nav{
-    position: static;
-    padding: 1.5rem 1rem;
-  }
-
-  .nav__bar{
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    gap: 2rem;
-  }
-
-  .nav__header{
-    padding: 0;
-    background-color: transparent;
-  }
-
-  .nav__logo img{
-    max-width: 120px;
-  }
-
-  .nav__menu__btn{
-  display: none;
-  }
-
-  .nav__links{
-    position: static;
-    padding: 0;
-    flex-direction: row;
-    justify-content: flex-end;
-    background-color: transparent;
-    transform: none;
-    z-index: 1;
-  }
-
   .header__container {
     padding-block: 12rem;
     grid-template-columns: repeat(2, 1fr);
@@ -1011,10 +1004,68 @@ url("assets/banner-2.png");
   }
 }
 
-
 @media (max-width: 600px) {
   .footer {
     padding: 5px;
   }
 }
-}
\ No newline at end of file
+}
+
+@media (max-width: 768px) {
+  nav {
+    position: fixed;
+    top: 0;
+    width: 100%;
+    z-index: 100;
+  }
+
+  .nav__menu__btn {
+    display: block;
+    position: absolute;
+    top: 25px;
+    right: 30px;
+  }
+
+  .nav__links {
+    position: fixed;
+    top: 0; 
+    right: -100%;
+    height: 100vh; 
+    width: 200px;
+    background-color: var(--text-dark);
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    transition: right 0.3s ease;
+    margin: 0; 
+    padding: 0;
+  }
+
+  .nav__links li {
+    text-align: center;
+    width: 100%;
+    margin: 1rem 0;
+  }
+
+  .nav__links li a {
+    font-size: 18px;
+    padding: 0.2rem 0;
+    display: block;
+  }
+
+  .nav__links i {
+    display: block;
+    position: absolute;
+    top: 20px;
+    left: 20px;
+  }
+
+  .nav__links.open {
+    right: 0;
+  }
+
+  .nav__logo {
+    display: block;
+    margin-right: 200px;
+  }
+}