|
|
| (22 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> |
| --box-blue: #4a90e2;
| | <div class=" ro- item- wave ro- pos- 9"><div class=" ro- circle- wave"> [[Arquivo:Class- path- thumb_taekwon- f. png|link= Taekwon]]</div></div> |
| --text-color: #ffffff;
| | <div class=" ro- item- wave ro- pos- 10"><div class=" ro- circle- wave"> [[Arquivo:Class- path- thumb_justiceiro- f. png|link= Justiceiro]]</div></div> |
| --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> | | </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>
| |
