Spaces:

Persano
/

flowise1

Sleeping

App Files Files Community

Persano commited on Jun 16

Commit

836ecac

verified ·

1 Parent(s): 915c542

Update templates/index.html

Browse files

Files changed (1) hide show

templates/index.html +112 -385

templates/index.html CHANGED Viewed

@@ -1,445 +1,172 @@
 <!DOCTYPE html>
-<html lang="pt-BR" >
 <head>
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1" />
-  <title>Simulador de Investimentos Moderno</title>
   <style>
-    @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap');
-    /* Reset & base */
     * {
       box-sizing: border-box;
-      margin: 0; padding: 0;
     }
     body {
-      font-family: 'Poppins', sans-serif;
-      background: linear-gradient(135deg, #0f2027, #203a43, #2c5364);
-      color: #fff;
       min-height: 100vh;
       display: flex;
-      flex-direction: column;
-      align-items: center;
-      padding: 1.5rem;
-      -webkit-font-smoothing: antialiased;
-      -moz-osx-font-smoothing: grayscale;
     }
-    h1 {
-      font-weight: 600;
-      font-size: 2.2rem;
-      margin-bottom: 1rem;
-      letter-spacing: 0.06em;
-      text-align: center;
-      text-transform: uppercase;
-      text-shadow: 0 2px 8px rgba(255,255,255,0.2);
-    }
-    form {
-      background: rgba(255, 255, 255, 0.1);
-      backdrop-filter: blur(8px);
       border-radius: 12px;
-      padding: 1.5rem 1.8rem;
-      max-width: 400px;
       width: 100%;
-      box-shadow: 0 8px 30px rgba(0,0,0,0.3);
-      margin-bottom: 2rem;
-      transition: box-shadow 0.3s ease;
     }
-    form:hover, form:focus-within {
-      box-shadow: 0 12px 45px rgba(0,0,0,0.5);
     }
     label {
-      display: block;
       font-weight: 600;
-      font-size: 0.9rem;
-      margin-bottom: 0.35rem;
-      color: #a0d8ef;
-      text-transform: uppercase;
-      letter-spacing: 0.04em;
-      user-select: none;
     }
     input[type="number"] {
       width: 100%;
-      padding: 0.55rem 0.8rem;
       border-radius: 8px;
-      border: none;
       font-size: 1rem;
-      font-weight: 500;
-      color: #0f2027;
-      background: #e0f7fa;
-      box-shadow: inset 1px 1px 6px rgba(0,0,0,0.1);
-      transition: background-color 0.25s ease;
-      margin-bottom: 1.2rem;
-      outline-offset: 2px;
     }
     input[type="number"]:focus {
-      background: #b2ebf2;
-      outline: 2px solid #0077c2;
-    }
-    button {
-      width: 100%;
-      padding: 0.75rem;
-      background: #00c6ff;
-      background: linear-gradient(45deg, #00c6ff, #0072ff);
-      border: none;
-      border-radius: 10px;
-      color: white;
-      font-weight: 700;
-      font-size: 1.1rem;
-      cursor: pointer;
-      letter-spacing: 0.05em;
-      box-shadow: 0 6px 20px rgba(0, 198, 255, 0.5);
-      transition: background 0.3s ease, box-shadow 0.3s ease;
-      user-select: none;
-    }
-    button:hover {
-      background: linear-gradient(45deg, #0072ff, #00c6ff);
-      box-shadow: 0 8px 30px rgba(0, 114, 255, 0.7);
-    }
-    button:active {
-      transform: scale(0.98);
     }
-    /* Resultado */
-    #resultado {
-      max-width: 800px;
-      width: 100%;
-      background: rgba(255, 255, 255, 0.12);
-      padding: 1.8rem 2rem;
-      border-radius: 14px;
-      box-shadow: 0 12px 40px rgba(0,0,0,0.4);
-      font-size: 1rem;
-      line-height: 1.5;
-      color: #dcefff;
-      font-weight: 400;
-      display: none;
-      user-select: text;
     }
-    #resultado h2 {
-      font-size: 1.8rem;
-      font-weight: 600;
-      margin-bottom: 1rem;
-      color: #00d1ff;
-      text-align: center;
-      text-shadow: 0 2px 6px rgba(0, 209, 255, 0.7);
     }
-    /* Tabela customizada */
-    table {
-      width: 100%;
-      border-collapse: separate;
-      border-spacing: 0 8px;
-      margin-top: 1rem;
-      margin-bottom: 1.5rem;
-      background: rgba(0, 0, 0, 0.15);
       border-radius: 10px;
-      overflow: hidden;
-      box-shadow: inset 0 0 15px rgba(0,0,0,0.3);
-    }
-    th, td {
-      padding: 0.8rem 1.1rem;
-      text-align: right;
-      font-weight: 500;
-      color: #d0e8ff;
-    }
-    th:first-child, td:first-child {
-      text-align: left;
-      font-weight: 600;
-      color: #a0d8ef;
-    }
-    th {
-      background: linear-gradient(90deg, #0077c2, #00c6ff);
-      font-size: 1rem;
-      letter-spacing: 0.04em;
-    }
-    tbody tr:hover {
-      background: rgba(0, 198, 255, 0.12);
-      color: #00d1ff;
       transition: background-color 0.25s ease;
     }
-    tbody tr strong {
-      color: #00ff99;
-      font-weight: 700;
-      text-shadow: 0 0 6px #00ff99;
     }
-    /* Texto análise */
-    #analise {
-      white-space: pre-wrap;
-      background: rgba(0, 0, 0, 0.2);
-      padding: 1rem 1.2rem;
-      border-radius: 12px;
-      font-size: 1rem;
-      color: #b9f2ff;
-      font-weight: 400;
-      max-height: 300px;
-      overflow-y: auto;
-      box-shadow: inset 0 0 15px rgba(0,209,255,0.3);
-      user-select: text;
     }
-    /* Gráfico */
-    #grafico {
-      margin-top: 1.5rem;
-      border-radius: 12px;
-      box-shadow: 0 0 25px rgba(0, 198, 255, 0.5);
-      max-width: 100%;
-      display: block;
-      margin-left: auto;
-      margin-right: auto;
-      user-select: none;
     }
     /* Responsividade */
     @media (max-width: 480px) {
-      h1 {
-        font-size: 1.6rem;
-      }
-      form {
-        padding: 1.2rem 1rem;
-      }
-      button {
-        font-size: 1rem;
-      }
-      #resultado {
-        padding: 1.2rem 1rem;
-        font-size: 0.9rem;
-      }
-      #analise {
-        max-height: 200px;
-        font-size: 0.9rem;
-      }
-      table, th, td {
-        font-size: 0.85rem;
       }
     }
   </style>
 </head>
 <body>
