fixed languagebox

frontend/index.html

@@ -59,7 +59,9 @@
             top: 70px;
             /* Adjust based on your navbar height */
             left: 20px;
-            background-color: #3b82f6;
+            --tw-bg-opacity: 1;
+            background-color: rgb(59 130 246 / var(--tw-bg-opacity));
+
             color: white;
             border-radius: 50%;
             width: 50px;
@@ -96,7 +98,7 @@
 
         /* Modal Content */
         .modal-content {
-            background-color: #3b82f6;
+            background-color: #4d90fe;
             padding: 20px;
             border-radius: 8px;
             box-shadow: 0px 8px 12px rgba(0, 0, 0, 0.2);
@@ -121,11 +123,11 @@
         }
 
         /* Close Button */
-        .close-btn {
+        /* .close-btn {
             position: absolute;
             top: 10px;
             right: 10px;
-            background-color: #f87171;
+            background-color: #ff0909;
             color: white;
             border: none;
             border-radius: 50%;
@@ -136,13 +138,13 @@
             align-items: center;
             cursor: pointer;
             z-index: 1001;
-        }
+        } */
 
-        /* Google Translate Element Styling */
+        /* Google Translate Element Styling
         #google_translate_element {
             margin-top: 20px;
             text-align: center;
-        }
+        } */
 
         .chatbot {
             position: fixed;
@@ -401,9 +403,9 @@
     <div class="circle"></div>
     <div class="circle"></div>
     <div class="circle"></div>
-    <div id="languageIcon" title="Change Language">
-        🌐 <!-- This is the icon for language, you can replace this with any icon (SVG, FontAwesome, etc.) -->
-    </div>
+    <!-- <div id="languageIcon" title="Change Language">
+        🌐 
+    </div> -->
     <!-- <div class="chatbot-container"></div>
     <div class="chatbot" id="chatbotIcon">
         <img src="https://cdn-icons-png.flaticon.com/512/8943/8943377.png" alt="Chatbot Icon" />
@@ -515,16 +517,15 @@ <h3>Saarthi</h3>
 
 
 
-   <div id="google_translate_modal" class="flex">
+   <!-- <div id="google_translate_modal" class="flex">
     <div class="modal-content">
-        <!-- Close Button -->
+
         <button class="close-btn" id="closeBtn">✖</button>
 
-        <!-- Google Translate Widget -->
         <div id="google_translate_element"></div>
     </div>
-</div>
-
+</div> -->
+<!-- 
 <script type="text/javascript">
     function googleTranslateElementInit() {
         new google.translate.TranslateElement({ pageLanguage: 'en' }, 'google_translate_element');
@@ -533,7 +534,7 @@ <h3>Saarthi</h3>
 <script type="text/javascript"
     src="https://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
 
-<!-- JavaScript for toggling modal -->
+
 <script>
     const circle = document.querySelector('.circle');
 
@@ -596,7 +597,7 @@ <h3>Saarthi</h3>
         });
     });
 
-</script>
+</script> -->
 
      <div id="root"></div>
      <script type="module" src="/src/main.jsx"></script>

frontend/package.json

@@ -16,6 +16,7 @@
     "axios": "^1.7.7",
     "dotenv": "^16.4.5",
     "framer-motion": "^11.11.8",
+    "google-translate-api-x": "^10.7.1",
     "jwt-decode": "^4.0.0",
     "react": "^18.3.1",
     "react-datepicker": "^7.4.0",

frontend/src/Pages/Herosection.jsx

@@ -14,6 +14,7 @@ import contributorsvg from '../assets/svg/contributor.svg';
 import chatbotsvg from '../assets/svg/chatbot.svg';
 import Chatbot from '../components/chatbot';
 import Navbar from '../components/navbar';
