Hugging Face's logo

Spaces:
Persano
/
flowise1
Sleeping

App Files Community
Persano commited on
Commit
13a596c
·
verified ·
1 Parent(s): 6b3a3d4

Update templates/index.html

Browse files
Files changed (1) hide show
  1. templates/index.html +152 -69
templates/index.html CHANGED
@@ -1,76 +1,159 @@
1
  <!DOCTYPE html>
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
- <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
8
  </head>
9
- <body class="bg-light">
10
- <div class="container py-4">
11
- <h1 class="mb-4">Simulador de Investimentos - 5 anos</h1>
12
-
13
- <form method="POST" class="row g-3 mb-5">
14
- <div class="col-md-4">
15
- <label for="capital" class="form-label">Capital Inicial (R$)</label>
16
- <input type="number" step="0.01" min="0" class="form-control" id="capital" name="capital" required
17
- value="{{ capital if capital else '' }}" />
18
- </div>
19
- <div class="col-md-4">
20
- <label for="studio_ret" class="form-label">Retorno mensal Studio (%)</label>
21
- <input type="number" step="0.01" class="form-control" id="studio_ret" name="studio_ret" required
22
- value="{{ request.form.studio_ret if request.form.studio_ret else '' }}" />
23
- </div>
24
- <div class="col-md-4">
25
- <label for="valorizacao" class="form-label">Valorização anual Studio (%)</label>
26
- <input type="number" step="0.01" class="form-control" id="valorizacao" name="valorizacao" required
27
- value="{{ request.form.valorizacao if request.form.valorizacao else '' }}" />
28
- </div>
29
- <div class="col-md-4">
30
- <label for="franquia_ret" class="form-label">Retorno anual Franquia (R$)</label>
31
- <input type="number" step="0.01" class="form-control" id="franquia_ret" name="franquia_ret" required
32
- value="{{ request.form.franquia_ret if request.form.franquia_ret else '' }}" />
33
- </div>
34
- <div class="col-md-4">
35
- <label for="acoes_ret" class="form-label">Retorno anual Ações (%)</label>
36
- <input type="number" step="0.01" class="form-control" id="acoes_ret" name="acoes_ret" required
37
- value="{{ request.form.acoes_ret if request.form.acoes_ret else '' }}" />
38
- </div>
39
- <div class="col-md-4">
40
- <label for="renda_fixa" class="form-label">Retorno anual Renda Fixa (%)</label>
41
- <input type="number" step="0.01" class="form-control" id="renda_fixa" name="renda_fixa" required
42
- value="{{ request.form.renda_fixa if request.form.renda_fixa else '' }}" />
43
- </div>
44
- <div class="col-md-4">
45
- <label for="inflacao" class="form-label">Inflação anual (%)</label>
46
- <input type="number" step="0.01" class="form-control" id="inflacao" name="inflacao" required
47
- value="{{ request.form.inflacao if request.form.inflacao else '' }}" />
48
- </div>
49
-
50
- <div class="col-12">
51
- <button type="submit" class="btn btn-primary">Calcular</button>
52
- </div>
53
- </form>
54
-
55
- {% if tabela %}
56
- <h2>Tabela de Projeção</h2>
57
- <div class="table-responsive mb-4">
58
- {{ tabela | safe }}
59
- </div>
60
- {% endif %}
61
-
62
- {% if grafico %}
63
- <h2>Gráfico de Projeção</h2>
64
- <img src="data:image/png;base64,{{ grafico }}" alt="Gráfico de Investimentos" class="img-fluid mb-4" />
65
- {% endif %}
66
-
67
- {% if analise_final %}
68
- <h2>Análise Final da IA</h2>
69
- <div class="border p-3 bg-white rounded mb-4" style="white-space: pre-wrap;">
70
- {{ analise_final | safe }}
71
- </div>
72
- {% endif %}
73
- </div>
74
  </body>
75
  </html>
76
 
 
 
