From 842bdef48753a8ce86c997a263bf66161b306f5f Mon Sep 17 00:00:00 2001
From: Prayag <prayagthakur007@gmail.com>
Date: Sat, 19 Oct 2024 00:07:24 +0530
Subject: [PATCH 1/2] Added language tool

---
 index.html          | 75 ++++++++++++++++-----------------------------
 script/modal_box.js | 32 +++++++++++++++++++
 2 files changed, 58 insertions(+), 49 deletions(-)
 create mode 100644 script/modal_box.js

diff --git a/index.html b/index.html
index a299808..81eff44 100644
--- a/index.html
+++ b/index.html
@@ -94,10 +94,10 @@
     </header>
     <!-- Search Bar -->
     <div id="search-bar">
-        <input type="text" id="search" placeholder="Search..." />
+        <input type=" text " id=" search " placeholder=" Search..." />
         <button type="submit" id="search-btn">Go</button> <!-- Add ID to the button -->
     </div>
-    <script src="preloader.js"></script>
+    <script src=" preloader.js "></script>
     <style>
     /* Style for the search bar, initially hidden */
     #search-bar {
@@ -111,10 +111,17 @@
         box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
     }
 
+    /* Css for language box */
+    .lang-box{
+        align-items: center;
+        margin-top: auto;
+        margin-bottom: auto;
+    }
+
     /* Styling the input box and button */
     #search-bar input {
-        padding: 5px;
-        width: 200px;
+        padding:  5px;
+        width:  200px;
         border: 1px solid #ccc;
         border-radius: 3px;
         outline: none;
@@ -585,7 +592,7 @@ <h1>Contact Us</h1>
             </ul>
         </div>
 
-        <div class="footer-section quick-links">
+        <div class=" footer-section quick-links ">
             <h1>Quick Links</h1>
             <ul class="footer-list">
                 <li><a href="about.html">About Us</a></li>
@@ -650,43 +657,8 @@ <h2>Subscription Successful!</h2>
         </div>
         
     
-    <script>
-        let openbtn = document.getElementById('open-btn');
-let modalbox = document.getElementById('modalbox');
-let closebtn = document.getElementById('close-btn');
-let emailInput = document.getElementById('email-input');
-
-// Email validation function
-function isValidEmail(email) {
-        // Regular expression for validating an email
-        const regex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
-        return regex.test(email);
-    }
-
-    openbtn.addEventListener('click', function () {
-        // Validate email
-        if (emailInput.value === '') {
-            alert('Please enter your email address.');
-        } else if (!isValidEmail(emailInput.value)) {
-            alert('Please enter a valid email address.');
-        } else {
-            modalbox.style.display = 'block'; // Show the modal
-        }
-    });
-
-    closebtn.addEventListener('click', function () {
-        modalbox.style.display = 'none'; // Hide the modal
-    });
-     // Close modal when clicking outside of it
-     modalbox.addEventListener('click', function(event) {
-        if (event.target === modalbox) {
-            modalbox.style.display = 'none'; // Hide modal if the background is clicked
-        }
-    });
-
-    </script>
+    <script src="./script/modal_box.js"></script>
     
-
     <script src="https://unpkg.com/aos@next/dist/aos.js"></script>
 
     <!-- ProgressBar Functionality -->
@@ -698,7 +670,7 @@ <h2>Subscription Successful!</h2>
             const windowScroll = document.body.scrollTop || document.documentElement.scrollTop;
             const documentHeight = document.documentElement.scrollHeight - document.documentElement.clientHeight;
             const scrollPercent = (windowScroll / documentHeight) * 100;
-            document.getElementById("progress-bar").style.width = scrollPercent + "%";
+            document.getElementById(" progress-bar ").style.width = scrollPercent + "%";
         }
 
     </script>
