Mudanças entre as edições de "Usuário Discussão:Larifk"

De Wiki Gla
Ir para navegação Ir para pesquisar
Linha 1: Linha 1:
{{#widget:Lari1}}
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Boss Rush — Preview</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Rajdhani:wght@600;700&family=Outfit:wght@400;500;600&display=swap" rel="stylesheet">
<style>
* { box-sizing: border-box; margin: 0; padding: 0; }
body { background: #e8eaf0; }


<div class="lk-grid">
/* ===== VARIABLES ===== */
#lk-outer {
  --bg:      #f1f3f8;
  --surf:    #ffffff;
  --surf2:  #edf0f7;
  --border:  #dce1ee;
  --text:    #18202e;
  --text2:  #636e88;
  --accent:  #c92a2a;
  --acct2:  #e03131;
  --shadow:  0 1px 4px rgba(0,0,0,0.07);
  --shadow2: 0 4px 20px rgba(0,0,0,0.10);
  --r:      14px;
  --r2:      9px;
  --font:    'Outfit', system-ui, sans-serif;
  --font-hd: 'Rajdhani', system-ui, sans-serif;
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
}
#lk-outer * { box-sizing: border-box; }


{{Lari1
/* DARK */
|id=b1
#lk-outer.dk {
|boss=Guardião da Floresta
  --bg:      #0a0d16;
|ilha=Ilha Verdejante
  --surf:    #111422;
|img=https://suawiki.com/imagens/boss1.png
  --surf2:  #181c2e;
|s1=Impacto Devastador |s1_tab=IMPACTO |s1_video=https://youtube.com/embed/xxx |s1_desc=Golpeia o chão causando dano em área.
  --border:  #242840;
|s2=Rugido de Guerra |s2_tab=RUGIDO |s2_video=https://youtube.com/embed/yyy |s2_desc=Aumenta ataque dos aliados em 20%.
  --text:   #dde4f5;
|s3=Fúria Ancestral |s3_tab=ULTIMATE |s3_video=https://youtube.com/embed/zzz |s3_desc=Libera todo o poder acumulado.
  --text2:   #6e789a;
}}
  --shadow: 0 1px 6px rgba(0,0,0,.5);
  --shadow2: 0 4px 24px rgba(0,0,0,.6);
}


{{Lari1
/* HEADER */
|id=b2
#lk-hd {
|boss=Senhor das Cinzas
  display: flex;
|ilha=Ilha Vulcânica
  align-items: center;
|img=https://suawiki.com/imagens/boss2.png
  justify-content: space-between;
|s1=Chuva de Fogo |s1_tab=CHUVA |s1_video=https://youtube.com/embed/aaa |s1_desc=Meteoros caem do céu.
  padding: 18px 32px;
|s2=Escudo Magmático |s2_tab=ESCUDO |s2_video=https://youtube.com/embed/bbb |s2_desc=Cria barreira de lava.
  background: var(--surf);
}}
  border-bottom: 1px solid var(--border);
  gap: 14px;
  flex-wrap: wrap;
  position: sticky;
  top: 0;
  z-index: 100;
  transition: background .25s, border-color .25s;
}
#lk-eyebrow {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 2px;
}
#lk-title {
  font-family: var(--font-hd);
  font-size: 26px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: 0.5px;
  line-height: 1.1;
  transition: color .25s;
}
#lk-hd-r { display: flex; align-items: center; gap: 10px; }


<!-- ... boss 3 a 7 com id=b3, b4, b5, b6, b7 ... -->
/* DIFFICULTY PILL */
#lk-diff {
  display: flex;
  background: var(--surf2);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 3px;
  gap: 2px;
  transition: background .25s, border-color .25s;
}
.lk-db {
  padding: 5px 18px;
  border: none;
  background: transparent;
  border-radius: 999px;
  cursor: pointer;
  font-family: var(--font);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--text2);
  transition: all .2s ease;
}
.lk-db.on {
  background: var(--accent);
  color: #fff;
  box-shadow: 0 2px 10px rgba(201,42,42,.35);
}


