Spaces:

Persano
/

flowise1

Sleeping

App Files Files Community

Persano commited on Jun 16

Commit

0df9a4e

verified ·

1 Parent(s): 3eff84a

Update templates/index.html

Browse files

Files changed (1) hide show

templates/index.html +78 -147

templates/index.html CHANGED Viewed

@@ -3,170 +3,101 @@
 <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>

 <head>
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>Simulador de Investimento</title>
+  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
   <style>
     body {
+      padding-top: 30px;
+      background-color: #f8f9fa;
     }
     .container {
+      max-width: 900px;
     }
+    img {
+      max-width: 100%;
+      height: auto;
     }
+    .table td, .table th {
+      vertical-align: middle;
     }
+    .grafico {
+      text-align: center;
+      margin: 30px 0;
     }
   </style>
 </head>
 <body>
+  <div class="container">
+    <h1 class="mb-4 text-center">Simulador de Investimento</h1>
+    <form method="POST" action="/">
+      <div class="row g-3">
+        <div class="col-md-6">
+          <label class="form-label">Capital Inicial (R$)</label>
+          <input type="number" class="form-control" step="0.01" name="capital" placeholder="Ex: 100000" required>
+        </div>
+        <div class="col-md-6">
+          <label class="form-label">Retorno Studio (% a.m.)</label>
+          <input type="number" class="form-control" step="0.01" name="studio_ret" placeholder="Ex: 0.8" required>
+        </div>
+        <div class="col-md-6">
+          <label class="form-label">Valorização Imóvel (% a.a.)</label>
+          <input type="number" class="form-control" step="0.01" name="valorizacao" placeholder="Ex: 6.0" required>
+        </div>
+        <div class="col-md-6">
+          <label class="form-label">Retorno Franquia (R$/ano)</label>
+          <input type="number" class="form-control" step="0.01" name="franquia_ret" placeholder="Ex: 20000" required>
+        </div>
+        <div class="col-md-6">
+          <label class="form-label">Retorno Ações (% a.a.)</label>
+          <input type="number" class="form-control" step="0.01" name="acoes_ret" placeholder="Ex: 12.0" required>
+        </div>
+        <div class="col-md-6">
+          <label class="form-label">Renda Fixa (% a.a.)</label>
+          <input type="number" class="form-control" step="0.01" name="renda_fixa" placeholder="Ex: 9.0" required>
+        </div>
+        <div class="col-md-6">
+          <label class="form-label">Inflação estimada (% a.a.)</label>
+          <input type="number" class="form-control" step="0.01" name="inflacao" placeholder="Ex: 4.5" required>
+        </div>
+      </div>
+      <div class="mt-4 d-grid gap-2">
+        <button type="submit" class="btn btn-primary">Simular Investimentos</button>
+      </div>
+    </form>
+    {% if tabela %}
+      <hr class="my-5" />
+      <h2 class="text-center">Gráfico de Projeção</h2>
+      <div class="grafico">
+        <img src="data:image/png;base64,{{ grafico }}" alt="Gráfico de projeção">
       </div>
+      <h2 class="mt-5">Tabela Comparativa (5 anos)</h2>
+      <div class="table-responsive">
+        {{ tabela|safe }}
+      </div>
+      <h2 class="mt-5">Análise Final</h2>
+      <div class="mt-3">
+        {{ analise_final|safe }}
+      </div>
+      <form action="/gerar-pdf" method="POST">
+        <input type="hidden" name="capital" value="{{ capital }}">
+        <input type="hidden" name="studio_ret" value="{{ request.form['studio_ret'] }}">
+        <input type="hidden" name="valorizacao" value="{{ request.form['valorizacao'] }}">
+        <input type="hidden" name="franquia_ret" value="{{ request.form['franquia_ret'] }}">
+        <input type="hidden" name="acoes_ret" value="{{ request.form['acoes_ret'] }}">
+        <input type="hidden" name="renda_fixa" value="{{ request.form['renda_fixa'] }}">
+        <input type="hidden" name="inflacao" value="{{ request.form['inflacao'] }}">
+        <div class="mt-4 d-grid">
+          <button type="submit" class="btn btn-success">📄 Baixar PDF com Análise Profunda (IA)</button>
+        </div>
+      </form>
+    {% endif %}
+  </div>
 </body>
 </html>