Spaces:
Running
Running
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
becacde verified | <html lang="pt-BR"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>CoinSage - Seu Gestor Financeiro Inteligente</title> | |
| <link rel="icon" type="image/x-icon" href="/static/favicon.ico"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> | |
| <script> | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| colors: { | |
| primary: { | |
| 50: '#f0f9ff', | |
| 100: '#e0f2fe', | |
| 200: '#bae6fd', | |
| 300: '#7dd3fc', | |
| 400: '#38bdf8', | |
| 500: '#0ea5e9', | |
| 600: '#0284c7', | |
| 700: '#0369a1', | |
| 800: '#075985', | |
| 900: '#0c4a6e', | |
| }, | |
| secondary: { | |
| 50: '#f8fafc', | |
| 100: '#f1f5f9', | |
| 200: '#e2e8f0', | |
| 300: '#cbd5e1', | |
| 400: '#94a3b8', | |
| 500: '#64748b', | |
| 600: '#475569', | |
| 700: '#334155', | |
| 800: '#1e293b', | |
| 900: '#0f172a', | |
| } | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| <style> | |
| .gradient-bg { | |
| background: linear-gradient(135deg, #0ea5e9 0%, #64748b 100%); | |
| } | |
| .card-hover { | |
| transition: all 0.3s ease; | |
| } | |
| .card-hover:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); | |
| } | |
| .pulse-glow { | |
| animation: pulse-glow 2s infinite; | |
| } | |
| @keyframes pulse-glow { | |
| 0%, 100% { box-shadow: 0 0 5px rgba(14, 165, 233, 0.5); } | |
| 50% { box-shadow: 0 0 20px rgba(14, 165, 233, 0.8); } | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50 min-h-screen"> | |
| <!-- Navigation --> | |
| <nav class="bg-white shadow-lg sticky top-0 z-50"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="flex justify-between h-16"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 flex items-center"> | |
| <i data-feather="trending-up" class="h-8 w-8 text-primary-600"></i> | |
| <span class="ml-2 text-xl font-bold text-gray-900">CoinSage</span> | |
| </div> | |
| </div> | |
| <div class="hidden md:flex items-center space-x-8"> | |
| <a href="#dashboard" class="text-gray-700 hover:text-primary-600 font-medium transition duration-150">Dashboard</a> | |
| <a href="#dividas" class="text-gray-700 hover:text-primary-600 font-medium transition duration-150">Dívidas</a> | |
| <a href="#economia" class="text-gray-700 hover:text-primary-600 font-medium transition duration-150">Economia</a> | |
| <a href="#planejamento" class="text-gray-700 hover:text-primary-600 font-medium transition duration-150">Planejamento</a> | |
| </div> | |
| <div class="flex items-center"> | |
| <button class="bg-primary-600 text-white px-4 py-2 rounded-lg hover:bg-primary-700 transition duration-150 flex items-center"> | |
| <i data-feather="user" class="w-4 h-4 mr-2"></i> | |
| Minha Conta | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Hero Section --> | |
| <section class="gradient-bg text-white py-20"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="text-center"> | |
| <h1 class="text-4xl md:text-6xl font-bold mb-6">Domine Suas Finanças com Inteligência</h1> | |
| <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> | |
| <div class="flex flex-col sm:flex-row gap-4 justify-center"> | |
| <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"> | |
| <i data-feather="play" class="w-5 h-5 mr-2"></i> | |
| Começar Agora | |
| </button> | |
| <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"> | |
| <i data-feather="info" class="w-5 h-5 mr-2"></i> | |
| Saiba Mais | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Dashboard Section --> | |
| <section id="dashboard" class="py-16 bg-white"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <h2 class="text-3xl font-bold text-center text-gray-900 mb-12">Seu Painel Financeiro</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8 mb-12"> | |
| <!-- Saldo Atual --> | |
| <div class="bg-gradient-to-r from-primary-500 to-primary-600 text-white p-6 rounded-2xl card-hover"> | |
| <div class="flex items-center justify-between mb-4"> | |
| <h3 class="text-xl font-semibold">Saldo Disponível</h3> | |
| <i data-feather="dollar-sign" class="w-6 h-6"></i> | |
| </div> | |
| <p class="text-3xl font-bold mb-2" id="saldo-disponivel">R$ 2.450,00</p> | |
| <p class="text-primary-100">Atualizado em tempo real</p> | |
| </div> | |
| <!-- Total de Dívidas --> | |
| <div class="bg-gradient-to-r from-secondary-500 to-secondary-600 text-white p-6 rounded-2xl card-hover"> | |
| <div class="flex items-center justify-between mb-4"> | |
| <h3 class="text-xl font-semibold">Total em Dívidas</h3> | |
| <i data-feather="alert-triangle" class="w-6 h-6"></i> | |
| </div> | |
| <p class="text-3xl font-bold mb-2" id="total-dividas">R$ 8.750,00</p> | |
| <p class="text-secondary-100">Vencimento próximo: 5 dias</p> | |
| </div> | |
| <!-- Meta de Economia --> | |
| <div class="bg-gradient-to-r from-green-500 to-green-600 text-white p-6 rounded-2xl card-hover"> | |
| <div class="flex items-center justify-between mb-4"> | |
| <h3 class="text-xl font-semibold">Meta Mensal</h3> | |
| <i data-feather="target" class="w-6 h-6"></i> | |
| </div> | |
| <p class="text-3xl font-bold mb-2" id="meta-economia">R$ 500,00</p> | |
| <p class="text-green-100">65% alcançado</p> | |
| </div> | |
| </div> | |
| <!-- Gráfico de Despesas --> | |
| <div class="bg-gray-50 p-6 rounded-2xl card-hover"> | |
| <h3 class="text-xl font-semibold text-gray-900 mb-4">Distribuição de Gastos</h3> | |
| <div class="h-64"> | |
| <canvas id="gastosChart"></canvas> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Dívidas Section --> | |
| <section id="dividas" class="py-16 bg-gray-50"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <h2 class="text-3xl font-bold text-center text-gray-900 mb-12">Suas Dívidas</h2> | |
| <div class="grid grid-cols-1 lg:grid-cols-2 gap-8"> | |
| <!-- Lista de Dívidas --> | |
| <div class="bg-white p-6 rounded-2xl shadow-lg card-hover"> | |
| <h3 class="text-xl font-semibold text-gray-900 mb-4 flex items-center"> | |
| <i data-feather="list" class="w-5 h-5 mr-2 text-primary-600"></i> | |
| Todas as Dívidas | |
| </h3> | |
| <div class="space-y-4" id="lista-dividas"> | |
| <!-- Dívida 1 --> | |
| <div class="border-l-4 border-red-500 bg-red-50 p-4 rounded-lg"> | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <h4 class="font-semibold text-gray-900">Cartão de Crédito</h4> | |
| <p class="text-sm text-gray-600">Vencimento: 15/12/2024</p> | |
| </div> | |
| <span class="text-red-600 font-bold">R$ 3.250,00</span> | |
| </div> | |
| <div class="mt-2 flex items-center text-sm"> | |
| <i data-feather="alert-circle" class="w-4 h-4 mr-1 text-red-500"></i> | |
| <span class="text-red-600">Atraso: 2 dias</span> | |
| </div> | |
| </div> | |
| <!-- Dívida 2 --> | |
| <div class="border-l-4 border-yellow-500 bg-yellow-50 p-4 rounded-lg"> | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <h4 class="font-semibold text-gray-900">Empréstimo Pessoal</h4> | |
| <p class="text-sm text-gray-600">Vencimento: 20/12/2024</p> | |
| </div> | |
| <span class="text-yellow-600 font-bold">R$ 2.500,00</span> | |
| </div> | |
| </div> | |
| <!-- Dívida 3 --> | |
| <div class="border-l-4 border-blue-500 bg-blue-50 p-4 rounded-lg"> | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <h4 class="font-semibold text-gray-900">Financiamento Carro</h4> | |
| <p class="text-sm text-gray-600">Vencimento: 05/01/2025</p> | |
| </div> | |
| <span class="text-blue-600 font-bold">R$ 3.000,00</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Plano de Pagamento --> | |
| <div class="bg-white p-6 rounded-2xl shadow-lg card-hover"> | |
| <h3 class="text-xl font-semibold text-gray-900 mb-4 flex items-center"> | |
| <i data-feather="calendar" class="w-5 h-5 mr-2 text-primary-600"></i> | |
| Plano de Pagamento Inteligente | |
| </h3> | |
| <div class="space-y-4"> | |
| <div class="bg-primary-50 p-4 rounded-lg border border-primary-200"> | |
| <h4 class="font-semibold text-primary-900 mb-2">Próximos Passos Recomendados</h4> | |
| <ul class="space-y-2 text-sm text-primary-700"> | |
| <li class="flex items-center"> | |
| <i data-feather="check-circle" class="w-4 h-4 mr-2 text-primary-600"></i> | |
| Pagar cartão de crédito até 18/12 (evitar juros) | |
| </li> | |
| <li class="flex items-center"> | |
| <i data-feather="check-circle" class="w-4 h-4 mr-2 text-primary-600"></i> | |
| Negociar empréstimo pessoal para melhores condições | |
| </li> | |
| <li class="flex items-center"> | |
| <i data-feather="check-circle" class="w-4 h-4 mr-2 text-primary-600"></i> | |
| Economizar R$ 300 este mês para entrada do financiamento | |
| </li> | |
| </ul> | |
| </div> | |
| <div class="bg-green-50 p-4 rounded-lg border border-green-200"> | |
| <h4 class="font-semibold text-green-900 mb-2">Meta de Liquidação</h4> | |
| <p class="text-green-700 text-sm">Todas as dívidas quitadas em: <strong>18 meses</strong></p> | |
| <div class="w-full bg-green-200 rounded-full h-2 mt-2"> | |
| <div class="bg-green-600 h-2 rounded-full" style="width: 25%"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Dicas de Economia Section --> | |
| <section id="economia" class="py-16 bg-white"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <h2 class="text-3xl font-bold text-center text-gray-900 mb-12">Passos Inteligentes para Economizar</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6"> | |
| <!-- Dica 1 --> | |
| <div class="bg-gradient-to-br from-blue-50 to-indigo-100 p-6 rounded-2xl card-hover border border-blue-200"> | |
| <div class="text-center mb-4"> | |
| <i data-feather="shopping-bag" class="w-8 h-8 text-blue-600 mx-auto"></i> | |
| </div> | |
| <h3 class="text-lg font-semibold text-gray-900 mb-2 text-center">Reduza Compras por Impulso</h3> | |
| <p class="text-gray-600 text-sm text-center">Espere 24h antes de compras não essenciais. Economia estimada: R$ 200/mês</p> | |
| </div> | |
| <!-- Dica 2 --> | |
| <div class="bg-gradient-to-br from-green-50 to-emerald-100 p-6 rounded-2xl card-hover border border-green-200"> | |
| <div class="text-center mb-4"> | |
| <i data-feather="zap" class="w-8 h-8 text-green-600 mx-auto"></i> | |
| </div> | |
| <h3 class="text-lg font-semibold text-gray-900 mb-2 text-center">Otimize Contas de Energia</h3> | |
| <p class="text-gray-600 text-sm text-center">Desligue aparelhos em standby. Economia: R$ 50/mês</p> | |
| </div> | |
| <!-- Dica 3 --> | |
| <div class="bg-gradient-to-br from-purple-50 to-violet-100 p-6 rounded-2xl card-hover border border-purple-200"> | |
| <div class="text-center mb-4"> | |
| <i data-feather="coffee" class="w-8 h-8 text-purple-600 mx-auto"></i> | |
| </div> | |
| <h3 class="text-lg font-semibold text-gray-900 mb-2 text-center">Faça Café em Casa</h3> | |
| <p class="text-gray-600 text-sm text-center">Economize R$ 150/mês evitando cafés fora</p> | |
| </div> | |
| <!-- Dica 4 --> | |
| <div class="bg-gradient-to-br from-orange-50 to-amber-100 p-6 rounded-2xl card-hover border border-orange-200"> | |
| <div class="text-center mb-4"> | |
| <i data-feather="dollar-sign" class="w-8 h-8 text-orange-600 mx-auto"></i> | |
| </div> | |
| <h3 class="text-lg font-semibold text-gray-900 mb-2 text-center">Negocie Tarifas Bancárias</h3> | |
| <p class="text-gray-600 text-sm text-center">Reduza taxas em até R$ 40/mês</p> | |
| </div> | |
| </div> | |
| <!-- Botão de Mais Dicas --> | |
| <div class="text-center mt-8"> | |
| <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"> | |
| <i data-feather="plus" class="w-4 h-4 mr-2"></i> | |
| Ver Mais Dicas Personalizadas | |
| </button> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="bg-gray-900 text-white py-12"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-8"> | |
| <div> | |
| <h3 class="text-lg font-semibold mb-4">CoinSage</h3> | |
| <p class="text-gray-400 text-sm">Seu parceiro inteligente para uma vida financeira saudável</p> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-semibold mb-4">Recursos</h3> | |
| <ul class="space-y-2 text-gray-400 text-sm"> | |
| <li><a href="#" class="hover:text-white transition duration-150">Dashboard</a></li> | |
| <li><a href="#" class="hover:text-white transition duration-150">Gestão de Dívidas</a></li> | |
| <li><a href="#" class="hover:text-white transition duration-150">Dicas de Economia</a></li> | |
| <li><a href="#" class="hover:text-white transition duration-150">Planejamento</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-semibold mb-4">Suporte</h3> | |
| <ul class="space-y-2 text-gray-400 text-sm"> | |
| <li><a href="#" class="hover:text-white transition duration-150">Ajuda</a></li> | |
| <li><a href="#" class="hover:text-white transition duration-150">Contato</a></li> | |
| <li><a href="#" class="hover:text-white transition duration-150">FAQ</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-semibold mb-4">Contato</h3> | |
| <p class="text-gray-400 text-sm">contato@coinsage.com</p> | |
| <p class="text-gray-400 text-sm">+55 (11) 9999-9999</p> | |
| </div> | |
| </div> | |
| <div class="border-t border-gray-800 mt-8 pt-8 text-center text-gray-400 text-sm"> | |
| <p>© 2024 CoinSage. Todos os direitos reservados.</p> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Inicializar Feather Icons | |
| feather.replace(); | |
| // Gráfico de Gastos | |
| const ctx = document.getElementById('gastosChart').getContext('2d'); | |
| const gastosChart = new Chart(ctx, { | |
| type: 'doughnut', | |
| data: { | |
| labels: ['Moradia', 'Transporte', 'Alimentação', 'Lazer', 'Outros'], | |
| datasets: [{ | |
| data: [35, 20, 25, 10, 10], | |
| backgroundColor: [ | |
| '#0ea5e9', | |
| '#64748b', | |
| '#10b981', | |
| '#f59e0b', | |
| '#8b5cf6' | |
| ], | |
| borderWidth: 0 | |
| }] | |
| }, | |
| options: { | |
| responsive: true, | |
| maintainAspectRatio: false, | |
| plugins: { | |
| legend: { | |
| position: 'bottom' | |
| } | |
| } | |
| } | |
| }); | |
| // Animação simples para os cards | |
| document.addEventListener('DOMContentLoaded', function() { | |
| const cards = document.querySelectorAll('.card-hover'); | |
| cards.forEach((card, index) => { | |
| card.style.opacity = '0'; | |
| card.style.transform = 'translateY(20px)'; | |
| setTimeout(() => { | |
| card.style.transition = 'all 0.6s ease'; | |
| card.style.opacity = '1'; | |
| card.style.transform = 'translateY(0)'; | |
| }, index * 100); | |
| }); | |
| // Simular atualização de | |
| </body> | |
| </html> |