Mudanças entre as edições de "Usuário:Ttuzu"

De Wiki Gla
Ir para navegação Ir para pesquisar
(Adicionado estilo customizado com animações (fadeIn, bounce) e ajustes visuais em popups e iframes para melhorar a experiência visual ao interagir com ícones no mapa.)
 
(Limpou toda a página)
Etiqueta: anulando
 
Linha 1: Linha 1:
<div class="map-container" id="map"></div>


<script>
  const skulls = [
    { x: 410, y: 220, title: "White Skull", desc: "Boss: White Skull<br>Área sombria, cuidado com os ataques surpresa!", icon: "/images/d/dc/Whiteskull.png" },
    { x: 650, y: 125, title: "Red Fang", desc: "Boss: Red Fang<br>Possui resistência a fogo. Traga ataques de gelo!", icon: "/images/d/dc/Whiteskull.png" },
    { x: 250, y: 410, title: "Void Wraith", desc: "Boss: Void Wraith<br>Evite ataques diretos. Usa magia de sombras.", icon: "/images/d/dc/Whiteskull.png" },
    { x: 248, y: 320, title: "Night Howler", desc: "Boss: Night Howler<br>Ataca com velocidade e confusão. Use proteção contra atordoamento!", icon: "/images/d/dc/Whiteskull.png" },
  ];
  const hearts = [
    { x: 280, y: 210, title: "Cura", desc: "Cura escondida: Quebre a caixa para obter uma cura.", icon: "/images/d/d9/Heart.png" },
    { x: 312, y: 196, title: "Cura", desc: "Pegue o coração para se curar", icon: "/images/d/d9/Heart.png" },
    { x: 245, y: 358, title: "Cura", desc: "Após o chefe, o jogador com menos vida receberá uma cura automática.", icon: "/images/d/d9/Heart.png" },
  ];
  const puzzleButton = {
    x: 244,
    y: 217,
    title: "Desafio Puzzle",
    desc: `<iframe width="400" height="260" src="https://www.youtube.com/embed/10rhyP32vdw" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>`,
    icon: "/images/d/de/Engrenagem.png"
  };
  const map = document.getElementById("map");
  function createIconWithPopup({ x, y, icon, title, desc }, className) {
    const iconEl = document.createElement("img");
    iconEl.src = icon;
    iconEl.className = className;
    iconEl.alt = title;
    iconEl.title = title;
    iconEl.style.left = `${(x / 811) * 100}%`;
    iconEl.style.top = `${(y / 554) * 100}%`;
    const popup = document.createElement("div");
    popup.className = "popup";
    popup.innerHTML = `<strong>${title}</strong><br>${desc}`;
    popup.style.left = `calc(${(x / 811) * 100}% + 30px)`;
    popup.style.top = `calc(${(y / 554) * 100}% - 10px)`;
    iconEl.addEventListener("click", (e) => {
      e.stopPropagation();
      popup.style.display = popup.style.display === "block" ? "none" : "block";
      iconEl.classList.add("clicked");
      setTimeout(() => iconEl.classList.remove("clicked"), 300);
    });
    map.appendChild(iconEl);
    map.appendChild(popup);
  }
  skulls.forEach(skull => createIconWithPopup(skull, "skull-icon"));
  hearts.forEach(heart => createIconWithPopup(heart, "heart-icon"));
  createIconWithPopup(puzzleButton, "puzzle-button");
  document.addEventListener("click", () => {
    document.querySelectorAll(".popup").forEach(p => p.style.display = "none");
  });
  document.addEventListener("keydown", (e) => {
    if (e.key === "Escape") {
      document.querySelectorAll(".popup").forEach(p => p.style.display = "none");
    }
  });
</script>
<style>
  .map-container {
    position: relative;
    width: 100%;
    max-width: 811px;
    aspect-ratio: 811 / 554;
    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;
  }
  .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); }
  }
  .clicked {
    animation: bounce 0.3s ease-in-out;
  }
  @keyframes bounce {
    0%  { transform: scale(1); }
    50%  { transform: scale(1.4); }
    100% { transform: scale(1); }
  }
</style>

Edição atual tal como às 17h24min de 26 de junho de 2025

Disponível em “https://wiki.gla.com.br/index.php?title=Usuário:Ttuzu&oldid=36728”