pixel-prophet-pro / script.js
gaara09's picture
the background should be interactive, fun and future looking, having tidbits of gaming and analytics, needs to have a dark mode and light mode toggle
2442ad4 verified
// Theme toggle functionality
function toggleTheme() {
document.body.classList.toggle('light-mode');
localStorage.setItem('theme', document.body.classList.contains('light-mode') ? 'light' : 'dark');
}
// Initialize theme from localStorage
const savedTheme = localStorage.getItem('theme') || 'dark';
if (savedTheme === 'light') {
document.body.classList.add('light-mode');
}
// Initialize particles
function initParticles() {
const particlesJS = window.particlesJS;
if (particlesJS) {
particlesJS('particles-js', {
particles: {
number: { value: 80, density: { enable: true, value_area: 800 } },
color: { value: "#6366f1" },
shape: {
type: ["circle", "triangle", "polygon"],
stroke: { width: 0, color: "#000000" },
polygon: { nb_sides: 6 }
},
opacity: {
value: 0.5,
random: true,
anim: { enable: false, speed: 1, opacity_min: 0.1, sync: false }
},
size: {
value: 3,
random: true,
anim: { enable: false, speed: 40, size_min: 0.1, sync: false }
},
line_linked: {
enable: true,
distance: 150,
color: "#6366f1",
opacity: 0.4,
width: 1
},
move: {
enable: true,
speed: 2,
direction: "none",
random: true,
straight: false,
out_mode: "out",
bounce: false,
attract: { enable: false, rotateX: 600, rotateY: 1200 }
}
},
interactivity: {
detect_on: "canvas",
events: {
onhover: { enable: true, mode: "grab" },
onclick: { enable: true, mode: "push" },
resize: true
},
modes: {
grab: { distance: 140, line_linked: { opacity: 1 } },
push: { particles_nb: 4 }
}
},
retina_detect: true
});
}
}
// Smooth scrolling for anchor links
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
document.querySelector(this.getAttribute('href')).scrollIntoView({
behavior: 'smooth'
});
});
});
// Initialize theme toggle button
document.addEventListener('DOMContentLoaded', function() {
const themeToggle = document.getElementById('themeToggle');
if (themeToggle) {
themeToggle.addEventListener('click', toggleTheme);
}
// Load particles.js
const particlesScript = document.createElement('script');
particlesScript.src = 'https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js';
particlesScript.onload = initParticles;
document.head.appendChild(particlesScript);
// Add game elements to background
const gameElements = ['๐ŸŽฎ', '๐Ÿ“Š', '๐Ÿ‘พ', '๐ŸŽฒ', '๐Ÿ’พ', '๐Ÿ”ข', '๐Ÿ“ˆ', '๐ŸŽฏ'];
const container = document.createElement('div');
container.className = 'game-elements-background';
document.body.appendChild(container);
for (let i = 0; i < 20; i++) {
const element = document.createElement('div');
element.className = 'game-element';
element.textContent = gameElements[Math.floor(Math.random() * gameElements.length)];
element.style.left = `${Math.random() * 100}%`;
element.style.top = `${Math.random() * 100}%`;
element.style.animationDuration = `${5 + Math.random() * 10}s`;
container.appendChild(element);
}
});
// Form submission handling
const contactForm = document.querySelector('form');
if (contactForm) {
contactForm.addEventListener('submit', function(e) {