Persano commited on
Commit
aefe514
·
verified ·
1 Parent(s): 23e60da

Update templates/index.html

Browse files
Files changed (1) hide show
  1. templates/index.html +116 -52
templates/index.html CHANGED
@@ -2,80 +2,144 @@
2
  <html lang="pt-BR">
3
  <head>
4
  <meta charset="UTF-8" />
 
5
  <title>Simulador de Investimentos</title>
6
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" />
7
  <style>
8
  body {
 
 
9
  margin: 40px;
 
10
  }
11
- .grafico img {
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
12
  max-width: 100%;
13
  height: auto;
14
- border: 1px solid #ccc;
 
 
 
 
15
  margin-top: 20px;
16
  }
 
 
 
 
17
  </style>
18
  </head>
19
  <body>
 
20
  <h1>Simulador de Investimentos</h1>
21
 
22
- <form method="POST" action="/">
23
- <div class="mb-3">
24
- <label>Capital Inicial (R$)</label>
25
- <input type="number" step="0.01" name="capital" value="{{ capital or '' }}" class="form-control" required />
26
- </div>
27
- <div class="mb-3">
28
- <label>Retorno mensal do Studio (%)</label>
29
- <input type="number" step="0.01" name="studio_ret" value="{{ studio_ret or '' }}" class="form-control" required />
30
- </div>
31
- <div class="mb-3">
32
- <label>Valorização anual do Imóvel (%)</label>
33
- <input type="number" step="0.01" name="valorizacao" value="{{ valorizacao or '' }}" class="form-control" required />
34
- </div>
35
- <div class="mb-3">
36
- <label>Lucro anual da Franquia (R$)</label>
37
- <input type="number" step="0.01" name="franquia_ret" value="{{ franquia_ret or '' }}" class="form-control" required />
38
- </div>
39
- <div class="mb-3">
40
- <label>Retorno anual em Ações (%)</label>
41
- <input type="number" step="0.01" name="acoes_ret" value="{{ acoes_ret or '' }}" class="form-control" required />
42
- </div>
43
- <div class="mb-3">
44
- <label>Retorno anual Renda Fixa (%)</label>
45
- <input type="number" step="0.01" name="renda_fixa" value="{{ renda_fixa or '' }}" class="form-control" required />
46
- </div>
47
- <div class="mb-3">
48
- <label>Inflação anual esperada (%)</label>
49
- <input type="number" step="0.01" name="inflacao" value="{{ inflacao or '' }}" class="form-control" required />
50
- </div>
51
 
52
- <button type="submit" class="btn btn-primary">Simular</button>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
53
  </form>
54
 
55
  {% if grafico %}
56
- <div class="grafico">
57
- <h2>Gráfico de Evolução dos Investimentos</h2>
58
- <img src="data:image/png;base64,{{ grafico }}" alt="Gráfico" />
59
- </div>
60
- {% endif %}
61
 
62
- {% if tabela %}
63
- <div class="tabela mt-4">
64
- <h2>Resultados</h2>
65
  {{ tabela|safe }}
66
- </div>
67
 
68
- <form method="POST" action="/download_pdf" style="margin-top: 20px;">
69
- <input type="hidden" name="capital" value="{{ capital }}">
70
- <input type="hidden" name="studio_ret" value="{{ studio_ret }}">
71
- <input type="hidden" name="valorizacao" value="{{ valorizacao }}">
72
- <input type="hidden" name="franquia_ret" value="{{ franquia_ret }}">
73
- <input type="hidden" name="acoes_ret" value="{{ acoes_ret }}">
74
- <input type="hidden" name="renda_fixa" value="{{ renda_fixa }}">
75
- <input type="hidden" name="inflacao" value="{{ inflacao }}">
76
- <button type="submit" class="btn btn-success">Baixar Relatório PDF</button>
77
- </form>
 
 
 
 
78
  {% endif %}
 
79
  </body>
80
  </html>
81
 
 
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