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() {

 function setLang(lang) {
   // Cambiar descripciones de skills
   document.querySelectorAll('.skill-icon').forEach(icon => {
     const idx = icon.dataset.index;
     const descBox = document.querySelector('.skill-desc[data-index="' + idx + '"]');
     if(descBox) {
       const key = 'desc' + lang.charAt(0).toUpperCase() + lang.slice(1);
       descBox.innerHTML = icon.dataset[key] || icon.dataset.desc || ;
     }
   });

   // Cambiar nombres de personajes
   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 || ;
     }
   });
 }

 // Esperar a que el DOM esté listo
 document.addEventListener("DOMContentLoaded", function() {
   // Inicializa idioma por defecto
   setLang('pt');

   // Listener para 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>