Spaces:

Persano
/

flowise1

Sleeping

App Files Files Community

Persano commited on Jun 15

Commit

c0592b0

verified ·

1 Parent(s): f72cd57

Update templates/index.html

Browse files

Files changed (1) hide show

templates/index.html +141 -143

templates/index.html CHANGED Viewed

@@ -3,167 +3,165 @@
 <head>
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1" />
-  <title>Simulador de Investimentos</title>
   <style>
     body {
-      font-family: 'Segoe UI', sans-serif;
-      background-color: #f4f6f9;
-      color: #333;
       padding: 20px;
-      margin: 0;
     }
-    h1, h2 {
-      text-align: center;
       color: #2c3e50;
     }
-    form {
-      background: #fff;
-      max-width: 600px;
-      margin: 0 auto 30px auto;
-      padding: 30px;
-      border-radius: 10px;
-      box-shadow: 0 2px 10px rgba(0,0,0,0.1);
     }
-    label {
-      display: block;
-      margin-bottom: 6px;
-      font-weight: 600;
-      color: #555;
-    }
-    input[type="number"] {
-      width: 100%;
-      padding: 10px;
-      margin-bottom: 16px;
-      border: 1px solid #ccc;
-      border-radius: 5px;
-      box-sizing: border-box;
-    }
-    button {
-      width: 100%;
-      padding: 12px;
-      background: #007bff;
-      color: white;
-      border: none;
-      font-size: 1em;
-      border-radius: 5px;
-      cursor: pointer;
-      margin-top: 10px;
-      transition: background 0.3s;
-    }
-    button:hover {
-      background: #0056b3;
-    }
-    .grafico {
-      text-align: center;
-      margin-bottom: 40px;
-    }
-    table {
-      width: 95%;
-      margin: 20px auto;
-      border-collapse: collapse;
-      background: white;
-      border-radius: 8px;
-      overflow: hidden;
-      box-shadow: 0 2px 8px rgba(0,0,0,0.05);
-    }
-    th, td {
-      padding: 12px 15px;
-      border: 1px solid #ddd;
-      text-align: right;
-    }
-    th {
-      background-color: #007bff;
-      color: white;
-      text-align: center;
-    }
-    tr:hover {
-      background-color: #f1f1f1;
-    }
-    .resultado-destaque {
-      max-width: 800px;
-      margin: 30px auto;
-      background: #e8f5e9;
-      color: #2e7d32;
-      padding: 20px;
-      font-size: 1.2em;
-      font-weight: bold;
-      text-align: center;
       border-left: 6px solid #2e7d32;
-      border-radius: 6px;
-    }
-    .botao-pdf {
-      text-align: center;
-      margin-top: 30px;
-    }
-    .botao-pdf form {
-      display: inline-block;
-    }
-    @media print {
-      form, .botao-pdf, button {
-        display: none !important;
-      }
     }
   </style>
 </head>
 <body>
-  <h1>Simulador de Investimentos</h1>
-  <form method="post" action="/">
-    <label for="capital">Capital Inicial (R$):</label>
-    <input type="number" id="capital" name="capital" step="0.01" required value="{{ capital or 400000 }}">
-    <label for="studio_ret">Retorno Mensal do Studio (%):</label>
-    <input type="number" id="studio_ret" name="studio_ret" step="0.01" required value="{{ studio_ret or 1 }}">
-    <label for="valorizacao">Valorização Anual do Imóvel (%):</label>
-    <input type="number" id="valorizacao" name="valorizacao" step="0.01" required value="{{ valorizacao or 4 }}">
-    <label for="franquia_ret">Lucro Anual da Franquia (R$):</label>
-    <input type="number" id="franquia_ret" name="franquia_ret" step="0.01" required value="{{ franquia_ret or 40000 }}">
-    <label for="acoes_ret">Retorno Anual em Ações (%):</label>
-    <input type="number" id="acoes_ret" name="acoes_ret" step="0.01" required value="{{ acoes_ret or 11 }}">
-    <label for="renda_fixa">Retorno Anual Renda Fixa (%):</label>
-    <input type="number" id="renda_fixa" name="renda_fixa" step="0.01" required value="{{ renda_fixa or 12 }}">
-    <label for="inflacao">Inflação Anual Esperada (%):</label>
-    <input type="number" id="inflacao" name="inflacao" step="0.01" required value="{{ inflacao or 5 }}">
-    <button type="submit">Rodar Simulação</button>
-  </form>
-  {% if tabela %}
-    <div class="grafico">
-      <h2>Gráfico Comparativo</h2>
-      <img src="data:image/png;base64,{{ grafico }}" alt="Gráfico de Investimentos" />
     </div>
-    <div>
-      {{ tabela | safe }}
     </div>
