diff --git a/frontend/index.html b/frontend/index.html index dfb9f50..574f51a 100644 --- a/frontend/index.html +++ b/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 @@
-
- 🌐 -
+ + -
- - + --> + + + -->
diff --git a/frontend/package-lock.json b/frontend/package-lock.json index cf041e7..1a132be 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -13,6 +13,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", @@ -3733,6 +3734,19 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/google-translate-api-x": { + "version": "10.7.1", + "resolved": "https://registry.npmjs.org/google-translate-api-x/-/google-translate-api-x-10.7.1.tgz", + "integrity": "sha512-OdZDS6jRWzn1woOk62aOKQ5OyVaJSA+eyc6CktOWxo36IWfstOjwG/dkvnGl3Z2Sbpmk1A+jc2WwrBiRjqaY2A==", + "license": "MIT", + "engines": { + "node": ">=14.0.0" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/AidanWelch" + } + }, "node_modules/gopd": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.0.1.tgz", diff --git a/frontend/package.json b/frontend/package.json index 7f1b3cf..016ce72 100644 --- a/frontend/package.json +++ b/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", diff --git a/frontend/src/Pages/Herosection.jsx b/frontend/src/Pages/Herosection.jsx index 8f3879d..07acf86 100644 --- a/frontend/src/Pages/Herosection.jsx +++ b/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 = () => {
+

Namaste !! Yatree

diff --git a/frontend/src/components/language.css b/frontend/src/components/language.css new file mode 100644 index 0000000..e105c20 --- /dev/null +++ b/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; +} diff --git a/frontend/src/components/language.jsx b/frontend/src/components/language.jsx new file mode 100644 index 0000000..d1341c5 --- /dev/null +++ b/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 */} +
+ 🌐 +
+ + {/* Modal to select language */} + {modalVisible && ( +
+
e.stopPropagation()}> + {/* Close Button */} + + + {/* Language Selection */} +

Select Language

+ +
+
+ )} + + ); +}; + +export default Language;