@@ -807,31 +779,31 @@ <h2>Subscription Successful!</h2>
     const cursor = document.getElementById('cursor');
     
     tabs.forEach(tab => {
-        tab.addEventListener('mouseenter', () => {
+        tab.addEventListener(' mouseenter', () => {
             cursor.style.width = `${tab.offsetWidth}px`; // Set width to the current tab's width
             cursor.style.left = `${tab.offsetLeft}px`; // Move cursor to the current tab's position
             cursor.style.opacity = 1; 
         });
     
-        tab.addEventListener('mouseleave', () => {
+        tab.addEventListener(' mouseleave', () => {
             cursor.style.opacity = 0; 
         });
     });
     
   </script>
-  <a class="gotopbtn" href="#"><i class="fas fa-arrow-up"></i></a>
-  <script src="https://unpkg.com/aos@next/dist/aos.js"></script>
+  <a class=" gotopbtn" href="#"><i class="fas fa-arrow-up"></i></a>
+  <script src=" https://unpkg.com/aos@next/dist/aos.js"></script>
 <script>
   AOS.init();
 
   (function() {
       let headerVisible = false;
-      document.getElementById("menu").addEventListener("click", function () {
+      document.getElementById(" menu").addEventListener("click", function () {
           if (headerVisible === false) {
-              document.getElementById("header").style.height = "290px";
+              document.getElementById(" header").style.height = "290px";
               headerVisible = true;
           } else {
-              document.getElementById("header").style.height = "50px";
+              document.getElementById(" header").style.height = "50px";
               headerVisible = false;
           }
       });
@@ -849,6 +821,11 @@ <h2>Subscription Successful!</h2>
   })();  // IIFE to avoid polluting global scope
 </script>
 
+<div class="gtranslate_wrapper"></div>
+        <script>window.gtranslateSettings = {"default_language":"en","detect_browser_language":true,"wrapper_selector":".gtranslate_wrapper"}</script>
+<script src="https://cdn.gtranslate.net/widgets/latest/float.js" defer></script>
+
+
 <script src="./script/popup.js"></script>
 
 </body>
diff --git a/script/modal_box.js b/script/modal_box.js
new file mode 100644
index 0000000..0fea4bf
--- /dev/null
+++ b/script/modal_box.js
@@ -0,0 +1,32 @@
+let openbtn = document.getElementById('open-btn');
+let modalbox = document.getElementById('modalbox');
+let closebtn = document.getElementById('close-btn');
+let emailInput = document.getElementById('email-input');
+
+// Email validation function
+function isValidEmail(email) {
+        // Regular expression for validating an email
+        const regex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+        return regex.test(email);
+    }
+
+    openbtn.addEventListener('click', function () {
+        // Validate email
+        if (emailInput.value === '') {
+            alert('Please enter your email address.');
+        } else if (!isValidEmail(emailInput.value)) {
+            alert('Please enter a valid email address.');
+        } else {
+            modalbox.style.display = 'block'; // Show the modal
+        }
+    });
+
+    closebtn.addEventListener('click', function () {
+        modalbox.style.display = 'none'; // Hide the modal
+    });
+     // Close modal when clicking outside of it
+     modalbox.addEventListener('click', function(event) {
+        if (event.target === modalbox) {
+            modalbox.style.display = 'none'; // Hide modal if the background is clicked
+        }
+    });
\ No newline at end of file

From 3d335228037c00f0d88f3cde38f712256fb01003 Mon Sep 17 00:00:00 2001
From: Prayag <prayagthakur007@gmail.com>
Date: Sat, 19 Oct 2024 00:18:42 +0530
Subject: [PATCH 2/2] Added translator tool

---
 Style/about.css       | 176 +++++++++++++++++++++++++++++++++++++++
 about.html            | 186 ++----------------------------------------
 contact.html          |   6 +-
 features.html         |  26 +++---
 feedback.html         |   4 +
 index.html            |   4 +-
 mens.html             |   7 +-
 sneaker.html          |   3 +
 terms-conditions.html |   4 +
 womens.html           |   6 +-
 10 files changed, 228 insertions(+), 194 deletions(-)
 create mode 100644 Style/about.css

diff --git a/Style/about.css b/Style/about.css
new file mode 100644
index 0000000..ae5e8a0
--- /dev/null
+++ b/Style/about.css
@@ -0,0 +1,176 @@
+html, body {
+    margin: 0;
+    padding: 0;
+    height: 100%;
+    font-family: 'Roboto', Arial, sans-serif;
+    background: linear-gradient(135deg, #f7f7f7, #e2e2e2);
+    color: #333;
+}
+
+body {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    min-height: 100vh;
+}
+
+h1, h2 {
+    color: #333;
+}
+
+/* About Us Section */
+.leftabout {
+    margin: 0 50px;
+}
+
+.leftabout h3, .leftabout p {
+    text-align: center;
+}
+
+.about-section {
+    width: 100%;
+    padding: 40px 0;
+    background: #ffffff;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+}
+
+.about-title {
+    font-size: 2.5em;
+    text-align: center;
+    margin-bottom: 35px;
+    font-weight: 700;
+}
+
+/* Second part content css */
+#div2, #div3 {
+    font-size: 22px;
+    font-weight: bold;
+    text-align: center;
+    margin: 7px 22px;
+}
+
+/* First part: Image left, text right */
+.about-content-first, .about-content-second {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 50px;
+    gap: 30px;
+}
+
+.about-content-second {
+    flex-direction: row-reverse;
+}
+
+.about-text {
+    flex: 1;
+    font-size: 1.5em;
+    line-height: 1.8;
+    margin-right: 20px;
+}
+
+.rightabout {
+    margin: 0 50px;
+}
+
+.about-images img {
+    width: 500px;
+    height: 520px;
+    border-radius: 5%;
+    aspect-ratio: 3/2;
+    opacity: 90%;
+    box-shadow: 0 0 15px rgba(136, 136, 136, 0.5);
+    transition: transform 0.3s, box-shadow 0.3s;
+}
+
+.about-images img:hover {
+    transform: scale(1.05);
+    box-shadow: 0 0 25px rgba(136, 136, 136, 0.7);
+}
+
+.about3 {
+    margin-right: 50px;
+}
+
+.about4 {
+    margin: 50px 25px 20px;
+}
+
+.aboutus-body {
+    font-size: 21px;
+}
+
+.slogan {
+    font-size: 22px;
+    font-weight: bold;
+    margin-bottom: 12px;
+}
+
+.about-container {
+    padding: 0 40px;
+}
+
+
+/* Adding media Queries  */
+@media (min-width: 1980px) {
+.leftabout {
+  margin-left: 250px;
+  margin-right: 250px;
+}
+
+.about3 {
+  margin-right: 230px;
+}
+
+.about4 {
+  margin-left: 180px;
+}
+
+.rightabout {
+  margin-left: 250px;
+  margin-right: 250px;
+}
+
+.aboutus-body {
+  font-size: 25px;
+}
+
+#div2 {
+  font-size: 27px;
+}
+
+#div3 {
+  font-size: 23px;
+}
+}
+
+@media (max-width: 1200px) {
+h3 {
+  font-size: 20px;
+}
+.leftabout p {
+  font-size: 15px;
+}
+
+.rightabout p {
+  font-size: 15px;
+} */
+
+/* sorry for using id and div2 div3 but something was 
+    getting overwritten and this was easy way out */
+#div2 {
+  font-size: 16px;
+}
+
+#div3 {
+  font-size: 16px;
+}
+.about-images img {
+  width: 300px;
+  height: 320px;
+  border-radius: 5%;
+  aspect-ratio: 3/2;
+  opacity: 90%;
+  box-shadow: 0 0 15px 15px rgba(136, 136, 136, 0.5);
+}
+}
\ No newline at end of file
diff --git a/about.html b/about.html
index fd99e60..583aefe 100644
--- a/about.html
+++ b/about.html
@@ -11,185 +11,9 @@
     <link rel="stylesheet" href="./style.css">
     <link rel="stylesheet" herf="https://use.fontawesome.com/releases/v5.4.1/css/all.css">
     <!-- Link to your common CSS file -->
-    <style>
-      /* General Styles */
-        html, body {
-            margin: 0;
-            padding: 0;
-            height: 100%;
-            font-family: 'Roboto', Arial, sans-serif;
-            background: linear-gradient(135deg, #f7f7f7, #e2e2e2);
-            color: #333;
-        }
-
-        body {
-            display: flex;
-            flex-direction: column;
-            justify-content: space-between;
-            min-height: 100vh;
-        }
-
-        h1, h2 {
-            color: #333;
-        }
-
-        /* About Us Section */
-        .leftabout {
-            margin: 0 50px;
-        }
-
-        .leftabout h3, .leftabout p {
-            text-align: center;
-        }
-
-        .about-section {
-            width: 100%;
-            padding: 40px 0;
-            background: #ffffff;
-            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
-        }
-
-        .about-title {
-            font-size: 2.5em;
-            text-align: center;
-            margin-bottom: 35px;
-            font-weight: 700;
-        }
-
-        /* Second part content css */
-        #div2, #div3 {
-            font-size: 22px;
-            font-weight: bold;
-            text-align: center;
-            margin: 7px 22px;
-        }
-
-        /* First part: Image left, text right */
-        .about-content-first, .about-content-second {
-            display: flex;
-            align-items: center;
-            justify-content: space-between;
-            margin-bottom: 50px;
-            gap: 30px;
-        }
-
-        .about-content-second {
-            flex-direction: row-reverse;
-        }
-
-        .about-text {
-            flex: 1;
-            font-size: 1.5em;
-            line-height: 1.8;
-            margin-right: 20px;
-        }
-
-        .rightabout {
-            margin: 0 50px;
-        }
-
-        .about-images img {
-            width: 500px;
-            height: 520px;
-            border-radius: 5%;
-            aspect-ratio: 3/2;
-            opacity: 90%;
-            box-shadow: 0 0 15px rgba(136, 136, 136, 0.5);
-            transition: transform 0.3s, box-shadow 0.3s;
-        }
-
-        .about-images img:hover {
-            transform: scale(1.05);
-            box-shadow: 0 0 25px rgba(136, 136, 136, 0.7);
-        }
-
-        .about3 {
-            margin-right: 50px;
-        }
-
-        .about4 {
-            margin: 50px 25px 20px;
-        }
-
-        .aboutus-body {
-            font-size: 21px;
-        }
-
-        .slogan {
-            font-size: 22px;
-            font-weight: bold;
-            margin-bottom: 12px;
-        }
-
-        .about-container {
-            padding: 0 40px;
-        }
-    
-
-      /* Adding media Queries  */
-      @media (min-width: 1980px) {
-        .leftabout {
-          margin-left: 250px;
-          margin-right: 250px;
-        }
-
-        .about3 {
-          margin-right: 230px;
-        }
-
-        .about4 {
-          margin-left: 180px;
-        }
-
-        .rightabout {
-          margin-left: 250px;
-          margin-right: 250px;
-        }
-
-        .aboutus-body {
-          font-size: 25px;
-        }
-
-        #div2 {
-          font-size: 27px;
-        }
-
-        #div3 {
-          font-size: 23px;
-        }
-      }
-
-      @media (max-width: 1200px) {
-        h3 {
-          font-size: 20px;
-        }
-        .leftabout p {
-          font-size: 15px;
-        }
-
-        .rightabout p {
-          font-size: 15px;
-        } */
+      <!--General Styles inputed in css files in style section changing into external css for better readability-->
+    <link rel="stylesheet" href="./Style/about.css"> 
 
-        /* sorry for using id and div2 div3 but something was 
-            getting overwritten and this was easy way out */
-        #div2 {
-          font-size: 16px;
-        }
-
-        #div3 {
-          font-size: 16px;
-        }
-        .about-images img {
-          width: 300px;
-          height: 320px;
-          border-radius: 5%;
-          aspect-ratio: 3/2;
-          opacity: 90%;
-          box-shadow: 0 0 15px 15px rgba(136, 136, 136, 0.5);
-        }
-      }
-    </style>
   </head>
 
   <body>