/* THEME BTN */
#lk-tb {
  width: 34px; height: 34px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--surf2);
  cursor: pointer;
  font-size: 15px;
  display: flex; align-items: center; justify-content: center;
  transition: all .2s;
  flex-shrink: 0;
}
#lk-tb:hover { background: var(--border); }
/* DIFF BANNER */
#lk-ban {
  overflow: hidden;
  max-height: 0;
  transition: max-height .35s ease, padding .35s ease;
  background: linear-gradient(90deg, rgba(201,42,42,.07) 0%, transparent 60%);
  border-bottom: 1px solid transparent;
  padding: 0 32px;
  display: flex;
  align-items: center;
}
#lk-ban.on {
  max-height: 60px;
  padding: 10px 32px;
  border-bottom-color: var(--border);
}
#lk-ban-bg {
  font-family: var(--font-hd);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  background: var(--accent);
  color: #fff;
  padding: 3px 12px;
  border-radius: 6px;
  margin-right: 12px;
  flex-shrink: 0;
}
#lk-ban-tx { font-size: 13px; color: var(--text2); }
/* TABBER */
#lk-tabs-bar {
  background: var(--surf);
  border-bottom: 2px solid var(--border);
  overflow: hidden;
  transition: background .25s, border-color .25s;
}
#lk-tabs {
  display: flex;
  overflow-x: auto;
  padding: 0 24px;
  scrollbar-width: none;
}
#lk-tabs::-webkit-scrollbar { display: none; }
.lk-tab {
  flex-shrink: 0;
  padding: 13px 22px 11px;
  border: none;
  background: transparent;
  cursor: pointer;
  font-family: var(--font);
  font-size: 13px;
  font-weight: 600;
  color: var(--text2);
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
  transition: color .2s, border-color .2s;
  white-space: nowrap;
}
.lk-tab:hover { color: var(--text); }
.lk-tab.on {
  color: var(--accent);
  border-bottom-color: var(--accent);
}
/* PANELS */
#lk-panels { padding: 28px 32px; }
.lk-panel { display: none; }
.lk-panel.on { display: block; animation: lkFd .22s ease; }
@keyframes lkFd {
  from { opacity: 0; transform: translateY(7px); }
  to  { opacity: 1; transform: translateY(0); }
}
/* BOSS CARD */
.lk-bcard {
  display: flex;
  gap: 24px;
  align-items: flex-start;
  background: var(--surf);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 22px 22px 22px 28px;
  margin-bottom: 24px;
  box-shadow: var(--shadow2);
  position: relative;
  overflow: hidden;
  transition: background .25s, border-color .25s;
}
.lk-bcard::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 5px; height: 100%;
  background: var(--accent);
}
.lk-bportrait {
  flex-shrink: 0;
  width: 110px; height: 110px;
  border-radius: var(--r2);
  background: var(--surf2);
  border: 1px solid var(--border);
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  font-size: 36px;
  transition: background .25s, border-color .25s;
}
.lk-bportrait img {
  max-width: 100%; max-height: 100%; object-fit: contain;
}
.lk-binfo { flex: 1; min-width: 0; }
.lk-bname {
  font-family: var(--font-hd);
  font-size: 22px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 8px;
  letter-spacing: 0.3px;
  transition: color .25s;
}
.lk-bdesc {
  font-size: 13px;
  color: var(--text2);
  line-height: 1.65;
  transition: color .25s;
}
/* SKILLS */
.lk-slbl {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--text2);
  margin-bottom: 10px;
  transition: color .25s;
}
.lk-sk {
  background: var(--surf);
  border: 1px solid var(--border);
  border-radius: var(--r2);
  margin-bottom: 8px;
  overflow: hidden;
  transition: border-color .2s, background .25s;
  box-shadow: var(--shadow);
}
.lk-sk.open { border-color: var(--accent); }
.lk-skbtn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border: none;
  background: var(--surf2);
  cursor: pointer;
  transition: background .15s;
  gap: 12px;
}
.lk-skbtn:hover,
.lk-sk.open .lk-skbtn { background: var(--surf); }
.lk-skl {
  display: flex; align-items: center; gap: 10px;
  flex: 1; min-width: 0;
}
.lk-snum {
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  font-family: var(--font);
}
.lk-sname {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color .25s;
}
.lk-sarr {
  font-size: 10px;
  color: var(--text2);
  transition: transform .22s ease;
  flex-shrink: 0;
}
.lk-sk.open .lk-sarr { transform: rotate(180deg); }
.lk-skbody {
  display: none;
  padding: 16px;
  border-top: 1px solid var(--border);
  background: var(--surf);
  transition: border-color .25s, background .25s;
}
.lk-skbody.open { display: block; animation: lkFd .18s ease; }
.lk-yvid {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  border-radius: var(--r2);
  overflow: hidden;
  background: #111;
  margin-bottom: 14px;
}
.lk-yvid-ph {
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  background: #1a1a2e;
  flex-direction: column;
  gap: 10px;
}
.lk-yvid-ph .play { font-size: 44px; opacity: .7; }
.lk-yvid-ph .lbl { font-size: 12px; color: #888; font-family: var(--font); }
.lk-yvid iframe {
  position: absolute; top: 0; left: 0;
  width: 100%; height: 100%; border: 0;
}
.lk-sdesc {
  font-size: 13px;
  color: var(--text2);
  line-height: 1.65;
  transition: color .25s;
}
/* REWARD */
.lk-reward-wrap {
  margin: 0 32px 32px;
  padding: 18px 24px;
  background: var(--surf);
  border: 1px solid var(--border);
  border-radius: var(--r);
  box-shadow: var(--shadow2);
  transition: background .25s, border-color .25s;
}
.lk-reward-lbl {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--text2);
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: color .25s;
}
.lk-reward-lbl::before { content: '🏆'; font-size: 14px; }
.reward-items {
  display: flex; flex-wrap: wrap; align-items: center; gap: 16px;
}
.mock-item {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--surf2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 6px 12px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  transition: background .25s, border-color .25s, color .25s;
}
.mock-item-icon { font-size: 20px; }
.mock-item-qty { color: var(--accent); font-weight: 700; }
/* RESPONSIVE */
@media (max-width: 640px) {
  #lk-hd { padding: 14px 16px; }
  #lk-title { font-size: 20px; }
  .lk-db { padding: 4px 12px; font-size: 10px; }
  #lk-tabs { padding: 0 10px; }
  .lk-tab { padding: 11px 14px 9px; font-size: 12px; }
  #lk-panels { padding: 16px; }
  .lk-reward-wrap { margin: 0 16px 16px; padding: 14px 16px; }
  .lk-bcard { flex-direction: column; align-items: center; text-align: center; padding: 18px 18px 18px 20px; gap: 14px; }
  .lk-bcard::before { width: 100%; height: 5px; }
  .lk-bportrait { width: 80px; height: 80px; }
  .lk-bname { font-size: 18px; }
  #lk-ban.on { padding: 8px 16px; }
}
</style>
</head>
<body>
<div id="lk-outer">
  <!-- HEADER -->
  <div id="lk-hd">
    <div>
      <div id="lk-eyebrow">Dinâmica</div>
      <div id="lk-title">Boss Rush</div>
    </div>
    <div id="lk-hd-r">
      <div id="lk-diff">
        <button class="lk-db" data-d="elite">Elite</button>
        <button class="lk-db" data-d="hard">Hard</button>
      </div>
      <button id="lk-tb" title="Alternar tema">🌙</button>
    </div>
  </div>
  <!-- DIFFICULTY BANNER -->
  <div id="lk-ban">
    <span id="lk-ban-bg"></span>
    <span id="lk-ban-tx"></span>
  </div>
  <!-- TABBER -->
  <div id="lk-tabs-bar">
    <div id="lk-tabs"></div>
  </div>
  <!-- PANELS -->
  <div id="lk-panels"></div>
  <!-- REWARD -->
  <div class="lk-reward-wrap">
    <div class="lk-reward-lbl">Recompensa Final</div>
    <div class="reward-items">
      <div class="mock-item"><span class="mock-item-icon">💰</span><span class="mock-item-qty">x5.000</span> Berries</div>
      <div class="mock-item"><span class="mock-item-icon">🏅</span><span class="mock-item-qty">x3</span> Medalha de Honra</div>
      <div class="mock-item"><span class="mock-item-icon">💊</span><span class="mock-item-qty">x2</span> Poção de EXP Grande</div>
      <div class="mock-item"><span class="mock-item-icon">💎</span><span class="mock-item-qty">x1</span> Cristal Radiante</div>
    </div>
  </div>