-  <h1>Simulador de Investimentos</h1>
-  <form id="formInvest" autocomplete="off" spellcheck="false">
-    <label for="capital">Capital Inicial (R$)</label>
-    <input type="number" step="0.01" id="capital" name="capital" placeholder="Ex: 100000" required min="0" />
-    <label for="studio_ret">Retorno Mensal Studio (%)</label>
-    <input type="number" step="0.01" id="studio_ret" name="studio_ret" placeholder="Ex: 0.80" required min="0" />
-    <label for="valorizacao">Valorização Anual Studio (%)</label>
-    <input type="number" step="0.01" id="valorizacao" name="valorizacao" placeholder="Ex: 10" required min="0" />
-    <label for="franquia_ret">Retorno Anual Franquia (R$)</label>
-    <input type="number" step="0.01" id="franquia_ret" name="franquia_ret" placeholder="Ex: 6000" required min="0" />
-    <label for="acoes_ret">Retorno Anual Ações (%)</label>
-    <input type="number" step="0.01" id="acoes_ret" name="acoes_ret" placeholder="Ex: 12" required min="0" />
-    <label for="renda_fixa">Retorno Anual Renda Fixa (%)</label>
-    <input type="number" step="0.01" id="renda_fixa" name="renda_fixa" placeholder="Ex: 6" required min="0" />
-    <label for="inflacao">Inflação Anual (%)</label>
-    <input type="number" step="0.01" id="inflacao" name="inflacao" placeholder="Ex: 4" required min="0" />
-    <button type="submit">Simular</button>
-  </form>
-  <section id="resultado" aria-live="polite" aria-atomic="true">
-    <h2>Resultado da Simulação</h2>
-    <div id="tabela"></div>
-    <div id="analise"></div>
-    <img id="grafico" src="" alt="Gráfico dos investimentos ao longo do tempo" />
-  </section>
   <script>