@@ -486,6 +310,12 @@ <h2>Subscription Successful!</h2>
           modalbox.style.display = "none"; // Hide modal if the background is clicked
         }
       });
+
     </script>
+
+    <div class="gtranslate_wrapper"></div>
+    <script>window.gtranslateSettings = {"default_language":"en","detect_browser_language":true,"wrapper_selector":".gtranslate_wrapper"}</script>
+    <script src="https://cdn.gtranslate.net/widgets/latest/float.js" defer></script>
+
   </body>
 </html>
diff --git a/contact.html b/contact.html
index fd87480..a902a33 100644
--- a/contact.html
+++ b/contact.html
@@ -193,8 +193,12 @@ <h1>Subscribe to Newsletter</h1>
     </script>
     </body>
     </html>
-    
+
+    <div class="gtranslate_wrapper"></div>
+    <script>window.gtranslateSettings = {"default_language":"en","detect_browser_language":true,"wrapper_selector":".gtranslate_wrapper"}</script>
+<script src="https://cdn.gtranslate.net/widgets/latest/float.js" defer></script>
     
 </body>
 
+
 </html>
diff --git a/features.html b/features.html
index e012bb0..a5b3166 100644
--- a/features.html
+++ b/features.html
@@ -48,11 +48,11 @@
             <i class="fa-solid fa-bars menu" id="menu"></i>
         </div>
 
