109 lines
3.2 KiB
JavaScript
109 lines
3.2 KiB
JavaScript
document.addEventListener('DOMContentLoaded', () => {
|
|
// Inject Canvas for background if it doesn't exist
|
|
if (!document.getElementById('premiumParticleCanvas')) {
|
|
const canvas = document.createElement('canvas');
|
|
canvas.id = 'premiumParticleCanvas';
|
|
document.body.prepend(canvas);
|
|
|
|
// Initialize particle system if premium theme is active
|
|
if (document.body.getAttribute('data-premium-theme') === 'true') {
|
|
initPremiumParticleSystem();
|
|
}
|
|
}
|
|
});
|
|
|
|
// Global function to toggle theme, callable from Settings page
|
|
window.togglePremiumTheme = function(enable) {
|
|
const isEnabled = enable === true;
|
|
localStorage.setItem('app_premium_theme', isEnabled ? 'true' : 'false');
|
|
document.body.setAttribute('data-premium-theme', isEnabled ? 'true' : 'false');
|
|
|
|
if (isEnabled) {
|
|
initPremiumParticleSystem();
|
|
}
|
|
};
|
|
|
|
// --- Particle System (Lightweight Canvas) ---
|
|
let premiumParticlesInitialized = false;
|
|
|
|
function initPremiumParticleSystem() {
|
|
if (premiumParticlesInitialized) return;
|
|
premiumParticlesInitialized = true;
|
|
|
|
const canvas = document.getElementById('premiumParticleCanvas');
|
|
if (!canvas) return;
|
|
|
|
const ctx = canvas.getContext('2d');
|
|
let width, height, particles;
|
|
|
|
function resize() {
|
|
width = canvas.width = window.innerWidth;
|
|
height = canvas.height = window.innerHeight;
|
|
}
|
|
|
|
class Particle {
|
|
constructor() {
|
|
this.reset();
|
|
}
|
|
|
|
reset() {
|
|
this.x = Math.random() * width;
|
|
this.y = Math.random() * height;
|
|
this.size = Math.random() * 2 + 0.5;
|
|
this.speedX = (Math.random() - 0.5) * 0.5;
|
|
this.speedY = (Math.random() - 0.5) * 0.5;
|
|
this.opacity = Math.random() * 0.4 + 0.1;
|
|
}
|
|
|
|
update() {
|
|
this.x += this.speedX;
|
|
this.y += this.speedY;
|
|
|
|
if (this.x < 0 || this.x > width || this.y < 0 || this.y > height) {
|
|
this.reset();
|
|
}
|
|
}
|
|
|
|
draw() {
|
|
// Check if theme is still active before drawing
|
|
if (document.body.getAttribute('data-premium-theme') !== 'true') return;
|
|
|
|
// Simple white/grey particles for the bright premium theme
|
|
ctx.fillStyle = `rgba(0, 0, 0, ${this.opacity * 0.4})`;
|
|
ctx.beginPath();
|
|
ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
|
|
ctx.fill();
|
|
}
|
|
}
|
|
|
|
function init() {
|
|
resize();
|
|
particles = [];
|
|
const particleCount = Math.min(window.innerWidth / 15, 80);
|
|
for (let i = 0; i < particleCount; i++) {
|
|
particles.push(new Particle());
|
|
}
|
|
}
|
|
|
|
function animate() {
|
|
if (document.body.getAttribute('data-premium-theme') === 'true') {
|
|
ctx.clearRect(0, 0, width, height);
|
|
particles.forEach(p => {
|
|
p.update();
|
|
p.draw();
|
|
});
|
|
}
|
|
requestAnimationFrame(animate);
|
|
}
|
|
|
|
window.addEventListener('resize', () => {
|
|
if (document.body.getAttribute('data-premium-theme') === 'true') {
|
|
resize();
|
|
init();
|
|
}
|
|
});
|
|
|
|
init();
|
|
animate();
|
|
}
|