</div>
</div>
<script>
var BOSSES = [
  {
    nome: "Monkey D. Luffy",
    emoji: "🌀",
    desc: "Capitão dos Piratas do Chapéu de Palha. Usa o poder da Akuma no Mi Gomu Gomu, transformando seu corpo em borracha. Em sua forma Gear Fourth, os ataques se tornam devastadores.",
    skills: [
      { nome: "Gear Second — Gomu Gomu no Red Hawk", video: "", desc: "Luffy aumenta drasticamente a velocidade de circulação do sangue, envolvendo o punho em fogo de atrito. Causa dano de fogo em área." },
      { nome: "Gear Fourth — Kong Gun", video: "", desc: "Luffy infla o braço dentro do músculo e o dispara como um projétil maciço. Dano massivo em linha reta." },
      { nome: "Gear Third — Gigant Pistol", video: "", desc: "Luffy sopra ar para dentro dos ossos do braço, aumentando-o a proporções gigantescas antes do impacto." },
      { nome: "Haki de Rei", video: "", desc: "Emite uma onda de pressão de Haki que atordoa todos os inimigos em um raio de 15 metros." }
    ]
  },
  {
    nome: "Portgas D. Ace",
    emoji: "🔥",
    desc: "Segundo Divisão dos Barba Branca. Usuário da Mera Mera no Mi, controlando o fogo. Sua chegada é anunciada por chamas que consomem o campo de batalha.",
    skills: [
      { nome: "Hiken — Fire Fist", video: "", desc: "O ataque mais icônico de Ace — um soco de fogo que avança em linha reta, queimando tudo em seu caminho." },
      { nome: "Dai Enkai — Entei", video: "", desc: "Ace cria uma bola de fogo de proporções imensas e a lança contra o inimigo. Dano em área ao impacto." },
      { nome: "Flame Wall", video: "", desc: "Uma parede de chamas que bloqueia projéteis e causa dano contínuo a quem tentar atravessá-la." }
    ]
  },
  {
    nome: "Roronoa Zoro",
    emoji: "⚔️",
    desc: "Primeiro oficial dos Chapéu de Palha e aspirante ao título de espadachim mais forte do mundo. Usa o estilo Santōryū com três katanas simultâneas.",
    skills: [
      { nome: "Oni Giri", video: "", desc: "Zoro sela as três espadas e executa um corte triplo em forma de arco. Alta velocidade, baixa antecipação." },
      { nome: "Tatsumaki", video: "", desc: "Cria um tornado de cortes que aspira os inimigos próximos antes de despedaçá-los com lâminas giratórias." },
      { nome: "Asura — Makyū Sendan", video: "", desc: "Zoro manifesta a técnica de Asura, multiplicando seus braços e cabeças, e desencadeia nove cortes simultâneos." },
      { nome: "Santōryū Ogi — Rokudō no Tsuji", video: "", desc: "Um dos ataques finais de Santōryū — um corte circular que divide tudo em seis planos ao mesmo tempo." }
    ]
  },
  {
    nome: "Trafalgar D. Water Law",
    emoji: "💀",
    desc: "Capitão dos Piratas Heart. Usuário da Ope Ope no Mi, a Fruta Operação. Dentro de sua 'ROOM' esférica, possui controle absoluto sobre tudo dentro do espaço.",
    skills: [
      { nome: "ROOM — Shambles", video: "", desc: "Cria a esfera de operação e teleporta objetos ou pessoas dentro do espaço de forma imprevisível." },
      { nome: "Tact", video: "", desc: "Levita e controla objetos dentro da ROOM, podendo usá-los como projéteis ou criar barreiras improvisadas." },
      { nome: "Injection Shot", video: "", desc: "Law perfura o inimigo com Kikoku dentro da ROOM, injetando um feixe de energia cortante." }
    ]
  },
  {
    nome: "Charlotte Katakuri",
    emoji: "🔮",
    desc: "Segundo filho de Big Mom e comandante da Treze Divisões. Usuário da Mochi Mochi no Mi Especial — uma Logia especial de mochi. Possui Haki de Observação superior.",
    skills: [
      { nome: "Mochi Tsuki", video: "", desc: "Soco revestido de mochi com Haki de Armamento, combinando elasticidade e dureza em um ataque difícil de esquivar." },
      { nome: "Mogura", video: "", desc: "Katakuri transforma seu dedo em uma espiga de mochi gigante e perfura com precisão cirúrgica." },
      { nome: "Rhino Schneider", video: "", desc: "Dois socos simultâneos revestidos de Haki que criam uma onda de impacto em cone." }
    ]
  },
  {
    nome: "Kaido dos Cem Animais",
    emoji: "🐉",
    desc: "Governador Geral dos Piratas das Feras. Considerado o ser mais forte do mundo. Usuário do modelo Azure Dragon da Zoan Mítica do Dragão.",
    skills: [
      { nome: "Raimei Hakke — Heavenly Dragon Drum", video: "", desc: "Kaido bate no peito, criando uma onda de choque sônica que atinge todo o campo de batalha." },
      { nome: "Kaifu — Ocean Blaze", video: "", desc: "Em sua forma de dragão, expele um sopro de chamas azuis que atravessa metade do mapa." },
      { nome: "Boro Breath", video: "", desc: "Sopro massiço de chamas em forma de cone. Dano de fogo em grande área." },
      { nome: "Ragnarok — Heaven and Earth Sever", video: "", desc: "Golpe final: Kaido concentra toda a força de seu kanabō revestido de Haki e desce em arco vertical. Dano devastador." }
    ]
  },
  {
    nome: "Marshall D. Teach — Barba Negra",
    emoji: "🌑",
    desc: "Único ser conhecido a possuir dois poderes de Akuma no Mi: a Yami Yami no Mi (Trevas) e a Gura Gura no Mi (Tremor). O vilão mais temido da era atual.",
    skills: [
      { nome: "Black Hole — Darkness Vortex", video: "", desc: "Barba Negra cria um vórtice de trevas que absorve tudo ao redor, incluindo ataques inimigos." },
      { nome: "Kurouzu — Dark Whirlpool", video: "", desc: "Puxa o inimigo com força gravitacional inexorável para dentro do alcance do Dark Hole." },
      { nome: "Gura Gura — Seismic Surge", video: "", desc: "Treme o ar criando um tsunami de impacto que se propaga pelo campo de batalha." },
      { nome: "Liberate", video: "", desc: "Libera toda a energia das trevas absorvidas de volta ao inimigo em uma explosão de dano puro." },
      { nome: "Sky Quake", video: "", desc: "Ataque final — Barba Negra segura o ar com as duas mãos e rasga o espaço ao meio, causando dano massivo em toda a área." }
    ]
  }
];
var DIFF = {
  elite: "Modo Elite ativado — os bosses ganham 50% a mais de HP e novos padrões de ataque. Recomendado para jogadores nível 80+.",
  hard:  "Modo Hard ativado — os bosses ganham 25% a mais de HP. Ataques mais frequentes. Recomendado para jogadores nível 60+."
};
var tabsEl  = document.getElementById('lk-tabs');
var panelsEl = document.getElementById('lk-panels');
var outer    = document.getElementById('lk-outer');
var ban      = document.getElementById('lk-ban');
var banBg    = document.getElementById('lk-ban-bg');
var banTx    = document.getElementById('lk-ban-tx');
var curDiff  = null;
BOSSES.forEach(function(boss, idx) {
  // Tab
  var tab = document.createElement('button');
  tab.className = 'lk-tab' + (idx === 0 ? ' on' : '');
  tab.textContent = boss.nome.split(' ').slice(-1)[0]; // surname for brevity
  tab.addEventListener('click', function() { switchTab(idx); });
  tabsEl.appendChild(tab);
  // Panel
  var panel = document.createElement('div');
  panel.className = 'lk-panel' + (idx === 0 ? ' on' : '');
  // Boss card
  var card = document.createElement('div');
  card.className = 'lk-bcard';
  var port = document.createElement('div');
  port.className = 'lk-bportrait';
  port.textContent = boss.emoji;
  card.appendChild(port);
  var info = document.createElement('div');
  info.className = 'lk-binfo';
  info.innerHTML = '<div class="lk-bname">' + boss.nome + '</div><p class="lk-bdesc">' + boss.desc + '</p>';
  card.appendChild(info);
  panel.appendChild(card);
  // Skills
  if (boss.skills.length > 0) {
    var slbl = document.createElement('div');
    slbl.className = 'lk-slbl';
    slbl.textContent = 'Habilidades';
    panel.appendChild(slbl);
    boss.skills.forEach(function(skill, si) {
      var item = document.createElement('div');
      item.className = 'lk-sk';
      var btn = document.createElement('button');
      btn.className = 'lk-skbtn';
      btn.innerHTML =
        '<div class="lk-skl">' +
          '<span class="lk-snum">' + (si+1) + '</span>' +
          '<span class="lk-sname">' + skill.nome + '</span>' +
        '</div>' +
        '<span class="lk-sarr">&#9660;</span>';
      var body = document.createElement('div');
      body.className = 'lk-skbody';
      body.innerHTML =
        '<div class="lk-yvid">' +
          '<div class="lk-yvid-ph">' +
            '<span class="play">▶</span>' +
            '<span class="lbl">Vídeo da habilidade</span>' +
          '</div>' +
        '</div>' +
        '<p class="lk-sdesc">' + skill.desc + '</p>';
      item.appendChild(btn);
      item.appendChild(body);
      btn.addEventListener('click', function() {
        var isOpen = item.classList.contains('open');
        item.classList.toggle('open', !isOpen);
        body.classList.toggle('open', !isOpen);
      });
      panel.appendChild(item);
    });
  }
  panelsEl.appendChild(panel);
});
function switchTab(idx) {
  tabsEl.querySelectorAll('.lk-tab').forEach(function(t, i) { t.classList.toggle('on', i === idx); });
  panelsEl.querySelectorAll('.lk-panel').forEach(function(p, i) { p.classList.toggle('on', i === idx); });
}
// Difficulty
document.querySelectorAll('.lk-db').forEach(function(btn) {
  btn.addEventListener('click', function() {
    var d = btn.getAttribute('data-d');
    if (curDiff === d) {
      curDiff = null;
      document.querySelectorAll('.lk-db').forEach(function(b) { b.classList.remove('on'); });
      ban.classList.remove('on');
    } else {
      curDiff = d;
      document.querySelectorAll('.lk-db').forEach(function(b) { b.classList.toggle('on', b.getAttribute('data-d') === d); });
      banBg.textContent = d === 'elite' ? 'Elite' : 'Hard';
      banTx.textContent = DIFF[d];
      ban.classList.add('on');
    }
  });
});
// Theme
var dark = localStorage.getItem('lk-theme') === 'dark';
function applyTheme(d) {
  dark = d;
  outer.classList.toggle('dk', d);
  document.getElementById('lk-tb').textContent = d ? '☀️' : '🌙';
  localStorage.setItem('lk-theme', d ? 'dark' : 'light');
}
applyTheme(dark);
document.getElementById('lk-tb').addEventListener('click', function() { applyTheme(!dark); });
</script>
</body>
</html>