-    <div class="resultado-destaque">
-      Investimento com maior retorno: <span style="color:#1b5e20;">{{ investimento_mais_valorizado }}</span><br>
-      Valor final estimado: <span style="color:#1b5e20;">R$ {{ valor_mais_alto | round(2) | string | replace('.', ',') }}</span>
-    </div>
-    <div class="botao-pdf">
-      <form action="/download_pdf" method="post">
-        <input type="hidden" name="capital" value="{{ capital }}">
-        <input type="hidden" name="studio_ret" value="{{ studio_ret }}">
-        <input type="hidden" name="valorizacao" value="{{ valorizacao }}">
-        <input type="hidden" name="franquia_ret" value="{{ franquia_ret }}">
-        <input type="hidden" name="acoes_ret" value="{{ acoes_ret }}">
-        <input type="hidden" name="renda_fixa" value="{{ renda_fixa }}">
-        <input type="hidden" name="inflacao" value="{{ inflacao }}">
-        <button type="submit" style="background: #28a745;">Gerar PDF do Relatório</button>
-      </form>
     </div>
-  {% endif %}
 </body>
 </html>

 <head>
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>Simulação de Investimentos</title>
+  <link
+    href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
+    rel="stylesheet"
+  />
   <style>
     body {
       padding: 20px;
+      background-color: #f8f9fa;
+      font-family: Arial, sans-serif;
     }
+    h1 {
+      margin-bottom: 30px;
       color: #2c3e50;
     }
+    .table-wrapper {
+      overflow-x: auto;
     }
+    .analise {
+      background-color: #e8f5e9;
       border-left: 6px solid #2e7d32;
+      padding: 15px;
+      margin: 15px 0;
+      font-size: 1rem;
     }
   </style>
 </head>
 <body>
+  <div class="container">
+    <h1>Simulação de Investimentos - 5 anos</h1>
+    <form method="POST" action="/" class="mb-4">
+      <div class="row g-3">
+        <div class="col-md-4">
+          <label for="capital" class="form-label">Capital Inicial (R$)</label>
+          <input
+            type="number"
+            step="0.01"
+            class="form-control"
+            id="capital"
+            name="capital"
+            required
+            value="{{ capital or 100000 }}"
+          />
+        </div>
+        <div class="col-md-4">
+          <label for="studio_ret" class="form-label">Retorno mensal Studio (%)</label>
+          <input
+            type="number"
+            step="0.01"
+            class="form-control"
+            id="studio_ret"
+            name="studio_ret"
+            required
+            value="{{ studio_ret or 0.5 }}"
+          />
+        </div>
+        <div class="col-md-4">
+          <label for="valorizacao" class="form-label">Valorização anual Studio (%)</label>
+          <input
+            type="number"
+            step="0.01"
+            class="form-control"
+            id="valorizacao"
+            name="valorizacao"
+            required
+            value="{{ valorizacao or 5 }}"
+          />
+        </div>
+        <div class="col-md-4">
+          <label for="franquia_ret" class="form-label">Retorno anual Franquia (R$)</label>
+          <input
+            type="number"
+            step="0.01"
+            class="form-control"
+            id="franquia_ret"
+            name="franquia_ret"
+            required
+            value="{{ franquia_ret or 12000 }}"
+          />
+        </div>
+        <div class="col-md-4">
+          <label for="acoes_ret" class="form-label">Retorno anual Ações (%)</label>
+          <input
+            type="number"
+            step="0.01"
+            class="form-control"
+            id="acoes_ret"
+            name="acoes_ret"
+            required
+            value="{{ acoes_ret or 10 }}"
+          />
+        </div>
+        <div class="col-md-4">
+          <label for="renda_fixa" class="form-label">Retorno anual Renda Fixa (%)</label>
+          <input
+            type="number"
+            step="0.01"
+            class="form-control"
+            id="renda_fixa"
+            name="renda_fixa"
+            required
+            value="{{ renda_fixa or 7 }}"
+          />
+        </div>
+        <div class="col-md-4">
+          <label for="inflacao" class="form-label">Inflação anual estimada (%)</label>
+          <input
+            type="number"
+            step="0.01"
+            class="form-control"
+            id="inflacao"
+            name="inflacao"
+            required
+            value="{{ inflacao or 4 }}"
+          />
+        </div>
+      </div>
+      <button type="submit" class="btn btn-primary mt-4">Simular</button>
+    </form>
+    {% if tabela and grafico %}
+    <hr />
+    <h2>Resultados da Simulação</h2>
+    <div class="analise">
+      {{ analise_final | safe }}
     </div>
+    <div class="analise">
+      {{ consideracoes | safe }}
     </div>
+    <h3>Gráfico de Evolução dos Investimentos</h3>
+    <img src="data:image/png;base64,{{ grafico }}" alt="Gráfico de investimentos" class="img-fluid mb-4" />
+    <h3>Evolução Ano a Ano</h3>
+    <div class="table-wrapper">
+      {{ tabela | safe }}
     </div>
+    <form method="POST" action="/download_pdf" class="mt-4">
+      <input type="hidden" name="capital" value="{{ capital }}" />
+      <input type="hidden" name="studio_ret" value="{{ studio_ret }}" />
+      <input type="hidden" name="valorizacao" value="{{ valorizacao }}" />
+      <input type="hidden" name="franquia_ret" value="{{ franquia_ret }}" />
+      <input type="hidden" name="acoes_ret" value="{{ acoes_ret }}" />
+      <input type="hidden" name="renda_fixa" value="{{ renda_fixa }}" />
+      <input type="hidden" name="inflacao" value="{{ inflacao }}" />
+      <button type="submit" class="btn btn-success">Baixar Relatório em PDF</button>
+    </form>
+    {% endif %}
+  </div>
 </body>
 </html>