Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>ExpenseSync - Track Shared Expenses</title> | |
| <link rel="icon" type="image/x-icon" href="/static/favicon.ico"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <script> | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| colors: { | |
| primary: '#3B82F6', | |
| secondary: '#10B981', | |
| accent: '#8B5CF6', | |
| dark: '#1F2937', | |
| light: '#F9FAFB' | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap'); | |
| body { | |
| font-family: 'Inter', sans-serif; | |
| } | |
| .gradient-bg { | |
| background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); | |
| } | |
| .glass-effect { | |
| background: rgba(255, 255, 255, 0.1); | |
| backdrop-filter: blur(10px); | |
| border: 1px solid rgba(255, 255, 255, 0.2); | |
| } | |
| .expense-card { | |
| transition: all 0.3s ease; | |
| } | |
| .expense-card: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); | |
| } | |
| .chart-container { | |
| position: relative; | |
| height: 300px; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50"> | |
| <!-- Navigation --> | |
| <nav class="bg-white shadow-sm border-b border-gray-200"> | |
| <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="dollar-sign" class="h-8 w-8 text-primary"></i> | |
| <span class="ml-2 text-xl font-bold text-gray-900">ExpenseSync</span> | |
| </div> | |
| <div class="hidden sm:ml-6 sm:flex sm:space-x-8"> | |
| <a href="index.html" class="border-primary text-gray-900 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium"> | |
| Dashboard | |
| </a> | |
| <a href="#" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium"> | |
| Expenses | |
| </a> | |
| <a href="#" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium"> | |
| Reports | |
| </a> | |
| <a href="settings.html" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium"> | |
| Settings | |
| </a> | |
| </div> | |
| </div> | |
| <div class="flex items-center"> | |
| <button class="bg-primary text-white px-4 py-2 rounded-md text-sm font-medium hover:bg-blue-600 transition duration-200"> | |
| <i data-feather="plus" class="w-4 h-4 inline mr-1"></i> | |
| Add Expense | |
| </button> | |
| <div class="ml-3 relative"> | |
| <div> | |
| <button class="bg-gray-800 flex text-sm rounded-full focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 focus:ring-white"> | |
| <img class="h-8 w-8 rounded-full" src="http://static.photos/people/200x200/1" alt="Profile"> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Main Content --> | |
| <div class="max-w-7xl mx-auto py-6 sm:px-6 lg:px-8"> | |
| <!-- Header --> | |
| <div class="px-4 py-6 sm:px-0"> | |
| <div class="flex flex-col md:flex-row md:items-center md:justify-between"> | |
| <div> | |
| <h1 class="text-3xl font-bold text-gray-900">Expense Dashboard</h1> | |
| <p class="mt-2 text-gray-600">Track and manage your shared expenses with your partner</p> | |
| </div> | |
| <div class="mt-4 md:mt-0"> | |
| <div class="flex space-x-3"> | |
| <div class="bg-white rounded-lg shadow-sm p-4 border border-gray-200"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0"> | |
| <i data-feather="user" class="h-6 w-6 text-blue-500"></i> | |
| </div> | |
| <div class="ml-4"> | |
| <p class="text-sm font-medium text-gray-500">You owe</p> | |
| <p class="text-lg font-semibold text-gray-900">$42.50</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-lg shadow-sm p-4 border border-gray-200"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0"> | |
| <i data-feather="users" class="h-6 w-6 text-green-500"></i> | |
| </div> | |
| <div class="ml-4"> | |
| <p class="text-sm font-medium text-gray-500">Partner owes</p> | |
| <p class="text-lg font-semibold text-gray-900">$28.75</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Stats and Recent Expenses --> | |
| <div class="mt-8 grid grid-cols-1 gap-6 lg:grid-cols-3"> | |
| <!-- Recent Expenses --> | |
| <div class="lg:col-span-2"> | |
| <div class="bg-white shadow-sm rounded-lg overflow-hidden"> | |
| <div class="px-6 py-4 border-b border-gray-200"> | |
| <h3 class="text-lg font-medium text-gray-900">Recent Expenses</h3> | |
| </div> | |
| <div class="divide-y divide-gray-200"> | |
| <!-- Expense Item --> | |
| <div class="px-6 py-4 expense-card"> | |
| <div class="flex items-center justify-between"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 h-10 w-10 bg-blue-100 rounded-lg flex items-center justify-center"> | |
| <i data-feather="shopping-bag" class="h-5 w-5 text-blue-600"></i> | |
| </div> | |
| <div class="ml-4"> | |
| <p class="text-sm font-medium text-gray-900">Grocery Shopping</p> | |
| <p class="text-sm text-gray-500">Paid by You • For Both</p> | |
| </div> | |
| </div> | |
| <div class="text-right"> | |
| <p class="text-sm font-medium text-gray-900">$85.40</p> | |
| <p class="text-sm text-gray-500">Today</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Expense Item --> | |
| <div class="px-6 py-4 expense-card"> | |
| <div class="flex items-center justify-between"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 h-10 w-10 bg-green-100 rounded-lg flex items-center justify-center"> | |
| <i data-feather="home" class="h-5 w-5 text-green-600"></i> | |
| </div> | |
| <div class="ml-4"> | |
| <p class="text-sm font-medium text-gray-900">Electricity Bill</p> | |
| <p class="text-sm text-gray-500">Paid by Partner • For Both</p> | |
| </div> | |
| </div> | |
| <div class="text-right"> | |
| <p class="text-sm font-medium text-gray-900">$120.00</p> | |
| <p class="text-sm text-gray-500">Yesterday</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Expense Item --> | |
| <div class="px-6 py-4 expense-card"> | |
| <div class="flex items-center justify-between"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 h-10 w-10 bg-purple-100 rounded-lg flex items-center justify-center"> | |
| <i data-feather="coffee" class="h-5 w-5 text-purple-600"></i> | |
| </div> | |
| <div class="ml-4"> | |
| <p class="text-sm font-medium text-gray-900">Coffee</p> | |
| <p class="text-sm text-gray-500">Paid by You • For Yourself</p> | |
| </div> | |
| </div> | |
| <div class="text-right"> | |
| <p class="text-sm font-medium text-gray-900">$4.50</p> | |
| <p class="text-sm text-gray-500">2 days ago</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="px-6 py-4 bg-gray-50 border-t border-gray-200"> | |
| <button class="w-full flex justify-center items-center px-4 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50"> | |
| View All Expenses | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Quick Add Expense & Categories --> | |
| <div class="space-y-6"> | |
| <!-- Quick Add Form --> | |
| <div class="bg-white shadow-sm rounded-lg p-6"> | |
| <h3 class="text-lg font-medium text-gray-900 mb-4">Quick Add Expense</h3> | |
| <form class="space-y-4"> | |
| <div> | |
| <label for="amount" class="block text-sm font-medium text-gray-700">Amount</label> | |
| <input type="number" id="amount" name="amount" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-primary focus:border-primary"> | |
| </div> | |
| <div> | |
| <label for="description" class="block text-sm font-medium text-gray-700">Description</label> | |
| <input type="text" id="description" name="description" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-primary focus:border-primary"> | |
| </div> | |
| <div class="grid grid-cols-2 gap-4"> | |
| <div> | |
| <label for="paidBy" class="block text-sm font-medium text-gray-700">Paid By</label> | |
| <select id="paidBy" name="paidBy" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-primary focus:border-primary"> | |
| <option>You</option> | |
| <option>Partner</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label for="forWhom" class="block text-sm font-medium text-gray-700">For Whom</label> | |
| <select id="forWhom" name="forWhom" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-primary focus:border-primary"> | |
| <option>Both</option> | |
| <option>Yourself</option> | |
| <option>Partner</option> | |
| </select> | |
| </div> | |
| </div> | |
| <button type="submit" class="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-primary hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary"> | |
| Add Expense | |
| </button> | |
| </form> | |
| </div> | |
| <!-- Category Breakdown --> | |
| <div class="bg-white shadow-sm rounded-lg p-6"> | |
| <h3 class="text-lg font-medium text-gray-900 mb-4">Spending by Category</h3> | |
| <div class="space-y-3"> | |
| <div class="flex items-center justify-between"> | |
| <div class="flex items-center"> | |
| <div class="w-3 h-3 rounded-full bg-blue-500 mr-2"></div> | |
| <span class="text-sm text-gray-700">Food & Dining</span> | |
| </div> | |
| <span class="text-sm font-medium text-gray-900">$245.60</span> | |
| </div> | |
| <div class="flex items-center justify-between"> | |
| <div class="flex items-center"> | |
| <div class="w-3 h-3 rounded-full bg-green-500 mr-2"></div> | |
| <span class="text-sm text-gray-700">Utilities</span> | |
| </div> | |
| <span class="text-sm font-medium text-gray-900">$189.30</span> | |
| </div> | |
| <div class="flex items-center justify-between"> | |
| <div class="flex items-center"> | |
| <div class="w-3 h-3 rounded-full bg-purple-500 mr-2"></div> | |
| <span class="text-sm text-gray-700">Entertainment</span> | |
| </div> | |
| <span class="text-sm font-medium text-gray-900">$75.00</span> | |
| </div> | |
| <div class="flex items-center justify-between"> | |
| <div class="flex items-center"> | |
| <div class="w-3 h-3 rounded-full bg-yellow-500 mr-2"></div> | |
| <span class="text-sm text-gray-700">Transportation</span> | |
| </div> | |
| <span class="text-sm font-medium text-gray-900">$42.50</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Add Expense Modal --> | |
| <div id="expenseModal" class="fixed inset-0 overflow-y-auto hidden" aria-labelledby="modal-title" role="dialog" aria-modal="true"> | |
| <div class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0"> | |
| <div class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" aria-hidden="true"></div> | |
| <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">​</span> | |
| <div class="inline-block align-bottom bg-white rounded-lg px-4 pt-5 pb-4 text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full sm:p-6"> | |
| <div> | |
| <div class="mt-3 text-center sm:mt-5"> | |
| <h3 class="text-lg leading-6 font-medium text-gray-900" id="modal-title"> | |
| Add New Expense | |
| </h3> | |
| <div class="mt-6 space-y-4"> | |
| <div class="grid grid-cols-2 gap-4"> | |
| <div> | |
| <label for="modal-date" class="block text-sm font-medium text-gray-700">Date</label> | |
| <input type="date" id="modal-date" name="date" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-primary focus:border-primary"> | |
| </div> | |
| <div> | |
| <label for="modal-amount" class="block text-sm font-medium text-gray-700">Amount</label> | |
| <input type="number" id="modal-amount" name="amount" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-primary focus:border-primary"> | |
| </div> | |
| </div> | |
| <div> | |
| <label for="modal-account" class="block text-sm font-medium text-gray-700">Account</label> | |
| <select id="modal-account" name="account" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-primary focus:border-primary"> | |
| <option>Cash</option> | |
| <option>Credit Card</option> | |
| <option>Debit Card</option> | |
| <option>Bank Transfer</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label for="modal-description" class="block text-sm font-medium text-gray-700">Description</label> | |
| <input type="text" id="modal-description" name="description" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-primary focus:border-primary"> | |
| </div> | |
| <div> | |
| <label for="modal-payment" class="block text-sm font-medium text-gray-700">Payment Mode</label> | |
| <select id="modal-payment" name="payment" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-primary focus:border-primary"> | |
| <option>Online</option> | |
| <option>Cash</option> | |
| <option>Card</option> | |
| <option>UPI</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label for="modal-location" class="block text-sm font-medium text-gray-700">Location</label> | |
| <input type="text" id="modal-location" name="location" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-primary focus:border-primary"> | |
| </div> | |
| <div> | |
| <label for="modal-category" class="block text-sm font-medium text-gray-700">Category</label> | |
| <select id="modal-category" name="category" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-primary focus:border-primary"> | |
| <option>Food & Dining</option> | |
| <option>Utilities</option> | |
| <option>Entertainment</option> | |
| <option>Transportation</option> | |
| <option>Shopping</option> | |
| <option>Healthcare</option> | |
| <option>Other</option> | |
| </select> | |
| </div> | |
| <div class="grid grid-cols-2 gap-4"> | |
| <div> | |
| <label for="modal-paidBy" class="block text-sm font-medium text-gray-700">Paid By</label> | |
| <select id="modal-paidBy" name="paidBy" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-primary focus:border-primary"> | |
| <option>You</option> | |
| <option>Partner</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label for="modal-forWhom" class="block text-sm font-medium text-gray-700">For Whom</label> | |
| <select id="modal-forWhom" name="forWhom" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-primary focus:border-primary"> | |
| <option>Both</option> | |
| <option>Yourself</option> | |
| <option>Partner</option> | |
| </select> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-5 sm:mt-6 sm:grid sm:grid-cols-2 sm:gap-3 sm:grid-flow-row-dense"> | |
| <button type="button" class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-primary text-base font-medium text-white hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary sm:text-sm"> | |
| Add Expense | |
| </button> | |
| <button type="button" class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary sm:mt-0 sm:text-sm"> | |
| Cancel | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| // Initialize Feather Icons | |
| feather.replace(); | |
| // Modal functionality | |
| const modal = document.getElementById('expenseModal'); | |
| const addExpenseBtn = document.querySelector('button.bg-primary'); | |
| const cancelBtn = modal.querySelector('button[type="button"]:nth-child(2)'); | |
| const modalCloseBtn = modal.querySelector('.bg-gray-500'); | |
| addExpenseBtn.addEventListener('click', () => { | |
| modal.classList.remove('hidden'); | |
| }); | |
| // Close modal when clicking cancel or outside | |
| cancelBtn.addEventListener('click', () => { | |
| modal.classList.add('hidden'); | |
| }); | |
| modalCloseBtn.addEventListener('click', () => { | |
| modal.classList.add('hidden'); | |
| }); | |
| modal.addEventListener('click', (e) => { | |
| if (e.target === modal) { | |
| modal.classList.add('hidden'); | |
| } | |
| }); | |
| // Set today's date as default | |
| document.getElementById('modal-date').valueAsDate = new Date(); | |
| // Simple animations for cards | |
| document.addEventListener('DOMContentLoaded', function() { | |
| const cards = document.querySelectorAll('.expense-card'); | |
| cards.forEach((card, index) => { | |
| card.style.opacity = '0'; | |
| card.style.transform = 'translateY(20px)'; | |
| setTimeout(() => { | |
| card.style.transition = 'all 0.5s ease'; | |
| card.style.opacity = '1'; | |
| card.style.transform = 'translateY(0)'; | |
| }, index * 100); | |
| }); | |
| // Set form values | |
| document.getElementById('modal-date').valueAsDate = new Date(); | |
| document.getElementById('modal-amount').value = ''; | |
| document.getElementById('modal-description').value = ''; | |
| }); | |
| </script> | |
| </body> | |
| </html> | |