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

← Edição anterior Edição posterior →

VisualWikitexto

Edição das 06h26min 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

@@ Linha 1: / Linha 1: @@
+<!DOCTYPE html>
+<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;
+            --box-blue: #4a90e2;
+            --text-color: #ffffff;
+            --line-color: #a0c8f0;
+            --nv-color: #333;
+        }
+        body {
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+            background-color: var(--bg-color);
+            display: flex;
+            justify-content: center;
+            padding: 40px;
+            margin: 0;
+        }
+        .skill-tree-container {
+            display: flex;
+            gap: 40px;
+            position: relative;
+        }
+        .column {
+            display: flex;
+            flex-direction: column;
+            gap: 25px;
+            align-items: center;
+        }
+        /* Estilo do Card de Habilidade */
+        .skill-card {
+            width: 130px;
+            background: linear-gradient(180deg, #5ba4f5 0%, #3d7ecd 100%);
+            border: 2px solid #ffffff;
+            border-radius: 6px;
+            padding: 5px;
+            display: flex;
+            align-items: center;
+            box-shadow: 2px 2px 5px rgba(0,0,0,0.2);
+            position: relative;
+            z-index: 2;
+        }
+        .skill-icon {
+            width: 32px;
+            height: 32px;
+            background-color: #333;
+            border-radius: 4px;
+            margin-right: 8px;
+            flex-shrink: 0;
+            border: 1px solid rgba(255,255,255,0.3);
+        }
+        .skill-name {
+            color: white;
+            font-size: 11px;
+            font-weight: bold;
+            line-height: 1.2;
+            text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
+        }
+        /* Nível da Habilidade */
+        .level-tag {
+            position: absolute;
+            bottom: -18px;
+            right: 0px;
+            font-size: 12px;
+            font-weight: bold;
+            color: var(--nv-color);
+        }
+        /* Linhas de Conexão Vertical */
+        .skill-card:not(.no-arrow)::after {
+            content: '';
+            position: absolute;
+            bottom: -27px;
+            left: 50%;
+            width: 4px;
+            height: 25px;
+            background-color: var(--line-color);
+            transform: translateX(-50%);
+            z-index: 1;
+        }
+        /* Seta na ponta da linha */
+        .skill-card:not(.no-arrow)::before {
+            content: '▼';
+            position: absolute;
+            bottom: -32px;
+            left: 50%;
+            transform: translateX(-50%) scaleX(1.5);
+            color: var(--line-color);
+            font-size: 10px;
+            z-index: 2;
+        }
+        /* Linha Horizontal Especial (Início -> Invocar) */
+        .special-connector {
+            position: absolute;
+            top: 25px;
+            left: 140px;
+            width: 250px;
+            height: 4px;
+            background-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 */
+        .t-connector {
+            position: absolute;
+            top: 100px;
+            left: 255px;
+            width: 420px;
+            height: 4px;
+            background-color: var(--line-color);
+        }
+        .no-arrow::after, .no-arrow::before { display: none !important; }
+    </style>
+</head>
+<body>
+<div class="skill-tree-container">
+    <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"><div class="skill-icon"></div><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"><div class="skill-icon"></div><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 no-arrow"><div class="skill-icon"></div><span class="skill-name">Pulo do Gato</span><span class="level-tag">Nv.3</span></div>
+    </div>
+    <div class="special-connector"></div>
+    <div class="column" style="margin-top: 0px;">
+        <div class="skill-card" style="visibility: hidden;"></div> <div class="skill-card" id="invocar-main">
+            <div class="skill-icon"></div><span class="skill-name">Invocar</span><span class="level-tag">Nv.1</span>
+        </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"><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"><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"><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"><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"><div class="skill-icon"></div><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"><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 no-arrow"><div class="skill-icon"></div><span class="skill-name">Invocação das Marés</span></div>
+    </div>
+    <div class="column">
+        <div class="skill-card" style="visibility: hidden;"></div>
+        <div class="skill-card" style="visibility: hidden;"></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"><div class="skill-icon"></div><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"><div class="skill-icon"></div><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"><div class="skill-icon"></div><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"><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 no-arrow"><div class="skill-icon"></div><span class="skill-name">Invocação da Selva</span></div>
+    </div>
+    <div class="column">
+        <div class="skill-card" style="margin-left: -50px;">
+            <div class="skill-icon"></div><span class="skill-name">Ampliar Alcance</span><span class="level-tag">Nv.1</span>
+        </div>
+        <div class="skill-card" style="visibility: hidden;"></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"><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"><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"><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"><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"><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"><div class="skill-icon"></div><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">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>
+<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>
+</html>

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

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

Menu de navegação

Pesquisa