Ttuzu: Limpou toda a página

2025-06-26T17:24:06Z

Limpou toda a página

← Edição anterior		Edição das 17h24min de 26 de junho de 2025
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>~~

Ttuzu: 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.

2025-06-10T16:54:41Z

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.

Página nova

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

Usuário:Ttuzu - Histórico de revisão

Ttuzu: Limpou toda a página

Ttuzu: 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.