From ca90c0b8203df91a87474a0c57e6891f2b74dbdf Mon Sep 17 00:00:00 2001
From: samarsajad <142666229+samarsajad@users.noreply.github.com>
Date: Thu, 25 Jul 2024 13:54:22 +0530
Subject: [PATCH] added google translate

---
 Css-files/googletranslate.css | 127 ++++++++++++++++++++++++++++++++++
 Html-files/cart.html          |   1 +
 Html-files/googletranslate.js |  27 ++++++++
 index.html                    |  21 ++++++
 4 files changed, 176 insertions(+)
 create mode 100644 Css-files/googletranslate.css
 create mode 100644 Html-files/googletranslate.js

diff --git a/Css-files/googletranslate.css b/Css-files/googletranslate.css
new file mode 100644
index 00000000..f37f6bd6
--- /dev/null
+++ b/Css-files/googletranslate.css
@@ -0,0 +1,127 @@
+#translateButton {
+    position: fixed;
+    bottom: 20px;
+    right: 20px;
+    z-index: 1000;
+    width: 50px;  
+    height: 50px;
+    border-radius: 50%; 
+    border: none; 
+    background: linear-gradient( rgb(234, 16, 16), #f2a736);
+
+    color: white; 
+    text-align: center; 
+    display: inline-block; 
+    font-size: 16px; 
+    cursor: pointer;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-size: 12px;
+    line-height: 1;
+    text-align: center;
+    white-space: nowrap;
+    transition: transform 0.3s ease;
+    margin-right: 1390px;
+    margin-bottom: 55px;
+}
+#translateButton:hover {
+    transform: scale(1.2); 
+}
+
+/* The popup modal */
+.popup {
+    display: none; 
+    position: fixed;
+    z-index: 1000;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    overflow: auto;
+    background-color: rgb(0,0,0); 
+    background-color: rgba(0,0,0,0.4); 
+   
+}
+
+/* Popup content */
+.popup-content {
+    background-color: #CF2123; 
+    margin-top: 600px;
+    padding: 20px;
+    border: 1px solid #888;
+    width: 300px;
+    border-radius: 10px;
+    position: relative;
+    margin-right: 1300px;
+    margin-top:570px;
+}
+
+/* Close button */
+.close {
+    color: #073725;
+    float: right;
+    font-size: 28px;
+    font-weight: bold;
+    cursor: pointer;
+}
+
+.close:hover,
+.close:focus {
+    color: black;
+    text-decoration: none;
+}
+
+/* Hide the default Google Translate widget */
+.goog-te-banner-frame.skiptranslate, .goog-te-gadget-icon {
+    display: none !important;
+}
+
+body {
+    top: 0px !important;
+}
+
+/* Hide the "Powered by Google" branding */
+.goog-logo-link {
+    display: none !important;
+}
+
+.goog-te-gadget {
+    height: 28px !important;
+    overflow: hidden;
+}
+
+/* Hide Google Translate notifications */
+.goog-te-spinner-pos,
+.goog-te-spinner,
+.goog-te-balloon-frame,
+.goog-te-banner-frame,
+.goog-te-banner,
+.goog-te-balloon {
+    display: none !important;
+}
+
+/* Custom styles for the Google Translate dropdown */
+#google_translate_element select {
+    background: #ffffff; 
+    border: 1px solid #ccc; 
+    color: #CF2123; 
+    padding: 5px; 
+    font-size: 14px; 
+    border-radius: 5px; 
+}
+
+/* Hide the Google Translate bar */
+body > .skiptranslate {
+    display: none !important;
+}
+
+.goog-te-banner-frame.skiptranslate {
+    display: none !important;
+}
+.goog-te-banner-frame {
+    display: none !important;
+}
+.goog-te-banner {
+    display: none !important;
+}
\ No newline at end of file
diff --git a/Html-files/cart.html b/Html-files/cart.html
index 06247d9e..fb07e214 100644
--- a/Html-files/cart.html
+++ b/Html-files/cart.html
@@ -445,6 +445,7 @@ <h3 class="text-center mb-3">Contact Us!</h3>
             </div>
         </div>
     </div>
+    
 
     <div class="foot-panel2">
         <div class="media-handles pt-3 pb-2">
diff --git a/Html-files/googletranslate.js b/Html-files/googletranslate.js
new file mode 100644
index 00000000..b75411d2
--- /dev/null
+++ b/Html-files/googletranslate.js
@@ -0,0 +1,27 @@
+document.addEventListener('DOMContentLoaded', function() {
+    // Get the popup
+    var popup = document.getElementById('translatePopup');
+
+    // Get the button that opens the popup
+    var btn = document.getElementById('translateButton');
+
+    // Get the <span> element that closes the popup
+    var span = document.getElementsByClassName('close')[0];
+
+    // When the user clicks the button, open the popup 
+    btn.onclick = function() {
+        popup.style.display = 'block';
+    }
+
+    // When the user clicks on <span> (x), close the popup
+    span.onclick = function() {
+        popup.style.display = 'none';
+    }
+
+    // When the user clicks anywhere outside of the popup, close it
+    window.onclick = function(event) {
+        if (event.target == popup) {
+            popup.style.display = 'none';
+        }
+    }
+});
\ No newline at end of file
diff --git a/index.html b/index.html
index 31b5c779..7af92d77 100644
--- a/index.html
+++ b/index.html
@@ -32,6 +32,7 @@
     <link rel="stylesheet" href="Css-files/footer.css">
     <link rel="stylesheet" href="./style.css">
     <link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />
+    <link rel="stylesheet" href="Css-files/googletranslate.css">
     <style>
         .legal-pages {
             text-decoration: none;
@@ -976,6 +977,26 @@ <h4>Follow Us</h4>
             <path d="M440-160v-487L216-423l-56-57 320-320 320 320-56 57-224-224v487h-80Z" />
         </svg>
     </button>
+    <button id="translateButton">Translate</button>
+
+    <!-- Popup for Google Translate -->
+    <div id="translatePopup" class="popup">
+        <div class="popup-content">
+            <span class="close">&times;</span>
+            <div id="google_translate_element"></div>
+        </div>
+    </div>
+    <script type="text/javascript">
+      function googleTranslateElementInit() {
+          new google.translate.TranslateElement({
+              pageLanguage: 'en',
+          }, 'google_translate_element');
+      }
+  </script>
+  <script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
+
+  
+  <script src=../Html-files/googletranslate.js></script>
 
 
     <script src="https://unpkg.com/aos@next/dist/aos.js"></script>