+import Language from '../components/language';
 const Herosection = () => {
     const navigate = useNavigate();
 
@@ -53,6 +54,7 @@ const Herosection = () => {
                 <div><Navbar /></div>
                 <div><HamburgerMenu/></div>
             </div>
+            <Language/>
             <h1 className='pl-4 text-4xl font-black text-center text-white '>Namaste !! Yatree </h1>
             <div className="relative flex items-center justify-center bg-center bg-cover herosection">
 

frontend/src/components/language.css

@@ -0,0 +1,72 @@
+#languageIcon {
+    position: fixed;
+    top: 70px;
+    left: 20px;
+    --tw-bg-opacity: 1;
+    background-color: rgb(59 130 246 / var(--tw-bg-opacity));
+    color: white;
+    border-radius: 50%;
+    width: 50px;
+    height: 50px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    cursor: pointer;
+    z-index: 999;
+    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
+    transition: background-color 0.3s ease-in-out;
+}
+
+#languageIcon:hover {
+    background-color: #2563eb;
+}
+
+#google_translate_modal {
+    display: flex;
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.5);
+    justify-content: center;
+    align-items: center;
+    z-index: 1000;
+}
+
+.modal-content {
+    background-color: #4d90fe;
+    padding: 20px;
+    border-radius: 8px;
+    box-shadow: 0px 8px 12px rgba(0, 0, 0, 0.2);
+    position: relative;
+    width: 80%;
+    max-width: 500px;
+    padding: 10px 15px;
+    color: #fff;
+    font-family: 'Arial', sans-serif;
+    font-size: 14px;
+    cursor: pointer;
+}
+
+.close-btn {
+    position: absolute;
+    top: 10px;
+    right: 10px;
+    background-color: #ff0909;
+    color: white;
+    border: none;
+    border-radius: 50%;
+    width: 30px;
+    height: 30px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    cursor: pointer;
+    z-index: 1001;
+}
+
+#google_translate_element {
+    margin-top: 20px;
+    text-align: center;
+}

frontend/src/components/language.jsx

@@ -0,0 +1,65 @@
+import React, { useState } from 'react';
+import translate from 'google-translate-api-x'; // Importing google-translate-api-x
+import './language.css'; // Assuming you have your styles in this file
+
+const Language = () => {
+    const [modalVisible, setModalVisible] = useState(false);
+    const [languageCode, setLanguageCode] = useState('en'); // Default language is English
+
+    // Function to handle language selection
+    const handleLanguageChange = async (e) => {
+        const selectedLanguage = e.target.value;
+        setLanguageCode(selectedLanguage);
+
+        // Get all elements that need translation (for simplicity, we assume all text elements)
+        const elementsToTranslate = document.querySelectorAll('[data-translate]');
+
+        elementsToTranslate.forEach(async (element) => {
+            try {
+                const originalText = element.getAttribute('data-original-text') || element.innerText;
+                element.setAttribute('data-original-text', originalText); // Store original text
+                const res = await translate(originalText, { to: selectedLanguage });
+                element.innerText = res.text; // Set translated text
+            } catch (error) {
+                console.error('Translation error:', error);
+            }
+        });
+    };
+
+    // Function to toggle modal visibility
+    const toggleModal = () => {
+        setModalVisible(!modalVisible);
+    };
+
+    return (
+        <>
+            {/* Language Icon */}
+            <div id="languageIcon" title="Change Language" onClick={toggleModal}>
+                🌐
+            </div>
+
+            {/* Modal to select language */}
+            {modalVisible && (
+                <div id="google_translate_modal" className="flex" onClick={toggleModal}>
+                    <div className="modal-content" onClick={(e) => e.stopPropagation()}>
+                        {/* Close Button */}
+                        <button className="close-btn" onClick={toggleModal}>✖</button>
+
+                        {/* Language Selection */}
+                        <h3>Select Language</h3>
+                        <select value={languageCode} onChange={handleLanguageChange} className='text-black'>
+                            <option value="en">English</option>
+                            <option value="es">Spanish</option>
+                            <option value="fr">French</option>
+                            <option value="de">German</option>
+                            <option value="hi">Hindi</option>
+                            {/* Add more language options as needed */}
+                        </select>
+                    </div>
+                </div>
+            )}
+        </>
+    );
+};
+
+export default Language;