diff --git a/app/templates/statistics_page.html b/app/templates/statistics_page.html index 7b613f2..bdda6b8 100644 --- a/app/templates/statistics_page.html +++ b/app/templates/statistics_page.html @@ -262,6 +262,78 @@ border: 1px solid #b8daff; } + .qr-preview-section { + background: #f8f9fa; + border: 1px solid #e9ecef; + border-radius: 8px; + padding: 20px; + margin-top: 20px; + text-align: center; + } + + .qr-preview-section h4 { + color: #495057; + margin-bottom: 15px; + font-size: 1.1em; + } + + .qr-preview-container { + display: flex; + flex-direction: column; + align-items: center; + gap: 15px; + } + + .qr-preview-image { + max-width: 200px; + max-height: 200px; + border: 2px solid #dee2e6; + border-radius: 8px; + background: white; + padding: 10px; + } + + .qr-download-actions { + display: flex; + gap: 10px; + flex-wrap: wrap; + justify-content: center; + } + + .btn-download { + padding: 8px 16px; + border: none; + border-radius: 6px; + cursor: pointer; + text-decoration: none; + font-weight: 500; + font-size: 0.9em; + transition: all 0.3s ease; + display: inline-flex; + align-items: center; + gap: 6px; + } + + .btn-download-png { + background: #007bff; + color: white; + } + + .btn-download-svg { + background: #28a745; + color: white; + } + + .btn-download:hover { + transform: translateY(-1px); + box-shadow: 0 2px 8px rgba(0,0,0,0.15); + } + + .qr-loading { + color: #666; + font-style: italic; + } + /* Responsive design */ @media (max-width: 768px) { body { @@ -308,6 +380,21 @@ .link-title { font-size: 1.1em; } + + .qr-preview-image { + max-width: 150px; + max-height: 150px; + } + + .qr-download-actions { + flex-direction: column; + width: 100%; + } + + .btn-download { + width: 100%; + justify-content: center; + } } @media (max-width: 480px) { @@ -379,6 +466,22 @@

🔗 Public QR Code URL

This is the URL that your QR code points to (public page without statistics):

{{ request.url_root }}links/{{ page.id }}
+ +
+

📱 QR Code Preview

+
+
Loading QR code...
+ + +
+
@@ -495,7 +598,55 @@ } // Initialize logos when page loads - document.addEventListener('DOMContentLoaded', setLogosForLinks); + document.addEventListener('DOMContentLoaded', function() { + setLogosForLinks(); + loadQRCodePreview(); + }); + + // QR Code functionality + let currentQRId = null; + + async function loadQRCodePreview() { + try { + const pageId = '{{ page.id }}'; + + // Find the QR code for this page + const response = await fetch('/api/qr_codes'); + const qrCodes = await response.json(); + + const pageQR = qrCodes.find(qr => qr.type === 'link_page' && qr.page_id === pageId); + + if (pageQR) { + currentQRId = pageQR.id; + const previewImage = document.getElementById('qr-preview-image'); + const loadingText = document.getElementById('qr-preview-loading'); + const downloadActions = document.getElementById('qr-download-actions'); + + previewImage.src = pageQR.preview; + previewImage.style.display = 'block'; + loadingText.style.display = 'none'; + downloadActions.style.display = 'flex'; + } else { + document.getElementById('qr-preview-loading').textContent = 'QR code not found'; + } + } catch (error) { + console.error('Failed to load QR code preview:', error); + document.getElementById('qr-preview-loading').textContent = 'Failed to load QR code'; + } + } + + function downloadQRCode(format) { + if (!currentQRId) { + alert('QR code not found'); + return; + } + + if (format === 'svg') { + window.open(`/api/download/${currentQRId}/svg`, '_blank'); + } else { + window.open(`/api/download/${currentQRId}`, '_blank'); + } + }