-    const form = document.getElementById('formInvest');
-    const resultado = document.getElementById('resultado');
-    const tabelaDiv = document.getElementById('tabela');
-    const analiseDiv = document.getElementById('analise');
-    const graficoImg = document.getElementById('grafico');
-    // Função para formatar números em moeda BRL
-    function formatarBRL(valor) {
-      return valor.toLocaleString('pt-BR', { style: 'currency', currency: 'BRL' });
-    }
-    form.addEventListener('submit', async (e) => {
-      e.preventDefault();
-      // Pega valores
-      const capital = parseFloat(form.capital.value);
-      const studio_ret = parseFloat(form.studio_ret.value);
-      const valorizacao = parseFloat(form.valorizacao.value);
-      const franquia_ret = parseFloat(form.franquia_ret.value);
-      const acoes_ret = parseFloat(form.acoes_ret.value);
-      const renda_fixa = parseFloat(form.renda_fixa.value);
-      const inflacao = parseFloat(form.inflacao.value);
-      if ([capital, studio_ret, valorizacao, franquia_ret, acoes_ret, renda_fixa, inflacao].some(isNaN)) {
-        alert('Por favor preencha todos os campos corretamente.');
-        return;
-      }
-      // Simulação (local para demo, ideal é chamar API backend)
-      const anos = [1,2,3,4,5];
-      const patrimonio_studio = anos.map(ano => capital * Math.pow(1 + valorizacao/100, ano));
-      const renda_acumulada_studio = anos.map(ano => capital * (Math.pow(1 + studio_ret/100, 12*ano) - 1));
-      const studio_total = anos.map((_,i) => patrimonio_studio[i] + renda_acumulada_studio[i]);
-      const franquia = anos.map(ano => capital + franquia_ret * ano);
-      const acoes = anos.map(ano => capital * Math.pow(1 + acoes_ret/100, ano));
-      const renda_fixa_valores = anos.map(ano => capital * Math.pow(1 + renda_fixa/100, ano));
-      // Monta tabela HTML
-      let tabelaHTML = `<table aria-label="Comparativo dos investimentos">
-        <thead>
-          <tr>
-            <th>Ano</th>
-            <th>Studio (Patrimônio + Renda)</th>
-            <th>Franquia</th>
-            <th>Ações</th>
-            <th>Renda Fixa</th>
-          </tr>
-        </thead>
-        <tbody>`;
-      // Identificar maior retorno final para destaque
-      const finalInvestimentos = {
-        "Studio (Patrimônio + Renda)": studio_total[studio_total.length - 1],
-        "Franquia": franquia[franquia.length - 1],
-        "Ações": acoes[acoes.length - 1],
-        "Renda Fixa": renda_fixa_valores[renda_fixa_valores.length - 1]
-      };
-      const melhorInvestimento = Object.entries(finalInvestimentos).reduce((a,b) => a[1] > b[1] ? a : b)[0];
-      anos.forEach((ano, i) => {
-        tabelaHTML += `<tr>
-          <td>${ano}</td>
-          <td${melhorInvestimento==="Studio (Patrimônio + Renda)" ? ' style="color:#00ff99;font-weight:700;text-shadow:0 0 6px #00ff99;"' : ''}>${formatarBRL(studio_total[i])}</td>
-          <td${melhorInvestimento==="Franquia" ? ' style="color:#00ff99;font-weight:700;text-shadow:0 0 6px #00ff99;"' : ''}>${formatarBRL(franquia[i])}</td>
-          <td${melhorInvestimento==="Ações" ? ' style="color:#00ff99;font-weight:700;text-shadow:0 0 6px #00ff99;"' : ''}>${formatarBRL(acoes[i])}</td>
-          <td${melhorInvestimento==="Renda Fixa" ? ' style="color:#00ff99;font-weight:700;text-shadow:0 0 6px #00ff99;"' : ''}>${formatarBRL(renda_fixa_valores[i])}</td>
-        </tr>`;
-      });
-      tabelaHTML += `</tbody></table>`;
-      tabelaDiv.innerHTML = tabelaHTML;
-      // Montar análise simplificada (pode ser substituída por chamada à API OpenAI)
-      let analiseTexto = `Capital Inicial: ${formatarBRL(capital)}\n\n`;
-      analiseTexto += `Após 5 anos, o melhor investimento foi: **${melhorInvestimento}**, com retorno final de ${formatarBRL(finalInvestimentos[melhorInvestimento])}.\n\n`;
-      analiseTexto += `Este resultado sugere que, considerando as premissas, investir em ${melhorInvestimento.toLowerCase()} apresentou maior valorização e geração de renda. Recomendamos analisar o perfil de risco e liquidez antes de decidir.\n\n`;
-      analiseDiv.textContent = analiseTexto;
-      // Gerar gráfico simples (usando Chart.js CDN)
-      if (!window.Chart) {
-        const script = document.createElement('script');
-        script.src = 'https://cdn.jsdelivr.net/npm/chart.js';
-        document.head.appendChild(script);
-        script.onload = () => criarGrafico();
-      } else {
-        criarGrafico();
-      }
-      function criarGrafico() {
-        graficoImg.style.display = "none";
-        // Criar canvas dinâmico
-        let canvas = document.getElementById('chart-canvas');
-        if (!canvas) {
-          canvas = document.createElement('canvas');
-          canvas.id = 'chart-canvas';
-          canvas.style.maxWidth = '100%';
-          graficoImg.parentNode.insertBefore(canvas, graficoImg);
-        }
-        if (window.myChart) {
-          window.myChart.destroy();
-        }
-        window.myChart = new Chart(canvas.getContext('2d'), {
-          type: 'line',
-          data: {
-            labels: anos,
-            datasets: [
-              {
-                label: 'Studio (Patrimônio + Renda)',
-                data: studio_total,
-                borderColor: '#00ff99',
-                backgroundColor: 'rgba(0,255,153,0.3)',
-                tension: 0.3,
-                fill: true,
-                pointRadius: 5,
-              },
-              {
-                label: 'Franquia',
-                data: franquia,
-                borderColor: '#00aaff',
-                backgroundColor: 'rgba(0,170,255,0.3)',
-                tension: 0.3,
-                fill: true,
-                pointRadius: 5,
-              },
-              {
-                label: 'Ações',
-                data: acoes,
-                borderColor: '#ffaa00',
-                backgroundColor: 'rgba(255,170,0,0.3)',
-                tension: 0.3,
-                fill: true,
-                pointRadius: 5,
-              },
-              {
-                label: 'Renda Fixa',
-                data: renda_fixa_valores,
-                borderColor: '#ff0055',
-                backgroundColor: 'rgba(255,0,85,0.3)',
-                tension: 0.3,
-                fill: true,
-                pointRadius: 5,
-              },
-            ]
-          },
-          options: {
-            responsive: true,
-            plugins: {
-              legend: {
-                labels: {
-                  color: '#d0f0ff',
-                  font: { weight: '600' }
-                }
-              },
-              tooltip: {
-                mode: 'index',
-                intersect: false,
-                callbacks: {
-                  label: ctx => formatarBRL(ctx.parsed.y)
-                }
-              }
-            },
-            scales: {
-              y: {
-                beginAtZero: true,
-                ticks: {
-                  color: '#a0d8ef',
-                  callback: val => val.toLocaleString('pt-BR', { style: 'currency', currency: 'BRL' })
-                },
-                grid: {
-                  color: 'rgba(160, 216, 239, 0.3)'
-                }
-              },
-              x: {
-                ticks: { color: '#a0d8ef' },
-                grid: { color: 'rgba(160, 216, 239, 0.15)' }
-              }
-            }
-          }
-        });
-        resultado.style.display = 'block';
-      }
     });
   </script>
 </body>
 </html>

 <!DOCTYPE html>
