|
|
| (18 revisões intermediárias pelo mesmo usuário não estão sendo mostradas) |
| Linha 1: |
Linha 1: |
| <!DOCTYPE html>
| | <div class="ro-wave-wrapper"> |
| <html lang="pt-br">
| | <div class=" ro- item- wave ro- pos- 1"><div class=" ro- circle- wave"> [[Arquivo:Class- path- thumb_ninja- f.png |link= Ninja]]</ div></div> |
| <head>
| | <div class=" ro- item- wave ro- pos- 2"><div class=" ro- circle- wave"> [[Arquivo:Class- path- thumb_mercador- f.png |link= Mercador]]</div></div> |
| <meta charset="UTF-8">
| | <div class=" ro- item- wave ro- pos- 3"><div class=" ro- circle- wave"> [[Arquivo:Class- path- thumb_novico- f.png |link= Noviço]]</ div></div> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0">
| | <div class=" ro- item- wave ro- pos- 4"><div class=" ro- circle- wave"> [[Arquivo:Class- path- thumb_espadachim- f.png |link= Espadachim]]</ div></div> |
| <title>Árvore de Habilidades Invocador</title>
| | <div class=" ro- item- wave ro- pos-5"><div class=" ro- circle- wave"> [[Arquivo:Class- path- thumb_aprendiz- f.png |link= Aprendiz]]</div></div> |
| <style>
| | <div class=" ro- item- wave ro- pos- 6"><div class=" ro- circle- wave"> [[Arquivo:Class- path- thumb_mago- f.png |link= Mago]]</div></div> |
| :root {
| | <div class=" ro- item- wave ro- pos- 7"><div class=" ro- circle- wave"> [[Arquivo:Class- path- thumb_arqueiro- f.png |link= Arqueiro]]</div></div> |
| --bg-color: #f0f0f0;
| | <div class=" ro- item- wave ro- pos- 8"><div class=" ro- circle- wave"> [[Arquivo:Class- path- thumb_gatuno- f.png |link= Gatuno]]</div></div> |
| --line-color: #a0c8f0;
| | <div class=" ro- item- wave ro- pos- 9"><div class=" ro- circle- wave"> [[Arquivo:Class- path- thumb_taekwon- f.png |link= Taekwon]]</div></div> |
| --nv-color: #333;
| | <div class=" ro- item- wave ro- pos- 10"><div class=" ro- circle- wave"> [[Arquivo:Class- path- thumb_justiceiro- f.png |link= Justiceiro]]</div></div> |
| }
| |
| | |
| body {
| |
| font-family: 'Segoe UI', Arial, 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;
| |
| }
| |
| | |
| .skill-card {
| |
| width: 140px;
| |
| background: linear-gradient(180deg, #5ba4f5 0%, #3d7ecd 100%);
| |
| border: 2px solid #ffffff;
| |
| border-radius: 6px;
| |
| padding: 4px;
| |
| 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;
| |
| margin-right: 8px;
| |
| object-fit: contain;
| |
| background-color: rgba(0,0,0,0.2);
| |
| border-radius: 3px;
| |
| }
| |
| | |
| .skill-name {
| |
| color: white;
| |
| font-size: 11px;
| |
| font-weight: bold;
| |
| line-height: 1.1;
| |
| text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
| |
| }
| |
| | |
| .level-tag {
| |
| position: absolute;
| |
| bottom: -18px;
| |
| right: 0px;
| |
| font-size: 11px;
| |
| font-weight: bold;
| |
| color: var(--nv-color);
| |
| }
| |
| | |
| /* Conectores Verticais */
| |
| .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%);
| |
| }
| |
| | |
| .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;
| |
| }
| |
| | |
| /* 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="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>
| |
