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

De Wiki Gla
Ir para navegação Ir para pesquisar
m
m (Limpou toda a página)
Etiquetas: Reversão manual anulando
 
(180 revisões intermediárias por 3 usuários não estão sendo mostradas)
Linha 1: Linha 1:
  <div class="map-container" id="map">
    <!-- Caveiras e elementos serão inseridos via JS -->
  </div>


  <script>
    const skulls = [
      {
        x: 410, y: 220,
        title: "White Skull",
        desc: "Boss: White Skull<br>Área sombria, cuidado com os ataques surpresa!"
      },
      {
        x: 650, y: 125,
        title: "Red Fang",
        desc: "Boss: Red Fang<br>Possui resistência a fogo. Traga ataques de gelo!"
      },
      {
        x: 250, y: 410,
        title: "Void Wraith",
        desc: "Boss: Void Wraith<br>Evite ataques diretos. Usa magia de sombras."
      },
      {
        x: 248, y: 320,
        title: "Night Howler",
        desc: "Boss: Night Howler<br>Ataca com velocidade e confusão. Use proteção contra atordoamento!"
      }
    ];
    const hearts = [
      { x: 280, y: 210, desc: "Cura escondida: Quebre a caixa para obter uma cura." },
      { x: 312, y: 196 },
      { x: 245, y: 358, desc: "Após o chefe, o jogador com menos vida receberá uma cura automática." }
    ];
    const puzzleButton = {
      x: 244,
      y: 217,
      videoUrl: "https://www.youtube.com/embed/10rhyP32vdw"
    };
    const map = document.getElementById("map");
    // Adiciona as caveiras
    skulls.forEach((skull, index) => {
      const icon = document.createElement("img");
      icon.src = "/images/d/dc/Whiteskull.png";
      icon.className = "skull-icon";
      icon.style.left = skull.x + "px";
      icon.style.top = skull.y + "px";
      icon.dataset.index = index;
      const popup = document.createElement("div");
      popup.className = "popup";
      popup.innerHTML = `<strong>${skull.title}</strong><br>${skull.desc}`;
      popup.style.left = (skull.x + 30) + "px";
      popup.style.top = (skull.y - 10) + "px";
      icon.addEventListener("click", () => {
        popup.style.display = popup.style.display === "block" ? "none" : "block";
      });
      document.addEventListener("click", (e) => {
        if (!icon.contains(e.target) && !popup.contains(e.target)) {
          popup.style.display = "none";
        }
      });
      map.appendChild(icon);
      map.appendChild(popup);
    });
    // Adiciona os corações
    hearts.forEach((heart, index) => {
      const icon = document.createElement("img");
      const desc = heart.desc || "Pegue o coração para se curar";
      icon.src = "/images/d/d9/Heart.png";
      icon.className = "heart-icon";
      icon.style.left = heart.x + "px";
      icon.style.top = heart.y + "px";
      icon.dataset.index = index;
      const popup = document.createElement("div");
      popup.className = "popup";
      popup.innerHTML = `<strong>Cura</strong><br>${desc}`;
      popup.style.left = (heart.x + 30) + "px";
      popup.style.top = (heart.y - 10) + "px";
      icon.addEventListener("click", () => {
        popup.style.display = popup.style.display === "block" ? "none" : "block";
      });
      document.addEventListener("click", (e) => {
        if (!icon.contains(e.target) && !popup.contains(e.target)) {
          popup.style.display = "none";
        }
      });
      map.appendChild(icon);
      map.appendChild(popup);
    });
    // Ícone do Puzzle
    const button = document.createElement("img");
    button.className = "puzzle-button";
    button.src = "/images/d/de/Engrenagem.png";
    button.alt = "Puzzle";
    button.style.left = puzzleButton.x + "px";
    button.style.top = puzzleButton.y + "px";
    const popup = document.createElement("div");
    popup.className = "popup";
    popup.style.left = (puzzleButton.x + 60) + "px";
    popup.style.top = (puzzleButton.y - 10) + "px";
    popup.innerHTML = `
      <strong>Desafio Puzzle</strong><br>
      <iframe width="400" height="260"
        src="${puzzleButton.videoUrl}"
        frameborder="0"
        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
        allowfullscreen>
      </iframe>
    `;
    button.addEventListener("click", () => {
      popup.style.display = popup.style.display === "block" ? "none" : "block";
    });
    document.addEventListener("click", (e) => {
      if (!button.contains(e.target) && !popup.contains(e.target)) {
        popup.style.display = "none";
      }
    });
    map.appendChild(button);
    map.appendChild(popup);
// CSS
    document.head.insertAdjacentHTML('beforeend', `
  <style>
    .map-container {
      position: relative;
      width: 811px;
      height: 554px;
      background: url('/images/5/55/SabaodyMap.png') no-repeat center center;
      background-size: cover;
    }
    .skull-icon {
      position: absolute;
      width: 24px;
      height: 24px;
      cursor: pointer;
      transition: transform 0.2s, filter 0.2s;
    }
    .heart-icon {
      position: absolute;
      width: 26px;
      height: 26px;
      padding: 1px;
      cursor: pointer;
      transition: transform 0.2s, filter 0.2s;
    }
    .skull-icon:hover,
    .heart-icon:hover,
    .puzzle-button:hover {
      transform: scale(1.3);
      filter: brightness(1.5);
    }
    .popup {
      position: absolute;
      background: #1e1e1e;
      color: #fff;
      padding: 10px 14px;
      border-radius: 8px;
      border: 1px solid #444;
      box-shadow: 0 0 10px rgba(255, 255, 255, 0.1);
      display: none;
      z-index: 10;
      max-width: 500px;
      font-size: 14px;
      animation: fadeIn 0.3s ease-out;
    }
    .popup iframe {
      border-radius: 6px;
      margin-top: 6px;
      max-width: 100%;
    }
    .puzzle-button {
      position: absolute;
      cursor: pointer;
      z-index: 999;
      width: 28px;
      height: 28px;
      transition: transform 0.2s, filter 0.2s;
    }
    @keyframes fadeIn {
      from { opacity: 0; transform: translateY(-5px); }
      to { opacity: 1; transform: translateY(0); }
    }
  </style>
  `);
</script>

Edição atual tal como às 19h10min de 12 de setembro de 2025

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