Teste scripts: mudanças entre as edições

De Farmland
Ir para navegação Ir para pesquisar
← Edição anteriorEdição posterior →
Adm.mayuka (discussão | contribs)
Burocratas, Administradores da interface, Administradores
5 356 edições
VisualWikitexto
Sem resumo de edição
Sem resumo de edição
Linha 4: Linha 4:
     <meta charset="UTF-8">
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Árvore de Habilidades - Invocador</title>
     <title>Árvore de Habilidades Invocador</title>
     <style>
     <style>
         :root {
         :root {
             --bg-color: #f0f0f0;
             --bg-color: #f0f0f0;
            --box-blue: #4a90e2;
            --text-color: #ffffff;
             --line-color: #a0c8f0;
             --line-color: #a0c8f0;
             --nv-color: #333;
             --nv-color: #333;
Linha 15: Linha 13:


         body {
         body {
             font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
             font-family: 'Segoe UI', Arial, sans-serif;
             background-color: var(--bg-color);
             background-color: var(--bg-color);
             display: flex;
             display: flex;
Linha 36: Linha 34:
         }
         }


        /* Estilo do Card de Habilidade */
         .skill-card {
         .skill-card {
             width: 130px;
             width: 140px;
             background: linear-gradient(180deg, #5ba4f5 0%, #3d7ecd 100%);
             background: linear-gradient(180deg, #5ba4f5 0%, #3d7ecd 100%);
             border: 2px solid #ffffff;
             border: 2px solid #ffffff;
             border-radius: 6px;
             border-radius: 6px;
             padding: 5px;
             padding: 4px;
             display: flex;
             display: flex;
             align-items: center;
             align-items: center;
Linha 53: Linha 50:
             width: 32px;
             width: 32px;
             height: 32px;
             height: 32px;
            background-color: #333;
            border-radius: 4px;
             margin-right: 8px;
             margin-right: 8px;
             flex-shrink: 0;
             object-fit: contain;
             border: 1px solid rgba(255,255,255,0.3);
             background-color: rgba(0,0,0,0.2);
            border-radius: 3px;
         }
         }


Linha 64: Linha 60:
             font-size: 11px;
             font-size: 11px;
             font-weight: bold;
             font-weight: bold;
             line-height: 1.2;
             line-height: 1.1;
             text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
             text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
         }
         }


        /* Nível da Habilidade */
         .level-tag {
         .level-tag {
             position: absolute;
             position: absolute;
             bottom: -18px;
             bottom: -18px;
             right: 0px;
             right: 0px;
             font-size: 12px;
             font-size: 11px;
             font-weight: bold;
             font-weight: bold;
             color: var(--nv-color);
             color: var(--nv-color);
         }
         }


         /* Linhas de Conexão Vertical */
         /* Conectores Verticais */
         .skill-card:not(.no-arrow)::after {
         .skill-card:not(.no-arrow)::after {
             content: '';
             content: '';
Linha 88: Linha 83:
             background-color: var(--line-color);
             background-color: var(--line-color);
             transform: translateX(-50%);
             transform: translateX(-50%);
            z-index: 1;
         }
         }


        /* Seta na ponta da linha */
         .skill-card:not(.no-arrow)::before {
         .skill-card:not(.no-arrow)::before {
             content: '▼';
             content: '▼';
Linha 100: Linha 93:
             color: var(--line-color);
             color: var(--line-color);
             font-size: 10px;
             font-size: 10px;
            z-index: 2;
         }
         }


         /* Linha Horizontal Especial (Início -> Invocar) */
         /* Conector Principal (Início -> Invocar) */
         .special-connector {
         .main-line {
             position: absolute;
             position: absolute;
             top: 25px;
             top: 25px;
             left: 140px;
             left: 150px;
             width: 250px;
             width: 240px;
             height: 4px;
             height: 4px;
             background-color: var(--line-color);
             background-color: var(--line-color);
         }
         }
       
         .main-line::after { content: '▶'; position: absolute; right: -5px; top: -5px; color: var(--line-color); }
         .special-connector::after {
            content: '▶';
            position: absolute;
            right: -5px;
            top: -5px;
            color: var(--line-color);
        }


         /* Linha em T para as 3 ramificações */
         /* Conector em T (Horizontal das 3 colunas) */
         .t-connector {
         .t-connector {
             position: absolute;
             position: absolute;
             top: 100px;
             top: 100px;
             left: 255px;
             left: 260px;
             width: 420px;
             width: 430px;
             height: 4px;
             height: 4px;
             background-color: var(--line-color);
             background-color: var(--line-color);
         }
         }


        .spacer { visibility: hidden; height: 44px; }
         .no-arrow::after, .no-arrow::before { display: none !important; }
         .no-arrow::after, .no-arrow::before { display: none !important; }


Linha 140: Linha 126:
      
      
     <div class="column">
     <div class="column">
         <div class="skill-card"><div class="skill-icon"></div><span class="skill-name">Instintos Básicos</span><span class="level-tag">Nv.1</span></div>
         <div class="skill-card"><img src="Instintos_Básicos.png" class="skill-icon"><span class="skill-name">Instintos Básicos</span><span class="level-tag">Nv.1</span></div>
         <div class="skill-card"><div class="skill-icon"></div><span class="skill-name">Mordida</span><span class="level-tag">Nv.1</span></div>
         <div class="skill-card"><img src="Mordida.png" class="skill-icon"><span class="skill-name">Mordida</span><span class="level-tag">Nv.1</span></div>
         <div class="skill-card"><div class="skill-icon"></div><span class="skill-name">Gato-Mia</span><span class="level-tag">Nv.1</span></div>
         <div class="skill-card"><img src="Gato-Mia.png" class="skill-icon"><span class="skill-name">Gato-Mia</span><span class="level-tag">Nv.1</span></div>
         <div class="skill-card"><div class="skill-icon"></div><span class="skill-name">Arranhar</span><span class="level-tag">Nv.3</span></div>
         <div class="skill-card"><img src="Arranhar.png" class="skill-icon"><span class="skill-name">Arranhar</span><span class="level-tag">Nv.3</span></div>
         <div class="skill-card"><div class="skill-icon"></div><span class="skill-name">Quatro Patas</span><span class="level-tag">Nv.1</span></div>
         <div class="skill-card"><img src="Quatro_Patas.png" class="skill-icon"><span class="skill-name">Quatro Patas</span><span class="level-tag">Nv.1</span></div>
         <div class="skill-card no-arrow"><div class="skill-icon"></div><span class="skill-name">Pulo do Gato</span><span class="level-tag">Nv.3</span></div>
         <div class="skill-card no-arrow"><img src="Pulo_do_Gato.png" class="skill-icon"><span class="skill-name">Pulo do Gato</span><span class="level-tag">Nv.3</span></div>
     </div>
     </div>


     <div class="special-connector"></div>
     <div class="main-line"></div>


     <div class="column" style="margin-top: 0px;">
     <div class="column">
         <div class="skill-card" style="visibility: hidden;"></div> <div class="skill-card" id="invocar-main">
         <div class="spacer"></div>
            <div class="skill-icon"></div><span class="skill-name">Invocar</span><span class="level-tag">Nv.1</span>
        <div class="skill-card"><img src="Invocar.png" class="skill-icon"><span class="skill-name">Invocar</span><span class="level-tag">Nv.1</span></div>
        </div>
         <div class="t-connector"></div>
         <div class="t-connector"></div>
         <div class="skill-card"><div class="skill-icon"></div><span class="skill-name">Camarão Fresquinho</span><span class="level-tag">Nv.3</span></div>
         <div class="skill-card"><img src="Camarão_Fresquinho.png" class="skill-icon"><span class="skill-name">Camarão Fresquinho</span><span class="level-tag">Nv.3</span></div>
         <div class="skill-card"><div class="skill-icon"></div><span class="skill-name">Chuva de Mariscos</span><span class="level-tag">Nv.3</span></div>
         <div class="skill-card"><img src="Chuva_de_Mariscos.png" class="skill-icon"><span class="skill-name">Chuva de Mariscos</span><span class="level-tag">Nv.3</span></div>
         <div class="skill-card"><div class="skill-icon"></div><span class="skill-name">Dádiva do Atum</span><span class="level-tag">Nv.3</span></div>
         <div class="skill-card"><img src="Dádiva_do_Atum.png" class="skill-icon"><span class="skill-name">Dádiva do Atum</span><span class="level-tag">Nv.3</span></div>
         <div class="skill-card"><div class="skill-icon"></div><span class="skill-name">Proteção da Orla</span><span class="level-tag">Nv.3</span></div>
         <div class="skill-card"><img src="Proteção_da_Orla.png" class="skill-icon"><span class="skill-name">Proteção da Orla</span><span class="level-tag">Nv.3</span></div>
         <div class="skill-card"><div class="skill-icon"></div><span class="skill-name">Poder das Marés</span><span class="level-tag">Nv.1</span></div>
         <div class="skill-card"><img src="Poder_das_Marés.png" class="skill-icon"><span class="skill-name">Poder das Marés</span><span class="level-tag">Nv.1</span></div>
         <div class="skill-card"><div class="skill-icon"></div><span class="skill-name">Lambida</span><span class="level-tag">Nv.5</span></div>
         <div class="skill-card"><img src="Lambida.png" class="skill-icon"><span class="skill-name">Lambida</span><span class="level-tag">Nv.5</span></div>
         <div class="skill-card"><div class="skill-icon"></div><span class="skill-name">Banho de Lambidas</span><span class="level-tag">Nv.5</span></div>
         <div class="skill-card"><img src="Banho_de_Lambidas.png" class="skill-icon"><span class="skill-name">Banho de Lambidas</span><span class="level-tag">Nv.5</span></div>
         <div class="skill-card"><div class="skill-icon"></div><span class="skill-name">Festa do Camarão</span><span class="level-tag">Nv.5</span></div>
         <div class="skill-card"><img src="Festa_do_Camarão.png" class="skill-icon"><span class="skill-name">Festa do Camarão</span><span class="level-tag">Nv.5</span></div>
         <div class="skill-card no-arrow"><div class="skill-icon"></div><span class="skill-name">Invocação das Marés</span></div>
         <div class="skill-card no-arrow"><img src="Invocação_das_Marés.png" class="skill-icon"><span class="skill-name">Invocação das Marés</span></div>
     </div>
     </div>


     <div class="column">
     <div class="column">
         <div class="skill-card" style="visibility: hidden;"></div>
         <div class="spacer"></div>
         <div class="skill-card" style="visibility: hidden;"></div>
         <div class="spacer"></div>
         <div class="skill-card"><div class="skill-icon"></div><span class="skill-name">Lança Gateira</span><span class="level-tag">Nv.3</span></div>
         <div class="skill-card"><img src="Lança_Gateira.png" class="skill-icon"><span class="skill-name">Lança Gateira</span><span class="level-tag">Nv.3</span></div>
         <div class="skill-card"><div class="skill-icon"></div><span class="skill-name">Hera Venenosa</span><span class="level-tag">Nv.3</span></div>
         <div class="skill-card"><img src="Hera_Venenosa.png" class="skill-icon"><span class="skill-name">Hera Venenosa</span><span class="level-tag">Nv.3</span></div>
         <div class="skill-card"><div class="skill-icon"></div><span class="skill-name">Meteoros de Nepeta</span><span class="level-tag">Nv.3</span></div>
         <div class="skill-card"><img src="Meteoros_de_Nepeta.png" class="skill-icon"><span class="skill-name">Meteoros de Nepeta</span><span class="level-tag">Nv.3</span></div>
         <div class="skill-card"><div class="skill-icon"></div><span class="skill-name">Pulverizar</span><span class="level-tag">Nv.3</span></div>
         <div class="skill-card"><img src="Pulverizar.png" class="skill-icon"><span class="skill-name">Pulverizar</span><span class="level-tag">Nv.3</span></div>
         <div class="skill-card"><div class="skill-icon"></div><span class="skill-name">Poder da Selva</span><span class="level-tag">Nv.1</span></div>
         <div class="skill-card"><img src="Poder_da_Selva.png" class="skill-icon"><span class="skill-name">Poder da Selva</span><span class="level-tag">Nv.1</span></div>
         <div class="skill-card"><div class="skill-icon"></div><span class="skill-name">Despertar</span><span class="level-tag">Nv.5</span></div>
         <div class="skill-card"><img src="Despertar.png" class="skill-icon"><span class="skill-name">Despertar</span><span class="level-tag">Nv.5</span></div>
         <div class="skill-card"><div class="skill-icon"></div><span class="skill-name">Balaio de Gato</span><span class="level-tag">Nv.5</span></div>
         <div class="skill-card"><img src="Balaio_de_Gato.png" class="skill-icon"><span class="skill-name">Balaio de Gato</span><span class="level-tag">Nv.5</span></div>
         <div class="skill-card"><div class="skill-icon"></div><span class="skill-name">Mato de Gato</span><span class="level-tag">Nv.5</span></div>
         <div class="skill-card"><img src="Mato_de_Gato.png" class="skill-icon"><span class="skill-name">Mato de Gato</span><span class="level-tag">Nv.5</span></div>
         <div class="skill-card no-arrow"><div class="skill-icon"></div><span class="skill-name">Invocação da Selva</span></div>
         <div class="skill-card no-arrow"><img src="Invocação_da_Selva.png" class="skill-icon"><span class="skill-name">Invocação da Selva</span></div>
     </div>
     </div>


     <div class="column">
     <div class="column">
         <div class="skill-card" style="margin-left: -50px;">
         <div class="skill-card"><img src="Ampliar_Alcance.png" class="skill-icon"><span class="skill-name">Ampliar Alcance</span><span class="level-tag">Nv.1</span></div>
            <div class="skill-icon"></div><span class="skill-name">Ampliar Alcance</span><span class="level-tag">Nv.1</span>
         <div class="spacer"></div>
        </div>
         <div class="skill-card"><img src="Chilique_de_Picky.png" class="skill-icon"><span class="skill-name">Chilique de Picky</span><span class="level-tag">Nv.3</span></div>
         <div class="skill-card" style="visibility: hidden;"></div>
         <div class="skill-card"><img src="Impulso_de_Arclouse.png" class="skill-icon"><span class="skill-name">Impulso de Arclouse</span><span class="level-tag">Nv.3</span></div>
         <div class="skill-card"><div class="skill-icon"></div><span class="skill-name">Chilique de Picky</span><span class="level-tag">Nv.3</span></div>
         <div class="skill-card"><img src="Ferida_de_Tarou.png" class="skill-icon"><span class="skill-name">Ferida de Tarou</span><span class="level-tag">Nv.3</span></div>
         <div class="skill-card"><div class="skill-icon"></div><span class="skill-name">Impulso de Arclouse</span><span class="level-tag">Nv.3</span></div>
         <div class="skill-card"><img src="Cometas_Lunáticos.png" class="skill-icon"><span class="skill-name">Cometas Lunáticos</span><span class="level-tag">Nv.3</span></div>
         <div class="skill-card"><div class="skill-icon"></div><span class="skill-name">Ferida de Tarou</span><span class="level-tag">Nv.3</span></div>
         <div class="skill-card"><img src="Poder_da_Fauna.png" class="skill-icon"><span class="skill-name">Poder da Fauna</span><span class="level-tag">Nv.1</span></div>
         <div class="skill-card"><div class="skill-icon"></div><span class="skill-name">Cometas Lunáticos</span><span class="level-tag">Nv.3</span></div>
         <div class="skill-card"><img src="Riscar_Fósforo.png" class="skill-icon"><span class="skill-name">Riscar Fósforo</span><span class="level-tag">Nv.5</span></div>
         <div class="skill-card"><div class="skill-icon"></div><span class="skill-name">Poder da Fauna</span><span class="level-tag">Nv.1</span></div>
         <div class="skill-card"><img src="Intimidar.png" class="skill-icon"><span class="skill-name">Intimidar</span><span class="level-tag">Nv.5</span></div>
         <div class="skill-card"><div class="skill-icon"></div><span class="skill-name">Riscar Fósforo</span><span class="level-tag">Nv.5</span></div>
         <div class="skill-card"><img src="Ataque_Selvagem.png" class="skill-icon"><span class="skill-name">Ataque Selvagem</span><span class="level-tag">Nv.5</span></div>
         <div class="skill-card"><div class="skill-icon"></div><span class="skill-name">Intimidar</span><span class="level-tag">Nv.5</span></div>
         <div class="skill-card no-arrow"><img src="Invocação_da_Fauna.png" class="skill-icon"><span class="skill-name">Invocação da Fauna</span></div>
         <div class="skill-card"><div class="skill-icon"></div><span class="skill-name">Ataque Selvagem</span><span class="level-tag">Nv.5</span></div>
         <div class="skill-card no-arrow"><div class="skill-icon"></div><span class="skill-name">Invocação da Fauna</span></div>
     </div>
     </div>


</div>
</div>
<script>
    // Você pode adicionar interatividade aqui, como clicar para "upar" o nível
    document.querySelectorAll('.skill-card').forEach(card => {
        card.addEventListener('click', () => {
            console.log("Habilidade selecionada: " + card.innerText);
        });
    });
</script>


</body>
</body>
</html>
</html>

Edição das 06h42min de 21 de janeiro de 2026

<!DOCTYPE html> Árvore de Habilidades Invocador

Instintos BásicosNv.1
MordidaNv.1
Gato-MiaNv.1
ArranharNv.3
Quatro PatasNv.1
Pulo do GatoNv.3
InvocarNv.1
Camarão FresquinhoNv.3
Chuva de MariscosNv.3
Dádiva do AtumNv.3
Proteção da OrlaNv.3
Poder das MarésNv.1
LambidaNv.5
Banho de LambidasNv.5
Festa do CamarãoNv.5
Invocação das Marés
Lança GateiraNv.3
Hera VenenosaNv.3
Meteoros de NepetaNv.3
PulverizarNv.3
Poder da SelvaNv.1
DespertarNv.5
Balaio de GatoNv.5
Mato de GatoNv.5
Invocação da Selva
Ampliar AlcanceNv.1
Chilique de PickyNv.3
Impulso de ArclouseNv.3
Ferida de TarouNv.3
Cometas LunáticosNv.3
Poder da FaunaNv.1
Riscar FósforoNv.5
IntimidarNv.5
Ataque SelvagemNv.5
Invocação da Fauna

Disponível em “http://farmland.net.br/wiki/index.php?title=Teste_scripts&oldid=1439”