<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Coffee Loyalty Card</title>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap" rel="stylesheet">
<style>
body {
font-family: 'Poppins', sans-serif;
background-color: #f4f4f4;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
height: 100vh;
margin: 0;
}
.card-container,
.controls-card {
text-align: center;
width: 90%;
max-width: 700px;
background-color: #faf4e8;
border-radius: 15px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
padding: 40px 50px;
box-sizing: border-box;
margin-bottom: 20px;
}
.card-header {
font-size: 30px;
font-weight: 600;
color: #6a1b9a;
margin-bottom: 10px;
}
.card-subheader {
font-size: 18px;
color: #6a1b9a;
margin-bottom: 20px;
}
.stamp-container {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 10px;
justify-content: center;
align-items: center;
}
.stamp {
width: 60px;
height: 60px;
border: 2px solid #ddd;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
background: rgba(255, 255, 255, 0.8);
font-size: 24px;
color: #6a1b9a;
}
.stamped {
color: #6a1b9a;
}
.controls {
text-align: center;
margin-top: 20px;
}
.controls button {
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s ease;
margin: 0 10px;
}
/* dimensioni pulsante "fai approvare" */
.controls button#approveButton {
background-color: #6a1b9a;
color: white;
font-size: 24px; /* Aumenta la dimensione del testo */
padding: 15px 30px; /* Aumenta le dimensioni del pulsante */
}
/* fine dimensioni pulsante "fai approvare" */
.controls button#approveButton:hover {
background-color: #5e1788;
}
.controls button#closeButton {
background-color: #808080;
color: white;
}
.controls button#closeButton:hover {
background-color: #606060;
}
.company-info {
margin-top: 20px;
font-size: 14px;
color: #6a1b9a;
display: flex;
justify-content: center;
gap: 20px;
}
.company-info a {
color: #6a1b9a;
text-decoration: none;
}
.company-info a:hover {
text-decoration: underline;
}
.banana {
width: 600px;
height: 60px;
border-radius: 10px;
background-color: #b2e596;
margin: 30px auto 0 auto;
}
#qr-reader {
width: 300px;
margin: auto;
}
#qr-instructions {
font-size: 30px;
color: #6a1b9a;
margin-bottom: 20px;
}
/* spazi attorno alla camera */
#qr-reader {
margin-bottom: 20px;
}
#closeButton {
margin-top: 20px;
}
/* fine spazi attorno alla camera */
/* informazioni Bottone sotto */
.controls-card {
width: 90%; /* Modifica questa larghezza per cambiare la dimensione del container del bottone "Fai approvare" */
max-width: 700px; /* Puoi anche modificare questa larghezza massima */
}
/* fine informazioni Bottone sotto */
</style>
</head>
<body>
<div class="card-container" id="coffeeCardContainer">
<div class="card" id="coffeeCard">
<div class="card-header">Centro Food Garden</div>
<div class="card-subheader">Gusta 10 caffè, il prossimo è in omaggio!</div>
<div class="stamp-container">
<div class="stamp" onclick="toggleStamp(this)">C'</div>
<div class="stamp" onclick="toggleStamp(this)">C'</div>
<div class="stamp" onclick="toggleStamp(this)">C'</div>
<div class="stamp" onclick="toggleStamp(this)">C'</div>
<div class="stamp" onclick="toggleStamp(this)">C'</div>
<div class="stamp" onclick="toggleStamp(this)">C'</div>
<div class="stamp" onclick="toggleStamp(this)">C'</div>
<div class="stamp" onclick="toggleStamp(this)">C'</div>
<div class="stamp" onclick="toggleStamp(this)">C'</div>
<div class="stamp" onclick="toggleStamp(this)">C'</div>
</div>
<div class="company-info">
<a href="https://www.google.com/maps?q=Via+dell'Arcivescovado+2,+10023+TO" target="_blank">Via dell'Arcivescovado 2 - 10023 TO</a>
<a href="https://www.instagram.com/centro_food_garden/" target="_blank">Seguici su Instagram</a>
</div>
<div class="banana"></div>
</div>
</div>
<div class="controls-card">
<div class="controls">
<div id="qr-instructions" style="display: none;">Scansiona il QR-Code per la verifica</div>
<video id="qr-reader" style="display: none;"></video>
<canvas id="qr-canvas" style="display: none;"></canvas>
<button id="approveButton">Fai approvare</button>
<button id="closeButton" style="display: none;">Chiudi camera</button>
</div>
</div>
<script>
const correctQRCode = 'c3ntrOC@ffèc@@ard2024!';
let scannerActive = false;
document.getElementById('approveButton').addEventListener('click', () => {
document.getElementById('coffeeCardContainer').style.display = 'none';
document.getElementById('qr-instructions').style.display = 'block';
const video = document.getElementById('qr-reader');
const canvas = document.getElementById('qr-canvas');
const context = canvas.getContext('2d');
const constraints = { video: { facingMode: "environment" } };
navigator.mediaDevices.getUserMedia(constraints).then(function(stream) {
video.srcObject = stream;
video.setAttribute("playsinline", true); // required to tell iOS safari we don't want fullscreen
video.style.display = 'block';
canvas.style.display = 'none';
document.getElementById('closeButton').style.display = 'inline-block';
video.play();
scannerActive = true;
requestAnimationFrame(tick);
});
function tick() {
if (video.readyState === video.HAVE_ENOUGH_DATA) {
canvas.height = video.videoHeight;
canvas.width = video.videoWidth;
context.drawImage(video, 0, 0, canvas.width, canvas.height);
const imageData = context.getImageData(0, 0, canvas.width, canvas.height);
const code = jsQR(imageData.data, imageData.width, imageData.height, {
inversionAttempts: "dontInvert",
});
if (code) {
if (code.data === correctQRCode) {
video.srcObject.getTracks().forEach(track => track.stop());
video.style.display = 'none';
document.getElementById('closeButton').style.display = 'none';
saveStamps();
alert('QR code approved and stamps saved successfully!');
scannerActive = false;
} else {
alert('Invalid QR code. Please try again.');
}
}
}
if (scannerActive) {
requestAnimationFrame(tick);
}
}
});
document.getElementById('closeButton').addEventListener('click', () => {
const video = document.getElementById('qr-reader');
video.srcObject.getTracks().forEach(track => track.stop());
video.style.display = 'none';
document.getElementById('closeButton').style.display = 'none';
document.getElementById('qr-instructions').style.display = 'none';
document.getElementById('coffeeCardContainer').style.display = 'block';
scannerActive = false;
});
// Function to toggle stamp state
function toggleStamp(element) {
element.classList.toggle('stamped');
element.style.color = element.classList.contains('stamped') ? '#6a1b9a' : 'transparent';
}
function saveStamps() {
const stamps = document.querySelectorAll('.stamp');
const stampsState = [];
stamps.forEach(stamp => {
stampsState.push(stamp.classList.contains('stamped'));
});
localStorage.setItem('stampsState', JSON.stringify(stampsState));
checkComplete();
}
// Load stamps on page load
function loadStamps() {
const stampsState = JSON.parse(localStorage.getItem('stampsState')) || [];
const stamps = document.querySelectorAll('.stamp');
stamps.forEach((stamp, index) => {
if (stampsState[index]) {
stamp.classList.add('stamped');
stamp.style.color = '#6a1b9a';
} else {
stamp.classList.remove('stamped');
stamp.style.color = 'transparent';
}
});
}
// Show alert if complete
function checkComplete() {
const stamps = document.querySelectorAll('.stamp');
let count = 0;
stamps.forEach(stamp => {
if (stamp.classList.contains('stamped')) {
count++;
}
});
if (count === 10) {
alert('Congratulazioni! Hai guadagnato un caffè omaggio! Il bar C\'entro Food Garden ti aspetta per ritirare il tuo caffè.');
}
}
loadStamps();
</script>
</body>
</html>
0114174684
Info@italiantastesrl.com
