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

De Wiki Gla
Ir para navegação Ir para pesquisar
m
m
 
(203 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>
<style>
 
    .island-grid {
<script type="application/json" id="mapa-dados">{{#invoke:MapaInterativo|data|mapa={{{mapa|Sabaody}}} }}</script>
        display: flex;
 
        flex-wrap: wrap;
<script>
        justify-content: center;
(function () {
        gap: 10px;
  const data = JSON.parse(document.getElementById("mapa-dados").textContent);
        padding: 12px 0;
  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 = `<strong>${skull.title}</strong><br>${skull.desc}`;
    popup.style.left = (skull.x + 30) + "px";
    popup.style.top = (skull.y - 10) + "px";


     icon.addEventListener("click", () => {
     .island-banner {
      popup.style.display = popup.style.display === "block" ? "none" : "block";
        position: relative;
     });
        width: 380px;
        height: 90px;
        overflow: hidden;
        border-radius: 8px;
        box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 10px;
        cursor: pointer;
        transition: transform 0.15s, box-shadow 0.15s;
        display: block;
        box-sizing: border-box;
     }


     document.addEventListener("click", (e) => {
     .island-banner::before {
      if (!icon.contains(e.target) && !popup.contains(e.target)) {
        content: "";
         popup.style.display = "none";
        position: absolute;
      }
        top: 0;
     });
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(105deg, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0.35) 40%, rgba(0, 0, 0, 0.1) 70%, transparent 100%);
         pointer-events: none;
        z-index: 1;
     }


     map.appendChild(icon);
     .island-banner:hover {
    map.appendChild(popup);
        transform: translateY(-2px);
  });
        box-shadow: rgba(0, 0, 0, 0.35) 0px 4px 12px;
    }


  // Corações
    .island-banner .island-chests {
  hearts.forEach((heart) => {
        position: absolute;
    const icon = document.createElement("img");
        top: 8px;
    icon.src = "https://wiki.gla.com.br/images/a/ae/Pose.png";
        left: 8px;
    icon.className = "heart-icon";
        display: flex;
    icon.style.left = heart.x + "px";
        flex-wrap: wrap;
     icon.style.top = heart.y + "px";
        gap: 6px;
        z-index: 2;
        pointer-events: none;
     }


     const popup = document.createElement("div");
     .island-banner .island-chest-group {
    popup.className = "popup";
        position: relative;
    const desc = heart.desc || "Pegue o coração para se curar";
        display: inline-block;
     popup.innerHTML = `<strong>Cura</strong><br>${desc}`;
     }
    popup.style.left = (heart.x + 30) + "px";
    popup.style.top = (heart.y - 10) + "px";


     icon.addEventListener("click", () => {
     .island-banner .island-chest-group img {
      popup.style.display = popup.style.display === "block" ? "none" : "block";
        display: block;
     });
        width: auto;
        height: auto;
     }


     document.addEventListener("click", (e) => {
     .island-banner .island-chest-count {
      if (!icon.contains(e.target) && !popup.contains(e.target)) {
     position: absolute;
        popup.style.display = "none";
     left: 0;         /* era right: 0 */
      }
     bottom: 0;
     });
     font-size: 12.5px; /* era 11px */
 
     font-weight: bold;
     map.appendChild(icon);
     color: #fff;
    map.appendChild(popup);
     background: rgba(0, 0, 0, 0.75);
  });
     padding: 1px 3px;
 
     border-radius: 3px;
  // Puzzle
    line-height: 1;
  if (puzzle.x && puzzle.y && puzzle.videoUrl) {
    white-space: nowrap;
     const icon = document.createElement("img");
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
     icon.className = "puzzle-button";
    z-index: 10;
    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 = `
      <strong>Desafio Puzzle</strong><br>
      <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 {
    .island-banner .island-title {
  position: absolute;
        position: absolute;
  background: #1e1e1e;
        bottom: 10px;
  color: #fff;
        left: 8px;
  padding: 10px 14px;
        font-size: 1.35em;
  border-radius: 8px;
        font-weight: bold;
  border: 1px solid #444;
        color: #fff;
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.1);
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8), 0 2px 4px rgba(0, 0, 0, 0.5);
  display: none;
        line-height: 1.2;
  z-index: 10;
        z-index: 2;
  max-width: 500px;
        pointer-events: none;
  font-size: 14px;
        text-transform: uppercase;
  animation: fadeIn 0.3s ease-out;
    }
}


.popup iframe {
    @media (max-width: 768px) {
  border-radius: 6px;
        .island-grid {
  margin-top: 6px;
            flex-direction: column;
  max-width: 100%;
            align-items: stretch;
}
        }


@keyframes fadeIn {
        .island-banner {
  from { opacity: 0; transform: translateY(-5px); }
            width: 100%;
  to { opacity: 1; transform: translateY(0); }
            max-width: none;
}
        }
    }
</style>
</style>
<script>
    (function () {
        function applyBackgrounds() {
            document.querySelectorAll('.island-banner[data-bgimg]').forEach(function (el) {
                var filename = el.getAttribute('data-bgimg');
                if (!filename) return;
                var url;
                if (typeof mw !== 'undefined' && mw.util && mw.util.getUrl) {
                    url = mw.util.getUrl('Especial:FilePath/' + filename);
                } else {
                    url = '/index.php?title=Especial:FilePath/' + encodeURIComponent(filename);
                }
                el.style.backgroundImage = 'url(' + url + ')';
                el.style.backgroundSize = 'cover';
                el.style.backgroundPosition = 'center';
                el.style.backgroundRepeat = 'no-repeat';
            });
        }
        function initClickable() {
            document.querySelectorAll('.island-banner[data-href]').forEach(function (el) {
                if (el._icClick) return;
                el._icClick = true;
                el.setAttribute('role', 'link');
                el.setAttribute('tabindex', '0');
                el.addEventListener('click', function () {
                    var href = el.getAttribute('data-href');
                    if (href) window.location.href = href;
                });
                el.addEventListener('keydown', function (e) {
                    if (e.key === 'Enter' || e.key === ' ') {
                        e.preventDefault();
                        var href = el.getAttribute('data-href');
                        if (href) window.location.href = href;
                    }
                });
            });
        }
        function run() {
            applyBackgrounds();
            initClickable();
        }
        if (document.readyState === 'loading') {
            document.addEventListener('DOMContentLoaded', run);
        } else {
            run();
        }
    })();
</script>

Edição atual tal como às 00h06min de 13 de março de 2026

<style> 

   .island-grid {
       display: flex;
       flex-wrap: wrap;
       justify-content: center;
       gap: 10px;
       padding: 12px 0;
   }

   .island-banner {
       position: relative;
       width: 380px;
       height: 90px;
       overflow: hidden;
       border-radius: 8px;
       box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 10px;
       cursor: pointer;
       transition: transform 0.15s, box-shadow 0.15s;
       display: block;
       box-sizing: border-box;
   }

   .island-banner::before {
       content: "";
       position: absolute;
       top: 0;
       left: 0;
       right: 0;
       bottom: 0;
       background: linear-gradient(105deg, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0.35) 40%, rgba(0, 0, 0, 0.1) 70%, transparent 100%);
       pointer-events: none;
       z-index: 1;
   }

   .island-banner:hover {
       transform: translateY(-2px);
       box-shadow: rgba(0, 0, 0, 0.35) 0px 4px 12px;
   }

   .island-banner .island-chests {
       position: absolute;
       top: 8px;
       left: 8px;
       display: flex;
       flex-wrap: wrap;
       gap: 6px;
       z-index: 2;
       pointer-events: none;
   }

   .island-banner .island-chest-group {
       position: relative;
       display: inline-block;
   }

   .island-banner .island-chest-group img {
       display: block;
       width: auto;
       height: auto;
   }

   .island-banner .island-chest-count {
   position: absolute;
   left: 0;          /* era right: 0 */
   bottom: 0;
   font-size: 12.5px;  /* era 11px */
   font-weight: bold;
   color: #fff;
   background: rgba(0, 0, 0, 0.75);
   padding: 1px 3px;
   border-radius: 3px;
   line-height: 1;
   white-space: nowrap;
   box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
   z-index: 10;

} 

   .island-banner .island-title {
       position: absolute;
       bottom: 10px;
       left: 8px;
       font-size: 1.35em;
       font-weight: bold;
       color: #fff;
       text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8), 0 2px 4px rgba(0, 0, 0, 0.5);
       line-height: 1.2;
       z-index: 2;
       pointer-events: none;
       text-transform: uppercase;
   }

   @media (max-width: 768px) {
       .island-grid {
           flex-direction: column;
           align-items: stretch;
       }

       .island-banner {
           width: 100%;
           max-width: none;
       }
   }

</style> <script> 

   (function () {
       function applyBackgrounds() {
           document.querySelectorAll('.island-banner[data-bgimg]').forEach(function (el) {
               var filename = el.getAttribute('data-bgimg');
               if (!filename) return;
               var url;
               if (typeof mw !== 'undefined' && mw.util && mw.util.getUrl) {
                   url = mw.util.getUrl('Especial:FilePath/' + filename);
               } else {
                   url = '/index.php?title=Especial:FilePath/' + encodeURIComponent(filename);
               }
               el.style.backgroundImage = 'url(' + url + ')';
               el.style.backgroundSize = 'cover';
               el.style.backgroundPosition = 'center';
               el.style.backgroundRepeat = 'no-repeat';
           });
       }
       function initClickable() {
           document.querySelectorAll('.island-banner[data-href]').forEach(function (el) {
               if (el._icClick) return;
               el._icClick = true;
               el.setAttribute('role', 'link');
               el.setAttribute('tabindex', '0');
               el.addEventListener('click', function () {
                   var href = el.getAttribute('data-href');
                   if (href) window.location.href = href;
               });
               el.addEventListener('keydown', function (e) {
                   if (e.key === 'Enter' || e.key === ' ') {
                       e.preventDefault();
                       var href = el.getAttribute('data-href');
                       if (href) window.location.href = href;
                   }
               });
           });
       }
       function run() {
           applyBackgrounds();
           initClickable();
       }
       if (document.readyState === 'loading') {
           document.addEventListener('DOMContentLoaded', run);
       } else {
           run();
       }
   })();

</script>

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