-         <nav class="bg-neutral-100 py-20">
+         <nav class=" bg-neutral-100 py-20">
             <div class="tabs-container">
                 <ul id="tabs" class="tabs">
                     <li class="tab">
-                        <a href="index.html">Home</a>
+                        <a href=" index.html">Home</a>
                         <div class="cursor"></div>
                     </li>
                     <li class="tab">
@@ -81,12 +81,12 @@
         </nav>
 
         <nav class="utils">
-            <ul class="nav-links">
+            <ul class=" nav-links ">
                 <li class="nav-link">
                     <i class="fa-solid fa-cart-shopping"></i>
                 </li>
-                <li class="nav-link">
-                    <a href="login-sginup.html">
+                <li class=" nav-link ">
+                    <a href=" login-sginup.html">
                         <i class="fa-solid fa-user"></i>
                     </a>
                 </li>
@@ -99,14 +99,14 @@
 
     <!-- Main Content -->
     <main>
-        <section class="feature">
+        <section class=" feature ">
             <h3 onclick="toggleAnswer(0)">User-Experience</h3>
-            <p class="answer">The TrendTrove website features a clean and organized layout, ensuring users can easily navigate through various sections, including Home, About, Features, Products, and Contact Us. The top navigation bar remains accessible, allowing for quick access to essential pages.
+            <p class=" answer">The TrendTrove website features a clean and organized layout, ensuring users can easily navigate through various sections, including Home, About, Features, Products, and Contact Us. The top navigation bar remains accessible, allowing for quick access to essential pages.
 A modern and aesthetically pleasing design enhances the shopping experience. High-quality images and a consistent color scheme create a visually appealing environment that resonates with the brand identity.</p>
         </section>
