diff --git a/src/app/layout.tsx b/src/app/layout.tsx index 65f9382..77f1a25 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -31,125 +31,6 @@ export default function RootLayout({ dangerouslySetInnerHTML={{ __html: ` (function() { - // Initialize custom cursor and click sound - if (!window.__customCursorInitialized) { - window.__customCursorInitialized = true; - - // Create custom cursor elements - const cursorDot = document.createElement('div'); - cursorDot.id = 'custom-cursor-dot'; - cursorDot.style.cssText = 'position: fixed; width: 12px; height: 12px; background: radial-gradient(circle, #4d96ff, #2563eb); border-radius: 50%; pointer-events: none; z-index: 9999; box-shadow: 0 0 10px rgba(77, 150, 255, 0.6); display: none;'; - document.body.appendChild(cursorDot); - - const cursorRing = document.createElement('div'); - cursorRing.id = 'custom-cursor-ring'; - cursorRing.style.cssText = 'position: fixed; width: 32px; height: 32px; border: 2px solid #4d96ff; border-radius: 50%; pointer-events: none; z-index: 9998; display: none; box-shadow: 0 0 15px rgba(77, 150, 255, 0.4);'; - document.body.appendChild(cursorRing); - - // Trail particles - const trails = []; - const maxTrails = 8; - - function createTrail(x, y) { - const trail = document.createElement('div'); - trail.style.cssText = 'position: fixed; width: 6px; height: 6px; background: rgba(77, 150, 255, 0.6); border-radius: 50%; pointer-events: none; z-index: 9997;'; - trail.style.left = x + 'px'; - trail.style.top = y + 'px'; - document.body.appendChild(trail); - - trails.push({ element: trail, life: 1 }); - if (trails.length > maxTrails) { - const old = trails.shift(); - old.element.remove(); - } - - let opacity = 1; - const fadeInterval = setInterval(() => { - opacity -= 0.15; - trail.style.opacity = opacity; - if (opacity <= 0) { - clearInterval(fadeInterval); - trail.remove(); - } - }, 30); - } - - // Mouse move listener - let mouseX = 0, mouseY = 0; - let dotX = 0, dotY = 0; - let ringX = 0, ringY = 0; - - document.addEventListener('mousemove', (e) => { - mouseX = e.clientX; - mouseY = e.clientY; - - cursorDot.style.display = 'block'; - cursorRing.style.display = 'block'; - - createTrail(mouseX - 3, mouseY - 3); - }); - - // Smooth animation loop - function animateCursor() { - dotX += (mouseX - dotX) * 0.3; - dotY += (mouseY - dotY) * 0.3; - ringX += (mouseX - ringX) * 0.15; - ringY += (mouseY - ringY) * 0.15; - - cursorDot.style.left = (dotX - 6) + 'px'; - cursorDot.style.top = (dotY - 6) + 'px'; - cursorRing.style.left = (ringX - 16) + 'px'; - cursorRing.style.top = (ringY - 16) + 'px'; - - requestAnimationFrame(animateCursor); - } - animateCursor(); - - // Hide cursor on leave - document.addEventListener('mouseleave', () => { - cursorDot.style.display = 'none'; - cursorRing.style.display = 'none'; - }); - - // Click sound effect - function playClickSound() { - const audioContext = new (window.AudioContext || window.webkitAudioContext)(); - const oscillator = audioContext.createOscillator(); - const gainNode = audioContext.createGain(); - - oscillator.connect(gainNode); - gainNode.connect(audioContext.destination); - - oscillator.frequency.setValueAtTime(800, audioContext.currentTime); - oscillator.frequency.exponentialRampToValueAtTime(200, audioContext.currentTime + 0.1); - - gainNode.gain.setValueAtTime(0.3, audioContext.currentTime); - gainNode.gain.exponentialRampToValueAtTime(0.01, audioContext.currentTime + 0.1); - - oscillator.start(audioContext.currentTime); - oscillator.stop(audioContext.currentTime + 0.1); - } - - // Click listener - document.addEventListener('click', () => { - playClickSound(); - - // Pulse effect on ring - cursorRing.style.animation = 'none'; - setTimeout(() => { - cursorRing.style.animation = 'pulse 0.4s ease-out'; - }, 10); - }); - - // Add pulse animation - const style = document.createElement('style'); - style.textContent = '@keyframes pulse { 0% { transform: scale(1); opacity: 1; } 100% { transform: scale(1.5); opacity: 0; } }'; - document.head.appendChild(style); - - // Hide default cursor - document.documentElement.style.cursor = 'none'; - } - if (window.self === window.top) return; if (window.__webildEditorInitialized) return; @@ -224,76 +105,9 @@ export default function RootLayout({ ' pointer-events: none !important;' + ' z-index: 999998 !important;' + ' transition: all 0.15s ease !important;' + - '}' + - '.lofi-music-button {' + - ' position: fixed !important;' + - ' bottom: 30px !important;' + - ' right: 30px !important;' + - ' z-index: 999999 !important;' + - ' width: 50px !important;' + - ' height: 50px !important;' + - ' border-radius: 50% !important;' + - ' background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;' + - ' border: none !important;' + - ' color: white !important;' + - ' font-size: 24px !important;' + - ' cursor: pointer !important;' + - ' box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4) !important;' + - ' transition: all 0.3s ease !important;' + - ' display: flex !important;' + - ' align-items: center !important;' + - ' justify-content: center !important;' + - '}' + - '.lofi-music-button:hover {' + - ' transform: scale(1.1) !important;' + - ' box-shadow: 0 6px 20px rgba(102, 126, 234, 0.6) !important;' + - '}' + - '.lofi-music-button.playing {' + - ' animation: pulse-glow 2s ease-in-out infinite !important;' + - '}' + - '@keyframes pulse-glow {' + - ' 0%, 100% { box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4) !important; }' + - ' 50% { box-shadow: 0 4px 25px rgba(102, 126, 234, 0.8) !important; }' + '}'; document.head.appendChild(style); - // Create lofi music player - const audioContainer = document.createElement('div'); - audioContainer.id = 'lofi-music-container'; - - const audio = document.createElement('audio'); - audio.id = 'lofi-audio'; - audio.loop = true; - audio.volume = 0.3; - audio.src = 'https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3'; - audioContainer.appendChild(audio); - - const musicButton = document.createElement('button'); - musicButton.className = 'lofi-music-button playing'; - musicButton.innerHTML = '🎵'; - musicButton.title = 'Toggle lofi music'; - - let isPlaying = true; - audio.play().catch(() => { - isPlaying = false; - musicButton.classList.remove('playing'); - }); - - musicButton.addEventListener('click', () => { - if (isPlaying) { - audio.pause(); - musicButton.classList.remove('playing'); - isPlaying = false; - } else { - audio.play(); - musicButton.classList.add('playing'); - isPlaying = true; - } - }); - - document.body.appendChild(audioContainer); - document.body.appendChild(musicButton); - const getUniqueSelector = (element, assignId = false) => { if (element.dataset && element.dataset.webildSelector) { return element.dataset.webildSelector;