Hugging Face's logo

Spaces:
death0074k
/
undefined
Running

App Files Community
death0074k commited on
Commit
becacde
·
verified ·
1 Parent(s): 4a11e70

bom, euq queria um appweb mwamo usando o firebase, ai o app vai ter uma especie de inteligencia artificial, onde vai me dar dicas e passos a passos para gerir bem o dinheiro que tenho, aq esta a config do firebase;// For Firebase JS SDK v7.20.0 and later, measurementId is optional

Browse files

const firebaseConfig = {
apiKey: "AIzaSyDu8LXWPu4PjMrVFVaREeWCSwHERTmSHkQ",
authDomain: "financas-e9a9c.firebaseapp.com",
projectId: "financas-e9a9c",
storageBucket: "financas-e9a9c.firebasestorage.app",
messagingSenderId: "583620474455",
appId: "1:583620474455:web:9e2d33403c5f87dc1c5512",
measurementId: "G-7GZGVF7NRK"
};

Files changed (2) hide show
  1. README.md +9 -5
  2. index.html +389 -19
README.md CHANGED
@@ -1,10 +1,14 @@
1
  ---
2
- title: Undefined
3
- emoji: 📊
4
- colorFrom: purple
5
- colorTo: blue
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
 
 
1
  ---
2
+ title: undefined
3
+ colorFrom: gray
4
+ colorTo: pink
5
+ emoji: 🐳
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite-v3
10
  ---
11
 
