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

De Farmland
Ir para navegação Ir para pesquisar
Sem resumo de edição
Sem resumo de edição
Linha 1: Linha 1:
<!DOCTYPE html>
<div class="skill-tree">
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Árvore de Habilidades Invocador</title>
    <style>
        :root {
            --bg-color: #f0f0f0;
            --line-color: #a0c8f0;
            --nv-color: #333;
        }


        body {
  <!-- Instintos Básicos -->
            font-family: 'Segoe UI', Arial, sans-serif;
  <div class="skill-column">
            background-color: var(--bg-color);
    <div class="skill-title">Instintos Básicos</div>
            display: flex;
            justify-content: center;
            padding: 40px;
            margin: 0;
        }


        .skill-tree-container {
    <div class="skill-box"><img src="Instintos Básicos.png">Instintos Básicos</div>
            display: flex;
    <div class="arrow"></div>
            gap: 40px;
    <div class="skill-box"><img src="Mordida.png">Mordida</div>
            position: relative;
    <div class="arrow"></div>
        }
    <div class="skill-box"><img src="Gato-Mia.png">Gato-Mia</div>
    <div class="arrow"></div>
    <div class="skill-box"><img src="Arranhar.png">Arranhar</div>
    <div class="arrow"></div>
    <div class="skill-box"><img src="Quatro Patas.png">Quatro Patas</div>
    <div class="arrow"></div>
    <div class="skill-box"><img src="Pulo do Gato.png">Pulo do Gato</div>
  </div>


        .column {
  <!-- Invocar -->
            display: flex;
  <div class="skill-column">
            flex-direction: column;
    <div class="skill-title">Invocar</div>
            gap: 25px;
            align-items: center;
        }


        .skill-card {
    <div class="skill-box"><img src="Camarão Fresquinho.png">Camarão Fresquinho</div>
            width: 140px;
    <div class="arrow"></div>
            background: linear-gradient(180deg, #5ba4f5 0%, #3d7ecd 100%);
    <div class="skill-box"><img src="Chuva de Mariscos.png">Chuva de Mariscos</div>
            border: 2px solid #ffffff;
    <div class="arrow"></div>
            border-radius: 6px;
    <div class="skill-box"><img src="Dádiva do Atum.png">Dádiva do Atum</div>
            padding: 4px;
    <div class="arrow"></div>
            display: flex;
    <div class="skill-box"><img src="Proteção da Orla.png">Proteção da Orla</div>
            align-items: center;
    <div class="arrow"></div>
            box-shadow: 2px 2px 5px rgba(0,0,0,0.2);
    <div class="skill-box"><img src="Poder das Marés.png">Poder das Marés</div>
            position: relative;
    <div class="arrow"></div>
            z-index: 2;
    <div class="skill-box"><img src="Lambida.png">Lambida</div>
        }
    <div class="arrow"></div>
    <div class="skill-box"><img src="Banho de Lambidas.png">Banho de Lambidas</div>
    <div class="arrow"></div>
    <div class="skill-box"><img src="Festa do Camarão.png">Festa do Camarão</div>
    <div class="arrow"></div>
    <div class="skill-box"><img src="Invocação das Marés.png">Invocação das Marés</div>
  </div>


        .skill-icon {
  <!-- Lança Gateira -->
            width: 32px;
  <div class="skill-column">
            height: 32px;
    <div class="skill-title">Lança Gateira</div>
            margin-right: 8px;
            object-fit: contain;
            background-color: rgba(0,0,0,0.2);
            border-radius: 3px;
        }


        .skill-name {
    <div class="skill-box"><img src="Lança Gateira.png">Lança Gateira</div>
            color: white;
    <div class="arrow"></div>
            font-size: 11px;
    <div class="skill-box"><img src="Hera Venenosa.png">Hera Venenosa</div>
            font-weight: bold;
    <div class="arrow"></div>
            line-height: 1.1;
    <div class="skill-box"><img src="Meteoros de Nepeta.png">Meteoros de Nepeta</div>
            text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
    <div class="arrow"></div>
        }
    <div class="skill-box"><img src="Pulverizar.png">Pulverizar</div>
    <div class="arrow"></div>
    <div class="skill-box"><img src="Poder da Selva.png">Poder da Selva</div>
    <div class="arrow"></div>
    <div class="skill-box"><img src="Despertar.png">Despertar</div>
    <div class="arrow"></div>
    <div class="skill-box"><img src="Balaio de Gato.png">Balaio de Gato</div>
    <div class="arrow"></div>
    <div class="skill-box"><img src="Mato de Gato.png">Mato de Gato</div>
    <div class="arrow"></div>
    <div class="skill-box"><img src="Invocação da Selva.png">Invocação da Selva</div>
  </div>


        .level-tag {
  <!-- Chilique de Picky -->
            position: absolute;
  <div class="skill-column">
            bottom: -18px;
    <div class="skill-title">Chilique de Picky</div>
            right: 0px;
            font-size: 11px;
            font-weight: bold;
            color: var(--nv-color);
        }


        /* Conectores Verticais */
     <div class="skill-box"><img src="Chilique de Picky.png">Chilique de Picky</div>
        .skill-card:not(.no-arrow)::after {
    <div class="arrow"></div>
            content: '';
    <div class="skill-box"><img src="Impulso de Arclouse.png">Impulso de Arclouse</div>
            position: absolute;
    <div class="arrow"></div>
            bottom: -27px;
     <div class="skill-box"><img src="Ferida de Tarou.png">Ferida de Tarou</div>
            left: 50%;
    <div class="arrow"></div>
            width: 4px;
     <div class="skill-box"><img src="Cometas Lunáticos.png">Cometas Lunáticos</div>
            height: 25px;
    <div class="arrow"></div>
            background-color: var(--line-color);
    <div class="skill-box"><img src="Poder da Fauna.png">Poder da Fauna</div>
            transform: translateX(-50%);
    <div class="arrow"></div>
        }
    <div class="skill-box"><img src="Riscar Fósforo.png">Riscar Fósforo</div>
 
    <div class="arrow"></div>
        .skill-card:not(.no-arrow)::before {
     <div class="skill-box"><img src="Intimidar.png">Intimidar</div>
            content: '▼';
    <div class="arrow"></div>
            position: absolute;
    <div class="skill-box"><img src="Ataque Selvagem.png">Ataque Selvagem</div>
            bottom: -32px;
    <div class="arrow"></div>
            left: 50%;
    <div class="skill-box"><img src="Invocação da Fauna.png">Invocação da Fauna</div>
            transform: translateX(-50%) scaleX(1.5);
  </div>
            color: var(--line-color);
            font-size: 10px;
        }
 
        /* Conector Principal (Início -> Invocar) */
        .main-line {
            position: absolute;
            top: 25px;
            left: 150px;
            width: 240px;
            height: 4px;
            background-color: var(--line-color);
        }
        .main-line::after { content: '▶'; position: absolute; right: -5px; top: -5px; color: var(--line-color); }
 
        /* Conector em T (Horizontal das 3 colunas) */
        .t-connector {
            position: absolute;
            top: 100px;
            left: 260px;
            width: 430px;
            height: 4px;
            background-color: var(--line-color);
        }
 
        .spacer { visibility: hidden; height: 44px; }
        .no-arrow::after, .no-arrow::before { display: none !important; }
 
     </style>
</head>
<body>
 
<div class="skill-tree-container">
   
    <div class="column">
        <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"><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"><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"><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"><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"><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 class="main-line"></div>
 
     <div class="column">
        <div class="spacer"></div>
        <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 class="t-connector"></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"><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"><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"><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"><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"><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"><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"><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"><img src="Invocação_das_Marés.png" class="skill-icon"><span class="skill-name">Invocação das Marés</span></div>
     </div>
 
    <div class="column">
        <div class="spacer"></div>
        <div class="spacer"></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"><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"><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"><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"><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"><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"><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"><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"><img src="Invocação_da_Selva.png" class="skill-icon"><span class="skill-name">Invocação da Selva</span></div>
    </div>
 
     <div class="column">
        <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="spacer"></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"><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"><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"><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"><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"><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"><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"><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 no-arrow"><img src="Invocação_da_Fauna.png" class="skill-icon"><span class="skill-name">Invocação da Fauna</span></div>
    </div>


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

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

Instintos Básicos
<img src="Instintos Básicos.png">Instintos Básicos
<img src="Mordida.png">Mordida
<img src="Gato-Mia.png">Gato-Mia
<img src="Arranhar.png">Arranhar
<img src="Quatro Patas.png">Quatro Patas
<img src="Pulo do Gato.png">Pulo do Gato
Invocar
<img src="Camarão Fresquinho.png">Camarão Fresquinho
<img src="Chuva de Mariscos.png">Chuva de Mariscos
<img src="Dádiva do Atum.png">Dádiva do Atum
<img src="Proteção da Orla.png">Proteção da Orla
<img src="Poder das Marés.png">Poder das Marés
<img src="Lambida.png">Lambida
<img src="Banho de Lambidas.png">Banho de Lambidas
<img src="Festa do Camarão.png">Festa do Camarão
<img src="Invocação das Marés.png">Invocação das Marés
Lança Gateira
<img src="Lança Gateira.png">Lança Gateira
<img src="Hera Venenosa.png">Hera Venenosa
<img src="Meteoros de Nepeta.png">Meteoros de Nepeta
<img src="Pulverizar.png">Pulverizar
<img src="Poder da Selva.png">Poder da Selva
<img src="Despertar.png">Despertar
<img src="Balaio de Gato.png">Balaio de Gato
<img src="Mato de Gato.png">Mato de Gato
<img src="Invocação da Selva.png">Invocação da Selva
Chilique de Picky
<img src="Chilique de Picky.png">Chilique de Picky
<img src="Impulso de Arclouse.png">Impulso de Arclouse
<img src="Ferida de Tarou.png">Ferida de Tarou
<img src="Cometas Lunáticos.png">Cometas Lunáticos
<img src="Poder da Fauna.png">Poder da Fauna
<img src="Riscar Fósforo.png">Riscar Fósforo
<img src="Intimidar.png">Intimidar
<img src="Ataque Selvagem.png">Ataque Selvagem
<img src="Invocação da Fauna.png">Invocação da Fauna