|
|
<!DOCTYPE html> |
|
|
<html lang="pt-BR"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>FinSim Pro - Simulador Inteligente de Financiamento Imobiliário</title> |
|
|
<link rel="icon" type="image/x-icon" href="/static/favicon.ico"> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<script src="https://unpkg.com/feather-icons"></script> |
|
|
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script> |
|
|
<script> |
|
|
tailwind.config = { |
|
|
theme: { |
|
|
extend: { |
|
|
colors: { |
|
|
primary: '#0066b3', |
|
|
secondary: '#ff6600', |
|
|
accent: '#00a859' |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
</script> |
|
|
<style> |
|
|
.progress-step { |
|
|
width: 2.5rem; |
|
|
height: 2.5rem; |
|
|
} |
|
|
input[type="range"]::-webkit-slider-thumb { |
|
|
-webkit-appearance: none; |
|
|
appearance: none; |
|
|
width: 20px; |
|
|
height: 20px; |
|
|
background: #0066b3; |
|
|
cursor: pointer; |
|
|
border-radius: 50%; |
|
|
} |
|
|
.switch { |
|
|
position: relative; |
|
|
display: inline-block; |
|
|
width: 60px; |
|
|
height: 34px; |
|
|
} |
|
|
.switch input { |
|
|
opacity: 0; |
|
|
width: 0; |
|
|
height: 0; |
|
|
} |
|
|
.slider { |
|
|
position: absolute; |
|
|
cursor: pointer; |
|
|
top: 0; |
|
|
left: 0; |
|
|
right: 0; |
|
|
bottom: 0; |
|
|
background-color: #ccc; |
|
|
transition: .4s; |
|
|
border-radius: 34px; |
|
|
} |
|
|
.slider:before { |
|
|
position: absolute; |
|
|
content: ""; |
|
|
height: 26px; |
|
|
width: 26px; |
|
|
left: 4px; |
|
|
bottom: 4px; |
|
|
background-color: white; |
|
|
transition: .4s; |
|
|
border-radius: 50%; |
|
|
} |
|
|
input:checked + .slider { |
|
|
background-color: #00a859; |
|
|
} |
|
|
input:checked + .slider:before { |
|
|
transform: translateX(26px); |
|
|
} |
|
|
.tooltip { |
|
|
position: relative; |
|
|
display: inline-block; |
|
|
} |
|
|
.tooltip .tooltiptext { |
|
|
visibility: hidden; |
|
|
width: 200px; |
|
|
background-color: #555; |
|
|
color: #fff; |
|
|
text-align: center; |
|
|
border-radius: 6px; |
|
|
padding: 5px; |
|
|
position: absolute; |
|
|
z-index: 1; |
|
|
bottom: 125%; |
|
|
left: 50%; |
|
|
margin-left: -100px; |
|
|
opacity: 0; |
|
|
transition: opacity 0.3s; |
|
|
} |
|
|
.tooltip:hover .tooltiptext { |
|
|
visibility: visible; |
|
|
opacity: 1; |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="bg-gray-50 font-sans"> |
|
|
|
|
|
<header class="bg-primary text-white shadow-md"> |
|
|
<div class="container mx-auto px-4 py-4 flex justify-between items-center"> |
|
|
<div class="flex items-center space-x-2"> |
|
|
<i data-feather="dollar-sign" class="w-8 h-8"></i> |
|
|
<h1 class="text-2xl font-bold">FinSim Pro</h1> |
|
|
<span class="text-sm bg-white text-primary px-2 py-1 rounded-full ml-2">Beta</span> |
|
|
</div> |
|
|
<div> |
|
|
<button id="loginBtn" class="bg-white text-primary px-4 py-2 rounded-full font-medium hover:bg-gray-100 transition"> |
|
|
Entrar |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</header> |
|
|
|
|
|
|
|
|
<main class="container mx-auto px-4 py-8"> |
|
|
|
|
|
<div class="max-w-3xl mx-auto mb-8"> |
|
|
<div class="flex justify-between relative"> |
|
|
<div class="absolute top-1/2 left-0 right-0 h-1 bg-gray-200 -z-10"></div> |
|
|
<div id="progressBar" class="absolute top-1/2 left-0 h-1 bg-accent -z-10" style="width: 25%;"></div> |
|
|
|
|
|
<div class="flex flex-col items-center"> |
|
|
<div class="progress-step rounded-full bg-accent text-white flex items-center justify-center mb-1"> |
|
|
<span>1</span> |
|
|
</div> |
|
|
<span class="text-sm font-medium text-accent">Dados Básicos</span> |
|
|
</div> |
|
|
<div class="flex flex-col items-center"> |
|
|
<div class="progress-step rounded-full border-2 border-gray-300 bg-white text-gray-400 flex items-center justify-center mb-1"> |
|
|
<span>2</span> |
|
|
</div> |
|
|
<span class="text-sm font-medium text-gray-500">Condições</span> |
|
|
</div> |
|
|
<div class="flex flex-col items-center"> |
|
|
<div class="progress-step rounded-full border-2 border-gray-300 bg-white text-gray-400 flex items-center justify-center mb-1"> |
|
|
<span>3</span> |
|
|
</div> |
|
|
<span class="text-sm font-medium text-gray-500">Resultado</span> |
|
|
</div> |
|
|
<div class="flex flex-col items-center"> |
|
|
<div class="progress-step rounded-full border-2 border-gray-300 bg-white text-gray-400 flex items-center justify-center mb-1"> |
|
|
<span>4</span> |
|
|
</div> |
|
|
<span class="text-sm font-medium text-gray-500">Personalizar</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="step1" class="max-w-3xl mx-auto bg-white rounded-xl shadow-md overflow-hidden p-6 mb-6"> |
|
|
<h2 class="text-xl font-bold text-primary mb-4">Vamos começar sua simulação</h2> |
|
|
<p class="text-gray-600 mb-6">Preencha os campos abaixo com informações reais para obter uma simulação precisa</p> |
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4"> |
|
|
<div> |
|
|
<label for="valorImovel" class="block text-sm font-medium text-gray-700 mb-1 flex items-center"> |
|
|
Valor do imóvel desejado |
|
|
<span class="tooltip ml-1"> |
|
|
<i data-feather="help-circle" class="w-4 h-4 text-gray-400"></i> |
|
|
<span class="tooltiptext">Informe o valor de mercado do imóvel que deseja financiar</span> |
|
|
</span> |
|
|
</label> |
|
|
<div class="relative"> |
|
|
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none"> |
|
|
<span class="text-gray-500">R$</span> |
|
|
</div> |
|
|
<input type="number" id="valorImovel" class="pl-10 block w-full rounded-md border-gray-300 shadow-sm focus:border-primary focus:ring-primary" placeholder="300.000,00"> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<label for="rendaMensal" class="block text-sm font-medium text-gray-700 mb-1 flex items-center"> |
|
|
Sua renda mensal bruta |
|
|
<span class="tooltip ml-1"> |
|
|
<i data-feather="help-circle" class="w-4 h-4 text-gray-400"></i> |
|
|
<span class="tooltiptext">Soma de todos seus rendimentos antes dos descontos</span> |
|
|
</span> |
|
|
</label> |
|
|
<div class="relative"> |
|
|
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none"> |
|
|
<span class="text-gray-500">R$</span> |
|
|
</div> |
|
|
<input type="number" id="rendaMensal" class="pl-10 block w-full rounded-md border-gray-300 shadow-sm focus:border-primary focus:ring-primary" placeholder="8.000,00"> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4"> |
|
|
<div> |
|
|
<label for="entrada" class="block text-sm font-medium text-gray-700 mb-1 flex items-center"> |
|
|
Valor disponível para entrada |
|
|
<span class="tooltip ml-1"> |
|
|
<i data-feather="help-circle" class="w-4 h-4 text-gray-400"></i> |
|
|
<span class="tooltiptext">Inclua recursos próprios, FGTS e outros valores disponíveis</span> |
|
|
</span> |
|
|
</label> |
|
|
<div class="relative"> |
|
|
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none"> |
|
|
<span class="text-gray-500">R$</span> |
|
|
</div> |
|
|
<input type="number" id="entrada" class="pl-10 block w-full rounded-md border-gray-300 shadow-sm focus:border-primary focus:ring-primary" placeholder="60.000,00"> |
|
|
</div> |
|
|
<p class="mt-1 text-xs text-gray-500"> |
|
|
<i data-feather="info" class="w-3 h-3 inline mr-1"></i> |
|
|
Entrada mínima: 20% para imóveis usados, 15% para novos |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<label for="prazo" class="block text-sm font-medium text-gray-700 mb-1 flex items-center"> |
|
|
Prazo do financiamento (anos) |
|
|
<span class="tooltip ml-1"> |
|
|
<i data-feather="help-circle" class="w-4 h-4 text-gray-400"></i> |
|
|
<span class="tooltiptext">Prazo máximo: 35 anos para imóveis novos, 30 anos para usados</span> |
|
|
</span> |
|
|
</label> |
|
|
<input type="range" id="prazo" min="5" max="35" value="20" class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer"> |
|
|
<div class="flex justify-between text-xs text-gray-500"> |
|
|
<span>5</span> |
|
|
<span>10</span> |
|
|
<span>15</span> |
|
|
<span>20</span> |
|
|
<span>25</span> |
|
|
<span>30</span> |
|
|
<span>35</span> |
|
|
</div> |
|
|
<p class="mt-1 text-center font-medium"><span id="prazoValue">20</span> anos</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="mt-6 flex justify-end"> |
|
|
<button id="nextToStep2" class="bg-primary text-white px-6 py-2 rounded-full font-medium hover:bg-blue-700 transition"> |
|
|
Continuar <i data-feather="arrow-right" class="w-4 h-4 inline ml-1"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="step2" class="max-w-3xl mx-auto bg-white rounded-xl shadow-md overflow-hidden p-6 mb-6 hidden"> |
|
|
<h2 class="text-xl font-bold text-primary mb-4">Melhore suas condições</h2> |
|
|
<p class="text-gray-600 mb-6">Ative os benefícios que você possui para reduzir sua taxa de juros</p> |
|
|
<div class="mb-6"> |
|
|
<h3 class="text-lg font-semibold mb-3 flex items-center"> |
|
|
<i data-feather="user-check" class="w-5 h-5 mr-2 text-primary"></i> |
|
|
Benefícios para clientes Caixa |
|
|
</h3> |
|
|
<p class="text-sm text-gray-600 mb-4">Cada produto ativado reduz sua taxa de juros. Quanto mais benefícios, maior a economia!</p> |
|
|
<div class="space-y-3"> |
|
|
<div class="flex items-center justify-between p-3 border border-gray-200 rounded-lg"> |
|
|
<div> |
|
|
<h4 class="font-medium">Conta corrente na Caixa</h4> |
|
|
<p class="text-xs text-gray-500">Redução de 0,2% na taxa</p> |
|
|
</div> |
|
|
<label class="switch"> |
|
|
<input type="checkbox" id="contaCaixa"> |
|
|
<span class="slider round"></span> |
|
|
</label> |
|
|
</div> |
|
|
|
|
|
<div class="flex items-center justify-between p-3 border border-gray-200 rounded-lg"> |
|
|
<div> |
|
|
<h4 class="font-medium">Pix cadastrado com CPF</h4> |
|
|
<p class="text-xs text-gray-500">Redução de 0,15% na taxa</p> |
|
|
</div> |
|
|
<label class="switch"> |
|
|
<input type="checkbox" id="pixCPF"> |
|
|
<span class="slider round"></span> |
|
|
</label> |
|
|
</div> |
|
|
|
|
|
<div class="flex items-center justify-between p-3 border border-gray-200 rounded-lg"> |
|
|
<div> |
|
|
<h4 class="font-medium">Open Finance ativado</h4> |
|
|
<p class="text-xs text-gray-500">Redução de 0,1% na taxa</p> |
|
|
</div> |
|
|
<label class="switch"> |
|
|
<input type="checkbox" id="openFinance"> |
|
|
<span class="slider round"></span> |
|
|
</label> |
|
|
</div> |
|
|
|
|
|
<div class="flex items-center justify-between p-3 border border-gray-200 rounded-lg"> |
|
|
<div> |
|
|
<h4 class="font-medium">Cartão de crédito Caixa</h4> |
|
|
<p class="text-xs text-gray-500">Redução de 0,15% na taxa</p> |
|
|
</div> |
|
|
<label class="switch"> |
|
|
<input type="checkbox" id="cartaoCredito"> |
|
|
<span class="slider round"></span> |
|
|
</label> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<h3 class="text-lg font-semibold mb-3 flex items-center"> |
|
|
<i data-feather="trending-down" class="w-5 h-5 mr-2 text-primary"></i> |
|
|
Escolha como pagar seu financiamento |
|
|
</h3> |
|
|
<p class="text-sm text-gray-600 mb-4">Selecione o sistema que melhor se adapta ao seu orçamento</p> |
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4"> |
|
|
<div> |
|
|
<input type="radio" id="sac" name="amortizacao" value="sac" class="hidden peer" checked> |
|
|
<label for="sac" class="block p-4 border border-gray-200 rounded-lg cursor-pointer peer-checked:border-primary peer-checked:bg-blue-50"> |
|
|
<div class="flex items-start"> |
|
|
<div class="flex-shrink-0 h-5 w-5 mt-0.5"> |
|
|
<div class="h-4 w-4 border-2 border-gray-300 rounded-full peer-checked:border-primary peer-checked:bg-primary relative"> |
|
|
<div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-2 h-2 bg-white rounded-full hidden peer-checked:block"></div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="ml-3"> |
|
|
<h4 class="font-medium">SAC</h4> |
|
|
<p class="text-xs text-gray-500">Prestações decrescentes</p> |
|
|
</div> |
|
|
</div> |
|
|
</label> |
|
|
</div> |
|
|
<div> |
|
|
<input type="radio" id="price" name="amortizacao" value="price" class="hidden peer"> |
|
|
<label for="price" class="block p-4 border border-gray-200 rounded-lg cursor-pointer peer-checked:border-primary peer-checked:bg-blue-50"> |
|
|
<div class="flex items-start"> |
|
|
<div class="flex-shrink-0 h-5 w-5 mt-0.5"> |
|
|
<div class="h-4 w-4 border-2 border-gray-300 rounded-full peer-checked:border-primary peer-checked:bg-primary relative"> |
|
|
<div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-2 h-2 bg-white rounded-full hidden peer-checked:block"></div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="ml-3"> |
|
|
<h4 class="font-medium">PRICE</h4> |
|
|
<p class="text-xs text-gray-500">Prestações fixas</p> |
|
|
</div> |
|
|
</div> |
|
|
</label> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="mt-6 flex justify-between"> |
|
|
<button id="backToStep1" class="text-primary px-6 py-2 rounded-full font-medium hover:bg-gray-100 transition"> |
|
|
<i data-feather="arrow-left" class="w-4 h-4 inline mr-1"></i> Voltar |
|
|
</button> |
|
|
<button id="nextToStep3" class="bg-primary text-white px-6 py-2 rounded-full font-medium hover:bg-blue-700 transition"> |
|
|
Simular <i data-feather="arrow-right" class="w-4 h-4 inline ml-1"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="step3" class="max-w-3xl mx-auto bg-white rounded-xl shadow-md overflow-hidden p-6 mb-6 hidden"> |
|
|
<h2 class="text-xl font-bold text-primary mb-4">Sua simulação personalizada</h2> |
|
|
<p class="text-gray-600 mb-6">Confira os detalhes do seu financiamento e compare com as condições normais</p> |
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6"> |
|
|
<div class="bg-blue-50 p-4 rounded-lg"> |
|
|
<h3 class="text-sm font-medium text-gray-600 mb-1 flex items-center"> |
|
|
<i data-feather="dollar-sign" class="w-3 h-3 mr-1"></i> |
|
|
Valor financiado |
|
|
</h3> |
|
|
<p class="text-xl font-bold" id="valorFinanciado">R$ 240.000,00</p> |
|
|
</div> |
|
|
<div class="bg-blue-50 p-4 rounded-lg"> |
|
|
<h3 class="text-sm font-medium text-gray-600 mb-1 flex items-center"> |
|
|
<i data-feather="percent" class="w-3 h-3 mr-1"></i> |
|
|
Taxa de juros anual |
|
|
</h3> |
|
|
<p class="text-xl font-bold" id="taxaJuros">8,5% a.a.</p> |
|
|
</div> |
|
|
<div class="bg-blue-50 p-4 rounded-lg"> |
|
|
<h3 class="text-sm font-medium text-gray-600 mb-1">Parcela inicial</h3> |
|
|
<p class="text-xl font-bold" id="parcelaInicial">R$ 2.045,00</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="mb-6"> |
|
|
<h3 class="text-lg font-semibold mb-3 flex items-center"> |
|
|
<i data-feather="bar-chart-2" class="w-5 h-5 mr-2 text-primary"></i> |
|
|
Veja quanto você está economizando |
|
|
</h3> |
|
|
<div class="bg-gray-50 p-4 rounded-lg"> |
|
|
<div class="flex justify-between items-center mb-2"> |
|
|
<span class="font-medium">Taxa normal</span> |
|
|
<span class="text-gray-600">9,0% a.a.</span> |
|
|
</div> |
|
|
<div class="flex justify-between items-center text-accent"> |
|
|
<span class="font-medium">Sua taxa</span> |
|
|
<span id="suaTaxaComparacao">8,5% a.a.</span> |
|
|
</div> |
|
|
<div class="mt-4 text-sm text-gray-500"> |
|
|
<p>Com os descontos aplicados, você economiza <span class="font-medium text-accent" id="economiaTaxa">R$ 15.200,00</span> no total do financiamento.</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="mb-6"> |
|
|
<h3 class="text-lg font-semibold mb-3 flex items-center"> |
|
|
<i data-feather="calendar" class="w-5 h-5 mr-2 text-primary"></i> |
|
|
Projeção das suas parcelas ao longo do tempo |
|
|
</h3> |
|
|
<div class="h-64"> |
|
|
<canvas id="graficoParcelas"></canvas> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="mt-6 flex justify-between"> |
|
|
<button id="backToStep2" class="text-primary px-6 py-2 rounded-full font-medium hover:bg-gray-100 transition"> |
|
|
<i data-feather="arrow-left" class="w-4 h-4 inline mr-1"></i> Voltar |
|
|
</button> |
|
|
<div class="space-x-3"> |
|
|
<button class="text-primary px-4 py-2 rounded-full font-medium hover:bg-gray-100 transition border border-primary"> |
|
|
<i data-feather="download" class="w-4 h-4 inline mr-1"></i> Baixar |
|
|
</button> |
|
|
<button id="nextToStep4" class="bg-primary text-white px-6 py-2 rounded-full font-medium hover:bg-blue-700 transition"> |
|
|
Personalizar <i data-feather="arrow-right" class="w-4 h-4 inline ml-1"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="step4" class="max-w-3xl mx-auto bg-white rounded-xl shadow-md overflow-hidden p-6 mb-6 hidden"> |
|
|
<h2 class="text-xl font-bold text-primary mb-4">Ajuste fino da sua simulação</h2> |
|
|
<p class="text-gray-600 mb-6">Faça os últimos ajustes para encontrar a proposta ideal para seu bolso</p> |
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6"> |
|
|
<div> |
|
|
<label for="prazoMaximo" class="block text-sm font-medium text-gray-700 mb-1 flex items-center"> |
|
|
Prazo máximo desejado |
|
|
<span class="tooltip ml-1"> |
|
|
<i data-feather="help-circle" class="w-4 h-4 text-gray-400"></i> |
|
|
<span class="tooltiptext">O prazo afeta diretamente o valor das parcelas e o total de juros</span> |
|
|
</span> |
|
|
</label> |
|
|
<input type="range" id="prazoMaximo" min="5" max="35" value="20" class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer"> |
|
|
<div class="flex justify-between text-xs text-gray-500"> |
|
|
<span>5</span> |
|
|
<span>10</span> |
|
|
<span>15</span> |
|
|
<span>20</span> |
|
|
<span>25</span> |
|
|
<span>30</span> |
|
|
<span>35</span> |
|
|
</div> |
|
|
<p class="mt-1 text-center font-medium"><span id="prazoMaximoValue">20</span> anos</p> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<label for="entradaMinima" class="block text-sm font-medium text-gray-700 mb-1 flex items-center"> |
|
|
Percentual de entrada |
|
|
<span class="tooltip ml-1"> |
|
|
<i data-feather="help-circle" class="w-4 h-4 text-gray-400"></i> |
|
|
<span class="tooltiptext">Entradas maiores reduzem o valor financiado e os juros totais</span> |
|
|
</span> |
|
|
</label> |
|
|
<input type="range" id="entradaMinima" min="10" max="50" value="20" class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer"> |
|
|
<div class="flex justify-between text-xs text-gray-500"> |
|
|
<span>10%</span> |
|
|
<span>20%</span> |
|
|
<span>30%</span> |
|
|
<span>40%</span> |
|
|
<span>50%</span> |
|
|
</div> |
|
|
<p class="mt-1 text-center font-medium"><span id="entradaMinimaValue">20</span>%</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="mb-6"> |
|
|
<h3 class="text-lg font-semibold mb-3 flex items-center"> |
|
|
<i data-feather="settings" class="w-5 h-5 mr-2 text-primary"></i> |
|
|
Revisar sistema de amortização |
|
|
</h3> |
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4"> |
|
|
<div> |
|
|
<input type="radio" id="sacPersonalizado" name="amortizacaoPersonalizada" value="sac" class="hidden peer" checked> |
|
|
<label for="sacPersonalizado" class="block p-4 border border-gray-200 rounded-lg cursor-pointer peer-checked:border-primary peer-checked:bg-blue-50"> |
|
|
<div class="flex items-start"> |
|
|
<div class="flex-shrink-0 h-5 w-5 mt-0.5"> |
|
|
<div class="h-4 w-4 border-2 border-gray-300 rounded-full peer-checked:border-primary peer-checked:bg-primary relative"> |
|
|
<div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-2 h-2 bg-white rounded-full hidden peer-checked:block"></div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="ml-3"> |
|
|
<h4 class="font-medium">SAC</h4> |
|
|
<p class="text-xs text-gray-500">Prestações decrescentes</p> |
|
|
</div> |
|
|
</div> |
|
|
</label> |
|
|
</div> |
|
|
<div> |
|
|
<input type="radio" id="pricePersonalizado" name="amortizacaoPersonalizada" value="price" class="hidden peer"> |
|
|
<label for="pricePersonalizado" class="block p-4 border border-gray-200 rounded-lg cursor-pointer peer-checked:border-primary peer-checked:bg-blue-50"> |
|
|
<div class="flex items-start"> |
|
|
<div class="flex-shrink-0 h-5 w-5 mt-0.5"> |
|
|
<div class="h-4 w-4 border-2 border-gray-300 rounded-full peer-checked:border-primary peer-checked:bg-primary relative"> |
|
|
<div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-2 h-2 bg-white rounded-full hidden peer-checked:block"></div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="ml-3"> |
|
|
<h4 class="font-medium">PRICE</h4> |
|
|
<p class="text-xs text-gray-500">Prestações fixas</p> |
|
|
</div> |
|
|
</div> |
|
|
</label> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="mb-6"> |
|
|
<h3 class="text-lg font-semibold mb-3 flex items-center"> |
|
|
<i data-feather="sliders" class="w-5 h-5 mr-2 text-primary"></i> |
|
|
Ajustes manuais das parcelas |
|
|
</h3> |
|
|
<p class="text-sm text-gray-600 mb-4">Edite os valores para simular diferentes cenários</p> |
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4"> |
|
|
<div> |
|
|
<label for="primeiraParcela" class="block text-sm font-medium text-gray-700 mb-1">Primeira parcela</label> |
|
|
<div class="relative"> |
|
|
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none"> |
|
|
<span class="text-gray-500">R$</span> |
|
|
</div> |
|
|
<input type="number" id="primeiraParcela" class="pl-10 block w-full rounded-md border-gray-300 shadow-sm focus:border-primary focus:ring-primary" placeholder="2.045,00"> |
|
|
</div> |
|
|
</div> |
|
|
<div> |
|
|
<label for="ultimaParcela" class="block text-sm font-medium text-gray-700 mb-1">Última parcela</label> |
|
|
<div class="relative"> |
|
|
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none"> |
|
|
<span class="text-gray-500">R$</span> |
|
|
</div> |
|
|
<input type="number" id="ultimaParcela" class="pl-10 block w-full rounded-md border-gray-300 shadow-sm focus:border-primary focus:ring-primary" placeholder="1.200,00"> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="mt-6 flex justify-between"> |
|
|
<button id="backToStep3" class="text-primary px-6 py-2 rounded-full font-medium hover:bg-gray-100 transition"> |
|
|
<i data-feather="arrow-left" class="w-4 h-4 inline mr-1"></i> Voltar |
|
|
</button> |
|
|
<div class="space-x-3"> |
|
|
<button class="text-primary px-4 py-2 rounded-full font-medium hover:bg-gray-100 transition border border-primary"> |
|
|
<i data-feather="download" class="w-4 h-4 inline mr-1"></i> Baixar |
|
|
</button> |
|
|
<button id="contratarBtn" class="bg-accent text-white px-6 py-2 rounded-full font-medium hover:bg-green-600 transition flex items-center justify-center"> |
|
|
<i data-feather="file-text" class="w-4 h-4 mr-2"></i> |
|
|
Iniciar processo de contratação |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</main> |
|
|
|
|
|
|
|
|
<div id="loginModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden"> |
|
|
<div class="bg-white rounded-xl p-6 max-w-md w-full mx-4"> |
|
|
<div class="flex justify-between items-center mb-4"> |
|
|
<h3 class="text-xl font-bold text-primary flex items-center"> |
|
|
<i data-feather="lock" class="w-5 h-5 mr-2"></i> |
|
|
Acesso ao seu financiamento |
|
|
</h3> |
|
|
<button id="closeLoginModal" class="text-gray-500 hover:text-gray-700"> |
|
|
<i data-feather="x"></i> |
|
|
</button> |
|
|
</div> |
|
|
<form> |
|
|
<div class="mb-4"> |
|
|
<label for="loginCPF" class="block text-sm font-medium text-gray-700 mb-1">CPF</label> |
|
|
<input type="text" id="loginCPF" class="block w-full rounded-md border-gray-300 shadow-sm focus:border-primary focus:ring-primary" placeholder="000.000.000-00"> |
|
|
</div> |
|
|
<div class="mb-6"> |
|
|
<label for="loginSenha" class="block text-sm font-medium text-gray-700 mb-1">Senha</label> |
|
|
<input type="password" id="loginSenha" class="block w-full rounded-md border-gray-300 shadow-sm focus:border-primary focus:ring-primary" placeholder="••••••••"> |
|
|
</div> |
|
|
<button type="button" class="w-full bg-primary text-white py-2 rounded-full font-medium hover:bg-blue-700 transition flex items-center justify-center"> |
|
|
<i data-feather="log-in" class="w-4 h-4 mr-2"></i> |
|
|
Acessar minha conta |
|
|
</button> |
|
|
</form> |
|
|
<div class="mt-4 text-center"> |
|
|
<a href="#" class="text-sm text-primary hover:underline">Esqueci minha senha</a> |
|
|
<p class="text-sm text-gray-500 mt-2"> |
|
|
Não tem conta? <a href="#" class="text-primary hover:underline font-medium">Abra sua conta digital agora</a> |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> |
|
|
<script> |
|
|
document.addEventListener('DOMContentLoaded', function() { |
|
|
feather.replace(); |
|
|
|
|
|
|
|
|
const ctx = document.getElementById('graficoParcelas').getContext('2d'); |
|
|
const parcelasChart = new Chart(ctx, { |
|
|
type: 'line', |
|
|
data: { |
|
|
labels: ['Ano 1', 'Ano 5', 'Ano 10', 'Ano 15', 'Ano 20'], |
|
|
datasets: [{ |
|
|
label: 'Valor da Parcela', |
|
|
data: [2045, 1850, 1650, 1450, 1250], |
|
|
borderColor: '#0066b3', |
|
|
backgroundColor: 'rgba(0, 102, 179, 0.1)', |
|
|
tension: 0.1, |
|
|
fill: true |
|
|
}] |
|
|
}, |
|
|
options: { |
|
|
responsive: true, |
|
|
plugins: { |
|
|
legend: { |
|
|
display: false |
|
|
} |
|
|
}, |
|
|
scales: { |
|
|
y: { |
|
|
beginAtZero: true |
|
|
} |
|
|
} |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
document.getElementById('prazo').addEventListener('input', function() { |
|
|
document.getElementById('prazoValue').textContent = this.value; |
|
|
}); |
|
|
|
|
|
document.getElementById('prazoMaximo').addEventListener('input', function() { |
|
|
document.getElementById('prazoMaximoValue').textContent = this.value; |
|
|
}); |
|
|
|
|
|
document.getElementById('entradaMinima').addEventListener('input', function() { |
|
|
document.getElementById('entradaMinimaValue').textContent = this.value; |
|
|
}); |
|
|
|
|
|
|
|
|
document.getElementById('nextToStep2').addEventListener('click', function() { |
|
|
document.getElementById('step1').classList.add('hidden'); |
|
|
document.getElementById('step2').classList.remove('hidden'); |
|
|
document.getElementById('progressBar').style.width = '50%'; |
|
|
updateProgressSteps(2); |
|
|
}); |
|
|
|
|
|
document.getElementById('backToStep1').addEventListener('click', function() { |
|
|
document.getElementById('step2').classList.add('hidden'); |
|
|
document.getElementById('step1').classList.remove('hidden'); |
|
|
document.getElementById('progressBar').style.width = '25%'; |
|
|
updateProgressSteps(1); |
|
|
}); |
|
|
|
|
|
document.getElementById('nextToStep3').addEventListener('click', function() { |
|
|
document.getElementById('step2').classList.add('hidden'); |
|
|
document.getElementById('step3').classList.remove('hidden'); |
|
|
document.getElementById('progressBar').style.width = '75%'; |
|
|
updateProgressSteps(3); |
|
|
|
|
|
|
|
|
const valorImovel = parseFloat(document.getElementById('valorImovel').value) || 300000; |
|
|
const entrada = parseFloat(document.getElementById('entrada').value) || 60000; |
|
|
const valorFinanciado = valorImovel - entrada; |
|
|
document.getElementById('valorFinanciado').textContent = 'R$ ' + valorFinanciado.toLocaleString('pt-BR', {minimumFractionDigits: 2, maximumFractionDigits: 2}); |
|
|
|
|
|
|
|
|
let taxaBase = 9.0; |
|
|
let desconto = 0; |
|
|
|
|
|
if (document.getElementById('contaCaixa').checked) desconto += 0.2; |
|
|
if (document.getElementById('pixCPF').checked) desconto += 0.15; |
|
|
if (document.getElementById('openFinance').checked) desconto += 0.1; |
|
|
if (document.getElementById('cartaoCredito').checked) desconto += 0.15; |
|
|
|
|
|
const taxaFinal = taxaBase - desconto; |
|
|
document.getElementById('taxaJuros').textContent = taxaFinal.toFixed(2).replace('.', ',') + '% a.a.'; |
|
|
document.getElementById('suaTaxaComparacao').textContent = taxaFinal.toFixed(2).replace('.', ',') + '% a.a.'; |
|
|
|
|
|
|
|
|
const economia = (valorFinanciado * (taxaBase/100) * 20) - (valorFinanciado * (taxaFinal/100) * 20); |
|
|
document.getElementById('economiaTaxa').textContent = 'R$ ' + economia.toLocaleString('pt-BR', {minimumFractionDigits: 2, maximumFractionDigits: 2}); |
|
|
|
|
|
|
|
|
const isSAC = document.getElementById('sac').checked; |
|
|
if (isSAC) { |
|
|
parcelasChart.data.datasets[0].data = [2045, 1850, 1650, 1450, 1250]; |
|
|
} else { |
|
|
parcelasChart.data.datasets[0].data = [1800, 1800, 1800, 1800, 1800]; |
|
|
} |
|
|
parcelasChart.update(); |
|
|
|
|
|
|
|
|
document.getElementById('primeiraParcela').value = isSAC ? '2045.00' : '1800.00'; |
|
|
document.getElementById('ultimaParcela').value = isSAC ? '1250.00' : '1800.00'; |
|
|
}); |
|
|
|
|
|
document.getElementById('backToStep2').addEventListener('click', function() { |
|
|
document.getElementById('step3').classList.add('hidden'); |
|
|
document.getElementById('step2').classList.remove('hidden'); |
|
|
document.getElementById('progressBar').style.width = '50%'; |
|
|
updateProgressSteps(2); |
|
|
}); |
|
|
|
|
|
document.getElementById('nextToStep4').addEventListener('click', function() { |
|
|
document.getElementById('step3').classList.add('hidden'); |
|
|
document.getElementById('step4').classList.remove('hidden'); |
|
|
document.getElementById('progressBar').style.width = '100%'; |
|
|
updateProgressSteps(4); |
|
|
}); |
|
|
|
|
|
document.getElementById('backToStep3').addEventListener('click', function() { |
|
|
document.getElementById('step4').classList.add('hidden'); |
|
|
document.getElementById('step3').classList.remove('hidden'); |
|
|
document.getElementById('progressBar').style.width = '75%'; |
|
|
updateProgressSteps(3); |
|
|
}); |
|
|
|
|
|
|
|
|
document.getElementById('loginBtn').addEventListener('click', function() { |
|
|
document.getElementById('loginModal').classList.remove('hidden'); |
|
|
}); |
|
|
|
|
|
document.getElementById('closeLoginModal').addEventListener('click', function() { |
|
|
document.getElementById('loginModal').classList.add('hidden'); |
|
|
}); |
|
|
|
|
|
|
|
|
document.getElementById('contratarBtn').addEventListener('click', function() { |
|
|
document.getElementById('loginModal').classList.remove('hidden'); |
|
|
}); |
|
|
|
|
|
|
|
|
function updateProgressSteps(currentStep) { |
|
|
const steps = document.querySelectorAll('.progress-step'); |
|
|
const labels = document.querySelectorAll('.flex-col.items-center span.text-sm'); |
|
|
|
|
|
steps.forEach((step, index) => { |
|
|
if (index < currentStep) { |
|
|
step.classList.remove('border-gray-300', 'bg-white', 'text-gray-400'); |
|
|
step.classList.add('bg-accent', 'text-white'); |
|
|
} else if (index === currentStep - 1) { |
|
|
|
|
|
step.classList.remove('border-gray-300', 'bg-white', 'text-gray-400'); |
|
|
step.classList.add('bg-accent', 'text-white'); |
|
|
} else { |
|
|
step.classList.remove('bg-accent', 'text-white'); |
|
|
step.classList.add('border-gray-300', 'bg-white', 'text-gray-400'); |
|
|
} |
|
|
}); |
|
|
|
|
|
labels.forEach((label, index) => { |
|
|
if (index < currentStep) { |
|
|
label.classList.remove('text-gray-500'); |
|
|
label.classList.add('text-accent'); |
|
|
} else { |
|
|
label.classList.remove('text-accent'); |
|
|
label.classList.add('text-gray-500'); |
|
|
} |
|
|
}); |
|
|
} |
|
|
}); |
|
|
</script> |
|
|
</body> |
|
|
</html> |
|
|
|
