Usuário Discussão:Larifk

De Wiki Gla
Revisão de 12h39min de 17 de março de 2026 por Larifk (discussão | contribs)
Ir para navegação Ir para pesquisar

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