115 lines
3.5 KiB
JavaScript
115 lines
3.5 KiB
JavaScript
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
const canvas = document.getElementById('bg');
|
|
if (!canvas) return;
|
|
|
|
const ctx = canvas.getContext('2d');
|
|
let width = canvas.width = window.innerWidth;
|
|
let height = canvas.height = window.innerHeight;
|
|
|
|
window.addEventListener('resize', () => {
|
|
width = canvas.width = window.innerWidth;
|
|
height = canvas.height = window.innerHeight;
|
|
});
|
|
|
|
const orbs = [];
|
|
const orbCount = 25;
|
|
const minRadius = 3;
|
|
const maxRadius = 7;
|
|
|
|
class Orb {
|
|
constructor() {
|
|
this.radius = Math.random() * (maxRadius - minRadius) + minRadius;
|
|
this.x = Math.random() * width;
|
|
this.y = Math.random() * height;
|
|
this.vx = (Math.random() - 0.5) * 0.5;
|
|
this.vy = (Math.random() - 0.5) * 0.5;
|
|
this.color = '#23D160';
|
|
}
|
|
|
|
draw() {
|
|
ctx.beginPath();
|
|
ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2);
|
|
ctx.fillStyle = this.color;
|
|
ctx.globalAlpha = 0.7;
|
|
ctx.fill();
|
|
ctx.filter = 'blur(2px)';
|
|
}
|
|
|
|
update() {
|
|
this.x += this.vx;
|
|
this.y += this.vy;
|
|
|
|
if (this.x - this.radius < 0 || this.x + this.radius > width) {
|
|
this.vx *= -1;
|
|
}
|
|
if (this.y - this.radius < 0 || this.y + this.radius > height) {
|
|
this.vy *= -1;
|
|
}
|
|
}
|
|
}
|
|
|
|
function init() {
|
|
for (let i = 0; i < orbCount; i++) {
|
|
orbs.push(new Orb());
|
|
}
|
|
}
|
|
|
|
function animate() {
|
|
ctx.clearRect(0, 0, width, height);
|
|
orbs.forEach(orb => {
|
|
orb.update();
|
|
orb.draw();
|
|
});
|
|
requestAnimationFrame(animate);
|
|
}
|
|
|
|
init();
|
|
animate();
|
|
|
|
// -- Pairing Logic --
|
|
const pairButton = document.getElementById('pair-button');
|
|
const qrContainer = document.getElementById('qr-container');
|
|
const pairCodeEl = document.getElementById('pair-code');
|
|
const cardContent = document.getElementById('card-content');
|
|
const spinner = document.getElementById('spinner');
|
|
const qrCodeInstance = new QRCode(qrContainer, {
|
|
width: 200,
|
|
height: 200,
|
|
colorDark: "#dfffe3",
|
|
colorLight: "rgba(0,0,0,0)",
|
|
correctLevel: QRCode.CorrectLevel.H
|
|
});
|
|
|
|
|
|
if (pairButton) {
|
|
pairButton.addEventListener('click', async () => {
|
|
spinner.style.display = 'block';
|
|
pairButton.style.display = 'none';
|
|
|
|
try {
|
|
const response = await fetch('api/sessions/create.php', { method: 'POST' });
|
|
if (!response.ok) {
|
|
throw new Error('Network response was not ok');
|
|
}
|
|
const data = await response.json();
|
|
|
|
if (data.success) {
|
|
cardContent.style.display = 'block';
|
|
pairCodeEl.textContent = data.pair_code;
|
|
qrCodeInstance.makeCode(data.qr_payload);
|
|
} else {
|
|
throw new Error(data.error || 'Failed to create session.');
|
|
}
|
|
|
|
} catch (error) {
|
|
console.error('Pairing error:', error);
|
|
alert('Could not create a new pairing session. Please try again.');
|
|
pairButton.style.display = 'inline-block';
|
|
} finally {
|
|
spinner.style.display = 'none';
|
|
}
|
|
});
|
|
}
|
|
});
|