Widget:Teste

<script type="application/json" id="mapa-dados"></script>

<script> (function () {

 const data = JSON.parse(document.getElementById("mapa-dados").textContent);
 const skulls = data.skulls || [];
 const hearts = data.hearts || [];
 const puzzle = data.puzzle || {};
 const background = data.background || "/images/0/00/MapaDefault.png";

 const map = document.getElementById("map");
 map.style.backgroundImage = `url('${background}')`;

 // 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 = `${skull.title}
${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 = `Cura
${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 (puzzle.x && puzzle.y && puzzle.videoUrl) {
   const icon = document.createElement("img");
   icon.className = "puzzle-button";
   icon.src = "/images/d/de/Engrenagem.png";
   icon.style.left = puzzle.x + "px";
   icon.style.top = puzzle.y + "px";

   const popup = document.createElement("div");
   popup.className = "popup";
   popup.style.left = (puzzle.x + 60) + "px";
   popup.style.top = (puzzle.y - 10) + "px";
   popup.innerHTML = `
     Desafio Puzzle

     <iframe width="400" height="260"
       src="${puzzle.videoUrl}"
       frameborder="0"
       allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
       allowfullscreen>
     </iframe>
   `;

   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);
 }

})(); </script>

<style> .map-container {

 position: relative;
 width: 811px;
 height: 554px;
 background-size: cover;
 background-repeat: no-repeat;
 background-position: center center;

}

.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;

}

.puzzle-button {

 position: absolute;
 cursor: pointer;
 z-index: 999;
 width: 28px;
 height: 28px;
 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%;

}

@keyframes fadeIn {

 from { opacity: 0; transform: translateY(-5px); }
 to { opacity: 1; transform: translateY(0); }

} </style>