+<html lang="pt-BR">
 <head>
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>Simulador de Investimentos - Relatório</title>
   <style>
+    /* Reset básico */
     * {
       box-sizing: border-box;
+      margin: 0;
+      padding: 0;
     }
     body {
+      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+      background: linear-gradient(135deg, #0b72f6 0%, #1e90ff 100%);
       min-height: 100vh;
       display: flex;
+      justify-content: center;
+      align-items: flex-start;
+      padding: 20px;
+      color: #222;
     }
+    .container {
+      background: #fff;
       border-radius: 12px;
+      padding: 25px 30px;
+      max-width: 420px;
       width: 100%;
+      box-shadow: 0 8px 20px rgba(11, 114, 246, 0.3);
+      display: flex;
+      flex-direction: column;
+      gap: 18px;
     }
+    h1 {
+      text-align: center;
+      color: #0b72f6;
+      margin-bottom: 20px;
+      font-weight: 700;
+      font-size: 1.8rem;
+      letter-spacing: 1px;
     }
     label {
       font-weight: 600;
+      font-size: 0.95rem;
+      margin-bottom: 6px;
+      display: block;
+      color: #333;
     }
     input[type="number"] {
       width: 100%;
+      padding: 10px 12px;
+      border: 2px solid #0b72f6;
       border-radius: 8px;
       font-size: 1rem;
+      transition: border-color 0.3s ease;
     }
     input[type="number"]:focus {
+      outline: none;
+      border-color: #1e90ff;
+      box-shadow: 0 0 8px #1e90ffaa;
     }
+    form {
+      display: flex;
+      flex-direction: column;
+      gap: 18px;
     }
+    .btn-group {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      gap: 12px;
     }
+    button {
+      flex: 1;
+      background-color: #0b72f6;
+      color: white;
+      font-weight: 700;
+      font-size: 1.1rem;
+      padding: 12px 0;
+      border: none;
       border-radius: 10px;
+      cursor: pointer;
       transition: background-color 0.25s ease;
+      user-select: none;
     }
+    button:hover:not(:disabled) {
+      background-color: #0958c7;
     }
+    button:disabled {
+      background-color: #aac9f9;
+      cursor: not-allowed;
     }
+    #loadingMessage {
+      font-weight: 600;
+      color: #0b72f6;
+      white-space: nowrap;
     }
     /* Responsividade */
     @media (max-width: 480px) {
+      .container {
+        max-width: 100%;
+        padding: 20px;
+        border-radius: 0;
+        min-height: 100vh;
+        box-shadow: none;
       }
     }
   </style>
 </head>
 <body>
