Widget:Droflax

<style>

   body {
     font-family: Arial, sans-serif;
     padding: 40px;
     background-color: #f9f9f9;
   }

   /* Widget de banderas */
   .language-buttons {
     position: fixed;
     top: 20px;
     right: 40%;
     display: flex;
     gap: 10px;
     background-color: #ffffffcc;
     padding: 6px 10px;
     border-radius: 8px;
     box-shadow: 0 0 6px rgba(0, 0, 0, 0.2);
     z-index: 999;
   }

   .language-buttons img {
     width: 40px;
     height: 28px;
     border-radius: 6px;
     border: 1px solid #ccc;
     transition: transform 0.2s ease;
     object-fit: cover;
   }

   .language-buttons img:hover {
     transform: scale(1.1);
     cursor: pointer;
     border-color: #888;
   }

   /* Bloques de skill */
   .skill-block {
     margin-top: 40px;
     padding: 16px;
     border-radius: 10px;
     background: #fff;
     box-shadow: 0 2px 8px rgba(0,0,0,0.1);
     max-width: 400px;
   }

   .skill-block img {
     width: 64px;
     height: 64px;
     display: block;
     margin-bottom: 8px;
   }

   .skill-name {
     font-weight: bold;
     font-size: 1.2em;
     margin-bottom: 6px;
   }

   .skill-desc {
     font-size: 0.95em;
     color: #333;
   }

</style> <body>

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

   <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/3f/Kick_icon.png/64px-Kick_icon.png" alt="">

 <script>
   // Actualiza todos los textos según el idioma activo en <html lang="">
   function updateTextsByLang() {
     const lang = document.documentElement.getAttribute("lang") || "pt";

     document.querySelectorAll(".skill-block").forEach(block => {
       const name = block.getAttribute("data-name-" + lang);
       const desc = block.getAttribute("data-desc-" + lang);

       const nameBox = block.querySelector(".skill-name");
       const descBox = block.querySelector(".skill-desc");
       const img = block.querySelector("img");

       if (nameBox && name) nameBox.textContent = name;
       if (descBox && desc) descBox.textContent = desc;
       if (img && name) img.setAttribute("alt", name);
     });
   }

   // Escuchar clics en las banderas
   document.querySelectorAll(".flag-btn").forEach(btn => {
     btn.addEventListener("click", () => {
       document.documentElement.setAttribute("lang", btn.dataset.lang);
       updateTextsByLang();
     });
   });

   // Inicializar al cargar la página
   updateTextsByLang();
 </script>

</body>

Widget:Droflax

Menu de navegação

Pesquisa