| <!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> |
