Mudanças entre as edições de "Widget:Droflax"

De Wiki Gla
Ir para navegação Ir para pesquisar
(Limpou toda a página)
Etiqueta: anulando
Linha 1: Linha 1:
<!DOCTYPE html>
<html lang="pt">
<head>
  <meta charset="UTF-8">
  <title>Widget Idiomas con Skills</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      padding: 40px;
      background-color: #f9f9f9;
    }


    /* Widget de banderas */
    .language-buttons {
      position: fixed;
      top: 20px;
      right: 20px;
      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>
</head>
<body>
  <!-- Botones de banderas -->
  <div class="language-buttons">
    <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">
  </div>
  <!-- Ejemplo de bloque de skill generado por el Módulo:Skill -->
  <div class="skill-block"
      data-name-pt="Chute"
      data-name-en="Kick"
      data-name-es="Patada"
      data-name-pl="Kopnięcie"
      data-desc-pt="Kalifa desfere um chute poderoso."
      data-desc-en="Kalifa delivers a powerful kick."
      data-desc-es="Kalifa lanza una patada poderosa."
      data-desc-pl="Kalifa zadaje potężne kopnięcie.">
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/3f/Kick_icon.png/64px-Kick_icon.png" alt="">
    <div class="skill-name"></div>
    <div class="skill-desc"></div>
  </div>
  <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>
</html>

Edição das 04h13min de 27 de agosto de 2025

Disponível em “https://wiki.gla.com.br/index.php?title=Widget:Droflax&oldid=38153”