<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Calculadora de Sinastria Amorosa Rápida</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">
<script>
tailwind.config = {
theme: {
extend: {
colors: {
mystic: {
900: '#0f051d',
800: '#1a0b2e',
700: '#2b1055',
600: '#4c1d95',
500: '#6d28d9',
400: '#8b5cf6',
300: '#a78bfa',
200: '#c4b5fd',
100: '#ddd6fe',
},
gold: {
300: '#fde047',
400: '#facc15',
500: '#eab308',
600: '#ca8a04',
}
},
fontFamily: {
serif: ['Georgia', 'serif'],
sans: ['Inter', 'sans-serif'],
}
}
}
}
</script>
<style>
@keyframes pulseGlow {
0%, 100% { box-shadow: 0 0 15px rgba(234, 179, 8, 0.3), 0 0 30px rgba(139, 92, 246, 0.2); }
50% { box-shadow: 0 0 25px rgba(234, 179, 8, 0.6), 0 0 45px rgba(139, 92, 246, 0.4); }
}
@keyframes float {
0%, 100% { transform: translateY(0px); }
50% { transform: translateY(-8px); }
}
.animate-glow {
animation: pulseGlow 4s infinite ease-in-out;
}
.animate-float {
animation: float 6s infinite ease-in-out;
}
.glass-card {
background: rgba(26, 11, 46, 0.75);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border: 1px solid rgba(234, 179, 8, 0.25);
}
.gold-gradient-text {
background: linear-gradient(135deg, #fff 0%, #facc15 50%, #ca8a04 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.gold-border-gradient {
border-image: linear-gradient(to right, #ca8a04, #facc15, #ca8a04) 1;
}
</style>
</head>
<body class="bg-mystic-900 text-gray-100 font-sans min-h-screen relative overflow-x-hidden pb-12 bg-[radial-gradient(ellipse_at_top,_var(--tw-gradient-stops))] from-mystic-700 via-mystic-900 to-black">
<!-- Background Decorative Stars -->
<div class="absolute inset-0 pointer-events-none opacity-30 bg-[radial-gradient(#facc15_1px,transparent_1px)] [background-size:24px_24px]"></div>
<div class="max-w-4xl mx-auto px-4 py-8 relative z-10">
<!-- Header -->
<header class="text-center mb-8 animate-float">
<div class="inline-block p-2 rounded-full bg-mystic-800 border border-gold-500/40 mb-3 shadow-lg">
<i class="fa-solid fa-wand-magic-sparkles text-gold-400 text-2xl px-2"></i>
</div>
<h1 class="text-3xl md:text-5xl font-serif font-bold gold-gradient-text tracking-wide mb-2">
Sinastria Amorosa Rápida
</h1>
<p class="text-mystic-200 text-sm md:text-base max-w-xl mx-auto font-light">
Descubra a afinidade cósmica, a química e os mistérios da união entre o seu signo e o da pessoa amada.
</p>
</header>
<!-- App Card -->
<main class="glass-card rounded-2xl p-6 md:p-8 shadow-2xl mb-12 animate-glow">
<form id="synastryForm" class="space-y-6">
<!-- Selectors Grid -->
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 relative">
<!-- Heart Icon Divider for Desktop -->
<div class="hidden md:flex absolute inset-0 items-center justify-center pointer-events-none z-10">
<div class="w-12 h-12 rounded-full bg-mystic-800 border border-gold-400 flex items-center justify-center shadow-lg text-pink-400">
<i class="fa-solid fa-heart text-xl animate-pulse"></i>
</div>
</div>
<!-- Sign 1 Selection -->
<div class="bg-mystic-800/80 p-5 rounded-xl border border-mystic-600/50 hover:border-gold-500/50 transition-colors">
<label for="sign1" class="block text-sm font-semibold text-gold-300 mb-2 flex items-center gap-2">
<i class="fa-solid fa-user-astronaut text-mystic-300"></i> Seu Signo
</label>
<select id="sign1" class="w-full bg-mystic-900 border border-mystic-500 text-gray-100 rounded-lg p-3 focus:outline-none focus:ring-2 focus:ring-gold-400 text-base cursor-pointer">
<option value="" disabled selected>Selecione o seu signo...</option>
<option value="aries">♈ Áries (Fogo)</option>
<option value="touro">♉ Touro (Terra)</option>
<option value="gemeos">♊ Gêmeos (Ar)</option>
<option value="cancer">♋ Câncer (Água)</option>
<option value="leao">♌ Leão (Fogo)</option>
<option value="virgem">♍ Virgem (Terra)</option>
<option value="libra">♎ Libra (Ar)</option>
<option value="escorpiao">♏ Escorpião (Água)</option>
<option value="sagitario">♐ Sagitário (Fogo)</option>
<option value="capricornio">♑ Capricórnio (Terra)</option>
<option value="aquario">♒ Aquário (Ar)</option>
<option value="peixes">♓ Peixes (Água)</option>
</select>
</div>
<!-- Sign 2 Selection -->
<div class="bg-mystic-800/80 p-5 rounded-xl border border-mystic-600/50 hover:border-gold-500/50 transition-colors">
<label for="sign2" class="block text-sm font-semibold text-gold-300 mb-2 flex items-center gap-2">
<i class="fa-solid fa-heart-pulse text-pink-400"></i> Signo da Pessoa Amada
</label>
<select id="sign2" class="w-full bg-mystic-900 border border-mystic-500 text-gray-100 rounded-lg p-3 focus:outline-none focus:ring-2 focus:ring-gold-400 text-base cursor-pointer">
<option value="" disabled selected>Selecione o signo do par...</option>
<option value="aries">♈ Áries (Fogo)</option>
<option value="touro">♉ Touro (Terra)</option>
<option value="gemeos">♊ Gêmeos (Ar)</option>
<option value="cancer">♋ Câncer (Água)</option>
<option value="leao">♌ Leão (Fogo)</option>
<option value="virgem">♍ Virgem (Terra)</option>
<option value="libra">♎ Libra (Ar)</option>
<option value="escorpiao">♏ Escorpião (Água)</option>
<option value="sagitario">♐ Sagitário (Fogo)</option>
<option value="capricornio">♑ Capricórnio (Terra)</option>
<option value="aquario">♒ Aquário (Ar)</option>
<option value="peixes">♓ Peixes (Água)</option>
</select>
</div>
</div>
<!-- Submit Button -->
<button type="submit" id="calcBtn" class="w-full py-4 px-6 rounded-xl bg-gradient-to-r from-gold-600 via-gold-500 to-gold-600 text-mystic-900 font-bold text-lg tracking-wide hover:from-gold-500 hover:to-gold-400 transform hover:-translate-y-0.5 active:translate-y-0 transition-all shadow-lg shadow-gold-500/20 flex items-center justify-center gap-2 cursor-pointer">
<i class="fa-solid fa-sparkles"></i> Calcular Compatibilidade
</button>
</form>
<!-- Message Box for Alerts -->
<div id="alertBox" class="hidden mt-4 p-4 rounded-lg bg-red-900/60 border border-red-500/50 text-red-200 text-sm text-center">
Por favor, selecione ambos os signos para realizar o cálculo astral.
</div>
<!-- Results Section -->
<div id="resultsSection" class="hidden mt-10 border-t border-mystic-600/60 pt-8">
<!-- Score & Elements Display -->
<div class="text-center mb-8">
<div class="inline-flex items-center justify-center p-6 rounded-full bg-mystic-900/90 border-2 border-gold-400/80 shadow-inner mb-4 relative">
<span id="affinityPercent" class="text-4xl md:text-5xl font-extrabold gold-gradient-text">0%</span>
</div>
<h2 class="text-2xl font-serif font-bold text-gold-300" id="resultPairTitle">Áries & Touro</h2>
<div id="elementsBadge" class="mt-2 text-sm text-mystic-200 flex items-center justify-center gap-2">
<!-- Dynamic elements tags -->
</div>
</div>
<!-- Analysis Cards Grid -->
<div class="grid grid-cols-1 md:grid-cols-2 gap-5">
<!-- 1. Química e Atração -->
<div class="p-5 rounded-xl bg-mystic-900/60 border border-mystic-600/60 hover:border-gold-500/40 transition-colors">
<h3 class="text-gold-400 font-semibold text-lg flex items-center gap-2 mb-2">
<i class="fa-solid fa-fire-flame-curved text-amber-500"></i> 1. Química & Atração
</h3>
<p id="chemistryText" class="text-gray-300 text-sm leading-relaxed"></p>
</div>
<!-- 2. Comunicação e Diálogo -->
<div class="p-5 rounded-xl bg-mystic-900/60 border border-mystic-600/60 hover:border-gold-500/40 transition-colors">
<h3 class="text-gold-400 font-semibold text-lg flex items-center gap-2 mb-2">
<i class="fa-solid fa-comments text-cyan-400"></i> 2. Comunicação & Diálogo
</h3>
<p id="communicationText" class="text-gray-300 text-sm leading-relaxed"></p>
</div>
<!-- 3. Desafios do Casal -->
<div class="p-5 rounded-xl bg-mystic-900/60 border border-mystic-600/60 hover:border-gold-500/40 transition-colors">
<h3 class="text-gold-400 font-semibold text-lg flex items-center gap-2 mb-2">
<i class="fa-solid fa-mountain text-emerald-400"></i> 3. Desafios do Casal
</h3>
<p id="challengesText" class="text-gray-300 text-sm leading-relaxed"></p>
</div>
<!-- 4. Dica Astral -->
<div class="p-5 rounded-xl bg-mystic-900/60 border border-mystic-600/60 hover:border-gold-500/40 transition-colors">
<h3 class="text-gold-400 font-semibold text-lg flex items-center gap-2 mb-2">
<i class="fa-solid fa-star text-gold-300"></i> 4. Dica Astral para o Relacionamento
</h3>
<p id="astralTipText" class="text-gray-300 text-sm leading-relaxed"></p>
</div>
</div>
</div>
</main>
<!-- PHP / Backend Integration Toggle Section -->
<section class="glass-card rounded-xl p-6 border border-mystic-600">
<div class="flex items-center justify-between cursor-pointer" onclick="togglePhpCode()">
<h3 class="text-md font-semibold text-gold-300 flex items-center gap-2">
<i class="fa-solid fa-code text-mystic-300"></i> Código PHP para Integração Backend (WordPress/PHP)
</h3>
<button class="text-mystic-300 hover:text-gold-300 transition-colors">
<i id="phpToggleIcon" class="fa-solid fa-chevron-down"></i>
</button>
</div>
<div id="phpCodeContainer" class="hidden mt-4">
<p class="text-xs text-mystic-200 mb-3">
Copie este código PHP e insira no seu tema WordPress (ex: <code class="text-gold-400">functions.php</code> ou num shortcode personalizado) para processar os dados da sinastria do lado do servidor:
</p>
<pre class="bg-mystic-900 p-4 rounded-lg text-xs text-emerald-300 overflow-x-auto border border-mystic-700 font-mono"><code><?php
/**
* Calculadora de Sinastria Amorosa Rápida - Backend PHP
* Pode ser usada via AJAX ou Shortcode no WordPress.
*/
function calcular_sinastria_astral($signo1, $signo2) {
$elementos = [
'aries' => 'Fogo', 'leao' => 'Fogo', 'sagitario' => 'Fogo',
'touro' => 'Terra', 'virgem' => 'Terra', 'capricornio' => 'Terra',
'gemeos' => 'Ar', 'libra' => 'Ar', 'aquario' => 'Ar',
'cancer' => 'Água', 'escorpiao' => 'Água', 'peixes' => 'Água'
];
$e1 = $elementos[$signo1] ?? null;
$e2 = $elementos[$signo2] ?? null;
if (!$e1 || !$e2) {
return ['erro' => 'Signos inválidos fornecidos.'];
}
// Tabela elemental de compatibilidade base
$matriz_elementos = [
'Fogo' => ['Fogo' => 85, 'Ar' => 95, 'Terra' => 60, 'Água' => 50],
'Terra' => ['Terra' => 88, 'Água' => 92, 'Fogo' => 60, 'Ar' => 55],
'Ar' => ['Ar' => 82, 'Fogo' => 95, 'Água' => 65, 'Terra' => 55],
'Água' => ['Água' => 90, 'Terra' => 92, 'Fogo' => 50, 'Ar' => 65],
];
$porcentagem = $matriz_elementos[$e1][$e2] ?? 70;
return [
'signo1' => ucfirst($signo1),
'elemento1' => $e1,
'signo2' => ucfirst($signo2),
'elemento2' => $e2,
'afinidade' => $porcentagem . '%',
'status' => 'Sucesso'
];
}
// Exemplo de uso:
// $resultado = calcular_sinastria_astral('aries', 'libra');
// echo json_encode($resultado);
?></code></pre>
</div>
</section>
</div>
<script>
// Database for Signs & Elements
const signsData = {
aries: { name: 'Áries', element: 'Fogo', icon: '♈' },
touro: { name: 'Touro', element: 'Terra', icon: '♉' },
gemeos: { name: 'Gêmeos', element: 'Ar', icon: '♊' },
cancer: { name: 'Câncer', element: 'Água', icon: '♋' },
leao: { name: 'Leão', element: 'Fogo', icon: '♌' },
virgem: { name: 'Virgem', element: 'Terra', icon: '♍' },
libra: { name: 'Libra', element: 'Ar', icon: '♎' },
escorpiao: { name: 'Escorpião', element: 'Água', icon: '♏' },
sagitario: { name: 'Sagitário', element: 'Fogo', icon: '♐' },
capricornio: { name: 'Capricórnio', element: 'Terra', icon: '♑' },
aquario: { name: 'Aquário', element: 'Ar', icon: '♒' },
peixes: { name: 'Peixes', element: 'Água', icon: '♓' }
};
// Matrix compatibility percentages based on elements
const elementScores = {
'Fogo-Fogo': 88, 'Fogo-Ar': 95, 'Fogo-Terra': 62, 'Fogo-Água': 52,
'Terra-Terra': 90, 'Terra-Água': 94, 'Terra-Fogo': 62, 'Terra-Ar': 58,
'Ar-Ar': 84, 'Ar-Fogo': 95, 'Ar-Água': 64, 'Ar-Terra': 58,
'Água-Água': 92, 'Água-Terra': 94, 'Água-Fogo': 52, 'Água-Ar': 64
};
// Detailed interpretations generator
function generateAnalysis(s1, s2) {
const isSameSign = s1.name === s2.name;
const isSameElement = s1.element === s2.element;
const pairKey = `${s1.element}-${s2.element}`;
let chemistry = "";
let communication = "";
let challenges = "";
let astralTip = "";
// Element specific logic
if (isSameSign) {
chemistry = `Como ambos pertencem ao signo de ${s1.name}, a atração é imediata como um espelho. Vocês reconhecem os desejos e manias um do outro instantaneamente.`;
communication = `O diálogo é extremamente fluído, mas pode pecar pela falta de visões diferentes. Cuidado para não validarem apenas os próprios defeitos.`;
challenges = `Superar o orgulho duplo e a tendência de teimar nos mesmos pontos fracos do signo.`;
astralTip = `Cultivem a individualidade para que o relacionamento não se torne repetitivo ou sufocante.`;
} else if (isSameElement) {
chemistry = `A sintonia de ${s1.element} cria uma atração harmoniosa e natural. A energia flui sem a necessidade de grandes esforços de adaptação.`;
communication = `Vocês falam a mesma língua astral. Os pensamentos e ideias se alinham rapidamente no dia a dia.`;
challenges = `Falta de estímulo vindo de um elemento complementar, o que pode levar a momentos de acomodação.`;
astralTip = `Busquem atividades fora da zona de conforto juntos para manter a chama acesa.`;
} else if (pairKey === 'Fogo-Ar' || pairKey === 'Ar-Fogo') {
chemistry = `O Ar alimenta o Fogo! A química é vibrante, apaixonada e cheia de entusiasmo. Uma combinação de alta energia sexual e intelectual.`;
communication = `Diálogos estimulantes, cheios de planos futuros e ideias criativas. Dificilmente o casal fica sem assunto.`;
challenges = `A volatilidade. Podem acender grandes discussões rapidamente se não controlarem o tom de voz.`;
astralTip = `Canalizem a energia criativa do casal para projetos em comum e viagens inspiradoras.`;
} else if (pairKey === 'Terra-Água' || pairKey === 'Água-Terra') {
chemistry = `A Água nutre a Terra! Uma união profunda, acolhedora e com forte desejo de segurança e toque físico afetivo.`;
communication = `A conversa é calma, empática e focada na construção de estabilidade emocional e material.`;
challenges = `Lidar com momentos de teimosia (Terra) contra oscilações de humor ou dramas emocionais (Água).`;
astralTip = `Respeitem o tempo do outro: a Água precisa sentir e a Terra precisa de dados práticos para agir.`;
} else if (pairKey === 'Fogo-Água' || pairKey === 'Água-Fogo') {
chemistry = `Fogo e Água geram vapor! Muita intensidade e paixão avassaladora, mas com altos e baixos constantes.`;
communication = `A impulsividade verbal do Fogo pode ferir a sensibilidade da Água. Requer cuidado com as palavras.`;
challenges = `Divergência entre a necessidade de liberdade do Fogo e o desejo de fusão e proteção da Água.`;
astralTip = `Exercitem a empatia: Fogo deve aprender a ser mais suave e Água precisa evitar remoer ressentimentos.`;
} else {
// Terra-Ar or Ar-Terra
chemistry = `Uma mistura de razão e praticidade. A atração surge pelo respeito mútuo ao intelecto e à capacidade de realização do par.`;
communication = `Boa para resolver problemas do cotidiano, embora o Ar possa achar a Terra rígida e a Terra achar o Ar aéreo demais.`;
challenges = `Encontrar um ponto de equilíbrio entre a teoria/ideias (Ar) e a prática/pés no chão (Terra).`;
astralTip = `Unam o melhor dos dois mundos: o Ar traz os sonhos e a visão, enquanto a Terra constrói a realidade.`;
}
return { chemistry, communication, challenges, astralTip };
}
// Form submission handler
document.getElementById('synastryForm').addEventListener('submit', function(e) {
e.preventDefault();
const s1Key = document.getElementById('sign1').value;
const s2Key = document.getElementById('sign2').value;
const alertBox = document.getElementById('alertBox');
const resultsSection = document.getElementById('resultsSection');
if (!s1Key || !s2Key) {
alertBox.classList.remove('hidden');
resultsSection.classList.add('hidden');
return;
}
alertBox.classList.add('hidden');
const sign1 = signsData[s1Key];
const sign2 = signsData[s2Key];
// Calculate score
const pairKey = `${sign1.element}-${sign2.element}`;
let baseScore = elementScores[pairKey] || 75;
// Small variation for uniqueness
if (s1Key === s2Key) baseScore = 88;
// Get analysis text
const analysis = generateAnalysis(sign1, sign2);
// Populate UI
document.getElementById('resultPairTitle').innerText = `${sign1.icon} ${sign1.name} & ${sign2.icon} ${sign2.name}`;
document.getElementById('elementsBadge').innerHTML = `
<span class="px-3 py-1 rounded-full bg-mystic-800 border border-gold-500/30 font-medium text-gold-300">
${sign1.name}: ${sign1.element}
</span>
<span class="text-gold-400">+</span>
<span class="px-3 py-1 rounded-full bg-mystic-800 border border-gold-500/30 font-medium text-gold-300">
${sign2.name}: ${sign2.element}
</span>
`;
document.getElementById('chemistryText').innerText = analysis.chemistry;
document.getElementById('communicationText').innerText = analysis.communication;
document.getElementById('challengesText').innerText = analysis.challenges;
document.getElementById('astralTipText').innerText = analysis.astralTip;
// Animate percentage counter
resultsSection.classList.remove('hidden');
animatePercentage('affinityPercent', 0, baseScore, 1200);
// Smooth scroll to results on mobile
resultsSection.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
});
// Helper: Number Counter Animation
function animatePercentage(id, start, end, duration) {
const obj = document.getElementById(id);
let startTimestamp = null;
const step = (timestamp) => {
if (!startTimestamp) startTimestamp = timestamp;
const progress = Math.min((timestamp - startTimestamp) / duration, 1);
const currentVal = Math.floor(progress * (end - start) + start);
obj.innerText = `${currentVal}%`;
if (progress < 1) {
window.requestAnimationFrame(step);
}
};
window.requestAnimationFrame(step);
}
// Toggle PHP Container
function togglePhpCode() {
const container = document.getElementById('phpCodeContainer');
const icon = document.getElementById('phpToggleIcon');
if (container.classList.contains('hidden')) {
container.classList.remove('hidden');
icon.classList.replace('fa-chevron-down', 'fa-chevron-up');
} else {
container.classList.add('hidden');
icon.classList.replace('fa-chevron-up', 'fa-chevron-down');
}
}
</script>
</body>
</html>