Mudanças entre as edições de "Teste-boss-world"

De Wiki Gla
Ir para navegação Ir para pesquisar
 
(13 revisões intermediárias pelo mesmo usuário não estão sendo mostradas)
Linha 4: Linha 4:
<templatestyles src="Predefinição:MainPage/styles.css" />
<templatestyles src="Predefinição:MainPage/styles.css" />


<div class="boss-main-wrapper" style="background: KuraiganaBackground.png;">
<div class="boss-main-wrapper">


     <div class="home-card-WorldBoss">
     <div class="home-card-WorldBoss">
         <div style="display: flex; flex-wrap: wrap; padding: 15px; gap: 15px; background: grey;">
         <div style="display: flex; flex-wrap: wrap; padding: 15px; gap: 15px; background: grey; border-radius: 12px;">
             <div style="width: 250px; height: 250px; background: #000; display: flex; align-items: center; justify-content: center; color: white; border: 2px solid #333;">[[Arquivo:Mihawk_Boss.png|250px]]</div>
             <div style="width: 175px; height: 175px; display: flex; align-items: center; justify-content: center; border: 2px solid #333;">[[Arquivo:Mihawk Avatar.png|150px]]</div>
             <div class="home-card-WorldBoss-list" style="flex:1; min-width: 50%; margin-bottom:0;">
             <div class="home-card-WorldBoss-list" style="flex:1; width: 100%; max-width: 800px; margin-bottom:0;">
                 <div class="home-title" style="font-size: 1.1em;">Informações Importantes</div>
                 <div class="home-title-WorldBoss" style="">Informações Importantes</div>
                 <div style="padding:15px;">
                 <div style="max-height: 250px; overflow-y: auto; padding: 10px; background: #fff;">
                     Recomendado grupo de 6 jogadores.
                     <ul style="list-style: none; padding: 0; margin: 0;">
                     O uso de controle de grupo (CC) é obrigatório.
                        <li style="padding:5px 0; border-bottom:1px dashed #eee;">• Primeira frase importante sobre o boss.</li>
                        <li style="padding:5px 0; border-bottom:1px dashed #eee;">• Segunda frase com uma dica de combate.</li>
                     </ul>
                 </div>
                 </div>
             </div>
             </div>
             <div style="width: 250px; height: 250px; padding: 10px; background: blue;">
             <div style="style="flex:1; margin-bottom:0;">
                <div class="home-title-WorldBoss" style="">Localização</div>
                <div style="width: 300px; height: 200px; display: flex; align-items: center; justify-content: center; border: 2px solid #333; background: white;">[[Arquivo:Mihawklocalização.png|300px]]</div>
             </div>
             </div>
         </div>
         </div>
     </div>
     </div>


     <div class="boss-navigation">
     <tabber>
        <div class="boss-nav-btn active" data-target="hab">Habilidades</div>
    Habilidades=
        <div class="boss-nav-btn" data-target="fas">Fases</div>
    <div class="home-card" style="margin-top:15px;">
         <div class="boss-nav-btn" data-target="rec">Rank e Tiers</div>
         <div style="padding:15px;">{{BossSkills|module=Mihawk}}</div>
        <div class="boss-nav-btn" data-target="per">Personagens Recomendados</div>
     </div>
     </div>


     <div id="hab" class="boss-section active">
    |-|
         <div class="home-card">
    Fases=
             <div style="padding:15px;">{{BossSkills|module=Mihawk}}</div>
     <div class="boss-grid" style="margin-top:15px;">
         <div class="boss-card">
            <div style="height:4px; background:#46C001;"></div>
            <div style="padding:10px; font-weight:bold; border-bottom:1px solid #eee;">Fase 1 a 3</div>
             <div style="padding:15px; font-size:13px;">Início calmo, utiliza apenas teleporte.</div>
         </div>
         </div>
     </div>
     </div>


     <div id="fas" class="boss-section">
    |-|
         <div class="boss-grid">
    Rank e Tiers=
            <div class="boss-card">
     <div class="home-card" style="margin-top:15px; padding:20px;">
                <div style="height:4px; background:#46C001;"></div>
         Aqui entram as informações de Rank...
                <div style="padding:10px; font-weight:bold; border-bottom:1px solid #eee;">Fase 1 a 3</div>
    </div>
                 <div style="padding:15px; font-size:13px;">Início calmo, utiliza apenas teleporte.</div>
 
    |-|
    Personagens=
    <div class="boss-grid" style="margin-top:15px;">
        <div class="boss-card">
            <div class="home-title" style="background:#318CE7; font-size: 1.5em;">Recomendados: Tanks</div>
            <div style="padding:10px; height:300px; overflow-y:auto; text-align: center;">
                 [[Arquivo:Card-jinbe.png|300px]]
                [[Arquivo:Card-kid.png|300px]]
             </div>
             </div>
        </div>
        <div class="boss-card">
            <div class="home-title" style="background:#e74c3c; font-size: 1.5em;">Recomendados: DPS</div>
            <div style="padding:10px; height:300px; overflow-y:auto; text-align: center;">
                [[Arquivo:Card-mihawk.png|300px]]
                [[Arquivo:Card-zoro.png|300px]]
             </div>
             </div>
    </div>
        </div>


    <div id="per" class="boss-section">
         <div class="boss-card">
         <div class="boss-grid">
             <div class="home-title" style="background:#2ecc71; font-size: 1.5em;">Recomendados: Suporte</div>
             <div class="boss-card">
            <div style="padding:10px; height:300px; overflow-y:auto; text-align: center;">
                <div class="home-title" style="background:#318CE7; font-size: 0.9em;">Recomendados: Tanks</div>
                [[Arquivo:Card-chopper.png|300px]]
                <div style="padding:10px; height:300px; overflow-y:auto;">
                [[Arquivo:Card-bonney.png|300px]]
                    [[Arquivo:Card-jinbe.png|250px]]
                    [[Arquivo:Card-kid.png|250px]]
                </div>
             </div>
             </div>
         </div>
         </div>
     </div>
     </div>
    </tabber>


</div>
</div>
<script>
document.querySelectorAll('.boss-nav-btn').forEach(button => {
    button.addEventListener('click', () => {
        const target = button.getAttribute('data-target');
       
        // Remove 'active' de todos
        document.querySelectorAll('.boss-nav-btn').forEach(btn => btn.classList.remove('active'));
        document.querySelectorAll('.boss-section').forEach(sec => sec.classList.remove('active'));
       
        // Adiciona 'active' no alvo
        button.classList.add('active');
        document.getElementById(target).classList.add('active');
    });
});
</script>

Edição atual tal como às 21h18min de 23 de abril de 2026

Mihawk Avatar.png
Informações Importantes
  • • Primeira frase importante sobre o boss.
  • • Segunda frase com uma dica de combate.
Localização
Mihawklocalização.png
Suichoku-Icon.png
Suihei-Icon.png
Chi wo Hau Zangeki-Icon.png
Mihakw-Dash-Icon.png
Kokuto Issen-Icon.png
Taka No Me-Icon.png
Kokuto Kogetsu-Icon.png
Kokuto Arahoshi-Icon.png
Black Sword Yoru (Passiva)-Icon.png
Fase 1 a 3
Início calmo, utiliza apenas teleporte.
       Aqui entram as informações de Rank...
Recomendados: Tanks
               Card-jinbe.png
               Card-kid.png
Recomendados: DPS
               Card-mihawk.png
               Card-zoro.png
Recomendados: Suporte
               Card-chopper.png
               Card-bonney.png