Widget:Droflax

 <a href="#" data-lang="pt" title="Português">
   <img src="https://upload.wikimedia.org/wikipedia/en/0/05/Flag_of_Brazil.svg" width="32" height="24">
 </a>
 <a href="#" data-lang="es" title="Español">
   <img src="https://upload.wikimedia.org/wikipedia/en/9/9a/Flag_of_Spain.svg" width="32" height="24">
 </a>
 <a href="#" data-lang="en" title="English">
   <img src="https://upload.wikimedia.org/wikipedia/en/a/a4/Flag_of_the_United_States.svg" width="32" height="24">
 </a>
 <a href="#" data-lang="pl" title="Polski">
   <img src="https://upload.wikimedia.org/wikipedia/en/1/12/Flag_of_Poland.svg" width="32" height="24">
 </a>

<script> function setLang(lang) {

 // Cambiar descripción de skills
 document.querySelectorAll('.skill-icon').forEach(icon => {
   const idx = icon.dataset.index;
   console.log(icon);
   console.log(descBox);
   const descBox = document.querySelector('.skill-desc[data-index="' + idx + '"]');
   if(descBox) {
     // Accede correctamente a dataset camelCase
     const key = 'desc' + lang.charAt(0).toUpperCase() + lang.slice(1);
     descBox.textContent = icon.dataset[key] || icon.dataset.desc || ;
   }
 });

 // Cambiar nombre del personaje si existe
 document.querySelectorAll('.character-name-box').forEach(box => {
   const nameElem = box.querySelector('.character-name');
   if(nameElem) {
     const key = 'name' + lang.charAt(0).toUpperCase() + lang.slice(1);
     nameElem.textContent = box.dataset[key] || box.dataset.name || ;
   }
 });

}

// Espera a que el DOM esté listo document.addEventListener("DOMContentLoaded", function() {

 // Inicializa idioma por defecto
 setLang('pt');

 // Selector de banderas
 document.querySelectorAll('.language-switch a').forEach(link => {
   link.addEventListener('click', e => {
     e.preventDefault();
     const lang = link.dataset.lang || 'pt';
     setLang(lang);
   });
 });

}); </script>

<style> .language-switch {

 display: flex;
 gap: 6px;
 margin: 8px 0;

} .language-switch img {

 border: 1px solid #ccc;
 border-radius: 6px;
 cursor: pointer;
 transition: transform 0.2s ease, border-color 0.2s ease;

} .language-switch img:hover {

 transform: scale(1.1);
 border-color: #333;

} </style>