-        <section class="feature">
+        <section class=" feature ">
             <h3 onclick="toggleAnswer(1)">Seamless Integration</h3>
-            <p class="answer">TrendTrove is designed to integrate effortlessly with various platforms and services, ensuring that users can access a unified shopping experience without disruption. Whether users are browsing on desktop or mobile, the transition is smooth and intuitive.
+            <p class=" answer ">TrendTrove is designed to integrate effortlessly with various platforms and services, ensuring that users can access a unified shopping experience without disruption. Whether users are browsing on desktop or mobile, the transition is smooth and intuitive.
 The website seamlessly integrates with popular social media channels, allowing users to share products, reviews, and recommendations with ease. This fosters community engagement and enhances brand visibility.</p>
         </section>
         <section class="feature">
@@ -138,7 +138,7 @@ <h1>Contact Us</h1>
 
                 <li class="border-list">
                 </li>
-                <li class="socials">
+                <li class=" socials ">
                     <a href="https://www.linkedin.com/in/tejashri-taral-5006a82a0/" id="linkedin" target="_blank">
                         <i class="fa-brands fa-linkedin"></i>
                     </a>
@@ -157,7 +157,7 @@ <h1>Contact Us</h1>
 
         <div class="footer-section quick-links">
             <h1>Quick Links</h1>
-            <ul class="footer-list">
+            <ul class=" footer-list ">
                 <li><a href="about.html">About Us</a></li>
                 <li><a href="terms-conditions.html">Terms & Conditions</a></li>
                 <li><a href="return-policy.html">Return Policy</a></li>
