Spaces:
Running
Running
| <html lang="pt-BR"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Finança Fácil - Gestão Financeira</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap'); | |
| body { | |
| font-family: 'Poppins', sans-serif; | |
| background-color: #f5f7fa; | |
| } | |
| .gradient-bg { | |
| background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); | |
| } | |
| .card-hover:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 10px 20px rgba(0,0,0,0.1); | |
| } | |
| .tab-active { | |
| border-bottom: 3px solid #667eea; | |
| color: #667eea; | |
| font-weight: 500; | |
| } | |
| .transaction-income { | |
| border-left: 4px solid #10b981; | |
| } | |
| .transaction-expense { | |
| border-left: 4px solid #ef4444; | |
| } | |
| .animate-bounce { | |
| animation: bounce 2s infinite; | |
| } | |
| @keyframes bounce { | |
| 0%, 100% { | |
| transform: translateY(-5px); | |
| } | |
| 50% { | |
| transform: translateY(5px); | |
| } | |
| } | |
| .modal { | |
| transition: opacity 0.3s ease, transform 0.3s ease; | |
| } | |
| .modal-enter { | |
| opacity: 0; | |
| transform: translateY(-20px); | |
| } | |
| .modal-enter-active { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| </style> | |
| </head> | |
| <body class="min-h-screen text-gray-800"> | |
| <div class="container mx-auto px-4 pb-20 max-w-md"> | |
| <!-- Header --> | |
| <header class="gradient-bg text-white rounded-b-3xl px-6 py-8 shadow-lg"> | |
| <div class="flex justify-between items-center mb-6"> | |
| <div> | |
| <p class="text-sm opacity-80">Bem-vindo de volta,</p> | |
| <h1 class="text-2xl font-bold">Usuário</h1> | |
| </div> | |
| <div class="w-12 h-12 rounded-full bg-white text-purple-600 flex items-center justify-center shadow-md"> | |
| <i class="fas fa-user text-xl"></i> | |
| </div> | |
| </div> | |
| <div class="bg-white bg-opacity-20 backdrop-filter backdrop-blur-sm rounded-2xl p-4 shadow"> | |
| <p class="text-sm mb-1">Saldo atual</p> | |
| <h2 class="text-2xl font-bold mb-2">R$ 5.245,90</h2> | |
| <div class="flex justify-between text-xs"> | |
| <div> | |
| <p class="opacity-80">Receitas</p> | |
| <p class="font-medium">R$ 7.200,00</p> | |
| </div> | |
| <div> | |
| <p class="opacity-80">Despesas</p> | |
| <p class="font-medium">R$ 1.954,10</p> | |
| </div> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Quick Actions --> | |
| <div class="flex justify-between my-6 px-2"> | |
| <button onclick="openModal('incomeModal')" class="flex flex-col items-center justify-center w-16 h-16 bg-green-100 text-green-600 rounded-2xl shadow-sm"> | |
| <i class="fas fa-plus-circle text-xl mb-1"></i> | |
| <span class="text-xs">Receita</span> | |
| </button> | |
| <button onclick="openModal('expenseModal')" class="flex flex-col items-center justify-center w-16 h-16 bg-red-100 text-red-600 rounded-2xl shadow-sm"> | |
| <i class="fas fa-minus-circle text-xl mb-1"></i> | |
| <span class="text-xs">Despesa</span> | |
| </button> | |
| <button onclick="openModal('transferModal')" class="flex flex-col items-center justify-center w-16 h-16 bg-blue-100 text-blue-600 rounded-2xl shadow-sm"> | |
| <i class="fas fa-exchange-alt text-xl mb-1"></i> | |
| <span class="text-xs">Transferir</span> | |
| </button> | |
| <button onclick="openModal('categoryModal')" class="flex flex-col items-center justify-center w-16 h-16 bg-purple-100 text-purple-600 rounded-2xl shadow-sm"> | |
| <i class="fas fa-tags text-xl mb-1"></i> | |
| <span class="text-xs">Categorias</span> | |
| </button> | |
| </div> | |
| <!-- Tabs --> | |
| <div class="flex border-b mb-4"> | |
| <button id="transactionsTab" class="flex-1 py-3 text-center tab-active" onclick="switchTab('transactions')"> | |
| Transações | |
| </button> | |
| <button id="accountsTab" class="flex-1 py-3 text-center text-gray-500" onclick="switchTab('accounts')"> | |
| Contas | |
| </button> | |
| <button id="cardsTab" class="flex-1 py-3 text-center text-gray-500" onclick="switchTab('cards')"> | |
| Cartões | |
| </button> | |
| </div> | |
| <!-- Transactions Content --> | |
| <div id="transactionsContent" class="tab-content"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h3 class="font-medium">Histórico recente</h3> | |
| <button class="text-sm text-purple-600">Ver todos</button> | |
| </div> | |
| <div class="space-y-3"> | |
| <div class="transaction-income bg-white p-4 rounded-lg shadow-sm flex justify-between items-center"> | |
| <div class="flex items-center"> | |
| <div class="w-10 h-10 rounded-full bg-green-100 text-green-600 flex items-center justify-center mr-3"> | |
| <i class="fas fa-shopping-bag"></i> | |
| </div> | |
| <div> | |
| <p class="font-medium">Salário</p> | |
| <p class="text-xs text-gray-500">15/06/2023</p> | |
| </div> | |
| </div> | |
| <div class="text-right"> | |
| <p class="font-medium text-green-600">+ R$ 3.500,00</p> | |
| <p class="text-xs text-gray-500">Conta Corrente</p> | |
| </div> | |
| </div> | |
| <div class="transaction-expense bg-white p-4 rounded-lg shadow-sm flex justify-between items-center"> | |
| <div class="flex items-center"> | |
| <div class="w-10 h-10 rounded-full bg-red-100 text-red-600 flex items-center justify-center mr-3"> | |
| <i class="fas fa-utensils"></i> | |
| </div> | |
| <div> | |
| <p class="font-medium">Restaurante</p> | |
| <p class="text-xs text-gray-500">14/06/2023</p> | |
| </div> | |
| </div> | |
| <div class="text-right"> | |
| <p class="font-medium text-red-600">- R$ 85,90</p> | |
| <p class="text-xs text-gray-500">Cartão Crédito</p> | |
| </div> | |
| </div> | |
| <div class="transaction-income bg-white p-4 rounded-lg shadow-sm flex justify-between items-center"> | |
| <div class="flex items-center"> | |
| <div class="w-10 h-10 rounded-full bg-green-100 text-green-600 flex items-center justify-center mr-3"> | |
| <i class="fas fa-gift"></i> | |
| </div> | |
| <div> | |
| <p class="font-medium">Presente</p> | |
| <p class="text-xs text-gray-500">12/06/2023</p> | |
| </div> | |
| </div> | |
| <div class="text-right"> | |
| <p class="font-medium text-green-600">+ R$ 200,00</p> | |
| <p class="text-xs text-gray-500">Pix</p> | |
| </div> | |
| </div> | |
| <div class="transaction-expense bg-white p-4 rounded-lg shadow-sm flex justify-between items-center"> | |
| <div class="flex items-center"> | |
| <div class="w-10 h-10 rounded-full bg-red-100 text-red-600 flex items-center justify-center mr-3"> | |
| <i class="fas fa-bolt"></i> | |
| </div> | |
| <div> | |
| <p class="font-medium">Energia</p> | |
| <p class="text-xs text-gray-500">10/06/2023</p> | |
| </div> | |
| </div> | |
| <div class="text-right"> | |
| <p class="font-medium text-red-600">- R$ 150,30</p> | |
| <p class="text-xs text-gray-500">Débito Automático</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-6"> | |
| <h3 class="font-medium mb-3">Resumo por categoria</h3> | |
| <div class="bg-white rounded-lg shadow-sm p-4"> | |
| <div class="flex items-center justify-between mb-3"> | |
| <div class="flex items-center"> | |
| <div class="w-8 h-8 rounded-full bg-blue-100 text-blue-600 flex items-center justify-center mr-2"> | |
| <i class="fas fa-home text-sm"></i> | |
| </div> | |
| <span>Casa</span> | |
| </div> | |
| <div class="text-right"> | |
| <p class="text-sm font-medium text-red-600">- R$ 450,00</p> | |
| <p class="text-xs text-gray-500">30% das despesas</p> | |
| </div> | |
| </div> | |
| <div class="flex items-center justify-between mb-3"> | |
| <div class="flex items-center"> | |
| <div class="w-8 h-8 rounded-full bg-purple-100 text-purple-600 flex items-center justify-center mr-2"> | |
| <i class="fas fa-utensils text-sm"></i> | |
| </div> | |
| <span>Alimentação</span> | |
| </div> | |
| <div class="text-right"> | |
| <p class="text-sm font-medium text-red-600">- R$ 320,50</p> | |
| <p class="text-xs text-gray-500">21% das despesas</p> | |
| </div> | |
| </div> | |
| <div class="flex items-center justify-between"> | |
| <div class="flex items-center"> | |
| <div class="w-8 h-8 rounded-full bg-yellow-100 text-yellow-600 flex items-center justify-center mr-2"> | |
| <i class="fas fa-car text-sm"></i> | |
| </div> | |
| <span>Transporte</span> | |
| </div> | |
| <div class="text-right"> | |
| <p class="text-sm font-medium text-red-600">- R$ 280,00</p> | |
| <p class="text-xs text-gray-500">19% das despesas</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Accounts Content --> | |
| <div id="accountsContent" class="tab-content hidden"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h3 class="font-medium">Minhas contas</h3> | |
| <button onclick="openModal('accountModal')" class="text-sm text-purple-600 flex items-center"> | |
| <i class="fas fa-plus mr-1"></i> Adicionar | |
| </button> | |
| </div> | |
| <div class="space-y-3"> | |
| <div class="bg-white p-4 rounded-lg shadow-sm"> | |
| <div class="flex justify-between items-center mb-2"> | |
| <div class="flex items-center"> | |
| <div class="w-10 h-10 rounded-full bg-blue-100 text-blue-600 flex items-center justify-center mr-3"> | |
| <i class="fas fa-university"></i> | |
| </div> | |
| <div> | |
| <p class="font-medium">Conta Corrente</p> | |
| <p class="text-xs text-gray-500">Banco XPTO</p> | |
| </div> | |
| </div> | |
| <div class="text-right"> | |
| <p class="font-medium">R$ 3.245,90</p> | |
| <p class="text-xs text-gray-500">Saldo atual</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-white p-4 rounded-lg shadow-sm"> | |
| <div class="flex justify-between items-center mb-2"> | |
| <div class="flex items-center"> | |
| <div class="w-10 h-10 rounded-full bg-green-100 text-green-600 flex items-center justify-center mr-3"> | |
| <i class="fas fa-piggy-bank"></i> | |
| </div> | |
| <div> | |
| <p class="font-medium">Poupança</p> | |
| <p class="text-xs text-gray-500">Banco XPTO</p> | |
| </div> | |
| </div> | |
| <div class="text-right"> | |
| <p class="font-medium">R$ 2.000,00</p> | |
| <p class="text-xs text-gray-500">Saldo atual</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-white p-4 rounded-lg shadow-sm"> | |
| <div class="flex justify-between items-center mb-2"> | |
| <div class="flex items-center"> | |
| <div class="w-10 h-10 rounded-full bg-yellow-100 text-yellow-600 flex items-center justify-center mr-3"> | |
| <i class="fas fa-wallet"></i> | |
| </div> | |
| <div> | |
| <p class="font-medium">Carteira</p> | |
| <p class="text-xs text-gray-500">Dinheiro físico</p> | |
| </div> | |
| </div> | |
| <div class="text-right"> | |
| <p class="font-medium">R$ 150,00</p> | |
| <p class="text-xs text-gray-500">Saldo atual</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-6"> | |
| <h3 class="font-medium mb-3">Resumo de contas</h3> | |
| <div class="bg-white rounded-lg shadow-sm p-4"> | |
| <div class="flex justify-between mb-3"> | |
| <p class="text-sm">Total disponível</p> | |
| <p class="text-sm font-medium">R$ 5.395,90</p> | |
| </div> | |
| <div class="flex justify-between mb-3"> | |
| <p class="text-sm">Contas a pagar</p> | |
| <p class="text-sm font-medium text-red-600">- R$ 1.200,00</p> | |
| </div> | |
| <div class="flex justify-between"> | |
| <p class="text-sm">Contas a receber</p> | |
| <p class="text-sm font-medium text-green-600">+ R$ 500,00</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Cards Content --> | |
| <div id="cardsContent" class="tab-content hidden"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h3 class="font-medium">Meus cartões</h3> | |
| <button onclick="openModal('cardModal')" class="text-sm text-purple-600 flex items-center"> | |
| <i class="fas fa-plus mr-1"></i> Adicionar | |
| </button> | |
| </div> | |
| <div class="space-y-3"> | |
| <div class="gradient-bg text-white p-5 rounded-xl shadow-lg"> | |
| <div class="flex justify-between items-start mb-8"> | |
| <div> | |
| <p class="text-xs opacity-80">Banco XPTO</p> | |
| <p class="font-medium">Cartão Platinum</p> | |
| </div> | |
| <div class="w-10 h-6 rounded bg-white bg-opacity-20 flex items-center justify-center"> | |
| <i class="fab fa-cc-visa"></i> | |
| </div> | |
| </div> | |
| <div class="mb-6"> | |
| <p class="text-sm opacity-80 mb-1">Número do cartão</p> | |
| <p class="text-lg tracking-widest">•••• •••• •••• 4679</p> | |
| </div> | |
| <div class="flex justify-between"> | |
| <div> | |
| <p class="text-xs opacity-80">Titular</p> | |
| <p class="text-sm">USUÁRIO F</p> | |
| </div> | |
| <div> | |
| <p class="text-xs opacity-80">Válido até</p> | |
| <p class="text-sm">09/25</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-gray-800 text-white p-5 rounded-xl shadow-lg"> | |
| <div class="flex justify-between items-start mb-8"> | |
| <div> | |
| <p class="text-xs opacity-80">Banco ABC</p> | |
| <p class="font-medium">Cartão Black</p> | |
| </div> | |
| <div class="w-10 h-6 rounded bg-white bg-opacity-20 flex items-center justify-center"> | |
| <i class="fab fa-cc-mastercard"></i> | |
| </div> | |
| </div> | |
| <div class="mb-6"> | |
| <p class="text-sm opacity-80 mb-1">Número do cartão</p> | |
| <p class="text-lg tracking-widest">•••• •••• •••• 9821</p> | |
| </div> | |
| <div class="flex justify-between"> | |
| <div> | |
| <p class="text-xs opacity-80">Titular</p> | |
| <p class="text-sm">USUÁRIO F</p> | |
| </div> | |
| <div> | |
| <p class="text-xs opacity-80">Válido até</p> | |
| <p class="text-sm">12/24</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-6"> | |
| <h3 class="font-medium mb-3">Fatura atual</h3> | |
| <div class="bg-white rounded-lg shadow-sm p-4"> | |
| <div class="flex justify-between mb-3"> | |
| <p class="text-sm">Fatura fechada</p> | |
| <p class="text-sm font-medium text-red-600">R$ 1.245,60</p> | |
| </div> | |
| <div class="flex justify-between mb-3"> | |
| <p class="text-sm">Limite disponível</p> | |
| <p class="text-sm font-medium">R$ 3.754,40</p> | |
| </div> | |
| <div class="flex justify-between"> | |
| <p class="text-sm">Vencimento</p> | |
| <p class="text-sm font-medium">15/07/2023</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Bottom Navigation --> | |
| <div class="fixed bottom-0 left-0 right-0 bg-white shadow-lg rounded-t-3xl px-6 py-3 flex justify-around max-w-md mx-auto"> | |
| <button class="flex flex-col items-center text-purple-600"> | |
| <i class="fas fa-home text-lg mb-1"></i> | |
| <span class="text-xs">Início</span> | |
| </button> | |
| <button class="flex flex-col items-center text-gray-500"> | |
| <i class="fas fa-chart-pie text-lg mb-1"></i> | |
| <span class="text-xs">Relatórios</span> | |
| </button> | |
| <button class="flex flex-col items-center text-gray-500"> | |
| <i class="fas fa-bell text-lg mb-1"></i> | |
| <span class="text-xs">Alertas</span> | |
| </button> | |
| <button class="flex flex-col items-center text-gray-500"> | |
| <i class="fas fa-cog text-lg mb-1"></i> | |
| <span class="text-xs">Config</span> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Modals --> | |
| <!-- Income Modal --> | |
| <div id="incomeModal" class="modal fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center px-4 z-50 hidden"> | |
| <div class="bg-white rounded-2xl w-full max-w-md p-6 animate-bounce"> | |
| <div class="flex justify-between items-center mb-6"> | |
| <h3 class="text-lg font-medium">Nova receita</h3> | |
| <button onclick="closeModal('incomeModal')" class="text-gray-500"> | |
| <i class="fas fa-times"></i> | |
| </button> | |
| </div> | |
| <form> | |
| <div class="mb-4"> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Descrição</label> | |
| <input type="text" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-600 focus:border-transparent"> | |
| </div> | |
| <div class="mb-4"> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Valor</label> | |
| <div class="relative"> | |
| <span class="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-500">R$</span> | |
| <input type="number" step="0.01" class="w-full pl-8 px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-600 focus:border-transparent"> | |
| </div> | |
| </div> | |
| <div class="mb-4"> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Data</label> | |
| <input type="date" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-600 focus:border-transparent"> | |
| </div> | |
| <div class="mb-4"> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Categoria</label> | |
| <select class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-600 focus:border-transparent"> | |
| <option>Salário</option> | |
| <option>Investimentos</option> | |
| <option>Presente</option> | |
| <option>Freelance</option> | |
| <option>Outros</option> | |
| </select> | |
| </div> | |
| <div class="mb-6"> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Conta</label> | |
| <select class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-600 focus:border-transparent"> | |
| <option>Conta Corrente</option> | |
| <option>Poupança</option> | |
| <option>Carteira</option> | |
| </select> | |
| </div> | |
| <button type="button" class="w-full bg-green-600 text-white py-3 rounded-lg font-medium hover:bg-green-700 transition"> | |
| Adicionar receita | |
| </button> | |
| </form> | |
| </div> | |
| </div> | |
| <!-- Expense Modal --> | |
| <div id="expenseModal" class="modal fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center px-4 z-50 hidden"> | |
| <div class="bg-white rounded-2xl w-full max-w-md p-6 animate-bounce"> | |
| <div class="flex justify-between items-center mb-6"> | |
| <h3 class="text-lg font-medium">Nova despesa</h3> | |
| <button onclick="closeModal('expenseModal')" class="text-gray-500"> | |
| <i class="fas fa-times"></i> | |
| </button> | |
| </div> | |
| <form> | |
| <div class="mb-4"> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Descrição</label> | |
| <input type="text" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-600 focus:border-transparent"> | |
| </div> | |
| <div class="mb-4"> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Valor</label> | |
| <div class="relative"> | |
| <span class="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-500">R$</span> | |
| <input type="number" step="0.01" class="w-full pl-8 px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-600 focus:border-transparent"> | |
| </div> | |
| </div> | |
| <div class="mb-4"> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Data</label> | |
| <input type="date" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-600 focus:border-transparent"> | |
| </div> | |
| <div class="mb-4"> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Categoria</label> | |
| <select class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-600 focus:border-transparent"> | |
| <option>Alimentação</option> | |
| <option>Transporte</option> | |
| <option>Casa</option> | |
| <option>Lazer</option> | |
| <option>Saúde</option> | |
| <option>Outros</option> | |
| </select> | |
| </div> | |
| <div class="mb-6"> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Forma de pagamento</label> | |
| <select class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-600 focus:border-transparent"> | |
| <option>Cartão de Crédito</option> | |
| <option>Cartão de Débito</option> | |
| <option>Dinheiro</option> | |
| <option>Pix</option> | |
| <option>Débito Automático</option> | |
| </select> | |
| </div> | |
| <button type="button" class="w-full bg-red-600 text-white py-3 rounded-lg font-medium hover:bg-red-700 transition"> | |
| Adicionar despesa | |
| </button> | |
| </form> | |
| </div> | |
| </div> | |
| <!-- Transfer Modal --> | |
| <div id="transferModal" class="modal fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center px-4 z-50 hidden"> | |
| <div class="bg-white rounded-2xl w-full max-w-md p-6 animate-bounce"> | |
| <div class="flex justify-between items-center mb-6"> | |
| <h3 class="text-lg font-medium">Transferência</h3> | |
| <button onclick="closeModal('transferModal')" class="text-gray-500"> | |
| <i class="fas fa-times"></i> | |
| </button> | |
| </div> | |
| <form> | |
| <div class="mb-4"> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Valor</label> | |
| <div class="relative"> | |
| <span class="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-500">R$</span> | |
| <input type="number" step="0.01" class="w-full pl-8 px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-600 focus:border-transparent"> | |
| </div> | |
| </div> | |
| <div class="mb-4"> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Data</label> | |
| <input type="date" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-600 focus:border-transparent"> | |
| </div> | |
| <div class="mb-4"> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Origem</label> | |
| <select class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-600 focus:border-transparent"> | |
| <option>Conta Corrente</option> | |
| <option>Poupança</option> | |
| <option>Carteira</option> | |
| </select> | |
| </div> | |
| <div class="mb-6"> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Destino</label> | |
| <select class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-600 focus:border-transparent"> | |
| <option>Poupança</option> | |
| <option>Conta Corrente</option> | |
| <option>Carteira</option> | |
| </select> | |
| </div> | |
| <button type="button" class="w-full bg-blue-600 text-white py-3 rounded-lg font-medium hover:bg-blue-700 transition"> | |
| Transferir | |
| </button> | |
| </form> | |
| </div> | |
| </div> | |
| <!-- Category Modal --> | |
| <div id="categoryModal" class="modal fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center px-4 z-50 hidden"> | |
| <div class="bg-white rounded-2xl w-full max-w-md p-6 animate-bounce"> | |
| <div class="flex justify-between items-center mb-6"> | |
| <h3 class="text-lg font-medium">Categorias</h3> | |
| <button onclick="closeModal('categoryModal')" class="text-gray-500"> | |
| <i class="fas fa-times"></i> | |
| </button> | |
| </div> | |
| <div class="mb-6"> | |
| <h4 class="font-medium mb-3">Receitas</h4> | |
| <div class="grid grid-cols-3 gap-3"> | |
| <div class="bg-green-50 text-green-700 p-3 rounded-lg text-center"> | |
| <i class="fas fa-money-bill-wave text-xl mb-1"></i> | |
| <p class="text-xs">Salário</p> | |
| </div> | |
| <div class="bg-green-50 text-green-700 p-3 rounded-lg text-center"> | |
| <i class="fas fa-chart-line text-xl mb-1"></i> | |
| <p class="text-xs">Investimentos</p> | |
| </div> | |
| <div class="bg-green-50 text-green-700 p-3 rounded-lg text-center"> | |
| <i class="fas fa-gift text-xl mb-1"></i> | |
| <p class="text-xs">Presente</p> | |
| </div> | |
| <div class="bg-green-50 text-green-700 p-3 rounded-lg text-center"> | |
| <i class="fas fa-laptop-code text-xl mb-1"></i> | |
| <p class="text-xs">Freelance</p> | |
| </div> | |
| <div class="bg-green-50 text-green-700 p-3 rounded-lg text-center"> | |
| <i class="fas fa-question text-xl mb-1"></i> | |
| <p class="text-xs">Outros</p> | |
| </div> | |
| <button class="bg-green-50 text-green-700 p-3 rounded-lg text-center border-2 border-dashed border-green-300"> | |
| <i class="fas fa-plus text-xl mb-1"></i> | |
| <p class="text-xs">Nova</p> | |
| </button> | |
| </div> | |
| </div> | |
| <div> | |
| <h4 class="font-medium mb-3">Despesas</h4> | |
| <div class="grid grid-cols-3 gap-3"> | |
| <div class="bg-red-50 text-red-700 p-3 rounded-lg text-center"> | |
| <i class="fas fa-utensils text-xl mb-1"></i> | |
| <p class="text-xs">Alimentação</p> | |
| </div> | |
| <div class="bg-red-50 text-red-700 p-3 rounded-lg text-center"> | |
| <i class="fas fa-car text-xl mb-1"></i> | |
| <p class="text-xs">Transporte</p> | |
| </div> | |
| <div class="bg-red-50 text-red-700 p-3 rounded-lg text-center"> | |
| <i class="fas fa-home text-xl mb-1"></i> | |
| <p class="text-xs">Casa</p> | |
| </div> | |
| <div class="bg-red-50 text-red-700 p-3 rounded-lg text-center"> | |
| <i class="fas fa-gamepad text-xl mb-1"></i> | |
| <p class="text-xs">Lazer</p> | |
| </div> | |
| <div class="bg-red-50 text-red-700 p-3 rounded-lg text-center"> | |
| <i class="fas fa-heartbeat text-xl mb-1"></i> | |
| <p class="text-xs">Saúde</p> | |
| </div> | |
| <div class="bg-red-50 text-red-700 p-3 rounded-lg text-center"> | |
| <i class="fas fa-shopping-bag text-xl mb-1"></i> | |
| <p class="text-xs">Compras</p> | |
| </div> | |
| <div class="bg-red-50 text-red-700 p-3 rounded-lg text-center"> | |
| <i class="fas fa-bolt text-xl mb-1"></i> | |
| <p class="text-xs">Contas</p> | |
| </div> | |
| <div class="bg-red-50 text-red-700 p-3 rounded-lg text-center"> | |
| <i class="fas fa-graduation-cap text-xl mb-1"></i> | |
| <p class="text-xs">Educação</p> | |
| </div> | |
| <div class="bg-red-50 text-red-700 p-3 rounded-lg text-center"> | |
| <i class="fas fa-question text-xl mb-1"></i> | |
| <p class="text-xs">Outros</p> | |
| </div> | |
| <button class="bg-red-50 text-red-700 p-3 rounded-lg text-center border-2 border-dashed border-red-300"> | |
| <i class="fas fa-plus text-xl mb-1"></i> | |
| <p class="text-xs">Nova</p> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Account Modal --> | |
| <div id="accountModal" class="modal fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center px-4 z-50 hidden"> | |
| <div class="bg-white rounded-2xl w-full max-w-md p-6 animate-bounce"> | |
| <div class="flex justify-between items-center mb-6"> | |
| <h3 class="text-lg font-medium">Nova conta</h3> | |
| <button onclick="closeModal('accountModal')" class="text-gray-500"> | |
| <i class="fas fa-times"></i> | |
| </button> | |
| </div> | |
| <form> | |
| <div class="mb-4"> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Nome da conta</label> | |
| <input type="text" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-600 focus:border-transparent"> | |
| </div> | |
| <div class="mb-4"> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Tipo de conta</label> | |
| <select class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-600 focus:border-transparent"> | |
| <option>Conta Corrente</option> | |
| <option>Poupança</option> | |
| <option>Carteira</option> | |
| <option>Investimentos</option> | |
| </select> | |
| </div> | |
| <div class="mb-4"> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Instituição</label> | |
| <input type="text" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-600 focus:border-transparent"> | |
| </div> | |
| <div class="mb-6"> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Saldo inicial</label> | |
| <div class="relative"> | |
| <span class="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-500">R$</span> | |
| <input type="number" step="0.01" class="w-full pl-8 px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-600 focus:border-transparent"> | |
| </div> | |
| </div> | |
| <button type="button" class="w-full bg-purple-600 text-white py-3 rounded-lg font-medium hover:bg-purple-700 transition"> | |
| Adicionar conta | |
| </button> | |
| </form> | |
| </div> | |
| </div> | |
| <!-- Card Modal --> | |
| <div id="cardModal" class="modal fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center px-4 z-50 hidden"> | |
| <div class="bg-white rounded-2xl w-full max-w-md p-6 animate-bounce"> | |
| <div class="flex justify-between items-center mb-6"> | |
| <h3 class="text-lg font-medium">Novo cartão</h3> | |
| <button onclick="closeModal('cardModal')" class="text-gray-500"> | |
| <i class="fas fa-times"></i> | |
| </button> | |
| </div> | |
| <form> | |
| <div class="mb-4"> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Bandeira</label> | |
| <select class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-600 focus:border-transparent"> | |
| <option>Visa</option> | |
| <option>Mastercard</option> | |
| <option>American Express</option> | |
| <option>Elo</option> | |
| <option>Hipercard</option> | |
| </select> | |
| </div> | |
| <div class="mb-4"> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Nome no cartão</label> | |
| <input type="text" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-600 focus:border-transparent"> | |
| </div> | |
| <div class="mb-4"> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Últimos 4 dígitos</label> | |
| <input type="text" maxlength="4" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-600 focus:border-transparent"> | |
| </div> | |
| <div class="mb-4"> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Vencimento</label> | |
| <input type="month" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-600 focus:border-transparent"> | |
| </div> | |
| <div class="mb-6"> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Limite</label> | |
| <div class="relative"> | |
| <span class="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-500">R$</span> | |
| <input type="number" step="0.01" class="w-full pl-8 px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-600 focus:border-transparent"> | |
| </div> | |
| </div> | |
| <button type="button" class="w-full bg-indigo-600 text-white py-3 rounded-lg font-medium hover:bg-indigo-700 transition"> | |
| Adicionar cartão | |
| </button> | |
| </form> | |
| </div> | |
| </div> | |
| <script> | |
| // Tab switching | |
| function switchTab(tabName) { | |
| // Hide all tab contents | |
| document.querySelectorAll('.tab-content').forEach(content => { | |
| content.classList.add('hidden'); | |
| }); | |
| // Remove active class from all tabs | |
| document.querySelectorAll('[id$="Tab"]').forEach(tab => { | |
| tab.classList.remove('tab-active'); | |
| tab.classList.add('text-gray-500'); | |
| }); | |
| // Show selected tab content and mark tab as active | |
| document.getElementById(`${tabName}Content`).classList.remove('hidden'); | |
| document.getElementById(`${tabName}Tab`).classList.add('tab-active'); | |
| document.getElementById(`${tabName}Tab`).classList.remove('text-gray-500'); | |
| } | |
| // Modal handling | |
| function openModal(modalId) { | |
| document.getElementById(modalId).classList.remove('hidden'); | |
| document.body.style.overflow = 'hidden'; | |
| } | |
| function closeModal(modalId) { | |
| document.getElementById(modalId).classList.add('hidden'); | |
| document.body.style.overflow = 'auto'; | |
| } | |
| // Close modal when clicking outside | |
| window.onclick = function(event) { | |
| if (event.target.classList.contains('modal')) { | |
| event.target.classList.add('hidden'); | |
| document.body.style.overflow = 'auto'; | |
| } | |
| } | |
| // Initialize with transactions tab active | |
| document.addEventListener('DOMContentLoaded', function() { | |
| switchTab('transactions'); | |
| }); | |
| </script> | |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=rrickerr/moneymanager" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |