109 lines
3.4 KiB
JavaScript
109 lines
3.4 KiB
JavaScript
// Language selector functionality
|
|
function changeLanguage(lang) {
|
|
const url = new URL(window.location);
|
|
url.searchParams.set('lang', lang);
|
|
window.location.href = url.toString();
|
|
}
|
|
|
|
// Enhanced logo interaction
|
|
function logoClick() {
|
|
// Add a fun interaction when logo is clicked
|
|
const logo = document.querySelector('.logo');
|
|
logo.style.animationPlayState = 'running';
|
|
|
|
// Get a new "no" response when logo is clicked
|
|
setTimeout(() => {
|
|
location.reload();
|
|
}, 500);
|
|
}
|
|
|
|
// Sparkle effects on hover
|
|
function createSparkles(element) {
|
|
const rect = element.getBoundingClientRect();
|
|
const sparkles = 5;
|
|
|
|
for (let i = 0; i < sparkles; i++) {
|
|
const sparkle = document.createElement('div');
|
|
sparkle.innerHTML = '✨';
|
|
sparkle.style.position = 'fixed';
|
|
sparkle.style.left = (rect.left + Math.random() * rect.width) + 'px';
|
|
sparkle.style.top = (rect.top + Math.random() * rect.height) + 'px';
|
|
sparkle.style.fontSize = (Math.random() * 20 + 10) + 'px';
|
|
sparkle.style.pointerEvents = 'none';
|
|
sparkle.style.zIndex = '1000';
|
|
sparkle.style.animation = 'sparkleFloat 2s ease-out forwards';
|
|
|
|
document.body.appendChild(sparkle);
|
|
|
|
setTimeout(() => {
|
|
sparkle.remove();
|
|
}, 2000);
|
|
}
|
|
}
|
|
|
|
// Initialize event listeners when DOM is loaded
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
// Add sparkle effects on logo hover
|
|
const logo = document.querySelector('.logo');
|
|
if (logo) {
|
|
logo.addEventListener('mouseenter', function() {
|
|
createSparkles(this);
|
|
});
|
|
}
|
|
|
|
// Add keyboard shortcuts
|
|
document.addEventListener('keydown', function(event) {
|
|
// Press 'R' to refresh and get new response
|
|
if (event.key.toLowerCase() === 'r' && !event.ctrlKey && !event.metaKey) {
|
|
location.reload();
|
|
}
|
|
|
|
// Press 'L' to focus language selector
|
|
if (event.key.toLowerCase() === 'l' && !event.ctrlKey && !event.metaKey) {
|
|
const languageSelector = document.querySelector('.language-selector');
|
|
if (languageSelector) {
|
|
languageSelector.focus();
|
|
}
|
|
}
|
|
});
|
|
|
|
// Add subtle animations to elements on scroll (if needed in future)
|
|
const observer = new IntersectionObserver((entries) => {
|
|
entries.forEach(entry => {
|
|
if (entry.isIntersecting) {
|
|
entry.target.style.opacity = '1';
|
|
entry.target.style.transform = 'translateY(0)';
|
|
}
|
|
});
|
|
});
|
|
|
|
// Observe elements for animation (currently not needed but prepared for future use)
|
|
const animatedElements = document.querySelectorAll('.container > *');
|
|
animatedElements.forEach(el => {
|
|
observer.observe(el);
|
|
});
|
|
});
|
|
|
|
// Add some fun easter eggs
|
|
let clickCount = 0;
|
|
const logo = document.querySelector('.logo');
|
|
|
|
if (logo) {
|
|
logo.addEventListener('click', function() {
|
|
clickCount++;
|
|
|
|
// Easter egg: Multiple rapid clicks
|
|
if (clickCount >= 5) {
|
|
this.style.animation = 'logoShake 0.5s ease-in-out, rotate 2s linear infinite';
|
|
setTimeout(() => {
|
|
this.style.animation = 'logoFloat 4s ease-in-out infinite';
|
|
}, 2000);
|
|
clickCount = 0;
|
|
}
|
|
});
|
|
}
|
|
|
|
// Reset click count after a delay
|
|
setInterval(() => {
|
|
clickCount = 0;
|
|
}, 3000);
|