Hugging Face's logo

Spaces:
Persano
/
flowise1
Sleeping

App Files Community
Persano commited on
Commit
9103639
·
verified ·
1 Parent(s): 6f52863

Update templates/index.html

Browse files
Files changed (1) hide show
  1. templates/index.html +76 -91
templates/index.html CHANGED
@@ -2,145 +2,130 @@
2
  <html lang="pt-BR">
3
  <head>
4
  <meta charset="UTF-8" />
5
- <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6
  <title>Simulador de Investimentos</title>
7
  <style>
8
  body {
9
- font-family: 'Segoe UI', sans-serif;
10
- background-color: #f4f8fb;
11
- margin: 40px;
12
  color: #333;
13
  }
14
-
15
- h1 {
16
- color: #007cf0;
17
- text-align: center;
18
- margin-bottom: 30px;
19
- }
20
-
21
  form {
22
- background-color: #fff;
23
- padding: 25px;
24
- border-radius: 8px;
25
- box-shadow: 0 0 10px rgba(0,0,0,0.05);
26
- max-width: 700px;
27
- margin: 0 auto 40px auto;
28
  }
29
-
30
  label {
31
  display: block;
32
- margin-bottom: 5px;
33
  font-weight: bold;
34
- margin-top: 15px;
35
  }
36
-
37
  input[type="number"] {
38
  width: 100%;
39
- padding: 10px;
40
- font-size: 1em;
41
  border: 1px solid #ccc;
42
  border-radius: 4px;
 
43
  }
44
-
45
  button {
46
- margin-top: 25px;
47
- padding: 12px 20px;
48
- font-size: 1em;
49
- background-color: #007cf0;
50
  color: white;
51
  border: none;
52
- border-radius: 5px;
 
 
53
  cursor: pointer;
 
54
  }
55
-
56
  button:hover {
57
- background-color: #005ec2;
58
  }
59
 
60
- .center {
61
  text-align: center;
 
62
  }
63
 
64
- .resultado {
65
- background-color: #fff;
66
- padding: 25px;
 
 
 
67
  border-radius: 8px;
68
- box-shadow: 0 0 10px rgba(0,0,0,0.05);
69
- margin-bottom: 40px;
 
 
70
  }
71
-
72
- img {
73
- max-width: 100%;
74
- height: auto;
75
- margin: 30px 0;
76
  }
77
-
78
- .botao-pdf {
79
- background-color: #28a745;
80
- margin-top: 20px;
 
 
 
 
81
  }
82
 
83
- .botao-pdf:hover {
84
- background-color: #1f8d3a;
 
 
 
 
 
85
  }
86
  </style>
87
  </head>
88
  <body>
 
89
 
90
- <h1>Simulador de Investimentos</h1>
 
 
91
 
92
- <form method="POST">
93
- <label>Capital Inicial (R$):</label>
94
- <input type="number" name="capital" step="0.01" required value="{{ capital or '' }}">
95
 
96
- <label>Retorno Mensal do Studio (%):</label>
97
- <input type="number" name="studio_ret" step="0.01" required value="{{ studio_ret or '' }}">
98
 
99
- <label>Valorização Anual do Imóvel (%):</label>
100
- <input type="number" name="valorizacao" step="0.01" required value="{{ valorizacao or '' }}">
101
 
102
- <label>Lucro Anual da Franquia (R$):</label>
103
- <input type="number" name="franquia_ret" step="0.01" required value="{{ franquia_ret or '' }}">
104
 
105
- <label>Retorno Anual em Ações (%):</label>
106
- <input type="number" name="acoes_ret" step="0.01" required value="{{ acoes_ret or '' }}">
107
 
108
- <label>Retorno Anual Renda Fixa (%):</label>
109
- <input type="number" name="renda_fixa" step="0.01" required value="{{ renda_fixa or '' }}">
110
 
111
- <label>Inflação Anual Esperada (%):</label>
112
- <input type="number" name="inflacao" step="0.01" required value="{{ inflacao or '' }}">
113
-
114
- <div class="center">
115
- <button type="submit">Simular</button>
116
- </div>
117
  </form>
118
 
119
- {% if grafico %}
120
- <div class="resultado">
121
- <h2 class="center">Gráfico de Simulação</h2>
122
- <img src="data:image/png;base64,{{ grafico }}" alt="Gráfico de Investimentos">
123
-
124
- <h2 class="center">Resultados</h2>
125
- {{ tabela|safe }}
126
 
127
- <form method="POST" action="/download_pdf">
128
- <!-- Campos ocultos para reenviar dados ao gerar PDF -->
129
- <input type="hidden" name="capital" value="{{ capital }}">
130
- <input type="hidden" name="studio_ret" value="{{ studio_ret }}">
131
- <input type="hidden" name="valorizacao" value="{{ valorizacao }}">
132
- <input type="hidden" name="franquia_ret" value="{{ franquia_ret }}">
133
- <input type="hidden" name="acoes_ret" value="{{ acoes_ret }}">
134
- <input type="hidden" name="renda_fixa" value="{{ renda_fixa }}">
135
- <input type="hidden" name="inflacao" value="{{ inflacao }}">
136
- <div class="center">
137
- <button class="botao-pdf" type="submit">Baixar Relatório em PDF</button>
138
- </div>
139
- </form>
140
  </div>
