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

 const langKey = lang.charAt(0).toUpperCase() + lang.slice(1); // 'Pt', 'Es', 'En', 'Pl'

 // Cambiar descripción de skills
 document.querySelectorAll('.skill-icon').forEach(icon => {
   const idx = icon.dataset.index;
   const descBox = document.querySelector('.skill-desc[data-index="' + idx + '"]');
   if (descBox) {
     // Usa el desc del idioma seleccionado, si no existe usa pt como fallback
     descBox.textContent = icon.dataset['desc' + langKey] || icon.dataset.descPt;
   }
 });

 // Cambiar nombre del personaje si existe
 document.querySelectorAll('.character-name-box').forEach(box => {
   const nameElem = box.querySelector('.character-name');
   if (nameElem) {
     // Usa el name del idioma seleccionado, si no existe usa el valor actual
     const newName = box.dataset['name' + langKey] || nameElem.textContent;
     nameElem.textContent = newName;
   }
 });

}

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

 const savedLang = localStorage.getItem('preferedLang') || 'pt';
 setLang(savedLang);

 // Selector de banderas
 document.querySelectorAll('.language-switch a').forEach(link => {
   link.addEventListener('click', e => {
     e.preventDefault();
     const lang = link.dataset.lang;
     setLang(lang);
     localStorage.setItem('preferedLang', 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>