Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: Made the changes for the google transulate #1176

Merged
merged 10 commits into from
Jul 27, 2024
66 changes: 55 additions & 11 deletions index.html
Original file line number Diff line number Diff line change
Expand Up @@ -1528,17 +1528,43 @@ <h4>Contact Us</h4>

</div>

<div class="footer__col">
<div id="google_element"></div>
<script src="https://translate.google.com/translate_a/element.js?cb=loadGoogleTranslate"></script>
<script>
function loadGoogleTranslate() {
new google.translate.TranslateElement({
pageLanguage: 'en'
}, 'google_element');
}
</script>
<!-- <div class="footer__col">
<label for="google_translate_element" style="display: block; font-weight: bold; margin-bottom: 5px;">Select Language:</label>
<div id="google_translate_element" style="display: inline-block; margin-top: 10px;"></div>
</div>

<script>
function googleTranslateElementInit() {
new google.translate.TranslateElement({
pageLanguage: 'en',
includedLanguages: 'es,fr,de,ja,ko,zh-CN',
layout: google.translate.TranslateElement.InlineLayout.SIMPLE,
autoDisplay: false,
gaTrack: true,
gaId: 'UA-XXXXXXXX-X'
}, 'google_translate_element');
}
</script>
<script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>

<script>
// Apply inline styling to the select element once it is created by Google Translate
window.addEventListener('load', function() {
var interval = setInterval(function() {
var select = document.querySelector('#google_translate_element select');
if (select) {
select.style.padding = '5px';
select.style.border = '1px solid #ccc';
select.style.borderRadius = '0'; // Remove rounded corners to make it rectangular
select.style.appearance = 'none'; // Remove default styling
select.style.backgroundColor = '#fff';
select.style.cursor = 'pointer';
clearInterval(interval); // Stop the interval once the select element is found and styled
}
}, 100); // Check every 100ms
});
</script> -->



<!-- New copyright code to make it dynamic and display current year -->
Expand All @@ -1549,7 +1575,25 @@ <h4>Contact Us</h4>
</div>

</footer>

<div style="padding: 5px; background-color: #f8f9fa; border-radius: 10px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);">
<label for="google_translate_element" style="display: block; font-weight: bold; margin-bottom: 10px; font-size: 18px; color: #333;">Select Language:</label>
<div id="google_translate_element" style="display: inline-block; margin-top: 10px; padding: 10px; border: 1px solid #ccc; border-radius: 5px; background-color: #fff;"></div>
</div>

<style>
.goog-logo-link,
.goog-te-gadget span {
display: none !important;
}
</style>

<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>

<a class="goupbtn" href="#" onclick="goToTop()"><i class="fa-solid fa-arrow-up"></i></a>

<script>
Expand Down
Loading