feat: Implement comprehensive repository improvements
- Set up ESLint and Prettier for code quality - Split large script.js into modular architecture (DOM, animations, effects, easter-eggs, sound, interactions) - Organize assets into proper directory structure (assets/css, assets/js/modules, assets/images) - Add semantic HTML5 landmarks (header, main, nav, footer) - Implement ARIA labels and keyboard navigation for accessibility - Set up Vite build system with minification and optimization - Add CSS custom properties for design tokens - Create sitemap.xml and robots.txt for SEO - Add MIT LICENSE - Expand README with comprehensive documentation - Set up GitHub Actions CI/CD workflow - Optimize build output: ~59KB total (30KB image + 13KB CSS + 16KB JS gzipped) Co-authored-by: ZaneThePython <102631678+ZaneThePython@users.noreply.github.com>
This commit is contained in:
copilot-swe-agent[bot]
246
assets/js/modules/easter-eggs.js
Normal file
246
assets/js/modules/easter-eggs.js
Normal file
@@ -0,0 +1,246 @@
|
||||
// Easter eggs and interactive features
|
||||
import { getMainElements } from './dom.js';
|
||||
|
||||
// Show notification
|
||||
export function showNotification(message) {
|
||||
const notification = document.createElement('div');
|
||||
notification.style.position = 'fixed';
|
||||
notification.style.top = '20px';
|
||||
notification.style.right = '20px';
|
||||
notification.style.background = 'linear-gradient(135deg, #007acc, #00aaff)';
|
||||
notification.style.color = 'white';
|
||||
notification.style.padding = '1rem 2rem';
|
||||
notification.style.borderRadius = '10px';
|
||||
notification.style.boxShadow = '0 10px 30px rgba(0, 122, 204, 0.3)';
|
||||
notification.style.zIndex = '10000';
|
||||
notification.style.transform = 'translateX(100%)';
|
||||
notification.style.transition = 'transform 0.3s ease';
|
||||
notification.textContent = message;
|
||||
|
||||
document.body.appendChild(notification);
|
||||
|
||||
setTimeout(() => {
|
||||
notification.style.transform = 'translateX(0)';
|
||||
}, 100);
|
||||
|
||||
setTimeout(() => {
|
||||
notification.style.transform = 'translateX(100%)';
|
||||
setTimeout(() => {
|
||||
notification.remove();
|
||||
}, 300);
|
||||
}, 3000);
|
||||
}
|
||||
|
||||
// Konami Code activation
|
||||
function activateKonamiCode() {
|
||||
const body = document.body;
|
||||
body.style.animation = 'rainbow 2s ease infinite';
|
||||
|
||||
const style = document.createElement('style');
|
||||
style.textContent = `
|
||||
@keyframes rainbow {
|
||||
0% { filter: hue-rotate(0deg); }
|
||||
100% { filter: hue-rotate(360deg); }
|
||||
}
|
||||
`;
|
||||
document.head.appendChild(style);
|
||||
|
||||
setTimeout(() => {
|
||||
body.style.animation = '';
|
||||
style.remove();
|
||||
}, 5000);
|
||||
|
||||
showNotification('🎉 Konami Code Activated! You found the secret!');
|
||||
}
|
||||
|
||||
// Avatar Easter Egg
|
||||
function activateAvatarEasterEgg() {
|
||||
const { avatar } = getMainElements();
|
||||
if (!avatar) return;
|
||||
|
||||
avatar.style.animation = 'spin 1s linear infinite, bounce 0.5s ease infinite';
|
||||
|
||||
const style = document.createElement('style');
|
||||
style.textContent = `
|
||||
@keyframes spin {
|
||||
from { transform: rotate(0deg); }
|
||||
to { transform: rotate(360deg); }
|
||||
}
|
||||
@keyframes bounce {
|
||||
0%, 100% { transform: translateY(0); }
|
||||
50% { transform: translateY(-20px); }
|
||||
}
|
||||
`;
|
||||
document.head.appendChild(style);
|
||||
|
||||
setTimeout(() => {
|
||||
avatar.style.animation = '';
|
||||
style.remove();
|
||||
}, 3000);
|
||||
|
||||
showNotification('🔄 Avatar Spin Mode Activated!');
|
||||
}
|
||||
|
||||
// Brand Easter Egg
|
||||
function activateBrandEasterEgg() {
|
||||
const { brandName } = getMainElements();
|
||||
if (!brandName) return;
|
||||
|
||||
const originalText = brandName.textContent;
|
||||
const glitchTexts = ['Z4n3D3v', 'Z@n3D3v', 'ZaneDev', 'ZANE_DEV', 'zanedev'];
|
||||
let glitchIndex = 0;
|
||||
|
||||
const glitchInterval = setInterval(() => {
|
||||
brandName.textContent = glitchTexts[glitchIndex];
|
||||
glitchIndex = (glitchIndex + 1) % glitchTexts.length;
|
||||
}, 100);
|
||||
|
||||
setTimeout(() => {
|
||||
clearInterval(glitchInterval);
|
||||
brandName.textContent = originalText;
|
||||
}, 2000);
|
||||
|
||||
showNotification('⚡ Glitch Mode Activated!');
|
||||
}
|
||||
|
||||
// Trigger glitch effect
|
||||
export function triggerGlitch(durationMs = 1000) {
|
||||
const { brandName } = getMainElements();
|
||||
if (!brandName) return;
|
||||
|
||||
const originalText = brandName.textContent;
|
||||
const glitchTexts = ['Z4n3D3v', 'Z@n3D3v', 'ZaneDev', 'ZANE_DEV', 'zanedev'];
|
||||
let glitchIndex = 0;
|
||||
|
||||
const glitchInterval = setInterval(() => {
|
||||
brandName.textContent = glitchTexts[glitchIndex];
|
||||
glitchIndex = (glitchIndex + 1) % glitchTexts.length;
|
||||
}, 100);
|
||||
|
||||
setTimeout(() => {
|
||||
clearInterval(glitchInterval);
|
||||
brandName.textContent = originalText;
|
||||
}, durationMs);
|
||||
}
|
||||
|
||||
// Auto Glitch Mode
|
||||
export function startAutoGlitch() {
|
||||
setTimeout(() => triggerGlitch(1000), 100);
|
||||
setInterval(() => triggerGlitch(1000), 20000);
|
||||
}
|
||||
|
||||
// Add all Easter eggs
|
||||
export function addEasterEggs() {
|
||||
let clickCount = 0;
|
||||
const { avatar, brandName } = getMainElements();
|
||||
|
||||
// Konami Code
|
||||
const konamiCode = [38, 38, 40, 40, 37, 39, 37, 39, 66, 65];
|
||||
let konamiIndex = 0;
|
||||
|
||||
document.addEventListener('keydown', function (e) {
|
||||
if (e.keyCode === konamiCode[konamiIndex]) {
|
||||
konamiIndex++;
|
||||
if (konamiIndex === konamiCode.length) {
|
||||
activateKonamiCode();
|
||||
konamiIndex = 0;
|
||||
}
|
||||
} else {
|
||||
konamiIndex = 0;
|
||||
}
|
||||
});
|
||||
|
||||
// Avatar click counter
|
||||
if (avatar) {
|
||||
avatar.addEventListener('click', function () {
|
||||
clickCount++;
|
||||
if (clickCount === 5) {
|
||||
activateAvatarEasterEgg();
|
||||
clickCount = 0;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Brand name secret
|
||||
if (brandName) {
|
||||
brandName.addEventListener('dblclick', function () {
|
||||
activateBrandEasterEgg();
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// Secret "ZANE" sequence
|
||||
function activateSecretMode() {
|
||||
const body = document.body;
|
||||
body.style.animation = 'rainbow 1s ease infinite';
|
||||
|
||||
const style = document.createElement('style');
|
||||
style.textContent = `
|
||||
@keyframes rainbow {
|
||||
0% { filter: hue-rotate(0deg); }
|
||||
100% { filter: hue-rotate(360deg); }
|
||||
}
|
||||
`;
|
||||
document.head.appendChild(style);
|
||||
|
||||
setTimeout(() => {
|
||||
body.style.animation = '';
|
||||
style.remove();
|
||||
}, 3000);
|
||||
|
||||
showNotification('🎉 Secret "ZANE" sequence activated!');
|
||||
}
|
||||
|
||||
// Keyboard Interactions
|
||||
export function addKeyboardInteractions() {
|
||||
let keySequence = [];
|
||||
const secretKeys = ['z', 'a', 'n', 'e'];
|
||||
|
||||
document.addEventListener('keydown', function (e) {
|
||||
keySequence.push(e.key.toLowerCase());
|
||||
if (keySequence.length > secretKeys.length) {
|
||||
keySequence.shift();
|
||||
}
|
||||
|
||||
// Check for secret sequence
|
||||
if (keySequence.join('') === secretKeys.join('')) {
|
||||
activateSecretMode();
|
||||
keySequence = [];
|
||||
}
|
||||
|
||||
// Add visual feedback for key presses
|
||||
const keyElement = document.createElement('div');
|
||||
keyElement.textContent = e.key.toUpperCase();
|
||||
keyElement.style.position = 'fixed';
|
||||
keyElement.style.left = Math.random() * window.innerWidth + 'px';
|
||||
keyElement.style.top = Math.random() * window.innerHeight + 'px';
|
||||
keyElement.style.color = '#007acc';
|
||||
keyElement.style.fontSize = '2rem';
|
||||
keyElement.style.fontWeight = 'bold';
|
||||
keyElement.style.pointerEvents = 'none';
|
||||
keyElement.style.zIndex = '10000';
|
||||
keyElement.style.animation = 'keyPress 1s ease-out forwards';
|
||||
|
||||
document.body.appendChild(keyElement);
|
||||
|
||||
setTimeout(() => {
|
||||
keyElement.remove();
|
||||
}, 1000);
|
||||
});
|
||||
|
||||
// Add CSS for key press animation
|
||||
const style = document.createElement('style');
|
||||
style.textContent = `
|
||||
@keyframes keyPress {
|
||||
0% {
|
||||
opacity: 1;
|
||||
transform: scale(1) translateY(0);
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
transform: scale(0.5) translateY(-50px);
|
||||
}
|
||||
}
|
||||
`;
|
||||
document.head.appendChild(style);
|
||||
}
|
||||
Reference in New Issue
Block a user