diff --git a/frontend/index.html b/frontend/index.html index e290874..4b1bdea 100644 --- a/frontend/index.html +++ b/frontend/index.html @@ -259,6 +259,52 @@ 50% { opacity: 1; } +/* Basic reset */ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +/* Search Container */ +.search-container { + display: flex; + align-items: center; + border: 1px solid #ccc; + border-radius: 5px; + padding: 10px; + width: 300px; + margin: 20px auto; +} + +/* SVG Icon Styling */ +.icon { + margin-right: 10px; + color: #888; + font-size: 1.5em; +} + +/* Input Styling */ +.search-input { + border: none; + outline: none; + width: 100%; + font-size: 1em; + color: #333; +} + +.search-input::placeholder { + color: #aaa; +} + +/* Focus Effect */ +.search-input:focus + .icon { + color: #007bff; +} + +.search-container:hover { + border-color: #007bff; +} } @@ -330,6 +376,19 @@

Saarthi

welcomeMessageDisplayed = true; // Set the flag to true after displaying the message } }); +

Hello, World!

+

This is a multilingual website example.

+ + // Language Selection --> + + + // Predefined questions and answers // Predefined questions and answers @@ -404,7 +463,7 @@

Saarthi

} }); - --> + @@ -557,31 +616,47 @@

Saarthi

requestAnimationFrame(animateCircles); } // Start the animation - animateCircles(); - - + animateCircles() + +
+ + stroke="currentColor" + fill="currentColor" + stroke-width="0" + viewBox="0 0 512 512" + class="icon" + height="1em" + width="1em" + > + + + +
+ + - - - - +// +// +// +// diff --git a/frontend/placeholder.jsx b/frontend/placeholder.jsx new file mode 100644 index 0000000..54e7bfc --- /dev/null +++ b/frontend/placeholder.jsx @@ -0,0 +1,27 @@ +import React from 'react'; + +const SearchBar = () => { + return ( +
+ + + + +
+ ); +}; + +export default SearchBar; diff --git a/frontend/src/components/language.jsx b/frontend/src/components/language.jsx index d1341c5..f8fa840 100644 --- a/frontend/src/components/language.jsx +++ b/frontend/src/components/language.jsx @@ -1,65 +1,89 @@ -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 +// 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 +// 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); +// // 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]'); +// // 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); - } - }); - }; +// 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); - }; +// // Function to toggle modal visibility +// const toggleModal = () => { +// setModalVisible(!modalVisible); +// }; - return ( - <> - {/* Language Icon */} -
- 🌐 -
+// return ( +// <> +// {/* Language Icon */} +//
+// 🌐 +//
- {/* Modal to select language */} - {modalVisible && ( -
-
e.stopPropagation()}> - {/* Close Button */} - +// {/* Modal to select language */} +// {modalVisible && ( +//
+//
e.stopPropagation()}> +// {/* Close Button */} +// - {/* Language Selection */} -

Select Language

- -
-
- )} - - ); +// {/* Language Selection */} +//

Select Language

+// +//
+//
+// )} +// +// ); +// }; + +// export default Language; +const apiKey = "YOUR_API_KEY"; +const translateText = (text, targetLang) => { + return fetch(`https://translation.googleapis.com/language/translate/v2?key=${apiKey}`, { + method: "POST", + headers: { "Content-Type": "application/json" }, + body: JSON.stringify({ + q: text, + target: targetLang, + }), + }) + .then(response => response.json()) + .then(data => data.data.translations[0].translatedText) + .catch(error => console.error("Error:", error)); }; -export default Language; +document.getElementById("language-select").addEventListener("change", async (event) => { + const targetLang = event.target.value; + const title = document.getElementById("title"); + const content = document.getElementById("content"); + + // Translate each element's text + title.innerText = await translateText(title.innerText, targetLang); + content.innerText = await translateText(content.innerText, targetLang); +});