@@ -258,6 +258,10 @@ <h2>Subscription Successful!</h2>
             answers[index].style.display = answers[index].style.display === 'block' ? 'none' : 'block';
         }
     </script>
+         <div class="gtranslate_wrapper"></div>
+         <script>window.gtranslateSettings = {"default_language":"en","detect_browser_language":true,"wrapper_selector":".gtranslate_wrapper"}</script>
+         <script src="https://cdn.gtranslate.net/widgets/latest/float.js" defer></script>
+    
 </body>
 
 </html>
diff --git a/feedback.html b/feedback.html
index fe14293..e1c7a63 100644
--- a/feedback.html
+++ b/feedback.html
@@ -89,5 +89,9 @@ <h2>We Value Your Feedback</h2>
   </form>
 </div>
 
+<div class="gtranslate_wrapper"></div>
+        <script>window.gtranslateSettings = {"default_language":"en","detect_browser_language":true,"wrapper_selector":".gtranslate_wrapper"}</script>
+<script src="https://cdn.gtranslate.net/widgets/latest/float.js" defer></script>
+
 </body>
 </html>
diff --git a/index.html b/index.html
index 81eff44..b8b4647 100644
--- a/index.html
+++ b/index.html
@@ -809,8 +809,8 @@ <h2>Subscription Successful!</h2>
       });
 
       // Show "Go to Top" button after scrolling down
-      const goTopBtn = document.querySelector(".gotopbtn");
-      window.addEventListener("scroll", function () {
+      const goTopBtn = document.querySelector(" .gotopbtn");
+      window.addEventListener(" scroll", function () {
           if (window.scrollY > 200) {  // Show the button after scrolling down 200px
               goTopBtn.style.display = "block";
           } else {
diff --git a/mens.html b/mens.html
index cf1dda0..0b67006 100644
--- a/mens.html
+++ b/mens.html
@@ -1271,6 +1271,11 @@ <h2>Subscription Successful!</h2>
 
 
 
-</script>    
+</script> 
+
+<div class="gtranslate_wrapper"></div>
+        <script>window.gtranslateSettings = {"default_language":"en","detect_browser_language":true,"wrapper_selector":".gtranslate_wrapper"}</script>
+<script src="https://cdn.gtranslate.net/widgets/latest/float.js" defer></script>
+
 </body>
 </html>
\ No newline at end of file
diff --git a/sneaker.html b/sneaker.html
index 6907543..38e8623 100644
--- a/sneaker.html
+++ b/sneaker.html
@@ -826,6 +826,9 @@ <h2>Merrell Trail</h2>
             });
         });
     </script>
+<div class="gtranslate_wrapper"></div>
+<script>window.gtranslateSettings = {"default_language":"en","detect_browser_language":true,"wrapper_selector":".gtranslate_wrapper"}</script>
+<script src="https://cdn.gtranslate.net/widgets/latest/float.js" defer></script>
 
 </body>
 </html>
diff --git a/terms-conditions.html b/terms-conditions.html
index ca8269e..63c19a6 100644
--- a/terms-conditions.html
+++ b/terms-conditions.html
@@ -187,4 +187,8 @@ <h1>Subscribe to Newsletter</h1>
         </div>
     </footer>
 </body>
+<div class="gtranslate_wrapper"></div>
+        <script>window.gtranslateSettings = {"default_language":"en","detect_browser_language":true,"wrapper_selector":".gtranslate_wrapper"}</script>
+<script src="https://cdn.gtranslate.net/widgets/latest/float.js" defer></script>
+
 </html>
diff --git a/womens.html b/womens.html
index d4c48d8..035a6cb 100644
--- a/womens.html
+++ b/womens.html
@@ -1279,6 +1279,10 @@ <h2>Subscription Successful!</h2>
 
 
 
-</script>    
+</script> 
+<div class="gtranslate_wrapper"></div>
+        <script>window.gtranslateSettings = {"default_language":"en","detect_browser_language":true,"wrapper_selector":".gtranslate_wrapper"}</script>
+<script src="https://cdn.gtranslate.net/widgets/latest/float.js" defer></script>   
 </body>
+
 </html>