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