12
+ # Welcome to your new DeepSite project!
13
+ This project was created with [DeepSite](https://deepsite.hf.co).
14
+
index.html CHANGED
@@ -1,19 +1,389 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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.0">
6
+ <title>CoinSage - Seu Gestor Financeiro Inteligente</title>
7
+ <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
10
+ <script src="https://unpkg.com/feather-icons"></script>
11
+ <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
12
+ <script>
13
+ tailwind.config = {
14
+ theme: {
15
+ extend: {
16
+ colors: {
17
+ primary: {
18
+ 50: '#f0f9ff',
19
+ 100: '#e0f2fe',
20
+ 200: '#bae6fd',
21
+ 300: '#7dd3fc',
22
+ 400: '#38bdf8',
23
+ 500: '#0ea5e9',
24
+ 600: '#0284c7',
25
+ 700: '#0369a1',
26
+ 800: '#075985',
27
+ 900: '#0c4a6e',
28
+ },
29
+ secondary: {
30
+ 50: '#f8fafc',
31
+ 100: '#f1f5f9',
32
+ 200: '#e2e8f0',
33
+ 300: '#cbd5e1',
34
+ 400: '#94a3b8',
35
+ 500: '#64748b',
36
+ 600: '#475569',
37
+ 700: '#334155',
38
+ 800: '#1e293b',
39
+ 900: '#0f172a',
40
+ }
41
+ }
42
+ }
43
+ }
44
+ }
45
+ </script>
46
+ <style>
47
+ .gradient-bg {
48
+ background: linear-gradient(135deg, #0ea5e9 0%, #64748b 100%);
49
+ }
50
+ .card-hover {
51
+ transition: all 0.3s ease;
52
+ }
53
+ .card-hover:hover {
54
+ transform: translateY(-5px);
55
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
56
+ }
57
+ .pulse-glow {
58
+ animation: pulse-glow 2s infinite;
59
+ }
60
+ @keyframes pulse-glow {
61
+ 0%, 100% { box-shadow: 0 0 5px rgba(14, 165, 233, 0.5); }
62
+ 50% { box-shadow: 0 0 20px rgba(14, 165, 233, 0.8); }
63
+ }
64
+ </style>
65
+ </head>
66
+ <body class="bg-gray-50 min-h-screen">
67
+ <!-- Navigation -->
68
+ <nav class="bg-white shadow-lg sticky top-0 z-50">
69
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
70
+ <div class="flex justify-between h-16">
71
+ <div class="flex items-center">
72
+ <div class="flex-shrink-0 flex items-center">
73
+ <i data-feather="trending-up" class="h-8 w-8 text-primary-600"></i>
74
+ <span class="ml-2 text-xl font-bold text-gray-900">CoinSage</span>
75
+ </div>
76
+ </div>
77
+ <div class="hidden md:flex items-center space-x-8">
78
+ <a href="#dashboard" class="text-gray-700 hover:text-primary-600 font-medium transition duration-150">Dashboard</a>
79
+ <a href="#dividas" class="text-gray-700 hover:text-primary-600 font-medium transition duration-150">Dívidas</a>
80
+ <a href="#economia" class="text-gray-700 hover:text-primary-600 font-medium transition duration-150">Economia</a>
81
+ <a href="#planejamento" class="text-gray-700 hover:text-primary-600 font-medium transition duration-150">Planejamento</a>
82
+ </div>
83
+ <div class="flex items-center">
84
+ <button class="bg-primary-600 text-white px-4 py-2 rounded-lg hover:bg-primary-700 transition duration-150 flex items-center">
85
+ <i data-feather="user" class="w-4 h-4 mr-2"></i>
86
+ Minha Conta
87
+ </button>
88
+ </div>
89
+ </div>
90
+ </div>
91
+ </nav>
92
+
93
+ <!-- Hero Section -->
94
+ <section class="gradient-bg text-white py-20">
95
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
96
+ <div class="text-center">
97
+ <h1 class="text-4xl md:text-6xl font-bold mb-6">Domine Suas Finanças com Inteligência</h1>
98
+ <p class="text-xl md:text-2xl mb-8 opacity-90">Consulte suas dívidas, acompanhe seu dinheiro e receba passos inteligentes para economizar</p>
99
+ <div class="flex flex-col sm:flex-row gap-4 justify-center">
100
+ <button class="bg-white text-primary-600 px-8 py-4 rounded-lg font-semibold hover:bg-gray-100 transition duration-150 flex items-center justify-center">
101
+ <i data-feather="play" class="w-5 h-5 mr-2"></i>
102
+ Começar Agora
103
+ </button>
104
+ <button class="border-2 border-white text-white px-8 py-4 rounded-lg font-semibold hover:bg-white hover:text-primary-600 transition duration-150 flex items-center justify-center">
105
+ <i data-feather="info" class="w-5 h-5 mr-2"></i>
106
+ Saiba Mais
107
+ </button>
108
+ </div>
109
+ </div>
110
+ </div>
111
+ </section>
112
+
113
+ <!-- Dashboard Section -->
114
+ <section id="dashboard" class="py-16 bg-white">
115
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
116
+ <h2 class="text-3xl font-bold text-center text-gray-900 mb-12">Seu Painel Financeiro</h2>
117
+
118
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8 mb-12">
119
+ <!-- Saldo Atual -->
120
+ <div class="bg-gradient-to-r from-primary-500 to-primary-600 text-white p-6 rounded-2xl card-hover">
121
+ <div class="flex items-center justify-between mb-4">
122
+ <h3 class="text-xl font-semibold">Saldo Disponível</h3>
123
+ <i data-feather="dollar-sign" class="w-6 h-6"></i>
124
+ </div>
125
+ <p class="text-3xl font-bold mb-2" id="saldo-disponivel">R$ 2.450,00</p>
126
+ <p class="text-primary-100">Atualizado em tempo real</p>
127
+ </div>
128
+
129
+ <!-- Total de Dívidas -->
130
+ <div class="bg-gradient-to-r from-secondary-500 to-secondary-600 text-white p-6 rounded-2xl card-hover">
131
+ <div class="flex items-center justify-between mb-4">
132
+ <h3 class="text-xl font-semibold">Total em Dívidas</h3>
133
+ <i data-feather="alert-triangle" class="w-6 h-6"></i>
134
+ </div>
135
+ <p class="text-3xl font-bold mb-2" id="total-dividas">R$ 8.750,00</p>
136
+ <p class="text-secondary-100">Vencimento próximo: 5 dias</p>
137
+ </div>
138
+
139
+ <!-- Meta de Economia -->
140
+ <div class="bg-gradient-to-r from-green-500 to-green-600 text-white p-6 rounded-2xl card-hover">
141
+ <div class="flex items-center justify-between mb-4">
142
+ <h3 class="text-xl font-semibold">Meta Mensal</h3>
143
+ <i data-feather="target" class="w-6 h-6"></i>
144
+ </div>
145
+ <p class="text-3xl font-bold mb-2" id="meta-economia">R$ 500,00</p>
146
+ <p class="text-green-100">65% alcançado</p>
147
+ </div>
148
+ </div>
149
+
150
+ <!-- Gráfico de Despesas -->
151
+ <div class="bg-gray-50 p-6 rounded-2xl card-hover">
152
+ <h3 class="text-xl font-semibold text-gray-900 mb-4">Distribuição de Gastos</h3>
153
+ <div class="h-64">
154
+ <canvas id="gastosChart"></canvas>
155
+ </div>
156
+ </div>
157
+ </div>
158
+ </section>
159
+
160
+ <!-- Dívidas Section -->
161
+ <section id="dividas" class="py-16 bg-gray-50">
162
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
163
+ <h2 class="text-3xl font-bold text-center text-gray-900 mb-12">Suas Dívidas</h2>
164
+
165
+ <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
166
+ <!-- Lista de Dívidas -->
167
+ <div class="bg-white p-6 rounded-2xl shadow-lg card-hover">
168
+ <h3 class="text-xl font-semibold text-gray-900 mb-4 flex items-center">
169
+ <i data-feather="list" class="w-5 h-5 mr-2 text-primary-600"></i>
170
+ Todas as Dívidas
171
+ </h3>
172
+ <div class="space-y-4" id="lista-dividas">
173
+ <!-- Dívida 1 -->
174
+ <div class="border-l-4 border-red-500 bg-red-50 p-4 rounded-lg">
175
+ <div class="flex justify-between items-start">
176
+ <div>
177
+ <h4 class="font-semibold text-gray-900">Cartão de Crédito</h4>
178
+ <p class="text-sm text-gray-600">Vencimento: 15/12/2024</p>
179
+ </div>
180
+ <span class="text-red-600 font-bold">R$ 3.250,00</span>
181
+ </div>
182
+ <div class="mt-2 flex items-center text-sm">
183
+ <i data-feather="alert-circle" class="w-4 h-4 mr-1 text-red-500"></i>
184
+ <span class="text-red-600">Atraso: 2 dias</span>
185
+ </div>
186
+ </div>
187
+
188
+ <!-- Dívida 2 -->
189
+ <div class="border-l-4 border-yellow-500 bg-yellow-50 p-4 rounded-lg">
190
+ <div class="flex justify-between items-start">
191
+ <div>
192
+ <h4 class="font-semibold text-gray-900">Empréstimo Pessoal</h4>
193
+ <p class="text-sm text-gray-600">Vencimento: 20/12/2024</p>
194
+ </div>
195
+ <span class="text-yellow-600 font-bold">R$ 2.500,00</span>
196
+ </div>
197
+ </div>
198
+
199
+ <!-- Dívida 3 -->
200
+ <div class="border-l-4 border-blue-500 bg-blue-50 p-4 rounded-lg">
201
+ <div class="flex justify-between items-start">
202
+ <div>
203
+ <h4 class="font-semibold text-gray-900">Financiamento Carro</h4>
204
+ <p class="text-sm text-gray-600">Vencimento: 05/01/2025</p>
205
+ </div>
206
+ <span class="text-blue-600 font-bold">R$ 3.000,00</span>
207
+ </div>
208
+ </div>
209
+ </div>
210
+ </div>
211
+
212
+ <!-- Plano de Pagamento -->
213
+ <div class="bg-white p-6 rounded-2xl shadow-lg card-hover">
214
+ <h3 class="text-xl font-semibold text-gray-900 mb-4 flex items-center">
215
+ <i data-feather="calendar" class="w-5 h-5 mr-2 text-primary-600"></i>
216
+ Plano de Pagamento Inteligente
217
+ </h3>
218
+ <div class="space-y-4">
219
+ <div class="bg-primary-50 p-4 rounded-lg border border-primary-200">
220
+ <h4 class="font-semibold text-primary-900 mb-2">Próximos Passos Recomendados</h4>
221
+ <ul class="space-y-2 text-sm text-primary-700">
222
+ <li class="flex items-center">
223
+ <i data-feather="check-circle" class="w-4 h-4 mr-2 text-primary-600"></i>
224
+ Pagar cartão de crédito até 18/12 (evitar juros)
225
+ </li>
226
+ <li class="flex items-center">
227
+ <i data-feather="check-circle" class="w-4 h-4 mr-2 text-primary-600"></i>
228
+ Negociar empréstimo pessoal para melhores condições
229
+ </li>
230
+ <li class="flex items-center">
231
+ <i data-feather="check-circle" class="w-4 h-4 mr-2 text-primary-600"></i>
232
+ Economizar R$ 300 este mês para entrada do financiamento
233
+ </li>
234
+ </ul>
235
+ </div>
236
+
237
+ <div class="bg-green-50 p-4 rounded-lg border border-green-200">
238
+ <h4 class="font-semibold text-green-900 mb-2">Meta de Liquidação</h4>
239
+ <p class="text-green-700 text-sm">Todas as dívidas quitadas em: <strong>18 meses</strong></p>
240
+ <div class="w-full bg-green-200 rounded-full h-2 mt-2">
241
+ <div class="bg-green-600 h-2 rounded-full" style="width: 25%"></div>
242
+ </div>
243
+ </div>
244
+ </div>
245
+ </div>
246
+ </div>
247
+ </div>
248
+ </section>
249
+
250
+ <!-- Dicas de Economia Section -->
251
+ <section id="economia" class="py-16 bg-white">
252
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
253
+ <h2 class="text-3xl font-bold text-center text-gray-900 mb-12">Passos Inteligentes para Economizar</h2>
254
+
255
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
256
+ <!-- Dica 1 -->
257
+ <div class="bg-gradient-to-br from-blue-50 to-indigo-100 p-6 rounded-2xl card-hover border border-blue-200">
258
+ <div class="text-center mb-4">
259
+ <i data-feather="shopping-bag" class="w-8 h-8 text-blue-600 mx-auto"></i>
260
+ </div>
261
+ <h3 class="text-lg font-semibold text-gray-900 mb-2 text-center">Reduza Compras por Impulso</h3>
262
+ <p class="text-gray-600 text-sm text-center">Espere 24h antes de compras não essenciais. Economia estimada: R$ 200/mês</p>
263
+ </div>
264
+
265
+ <!-- Dica 2 -->
266
+ <div class="bg-gradient-to-br from-green-50 to-emerald-100 p-6 rounded-2xl card-hover border border-green-200">
267
+ <div class="text-center mb-4">
268
+ <i data-feather="zap" class="w-8 h-8 text-green-600 mx-auto"></i>
269
+ </div>
270
+ <h3 class="text-lg font-semibold text-gray-900 mb-2 text-center">Otimize Contas de Energia</h3>
271
+ <p class="text-gray-600 text-sm text-center">Desligue aparelhos em standby. Economia: R$ 50/mês</p>
272
+ </div>
273
+
274
+ <!-- Dica 3 -->
275
+ <div class="bg-gradient-to-br from-purple-50 to-violet-100 p-6 rounded-2xl card-hover border border-purple-200">
276
+ <div class="text-center mb-4">
277
+ <i data-feather="coffee" class="w-8 h-8 text-purple-600 mx-auto"></i>
278
+ </div>
279
+ <h3 class="text-lg font-semibold text-gray-900 mb-2 text-center">Faça Café em Casa</h3>
280
+ <p class="text-gray-600 text-sm text-center">Economize R$ 150/mês evitando cafés fora</p>
281
+ </div>
282
+
283
+ <!-- Dica 4 -->
284
+ <div class="bg-gradient-to-br from-orange-50 to-amber-100 p-6 rounded-2xl card-hover border border-orange-200">
285
+ <div class="text-center mb-4">
286
+ <i data-feather="dollar-sign" class="w-8 h-8 text-orange-600 mx-auto"></i>
287
+ </div>
288
+ <h3 class="text-lg font-semibold text-gray-900 mb-2 text-center">Negocie Tarifas Bancárias</h3>
289
+ <p class="text-gray-600 text-sm text-center">Reduza taxas em até R$ 40/mês</p>
290
+ </div>
291
+ </div>
292
+
293
+ <!-- Botão de Mais Dicas -->
294
+ <div class="text-center mt-8">
295
+ <button class="bg-primary-600 text-white px-6 py-3 rounded-lg hover:bg-primary-700 transition duration-150 flex items-center mx-auto">
296
+ <i data-feather="plus" class="w-4 h-4 mr-2"></i>
297
+ Ver Mais Dicas Personalizadas
298
+ </button>
299
+ </div>
300
+ </div>
301
+ </section>
302
+
303
+ <!-- Footer -->
304
+ <footer class="bg-gray-900 text-white py-12">
305
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
306
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
307
+ <div>
308
+ <h3 class="text-lg font-semibold mb-4">CoinSage</h3>
309
+ <p class="text-gray-400 text-sm">Seu parceiro inteligente para uma vida financeira saudável</p>
310
+ </div>
311
+ <div>
312
+ <h3 class="text-lg font-semibold mb-4">Recursos</h3>
313
+ <ul class="space-y-2 text-gray-400 text-sm">
314
+ <li><a href="#" class="hover:text-white transition duration-150">Dashboard</a></li>
315
+ <li><a href="#" class="hover:text-white transition duration-150">Gestão de Dívidas</a></li>
316
+ <li><a href="#" class="hover:text-white transition duration-150">Dicas de Economia</a></li>
317
+ <li><a href="#" class="hover:text-white transition duration-150">Planejamento</a></li>
318
+ </ul>
319
+ </div>
320
+ <div>
321
+ <h3 class="text-lg font-semibold mb-4">Suporte</h3>
322
+ <ul class="space-y-2 text-gray-400 text-sm">
323
+ <li><a href="#" class="hover:text-white transition duration-150">Ajuda</a></li>
324
+ <li><a href="#" class="hover:text-white transition duration-150">Contato</a></li>
325
+ <li><a href="#" class="hover:text-white transition duration-150">FAQ</a></li>
326
+ </ul>
327
+ </div>
328
+ <div>
329
+ <h3 class="text-lg font-semibold mb-4">Contato</h3>
330
+ <p class="text-gray-400 text-sm">contato@coinsage.com</p>
331
+ <p class="text-gray-400 text-sm">+55 (11) 9999-9999</p>
332
+ </div>
333
+ </div>
334
+ <div class="border-t border-gray-800 mt-8 pt-8 text-center text-gray-400 text-sm">
335
+ <p>&copy; 2024 CoinSage. Todos os direitos reservados.</p>
336
+ </div>
337
+ </div>
338
+ </footer>
339
+
340
+ <script>
341
+ // Inicializar Feather Icons
342
+ feather.replace();
343
+
344
+ // Gráfico de Gastos
345
+ const ctx = document.getElementById('gastosChart').getContext('2d');
346
+ const gastosChart = new Chart(ctx, {
347
+ type: 'doughnut',
348
+ data: {
349
+ labels: ['Moradia', 'Transporte', 'Alimentação', 'Lazer', 'Outros'],
350
+ datasets: [{
351
+ data: [35, 20, 25, 10, 10],
352
+ backgroundColor: [
353
+ '#0ea5e9',
354
+ '#64748b',
355
+ '#10b981',
356
+ '#f59e0b',
357
+ '#8b5cf6'
358
+ ],
359
+ borderWidth: 0
360
+ }]
361
+ },
362
+ options: {
363
+ responsive: true,
364
+ maintainAspectRatio: false,
365
+ plugins: {
366
+ legend: {
367
+ position: 'bottom'
368
+ }
369
+ }
370
+ }
371
+ });
372
+
373
+ // Animação simples para os cards
374
+ document.addEventListener('DOMContentLoaded', function() {
375
+ const cards = document.querySelectorAll('.card-hover');
376
+ cards.forEach((card, index) => {
377
+ card.style.opacity = '0';
378
+ card.style.transform = 'translateY(20px)';
379
+
380
+ setTimeout(() => {
381
+ card.style.transition = 'all 0.6s ease';
382
+ card.style.opacity = '1';
383
+ card.style.transform = 'translateY(0)';
384
+ }, index * 100);
385
+ });
386
+
387
+ // Simular atualização de
388
+ </body>
389
+ </html>