Spaces:
Running
Running
| // 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) { |