<style>
/* Style for the floating translate button */
#translate-button {
position: fixed;
top: 50px;
right: 0;
width: 30px; /* Very thin button */
height: 100px;
background: #007bff;
color: white;
border-radius: 5px 0 0 5px;
box-shadow: -2px 2px 5px rgba(0, 0, 0, 0.2);
display: flex;
align-items: center;
justify-content: center;
font-size: 12px;
font-weight: bold;
writing-mode: vertical-rl; /* Vertical text */
text-orientation: mixed;
cursor: pointer;
z-index: 999;
}
/* Style for the Google Translate dropdown */
#google_translate_element {
display: none;
position: fixed;
top: 50px;
right: 40px;
background: white;
padding: 5px;
box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.2);
border-radius: 5px;
z-index: 999;
}
</style>
<!-- Floating Translate Button -->
<div id="translate-button" onclick="toggleTranslate()">🌍<br>Translate</div>
<!-- Google Translate Widget -->
<div id="google_translate_element"></div>
<script>
let googleLoaded = false;
function loadGoogleTranslate() {
if (!googleLoaded) {
var script = document.createElement("script");
script.type = "text/javascript";
script.async = true;
script.src = "//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit";
document.body.appendChild(script);
googleLoaded = true;
}
}
function googleTranslateElementInit() {
new google.translate.TranslateElement(
{ pageLanguage: 'en', layout: google.translate.TranslateElement.InlineLayout.SIMPLE },
'google_translate_element'
);
}
function toggleTranslate() {
var el = document.getElementById("google_translate_element");
if (el.style.display === "none") {
el.style.display = "block";
loadGoogleTranslate();
} else {
el.style.display = "none";
}
}
document.addEventListener("DOMContentLoaded", function() {
document.getElementById("translate-button").addEventListener("mouseover", loadGoogleTranslate);
});
</script>