Update templates/index.html
Browse files- templates/index.html +67 -111
templates/index.html
CHANGED
@@ -1,124 +1,80 @@
|
|
1 |
<!DOCTYPE html>
|
2 |
<html lang="pt-BR">
|
3 |
<head>
|
4 |
-
|
5 |
-
|
6 |
-
|
7 |
-
|
8 |
-
body {
|
9 |
-
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
10 |
-
background: linear-gradient(to right, #0f2027, #203a43, #2c5364);
|
11 |
-
color: white;
|
12 |
-
margin: 0; padding: 0;
|
13 |
-
display: flex; flex-direction: column; align-items: center; min-height: 100vh;
|
14 |
-
line-height: 1.6;
|
15 |
-
}
|
16 |
-
h1 {
|
17 |
-
margin-top: 40px; font-size: 2.7em; letter-spacing: 1px;
|
18 |
-
}
|
19 |
-
form {
|
20 |
-
margin: 30px 20px; background-color: rgba(255,255,255,0.1);
|
21 |
-
padding: 30px 50px; border-radius: 16px; box-shadow: 0 0 15px rgba(0,0,0,0.5);
|
22 |
-
display: flex; flex-direction: column; gap: 24px; backdrop-filter: blur(10px);
|
23 |
-
max-width: 600px; width: 100%;
|
24 |
-
}
|
25 |
-
label {
|
26 |
-
font-weight: bold; margin-bottom: 5px;
|
27 |
-
}
|
28 |
-
input {
|
29 |
-
padding: 12px; border-radius: 10px; border: none; font-size: 1em;
|
30 |
-
}
|
31 |
-
button {
|
32 |
-
padding: 14px 22px; font-size: 1.1em; background-color: #00c9a7; color: #fff;
|
33 |
-
border: none; border-radius: 12px; cursor: pointer; transition: background-color 0.3s ease;
|
34 |
-
}
|
35 |
-
button:hover {
|
36 |
-
background-color: #00b494;
|
37 |
-
}
|
38 |
-
.grafico-container {
|
39 |
-
margin: 50px auto; text-align: center; max-width: 700px; padding: 0 20px;
|
40 |
-
}
|
41 |
-
img {
|
42 |
-
max-width: 100%; border-radius: 12px; box-shadow: 0 0 20px rgba(0,0,0,0.3);
|
43 |
-
}
|
44 |
-
.table-container {
|
45 |
-
margin: 40px auto; max-width: 700px; overflow-x: auto;
|
46 |
-
}
|
47 |
-
table {
|
48 |
-
width: 100%; border-collapse: collapse; color: #222; background: #fff; border-radius: 10px; overflow: hidden;
|
49 |
-
}
|
50 |
-
th, td {
|
51 |
-
padding: 10px 12px; text-align: center;
|
52 |
-
}
|
53 |
-
th {
|
54 |
-
background-color: #00c9a7; color: white;
|
55 |
-
}
|
56 |
-
tr:nth-child(even) {
|
57 |
-
background-color: #f2f2f2;
|
58 |
-
}
|
59 |
-
</style>
|
60 |
</head>
|
61 |
<body>
|
62 |
-
|
63 |
-
|
64 |
-
<
|
65 |
-
|
66 |
-
|
67 |
-
|
68 |
-
|
69 |
-
|
70 |
-
|
71 |
-
|
72 |
-
|
73 |
-
|
74 |
-
|
75 |
-
|
76 |
-
|
77 |
-
|
78 |
-
|
79 |
-
|
80 |
-
|
81 |
-
|
82 |
-
|
83 |
-
|
84 |
-
|
85 |
-
|
86 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
87 |
|
88 |
-
|
89 |
-
<
|
90 |
-
|
91 |
-
|
92 |
-
|
93 |
-
|
94 |
-
{{ tabela | safe }}
|
95 |
</div>
|
96 |
-
<form method="POST" action="/download_excel"
|
97 |
-
|
98 |
-
|
99 |
-
|
100 |
-
|
101 |
-
|
102 |
-
|
103 |
-
|
104 |
-
|
105 |
-
|
106 |
</form>
|
107 |
-
|
108 |
-
|
109 |
-
|
110 |
-
|
111 |
-
|
112 |
-
|
113 |
-
|
114 |
-
|
115 |
-
|
116 |
-
|
117 |
-
<button type="submit">📄 Baixar Relatório PDF</button>
|
118 |
</form>
|
119 |
-
|
|
|
120 |
</body>
|
121 |
</html>
|
122 |
|
123 |
|
124 |
-
|
|
|
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/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" />
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
8 |
</head>
|
9 |
<body>
|
10 |
+
<div class="container my-4">
|
11 |
+
<h1 class="mb-4">Simulador de Investimentos</h1>
|
12 |
+
<form method="POST" class="row g-3">
|
13 |
+
<div class="col-md-4">
|
14 |
+
<label for="capital" class="form-label">Capital Inicial (R$)</label>
|
15 |
+
<input type="number" step="0.01" min="0" class="form-control" id="capital" name="capital" required value="{{ capital or 100000 }}">
|
16 |
+
</div>
|
17 |
+
<div class="col-md-4">
|
18 |
+
<label for="studio_ret" class="form-label">Retorno Mensal Short Stay (%)</label>
|
19 |
+
<input type="number" step="0.01" min="0" max="100" class="form-control" id="studio_ret" name="studio_ret" required value="{{ studio_ret or 1 }}">
|
20 |
+
</div>
|
21 |
+
<div class="col-md-4">
|
22 |
+
<label for="valorizacao" class="form-label">Valorização Anual do Imóvel (%)</label>
|
23 |
+
<input type="number" step="0.01" min="0" max="100" class="form-control" id="valorizacao" name="valorizacao" required value="{{ valorizacao or 5 }}">
|
24 |
+
</div>
|
25 |
+
<div class="col-md-4">
|
26 |
+
<label for="franquia_ret" class="form-label">Lucro Anual da Franquia (R$)</label>
|
27 |
+
<input type="number" step="0.01" min="0" class="form-control" id="franquia_ret" name="franquia_ret" required value="{{ franquia_ret or 15000 }}">
|
28 |
+
</div>
|
29 |
+
<div class="col-md-4">
|
30 |
+
<label for="acoes_ret" class="form-label">Retorno Anual em Ações (%)</label>
|
31 |
+
<input type="number" step="0.01" min="0" max="100" class="form-control" id="acoes_ret" name="acoes_ret" required value="{{ acoes_ret or 8 }}">
|
32 |
+
</div>
|
33 |
+
<div class="col-md-4">
|
34 |
+
<label for="renda_fixa" class="form-label">Retorno Anual em Renda Fixa (%)</label>
|
35 |
+
<input type="number" step="0.01" min="0" max="100" class="form-control" id="renda_fixa" name="renda_fixa" required value="{{ renda_fixa or 6 }}">
|
36 |
+
</div>
|
37 |
+
<div class="col-md-4">
|
38 |
+
<label for="inflacao" class="form-label">Inflação Anual (%)</label>
|
39 |
+
<input type="number" step="0.01" min="0" max="100" class="form-control" id="inflacao" name="inflacao" required value="{{ inflacao or 4.5 }}">
|
40 |
+
</div>
|
41 |
+
<div class="col-12">
|
42 |
+
<button type="submit" class="btn btn-primary">Simular</button>
|
43 |
+
</div>
|
44 |
+
</form>
|
45 |
|
46 |
+
{% if grafico %}
|
47 |
+
<hr>
|
48 |
+
<h3 class="mt-4">Resultado da Simulação</h3>
|
49 |
+
<img src="data:image/png;base64,{{ grafico }}" class="img-fluid" alt="Gráfico de Investimentos"/>
|
50 |
+
<div class="table-responsive mt-3">
|
51 |
+
{{ tabela|safe }}
|
|
|
52 |
</div>
|
53 |
+
<form method="POST" action="/download_excel" class="d-inline-block mt-3 me-2">
|
54 |
+
<!-- reenvia os inputs para o download -->
|
55 |
+
<input type="hidden" name="capital" value="{{ capital }}">
|
56 |
+
<input type="hidden" name="studio_ret" value="{{ studio_ret }}">
|
57 |
+
<input type="hidden" name="valorizacao" value="{{ valorizacao }}">
|
58 |
+
<input type="hidden" name="franquia_ret" value="{{ franquia_ret }}">
|
59 |
+
<input type="hidden" name="acoes_ret" value="{{ acoes_ret }}">
|
60 |
+
<input type="hidden" name="renda_fixa" value="{{ renda_fixa }}">
|
61 |
+
<input type="hidden" name="inflacao" value="{{ inflacao }}">
|
62 |
+
<button type="submit" class="btn btn-success">Baixar Excel</button>
|
63 |
</form>
|
64 |
+
<form method="POST" action="/download_pdf" class="d-inline-block mt-3">
|
65 |
+
<!-- reenvia os inputs para o download -->
|
66 |
+
<input type="hidden" name="capital" value="{{ capital }}">
|
67 |
+
<input type="hidden" name="studio_ret" value="{{ studio_ret }}">
|
68 |
+
<input type="hidden" name="valorizacao" value="{{ valorizacao }}">
|
69 |
+
<input type="hidden" name="franquia_ret" value="{{ franquia_ret }}">
|
70 |
+
<input type="hidden" name="acoes_ret" value="{{ acoes_ret }}">
|
71 |
+
<input type="hidden" name="renda_fixa" value="{{ renda_fixa }}">
|
72 |
+
<input type="hidden" name="inflacao" value="{{ inflacao }}">
|
73 |
+
<button type="submit" class="btn btn-danger">Baixar PDF</button>
|
|
|
74 |
</form>
|
75 |
+
{% endif %}
|
76 |
+
</div>
|
77 |
</body>
|
78 |
</html>
|
79 |
|
80 |
|
|