index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>SimpleBudget - Easy Money Tracker</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      min-height: 100vh;
      padding: 20px;
    }

    .container {
      max-width: 800px;
      margin: 0 auto;
      background: white;
      border-radius: 20px;
      box-shadow: 0 20px 60px rgba(0,0,0,0.3);
      overflow: hidden;
    }

    .header {
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      color: white;
      padding: 30px;
      text-align: center;
    }

    .header h1 {
      font-size: 2.2em;
      margin-bottom: 10px;
    }

    .header p {
      font-size: 1.1em;
      opacity: 0.9;
    }

    .tabs {
      display: flex;
      background: #f0f0f0;
    }

    .tab {
      flex: 1;
      padding: 20px;
      text-align: center;
      cursor: pointer;
      font-size: 1.2em;
      border: none;
      background: #f0f0f0;
      transition: all 0.3s;
    }

    .tab:hover {
      background: #e0e0e0;
    }

    .tab.active {
      background: white;
      font-weight: bold;
      color: #667eea;
    }

    .content {
      padding: 30px;
    }

    .tab-content {
      display: none;
    }

    .tab-content.active {
      display: block;
    }

    .summary {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      gap: 20px;
      margin-bottom: 30px;
    }

    .summary-card {
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      color: white;
      padding: 25px;
      border-radius: 15px;
      text-align: center;
    }

    .summary-card.income {
      background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
    }

    .summary-card.expense {
      background: linear-gradient(135deg, #eb3349 0%, #f45c43 100%);
    }

    .summary-card h3 {
      font-size: 1.1em;
      margin-bottom: 10px;
      opacity: 0.9;
    }

    .summary-card .amount {
      font-size: 2.5em;
      font-weight: bold;
    }

    .form-group {
      margin-bottom: 25px;
    }

    .form-group label {
      display: block;
      margin-bottom: 10px;
      font-size: 1.2em;
      font-weight: 600;
      color: #333;
    }

    .form-group input,
    .form-group select {
      width: 100%;
      padding: 15px;
      font-size: 1.1em;
      border: 2px solid #e0e0e0;
      border-radius: 10px;
      transition: border-color 0.3s;
    }

    .form-group input:focus,
    .form-group select:focus {
      outline: none;
      border-color: #667eea;
    }

    .btn {
      width: 100%;
      padding: 18px;
      font-size: 1.2em;
      font-weight: bold;
      border: none;
      border-radius: 10px;
      cursor: pointer;
      transition: transform 0.2s, box-shadow 0.2s;
      margin-bottom: 15px;
    }

    .btn:hover {
      transform: translateY(-2px);
      box-shadow: 0 5px 20px rgba(0,0,0,0.2);
    }

    .btn-primary {
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      color: white;
    }

    .btn-success {
      background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
      color: white;
    }

    .btn-danger {
      background: linear-gradient(135deg, #eb3349 0%, #f45c43 100%);
      color: white;
    }

    .btn-secondary {
      background: #6c757d;
      color: white;
    }

    .transactions {
      margin-top: 30px;
    }

    .transaction-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 20px;
      margin-bottom: 15px;
      background: #f8f9fa;
      border-radius: 10px;
      border-left: 5px solid #667eea;
    }

    .transaction-item.income {
      border-left-color: #38ef7d;
    }

    .transaction-item.expense {
      border-left-color: #f45c43;
    }

    .transaction-item .details {
      flex: 1;
    }

    .transaction-item .description {
      font-size: 1.2em;
      font-weight: 600;
      color: #333;
      margin-bottom: 5px;
    }

    .transaction-item .meta {
      font-size: 0.95em;
      color: #666;
    }

    .transaction-item .amount {
      font-size: 1.5em;
      font-weight: bold;
      margin: 0 20px;
    }

    .transaction-item .amount.income {
      color: #38ef7d;
    }

    .transaction-item .amount.expense {
      color: #f45c43;
    }

    .transaction-item .delete-btn {
      background: #f45c43;
      color: white;
      border: none;
      padding: 10px 20px;
      border-radius: 8px;
      cursor: pointer;
      font-size: 1em;
    }

    .transaction-item .delete-btn:hover {
      background: #d63d2e;
    }

    .empty-state {
      text-align: center;
      padding: 50px 20px;
      color: #999;
      font-size: 1.2em;
    }

    .actions {
      display: flex;
      gap: 15px;
      margin-top: 30px;
    }

    .help {
      background: #e3f2fd;
      padding: 20px;
      border-radius: 10px;
      margin-top: 30px;
      font-size: 1.1em;
      line-height: 1.6;
    }

    .help h2 {
      color: #1565c0;
      margin-bottom: 15px;
    }

    .help ul {
      margin-left: 30px;
      margin-top: 10px;
    }

    .help li {
      margin-bottom: 10px;
    }

    .categories-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
      gap: 10px;
      margin-top: 15px;
    }

    .category-btn {
      padding: 15px 10px;
      border: 2px solid #e0e0e0;
      border-radius: 10px;
      background: white;
      cursor: pointer;
      font-size: 1em;
      transition: all 0.3s;
    }

    .category-btn:hover {
      border-color: #667eea;
      background: #f0f4ff;
    }

    .category-btn.selected {
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      color: white;
      border-color: #667eea;
    }

    .message {
      padding: 15px 20px;
      border-radius: 10px;
      margin-bottom: 20px;
      font-size: 1.1em;
      display: none;
    }

    .message.success {
      background: #d4edda;
      color: #155724;
      display: block;
    }

    .message.error {
      background: #f8d7da;
      color: #721c24;
      display: block;
    }

    @media (max-width: 600px) {
      .header h1 {
        font-size: 1.8em;
      }

      .summary-card .amount {
        font-size: 2em;
      }

      .transaction-item {
        flex-direction: column;
        text-align: center;
        gap: 10px;
      }

      .transaction-item .delete-btn {
        width: 100%;
      }

      .actions {
        flex-direction: column;
      }
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="header">
      <h1>💰 SimpleBudget</h1>
      <p>Track your money simply and privately</p>
    </div>

    <div class="tabs">
      <button class="tab active" onclick="showTab('dashboard')">Dashboard</button>
      <button class="tab" onclick="showTab('add')">Add Money</button>
      <button class="tab" onclick="showTab('help')">Help</button>
    </div>

    <div class="content">
      <div id="message" class="message"></div>

      <!-- Dashboard Tab -->
      <div id="dashboard" class="tab-content active">
        <div class="summary">
          <div class="summary-card income">
            <h3>📥 Income</h3>
            <div class="amount" id="totalIncome">$0.00</div>
          </div>
          <div class="summary-card expense">
            <h3>📤 Expenses</h3>
            <div class="amount" id="totalExpenses">$0.00</div>
          </div>
          <div class="summary-card">
            <h3>💵 Balance</h3>
            <div class="amount" id="balance">$0.00</div>
          </div>
        </div>

        <h2 style="margin-bottom: 20px; font-size: 1.5em;">Recent Transactions</h2>
        <div id="transactions" class="transactions">
          <div class="empty-state">No transactions yet. Add your first one!</div>
        </div>

        <div class="actions">
          <button class="btn btn-primary" onclick="showTab('add')">+ Add Transaction</button>
          <button class="btn btn-secondary" onclick="exportData()">📥 Export Data</button>
          <button class="btn btn-danger" onclick="clearAllData()">🗑️ Clear All Data</button>
        </div>
      </div>

      <!-- Add Transaction Tab -->
      <div id="add" class="tab-content">
        <h2 style="margin-bottom: 20px; font-size: 1.5em;">Add Transaction</h2>

        <div class="form-group">
          <label>Amount ($)</label>
          <input type="number" id="amount" step="0.01" min="0" placeholder="0.00">
        </div>

        <div class="form-group">
          <label>Description</label>
          <input type="text" id="description" placeholder="What was this for?">
        </div>

        <div class="form-group">
          <label>Type</label>
          <select id="type">
            <option value="expense">📤 Expense (Money Going Out)</option>
            <option value="income">📥 Income (Money Coming In)</option>
          </select>
        </div>

        <div class="form-group">
          <label>Category</label>
          <input type="text" id="category" placeholder="Food, Rent, Groceries, etc.">
          <div class="categories-grid" id="categoryGrid"></div>
        </div>

        <button class="btn btn-primary" onclick="addTransaction()">+ Add Transaction</button>
        <button class="btn btn-secondary" onclick="showTab('dashboard')">Back to Dashboard</button>

        <div class="help" style="margin-top: 30px;">
          <h2>💡 Quick Tips</h2>
          <ul>
            <li><strong>Income:</strong> Salary, pension, gifts, refunds</li>
            <li><strong>Expenses:</strong> Groceries, bills, rent, entertainment</li>
            <li><strong>Categories:</strong> Help you see where money goes</li>
            <li><strong>Privacy:</strong> All data stays on your device</li>
          </ul>
        </div>
      </div>

      <!-- Help Tab -->
      <div id="help" class="tab-content">
        <div class="help">
          <h2>📘 How to Use SimpleBudget</h2>

          <h3>Getting Started</h3>
          <p>Simply open this page in your web browser. No account needed!</p>

          <h3>Adding Transactions</h3>
          <ul>
            <li>Click "Add Money" tab</li>
            <li>Enter the amount (e.g., 50.00)</li>
            <li>Describe what it was for (e.g., "Groceries")</li>
            <li>Choose if it's income or expense</li>
            <li>Add a category (optional, but helpful)</li>
            <li>Click "+ Add Transaction"</li>
          </ul>

          <h3>Understanding Your Budget</h3>
          <ul>
            <li><strong>Income:</strong> Money you receive</li>
            <li><strong>Expenses:</strong> Money you spend</li>
            <li><strong>Balance:</strong> Income minus expenses</li>
          </ul>

          <h3>Privacy & Security</h3>
          <ul>
            <li>🔒 All data stays on YOUR device</li>
            <li>🔒 No internet connection required</li>
            <li>🔒 No accounts, no passwords, no tracking</li>
            <li>🔒 Export your data anytime as backup</li>
          </ul>

          <h3>Common Questions</h3>
          <ul>
            <li><strong>Will I lose my data if I close the browser?</strong><br>
            No! Your data is saved automatically.</li>
            <li><strong>Can I use this offline?</strong><br>
            Yes! This works without internet.</li>
            <li><strong>How do I back up my data?</strong><br>
            Click "Export Data" to save it as a file.</li>
            <li><strong>Can I share this with family?</strong><br>
            Yes! Just share the HTML file or your exported data.</li>
          </ul>

          <h3>Common Categories</h3>
          <ul>
            <li>🏠 Rent / Housing</li>
            <li>🍎 Groceries / Food</li>
            <li>⚡ Utilities / Bills</li>
            <li>🚗 Transportation</li>
            <li>💊 Health / Medicine</li>
            <li>🎉 Entertainment</li>
            <li>👕 Shopping / Clothing</li>
            <li>📱 Phone / Internet</li>
            <li>🎁 Gifts</li>
            <li>🏦 Loan / Debt Payments</li>
          </ul>

          <h3>Tips for Success</h3>
          <ul>
            <li>Add transactions as they happen</li>
            <li>Use consistent categories</li>
            <li>Check your dashboard weekly</li>
            <li>Export data monthly for backup</li>
          </ul>
        </div>
      </div>
    </div>
  </div>

  <script>
    // Data storage
    let transactions = [];

    // Common categories
    const commonCategories = [
      'Food', 'Rent', 'Utilities', 'Transportation',
      'Health', 'Entertainment', 'Shopping', 'Phone',
      'Gifts', 'Loan', 'Other'
    ];

    // Initialize
    document.addEventListener('DOMContentLoaded', () => {
      loadData();
      renderCategoryGrid();
      updateDashboard();
    });

    // Show tab
    function showTab(tabId) {
      document.querySelectorAll('.tab').forEach(tab => tab.classList.remove('active'));
      document.querySelectorAll('.tab-content').forEach(content => content.classList.remove('active'));

      document.querySelector(`[onclick="showTab('${tabId}')"]`).classList.add('active');
      document.getElementById(tabId).classList.add('active');

      if (tabId === 'dashboard') {
        updateDashboard();
      }
    }

    // Render category buttons
    function renderCategoryGrid() {
      const grid = document.getElementById('categoryGrid');
      grid.innerHTML = commonCategories.map(cat =>
        `<button class="category-btn" onclick="selectCategory('${cat}')">${cat}</button>`
      ).join('');
    }

    // Select category
    function selectCategory(category) {
      document.getElementById('category').value = category;
      document.querySelectorAll('.category-btn').forEach(btn => {
        btn.classList.remove('selected');
        if (btn.textContent === category) {
          btn.classList.add('selected');
        }
      });
    }

    // Add transaction
    function addTransaction() {
      const amount = parseFloat(document.getElementById('amount').value);
      const description = document.getElementById('description').value.trim();
      const type = document.getElementById('type').value;
      const category = document.getElementById('category').value.trim() || 'Other';

      if (isNaN(amount) || amount <= 0) {
        showMessage('Please enter a valid amount', 'error');
        return;
      }

      if (!description) {
        showMessage('Please add a description', 'error');
        return;
      }

      const transaction = {
        id: Date.now(),
        amount,
        description,
        type,
        category,
        date: new Date().toLocaleDateString()
      };

      transactions.unshift(transaction);
      saveData();
      clearForm();
      showMessage('Transaction added successfully!', 'success');
      showTab('dashboard');
    }

    // Delete transaction
    function deleteTransaction(id) {
      if (confirm('Are you sure you want to delete this transaction?')) {
        transactions = transactions.filter(t => t.id !== id);
        saveData();
        updateDashboard();
        showMessage('Transaction deleted', 'success');
      }
    }

    // Update dashboard
    function updateDashboard() {
      const income = transactions.filter(t => t.type === 'income').reduce((sum, t) => sum + t.amount, 0);
      const expenses = transactions.filter(t => t.type === 'expense').reduce((sum, t) => sum + t.amount, 0);
      const balance = income - expenses;

      document.getElementById('totalIncome').textContent = formatCurrency(income);
      document.getElementById('totalExpenses').textContent = formatCurrency(expenses);
      document.getElementById('balance').textContent = formatCurrency(balance);

      renderTransactions();
    }

    // Render transactions list
    function renderTransactions() {
      const container = document.getElementById('transactions');

      if (transactions.length === 0) {
        container.innerHTML = '<div class="empty-state">No transactions yet. Add your first one!</div>';
        return;
      }

      container.innerHTML = transactions.slice(0, 20).map(t => `
        <div class="transaction-item ${t.type}">
          <div class="details">
            <div class="description">${escapeHtml(t.description)}</div>
            <div class="meta">${escapeHtml(t.category)} • ${t.date}</div>
          </div>
          <div class="amount ${t.type}">
            ${t.type === 'income' ? '+' : '-'}${formatCurrency(t.amount)}
          </div>
          <button class="delete-btn" onclick="deleteTransaction(${t.id})">Delete</button>
        </div>
      `).join('');
    }

    // Save data to localStorage
    function saveData() {
      localStorage.setItem('simplebudget_transactions', JSON.stringify(transactions));
    }

    // Load data from localStorage
    function loadData() {
      const saved = localStorage.getItem('simplebudget_transactions');
      if (saved) {
        transactions = JSON.parse(saved);
      }
    }

    // Clear form
    function clearForm() {
      document.getElementById('amount').value = '';
      document.getElementById('description').value = '';
      document.getElementById('category').value = '';
      document.querySelectorAll('.category-btn').forEach(btn => btn.classList.remove('selected'));
    }

    // Export data
    function exportData() {
      const data = {
        exportDate: new Date().toISOString(),
        transactions: transactions
      };

      const blob = new Blob([JSON.stringify(data, null, 2)], { type: 'application/json' });
      const url = URL.createObjectURL(blob);
      const a = document.createElement('a');
      a.href = url;
      a.download = `simplebudget_backup_${new Date().toISOString().split('T')[0]}.json`;
      a.click();
      URL.revokeObjectURL(url);

      showMessage('Data exported successfully!', 'success');
    }

    // Clear all data
    function clearAllData() {
      if (confirm('Are you sure you want to delete ALL data? This cannot be undone!')) {
        transactions = [];
        localStorage.removeItem('simplebudget_transactions');
        updateDashboard();
        showMessage('All data cleared', 'success');
      }
    }

    // Show message
    function showMessage(text, type) {
      const msg = document.getElementById('message');
      msg.textContent = text;
      msg.className = `message ${type}`;
      setTimeout(() => {
        msg.className = 'message';
      }, 3000);
    }

    // Format currency
    function formatCurrency(amount) {
      return '$' + amount.toFixed(2);
    }

    // Escape HTML
    function escapeHtml(text) {
      const div = document.createElement('div');
      div.textContent = text;
      return div.innerHTML;
    }
  </script>
</body>
</html>