141
  {% endif %}
142
-
143
  </body>
144
  </html>
145
-
146
-
 
2
  <html lang="pt-BR">
3
  <head>
4
  <meta charset="UTF-8" />
5
+ <meta name="viewport" content="width=device-width, initial-scale=1" />
6
  <title>Simulador de Investimentos</title>
7
  <style>
8
  body {
9
+ font-family: Arial, sans-serif;
10
+ margin: 20px;
11
+ background: #f5f8fa;
12
  color: #333;
13
  }
 
 
 
 
 
 
 
14
  form {
15
+ background: #fff;
16
+ padding: 20px;
17
+ border-radius: 6px;
18
+ max-width: 480px;
19
+ margin: 0 auto 30px;
20
+ box-shadow: 0 2px 5px rgb(0 0 0 / 0.1);
21
  }
 
22
  label {
23
  display: block;
24
+ margin-bottom: 8px;
25
  font-weight: bold;
 
26
  }
 
27
  input[type="number"] {
28
  width: 100%;
29
+ padding: 8px;
30
+ margin-bottom: 18px;
31
  border: 1px solid #ccc;
32
  border-radius: 4px;
33
+ font-size: 1em;
34
  }
 
35
  button {
36
+ background: #007cf0;
 
 
 
37
  color: white;
38
  border: none;
39
+ padding: 12px 20px;
40
+ font-size: 1em;
41
+ border-radius: 4px;
42
  cursor: pointer;
43
+ width: 100%;
44
  }
 
45
  button:hover {
46
+ background: #005bb5;
47
  }
48
 
49
+ .grafico {
50
  text-align: center;
51
+ margin-bottom: 30px;
52
  }
53
 
54
+ /* Estilo da tabela: */
55
+ table {
56
+ border-collapse: collapse;
57
+ font-size: 0.95em;
58
+ background: white;
59
+ color: #333;
60
  border-radius: 8px;
61
+ box-shadow: 0 0 12px rgb(0 0 0 / 0.1);
62
+ width: 100%;
63
+ max-width: 900px;
64
+ margin: 0 auto; /* Centraliza no browser */
65
  }
66
+ th, td {
67
+ border: 1px solid #ddd;
68
+ padding: 10px 15px;
69
+ text-align: right;
 
70
  }
71
+ th {
72
+ background-color: #007cf0;
73
+ color: white;
74
+ text-align: center;
75
+ font-weight: 600;
76
+ }
77
+ tr:hover {
78
+ background-color: #f2f9ff;
79
  }
80
 
81
+ /* Ajuste para centralizar a tabela no browser e não afetar o PDF */
82
+ @media screen {
83
+ table {
84
+ width: fit-content !important;
85
+ margin-left: auto !important;
86
+ margin-right: auto !important;
87
+ }
88
  }
89
  </style>
90
  </head>
91
  <body>
92
+ <h1 style="text-align:center; margin-bottom: 20px;">Simulador de Investimentos</h1>
93
 
94
+ <form method="POST" action="/">
95
+ <label for="capital">Capital Inicial (R$):</label>
96
+ <input type="number" id="capital" name="capital" step="0.01" required value="{{ capital or 400000 }}">
97
 
98
+ <label for="studio_ret">Retorno Mensal do Studio (%):</label>
99
+ <input type="number" id="studio_ret" name="studio_ret" step="0.01" required value="{{ studio_ret or 1 }}">
 
100
 
101
+ <label for="valorizacao">Valorização Anual do Imóvel (%):</label>
102
+ <input type="number" id="valorizacao" name="valorizacao" step="0.01" required value="{{ valorizacao or 4 }}">
103
 
104
+ <label for="franquia_ret">Lucro Anual da Franquia (R$):</label>
105
+ <input type="number" id="franquia_ret" name="franquia_ret" step="0.01" required value="{{ franquia_ret or 40000 }}">
106
 
107
+ <label for="acoes_ret">Retorno Anual em Ações (%):</label>
108
+ <input type="number" id="acoes_ret" name="acoes_ret" step="0.01" required value="{{ acoes_ret or 11 }}">
109
 
110
+ <label for="renda_fixa">Retorno Anual Renda Fixa (%):</label>
111
+ <input type="number" id="renda_fixa" name="renda_fixa" step="0.01" required value="{{ renda_fixa or 12 }}">
112
 
113
+ <label for="inflacao">Inflação Anual Esperada (%):</label>
114
+ <input type="number" id="inflacao" name="inflacao" step="0.01" required value="{{ inflacao or 5 }}">
115
 
116
+ <button type="submit">Simular</button>
 
 
 
 
 
117
  </form>
118
 
119
+ {% if tabela %}
120
+ <div class="grafico">
121
+ <h2>Gráfico de Simulação</h2>
122
+ <img src="data:image/png;base64,{{ grafico }}" alt="Gráfico de Investimentos" />
123
+ </div>
 
 
124
 
125
+ <h2 style="text-align:center;">Resultados</h2>
126
+ <div>
127
+ {{ tabela | safe }}
 
 
 
 
 
 
 
 
 
 
128
  </div>
129
  {% endif %}
 
130
  </body>
131
  </html>