Edição das 12h39min de 17 de março de 2026

<!DOCTYPE html> <html lang="pt-br"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Boss Rush — Preview</title> <link rel="preconnect" href="https://fonts.googleapis.com"> <link href="https://fonts.googleapis.com/css2?family=Rajdhani:wght@600;700&family=Outfit:wght@400;500;600&display=swap" rel="stylesheet"> <style>

  • { box-sizing: border-box; margin: 0; padding: 0; }

body { background: #e8eaf0; }

/* ===== VARIABLES ===== */

  1. lk-outer {
 --bg:      #f1f3f8;
 --surf:    #ffffff;
 --surf2:   #edf0f7;
 --border:  #dce1ee;
 --text:    #18202e;
 --text2:   #636e88;
 --accent:  #c92a2a;
 --acct2:   #e03131;
 --shadow:  0 1px 4px rgba(0,0,0,0.07);
 --shadow2: 0 4px 20px rgba(0,0,0,0.10);
 --r:       14px;
 --r2:      9px;
 --font:    'Outfit', system-ui, sans-serif;
 --font-hd: 'Rajdhani', system-ui, sans-serif;
 font-family: var(--font);
 background: var(--bg);
 color: var(--text);
 min-height: 100vh;

}

  1. lk-outer * { box-sizing: border-box; }

/* DARK */

  1. lk-outer.dk {
 --bg:      #0a0d16;
 --surf:    #111422;
 --surf2:   #181c2e;
 --border:  #242840;
 --text:    #dde4f5;
 --text2:   #6e789a;
 --shadow:  0 1px 6px rgba(0,0,0,.5);
 --shadow2: 0 4px 24px rgba(0,0,0,.6);

}

/* HEADER */

  1. lk-hd {
 display: flex;
 align-items: center;
 justify-content: space-between;
 padding: 18px 32px;
 background: var(--surf);
 border-bottom: 1px solid var(--border);
 gap: 14px;
 flex-wrap: wrap;
 position: sticky;
 top: 0;
 z-index: 100;
 transition: background .25s, border-color .25s;

}

  1. lk-eyebrow {
 font-size: 10px;
 font-weight: 600;
 letter-spacing: 2.5px;
 text-transform: uppercase;
 color: var(--accent);
 margin-bottom: 2px;

}

  1. lk-title {
 font-family: var(--font-hd);
 font-size: 26px;
 font-weight: 700;
 color: var(--text);
 letter-spacing: 0.5px;
 line-height: 1.1;
 transition: color .25s;

}

  1. lk-hd-r { display: flex; align-items: center; gap: 10px; }

/* DIFFICULTY PILL */

  1. lk-diff {
 display: flex;
 background: var(--surf2);
 border: 1px solid var(--border);
 border-radius: 999px;
 padding: 3px;
 gap: 2px;
 transition: background .25s, border-color .25s;

} .lk-db { 

 padding: 5px 18px;
 border: none;
 background: transparent;
 border-radius: 999px;
 cursor: pointer;
 font-family: var(--font);
 font-size: 11px;
 font-weight: 600;
 letter-spacing: 0.8px;
 text-transform: uppercase;
 color: var(--text2);
 transition: all .2s ease;

} .lk-db.on { 

 background: var(--accent);
 color: #fff;
 box-shadow: 0 2px 10px rgba(201,42,42,.35);

}

/* THEME BTN */

  1. lk-tb {
 width: 34px; height: 34px;
 border-radius: 50%;
 border: 1px solid var(--border);
 background: var(--surf2);
 cursor: pointer;
 font-size: 15px;
 display: flex; align-items: center; justify-content: center;
 transition: all .2s;
 flex-shrink: 0;

}

  1. lk-tb:hover { background: var(--border); }

/* DIFF BANNER */

  1. lk-ban {
 overflow: hidden;
 max-height: 0;
 transition: max-height .35s ease, padding .35s ease;
 background: linear-gradient(90deg, rgba(201,42,42,.07) 0%, transparent 60%);
 border-bottom: 1px solid transparent;
 padding: 0 32px;
 display: flex;
 align-items: center;

}

  1. lk-ban.on {
 max-height: 60px;
 padding: 10px 32px;
 border-bottom-color: var(--border);

}

  1. lk-ban-bg {
 font-family: var(--font-hd);
 font-size: 11px;
 font-weight: 700;
 letter-spacing: 1.2px;
 text-transform: uppercase;
 background: var(--accent);
 color: #fff;
 padding: 3px 12px;
 border-radius: 6px;
 margin-right: 12px;
 flex-shrink: 0;

}

  1. lk-ban-tx { font-size: 13px; color: var(--text2); }

/* TABBER */

  1. lk-tabs-bar {
 background: var(--surf);
 border-bottom: 2px solid var(--border);
 overflow: hidden;
 transition: background .25s, border-color .25s;

}

  1. lk-tabs {
 display: flex;
 overflow-x: auto;
 padding: 0 24px;
 scrollbar-width: none;

}

  1. lk-tabs::-webkit-scrollbar { display: none; }

.lk-tab { 

 flex-shrink: 0;
 padding: 13px 22px 11px;
 border: none;
 background: transparent;
 cursor: pointer;
 font-family: var(--font);
 font-size: 13px;
 font-weight: 600;
 color: var(--text2);
 border-bottom: 3px solid transparent;
 margin-bottom: -2px;
 transition: color .2s, border-color .2s;
 white-space: nowrap;

} .lk-tab:hover { color: var(--text); } .lk-tab.on { 

 color: var(--accent);
 border-bottom-color: var(--accent);

}

/* PANELS */

  1. lk-panels { padding: 28px 32px; }

.lk-panel { display: none; } .lk-panel.on { display: block; animation: lkFd .22s ease; }

@keyframes lkFd { 

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

}

/* BOSS CARD */ .lk-bcard { 

 display: flex;
 gap: 24px;
 align-items: flex-start;
 background: var(--surf);
 border: 1px solid var(--border);
 border-radius: var(--r);
 padding: 22px 22px 22px 28px;
 margin-bottom: 24px;
 box-shadow: var(--shadow2);
 position: relative;
 overflow: hidden;
 transition: background .25s, border-color .25s;

} .lk-bcard::before { 

 content: ;
 position: absolute;
 top: 0; left: 0;
 width: 5px; height: 100%;
 background: var(--accent);

}

.lk-bportrait { 

 flex-shrink: 0;
 width: 110px; height: 110px;
 border-radius: var(--r2);
 background: var(--surf2);
 border: 1px solid var(--border);
 overflow: hidden;
 display: flex; align-items: center; justify-content: center;
 font-size: 36px;
 transition: background .25s, border-color .25s;

} .lk-bportrait img { 

 max-width: 100%; max-height: 100%; object-fit: contain;

}

.lk-binfo { flex: 1; min-width: 0; } .lk-bname { 

 font-family: var(--font-hd);
 font-size: 22px;
 font-weight: 700;
 color: var(--text);
 margin-bottom: 8px;
 letter-spacing: 0.3px;
 transition: color .25s;

} .lk-bdesc { 

 font-size: 13px;
 color: var(--text2);
 line-height: 1.65;
 transition: color .25s;

}

/* SKILLS */ .lk-slbl { 

 font-size: 10px;
 font-weight: 700;
 text-transform: uppercase;
 letter-spacing: 1.5px;
 color: var(--text2);
 margin-bottom: 10px;
 transition: color .25s;

} .lk-sk { 

 background: var(--surf);
 border: 1px solid var(--border);
 border-radius: var(--r2);
 margin-bottom: 8px;
 overflow: hidden;
 transition: border-color .2s, background .25s;
 box-shadow: var(--shadow);

} .lk-sk.open { border-color: var(--accent); }

.lk-skbtn { 

 width: 100%;
 display: flex;
 align-items: center;
 justify-content: space-between;
 padding: 12px 16px;
 border: none;
 background: var(--surf2);
 cursor: pointer;
 transition: background .15s;
 gap: 12px;

} .lk-skbtn:hover, .lk-sk.open .lk-skbtn { background: var(--surf); }

.lk-skl { 

 display: flex; align-items: center; gap: 10px;
 flex: 1; min-width: 0;

} .lk-snum { 

 width: 24px; height: 24px;
 border-radius: 50%;
 background: var(--accent);
 color: #fff;
 font-size: 10px;
 font-weight: 700;
 display: flex; align-items: center; justify-content: center;
 flex-shrink: 0;
 font-family: var(--font);

} .lk-sname { 

 font-size: 13px;
 font-weight: 600;
 color: var(--text);
 text-align: left;
 white-space: nowrap;
 overflow: hidden;
 text-overflow: ellipsis;
 transition: color .25s;

} .lk-sarr { 

 font-size: 10px;
 color: var(--text2);
 transition: transform .22s ease;
 flex-shrink: 0;

} .lk-sk.open .lk-sarr { transform: rotate(180deg); }

.lk-skbody { 

 display: none;
 padding: 16px;
 border-top: 1px solid var(--border);
 background: var(--surf);
 transition: border-color .25s, background .25s;

} .lk-skbody.open { display: block; animation: lkFd .18s ease; }

.lk-yvid { 

 position: relative;
 padding-bottom: 56.25%;
 height: 0;
 border-radius: var(--r2);
 overflow: hidden;
 background: #111;
 margin-bottom: 14px;

} .lk-yvid-ph { 

 position: absolute;
 top: 0; left: 0; width: 100%; height: 100%;
 display: flex; align-items: center; justify-content: center;
 background: #1a1a2e;
 flex-direction: column;
 gap: 10px;

} .lk-yvid-ph .play { font-size: 44px; opacity: .7; } .lk-yvid-ph .lbl { font-size: 12px; color: #888; font-family: var(--font); } .lk-yvid iframe { 

 position: absolute; top: 0; left: 0;
 width: 100%; height: 100%; border: 0;

}

.lk-sdesc { 

 font-size: 13px;
 color: var(--text2);
 line-height: 1.65;
 transition: color .25s;

}

/* REWARD */ .lk-reward-wrap { 

 margin: 0 32px 32px;
 padding: 18px 24px;
 background: var(--surf);
 border: 1px solid var(--border);
 border-radius: var(--r);
 box-shadow: var(--shadow2);
 transition: background .25s, border-color .25s;

} .lk-reward-lbl { 

 font-size: 10px;
 font-weight: 700;
 text-transform: uppercase;
 letter-spacing: 1.5px;
 color: var(--text2);
 margin-bottom: 14px;
 display: flex;
 align-items: center;
 gap: 8px;
 transition: color .25s;

} .lk-reward-lbl::before { content: '🏆'; font-size: 14px; } .reward-items { 

 display: flex; flex-wrap: wrap; align-items: center; gap: 16px;

} .mock-item { 

 display: flex;
 align-items: center;
 gap: 6px;
 background: var(--surf2);
 border: 1px solid var(--border);
 border-radius: 8px;
 padding: 6px 12px;
 font-size: 13px;
 font-weight: 600;
 color: var(--text);
 transition: background .25s, border-color .25s, color .25s;

} .mock-item-icon { font-size: 20px; } .mock-item-qty { color: var(--accent); font-weight: 700; }

/* RESPONSIVE */ @media (max-width: 640px) { 

 #lk-hd { padding: 14px 16px; }
 #lk-title { font-size: 20px; }
 .lk-db { padding: 4px 12px; font-size: 10px; }
 #lk-tabs { padding: 0 10px; }
 .lk-tab { padding: 11px 14px 9px; font-size: 12px; }
 #lk-panels { padding: 16px; }
 .lk-reward-wrap { margin: 0 16px 16px; padding: 14px 16px; }
 .lk-bcard { flex-direction: column; align-items: center; text-align: center; padding: 18px 18px 18px 20px; gap: 14px; }
 .lk-bcard::before { width: 100%; height: 5px; }
 .lk-bportrait { width: 80px; height: 80px; }
 .lk-bname { font-size: 18px; }
 #lk-ban.on { padding: 8px 16px; }

} </style> </head> <body>

Dinâmica
Boss Rush
       <button class="lk-db" data-d="elite">Elite</button>
       <button class="lk-db" data-d="hard">Hard</button>

     <button id="lk-tb" title="Alternar tema">🌙</button>
Recompensa Final
💰x5.000 Berries
🏅x3 Medalha de Honra
💊x2 Poção de EXP Grande
💎x1 Cristal Radiante

<script> var BOSSES = [ 

 {
   nome: "Monkey D. Luffy",
   emoji: "🌀",
   desc: "Capitão dos Piratas do Chapéu de Palha. Usa o poder da Akuma no Mi Gomu Gomu, transformando seu corpo em borracha. Em sua forma Gear Fourth, os ataques se tornam devastadores.",
   skills: [
     { nome: "Gear Second — Gomu Gomu no Red Hawk", video: "", desc: "Luffy aumenta drasticamente a velocidade de circulação do sangue, envolvendo o punho em fogo de atrito. Causa dano de fogo em área." },
     { nome: "Gear Fourth — Kong Gun", video: "", desc: "Luffy infla o braço dentro do músculo e o dispara como um projétil maciço. Dano massivo em linha reta." },
     { nome: "Gear Third — Gigant Pistol", video: "", desc: "Luffy sopra ar para dentro dos ossos do braço, aumentando-o a proporções gigantescas antes do impacto." },
     { nome: "Haki de Rei", video: "", desc: "Emite uma onda de pressão de Haki que atordoa todos os inimigos em um raio de 15 metros." }
   ]
 },
 {
   nome: "Portgas D. Ace",
   emoji: "🔥",
   desc: "Segundo Divisão dos Barba Branca. Usuário da Mera Mera no Mi, controlando o fogo. Sua chegada é anunciada por chamas que consomem o campo de batalha.",
   skills: [
     { nome: "Hiken — Fire Fist", video: "", desc: "O ataque mais icônico de Ace — um soco de fogo que avança em linha reta, queimando tudo em seu caminho." },
     { nome: "Dai Enkai — Entei", video: "", desc: "Ace cria uma bola de fogo de proporções imensas e a lança contra o inimigo. Dano em área ao impacto." },
     { nome: "Flame Wall", video: "", desc: "Uma parede de chamas que bloqueia projéteis e causa dano contínuo a quem tentar atravessá-la." }
   ]
 },
 {
   nome: "Roronoa Zoro",
   emoji: "⚔️",
   desc: "Primeiro oficial dos Chapéu de Palha e aspirante ao título de espadachim mais forte do mundo. Usa o estilo Santōryū com três katanas simultâneas.",
   skills: [
     { nome: "Oni Giri", video: "", desc: "Zoro sela as três espadas e executa um corte triplo em forma de arco. Alta velocidade, baixa antecipação." },
     { nome: "Tatsumaki", video: "", desc: "Cria um tornado de cortes que aspira os inimigos próximos antes de despedaçá-los com lâminas giratórias." },
     { nome: "Asura — Makyū Sendan", video: "", desc: "Zoro manifesta a técnica de Asura, multiplicando seus braços e cabeças, e desencadeia nove cortes simultâneos." },
     { nome: "Santōryū Ogi — Rokudō no Tsuji", video: "", desc: "Um dos ataques finais de Santōryū — um corte circular que divide tudo em seis planos ao mesmo tempo." }
   ]
 },
 {
   nome: "Trafalgar D. Water Law",
   emoji: "💀",
   desc: "Capitão dos Piratas Heart. Usuário da Ope Ope no Mi, a Fruta Operação. Dentro de sua 'ROOM' esférica, possui controle absoluto sobre tudo dentro do espaço.",
   skills: [
     { nome: "ROOM — Shambles", video: "", desc: "Cria a esfera de operação e teleporta objetos ou pessoas dentro do espaço de forma imprevisível." },
     { nome: "Tact", video: "", desc: "Levita e controla objetos dentro da ROOM, podendo usá-los como projéteis ou criar barreiras improvisadas." },
     { nome: "Injection Shot", video: "", desc: "Law perfura o inimigo com Kikoku dentro da ROOM, injetando um feixe de energia cortante." }
   ]
 },
 {
   nome: "Charlotte Katakuri",
   emoji: "🔮",
   desc: "Segundo filho de Big Mom e comandante da Treze Divisões. Usuário da Mochi Mochi no Mi Especial — uma Logia especial de mochi. Possui Haki de Observação superior.",
   skills: [
     { nome: "Mochi Tsuki", video: "", desc: "Soco revestido de mochi com Haki de Armamento, combinando elasticidade e dureza em um ataque difícil de esquivar." },
     { nome: "Mogura", video: "", desc: "Katakuri transforma seu dedo em uma espiga de mochi gigante e perfura com precisão cirúrgica." },
     { nome: "Rhino Schneider", video: "", desc: "Dois socos simultâneos revestidos de Haki que criam uma onda de impacto em cone." }
   ]
 },
 {
   nome: "Kaido dos Cem Animais",
   emoji: "🐉",
   desc: "Governador Geral dos Piratas das Feras. Considerado o ser mais forte do mundo. Usuário do modelo Azure Dragon da Zoan Mítica do Dragão.",
   skills: [
     { nome: "Raimei Hakke — Heavenly Dragon Drum", video: "", desc: "Kaido bate no peito, criando uma onda de choque sônica que atinge todo o campo de batalha." },
     { nome: "Kaifu — Ocean Blaze", video: "", desc: "Em sua forma de dragão, expele um sopro de chamas azuis que atravessa metade do mapa." },
     { nome: "Boro Breath", video: "", desc: "Sopro massiço de chamas em forma de cone. Dano de fogo em grande área." },
     { nome: "Ragnarok — Heaven and Earth Sever", video: "", desc: "Golpe final: Kaido concentra toda a força de seu kanabō revestido de Haki e desce em arco vertical. Dano devastador." }
   ]
 },
 {
   nome: "Marshall D. Teach — Barba Negra",
   emoji: "🌑",
   desc: "Único ser conhecido a possuir dois poderes de Akuma no Mi: a Yami Yami no Mi (Trevas) e a Gura Gura no Mi (Tremor). O vilão mais temido da era atual.",
   skills: [
     { nome: "Black Hole — Darkness Vortex", video: "", desc: "Barba Negra cria um vórtice de trevas que absorve tudo ao redor, incluindo ataques inimigos." },
     { nome: "Kurouzu — Dark Whirlpool", video: "", desc: "Puxa o inimigo com força gravitacional inexorável para dentro do alcance do Dark Hole." },
     { nome: "Gura Gura — Seismic Surge", video: "", desc: "Treme o ar criando um tsunami de impacto que se propaga pelo campo de batalha." },
     { nome: "Liberate", video: "", desc: "Libera toda a energia das trevas absorvidas de volta ao inimigo em uma explosão de dano puro." },
     { nome: "Sky Quake", video: "", desc: "Ataque final — Barba Negra segura o ar com as duas mãos e rasga o espaço ao meio, causando dano massivo em toda a área." }
   ]
 }

];

var DIFF = { 

 elite: "Modo Elite ativado — os bosses ganham 50% a mais de HP e novos padrões de ataque. Recomendado para jogadores nível 80+.",
 hard:  "Modo Hard ativado — os bosses ganham 25% a mais de HP. Ataques mais frequentes. Recomendado para jogadores nível 60+."

};

var tabsEl = document.getElementById('lk-tabs'); var panelsEl = document.getElementById('lk-panels'); var outer = document.getElementById('lk-outer'); var ban = document.getElementById('lk-ban'); var banBg = document.getElementById('lk-ban-bg'); var banTx = document.getElementById('lk-ban-tx'); var curDiff = null;

BOSSES.forEach(function(boss, idx) { 

 // Tab
 var tab = document.createElement('button');
 tab.className = 'lk-tab' + (idx === 0 ? ' on' : );
 tab.textContent = boss.nome.split(' ').slice(-1)[0]; // surname for brevity
 tab.addEventListener('click', function() { switchTab(idx); });
 tabsEl.appendChild(tab);

 // Panel
 var panel = document.createElement('div');
 panel.className = 'lk-panel' + (idx === 0 ? ' on' : );

 // Boss card
 var card = document.createElement('div');
 card.className = 'lk-bcard';

 var port = document.createElement('div');
 port.className = 'lk-bportrait';
 port.textContent = boss.emoji;
 card.appendChild(port);

 var info = document.createElement('div');
 info.className = 'lk-binfo';

info.innerHTML = '

' + boss.nome + '

' + boss.desc + '

'; 

 card.appendChild(info);
 panel.appendChild(card);

 // Skills
 if (boss.skills.length > 0) {
   var slbl = document.createElement('div');
   slbl.className = 'lk-slbl';
   slbl.textContent = 'Habilidades';
   panel.appendChild(slbl);

   boss.skills.forEach(function(skill, si) {
     var item = document.createElement('div');
     item.className = 'lk-sk';

     var btn = document.createElement('button');
     btn.className = 'lk-skbtn';
     btn.innerHTML =

'

' + 
         '' + (si+1) + '' +
         '' + skill.nome + '' +
'

' + 

       '▼';

     var body = document.createElement('div');
     body.className = 'lk-skbody';

     body.innerHTML =

'

' + '
' + 
           '▶' +
           'Vídeo da habilidade' +
'
' + '

' + '

' + skill.desc + '

'; 

     item.appendChild(btn);
     item.appendChild(body);

     btn.addEventListener('click', function() {
       var isOpen = item.classList.contains('open');
       item.classList.toggle('open', !isOpen);
       body.classList.toggle('open', !isOpen);
     });

     panel.appendChild(item);
   });
 }

 panelsEl.appendChild(panel);

});

function switchTab(idx) { 

 tabsEl.querySelectorAll('.lk-tab').forEach(function(t, i) { t.classList.toggle('on', i === idx); });
 panelsEl.querySelectorAll('.lk-panel').forEach(function(p, i) { p.classList.toggle('on', i === idx); });

}

// Difficulty document.querySelectorAll('.lk-db').forEach(function(btn) { 

 btn.addEventListener('click', function() {
   var d = btn.getAttribute('data-d');
   if (curDiff === d) {
     curDiff = null;
     document.querySelectorAll('.lk-db').forEach(function(b) { b.classList.remove('on'); });
     ban.classList.remove('on');
   } else {
     curDiff = d;
     document.querySelectorAll('.lk-db').forEach(function(b) { b.classList.toggle('on', b.getAttribute('data-d') === d); });
     banBg.textContent = d === 'elite' ? 'Elite' : 'Hard';
     banTx.textContent = DIFF[d];
     ban.classList.add('on');
   }
 });

});

// Theme var dark = localStorage.getItem('lk-theme') === 'dark'; function applyTheme(d) { 

 dark = d;
 outer.classList.toggle('dk', d);
 document.getElementById('lk-tb').textContent = d ? '☀️' : '🌙';
 localStorage.setItem('lk-theme', d ? 'dark' : 'light');

} applyTheme(dark); document.getElementById('lk-tb').addEventListener('click', function() { applyTheme(!dark); }); </script> </body> </html>

Disponível em “https://wiki.gla.com.br/index.php?title=Usuário_Discussão:Larifk&oldid=45076”