alvin/school
1
0
Fork 0
mirror of https://github.com/Alvin-Zilverstand/school.git synced 2026-03-07 05:52:46 +01:00
Code Issues Packages Projects Releases Wiki Activity

:3

Browse Source
This commit is contained in:
vista-man
2025-04-15 01:01:23 +02:00
parent 470608f6fd
commit 3e57d923f9
4461 changed files with 19668 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
projects/challenge 9/Spik-en-span/qr/qr.html Normal file
View File

@@ -0,0 +1,25 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>QR Scanner</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="styles.css" />
<script src="https://rawgit.com/sitepoint-editors/jsqrcode/master/src/qr_packed.js"></script>
</head>
<body>
<div class="container mt-5 text-center">
<h1 class="text-center">QR Scanner</h1>
<a id="btn-scan-qr">
<img src="https://dab1nmslvvntp.cloudfront.net/wp-content/uploads/2017/07/1499401426qr_icon.svg" alt="QR Icon">
</a>
<video id="video" autoplay playsinline></video>
<canvas id="qr-canvas" hidden></canvas>
<div id="qr-result" hidden>
<b>Data:</b> <span id="outputData"></span>
</div>
</div>
<script src="qrCodeScanner.js"></script>
</body>
</html>

86
projects/challenge 9/Spik-en-span/qr/qrCodeScanner.js Normal file
View File

@@ -0,0 +1,86 @@
const btnScanQR = document.getElementById('btn-scan-qr');
const qrCanvas = document.getElementById('qr-canvas');
const qrResult = document.getElementById('qr-result');
const outputData = document.getElementById('outputData');
const video = document.getElementById('video');
const scanAgainButton = document.createElement('button');
scanAgainButton.textContent = 'Scan Nog Een Ticket';
scanAgainButton.className = 'btn btn-primary mt-3';
scanAgainButton.style.display = 'none';
scanAgainButton.addEventListener('click', () => {
location.reload();
});
document.body.appendChild(scanAgainButton);
btnScanQR.addEventListener('click', () => {
btnScanQR.hidden = true;
video.style.display = 'block';
qrCanvas.hidden = true;
qrResult.hidden = true;
const context = qrCanvas.getContext('2d');
navigator.mediaDevices.getUserMedia({ video: { facingMode: 'environment' } })
.then((stream) => {
video.srcObject = stream;
video.setAttribute('playsinline', true);
video.play();
const scan = () => {
if (video.readyState === video.HAVE_ENOUGH_DATA) {
qrCanvas.height = video.videoHeight;
qrCanvas.width = video.videoWidth;
context.drawImage(video, 0, 0, qrCanvas.width, qrCanvas.height);
try {
const qrCodeData = qrcode.decode();
fetch(`../php/get_ticket_details.php?ticket_id=${encodeURIComponent(qrCodeData)}`)
.then(response => response.json())
.then(data => {
if (data.success) {
document.body.style.backgroundColor = 'green';
outputData.innerHTML = `
<p><strong>Ticket ID:</strong> ${data.ticket_id}</p>
<p><strong>Dag:</strong> ${data.day === 'friday' ? 'Vrijdag' : 'Zaterdag'}</p>
<p><strong>Categorie:</strong> ${data.category === 'volwassen' ? 'Volwassene' : 'Kind'}</p>
<p style="color: green;">Ticket succesvol gescand en opgeslagen!</p>
`;
} else {
document.body.style.backgroundColor = 'red';
outputData.innerHTML = `<p style="color: red;">${data.message}</p>`;
}
setTimeout(() => {
document.body.style.backgroundColor = '';
}, 2000);
qrResult.hidden = false;
qrCanvas.hidden = true;
video.hidden = true;
scanAgainButton.style.display = 'block';
stream.getTracks().forEach(track => track.stop());
})
.catch(err => {
console.error('Error fetching ticket details:', err);
document.body.style.backgroundColor = 'red';
outputData.innerHTML = `<p style="color: red;">Fout bij het ophalen van ticketgegevens.</p>`;
setTimeout(() => {
document.body.style.backgroundColor = '';
}, 2000);
qrResult.hidden = false;
qrCanvas.hidden = true;
video.hidden = true;
scanAgainButton.style.display = 'block';
stream.getTracks().forEach(track => track.stop());
});
} catch (e) {
requestAnimationFrame(scan);
}
} else {
requestAnimationFrame(scan);
}
};
scan();
})
.catch((err) => {
console.error('Error accessing camera:', err);
});
});

66
projects/challenge 9/Spik-en-span/qr/styles.css Normal file
View File

@@ -0,0 +1,66 @@
html {
height: 100%;
}
body {
font-family: sans-serif;
padding: 0 10px;
height: 100%;
background: black;
margin: 0;
}
h1 {
color: white;
margin: 0;
padding: 15px;
}
#container {
text-align: center;
margin: 0;
}
#qr-canvas {
margin: auto;
width: calc(100% - 20px);
max-width: 400px;
}
#btn-scan-qr {
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
height: 75vh;
}
#btn-scan-qr img {
height: 10em;
padding: 15px;
margin: 15px;
background: white;
border-radius: 10px;
}
#qr-result {
font-size: 1.2em;
margin: 20px auto;
padding: 20px;
max-width: 700px;
background-color: white;
}
#video {
display: none;
margin: 0 auto;
width: 100%;
max-width: 400px;
border: 2px solid white;
border-radius: 10px;
box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}
#video:visible {
display: block;
}