ricardo/BCards
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: ajustes de qrcodes, links, etc.

Browse Source
This commit is contained in:
Ricardo Carneiro 2026-04-27 22:01:16 -03:00
parent 6c2b618b92
commit 302d6a0eeb
1 changed files with 57 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

96
src/BCards.Web/Views/UserPage/Display.cshtml
View File

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