card1.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <title>Credit Card Todo Reminder</title>
    <style>
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            padding: 20px;
            max-width: 600px;
            margin: 0 auto;
        }
        .card-item {
            background: #f5f5f5;
            padding: 15px;
            margin: 10px 0;
            border-radius: 8px;
            display: flex;
            align-items: center;
        }
        .card-item.completed {
            background: #e0e0e0;
            text-decoration: line-through;
            color: #666;
        }
        input, button {
            padding: 8px;
            margin: 5px 0;
        }
        button {
            background: #007aff;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }
        .export-import {
            margin-top: 20px;
        }
        .checkbox {
            margin-right: 10px;
        }
    </style>
</head>
<body>
    <h1>Credit Card Reminders</h1>
    
    <div id="addForm">
        <input type="text" id="cardName" placeholder="Card Name">
        <input type="number" id="dueDate" placeholder="Due Date (1-31)" min="1" max="31">
        <button onclick="addCard()">Add Card</button>
    </div>

    <div id="cardList"></div>

    <div class="export-import">
        <button onclick="exportData()">Export Data</button>
        <input type="file" id="importFile" accept=".json" onchange="importData(event)">
        <label for="importFile">Import Data</label>
    </div>

    <script>
        let cards = JSON.parse(localStorage.getItem('creditCards')) || [];

        function saveCards() {
            localStorage.setItem('creditCards', JSON.stringify(cards));
            renderCards();
        }

        function addCard() {
            const name = document.getElementById('cardName').value;
            const dueDate = parseInt(document.getElementById('dueDate').value);
            
            if (name && dueDate >= 1 && dueDate <= 31) {
                cards.push({ name, dueDate, completed: false });
                saveCards();
                document.getElementById('cardName').value = '';
                document.getElementById('dueDate').value = '';
            }
        }

        function toggleComplete(index) {
            cards[index].completed = !cards[index].completed;
            saveCards();
        }

        function deleteCard(index) {
            cards.splice(index, 1);
            saveCards();
        }

        function getDaysUntilDue(dueDate) {
            const today = new Date();
            const currentDay = today.getDate();
            const currentMonth = today.getMonth();
            const currentYear = today.getFullYear();
            
            let nextDue = new Date(currentYear, currentMonth, dueDate);
            if (currentDay > dueDate) {
                nextDue = new Date(currentYear, currentMonth + 1, dueDate);
            }
            
            const diffTime = nextDue - today;
            return Math.ceil(diffTime / (1000 * 60 * 60 * 24));
        }

        function renderCards() {
            const cardList = document.getElementById('cardList');
            cardList.innerHTML = '';
            
            cards.forEach((card, index) => {
                const daysUntilDue = getDaysUntilDue(card.dueDate);
                const cardDiv = document.createElement('div');
                cardDiv.className = `card-item ${card.completed ? 'completed' : ''}`;
                cardDiv.innerHTML = `
                    <input type="checkbox" class="checkbox" 
                           ${card.completed ? 'checked' : ''} 
                           onchange="toggleComplete(${index})">
                    <div style="flex: 1">
                        <strong>${card.name}</strong><br>
                        Due Date: ${card.dueDate}<br>
                        Days until due: ${daysUntilDue}
                    </div>
                    <button onclick="deleteCard(${index})">Delete</button>
                `;
                cardList.appendChild(cardDiv);
            });
        }

        function exportData() {
            const dataStr = JSON.stringify(cards);
            const dataUri = 'data:application/json;charset=utf-8,'+ encodeURIComponent(dataStr);
            const exportFileDefaultName = 'credit_card_reminders.json';
            
            const linkElement = document.createElement('a');
            linkElement.setAttribute('href', dataUri);
            linkElement.setAttribute('download', exportFileDefaultName);
            linkElement.click();
        }

        function importData(event) {
            const file = event.target.files[0];
            if (file) {
                const reader = new FileReader();
                reader.onload = function(e) {
                    try {
                        cards = JSON.parse(e.target.result);
                        saveCards();
                    } catch (error) {
                        alert('Error importing data: Invalid file format');
                    }
                };
                reader.readAsText(file);
            }
        }

        // Initial render
        renderCards();

        // Check reminders daily and reset completed status monthly
        setInterval(() => {
            const today = new Date();
            const currentDay = today.getDate();
            
            cards.forEach(card => {
                const daysUntilDue = getDaysUntilDue(card.dueDate);
                if (daysUntilDue <= 3 && daysUntilDue >= 0 && !card.completed) {
                    if ('Notification' in window && Notification.permission === 'granted') {
                        new Notification(`${card.name} payment due in ${daysUntilDue} day(s)!`);
                    }
                }
                // Reset completed status on due date
                if (currentDay === card.dueDate && card.completed) {
                    card.completed = false;
                }
            });
            saveCards();
        }, 24 * 60 * 60 * 1000); // Check every 24 hours

        // Request notification permission
        if ('Notification' in window && Notification.permission !== 'denied') {
            Notification.requestPermission();
        }
    </script>
</body>
</html>