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 @@
This is the URL that your QR code points to (public page without statistics):