Create cardreminder.html

ckw1 · web-flow · commit 2f037f7806df · 2025-03-27T10:16:49.000+08:00
diff --git a/cardreminder.html b/cardreminder.html
@@ -0,0 +1,161 @@
+<!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;
+        }
+        input, button {
+            padding: 8px;
+            margin: 5px 0;
+        }
+        button {
+            background: #007aff;
+            color: white;
+            border: none;
+            border-radius: 5px;
+            cursor: pointer;
+        }
+        .export-import {
+            margin-top: 20px;
+        }
+    </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 });
+                saveCards();
+                document.getElementById('cardName').value = '';
+                document.getElementById('dueDate').value = '';
+            }
+        }
+
+        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';
+                cardDiv.innerHTML = `
+                    <strong>${card.name}</strong><br>
+                    Due Date: ${card.dueDate}<br>
+                    Days until due: ${daysUntilDue}<br>
+                    <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
+        setInterval(() => {
+            cards.forEach(card => {
+                const daysUntilDue = getDaysUntilDue(card.dueDate);
+                if (daysUntilDue <= 3 && daysUntilDue >= 0) {
+                    if ('Notification' in window && Notification.permission === 'granted') {
+                        new Notification(`${card.name} payment due in ${daysUntilDue} day(s)!`);
+                    }
+                }
+            });
+            renderCards();
+        }, 24 * 60 * 60 * 1000); // Check every 24 hours
+
+        // Request notification permission
+        if ('Notification' in window && Notification.permission !== 'denied') {
+            Notification.requestPermission();
+        }
+    </script>
+</body>
+</html>
