|
|
<!DOCTYPE html> |
|
|
<html lang="pt-br"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Guardians of Aetheria - Heróis e Especializações</title> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
|
|
<style> |
|
|
@import url('https://fonts.googleapis.com/css2?family=MedievalSharp&family=Poppins:wght@300;400;600;700&display=swap'); |
|
|
|
|
|
:root { |
|
|
--primary: #6d28d9; |
|
|
--secondary: #f59e0b; |
|
|
--dark: #1e293b; |
|
|
--light: #f8fafc; |
|
|
} |
|
|
|
|
|
body { |
|
|
font-family: 'Poppins', sans-serif; |
|
|
background-color: #0f172a; |
|
|
color: var(--light); |
|
|
background-image: url('https://images.unsplash.com/photo-1518562180175-34a163b1a9a9?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80'); |
|
|
background-size: cover; |
|
|
background-attachment: fixed; |
|
|
background-position: center; |
|
|
} |
|
|
|
|
|
.hero-card { |
|
|
transition: all 0.3s ease; |
|
|
transform-style: preserve-3d; |
|
|
perspective: 1000px; |
|
|
} |
|
|
|
|
|
.hero-card:hover { |
|
|
transform: translateY(-10px) scale(1.02); |
|
|
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5); |
|
|
} |
|
|
|
|
|
.hero-card::before { |
|
|
content: ''; |
|
|
position: absolute; |
|
|
top: 0; |
|
|
left: 0; |
|
|
right: 0; |
|
|
bottom: 0; |
|
|
background: linear-gradient(135deg, rgba(109,40,217,0.2) 0%, rgba(245,158,11,0.2) 100%); |
|
|
border-radius: 0.5rem; |
|
|
z-index: -1; |
|
|
} |
|
|
|
|
|
.specialization-tab { |
|
|
transition: all 0.2s ease; |
|
|
} |
|
|
|
|
|
.specialization-tab:hover { |
|
|
background-color: rgba(109, 40, 217, 0.3); |
|
|
} |
|
|
|
|
|
.specialization-tab.active { |
|
|
background-color: rgba(109, 40, 217, 0.7); |
|
|
border-left: 4px solid var(--secondary); |
|
|
} |
|
|
|
|
|
.attribute-bar { |
|
|
height: 8px; |
|
|
border-radius: 4px; |
|
|
background: linear-gradient(90deg, var(--primary) 0%, var(--secondary) 100%); |
|
|
} |
|
|
|
|
|
.floating-crystals { |
|
|
position: absolute; |
|
|
width: 100px; |
|
|
height: 100px; |
|
|
background: url('https://www.freepnglogos.com/uploads/diamond-png/diamond-png-image-diamond-png-pictures-5.png') no-repeat center center; |
|
|
background-size: contain; |
|
|
opacity: 0.1; |
|
|
animation: float 6s ease-in-out infinite; |
|
|
} |
|
|
|
|
|
@keyframes float { |
|
|
0% { transform: translateY(0px) rotate(0deg); } |
|
|
50% { transform: translateY(-20px) rotate(5deg); } |
|
|
100% { transform: translateY(0px) rotate(0deg); } |
|
|
} |
|
|
|
|
|
.crystal-1 { |
|
|
top: 10%; |
|
|
left: 5%; |
|
|
animation-delay: 0s; |
|
|
} |
|
|
|
|
|
.crystal-2 { |
|
|
top: 30%; |
|
|
right: 10%; |
|
|
animation-delay: 1s; |
|
|
} |
|
|
|
|
|
.crystal-3 { |
|
|
bottom: 20%; |
|
|
left: 15%; |
|
|
animation-delay: 2s; |
|
|
} |
|
|
|
|
|
.title-font { |
|
|
font-family: 'MedievalSharp', cursive; |
|
|
} |
|
|
|
|
|
.skill-icon { |
|
|
width: 40px; |
|
|
height: 40px; |
|
|
display: flex; |
|
|
align-items: center; |
|
|
justify-content: center; |
|
|
border-radius: 50%; |
|
|
background: rgba(255, 255, 255, 0.1); |
|
|
margin-right: 10px; |
|
|
} |
|
|
|
|
|
.skill-item { |
|
|
transition: all 0.2s ease; |
|
|
} |
|
|
|
|
|
.skill-item:hover { |
|
|
background: rgba(109, 40, 217, 0.2); |
|
|
transform: translateX(5px); |
|
|
} |
|
|
|
|
|
.ultimate-skill { |
|
|
position: relative; |
|
|
overflow: hidden; |
|
|
} |
|
|
|
|
|
.ultimate-skill::after { |
|
|
content: ''; |
|
|
position: absolute; |
|
|
top: 0; |
|
|
left: 0; |
|
|
right: 0; |
|
|
bottom: 0; |
|
|
background: linear-gradient(135deg, rgba(109,40,217,0.3) 0%, rgba(245,158,11,0.3) 100%); |
|
|
z-index: -1; |
|
|
} |
|
|
|
|
|
.hero-image { |
|
|
filter: drop-shadow(0 0 10px rgba(245, 158, 11, 0.5)); |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
|
|
|
.hero-image:hover { |
|
|
filter: drop-shadow(0 0 15px rgba(245, 158, 11, 0.8)); |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="min-h-screen"> |
|
|
|
|
|
<div class="floating-crystals crystal-1"></div> |
|
|
<div class="floating-crystals crystal-2"></div> |
|
|
<div class="floating-crystals crystal-3"></div> |
|
|
|
|
|
|
|
|
<header class="py-8 px-4 text-center relative z-10"> |
|
|
<h1 class="title-font text-5xl md:text-6xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-purple-600 to-amber-500 mb-4"> |
|
|
GUARDIANS OF AETHERIA |
|
|
</h1> |
|
|
<h2 class="text-xl md:text-2xl font-semibold text-amber-300 mb-6">Heróis e Especializações</h2> |
|
|
<p class="max-w-3xl mx-auto text-gray-300 text-lg"> |
|
|
Nesta página, apresentamos as cinco heroínas básicas de Guardians of Aetheria e suas possíveis evoluções, |
|
|
habilidades únicas e caminhos de customização. Cada classe foi pensada para oferecer múltiplas formas de gameplay. |
|
|
</p> |
|
|
</header> |
|
|
|
|
|
|
|
|
<main class="container mx-auto px-4 py-8 relative z-10"> |
|
|
|
|
|
<div class="flex flex-wrap justify-center gap-4 mb-12"> |
|
|
<button onclick="showHero('warrior')" class="hero-tab active bg-gradient-to-br from-purple-700 to-purple-900 px-6 py-3 rounded-lg font-semibold flex items-center"> |
|
|
<i class="fas fa-shield-alt mr-2"></i> Guerreira |
|
|
</button> |
|
|
<button onclick="showHero('archer')" class="hero-tab bg-gradient-to-br from-green-700 to-green-900 px-6 py-3 rounded-lg font-semibold flex items-center"> |
|
|
<i class="fas fa-bullseye mr-2"></i> Arqueira |
|
|
</button> |
|
|
<button onclick="showHero('mage')" class="hero-tab bg-gradient-to-br from-blue-700 to-blue-900 px-6 py-3 rounded-lg font-semibold flex items-center"> |
|
|
<i class="fas fa-hat-wizard mr-2"></i> Maga |
|
|
</button> |
|
|
<button onclick="showHero('priestess')" class="hero-tab bg-gradient-to-br from-pink-700 to-pink-900 px-6 py-3 rounded-lg font-semibold flex items-center"> |
|
|
<i class="fas fa-heart mr-2"></i> Sacerdotisa |
|
|
</button> |
|
|
<button onclick="showHero('assassin')" class="hero-tab bg-gradient-to-br from-red-700 to-red-900 px-6 py-3 rounded-lg font-semibold flex items-center"> |
|
|
<i class="fas fa-user-ninja mr-2"></i> Assassina |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="hero-display" class="bg-gray-900 bg-opacity-80 backdrop-blur-sm rounded-xl p-6 shadow-2xl border border-gray-800"> |
|
|
|
|
|
<div id="warrior" class="hero-content"> |
|
|
<div class="flex flex-col lg:flex-row gap-8"> |
|
|
|
|
|
<div class="lg:w-1/3"> |
|
|
<div class="bg-gray-800 rounded-lg p-4 hero-card"> |
|
|
<img src="https://i.imgur.com/JzYqDfS.png" alt="Guerreira" class="w-full h-auto hero-image"> |
|
|
<h3 class="text-2xl font-bold mt-4 text-amber-400">Guerreira</h3> |
|
|
<p class="text-gray-300 mb-4">Tanque - Defesa e Controle</p> |
|
|
|
|
|
<div class="mb-4"> |
|
|
<h4 class="font-semibold text-purple-300 mb-2">Atributos Prioritários</h4> |
|
|
<div class="flex items-center mb-1"> |
|
|
<span class="w-24">Resistência</span> |
|
|
<div class="flex-1 bg-gray-700 rounded-full h-2"> |
|
|
<div class="bg-purple-600 h-2 rounded-full" style="width: 90%"></div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex items-center mb-1"> |
|
|
<span class="w-24">Força</span> |
|
|
<div class="flex-1 bg-gray-700 rounded-full h-2"> |
|
|
<div class="bg-purple-600 h-2 rounded-full" style="width: 70%"></div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex items-center"> |
|
|
<span class="w-24">Sorte</span> |
|
|
<div class="flex-1 bg-gray-700 rounded-full h-2"> |
|
|
<div class="bg-purple-600 h-2 rounded-full" style="width: 40%"></div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<p class="text-gray-300"> |
|
|
Função Principal: Proteger sua equipe, absorver dano e controlar o campo de batalha. |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="lg:w-2/3"> |
|
|
<h3 class="text-2xl font-bold mb-6 text-amber-400 border-b border-amber-400 pb-2">Caminhos de Especialização</h3> |
|
|
|
|
|
<div class="flex flex-col md:flex-row gap-4 mb-6"> |
|
|
<button onclick="showSpecialization('guardian')" class="specialization-tab active flex-1 text-left p-4 rounded-lg border border-gray-700"> |
|
|
<h4 class="font-bold text-lg text-purple-300">Guardião de Bastião</h4> |
|
|
<p class="text-gray-400 text-sm">Defesa máxima, muralha intransponível</p> |
|
|
</button> |
|
|
<button onclick="showSpecialization('champion')" class="specialization-tab flex-1 text-left p-4 rounded-lg border border-gray-700"> |
|
|
<h4 class="font-bold text-lg text-purple-300">Campeã de Aço</h4> |
|
|
<p class="text-gray-400 text-sm">Equilíbrio entre ataque e defesa</p> |
|
|
</button> |
|
|
<button onclick="showSpecialization('tyranna')" class="specialization-tab flex-1 text-left p-4 rounded-lg border border-gray-700"> |
|
|
<h4 class="font-bold text-lg text-purple-300">Tyranna da Fúria</h4> |
|
|
<p class="text-gray-400 text-sm">Fúria agressiva e rompimento de defesas</p> |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="specialization-content" class="bg-gray-800 rounded-lg p-6"> |
|
|
|
|
|
<div id="guardian" class="specialization"> |
|
|
<h4 class="text-xl font-bold mb-4 text-purple-300">Guardião de Bastião</h4> |
|
|
<p class="text-gray-300 mb-6"> |
|
|
Conceito: Guerreira de defesa máxima, que transforma-se em uma muralha praticamente intransponível. |
|
|
</p> |
|
|
|
|
|
<h5 class="font-semibold text-amber-400 mb-3">Destaques de Habilidades</h5> |
|
|
|
|
|
<div class="space-y-4"> |
|
|
<div class="skill-item flex items-start p-3 rounded-lg"> |
|
|
<div class="skill-icon bg-purple-600"> |
|
|
<i class="fas fa-shield-virus text-white"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h6 class="font-bold">Postura Impenetrável</h6> |
|
|
<p class="text-gray-400 text-sm"> |
|
|
Reduz drasticamente o dano recebido e concede chance de refletir parte do dano ao atacante. |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="skill-item flex items-start p-3 rounded-lg"> |
|
|
<div class="skill-icon bg-purple-600"> |
|
|
<i class="fas fa-hand-holding-heart text-white"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h6 class="font-bold">Escudo Redentor</h6> |
|
|
<p class="text-gray-400 text-sm"> |
|
|
A Guerreira estende seu escudo a uma aliada, transferindo parte do dano recebido para si mesma. |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="ultimate-skill skill-item flex items-start p-3 rounded-lg"> |
|
|
<div class="skill-icon bg-amber-500"> |
|
|
<i class="fas fa-crown text-white"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h6 class="font-bold">Ressurgência (Poder Especial)</h6> |
|
|
<p class="text-gray-400 text-sm"> |
|
|
Ao atingir a barra de poder, a Guerreira regenera parte de sua vida e ganha invulnerabilidade temporária. |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="champion" class="specialization hidden"> |
|
|
<h4 class="text-xl font-bold mb-4 text-purple-300">Campeã de Aço</h4> |
|
|
<p class="text-gray-300 mb-6"> |
|
|
Conceito: Uma mistura de ataque e defesa, mantendo uma presença ameaçadora e garantindo proteção às aliadas. |
|
|
</p> |
|
|
|
|
|
<h5 class="font-semibold text-amber-400 mb-3">Destaques de Habilidades</h5> |
|
|
|
|
|
<div class="space-y-4"> |
|
|
<div class="skill-item flex items-start p-3 rounded-lg"> |
|
|
<div class="skill-icon bg-purple-600"> |
|
|
<i class="fas fa-hammer text-white"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h6 class="font-bold">Golpe Retumbante</h6> |
|
|
<p class="text-gray-400 text-sm"> |
|
|
Habilidade em área que causa dano moderado e atordoa inimigos próximos. |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="skill-item flex items-start p-3 rounded-lg"> |
|
|
<div class="skill-icon bg-purple-600"> |
|
|
<i class="fas fa-bolt text-white"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h6 class="font-bold">Armadura Energizada</h6> |
|
|
<p class="text-gray-400 text-sm"> |
|
|
A cada golpe sofrido, acumula energia que pode ser liberada em um ataque devastador. |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="ultimate-skill skill-item flex items-start p-3 rounded-lg"> |
|
|
<div class="skill-icon bg-amber-500"> |
|
|
<i class="fas fa-trophy text-white"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h6 class="font-bold">Troféu de Guerra (Poder Especial)</h6> |
|
|
<p class="text-gray-400 text-sm"> |
|
|
Desfere um golpe único que consome toda a energia acumulada, podendo nocautear alvos com pouca vida. |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="tyranna" class="specialization hidden"> |
|
|
<h4 class="text-xl font-bold mb-4 text-purple-300">Tyranna da Fúria</h4> |
|
|
<p class="text-gray-300 mb-6"> |
|
|
Conceito: Uma Guerreira focada em impulsos agressivos, trocando parte de sua defesa por dano maior e efeitos de rompimento de defesa inimiga. |
|
|
</p> |
|
|
|
|
|
<h5 class="font-semibold text-amber-400 mb-3">Destaques de Habilidades</h5> |
|
|
|
|
|
<div class="space-y-4"> |
|
|
<div class="skill-item flex items-start p-3 rounded-lg"> |
|
|
<div class="skill-icon bg-purple-600"> |
|
|
<i class="fas fa-fire text-white"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h6 class="font-bold">Golpe de Fúria</h6> |
|
|
<p class="text-gray-400 text-sm"> |
|
|
Aumenta dano conforme a vida da Guerreira diminui, tornando-a mais perigosa quando ferida. |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="skill-item flex items-start p-3 rounded-lg"> |
|
|
<div class="skill-icon bg-purple-600"> |
|
|
<i class="fas fa-swords text-white"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h6 class="font-bold">Ardência da Batalha</h6> |
|
|
<p class="text-gray-400 text-sm"> |
|
|
Benefício passivo que concede bônus de força toda vez que um inimigo é abatido pela equipe. |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="ultimate-skill skill-item flex items-start p-3 rounded-lg"> |
|
|
<div class="skill-icon bg-amber-500"> |
|
|
<i class="fas fa-skull text-white"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h6 class="font-bold">Fúria Atroz (Poder Especial)</h6> |
|
|
<p class="text-gray-400 text-sm"> |
|
|
Libera um surto de poder, causando dano em todos os inimigos próximos e reduzindo suas defesas temporariamente. |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="archer" class="hero-content hidden"> |
|
|
<div class="flex flex-col lg:flex-row gap-8"> |
|
|
|
|
|
<div class="lg:w-1/3"> |
|
|
<div class="bg-gray-800 rounded-lg p-4 hero-card"> |
|
|
<img src="https://i.imgur.com/5zXrL9E.png" alt="Arqueira" class="w-full h-auto hero-image"> |
|
|
<h3 class="text-2xl font-bold mt-4 text-green-400">Arqueira</h3> |
|
|
<p class="text-gray-300 mb-4">DPS Físico - Longo Alcance</p> |
|
|
|
|
|
<div class="mb-4"> |
|
|
<h4 class="font-semibold text-green-300 mb-2">Atributos Prioritários</h4> |
|
|
<div class="flex items-center mb-1"> |
|
|
<span class="w-24">Agilidade</span> |
|
|
<div class="flex-1 bg-gray-700 rounded-full h-2"> |
|
|
<div class="bg-green-600 h-2 rounded-full" style="width: 85%"></div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex items-center mb-1"> |
|
|
<span class="w-24">Sorte</span> |
|
|
<div class="flex-1 bg-gray-700 rounded-full h-2"> |
|
|
<div class="bg-green-600 h-2 rounded-full" style="width: 70%"></div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex items-center"> |
|
|
<span class="w-24">Força</span> |
|
|
<div class="flex-1 bg-gray-700 rounded-full h-2"> |
|
|
<div class="bg-green-600 h-2 rounded-full" style="width: 50%"></div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<p class="text-gray-300"> |
|
|
Função Principal: Causar alto dano de longo alcance, auxiliar o posicionamento da equipe e eliminar alvos prioritários. |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="lg:w-2/3"> |
|
|
<h3 class="text-2xl font-bold mb-6 text-green-400 border-b border-green-400 pb-2">Caminhos de Especialização</h3> |
|
|
|
|
|
<div class="flex flex-col md:flex-row gap-4 mb-6"> |
|
|
<button onclick="showSpecialization('falcon')" class="specialization-tab active flex-1 text-left p-4 rounded-lg border border-gray-700"> |
|
|
<h4 class="font-bold text-lg text-green-300">Olho de Falcão</h4> |
|
|
<p class="text-gray-400 text-sm">Precisão máxima e dano crítico</p> |
|
|
</button> |
|
|
<button onclick="showSpecialization('patrol')" class="specialization-tab flex-1 text-left p-4 rounded-lg border border-gray-700"> |
|
|
<h4 class="font-bold text-lg text-green-300">Patrulheira das Sombras</h4> |
|
|
<p class="text-gray-400 text-sm">Furtividade e armadilhas</p> |
|
|
</button> |
|
|
<button onclick="showSpecialization('storm')" class="specialization-tab flex-1 text-left p-4 rounded-lg border border-gray-700"> |
|
|
<h4 class="font-bold text-lg text-green-300">Tempestade de Flechas</h4> |
|
|
<p class="text-gray-400 text-sm">Disparos rápidos e em área</p> |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="specialization-content" class="bg-gray-800 rounded-lg p-6"> |
|
|
|
|
|
<div id="falcon" class="specialization"> |
|
|
<h4 class="text-xl font-bold mb-4 text-green-300">Olho de Falcão</h4> |
|
|
<p class="text-gray-300 mb-6"> |
|
|
Conceito: Especialista em precisão máxima, acertando pontos vitais e garantindo dano crítico. |
|
|
</p> |
|
|
|
|
|
<h5 class="font-semibold text-amber-400 mb-3">Destaques de Habilidades</h5> |
|
|
|
|
|
<div class="space-y-4"> |
|
|
<div class="skill-item flex items-start p-3 rounded-lg"> |
|
|
<div class="skill-icon bg-green-600"> |
|
|
<i class="fas fa-crosshairs text-white"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h6 class="font-bold">Disparo Perfurante</h6> |
|
|
<p class="text-gray-400 text-sm"> |
|
|
Flecha que ignora parte da defesa inimiga e atravessa múltiplos alvos alinhados. |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="skill-item flex items-start p-3 rounded-lg"> |
|
|
<div class="skill-icon bg-green-600"> |
|
|
<i class="fas fa-eye text-white"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h6 class="font-bold">Sentidos Aguçados</h6> |
|
|
<p class="text-gray-400 text-sm"> |
|
|
A Arqueira antecipa movimentos, aumentando a chance de esquiva e contra-ataque. |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="ultimate-skill skill-item flex items-start p-3 rounded-lg"> |
|
|
<div class="skill-icon bg-amber-500"> |
|
|
<i class="fas fa-feather-alt text-white"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h6 class="font-bold">Golpe do Falcão (Poder Especial)</h6> |
|
|
<p class="text-gray-400 text-sm"> |
|
|
Um disparo de longo alcance que causa dano massivo e pode provocar atordoamento. |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="patrol" class="specialization hidden"> |
|
|
<h4 class="text-xl font-bold mb-4 text-green-300">Patrulheira das Sombras</h4> |
|
|
<p class="text-gray-300 mb-6"> |
|
|
Conceito: Utiliza táticas furtivas, camuflagem e armadilhas para controlar a movimentação inimiga. |
|
|
</p> |
|
|
|
|
|
<h5 class="font-semibold text-amber-400 mb-3">Destaques de Habilidades</h5> |
|
|
|
|
|
<div class="space-y-4"> |
|
|
<div class="skill-item flex items-start p-3 rounded-lg"> |
|
|
<div class="skill-icon bg-green-600"> |
|
|
<i class="fas fa-spider text-white"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h6 class="font-bold">Armadilha Enredante</h6> |
|
|
<p class="text-gray-400 text-sm"> |
|
|
Coloca uma armadilha no chão que imobiliza inimigos incautos. |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="skill-item flex items-start p-3 rounded-lg"> |
|
|
<div class="skill-icon bg-green-600"> |
|
|
<i class="fas fa-smog text-white"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h6 class="font-bold">Flecha Fumígena</h6> |
|
|
<p class="text-gray-400 text-sm"> |
|
|
Cega temporariamente inimigos em área, permitindo reposicionamento seguro. |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="ultimate-skill skill-item flex items-start p-3 rounded-lg"> |
|
|
<div class="skill-icon bg-amber-500"> |
|
|
<i class="fas fa-user-secret text-white"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h6 class="font-bold">Emboscada Silenciosa (Poder Especial)</h6> |
|
|
<p class="text-gray-400 text-sm"> |
|
|
Torna-se invisível por um turno, e o primeiro ataque efetuado nessa condição causa dano adicional crítico. |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="storm" class="specialization hidden"> |
|
|
<h4 class="text-xl font-bold mb-4 text-green-300">Tempestade de Flechas</h4> |
|
|
<p class="text-gray-300 mb-6"> |
|
|
Conceito: Especialista em disparos rápidos e em área, bombardeando grupos de inimigos com alto volume de ataques. |
|
|
</p> |
|
|
|
|
|
<h5 class="font-semibold text-amber-400 mb-3">Destaques de Habilidades</h5> |
|
|
|
|
|
<div class="space-y-4"> |
|
|
<div class="skill-item flex items-start p-3 rounded-lg"> |
|
|
<div class="skill-icon bg-green-600"> |
|
|
<i class="fas fa-arrows-alt text-white"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h6 class="font-bold">Rajada de Flechas</h6> |
|
|
<p class="text-gray-400 text-sm"> |
|
|
Ataque em área que atinge até 3 alvos simultaneamente, causando dano contínuo. |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="skill-item flex items-start p-3 rounded-lg"> |
|
|
<div class="skill-icon bg-green-600"> |
|
|
<i class="fas fa-tachometer-alt text-white"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h6 class="font-bold">Instinto Acelerado</h6> |
|
|
<p class="text-gray-400 text-sm"> |
|
|
Cada vez que uma inimiga é atingida, há uma chance de ganhar velocidade de ataque no próximo turno. |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="ultimate-skill skill-item flex items-start p-3 rounded-lg"> |
|
|
<div class="skill-icon bg-amber-500"> |
|
|
<i class="fas fa-cloud-rain text-white"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h6 class="font-bold">Chuva de Prata (Poder Especial)</h6> |
|
|
<p class="text-gray-400 text-sm"> |
|
|
Dispara uma saraivada de flechas que causa dano em todos os inimigos no campo, podendo aplicar sangramento. |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="mage" class="hero-content hidden"> |
|
|
<div class="flex flex-col lg:flex-row gap-8"> |
|
|
|
|
|
<div class="lg:w-1/3"> |
|
|
<div class="bg-gray-800 rounded-lg p-4 hero-card"> |
|
|
<img src="https://i.imgur.com/8Km9tLF.png" alt="Maga" class="w-full h-auto hero-image"> |
|
|
<h3 class="text-2xl font-bold mt-4 text-blue-400">Maga</h3> |
|
|
<p class="text-gray-300 mb-4">DPS Mágico - Controle de Multidão</p> |
|
|
|
|
|
<div class="mb-4"> |
|
|
<h4 class="font-semibold text-blue-300 mb-2">Atributos Prioritários</h4> |
|
|
<div class="flex items-center mb-1"> |
|
|
<span class="w-24">Inteligência</span> |
|
|
<div class="flex-1 bg-gray-700 rounded-full h-2"> |
|
|
<div class="bg-blue-600 h-2 rounded-full" style="width: 90%"></div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex items-center mb-1"> |
|
|
<span class="w-24">Sorte</span> |
|
|
<div class="flex-1 bg-gray-700 rounded-full h-2"> |
|
|
<div class="bg-blue-600 h-2 rounded-full" style="width: 60%"></div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex items-center"> |
|
|
<span class="w-24">Resistência</span> |
|
|
<div class="flex-1 bg-gray-700 rounded-full h-2"> |
|
|
<div class="bg-blue-600 h-2 rounded-full" style="width: 40%"></div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<p class="text-gray-300"> |
|
|
Função Principal: Conjurar feitiços poderosos que controlam o fluxo de batalha e causam dano em área. |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="lg:w-2/3"> |
|
|
<h3 class="text-2xl font-bold mb-6 text-blue-400 border-b border-blue-400 pb-2">Caminhos de Especialização</h3> |
|
|
|
|
|
<div class="flex flex-col md:flex-row gap-4 mb-6"> |
|
|
<button onclick="showSpecialization('elemental')" class="specialization-tab active flex-1 text-left p-4 rounded-lg border border-gray-700"> |
|
|
<h4 class="font-bold text-lg text-blue-300">Arcanista Elemental</h4> |
|
|
<p class="text-gray-400 text-sm">Mestra nos quatro elementos</p> |
|
|
</button> |
|
|
<button onclick="showSpecialization('astral')" class="specialization-tab flex-1 text-left p-4 rounded-lg border border-gray-700"> |
|
|
<h4 class="font-bold text-lg text-blue-300">Conjuradora Astral</h4> |
|
|
<p class="text-gray-400 text-sm">Magias de espaço e tempo</p> |
|
|
</button> |
|
|
<button onclick="showSpecialization('chaos')" class="specialization-tab flex-1 text-left p-4 rounded-lg border border-gray-700"> |
|
|
<h4 class="font-bold text-lg text-blue-300">Feiticeira Caótica</h4> |
|
|
<p class="text-gray-400 text-sm">Energias instáveis e aleatórias</p> |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="specialization-content" class="bg-gray-800 rounded-lg p-6"> |
|
|
|
|
|
<div id="elemental" class="specialization"> |
|
|
<h4 class="text-xl font-bold mb-4 text-blue-300">Arcanista Elemental</h4> |
|
|
<p class="text-gray-300 mb-6"> |
|
|
Conceito: Mestra nos quatro elementos, alternando entre fogo, água, terra e vento para causar efeitos devastadores. |
|
|
</p> |
|
|
|
|
|
<h5 class="font-semibold text-amber-400 mb-3">Destaques de Habilidades</h5> |
|
|
|
|
|
<div class="space-y-4"> |
|
|
<div class="skill-item flex items-start p-3 rounded-lg"> |
|
|
<div class="skill-icon bg-blue-600"> |
|
|
<i class="fas fa-fire text-white"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h6 class="font-bold">Chama Crescente</h6> |
|
|
<p class="text-gray-400 text-sm"> |
|
|
Incinera inimigos em área, aplicando queimadura contínua. |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="skill-item flex items-start p-3 rounded-lg"> |
|
|
<div class="skill-icon bg-blue-600"> |
|
|
<i class="fas fa-snowflake text-white"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h6 class="font-bold">Geada Protetora</h6> |
|
|
<p class="text-gray-400 text-sm"> |
|
|
Cria um escudo de gelo que absorve dano e pode congelar inimigas que atacam a Maga. |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="ultimate-skill skill-item flex items-start p-3 rounded-lg"> |
|
|
<div class="skill-icon bg-amber-500"> |
|
|
<i class="fas fa-wind text-white"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h6 class="font-bold">Ciclone Arcano (Poder Especial)</h6> |
|
|
<p class="text-gray-400 text-sm"> |
|
|
Invoca um redemoinho elemental, causando dano massivo em área e dispersando buffs dos inimigos. |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="astral" class="specialization hidden"> |
|
|
<h4 class="text-xl font-bold mb-4 text-blue-300">Conjuradora Astral</h4> |
|
|
<p class="text-gray-300 mb-6"> |
|
|
Conceito: Focada em magias de espaço e tempo, usando teletransporte, desaceleração e manipulação de gravidade. |
|
|
</p> |
|
|
|
|
|
<h5 class="font-semibold text-amber-400 mb-3">Destaques de Habilidades</h5> |
|
|
|
|
|
<div class="space-y-4"> |
|
|
<div class="skill-item flex items-start p-3 rounded-lg"> |
|
|
<div class="skill-icon bg-blue-600"> |
|
|
<i class="fas fa-hourglass-half text-white"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h6 class="font-bold">Campo de Distorção</h6> |
|
|
<p class="text-gray-400 text-sm"> |
|
|
Reduz a velocidade de ataque e movimento dos inimigos em uma área. |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="skill-item flex items-start p-3 rounded-lg"> |
|
|
<div class="skill-icon bg-blue-600"> |
|
|
<i class="fas fa-door-open text-white"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h6 class="font-bold">Fenda Dimensional</h6> |
|
|
<p class="text-gray-400 text-sm"> |
|
|
Permite ao grupo teletransportar-se para outra posição no campo, ignorando obstáculos. |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="ultimate-skill skill-item flex items-start p-3 rounded-lg"> |
|
|
<div class="skill-icon bg-amber-500"> |
|
|
<i class="fas fa-clock text-white"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h6 class="font-bold">Eclipse Temporal (Poder Especial)</h6> |
|
|
<p class="text-gray-400 text-sm"> |
|
|
Congela todos os inimigos por um turno, mas também impede ações da Maga até o fim do efeito (alto risco, alta recompensa). |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="chaos" class="specialization hidden"> |
|
|
<h4 class="text-xl font-bold mb-4 text-blue-300">Feiticeira Caótica</h4> |
|
|
<p class="text-gray-300 mb-6"> |
|
|
Conceito: Manipula energias instáveis para causar efeitos aleatórios e poderosos, correndo riscos para atingir recompensas extremas. |
|
|
</p> |
|
|
|
|
|
<h5 class="font-semibold text-amber-400 mb-3">Destaques de Habilidades</h5> |
|
|
|
|
|
<div class="space-y-4"> |
|
|
<div class="skill-item flex items-start p-3 rounded-lg"> |
|
|
<div class="skill-icon bg-blue-600"> |
|
|
<i class="fas fa-dice text-white"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h6 class="font-bold">Descarga Caótica</h6> |
|
|
<p class="text-gray-400 text-sm"> |
|
|
Ataque que pode causar dano massivo ou efeitos colaterais, variando de acordo com a sorte da Maga. |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="skill-item flex items-start p-3 rounded-lg"> |
|
|
<div class="skill-icon bg-blue-600"> |
|
|
<i class="fas fa-random text-white"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h6 class="font-bold">Devoção Anárquica</h6> |
|
|
<p class="text-gray-400 text-sm"> |
|
|
A cada conjuração, há chance de ativar um efeito extra, como dano em área, roubo de vida ou confusão inimiga. |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="ultimate-skill skill-item flex items-start p-3 rounded-lg"> |
|
|
<div class="skill-icon bg-amber-500"> |
|
|
<i class="fas fa-atom text-white"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h6 class="font-bold">Explosão do Caos (Poder Especial)</h6> |
|
|
<p class="text-gray-400 text-sm"> |
|
|
Libera todo o poder instável acumulado, causando dano devastador em área – mas há risco de a Maga também sofrer parte desse dano. |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="priestess" class="hero-content hidden"> |
|
|
<div class="flex flex-col lg:flex-row gap-8"> |
|
|
|
|
|
<div class="lg:w-1/3"> |
|
|
<div class="bg-gray-800 rounded-lg p-4 hero-card"> |
|
|
<img src="https://i.imgur.com/JQJx3BW.png" alt="Sacerdotisa" class="w-full h-auto hero-image"> |
|
|
<h3 class="text-2xl font-bold mt-4 text-pink-400">Sacerdotisa</h3> |
|
|
<p class="text-gray-300 mb-4">Suporte - Cura e Buffs</p> |
|
|
|
|
|
<div class="mb-4"> |
|
|
<h4 class="font-semibold text-pink-300 mb-2">Atributos Prioritários</h4> |
|
|
<div class="flex items-center mb-1"> |
|
|
<span class="w-24">Inteligência</span> |
|
|
<div class="flex-1 bg-gray-700 rounded-full h-2"> |
|
|
<div class="bg-pink-600 h-2 rounded-full" style="width: 80%"></div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex items-center mb-1"> |
|
|
<span class="w-24">Resistência</span> |
|
|
<div class="flex-1 bg-gray-700 rounded-full h-2"> |
|
|
<div class="bg-pink-600 h-2 rounded-full" style="width: 70%"></div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex items-center"> |
|
|
<span class="w-24">Sorte</span> |
|
|
<div class="flex-1 bg-gray-700 rounded-full h-2"> |
|
|
<div class="bg-pink-600 h-2 rounded-full" style="width: 50%"></div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<p class="text-gray-300"> |
|
|
Função Principal: Manter o grupo vivo, oferecer buffs e remover debuffs, trazendo sustentação e vantagens à equipe. |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="lg:w-2/3"> |
|
|
<h3 class="text-2xl font-bold mb-6 text-pink-400 border-b border-pink-400 pb-2">Caminhos de Especialização</h3> |
|
|
|
|
|
<div class="flex flex-col md:flex-row gap-4 mb-6"> |
|
|
<button onclick="showSpecialization('light')" class="specialization-tab active flex-1 text-left p-4 rounded-lg border border-gray-700"> |
|
|
<h4 class="font-bold text-lg text-pink-300">Luz Benevolente</h4> |
|
|
<p class="text-gray-400 text-sm">Cura contínua e proteção</p> |
|
|
</button> |
|
|
<button onclick="showSpecialization('guardian')" class="specialization-tab flex-1 text-left p-4 rounded-lg border border-gray-700"> |
|
|
<h4 class="font-bold text-lg text-pink-300">Guardião Sagrado</h4> |
|
|
<p class="text-gray-400 text-sm">Suporte com dano sagrado</p> |
|
|
</button> |
|
|
<button onclick="showSpecialization('oracle')" class="specialization-tab flex-1 text-left p-4 rounded-lg border border-gray-700"> |
|
|
<h4 class="font-bold text-lg text-pink-300">Oráculo da Harmonia</h4> |
|
|
<p class="text-gray-400 text-sm">Buffs e controle de moral</p> |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="specialization-content" class="bg-gray-800 rounded-lg p-6"> |
|
|
|
|
|
<div id="light" class="specialization"> |
|
|
<h4 class="text-xl font-bold mb-4 text-pink-300">Luz Benevolente</h4> |
|
|
<p class="text-gray-300 mb-6"> |
|
|
Conceito: Conjunto de habilidades voltadas para cura contínua e proteção. |
|
|
</p> |
|
|
|
|
|
<h5 class="font-semibold text-amber-400 mb-3">Destaques de Habilidades</h5> |
|
|
|
|
|
<div class="space-y-4"> |
|
|
<div class="skill-item flex items-start p-3 rounded-lg"> |
|
|
<div class="skill-icon bg-pink-600"> |
|
|
<i class="fas fa-heartbeat text-white"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h6 class="font-bold">Círculo de Cura</h6> |
|
|
<p class="text-gray-400 text-sm"> |
|
|
Cura todas as aliadas em uma pequena área, acumulando um efeito regenerativo por alguns turnos. |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="skill-item flex items-start p-3 rounded-lg"> |
|
|
<div class="skill-icon bg-pink-600"> |
|
|
<i class="fas fa-shield-alt text-white"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h6 class="font-bold">Ressonância Divina</h6> |
|
|
<p class="text-gray-400 text-sm"> |
|
|
Ao curar uma aliada, concede escudos temporários baseados na quantidade curada. |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="ultimate-skill skill-item flex items-start p-3 rounded-lg"> |
|
|
<div class="skill-icon bg-amber-500"> |
|
|
<i class="fas fa-angel text-white"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h6 class="font-bold">Bênção Radiante (Poder Especial)</h6> |
|
|
<p class="text-gray-400 text-sm"> |
|
|
Cura instantaneamente todas as aliadas em grande escala e remove todos os efeitos negativos. |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="guardian" class="specialization hidden"> |
|
|
<h4 class="text-xl font-bold mb-4 text-pink-300">Guardião Sagrado</h4> |
|
|
<p class="text-gray-300 mb-6"> |
|
|
Conceito: Mistura suporte com a capacidade de infligir dano sagrado em inimigos que ameacem suas companheiras. |
|
|
</p> |
|
|
|
|
|
<h5 class="font-semibold text-amber-400 mb-3">Destaques de Habilidades</h5> |
|
|
|
|
|
<div class="space-y-4"> |
|
|
<div class="skill-item flex items-start p-3 rounded-lg"> |
|
|
<div class="skill-icon bg-pink-600"> |
|
|
<i class="fas fa-sun text-white"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h6 class="font-bold">Golpe Purificador</h6> |
|
|
<p class="text-gray-400 text-sm"> |
|
|
Ataque de luz que causa dano a um único alvo e reduz sua capacidade de cura por alguns turnos. |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="skill-item flex items-start p-3 rounded-lg"> |
|
|
<div class="skill-icon bg-pink-600"> |
|
|
<i class="fas fa-star-of-david text-white"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h6 class="font-bold">Escudo Sacro</h6> |
|
|
<p class="text-gray-400 text-sm"> |
|
|
Protege uma aliada contra ataques, refletindo parte do dano recebido. |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="ultimate-skill skill-item flex items-start p-3 rounded-lg"> |
|
|
<div class="skill-icon bg-amber-500"> |
|
|
<i class="fas fa-bolt text-white"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h6 class="font-bold">Ira Celestial (Poder Especial)</h6> |
|
|
<p class="text-gray-400 text-sm"> |
|
|
Um poderoso feixe de luz atinge todos os inimigos, causando dano moderado e reduzindo suas resistências. |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="oracle" class="specialization hidden"> |
|
|
<h4 class="text-xl font-bold mb-4 text-pink-300">Oráculo da Harmonia</h4> |
|
|
<p class="text-gray-300 mb-6"> |
|
|
Conceito: Especializada em buffs, controle de moral e manipulação de energias positivas para fortalecer sua equipe em todos os aspectos. |
|
|
</p> |
|
|
|
|
|
<h5 class="font-semibold text-amber-400 mb-3">Destaques de Habilidades</h5> |
|
|
|
|
|
<div class="space-y-4"> |
|
|
<div class="skill-item flex items-start p-3 rounded-lg"> |
|
|
<div class="skill-icon bg-pink-600"> |
|
|
<i class="fas fa-music text-white"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h6 class="font-bold">Hino do Valor</h6> |
|
|
<p class="text-gray-400 text-sm"> |
|
|
Aumenta o ataque físico e mágico de todas as aliadas no campo por alguns turnos. |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="skill-item flex items-start p-3 rounded-lg"> |
|
|
<div class="skill-icon bg-pink-600"> |
|
|
<i class="fas fa-spa text-white"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h6 class="font-bold">Melodia Calmante</h6> |
|
|
<p class="text-gray-400 text-sm"> |
|
|
Remove efeitos negativos e restaura mana ou recursos especiais das aliadas afetadas. |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="ultimate-skill skill-item flex items-start p-3 rounded-lg"> |
|
|
<div class="skill-icon bg-amber-500"> |
|
|
<i class="fas fa-rainbow text-white"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h6 class="font-bold">Sinfonia Divina (Poder Especial)</h6> |
|
|
<p class="text-gray-400 text-sm"> |
|
|
Combina múltiplos efeitos de buff ao mesmo tempo, aumentando drasticamente atributos de toda a equipe. |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="assassin" class="hero-content hidden"> |
|
|
<div class="flex flex-col lg:flex-row gap-8"> |
|
|
|
|
|
<div class="lg:w-1/3"> |
|
|
<div class="bg-gray-800 rounded-lg p-4 hero-card"> |
|
|
<img src="https://i.imgur.com/3tTQx2T.png" alt="Assassina" class="w-full h-auto hero-image"> |
|
|
<h3 class="text-2xl font-bold mt-4 text-red-400">Assassina</h3> |
|
|
<p class="text-gray-300 mb-4">Controle/Especialista - Eliminação de Alvos</p> |
|
|
|
|
|
<div class="mb-4"> |
|
|
<h4 class="font-semibold text-red-300 mb-2">Atributos Prioritários</h4> |
|
|
<div class="flex items-center mb-1"> |
|
|
<span class="w-24">Agilidade</span> |
|
|
<div class="flex-1 bg-gray-700 rounded-full h-2"> |
|
|
<div class="bg-red-600 h-2 rounded-full" style="width: 85%"></div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex items-center mb-1"> |
|
|
<span class="w-24">Inteligência</span> |
|
|
<div class="flex-1 bg-gray-700 rounded-full h-2"> |
|
|
<div class="bg-red-600 h-2 rounded-full" style="width: 60%"></div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex items-center"> |
|
|
<span class="w-24">Sorte</span> |
|
|
<div class="flex-1 bg-gray-700 rounded-full h-2"> |
|
|
<div class="bg-red-600 h-2 rounded-full" style="width: 70%"></div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<p class="text-gray-300"> |
|
|
Função Principal: Especialista em eliminar rapidamente alvos-chave, aplicar efeitos de controle e manipular posicionamento inimigo. |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="lg:w-2/3"> |
|
|
<h3 class="text-2xl font-bold mb-6 text-red-400 border-b border-red-400 pb-2">Caminhos de Especialização</h3> |
|
|
|
|
|
<div class="flex flex-col md:flex-row gap-4 mb-6"> |
|
|
<button onclick="showSpecialization('blade')" class="specialization-tab active flex-1 text-left p-4 rounded-lg border border-gray-700"> |
|
|
<h4 class="font-bold text-lg text-red-300">Lamina da Meia-Noite</h4> |
|
|
<p class="text-gray-400 text-sm">Furtividade e ataques críticos</p> |
|
|
</button> |
|
|
<button onclick="showSpecialization('web')" class="specialization-tab flex-1 text-left p-4 rounded-lg border border-gray-700"> |
|
|
<h4 class="font-bold text-lg text-red-300">Teia Venenosa</h4> |
|
|
<p class="text-gray-400 text-sm">Venenos e debuffs</p> |
|
|
</button> |
|
|
<button onclick="showSpecialization('trap')" class="specialization-tab flex-1 text-left p-4 rounded-lg border border-gray-700"> |
|
|
<h4 class="font-bold text-lg text-red-300">Tecelã das Armadilhas</h4> |
|
|
<p class="text-gray-400 text-sm">Armadilhas e controle de campo</p> |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="specialization-content" class="bg-gray-800 rounded-lg p-6"> |
|
|
|
|
|
<div id="blade" class="specialization"> |
|
|
<h4 class="text-xl font-bold mb-4 text-red-300">Lamina da Meia-Noite</h4> |
|
|
<p class="text-gray-300 mb-6"> |
|
|
Conceito: Focada em furtividade e ataques críticos fatais. |
|
|
</p> |
|
|
|
|
|
<h5 class="font-semibold text-amber-400 mb-3">Destaques de Habilidades</h5> |
|
|
|
|
|
<div class="space-y-4"> |
|
|
<div class="skill-item flex items-start p-3 rounded-lg"> |
|
|
<div class="skill-icon bg-red-600"> |
|
|
<i class="fas fa-user-ninja text-white"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h6 class="font-bold">Passo Silencioso</h6> |
|
|
<p class="text-gray-400 text-sm"> |
|
|
Ao iniciar o combate, a Assassina pode se mover para trás das linhas inimigas sem ser detectada. |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="skill-item flex items-start p-3 rounded-lg"> |
|
|
<div class="skill-icon bg-red-600"> |
|
|
<i class="fas fa-knife text-white"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h6 class="font-bold">Corte Sombrio</h6> |
|
|
<p class="text-gray-400 text-sm"> |
|
|
Um ataque que tem alta chance de dano crítico quando executado pelas costas do alvo. |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="ultimate-skill skill-item flex items-start p-3 rounded-lg"> |
|
|
<div class="skill-icon bg-amber-500"> |
|
|
<i class="fas fa-moon text-white"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h6 class="font-bold">Dança das Sombras (Poder Especial)</h6> |
|
|
<p class="text-gray-400 text-sm"> |
|
|
Ativa uma sequência de golpes ininterruptos em alvos próximos, com alto potencial de finalização. |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="web" class="specialization hidden"> |
|
|
<h4 class="text-xl font-bold mb-4 text-red-300">Teia Venenosa</h4> |
|
|
<p class="text-gray-300 mb-6"> |
|
|
Conceito: Especialista em venenos e habilidades de dano ao longo do tempo, além de debuffs que enfraquecem os inimigos. |
|
|
</p> |
|
|
|
|
|
<h5 class="font-semibold text-amber-400 mb-3">Destaques de Habilidades</h5> |
|
|
|
|
|
<div class="space-y-4"> |
|
|
<div class="skill-item flex items-start p-3 rounded-lg"> |
|
|
<div class="skill-icon bg-red-600"> |
|
|
<i class="fas fa-skull-crossbones text-white"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h6 class="font-bold">Adaga Tóxica</h6> |
|
|
<p class="text-gray-400 text-sm"> |
|
|
Cada ataque básico aplica um veneno stackável que corrói a vida do inimigo a cada turno. |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="skill-item flex items-start p-3 rounded-lg"> |
|
|
<div class="skill-icon bg-red-600"> |
|
|
<i class="fas fa-cloud text-white"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h6 class="font-bold">Névoa Envenenada</h6> |
|
|
<p class="text-gray-400 text-sm"> |
|
|
Área de efeito que reduz a força ou agilidade de inimigos intoxicados. |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="ultimate-skill skill-item flex items-start p-3 rounded-lg"> |
|
|
<div class="skill-icon bg-amber-500"> |
|
|
<i class="fas fa-heart-broken text-white"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h6 class="font-bold">Coração da Serpente (Poder Especial)</h6> |
|
|
<p class="text-gray-400 text-sm"> |
|
|
Channeliza um veneno mortal que pode derrubar instantaneamente inimigas com pouca vida, além de aumentar seus próprios atributos temporariamente. |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="trap" class="specialization hidden"> |
|
|
<h4 class="text-xl font-bold mb-4 text-red-300">Tecelã das Armadilhas</h4> |
|
|
<p class="text-gray-300 mb-6"> |
|
|
Conceito: Controla o campo de batalha com armadilhas e manipula o posicionamento de inimigos, forçando-os a movimentos indesejados. |
|
|
</p> |
|
|
|
|
|
<h5 class="font-semibold text-amber-400 mb-3">Destaques de Habilidades</h5> |
|
|
|
|
|
<div class="space-y-4"> |
|
|
<div class="skill-item flex items-start p-3 rounded-lg"> |
|
|
<div class="skill-icon bg-red-600"> |
|
|
<i class="fas fa-lasso text-white"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h6 class="font-bold">Corda de Sucção</h6> |
|
|
<p class="text-gray-400 text-sm"> |
|
|
Puxa um alvo para perto da Assassina ou empurra-o para longe, permitindo reposicionamento tático. |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="skill-item flex items-start p-3 rounded-lg"> |
|
|
<div class="skill-icon bg-red-600"> |
|
|
<i class="fas fa-bomb text-white"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h6 class="font-bold">Mina de Mágicas</h6> |
|
|
<p class="text-gray-400 text-sm"> |
|
|
Arapuca que explode ao ser ativada, causando dano e atordoando inimigos. |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="ultimate-skill skill-item flex items-start p-3 rounded-lg"> |
|
|
<div class="skill-icon bg-amber-500"> |
|
|
<i class="fas fa-spider text-white"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h6 class="font-bold">Emboscada Mortal (Poder Especial)</h6> |
|
|
<p class="text-gray-400 text-sm"> |
|
|
Coloca várias armadilhas secretas no campo. Ao serem acionadas em sequência, podem prender múltiplos inimigos, deixando-os vulneráveis a ataques aliados. |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="mt-16 bg-gray-900 bg-opacity-80 backdrop-blur-sm rounded-xl p-8 shadow-2xl border border-gray-800"> |
|
|
<h3 class="text-3xl font-bold mb-8 text-center text-transparent bg-clip-text bg-gradient-to-r from-purple-500 to-amber-500 title-font"> |
|
|
Atributos Básicos e Distribuição de Pontos |
|
|
</h3> |
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> |
|
|
<div class="bg-gray-800 p-6 rounded-lg border border-gray-700"> |
|
|
<div class="flex items-center mb-4"> |
|
|
<div class="w-12 h-12 rounded-full bg-purple-600 flex items-center justify-center mr-4"> |
|
|
<i class="fas fa-fist-raised text-white text-xl"></i> |
|
|
</div> |
|
|
<h4 class="text-xl font-bold">Força</h4> |
|
|
</div> |
|
|
<p class="text-gray-300"> |
|
|
Aumenta o dano físico e a eficácia de ataques corpo a corpo. |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
<div class="bg-gray-800 p-6 rounded-lg border border-gray-700"> |
|
|
<div class="flex items-center mb-4"> |
|
|
<div class="w-12 h-12 rounded-full bg-green-600 flex items-center justify-center mr-4"> |
|
|
<i class="fas fa-running text-white text-xl"></i> |
|
|
</div> |
|
|
<h4 class="text-xl font-bold">Agilidade</h4> |
|
|
</div> |
|
|
<p class="text-gray-300"> |
|
|
Eleva a chance de esquiva, velocidade de ação e dano de ataques à distância. |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
<div class="bg-gray-800 p-6 rounded-lg border border-gray-700"> |
|
|
<div class="flex items-center mb-4"> |
|
|
<div class="w-12 h-12 rounded-full bg-blue-600 flex items-center justify-center mr-4"> |
|
|
<i class="fas fa-brain text-white text-xl"></i> |
|
|
</div> |
|
|
<h4 class="text-xl font-bold">Inteligência</h4> |
|
|
</div> |
|
|
<p class="text-gray-300"> |
|
|
Amplifica o poder mágico e reduz custos de mana ou recursos de habilidade. |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
<div class="bg-gray-800 p-6 rounded-lg border border-gray-700"> |
|
|
<div class="flex items-center mb-4"> |
|
|
<div class="w-12 h-12 rounded-full bg-yellow-600 flex items-center justify-center mr-4"> |
|
|
<i class="fas fa-shield-alt text-white text-xl"></i> |
|
|
</div> |
|
|
<h4 class="text-xl font-bold">Resistência</h4> |
|
|
</div> |
|
|
<p class="text-gray-300"> |
|
|
Incrementa a defesa física e mágica, além de influenciar a quantidade de pontos de vida. |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
<div class="bg-gray-800 p-6 rounded-lg border border-gray-700"> |
|
|
<div class="flex items-center mb-4"> |
|
|
<div class="w-12 h-12 rounded-full bg-pink-600 flex items-center justify-center mr-4"> |
|
|
<i class="fas fa-dice text-white text-xl"></i> |
|
|
</div> |
|
|
<h4 class="text-xl font-bold">Sorte</h4> |
|
|
</div> |
|
|
<p class="text-gray-300"> |
|
|
Aumenta a chance de acerto crítico e a probabilidade de efeitos positivos imprevisíveis. |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
<div class="bg-gray-800 p-6 rounded-lg border border-gray-700"> |
|
|
<div class="flex items-center mb-4"> |
|
|
<div class="w-12 h-12 rounded-full bg-gradient-to-br from-purple-600 to-amber-500 flex items-center justify-center mr-4"> |
|
|
<i class="fas fa-sync-alt text-white text-xl"></i> |
|
|
</div> |
|
|
<h4 class="text-xl font-bold">Sistema de Progressão</h4> |
|
|
</div> |
|
|
<p class="text-gray-300"> |
|
|
A progressão de cada heroína é influenciada pela distribuição de pontos de atributos e pelas escolhas de habilidades em suas árvores de especialização. |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="mt-16 text-center"> |
|
|
<h3 class="text-3xl font-bold mb-6 text-transparent bg-clip-text bg-gradient-to-r from-purple-500 to-amber-500 title-font"> |
|
|
Crie Sua Lenda em Aetheria |
|
|
</h3> |
|
|
<p class="text-xl text-gray-300 max-w-3xl mx-auto mb-8"> |
|
|
Com essas opções de evolução, cada classe oferece inúmeras possibilidades de jogo. Experimente novos caminhos, combine habilidades, descubra sinergias entre as heroínas e mostre seu domínio estratégico em Guardians of Aetheria. |
|
|
</p> |
|
|
<button class="bg-gradient-to-r from-purple-600 to-amber-500 hover:from-purple-700 hover:to-amber-600 text-white font-bold py-4 px-8 rounded-full text-lg transition-all duration-300 transform hover:scale-105 shadow-lg"> |
|
|
Prepare-se para escrever a sua história! |
|
|
</button> |
|
|
</div> |
|
|
</main> |
|
|
|
|
|
|
|
|
<footer class="mt-20 py-8 px-4 text-center text-gray-400 border-t border-gray-800"> |
|
|
<p>© 2023 Guardians of Aetheria. Todos os direitos reservados.</p> |
|
|
<div class="flex justify-center space-x-6 mt-4"> |
|
|
<a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-twitter"></i></a> |
|
|
<a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-discord"></i></a> |
|
|
<a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-youtube"></i></a> |
|
|
<a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-instagram"></i></a> |
|
|
</div> |
|
|
</footer> |
|
|
|
|
|
<script> |
|
|
// Show the selected hero and hide others |
|
|
function showHero(heroId) { |
|
|
// Hide all hero contents |
|
|
document.querySelectorAll('.hero-content').forEach(content => { |
|
|
content.classList.add('hidden'); |
|
|
}); |
|
|
|
|
|
// Show selected hero content |
|
|
document.getElementById(heroId).classList.remove('hidden'); |
|
|
|
|
|
// Update active tab styling |
|
|
document.querySelectorAll('.hero-tab').forEach(tab => { |
|
|
tab.classList.remove('active'); |
|
|
tab.classList.remove('bg-gradient-to-br'); |
|
|
tab.classList.remove('from-purple-700', 'to-purple-900'); |
|
|
tab.classList.remove('from-green-700', 'to-green-900'); |
|
|
tab.classList.remove('from-blue-700', 'to-blue-900'); |
|
|
tab.classList.remove('from-pink-700', 'to-pink-900'); |
|
|
tab.classList.remove('from-red-700', 'to-red-900'); |
|
|
|
|
|
// Add gradient based on hero |
|
|
if (tab.textContent.includes('Guerreira')) { |
|
|
tab.classList.add('from-purple-700', 'to-purple-900 |
|
|
</html> |
