Persano commited on
Commit
31ecff2
·
verified ·
1 Parent(s): 8773908

Update templates/index.html

Browse files
Files changed (1) hide show
  1. templates/index.html +67 -111
templates/index.html CHANGED
@@ -1,124 +1,80 @@
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>Comparador de Investimentos</title>
7
- <style>
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
- <h1>⭐ Comparador de Investimentos</h1>
63
- <form method="POST">
64
- <label for="capital">Capital Inicial (R$):</label>
65
- <input type="number" name="capital" id="capital" step="1000" min="10000" placeholder="Ex: 400000" required>
66
-
67
- <label for="studio_ret">Retorno mensal do Studio (%):</label>
68
- <input type="number" name="studio_ret" id="studio_ret" step="0.1" min="0" max="5" placeholder="Ex: 1.0" required>
69
-
70
- <label for="valorizacao">Valorização anual do imóvel (%):</label>
71
- <input type="number" name="valorizacao" id="valorizacao" step="0.1" min="0" max="20" placeholder="Ex: 6.0" required>
72
-
73
- <label for="franquia_ret">Lucro anual da Franquia (R$):</label>
74
- <input type="number" name="franquia_ret" id="franquia_ret" step="1000" min="0" placeholder="Ex: 20000" required>
75
-
76
- <label for="acoes_ret">Retorno anual em Ações (%):</label>
77
- <input type="number" name="acoes_ret" id="acoes_ret" step="0.1" min="0" max="50" placeholder="Ex: 10.0" required>
78
-
79
- <label for="renda_fixa">Retorno anual Renda Fixa (%):</label>
80
- <input type="number" name="renda_fixa" id="renda_fixa" step="0.1" min="0" max="30" placeholder="Ex: 9.0" required>
81
-
82
- <label for="inflacao">Inflação anual média esperada (%):</label>
83
- <input type="number" name="inflacao" id="inflacao" step="0.1" min="0" max="15" placeholder="Ex: 4.5" required>
84
-
85
- <button type="submit">📊 Simular Retorno</button>
86
- </form>
 
 
 
 
 
 
 
 
 
 
87
 
88
- {% if grafico %}
89
- <div class="grafico-container">
90
- <h2>📈 Resultado da Simulação</h2>
91
- <img src="data:image/png;base64,{{ grafico }}" alt="Gráfico de Investimento">
92
- </div>
93
- <div class="table-container">
94
- {{ tabela | safe }}
95
  </div>
96
- <form method="POST" action="/download_excel" style="margin-top:30px; text-align:center;">
97
- <!-- Passa os dados para o download Excel -->
98
- <input type="hidden" name="capital" value="{{ capital }}">
99
- <input type="hidden" name="studio_ret" value="{{ studio_ret }}">
100
- <input type="hidden" name="valorizacao" value="{{ valorizacao }}">
101
- <input type="hidden" name="franquia_ret" value="{{ franquia_ret }}">
102
- <input type="hidden" name="acoes_ret" value="{{ acoes_ret }}">
103
- <input type="hidden" name="renda_fixa" value="{{ renda_fixa }}">
104
- <input type="hidden" name="inflacao" value="{{ inflacao }}">
105
- <button type="submit">📄 Baixar Excel (.xlsx)</button>
106
  </form>
107
-
108
- <form method="POST" action="/download_pdf" style="margin-top:15px; text-align:center;">
109
- <!-- Passa os dados para o download PDF -->
110
- <input type="hidden" name="capital" value="{{ capital }}">
111
- <input type="hidden" name="studio_ret" value="{{ studio_ret }}">
112
- <input type="hidden" name="valorizacao" value="{{ valorizacao }}">
113
- <input type="hidden" name="franquia_ret" value="{{ franquia_ret }}">
114
- <input type="hidden" name="acoes_ret" value="{{ acoes_ret }}">
115
- <input type="hidden" name="renda_fixa" value="{{ renda_fixa }}">
116
- <input type="hidden" name="inflacao" value="{{ inflacao }}">
117
- <button type="submit">📄 Baixar Relatório PDF</button>
118
  </form>
119
- {% endif %}
 
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