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
 
(183 revisões intermediárias por 3 usuários não estão sendo mostradas)
Linha 1: Linha 1:
<div class="map-container" id="map"></div>


<!-- Dados JSON injetados por Lua -->
<script type="application/json" id="mapa-dados">
  {{#invoke:Teste|data|mapa={{{mapa|Teste}}} }}
</script>
<script>
(function() {
  const data = JSON.parse(document.getElementById('mapa-dados').textContent);
  const skulls = data.skulls || [];
  const hearts = data.hearts || [];
  const puzzleButton = data.puzzle || {};
  const map = document.getElementById("map");
  // Caveiras
  skulls.forEach((skull) => {
    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";
    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);
  });
  // Corações
  hearts.forEach((heart) => {
    const icon = document.createElement("img");
    icon.src = "https://wiki.gla.com.br/images/a/ae/Pose.png";
    icon.className = "heart-icon";
    icon.style.left = heart.x + "px";
    icon.style.top = heart.y + "px";
    const popup = document.createElement("div");
    popup.className = "popup";
    const desc = heart.desc || "Pegue o coração para se curar";
    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);
  });
  // Puzzle
  if (puzzleButton && puzzleButton.x && puzzleButton.y) {
    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);
  }
})();
</script>
<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, .heart-icon, .puzzle-button {
  position: absolute;
  width: 26px;
  height: 26px;
  cursor: pointer;
  transition: transform 0.2s, filter 0.2s;
}
.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;
}
.popup iframe {
  border-radius: 6px;
  margin-top: 6px;
  max-width: 100%;
}
.skull-icon:hover,
.heart-icon:hover,
.puzzle-button:hover {
  transform: scale(1.3);
  filter: brightness(1.5);
}
</style>

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”