Persano commited on
Commit
94e6b77
·
verified ·
1 Parent(s): c009ac1

Create templates/index.html

Browse files
Files changed (1) hide show
  1. templates/index.html +171 -0
templates/index.html ADDED
@@ -0,0 +1,171 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="pt-BR">
3
+ <head>
4
+ <meta charset="UTF-8" />
5
+ <title>Simulador de Investimentos</title>
6
+ <style>
7
+ body {
8
+ font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
9
+ background: #f8fafc;
10
+ padding: 40px;
11
+ display: flex;
12
+ flex-direction: column;
13
+ align-items: center;
14
+ }
15
+
16
+ .card {
17
+ background: #fff;
18
+ padding: 30px;
19
+ border-radius: 12px;
20
+ box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
21
+ max-width: 700px;
22
+ width: 100%;
23
+ }
24
+
25
+ h1 {
26
+ color: #111827;
27
+ font-size: 26px;
28
+ margin-bottom: 20px;
29
+ text-align: center;
30
+ }
31
+
32
+ form {
33
+ display: flex;
34
+ flex-wrap: wrap;
35
+ gap: 15px;
36
+ justify-content: space-between;
37
+ }
38
+
39
+ label {
40
+ font-weight: 600;
41
+ color: #374151;
42
+ flex-basis: 100%;
43
+ }
44
+
45
+ .input-group {
46
+ display: flex;
47
+ flex-direction: column;
48
+ flex-basis: 48%;
49
+ }
50
+
51
+ input {
52
+ padding: 10px;
53
+ border: 1px solid #d1d5db;
54
+ border-radius: 8px;
55
+ font-size: 16px;
56
+ }
57
+
58
+ button {
59
+ background: #2563eb;
60
+ color: white;
61
+ padding: 12px;
62
+ font-size: 16px;
63
+ border: none;
64
+ border-radius: 8px;
65
+ cursor: pointer;
66
+ transition: background 0.3s ease;
67
+ margin-top: 10px;
68
+ flex-basis: 100%;
69
+ }
70
+
71
+ button:hover {
72
+ background: #1d4ed8;
73
+ }
74
+
75
+ .grafico {
76
+ margin-top: 30px;
77
+ text-align: center;
78
+ }
79
+
80
+ table {
81
+ margin-top: 30px;
82
+ width: 100%;
83
+ border-collapse: collapse;
84
+ font-size: 15px;
85
+ }
86
+
87
+ th, td {
88
+ border: 1px solid #e5e7eb;
89
+ padding: 8px 12px;
90
+ text-align: center;
91
+ }
92
+
93
+ th {
94
+ background: #f3f4f6;
95
+ }
96
+ </style>
97
+ </head>
98
+ <body>
99
+ <div class="card">
100
+ <h1>Simulador de Comparação de Investimentos</h1>
101
+ <form method="post">
102
+ <div class="input-group">
103
+ <label for="capital">Capital Inicial (R$):</label>
104
+ <input type="number" name="capital" id="capital" step="100" required value="{{ params.capital }}">
105
+ </div>
106
+
107
+ <div class="input-group">
108
+ <label for="studio_valor_anual">Receita anual líquida do Studio (R$):</label>
109
+ <input type="number" name="studio_valor_anual" id="studio_valor_anual" step="100" required value="{{ params.studio_valor_anual }}">
110
+ </div>
111
+
112
+ <div class="input-group">
113
+ <label for="studio_valoriza">Taxa de valorização do Studio (% a.a.):</label>
114
+ <input type="number" name="studio_valoriza" id="studio_valoriza" step="0.1" required value="{{ params.studio_valoriza }}">
115
+ </div>
116
+
117
+ <div class="input-group">
118
+ <label for="franquia_valor_anual">Receita anual da Franquia (R$):</label>
119
+ <input type="number" name="franquia_valor_anual" id="franquia_valor_anual" step="100" required value="{{ params.franquia_valor_anual }}">
120
+ </div>
121
+
122
+ <div class="input-group">
123
+ <label for="acoes_retorno">Rentabilidade anual das Ações (%):</label>
124
+ <input type="number" name="acoes_retorno" id="acoes_retorno" step="0.1" required value="{{ params.acoes_retorno }}">
125
+ </div>
126
+
127
+ <div class="input-group">
128
+ <label for="renda_fixa_retorno">Rentabilidade anual da Renda Fixa (%):</label>
129
+ <input type="number" name="renda_fixa_retorno" id="renda_fixa_retorno" step="0.1" required value="{{ params.renda_fixa_retorno }}">
130
+ </div>
131
+
132
+ <button type="submit">Simular</button>
133
+ </form>
134
+
135
+ {% if grafico %}
136
+ <div class="grafico">
137
+ <h2>Resultado da Simulação</h2>
138
+ <img src="data:image/png;base64,{{ grafico }}" alt="Gráfico de Simulação">
139
+ </div>
140
+
141
+ <form action="/download_csv" method="post">
142
+ {% for key, value in params.items() %}
143
+ <input type="hidden" name="{{ key }}" value="{{ value }}">
144
+ {% endfor %}
145
+ <button type="submit" style="margin-top: 15px;">📥 Baixar CSV</button>
146
+ </form>
147
+
148
+ <table>
149
+ <thead>
150
+ <tr>
151
+ <th>Ano</th>
152
+ {% for tipo in resultados %}
153
+ <th>{{ tipo.title() }}</th>
154
+ {% endfor %}
155
+ </tr>
156
+ </thead>
157
+ <tbody>
158
+ {% for i in range(anos|length) %}
159
+ <tr>
160
+ <td>{{ anos[i] }}</td>
161
+ {% for tipo in resultados %}
162
+ <td>R$ {{ '%.2f'|format(resultados[tipo][i]) }}</td>
163
+ {% endfor %}
164
+ </tr>
165
+ {% endfor %}
166
+ </tbody>
167
+ </table>
168
+ {% endif %}
169
+ </div>
170
+ </body>
171
+ </html>