1
  <!DOCTYPE html>
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>Projeção de Investimentos</title>
7
+ <style>
8
+ body {
9
+ font-family: Arial, sans-serif;
10
+ margin: 20px;
11
+ background-color: #f7f9fc;
12
+ color: #222;
13
+ }
14
+ h1 {
15
+ text-align: center;
16
+ margin-bottom: 30px;
17
+ }
18
+ form {
19
+ max-width: 600px;
20
+ margin: 0 auto 40px auto;
21
+ background: white;
22
+ padding: 20px;
23
+ border-radius: 6px;
24
+ box-shadow: 0 0 8px rgba(0,0,0,0.1);
25
+ }
26
+ form label {
27
+ display: block;
28
+ margin-bottom: 6px;
29
+ font-weight: bold;
30
+ }
31
+ form input[type="number"] {
32
+ width: 100%;
33
+ padding: 8px 10px;
34
+ margin-bottom: 16px;
35
+ border: 1px solid #ccc;
36
+ border-radius: 4px;
37
+ font-size: 1rem;
38
+ }
39
+ form button {
40
+ background-color: #007bff;
41
+ color: white;
42
+ border: none;
43
+ padding: 12px 20px;
44
+ font-size: 1rem;
45
+ cursor: pointer;
46
+ border-radius: 4px;
47
+ transition: background-color 0.3s ease;
48
+ width: 100%;
49
+ }
50
+ form button:hover {
51
+ background-color: #0056b3;
52
+ }
53
+
54
+ /* Estilo tabela resultados */
55
+ .tabela-resultados {
56
+ width: 100%;
57
+ max-width: 800px;
58
+ margin: 0 auto 40px auto;
59
+ border-collapse: collapse;
60
+ font-family: monospace;
61
+ background: white;
62
+ box-shadow: 0 0 8px rgba(0,0,0,0.1);
63
+ border-radius: 6px;
64
+ overflow: hidden;
65
+ }
66
+ .tabela-resultados th, .tabela-resultados td {
67
+ padding: 10px 14px;
68
+ border: 1px solid #ddd;
69
+ }
70
+ .tabela-resultados th {
71
+ background-color: #f0f2f5;
72
+ text-align: center;
73
+ font-weight: 600;
74
+ font-size: 1rem;
75
+ }
76
+ .tabela-resultados td {
77
+ text-align: right;
78
+ font-size: 0.95rem;
79
+ }
80
+ .tabela-resultados td:first-child {
81
+ text-align: center;
82
+ font-weight: 600;
83
+ }
84
+
85
+ /* Container do gráfico */
86
+ .grafico-container {
87
+ max-width: 800px;
88
+ margin: 0 auto 40px auto;
89
+ text-align: center;
90
+ background: white;
91
+ padding: 20px;
92
+ border-radius: 6px;
93
+ box-shadow: 0 0 8px rgba(0,0,0,0.1);
94
+ }
95
+
96
+ /* Análise IA */
97
+ .analise-ia {
98
+ max-width: 800px;
99
+ margin: 0 auto 40px auto;
100
+ background: #fff8e1;
101
+ border-left: 6px solid #ffc107;
102
+ padding: 20px 25px;
103
+ font-size: 1.1rem;
104
+ line-height: 1.5;
105
+ border-radius: 6px;
106
+ color: #5a4a00;
107
+ white-space: pre-line;
108
+ }
109
+ </style>
110
  </head>
111
+ <body>
112
+ <h1>Projeção de Investimentos - 5 anos</h1>
113
+
114
+ <form method="POST" action="/">
115
+ <label for="capital">Capital inicial (R$):</label>
116
+ <input type="number" id="capital" name="capital" step="0.01" required value="{{ capital or '' }}" />
117
+
118
+ <label for="studio_ret">Retorno mensal do Studio (%):</label>
119
+ <input type="number" id="studio_ret" name="studio_ret" step="0.01" required />
120
+
121
+ <label for="valorizacao">Valorização anual do Studio (%):</label>
122
+ <input type="number" id="valorizacao" name="valorizacao" step="0.01" required />
123
+
124
+ <label for="franquia_ret">Retorno anual da Franquia (R$):</label>
125
+ <input type="number" id="franquia_ret" name="franquia_ret" step="0.01" required />
126
+
127
+ <label for="acoes_ret">Retorno anual das Ações (%):</label>
128
+ <input type="number" id="acoes_ret" name="acoes_ret" step="0.01" required />
129
+
130
+ <label for="renda_fixa">Retorno anual da Renda Fixa (%):</label>
131
+ <input type="number" id="renda_fixa" name="renda_fixa" step="0.01" required />
132
+
133
+ <label for="inflacao">Inflação anual estimada (%):</label>
134
+ <input type="number" id="inflacao" name="inflacao" step="0.01" required />
135
+
136
+ <button type="submit">Gerar Projeção</button>
137
+ </form>
138
+
139
+ {% if tabela %}
140
+ <div class="tabela-resultados">
141
+ {{ tabela | safe }}
142
+ </div>
143
+ {% endif %}
144
+
145
+ {% if grafico %}
146
+ <div class="grafico-container">
147
+ <img src="data:image/png;base64,{{ grafico }}" alt="Gráfico de Projeção" style="max-width: 100%; height: auto; border-radius: 6px;" />
148
+ </div>
149
+ {% endif %}
150
+
151
+ {% if analise_final %}
152
+ <div class="analise-ia">
153
+ {{ analise_final | safe }}
154
+ </div>
155
+ {% endif %}
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
156
  </body>
157
  </html>
158
 
159
+