-
Notifications
You must be signed in to change notification settings - Fork 1
Expand file tree
/
Copy pathindex.html
More file actions
222 lines (191 loc) · 12.3 KB
/
Copy pathindex.html
File metadata and controls
222 lines (191 loc) · 12.3 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
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
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MoneyMap</title>
<!-- LINK PARA OS ICONES USADOS -->
<link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'>
<!-- LINK PARA O CSS -->
<link rel="stylesheet" href="style.css">
<!-- LINK PARA O FAVICON -->
<link rel="shortcut icon" href="images/Icon_money-controll.ico" type="image/x-icon">
</head>
<body id="body">
<main>
<!-- Modal BASE-->
<div id="modal" class="modal">
<div class="modal-content" id="modal-content">
<h2>Confirmação</h2>
<p>Você tem certeza que deseja excluir todos os dados?</p>
<div class="botoes">
<button id="confirmClear">Sim</button>
<button id="cancelClear">Não</button>
</div>
</div>
</div> <!--FIM MODAL BASE-->
<!-- Modal CONFIRMAÇÃO -->
<div id="modalconfirm" class="modal">
<div class="modal-content" id="modal-content">
<h2>Sucesso</h2>
<p>Dados Excluídos Com Sucesso!</p>
<div class="botoes, btnOK">
<button id="btnOK">OK</button>
</div>
</div>
</div> <!--FIM MODAL CONFIRMAÇÃO-->
<!-- Modal AVISO-->
<div id="modalaviso" class="modal">
<div class="modal-content" id="modal-content">
<h2>Aviso</h2>
<p>Preencha Todos os Campos</p>
<div class="botoes, btnOK">
<button id="btnavisoOK">OK</button>
</div>
</div>
</div> <!--FIM MODAL AVISO-->
<!-- Modal SAIBA MAIS -->
<div id="modalsaibamais" class="modal">
<div class="modal-content modalsaibamais" id="modal-content">
<h2>Bem-vindo ao MoneyMap!</h2>
<p class="primeirop">Este site foi criado para ajudar você a monitorar e gerenciar suas finanças de forma prática. No MoneyMap, você pode registrar suas despesas e receitas, acompanhando de perto cada movimentação. Isso facilita entender para onde vai o seu dinheiro, identificar onde economizar e construir uma vida financeira mais equilibrada.</p>
<p>Nosso objetivo é oferecer uma ferramenta simples e acessível para que você atinja suas metas financeiras e tome decisões mais conscientes.</p>
<p>Controle seus gastos, planeje melhor e tenha uma vida financeira saudável!</p>
<div class="botoes, btnOK">
<button id="btnsaibamaisOK">OK</button>
</div>
</div>
</div> <!--FIM MODAL SAIBA MAIS-->
<!-- Modal CONFIG-->
<div id="modalconfig" class="modal">
<div class="modal-content" id="modal-content">
<div class="topo">
<h2 class="tituloconfig">Configurações</h2>
<button id="btconfigfechar" class="btconfigfechar"><i class='bx bxs-x-circle' ></i></button>
</div>
<div class="conteudo">
<div class="colormode">
<label for="toggle">Dark Mode</label>
<label id="theme-toggle-button">
<input type="checkbox" id="toggle">
<svg viewBox="0 0 69.667 44" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg">
<g transform="translate(3.5 3.5)" data-name="Component 15 – 1" id="Component_15_1">
<g filter="url(#container)" transform="matrix(1, 0, 0, 1, -3.5, -3.5)">
<rect fill="#83cbd8" transform="translate(3.5 3.5)" rx="17.5" height="35" width="60.667" data-name="container" id="container"></rect>
</g>
<g transform="translate(2.333 2.333)" id="button">
<g data-name="sun" id="sun">
<g filter="url(#sun-outer)" transform="matrix(1, 0, 0, 1, -5.83, -5.83)">
<circle fill="#f8e664" transform="translate(5.83 5.83)" r="15.167" cy="15.167" cx="15.167" data-name="sun-outer" id="sun-outer-2"></circle>
</g>
<g filter="url(#sun)" transform="matrix(1, 0, 0, 1, -5.83, -5.83)">
<path fill="rgba(246,254,247,0.29)" transform="translate(9.33 9.33)" d="M11.667,0A11.667,11.667,0,1,1,0,11.667,11.667,11.667,0,0,1,11.667,0Z" data-name="sun" id="sun-3"></path>
</g>
<circle fill="#fcf4b9" transform="translate(8.167 8.167)" r="7" cy="7" cx="7" id="sun-inner"></circle>
</g>
<g data-name="moon" id="moon">
<g filter="url(#moon)" transform="matrix(1, 0, 0, 1, -31.5, -5.83)">
<circle fill="#cce6ee" transform="translate(31.5 5.83)" r="15.167" cy="15.167" cx="15.167" data-name="moon" id="moon-3"></circle>
</g>
<g fill="#a6cad0" transform="translate(-24.415 -1.009)" id="patches">
<circle transform="translate(43.009 4.496)" r="2" cy="2" cx="2"></circle>
<circle transform="translate(39.366 17.952)" r="2" cy="2" cx="2" data-name="patch"></circle>
<circle transform="translate(33.016 8.044)" r="1" cy="1" cx="1" data-name="patch"></circle>
<circle transform="translate(51.081 18.888)" r="1" cy="1" cx="1" data-name="patch"></circle>
<circle transform="translate(33.016 22.503)" r="1" cy="1" cx="1" data-name="patch"></circle>
<circle transform="translate(50.081 10.53)" r="1.5" cy="1.5" cx="1.5" data-name="patch"></circle>
</g>
</g>
</g>
<g filter="url(#cloud)" transform="matrix(1, 0, 0, 1, -3.5, -3.5)">
<path fill="#fff" transform="translate(-3466.47 -160.94)" d="M3512.81,173.815a4.463,4.463,0,0,1,2.243.62.95.95,0,0,1,.72-1.281,4.852,4.852,0,0,1,2.623.519c.034.02-.5-1.968.281-2.716a2.117,2.117,0,0,1,2.829-.274,1.821,1.821,0,0,1,.854,1.858c.063.037,2.594-.049,3.285,1.273s-.865,2.544-.807,2.626a12.192,12.192,0,0,1,2.278.892c.553.448,1.106,1.992-1.62,2.927a7.742,7.742,0,0,1-3.762-.3c-1.28-.49-1.181-2.65-1.137-2.624s-1.417,2.2-2.623,2.2a4.172,4.172,0,0,1-2.394-1.206,3.825,3.825,0,0,1-2.771.774c-3.429-.46-2.333-3.267-2.2-3.55A3.721,3.721,0,0,1,3512.81,173.815Z" data-name="cloud" id="cloud"></path>
</g>
<g fill="#def8ff" transform="translate(3.585 1.325)" id="stars">
<path transform="matrix(-1, 0.017, -0.017, -1, 24.231, 3.055)" d="M.774,0,.566.559,0,.539.458.933.25,1.492l.485-.361.458.394L1.024.953,1.509.592.943.572Z"></path>
<path transform="matrix(-0.777, 0.629, -0.629, -0.777, 23.185, 12.358)" d="M1.341.529.836.472.736,0,.505.46,0,.4.4.729l-.231.46L.605.932l.4.326L.9.786Z" data-name="star"></path>
<path transform="matrix(0.438, 0.899, -0.899, 0.438, 23.177, 29.735)" d="M.015,1.065.475.9l.285.365L.766.772l.46-.164L.745.494.751,0,.481.407,0,.293.285.658Z" data-name="star"></path>
<path transform="translate(12.677 0.388) rotate(104)" d="M1.161,1.6,1.059,1,1.574.722.962.607.86,0,.613.572,0,.457.446.881.2,1.454l.516-.274Z" data-name="star"></path>
<path transform="matrix(-0.07, 0.998, -0.998, -0.07, 11.066, 15.457)" d="M.873,1.648l.114-.62L1.579.945,1.03.62,1.144,0,.706.464.157.139.438.7,0,1.167l.592-.083Z" data-name="star"></path>
<path transform="translate(8.326 28.061) rotate(11)" d="M.593,0,.638.724,0,.982l.7.211.045.724.36-.64.7.211L1.342.935,1.7.294,1.063.552Z" data-name="star"></path>
<path transform="translate(5.012 5.962) rotate(172)" d="M.816,0,.5.455,0,.311.323.767l-.312.455.516-.215.323.456L.827.911,1.343.7.839.552Z" data-name="star"></path>
<path transform="translate(2.218 14.616) rotate(169)" d="M1.261,0,.774.571.114.3.487.967,0,1.538.728,1.32l.372.662.047-.749.728-.218L1.215.749Z" data-name="star"></path>
</g>
</g>
</svg>
</label>
</div>
<h3>Coming Soon...</h3>
<p class="direitos direitosconfig">© 2024 Controle de Gastos. Todos os direitos reservados.</p>
</div>
</div>
</div> <!--FIM MODAL CONFIG-->
<!-- LINKS -->
<a class="logosite" id="btnsaibamais" title="Saiba Mais!"><img src="images/Icon_money-controll.ico" alt="Logo"></a>
<a href="https://github.com/MMaffi" target="_blank" class="linkGit"><i class='bx bxl-github' title="GitHub"></i></a>
<!-- FIM LINKS -->
<!-- TOTAIS -->
<div class="resume">
<div>
Entradas:
<span class="incomes">0.00</span>
</div>
<div>
Saídas:
<span class="expenses">0.00</span>
</div>
<div>
Total:
<span class="total">0.00</span>
</div>
</div> <!--FIM TOTAIS-->
<!-- NOVO ITEM -->
<div class="newItem">
<div class="divDesc">
<label for="desc">Descrição</label>
<input type="text" id="desc" autocomplete="off" autofocus>
</div>
<div class="divAmount">
<label for="amount">Valor</label>
<input type="number" id="amount" autocomplete="off">
</div>
<div class="divType">
<label for="type">Tipo</label>
<select id="type" class="selecttype">
<option>Entrada</option>
<option>Saída</option>
</select>
</div>
<button id="btnNew">
<span>Incluir</span>
</button>
</div><!--FIM NOVO ITEM -->
<!-- TABELAS -->
<div class="divTable">
<table>
<thead>
<tr>
<th>Descrição</th>
<th class="columnAmount">Valor</th>
<th class="columnType">Tipo</th>
<th class="columnAction"></th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div><!--FIM TABELAS -->
<!-- LIMPA LOCAL STORAGE -->
<div class="limparstorage">
<button id="limparlocalstorage" title="CUIDADO"><i class='bx bxs-error'></i>Limpar Tudo</button>
</div><!--FIM LIMPA LOCAL STORAGE -->
<!-- COPYRIGHT -->
<!-- <p class="direitos">© 2024 Controle de Gastos. Todos os direitos reservados.</p> -->
<!--FIM COPYRIGHT -->
<!-- CONFIG -->
<button class="btnconfig" id="btnconfig" title="Configurações" ><i class='bx bx-cog'></i></button>
<!-- FIM CONFIG -->
</main>
<!-- LINK PARA O JAVASCRIPT -->
<script src="script.js"></script>
</body>
</html>