Sindbad~EG File Manager
<?php
require_once '../config/config.php';
require_once '../classes/MemberAuth.php';
// Check if member is logged in
if (!MemberAuth::isMemberLoggedIn()) {
redirect('../login.php');
}
$pageTitle = "My QR Codes - " . APP_NAME;
$db = Database::getInstance()->getConnection();
// Get current member data
$currentMember = MemberAuth::getCurrentMember();
if (!$currentMember) {
redirect('../login.php');
}
// Get member details with tracking code
$stmt = $db->prepare("
SELECT m.*, mc.card_number, muc.tracking_code
FROM members m
LEFT JOIN membership_cards mc ON m.id = mc.member_id
LEFT JOIN memberuser_codes muc ON m.id = muc.member_id AND muc.code_type = 'member' AND muc.is_active = 1
WHERE m.id = :member_id
LIMIT 1
");
$stmt->execute(['member_id' => $currentMember['member_id']]);
$memberDetails = $stmt->fetch(PDO::FETCH_ASSOC);
// If no tracking code exists, generate a temporary one based on member ID
if (empty($memberDetails['tracking_code'])) {
$memberDetails['tracking_code'] = 'MEM' . str_pad($currentMember['member_id'], 8, '0', STR_PAD_LEFT);
}
// Get settings for theme colors
$stmt = $db->query("SELECT * FROM general_settings ORDER BY id DESC LIMIT 1");
$settings = $stmt->fetch();
$settings = array_merge([
'site_title' => APP_NAME,
'theme_primary_color' => '#3B82F6',
'theme_secondary_color' => '#10B981'
], $settings ?: []);
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title><?php echo $pageTitle; ?></title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
<style>
:root {
--primary-color: <?php echo $settings['theme_primary_color']; ?>;
--secondary-color: <?php echo $settings['theme_secondary_color']; ?>;
}
.bg-primary { background-color: var(--primary-color); }
.bg-secondary { background-color: var(--secondary-color); }
.text-primary { color: var(--primary-color); }
.border-primary { border-color: var(--primary-color); }
.gradient-bg {
background: linear-gradient(135deg, #1E40AF 0%, #9333EA 50%, #F97316 100%);
}
.card-hover {
transition: all 0.3s ease;
}
.card-hover:hover {
transform: translateY(-5px);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}
.qr-container {
display: flex;
justify-content: center;
align-items: center;
min-height: 280px;
}
</style>
</head>
<body class="bg-gray-50">
<!-- Header -->
<header class="gradient-bg text-white shadow-lg sticky top-0 z-50">
<div class="container mx-auto px-4">
<div class="flex items-center justify-between h-16">
<div class="flex items-center space-x-4">
<a href="dashboard.php" class="text-white hover:text-gray-200 transition">
<i class="fas fa-arrow-left mr-2"></i>Back to Dashboard
</a>
</div>
<h1 class="text-xl font-bold hidden md:block">My QR Codes</h1>
<div class="flex items-center space-x-4">
<span class="text-sm">
<i class="fas fa-user-circle mr-1"></i>
<?php echo htmlspecialchars($memberDetails['first_name'] ?? 'Member'); ?>
</span>
</div>
</div>
</div>
</header>
<div class="container mx-auto px-4 py-8">
<div class="max-w-7xl mx-auto">
<!-- Page Header -->
<div class="mb-8 text-center">
<h1 class="text-4xl font-bold text-gray-800 mb-4">
<i class="fas fa-qrcode mr-3 text-pink-500"></i>My QR Codes
</h1>
<p class="text-gray-600 text-lg">
Use these QR codes for event check-in and identification purposes
</p>
</div>
<!-- Member Info Summary -->
<div class="bg-white rounded-xl shadow-lg p-6 mb-8">
<div class="grid grid-cols-1 md:grid-cols-3 gap-4 text-center">
<div>
<p class="text-sm text-gray-600 mb-1">Full Name</p>
<p class="font-bold text-gray-800">
<?php echo htmlspecialchars(trim(($memberDetails['first_name'] ?? '') . ' ' . ($memberDetails['last_name'] ?? ''))); ?>
</p>
</div>
<div>
<p class="text-sm text-gray-600 mb-1">Card Number</p>
<p class="font-bold text-gray-800">
<?php echo htmlspecialchars($memberDetails['card_number'] ?? 'N/A'); ?>
</p>
</div>
<div>
<p class="text-sm text-gray-600 mb-1">Tracking Code</p>
<p class="font-bold text-gray-800 font-mono">
<?php echo htmlspecialchars($memberDetails['tracking_code'] ?? 'N/A'); ?>
</p>
</div>
</div>
</div>
<!-- QR Codes Grid -->
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8 mb-8">
<!-- Member Tracking Code QR -->
<div class="bg-white rounded-xl shadow-lg p-8 card-hover">
<div class="text-center mb-6">
<div class="inline-flex items-center justify-center w-16 h-16 rounded-full mb-4" style="background: linear-gradient(135deg, #1E40AF 0%, #9333EA 100%);">
<i class="fas fa-user-tag text-white text-2xl"></i>
</div>
<h3 class="text-2xl font-bold text-gray-800 mb-2">Member Tracking Code</h3>
<p class="text-gray-600">Use for event check-in and identification</p>
</div>
<div id="memberQRCard" class="bg-gradient-to-br from-blue-50 to-purple-50 rounded-lg p-6 mb-6">
<div class="qr-container bg-white rounded-lg p-4">
<div id="memberQR"></div>
</div>
<div class="text-center mt-4">
<p class="text-sm text-gray-600 mb-1">Tracking Code</p>
<p class="font-mono font-bold text-gray-800 text-lg">
<?php echo htmlspecialchars($memberDetails['tracking_code'] ?? 'N/A'); ?>
</p>
</div>
</div>
<div class="flex gap-3">
<button onclick="downloadQR('member', 'png')" class="flex-1 px-4 py-3 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition">
<i class="fas fa-download mr-2"></i>PNG
</button>
<button onclick="downloadQR('member', 'pdf')" class="flex-1 px-4 py-3 bg-red-500 text-white rounded-lg hover:bg-red-600 transition">
<i class="fas fa-file-pdf mr-2"></i>PDF
</button>
</div>
</div>
<!-- Membership Card QR -->
<div class="bg-white rounded-xl shadow-lg p-8 card-hover">
<div class="text-center mb-6">
<div class="inline-flex items-center justify-center w-16 h-16 rounded-full mb-4" style="background: linear-gradient(135deg, #F97316 0%, #FBBF24 100%);">
<i class="fas fa-id-card text-white text-2xl"></i>
</div>
<h3 class="text-2xl font-bold text-gray-800 mb-2">Membership Card</h3>
<p class="text-gray-600">Digital membership identification card</p>
</div>
<div id="cardQRCard" class="bg-gradient-to-br from-orange-50 to-yellow-50 rounded-lg p-6 mb-6">
<div class="qr-container bg-white rounded-lg p-4">
<div id="cardQR"></div>
</div>
<div class="text-center mt-4">
<p class="text-sm text-gray-600 mb-1">Card Number</p>
<p class="font-mono font-bold text-gray-800 text-lg">
<?php echo htmlspecialchars($memberDetails['card_number'] ?? 'N/A'); ?>
</p>
</div>
</div>
<div class="flex gap-3">
<button onclick="downloadQR('card', 'png')" class="flex-1 px-4 py-3 bg-orange-500 text-white rounded-lg hover:bg-orange-600 transition">
<i class="fas fa-download mr-2"></i>PNG
</button>
<button onclick="downloadQR('card', 'pdf')" class="flex-1 px-4 py-3 bg-red-500 text-white rounded-lg hover:bg-red-600 transition">
<i class="fas fa-file-pdf mr-2"></i>PDF
</button>
</div>
</div>
<!-- Event Check-in QR (Generic) -->
<div class="bg-white rounded-xl shadow-lg p-8 card-hover">
<div class="text-center mb-6">
<div class="inline-flex items-center justify-center w-16 h-16 rounded-full mb-4" style="background: linear-gradient(135deg, #10B981 0%, #34D399 100%);">
<i class="fas fa-calendar-check text-white text-2xl"></i>
</div>
<h3 class="text-2xl font-bold text-gray-800 mb-2">Event Check-in</h3>
<p class="text-gray-600">Quick check-in for any church event</p>
</div>
<div id="eventQRCard" class="bg-gradient-to-br from-green-50 to-emerald-50 rounded-lg p-6 mb-6">
<div class="qr-container bg-white rounded-lg p-4">
<div id="eventQR"></div>
</div>
<div class="text-center mt-4">
<p class="text-sm text-gray-600 mb-1">Member ID</p>
<p class="font-mono font-bold text-gray-800 text-lg">
MEM<?php echo str_pad($currentMember['member_id'], 8, '0', STR_PAD_LEFT); ?>
</p>
</div>
</div>
<div class="flex gap-3">
<button onclick="downloadQR('event', 'png')" class="flex-1 px-4 py-3 bg-green-500 text-white rounded-lg hover:bg-green-600 transition">
<i class="fas fa-download mr-2"></i>PNG
</button>
<button onclick="downloadQR('event', 'pdf')" class="flex-1 px-4 py-3 bg-red-500 text-white rounded-lg hover:bg-red-600 transition">
<i class="fas fa-file-pdf mr-2"></i>PDF
</button>
</div>
</div>
<!-- Member ID QR (Numeric) -->
<div class="bg-white rounded-xl shadow-lg p-8 card-hover">
<div class="text-center mb-6">
<div class="inline-flex items-center justify-center w-16 h-16 rounded-full mb-4" style="background: linear-gradient(135deg, #EC4899 0%, #8B5CF6 100%);">
<i class="fas fa-fingerprint text-white text-2xl"></i>
</div>
<h3 class="text-2xl font-bold text-gray-800 mb-2">Member ID</h3>
<p class="text-gray-600">Your unique member identification</p>
</div>
<div id="idQRCard" class="bg-gradient-to-br from-pink-50 to-purple-50 rounded-lg p-6 mb-6">
<div class="qr-container bg-white rounded-lg p-4">
<div id="idQR"></div>
</div>
<div class="text-center mt-4">
<p class="text-sm text-gray-600 mb-1">Member ID</p>
<p class="font-mono font-bold text-gray-800 text-lg">
<?php echo $currentMember['member_id']; ?>
</p>
</div>
</div>
<div class="flex gap-3">
<button onclick="downloadQR('id', 'png')" class="flex-1 px-4 py-3 bg-pink-500 text-white rounded-lg hover:bg-pink-600 transition">
<i class="fas fa-download mr-2"></i>PNG
</button>
<button onclick="downloadQR('id', 'pdf')" class="flex-1 px-4 py-3 bg-red-500 text-white rounded-lg hover:bg-red-600 transition">
<i class="fas fa-file-pdf mr-2"></i>PDF
</button>
</div>
</div>
</div>
<!-- Usage Instructions -->
<div class="bg-blue-50 border-l-4 border-blue-500 rounded-lg p-6 mb-8">
<h3 class="text-lg font-bold text-blue-800 mb-3">
<i class="fas fa-info-circle mr-2"></i>How to Use Your QR Codes
</h3>
<ul class="space-y-2 text-blue-700">
<li><i class="fas fa-check mr-2"></i>Present any QR code at event check-in points for quick registration</li>
<li><i class="fas fa-check mr-2"></i>Download and save QR codes to your phone for offline access</li>
<li><i class="fas fa-check mr-2"></i>Use the PDF format for printing physical copies</li>
<li><i class="fas fa-check mr-2"></i>All QR codes are linked to your member profile</li>
<li><i class="fas fa-check mr-2"></i>Keep your codes secure and do not share with others</li>
</ul>
</div>
<!-- Download All Button -->
<div class="text-center">
<button onclick="downloadAllQRs()" class="px-8 py-4 text-white rounded-lg text-lg font-bold shadow-lg hover:shadow-xl transition" style="background: linear-gradient(135deg, #1E40AF 0%, #F97316 100%);">
<i class="fas fa-download mr-3"></i>Download All QR Codes (PDF)
</button>
</div>
</div>
</div>
<!-- Footer -->
<footer class="bg-gray-800 text-white py-6 mt-12">
<div class="container mx-auto px-4 text-center">
<p>© <?php echo date('Y'); ?> <?php echo APP_NAME; ?>. All rights reserved.</p>
</div>
</footer>
<script>
// Member data
const memberData = {
trackingCode: '<?php echo addslashes($memberDetails['tracking_code'] ?? ''); ?>',
cardNumber: '<?php echo addslashes($memberDetails['card_number'] ?? ''); ?>',
memberId: '<?php echo $currentMember['member_id']; ?>',
memberIdFormatted: 'MEM<?php echo str_pad($currentMember['member_id'], 8, '0', STR_PAD_LEFT); ?>',
firstName: '<?php echo addslashes($memberDetails['first_name'] ?? ''); ?>',
lastName: '<?php echo addslashes($memberDetails['last_name'] ?? ''); ?>'
};
// Generate QR codes on page load
window.onload = function() {
// Member Tracking Code QR
if (memberData.trackingCode) {
new QRCode(document.getElementById("memberQR"), {
text: memberData.trackingCode,
width: 256,
height: 256,
colorDark: "#1E40AF",
colorLight: "#ffffff",
correctLevel: QRCode.CorrectLevel.H
});
}
// Card Number QR
if (memberData.cardNumber) {
new QRCode(document.getElementById("cardQR"), {
text: memberData.cardNumber,
width: 256,
height: 256,
colorDark: "#F97316",
colorLight: "#ffffff",
correctLevel: QRCode.CorrectLevel.H
});
}
// Event Check-in QR (using tracking code or member ID)
const eventCode = memberData.trackingCode || memberData.memberIdFormatted;
new QRCode(document.getElementById("eventQR"), {
text: eventCode,
width: 256,
height: 256,
colorDark: "#10B981",
colorLight: "#ffffff",
correctLevel: QRCode.CorrectLevel.H
});
// Member ID QR
new QRCode(document.getElementById("idQR"), {
text: memberData.memberId.toString(),
width: 256,
height: 256,
colorDark: "#EC4899",
colorLight: "#ffffff",
correctLevel: QRCode.CorrectLevel.H
});
};
// Download individual QR code
function downloadQR(type, format) {
let cardId, fileName, title;
switch(type) {
case 'member':
cardId = 'memberQRCard';
fileName = `Member_QR_${memberData.trackingCode}`;
title = 'Member Tracking Code';
break;
case 'card':
cardId = 'cardQRCard';
fileName = `Card_QR_${memberData.cardNumber}`;
title = 'Membership Card';
break;
case 'event':
cardId = 'eventQRCard';
fileName = `Event_QR_${memberData.memberIdFormatted}`;
title = 'Event Check-in';
break;
case 'id':
cardId = 'idQRCard';
fileName = `ID_QR_${memberData.memberId}`;
title = 'Member ID';
break;
}
if (format === 'png') {
downloadAsPNG(cardId, fileName);
} else if (format === 'pdf') {
downloadAsPDF(cardId, fileName, title);
}
}
// Download as PNG
function downloadAsPNG(elementId, fileName) {
const element = document.getElementById(elementId);
html2canvas(element, {
scale: 2,
backgroundColor: '#ffffff'
}).then(canvas => {
const link = document.createElement('a');
link.download = `${fileName}.png`;
link.href = canvas.toDataURL('image/png');
link.click();
});
}
// Download as PDF
function downloadAsPDF(elementId, fileName, title) {
const element = document.getElementById(elementId);
html2canvas(element, {
scale: 2,
backgroundColor: '#ffffff'
}).then(canvas => {
const imgData = canvas.toDataURL('image/png');
const { jsPDF } = window.jspdf;
const pdf = new jsPDF({
orientation: 'portrait',
unit: 'mm',
format: 'a4'
});
// Add title
pdf.setFontSize(20);
pdf.setTextColor(30, 64, 175);
pdf.text(title, 105, 20, { align: 'center' });
// Add member info
pdf.setFontSize(12);
pdf.setTextColor(0, 0, 0);
pdf.text(`Name: ${memberData.firstName} ${memberData.lastName}`, 20, 35);
// Add QR code image
const imgWidth = 150;
const imgHeight = (canvas.height * imgWidth) / canvas.width;
pdf.addImage(imgData, 'PNG', 30, 45, imgWidth, imgHeight);
// Add footer
pdf.setFontSize(10);
pdf.setTextColor(100, 100, 100);
pdf.text('<?php echo APP_NAME; ?>', 105, 280, { align: 'center' });
pdf.text(`Generated: ${new Date().toLocaleDateString()}`, 105, 285, { align: 'center' });
pdf.save(`${fileName}.pdf`);
});
}
// Download all QR codes in one PDF
function downloadAllQRs() {
const { jsPDF } = window.jspdf;
const pdf = new jsPDF({
orientation: 'portrait',
unit: 'mm',
format: 'a4'
});
const cards = [
{ id: 'memberQRCard', title: 'Member Tracking Code' },
{ id: 'cardQRCard', title: 'Membership Card' },
{ id: 'eventQRCard', title: 'Event Check-in' },
{ id: 'idQRCard', title: 'Member ID' }
];
let currentPage = 0;
function addCardToPage(index) {
if (index >= cards.length) {
pdf.save(`All_QR_Codes_${memberData.firstName}_${memberData.lastName}.pdf`);
return;
}
const card = cards[index];
const element = document.getElementById(card.id);
html2canvas(element, {
scale: 2,
backgroundColor: '#ffffff'
}).then(canvas => {
if (index > 0) {
pdf.addPage();
}
// Add title
pdf.setFontSize(20);
pdf.setTextColor(30, 64, 175);
pdf.text(card.title, 105, 20, { align: 'center' });
// Add member info
pdf.setFontSize(12);
pdf.setTextColor(0, 0, 0);
pdf.text(`Name: ${memberData.firstName} ${memberData.lastName}`, 20, 35);
// Add QR code image
const imgData = canvas.toDataURL('image/png');
const imgWidth = 150;
const imgHeight = (canvas.height * imgWidth) / canvas.width;
pdf.addImage(imgData, 'PNG', 30, 45, imgWidth, imgHeight);
// Add footer
pdf.setFontSize(10);
pdf.setTextColor(100, 100, 100);
pdf.text('<?php echo APP_NAME; ?>', 105, 280, { align: 'center' });
pdf.text(`Page ${index + 1} of ${cards.length}`, 105, 285, { align: 'center' });
// Process next card
addCardToPage(index + 1);
});
}
addCardToPage(0);
}
</script>
<?php
// Include Chat Hub Widget (Admin Chat + AI Chatbot)
if (file_exists(__DIR__ . '/../includes/chat-hub-widget.php')) {
include '../includes/chat-hub-widget.php';
}
?>
</body>
</html>
Sindbad File Manager Version 1.0, Coded By Sindbad EG ~ The Terrorists