@@ -280,9 +409,106 @@
const video = document.getElementById('video');
const cameraStatus = document.getElementById('cameraStatus');
const copyBtn = document.getElementById('copyBtn');
+ const historyList = document.getElementById('historyList');
+ const clearHistoryBtn = document.getElementById('clearHistoryBtn');
+ const HISTORY_KEY = 'qr_scan_history';
let stream = null;
let scanInterval = null;
+ function loadHistory() {
+ const stored = localStorage.getItem(HISTORY_KEY);
+ return stored ? JSON.parse(stored) : [];
+ }
+
+ function saveHistory(history) {
+ localStorage.setItem(HISTORY_KEY, JSON.stringify(history));
+ }
+
+ function addToHistory(text) {
+ const history = loadHistory();
+ const existingIndex = history.findIndex(item => item.text === text);
+ if (existingIndex !== -1) {
+ history.splice(existingIndex, 1);
+ }
+ history.unshift({ text, timestamp: Date.now() });
+ if (history.length > 50) {
+ history.pop();
+ }
+ saveHistory(history);
+ renderHistory();
+ }
+
+ function deleteFromHistory(index) {
+ const history = loadHistory();
+ history.splice(index, 1);
+ saveHistory(history);
+ renderHistory();
+ }
+
+ function clearHistory() {
+ localStorage.removeItem(HISTORY_KEY);
+ renderHistory();
+ }
+
+ function renderHistory() {
+ const history = loadHistory();
+ if (history.length === 0) {
+ historyList.innerHTML = '
No scan history yet
';
+ return;
+ }
+ historyList.innerHTML = history.map((item, index) => {
+ const date = new Date(item.timestamp);
+ const timeStr = date.toLocaleString();
+ const displayText = item.text.length > 100 ? item.text.substring(0, 100) + '...' : item.text;
+ return `
+
+
+
${escapeHtml(displayText)}
+
${timeStr}
+
+
+
+
+
+
+ `;
+ }).join('');
+ historyList.querySelectorAll('.delete-btn').forEach(btn => {
+ btn.addEventListener('click', (e) => {
+ const index = parseInt(e.target.dataset.index);
+ deleteFromHistory(index);
+ });
+ });
+ historyList.querySelectorAll('.copy-history-btn').forEach(btn => {
+ btn.addEventListener('click', (e) => {
+ const index = parseInt(e.target.dataset.index);
+ const text = history[index].text;
+ navigator.clipboard.writeText(text).then(() => {
+ e.target.textContent = '✓ Copied!';
+ e.target.classList.add('copied');
+ setTimeout(() => {
+ e.target.textContent = '📋 Copy';
+ e.target.classList.remove('copied');
+ }, 2000);
+ });
+ });
+ });
+ }
+
+ function escapeHtml(text) {
+ const div = document.createElement('div');
+ div.textContent = text;
+ return div.innerHTML;
+ }
+
+ clearHistoryBtn.addEventListener('click', () => {
+ if (confirm('Are you sure you want to clear all scan history?')) {
+ clearHistory();
+ }
+ });
+
+ renderHistory();
+
dropZone.addEventListener('click', () => fileInput.click());
dropZone.addEventListener('dragover', (e) => {
@@ -371,6 +597,7 @@
function showResult(text) {
resultText.textContent = text;
result.classList.add('visible');
+ addToHistory(text);
}
function showError(message) {