Widget:Gb
Revisão de 23h34min de 28 de dezembro de 2025 por GhoulBlack (discussão | contribs)
<head>
<meta charset="UTF-8"> <title>Skill Viewer - Mixed Media</title>
<style>
body {
margin: 0;
padding: 40px 0;
font-family: Arial, Helvetica, sans-serif;
background: #ffffff;
color: #000;
}
.skill-box {
max-width: 900px;
margin: 0 auto;
text-align: center;
}
.skill-tabs {
display: flex;
justify-content: center;
gap: 12px;
margin-bottom: 25px;
}
.skill-tab {
width: 45px;
height: 45px;
background: #222;
color: #fff;
border: none;
border-radius: 6px;
font-size: 18px;
font-weight: bold;
cursor: pointer;
}
.skill-tab.active {
background: #000;
}
.skill-title {
font-size: 26px;
font-weight: bold;
margin-bottom: 10px;
}
.skill-description p {
margin: 4px 0;
font-size: 14px;
}
.skill-media {
margin-top: 25px;
background: #1f1f1f;
border-radius: 10px;
overflow: hidden;
}
.skill-media iframe,
.skill-media video {
width: 100%;
height: 420px;
display: block;
border: none;
}
</style>
</head>
<body>
<button class="skill-tab active" data-skill="0">1</button>
<button class="skill-tab" data-skill="1">2</button>
<button class="skill-tab" data-skill="2">3</button>
<button class="skill-tab" data-skill="3">4</button>
<button class="skill-tab" data-skill="4">5</button>
<button class="skill-tab" data-skill="5">6</button>
Habilidade 1
<script>
const skills = [
{
title: "Habilidade 1",
description: [
"Descrição da habilidade 1",
"Cooldown: 10s"
],
type: "iframe",
src: "https://www.youtube.com/embed/dQw4w9WgXcQ"
},
{
title: "Habilidade 2",
description: [
"Descrição da habilidade 2",
"Dano em área"
],
type: "video",
src: "https://wiki.gla.com.br/index.php?title=Especial:FilePath/Kaku-RankyakuSen.mp4"
},
{
title: "Habilidade 3",
description: [
"Descrição da habilidade 3"
],
type: "iframe",
src: "https://player.vimeo.com/video/76979871"
},
{
title: "Habilidade 4",
description: [
"Descrição da habilidade 4"
],
type: "video",
src: "https://www.w3schools.com/html/mov_bbb.mp4"
},
{
title: "Habilidade 5",
description: [
"Descrição da habilidade 5"
],
type: "iframe",
src: "https://www.youtube.com/embed/3tmd-ClpJxA"
},
{
title: "Habilidade 6",
description: [
"Descrição da habilidade 6",
"Ultimate"
],
type: "video",
src: "videos/skill6.webm"
}
];
const tabs = document.querySelectorAll(".skill-tab");
const titleEl = document.querySelector(".skill-title");
const descEl = document.querySelector(".skill-description");
const mediaEl = document.querySelector(".skill-media");
function renderSkill(index) {
const skill = skills[index];
titleEl.textContent = skill.title;
descEl.innerHTML = "";
skill.description.forEach(text => {
const p = document.createElement("p");
p.textContent = text;
descEl.appendChild(p);
});
mediaEl.innerHTML = "";
if (skill.type === "iframe") {
const iframe = document.createElement("iframe");
iframe.src = skill.src;
iframe.allowFullscreen = true;
mediaEl.appendChild(iframe);
}
if (skill.type === "video") {
const video = document.createElement("video");
video.src = skill.src;
video.controls = true;
video.loop = true;
video.muted = true;
mediaEl.appendChild(video);
}
}
tabs.forEach(tab => {
tab.addEventListener("click", () => {
tabs.forEach(t => t.classList.remove("active"));
tab.classList.add("active");
renderSkill(tab.dataset.skill);
});
});
renderSkill(0); </script>
</body> </html>