From 302d6a0eeb0b948e2fe969b3d9c90fa91a8b09ce Mon Sep 17 00:00:00 2001
From: Ricardo Carneiro <ricardoroberto@outlook.com>
Date: Mon, 27 Apr 2026 22:01:16 -0300
Subject: [PATCH] fix: ajustes de qrcodes, links, etc.

---
 src/BCards.Web/Views/UserPage/Display.cshtml | 96 ++++++++++++--------
 1 file changed, 57 insertions(+), 39 deletions(-)

diff --git a/src/BCards.Web/Views/UserPage/Display.cshtml b/src/BCards.Web/Views/UserPage/Display.cshtml
index 9756a54..26c1391 100644
--- a/src/BCards.Web/Views/UserPage/Display.cshtml
+++ b/src/BCards.Web/Views/UserPage/Display.cshtml
@@ -209,31 +209,37 @@
 
         .qrcode-toggle {
             width: 100%;
-            background: rgba(255, 255, 255, 0.1);
-            border: 1px solid rgba(255, 255, 255, 0.2);
+            background-color: var(--primary-color);
+            color: white !important;
+            border: none;
             border-radius: 12px;
-            padding: 1rem;
+            padding: 0.75rem 1.25rem;
             display: flex;
             align-items: center;
             justify-content: space-between;
             cursor: pointer;
             transition: all 0.3s ease;
-            color: inherit;
             font-size: 1rem;
-            font-weight: 500;
+            font-weight: 600;
+            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
         }
 
         .qrcode-toggle:hover {
-            background: rgba(255, 255, 255, 0.15);
-            border-color: rgba(255, 255, 255, 0.3);
+            background-color: var(--secondary-color);
             transform: translateY(-2px);
-            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+            box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
         }
 
         .qrcode-toggle i {
             transition: transform 0.3s ease;
         }
 
+        .qrcode-toggle div {
+            display: flex;
+            align-items: center;
+            gap: 0.75rem;
+        }
+
         .qrcode-container {
             margin-top: 1rem;
             padding: 1.5rem;
@@ -550,13 +556,13 @@
                     <div class="qrcode-section mt-4">
                         <button class="qrcode-toggle" onclick="toggleQRCode()" type="button">
                             <i class="fas fa-qrcode me-2"></i>
-                            <span id="qrToggleText">Ocultar QR Code</span>
+                            QR Code
                             <i class="fas fa-chevron-up ms-auto" id="qrToggleIcon"></i>
                         </button>
 
                         <div class="qrcode-container" id="qrcodeContainer" style="display: block;">
                             <div class="qrcode-canvas" id="qrcode"></div>
-                            <p class="qrcode-hint">Escaneie para compartilhar esta página</p>
+                            <p class="qrcode-hint">Escaneie o QR Code para abrir no celular</p>
                             <button class="btn-download-qr" onclick="downloadQR()" type="button">
                                 <i class="fas fa-download me-1"></i> Baixar QR Code
                             </button>
@@ -594,8 +600,8 @@
 </div>
 
 @section Scripts {
-    <!-- QRCode.js Library - Load FIRST -->
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script>
+    <!-- QR Code Library - Usando bwip-js para maior compatibilidade -->
+    <script src="https://cdn.jsdelivr.net/npm/bwip-js@3.4.1/dist/bwip-js-min.js"></script>
 
     <script>
         function recordClick(pageId, linkIndex) {
@@ -718,64 +724,76 @@
         function toggleQRCode() {
             const container = document.getElementById('qrcodeContainer');
             const icon = document.getElementById('qrToggleIcon');
-            const text = document.getElementById('qrToggleText');
 
             if (container.style.display === 'block') {
                 // Close
                 container.style.display = 'none';
                 icon.classList.remove('fa-chevron-up');
                 icon.classList.add('fa-chevron-down');
-                text.textContent = 'Mostrar QR Code';
             } else {
                 // Open
                 container.style.display = 'block';
                 icon.classList.remove('fa-chevron-down');
                 icon.classList.add('fa-chevron-up');
-                text.textContent = 'Ocultar QR Code';
             }
         }
 
         function generateQRCode() {
             if (qrCodeGenerated) {
-                console.log('QR Code already generated, skipping...');
+                console.log('[QR] QR Code already generated, skipping...');
                 return;
             }
 
             const qrcodeElement = document.getElementById("qrcode");
             if (!qrcodeElement) {
-                console.error('QR Code container not found');
+                console.error('[QR] QR Code container not found');
                 return;
             }
 
-            // Check if already has content (double-call prevention)
-            if (qrcodeElement.querySelector('canvas')) {
-                console.log('Canvas already exists, skipping generation');
-                qrCodeGenerated = true;
+            if (typeof bwipjs === 'undefined') {
+                console.error('[QR] bwip-js library is not loaded');
+                qrcodeElement.innerHTML = '<p class="text-danger small">Erro ao carregar gerador de QR Code. Verifique sua conexão ou bloqueador de anúncios.</p>';
                 return;
             }
 
-            // Mark as generated BEFORE creating to prevent race conditions
-            qrCodeGenerated = true;
-
-            // Clear any existing content
-            qrcodeElement.innerHTML = '';
-
-            const pageUrl = window.location.href.split('?')[0]; // Remove query params
+            // Construir a URL final (LivePage)
+            const baseUrl = window.location.origin;
+            const categoryName = '@Html.Raw(category?.Name ?? "")'.trim();
+            const slug = '@Html.Raw(Model.Slug ?? "")'.trim();
+            
+            // Se não houver categoria, usa 'geral' ou remove a barra extra
+            const categoryPart = categoryName ? encodeURIComponent(categoryName) : "page";
+            const pageUrl = `${baseUrl}/page/${categoryPart}/${encodeURIComponent(slug)}`;
+            
+            console.log('[QR] Generating QR for URL:', pageUrl);
 
+            // Criar um elemento canvas dinamicamente
+            const canvas = document.createElement('canvas');
+            canvas.style.maxWidth = '100%';
+            canvas.style.height = 'auto';
+            
             try {
-                new QRCode(qrcodeElement, {
-                    text: pageUrl,
-                    width: 200,
-                    height: 200,
-                    colorDark: "#000000",
-                    colorLight: "#ffffff",
-                    correctLevel: QRCode.CorrectLevel.H
+                // bwip-js usa um canvas para renderizar
+                bwipjs.toCanvas(canvas, {
+                    bcid: 'qrcode',       // Tipo de código de barras
+                    text: pageUrl,        // Texto/URL
+                    scale: 3,             // Escala (resolução)
+                    height: 50,           // Altura (para QR é proporcional)
+                    width: 50,
+                    includetext: false,   // Não mostrar o texto embaixo
+                    textxalign: 'center',
                 });
-                console.log('QR Code generated successfully for:', pageUrl);
+
+                // Limpar e adicionar o canvas ao container
+                qrcodeElement.innerHTML = '';
+                qrcodeElement.appendChild(canvas);
+                
+                qrCodeGenerated = true;
+                console.log('[QR] QR Code generated successfully with bwip-js');
             } catch (error) {
-                console.error('Error generating QR Code:', error);
-                qrcodeElement.innerHTML = '<p class="text-danger small">Erro ao gerar QR Code</p>';
-                qrCodeGenerated = false; // Reset on error so it can retry
+                console.error('[QR] Error generating QR Code with bwip-js:', error);
+                qrcodeElement.innerHTML = '<p class="text-danger small">Erro ao gerar QR Code. Consulte o console para detalhes.</p>';
+                qrCodeGenerated = false;
             }
         }