+  <main class="container">
+    <h1>Simulador de Investimentos</h1>
+    <form method="POST" id="formPrincipal">
+      <label for="capital">Capital Inicial (R$)</label>
+      <input type="number" id="capital" name="capital" step="0.01" min="0" required placeholder="Ex: 100000" />
+      <label for="studio_ret">Retorno Mensal Studio (%)</label>
+      <input type="number" id="studio_ret" name="studio_ret" step="0.01" min="0" required placeholder="Ex: 1.5" />
+      <label for="valorizacao">Valorização Anual do Studio (%)</label>
+      <input type="number" id="valorizacao" name="valorizacao" step="0.01" min="0" required placeholder="Ex: 5" />
+      <label for="franquia_ret">Retorno Anual Franquia (R$)</label>
+      <input type="number" id="franquia_ret" name="franquia_ret" step="0.01" min="0" required placeholder="Ex: 15000" />
+      <label for="acoes_ret">Retorno Anual Ações (%)</label>
+      <input type="number" id="acoes_ret" name="acoes_ret" step="0.01" min="0" required placeholder="Ex: 8" />
+      <label for="renda_fixa">Retorno Anual Renda Fixa (%)</label>
+      <input type="number" id="renda_fixa" name="renda_fixa" step="0.01" min="0" required placeholder="Ex: 6" />
+      <label for="inflacao">Inflação Anual (%)</label>
+      <input type="number" id="inflacao" name="inflacao" step="0.01" min="0" required placeholder="Ex: 4" />
+      <div class="btn-group">
+        <button type="submit">Calcular</button>
+        <button type="submit" id="gerarRelatorio" formaction="/gerar-pdf" formmethod="post">Gerar Relatório</button>
+        <span id="loadingMessage" style="display:none;">Gerando relatório...</span>
+      </div>
+    </form>
+  </main>
   <script>
+    const btnGerar = document.getElementById("gerarRelatorio");
+    const loadingMsg = document.getElementById("loadingMessage");
+    btnGerar.addEventListener("click", () => {
+      btnGerar.disabled = true;
+      loadingMsg.style.display = "inline";
+      // Caso queira reabilitar após 15 segundos (segurança)
+      setTimeout(() => {
+        btnGerar.disabled = false;
+        loadingMsg.style.display = "none";
+      }, 15000);
     });
   </script>
 </body>
 </html>