diff --git a/submissions/Starlapse/background.js b/submissions/Starlapse/background.js new file mode 100644 index 00000000..9b246587 --- /dev/null +++ b/submissions/Starlapse/background.js @@ -0,0 +1,47 @@ +chrome.runtime.onInstalled.addListener(() => { + console.log('🌌 Starlapse v2.0 - Interstellar Edition has been installed!'); + + chrome.storage.local.set({ + firstLaunch: true, + totalActivations: 0 + }); + + if (chrome.notifications) { + chrome.notifications.create({ + type: 'basic', + iconUrl: 'icons/icon48.png', + title: 'Starlapse Interstellar Edition! 🌌', + message: 'Experience reading like never before with cinematic galaxy themes!' + }); + } +}); + +chrome.action.onClicked.addListener(async (tab) => { + console.log('🚀 Galactic portal accessed from:', tab.url); + + const data = await chrome.storage.local.get(['totalActivations']); + await chrome.storage.local.set({ totalActivations: (data.totalActivations || 0) + 1 }); +}); + +chrome.tabs.onUpdated.addListener((tabId, changeInfo, tab) => { + if (changeInfo.status === 'complete' && tab.url) { + console.log('🔍 Scanning for cosmic compatibility:', tab.url); + } +}); + +chrome.runtime.onMessage.addListener((request, sender, sendResponse) => { + if (request.action === 'cosmicTelemetry') { + console.log('📊 Cosmic telemetry received:', request.data); + sendResponse({ success: true }); + } +}); + +chrome.runtime.onUpdateAvailable.addListener(() => { + console.log('🔄 Cosmic update available! Enhanced galactic features incoming!'); +}); + +chrome.runtime.onStartup.addListener(async () => { + const data = await chrome.storage.local.get(['totalLaunches']); + await chrome.storage.local.set({ totalLaunches: (data.totalLaunches || 0) + 1 }); + console.log('🌟 Cosmic journey continues! Launch #' + ((data.totalLaunches || 0) + 1)); +}); diff --git a/submissions/Starlapse/content.js b/submissions/Starlapse/content.js new file mode 100644 index 00000000..d8aa0947 --- /dev/null +++ b/submissions/Starlapse/content.js @@ -0,0 +1,2078 @@ +class GalacticReader { + constructor() { + this.isActive = false; + this.readerModeId = 'galactic-reader-mode'; + this.readingStartTime = null; + this.currentGalaxy = 'andromeda'; + this.readingProgress = 0; + this.animationFrameId = null; + this.starField = []; + this.quantumParticles = []; + this.stopwatchInterval = null; + this.focusModeActive = false; + + chrome.runtime.onMessage.addListener((request, sender, sendResponse) => { + if (request.action === 'activateGalacticMode') { + this.activateGalacticReader(); + sendResponse({ success: true }); + } else if (request.action === 'deactivateGalacticMode') { + this.deactivateGalacticReader(); + sendResponse({ success: true }); + } else if (request.action === 'checkState') { + sendResponse({ isActive: this.isActive }); + } else if (request.action === 'changeGalaxy') { + this.changeGalaxy(request.galaxy); + sendResponse({ success: true }); + } else if (request.action === 'triggerCosmicEvent') { + this.triggerCosmicEvent(request.event); + sendResponse({ success: true }); + } + }); + + this.checkPersistentMode(); + } + + async checkPersistentMode() { + try { + const hostname = window.location.hostname; + const data = await chrome.storage.local.get([`galactic_${hostname}`]); + if (data[`galactic_${hostname}`]) { + setTimeout(() => this.activateGalacticReader(), 1000); + } + } catch (error) { + console.log('Could not check persistent mode:', error); + } + } + + async activateGalacticReader() { + if (this.isActive) return; + + this.isActive = true; + this.readingStartTime = Date.now(); + + const hostname = window.location.hostname; + try { + await chrome.storage.local.set({ [`galactic_${hostname}`]: true }); + } catch (error) { + console.log('Could not save persistent state:', error); + } + + this.createInterstellarGalacticReader(); + this.initializeInterstellarBackground(); + this.startAnimationLoop(); + this.setupReadingProgress(); + this.initializeQuantumEffects(); + this.startStopwatch(); + } + + async deactivateGalacticReader() { + if (!this.isActive) return; + + this.isActive = false; + + const hostname = window.location.hostname; + try { + await chrome.storage.local.remove(`galactic_${hostname}`); + } catch (error) { + console.log('Could not remove persistent state:', error); + } + + this.removeGalacticReader(); + this.stopAnimationLoop(); + this.stopStopwatch(); + } + + createInterstellarGalacticReader() { + const existing = document.getElementById(this.readerModeId); + if (existing) existing.remove(); + + const content = this.extractMainContent(); + + const readerOverlay = document.createElement('div'); + readerOverlay.id = this.readerModeId; + readerOverlay.innerHTML = ` +
+ +
+
+
+
+
+
+
+
+
+ + +
+
+
+
+
+
+
+ + +
+
+
+
+
+
+
+
+
+
+
+ + +
+ +
+
+ ${this.getGalaxyName()} +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+ 0% +
+ +
+
+ + + + 00:00 +
+ + +
+
+ + +
+
+ ${content} +
+
+
+ + +
+
+
+ `; + + const style = document.createElement('style'); + style.textContent = ` + #${this.readerModeId} { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + z-index: 999999; + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif; + animation: interstellar-entrance 2.5s cubic-bezier(0.25, 0.46, 0.45, 0.94); + overflow: hidden; + } + + @keyframes interstellar-entrance { + 0% { + opacity: 0; + transform: scale(0.8) perspective(1000px) rotateX(10deg); + filter: blur(20px); + } + 50% { + opacity: 0.7; + transform: scale(0.95) perspective(1000px) rotateX(5deg); + filter: blur(10px); + } + 100% { + opacity: 1; + transform: scale(1) perspective(1000px) rotateX(0deg); + filter: blur(0); + } + } + + .galactic-universe-interstellar { + position: relative; + width: 100%; + height: 100%; + overflow: hidden; + transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94); + } + + /* Enhanced Interstellar Background System */ + .interstellar-backdrop { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + overflow: hidden; + transition: opacity 0.6s ease; + } + + .deep-space-void { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: + radial-gradient(ellipse at 30% 20%, rgba(0, 0, 0, 1) 0%, rgba(5, 5, 15, 0.9) 40%, rgba(10, 10, 20, 0.8) 100%), + radial-gradient(ellipse at 70% 80%, rgba(0, 0, 0, 1) 0%, rgba(8, 5, 20, 0.9) 50%, rgba(15, 10, 25, 0.7) 100%); + animation: void-pulse 25s ease-in-out infinite alternate; + } + + @keyframes void-pulse { + 0% { transform: scale(1) rotate(0deg); opacity: 0.9; } + 100% { transform: scale(1.03) rotate(1deg); opacity: 1; } + } + + .galaxy-spiral-arms { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: + conic-gradient(from 0deg at 80% 20%, + transparent 0deg, + rgba(255, 140, 0, 0.08) 60deg, + rgba(255, 100, 0, 0.12) 120deg, + rgba(200, 80, 20, 0.06) 180deg, + transparent 240deg), + conic-gradient(from 180deg at 20% 80%, + transparent 0deg, + rgba(100, 50, 200, 0.06) 45deg, + rgba(138, 43, 226, 0.1) 90deg, + rgba(75, 25, 150, 0.04) 135deg, + transparent 180deg); + animation: spiral-rotation 60s linear infinite; + opacity: 0.7; + } + + @keyframes spiral-rotation { + 0% { transform: rotate(0deg); } + 100% { transform: rotate(360deg); } + } + + .stellar-nursery { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: + radial-gradient(ellipse 800px 300px at 10% 30%, rgba(100, 50, 200, 0.15) 0%, transparent 70%), + radial-gradient(ellipse 600px 400px at 90% 70%, rgba(50, 150, 200, 0.12) 0%, transparent 60%), + radial-gradient(ellipse 400px 600px at 50% 90%, rgba(200, 100, 50, 0.08) 0%, transparent 50%), + radial-gradient(ellipse 500px 200px at 70% 20%, rgba(255, 100, 150, 0.06) 0%, transparent 40%); + animation: stellar-flow 35s ease-in-out infinite alternate; + } + + @keyframes stellar-flow { + 0% { + transform: translateX(-30px) translateY(-20px) rotate(-1deg); + opacity: 0.8; + } + 100% { + transform: translateX(30px) translateY(20px) rotate(1deg); + opacity: 1; + } + } + + .cosmic-radiation { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-image: + radial-gradient(1px 1px at 25px 35px, rgba(255,255,255,0.9) 100%, transparent 0), + radial-gradient(1px 1px at 85px 75px, rgba(255,255,255,0.7) 100%, transparent 0), + radial-gradient(1px 1px at 145px 45px, rgba(255,255,255,0.8) 100%, transparent 0), + radial-gradient(1px 1px at 195px 85px, rgba(255,255,255,0.6) 100%, transparent 0), + radial-gradient(0.5px 0.5px at 65px 125px, rgba(200,200,255,0.8) 100%, transparent 0), + radial-gradient(0.5px 0.5px at 165px 15px, rgba(255,200,200,0.7) 100%, transparent 0); + background-repeat: repeat; + background-size: 220px 140px; + animation: radiation-drift 60s linear infinite; + opacity: 0.5; + } + + @keyframes radiation-drift { + 0% { transform: translateX(0) translateY(0); } + 100% { transform: translateX(-220px) translateY(-140px); } + } + + .gravitational-waves { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: + radial-gradient(circle at 20% 30%, rgba(255, 255, 255, 0.03) 0%, transparent 40%), + radial-gradient(circle at 80% 70%, rgba(255, 255, 255, 0.025) 0%, transparent 50%), + radial-gradient(circle at 50% 50%, rgba(200, 150, 255, 0.02) 0%, transparent 60%); + animation: gravitational-ripple 20s ease-in-out infinite; + } + + @keyframes gravitational-ripple { + 0%, 100% { + transform: scale(1); + opacity: 0.4; + } + 50% { + transform: scale(1.05); + opacity: 0.7; + } + } + + .quantum-foam { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: + radial-gradient(1px 1px at 15% 25%, rgba(150, 255, 150, 0.3) 0%, transparent 50%), + radial-gradient(1px 1px at 85% 75%, rgba(255, 150, 255, 0.3) 0%, transparent 50%), + radial-gradient(1px 1px at 45% 85%, rgba(150, 150, 255, 0.3) 0%, transparent 50%); + animation: quantum-fluctuation 8s ease-in-out infinite; + opacity: 0.2; + } + + @keyframes quantum-fluctuation { + 0%, 100% { opacity: 0.2; transform: scale(1); } + 50% { opacity: 0.4; transform: scale(1.02); } + } + + .dark-matter-web { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: + linear-gradient(45deg, transparent 48%, rgba(80, 80, 120, 0.1) 49%, rgba(80, 80, 120, 0.1) 51%, transparent 52%), + linear-gradient(-45deg, transparent 48%, rgba(120, 80, 80, 0.1) 49%, rgba(120, 80, 80, 0.1) 51%, transparent 52%); + background-size: 200px 200px; + animation: web-drift 45s linear infinite; + opacity: 0.3; + } + + @keyframes web-drift { + 0% { transform: translateX(0) translateY(0); } + 100% { transform: translateX(-200px) translateY(-200px); } + } + + /* Enhanced Cinematic Black Hole System */ + .interstellar-black-hole { + position: absolute; + top: 15%; + right: 8%; + width: 250px; + height: 250px; + opacity: 0.4; + animation: black-hole-system-rotation 120s linear infinite; + } + + @keyframes black-hole-system-rotation { + 0% { transform: rotate(0deg); } + 100% { transform: rotate(360deg); } + } + + .event-horizon-ring { + position: absolute; + top: 50%; + left: 50%; + width: 70px; + height: 70px; + transform: translate(-50%, -50%); + background: radial-gradient(circle, transparent 30%, rgba(0, 0, 0, 1) 35%, rgba(0, 0, 0, 0.8) 50%, transparent 55%); + border-radius: 50%; + box-shadow: + inset 0 0 40px rgba(0, 0, 0, 1), + 0 0 60px rgba(255, 140, 0, 0.3); + } + + .accretion-disk-main { + position: absolute; + top: 50%; + left: 50%; + width: 200px; + height: 200px; + transform: translate(-50%, -50%); + background: + conic-gradient(from 0deg, + transparent 0deg, + rgba(255, 140, 0, 0.4) 45deg, + rgba(255, 100, 0, 0.5) 90deg, + rgba(200, 80, 20, 0.3) 135deg, + rgba(150, 60, 0, 0.15) 180deg, + rgba(100, 40, 0, 0.08) 225deg, + rgba(80, 30, 0, 0.04) 270deg, + transparent 315deg); + border-radius: 50%; + animation: accretion-main-spin 15s linear infinite; + mask: radial-gradient(circle, transparent 35%, white 40%, white 80%, transparent 85%); + -webkit-mask: radial-gradient(circle, transparent 35%, white 40%, white 80%, transparent 85%); + } + + @keyframes accretion-main-spin { + 0% { transform: translate(-50%, -50%) rotate(0deg); } + 100% { transform: translate(-50%, -50%) rotate(360deg); } + } + + .photon-sphere { + position: absolute; + top: 50%; + left: 50%; + width: 140px; + height: 140px; + transform: translate(-50%, -50%); + border: 2px solid rgba(255, 255, 255, 0.15); + border-radius: 50%; + animation: photon-orbit 8s linear infinite; + } + + @keyframes photon-orbit { + 0% { transform: translate(-50%, -50%) rotate(0deg) scale(1); } + 50% { transform: translate(-50%, -50%) rotate(180deg) scale(1.05); } + 100% { transform: translate(-50%, -50%) rotate(360deg) scale(1); } + } + + .relativistic-jets { + position: absolute; + top: 50%; + left: 50%; + width: 4px; + height: 300px; + transform: translate(-50%, -50%); + background: linear-gradient(0deg, + transparent 0%, + rgba(100, 150, 255, 0.3) 20%, + rgba(150, 200, 255, 0.5) 50%, + rgba(100, 150, 255, 0.3) 80%, + transparent 100%); + animation: jet-pulse 4s ease-in-out infinite; + } + + @keyframes jet-pulse { + 0%, 100% { opacity: 0.3; transform: translate(-50%, -50%) scaleY(1); } + 50% { opacity: 0.7; transform: translate(-50%, -50%) scaleY(1.2); } + } + + /* Enhanced Floating Celestial Bodies */ + .celestial-system { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + pointer-events: none; + } + + .stellar-object { + position: absolute; + border-radius: 50%; + opacity: 0.7; + } + + .star-1 { + top: 20%; + left: 15%; + width: 10px; + height: 10px; + background: radial-gradient(circle, #ffffff 0%, rgba(255, 255, 255, 0.9) 40%, transparent 100%); + animation: stellar-twinkle 4s ease-in-out infinite, stellar-drift-1 30s ease-in-out infinite alternate; + box-shadow: 0 0 25px rgba(255, 255, 255, 0.5); + } + + .star-2 { + top: 70%; + left: 85%; + width: 8px; + height: 8px; + background: radial-gradient(circle, #ffeb3b 0%, rgba(255, 235, 59, 0.9) 40%, transparent 100%); + animation: stellar-twinkle 6s ease-in-out infinite, stellar-drift-2 25s ease-in-out infinite alternate; + box-shadow: 0 0 20px rgba(255, 235, 59, 0.5); + } + + .star-3 { + top: 40%; + left: 90%; + width: 6px; + height: 6px; + background: radial-gradient(circle, #ff6b6b 0%, rgba(255, 107, 107, 0.9) 40%, transparent 100%); + animation: stellar-twinkle 5s ease-in-out infinite, stellar-drift-3 35s ease-in-out infinite alternate; + box-shadow: 0 0 18px rgba(255, 107, 107, 0.5); + } + + .nebula-1 { + top: 40%; + left: 5%; + width: 50px; + height: 50px; + background: radial-gradient(ellipse, rgba(138, 43, 226, 0.4) 0%, rgba(138, 43, 226, 0.15) 60%, transparent 100%); + animation: nebula-pulse 12s ease-in-out infinite, nebula-drift 40s ease-in-out infinite alternate; + filter: blur(2px); + } + + .nebula-2 { + top: 80%; + left: 10%; + width: 60px; + height: 40px; + background: radial-gradient(ellipse, rgba(50, 150, 200, 0.3) 0%, rgba(50, 150, 200, 0.1) 60%, transparent 100%); + animation: nebula-pulse 15s ease-in-out infinite, nebula-drift-2 45s ease-in-out infinite alternate; + filter: blur(3px); + } + + .planet-1 { + top: 60%; + left: 20%; + width: 14px; + height: 14px; + background: linear-gradient(45deg, #4fc3f7, #29b6f6); + animation: planetary-orbit 45s linear infinite; + box-shadow: 0 0 12px rgba(79, 195, 247, 0.4); + } + + .planet-2 { + top: 80%; + left: 70%; + width: 12px; + height: 12px; + background: linear-gradient(45deg, #ff8a65, #ff7043); + animation: planetary-orbit 60s linear infinite reverse; + box-shadow: 0 0 10px rgba(255, 138, 101, 0.4); + } + + .comet-1 { + top: 30%; + left: 70%; + width: 6px; + height: 6px; + background: radial-gradient(circle, #ffffff, #e3f2fd); + animation: comet-trail 25s linear infinite; + box-shadow: 0 0 15px rgba(255, 255, 255, 0.6); + } + + .quasar-beam { + position: absolute; + top: 10%; + left: 80%; + width: 2px; + height: 100px; + background: linear-gradient(0deg, transparent, rgba(100, 255, 255, 0.6), transparent); + animation: quasar-pulse 8s ease-in-out infinite; + filter: blur(1px); + } + + @keyframes stellar-twinkle { + 0%, 100% { opacity: 0.7; transform: scale(1); } + 50% { opacity: 1; transform: scale(1.4); } + } + + @keyframes stellar-drift-1 { + 0% { transform: translateX(0) translateY(0); } + 100% { transform: translateX(25px) translateY(-15px); } + } + + @keyframes stellar-drift-2 { + 0% { transform: translateX(0) translateY(0); } + 100% { transform: translateX(-20px) translateY(20px); } + } + + @keyframes stellar-drift-3 { + 0% { transform: translateX(0) translateY(0); } + 100% { transform: translateX(-10px) translateY(-25px); } + } + + @keyframes nebula-pulse { + 0%, 100% { opacity: 0.7; transform: scale(1); } + 50% { opacity: 1; transform: scale(1.3); } + } + + @keyframes nebula-drift { + 0% { transform: translateX(0) translateY(0) rotate(0deg); } + 100% { transform: translateX(35px) translateY(-25px) rotate(15deg); } + } + + @keyframes nebula-drift-2 { + 0% { transform: translateX(0) translateY(0) rotate(0deg); } + 100% { transform: translateX(-25px) translateY(15px) rotate(-10deg); } + } + + @keyframes planetary-orbit { + 0% { transform: translateX(0) translateY(0) rotate(0deg); } + 25% { transform: translateX(35px) translateY(-20px) rotate(90deg); } + 50% { transform: translateX(0) translateY(-40px) rotate(180deg); } + 75% { transform: translateX(-35px) translateY(-20px) rotate(270deg); } + 100% { transform: translateX(0) translateY(0) rotate(360deg); } + } + + @keyframes comet-trail { + 0% { + transform: translateX(100px) translateY(-50px) rotate(45deg); + opacity: 0; + } + 10% { opacity: 1; } + 90% { opacity: 0.8; } + 100% { + transform: translateX(-400px) translateY(300px) rotate(45deg); + opacity: 0; + } + } + + @keyframes quasar-pulse { + 0%, 100% { opacity: 0.3; transform: scaleY(1); } + 50% { opacity: 0.8; transform: scaleY(1.5); } + } + + /* Professional Reading Interface */ + .reading-interface-interstellar { + position: relative; + width: 100%; + height: 100%; + z-index: 10; + } + + .reader-header-pro { + position: sticky; + top: 0; + left: 0; + right: 0; + height: 70px; + background: rgba(0, 0, 0, 0.9); + backdrop-filter: blur(30px); + border-bottom: 2px solid rgba(255, 255, 255, 0.1); + display: flex; + align-items: center; + justify-content: space-between; + padding: 0 40px; + z-index: 20; + animation: header-slide-in 1s ease-out 0.5s both; + box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3); + } + + @keyframes header-slide-in { + 0% { transform: translateY(-100%); opacity: 0; } + 100% { transform: translateY(0); opacity: 1; } + } + + .galaxy-selector-pro { + display: flex; + align-items: center; + gap: 20px; + } + + .galaxy-name-pro { + font-size: 16px; + font-weight: 700; + color: rgba(255, 255, 255, 0.95); + letter-spacing: 1px; + text-transform: uppercase; + text-shadow: 0 0 10px rgba(255, 255, 255, 0.3); + } + + .galaxy-dots-pro { + display: flex; + gap: 12px; + } + + .dot-pro { + width: 12px; + height: 12px; + border-radius: 50%; + background: rgba(255, 255, 255, 0.3); + cursor: pointer; + transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); + position: relative; + overflow: hidden; + } + + .dot-glow { + position: absolute; + top: -2px; + left: -2px; + right: -2px; + bottom: -2px; + background: inherit; + border-radius: 50%; + filter: blur(4px); + opacity: 0; + transition: opacity 0.4s ease; + } + + .dot-pro:hover { + background: rgba(255, 255, 255, 0.7); + transform: scale(1.4); + } + + .dot-pro:hover .dot-glow { + opacity: 0.8; + } + + .dot-pro.active { + transform: scale(1.3); + box-shadow: 0 0 20px rgba(255, 255, 255, 0.7); + } + + .dot-pro.active .dot-glow { + opacity: 1; + } + + .progress-system { + display: flex; + align-items: center; + gap: 18px; + flex: 1; + max-width: 300px; + margin: 0 40px; + } + + .progress-track-pro { + flex: 1; + height: 10px; + background: rgba(255, 255, 255, 0.1); + border-radius: 5px; + overflow: hidden; + position: relative; + box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.4); + } + + .progress-fill-pro { + height: 100%; + width: 0%; + border-radius: 5px; + transition: width 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); + position: relative; + overflow: hidden; + } + + .progress-glow { + position: absolute; + top: 0; + right: 0; + width: 25px; + height: 100%; + background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5)); + animation: progress-shimmer 2s ease-in-out infinite; + } + + .progress-particles { + position: absolute; + top: 50%; + right: 0; + width: 6px; + height: 6px; + background: rgba(255, 255, 255, 0.8); + border-radius: 50%; + transform: translateY(-50%); + animation: particle-flow 1s ease-in-out infinite; + } + + @keyframes progress-shimmer { + 0%, 100% { opacity: 0; } + 50% { opacity: 1; } + } + + @keyframes particle-flow { + 0%, 100% { opacity: 0.5; transform: translateY(-50%) scale(1); } + 50% { opacity: 1; transform: translateY(-50%) scale(1.3); } + } + + .progress-text-pro { + font-size: 14px; + font-weight: 700; + color: rgba(255, 255, 255, 0.9); + min-width: 45px; + text-align: right; + text-shadow: 0 0 5px rgba(255, 255, 255, 0.3); + } + + .reader-controls-pro { + display: flex; + align-items: center; + gap: 18px; + } + + .stopwatch-display { + display: flex; + align-items: center; + padding: 8px 12px; + background: rgba(255, 255, 255, 0.08); + border: 2px solid rgba(255, 255, 255, 0.15); + border-radius: 12px; + color: rgba(255, 255, 255, 0.9); + font-size: 14px; + font-weight: 600; + font-family: 'SF Mono', Monaco, 'Cascadia Code', monospace; + text-shadow: 0 0 5px rgba(255, 255, 255, 0.3); + backdrop-filter: blur(10px); + box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3); + } + + .control-btn-pro { + width: 44px; + height: 44px; + border: 2px solid rgba(255, 255, 255, 0.2); + background: rgba(255, 255, 255, 0.08); + border-radius: 12px; + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); + color: rgba(255, 255, 255, 0.8); + position: relative; + overflow: hidden; + } + + .control-btn-pro::before { + content: ''; + position: absolute; + top: 0; + left: -100%; + width: 100%; + height: 100%; + background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent); + transition: left 0.6s; + } + + .control-btn-pro:hover::before { + left: 100%; + } + + .control-btn-pro:hover { + background: rgba(255, 255, 255, 0.15); + border-color: rgba(255, 255, 255, 0.4); + color: rgba(255, 255, 255, 1); + transform: translateY(-3px); + box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4); + } + + .control-btn-pro.active { + background: rgba(138, 43, 226, 0.4); + border-color: rgba(138, 43, 226, 0.8); + color: #ffffff; + box-shadow: 0 0 25px rgba(138, 43, 226, 0.5); + } + + .focus-btn.active { + background: rgba(0, 191, 255, 0.4); + border-color: rgba(0, 191, 255, 0.8); + box-shadow: 0 0 25px rgba(0, 191, 255, 0.5); + } + + .exit-btn:hover { + background: rgba(255, 59, 48, 0.3) !important; + border-color: rgba(255, 59, 48, 0.6) !important; + box-shadow: 0 0 20px rgba(255, 59, 48, 0.4) !important; + } + + /* Immersive Reading Content */ + .reader-scroll-interstellar { + height: calc(100vh - 70px); + overflow-y: auto; + scroll-behavior: smooth; + animation: content-fade-in 1.5s ease-out 1s both; + } + + @keyframes content-fade-in { + 0% { opacity: 0; transform: translateY(40px); } + 100% { opacity: 1; transform: translateY(0); } + } + + .reader-scroll-interstellar::-webkit-scrollbar { + width: 12px; + } + + .reader-scroll-interstellar::-webkit-scrollbar-track { + background: rgba(255, 255, 255, 0.05); + border-radius: 6px; + } + + .reader-scroll-interstellar::-webkit-scrollbar-thumb { + border-radius: 6px; + transition: background 0.3s ease; + } + + .reader-scroll-interstellar::-webkit-scrollbar-thumb:hover { + background: rgba(255, 255, 255, 0.4); + } + + .reader-content-interstellar { + max-width: 900px; + margin: 0 auto; + padding: 90px 70px 180px; + color: #e8f4fd; + font-family: 'Georgia', 'Times New Roman', serif; + font-size: 20px; + line-height: 1.8; + font-weight: 400; + position: relative; + transition: filter 0.6s ease, text-shadow 0.6s ease; + } + + .reader-content-interstellar::selection { + background: rgba(138, 43, 226, 0.5); + color: #ffffff; + } + + .reader-content-interstellar h1 { + font-size: 3em; + font-weight: 800; + line-height: 1.2; + margin: 0 0 2.5em 0; + color: #ffffff; + text-align: center; + position: relative; + text-shadow: 0 0 20px rgba(255, 255, 255, 0.3); + } + + .reader-content-interstellar h1::after { + content: ''; + position: absolute; + bottom: -25px; + left: 50%; + transform: translateX(-50%); + width: 140px; + height: 4px; + border-radius: 2px; + } + + .reader-content-interstellar h2 { + font-size: 2.2em; + font-weight: 700; + line-height: 1.3; + margin: 3.5em 0 1.5em 0; + color: #b8d4f0; + position: relative; + padding-left: 30px; + } + + .reader-content-interstellar h2::before { + content: ''; + position: absolute; + left: 0; + top: 0.3em; + width: 6px; + height: 1.6em; + border-radius: 3px; + } + + .reader-content-interstellar h3 { + font-size: 1.8em; + font-weight: 600; + line-height: 1.4; + margin: 3em 0 1.2em 0; + color: #94a3b8; + } + + .reader-content-interstellar p { + margin: 2em 0; + color: #cbd5e1; + text-align: justify; + hyphens: auto; + } + + .reader-content-interstellar p:first-of-type { + font-size: 1.2em; + color: #e2e8f0; + font-weight: 500; + line-height: 1.7; + } + + .reader-content-interstellar a { + color: #60a5fa; + text-decoration: none; + border-bottom: 2px solid rgba(96, 165, 250, 0.4); + transition: all 0.3s ease; + } + + .reader-content-interstellar a:hover { + color: #93c5fd; + border-bottom-color: #93c5fd; + text-shadow: 0 0 10px rgba(147, 197, 253, 0.5); + } + + .reader-content-interstellar img { + max-width: 100%; + height: auto; + border-radius: 18px; + margin: 3.5em 0; + box-shadow: 0 30px 60px rgba(0, 0, 0, 0.5); + border: 3px solid rgba(255, 255, 255, 0.1); + } + + .reader-content-interstellar blockquote { + margin: 3.5em 0; + padding: 2.5em 3em; + background: rgba(30, 41, 59, 0.5); + border-left: 6px solid; + border-radius: 0 15px 15px 0; + font-style: italic; + color: #94a3b8; + position: relative; + backdrop-filter: blur(15px); + } + + .reader-content-interstellar blockquote::before { + content: '"'; + position: absolute; + top: -20px; + left: 25px; + font-size: 5em; + font-family: Georgia, serif; + opacity: 0.4; + } + + .reader-content-interstellar code { + background: rgba(15, 23, 42, 0.9); + color: #a78bfa; + padding: 0.4em 0.6em; + border-radius: 8px; + font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, monospace; + font-size: 0.9em; + border: 1px solid rgba(167, 139, 250, 0.3); + } + + .reader-content-interstellar pre { + background: rgba(15, 23, 42, 0.95); + padding: 2.5em; + border-radius: 15px; + overflow-x: auto; + margin: 3.5em 0; + border: 2px solid rgba(255, 255, 255, 0.1); + backdrop-filter: blur(15px); + } + + .reader-content-interstellar pre code { + background: none; + border: none; + color: #e2e8f0; + padding: 0; + } + + /* Enhanced Galaxy Themes with Full Page Theming */ + .galaxy-andromeda { + background: + radial-gradient(ellipse at 30% 20%, rgba(138, 43, 226, 0.25) 0%, transparent 50%), + radial-gradient(ellipse at 70% 80%, rgba(255, 20, 147, 0.2) 0%, transparent 60%), + radial-gradient(ellipse at 50% 50%, rgba(186, 85, 211, 0.15) 0%, transparent 70%), + linear-gradient(135deg, #0a0a0f 0%, #1a0f2e 30%, #2a1540 50%, #1a0f2e 70%, #0a0a0f 100%); + } + + .galaxy-andromeda .progress-fill-pro { + background: linear-gradient(90deg, #8a2be2, #ff1493, #da70d6, #ba55d3); + box-shadow: 0 0 15px rgba(138, 43, 226, 0.5); + } + + .galaxy-andromeda .reader-content-interstellar h1::after { + background: linear-gradient(90deg, #8a2be2, #ff1493); + box-shadow: 0 0 20px rgba(138, 43, 226, 0.6); + } + + .galaxy-andromeda .reader-content-interstellar h2::before { + background: linear-gradient(180deg, #8a2be2, #ff1493); + } + + .galaxy-andromeda .reader-content-interstellar blockquote { + border-left-color: #8a2be2; + background: rgba(138, 43, 226, 0.1); + } + + .galaxy-andromeda .reader-content-interstellar blockquote::before { + color: rgba(138, 43, 226, 0.4); + } + + .galaxy-andromeda .reader-scroll-interstellar::-webkit-scrollbar-thumb { + background: linear-gradient(180deg, #8a2be2, #ff1493); + } + + .galaxy-andromeda .dot-pro.active { + background: linear-gradient(45deg, #8a2be2, #ff1493); + } + + .galaxy-milkyway { + background: + radial-gradient(ellipse at 25% 30%, rgba(255, 215, 0, 0.2) 0%, transparent 60%), + radial-gradient(ellipse at 75% 70%, rgba(255, 140, 0, 0.15) 0%, transparent 50%), + radial-gradient(ellipse at 50% 50%, rgba(255, 165, 0, 0.12) 0%, transparent 70%), + linear-gradient(135deg, #0a0a0f 0%, #2a1f0f 30%, #3a2f1f 50%, #2a1f0f 70%, #0a0a0f 100%); + } + + .galaxy-milkyway .progress-fill-pro { + background: linear-gradient(90deg, #ffd700, #ffb347, #ff8c00, #daa520); + box-shadow: 0 0 15px rgba(255, 215, 0, 0.5); + } + + .galaxy-milkyway .reader-content-interstellar h1::after { + background: linear-gradient(90deg, #ffd700, #ff8c00); + box-shadow: 0 0 20px rgba(255, 215, 0, 0.6); + } + + .galaxy-milkyway .reader-content-interstellar h2::before { + background: linear-gradient(180deg, #ffd700, #ff8c00); + } + + .galaxy-milkyway .reader-content-interstellar blockquote { + border-left-color: #ffd700; + background: rgba(255, 215, 0, 0.08); + } + + .galaxy-milkyway .reader-content-interstellar blockquote::before { + color: rgba(255, 215, 0, 0.4); + } + + .galaxy-milkyway .reader-scroll-interstellar::-webkit-scrollbar-thumb { + background: linear-gradient(180deg, #ffd700, #ff8c00); + } + + .galaxy-milkyway .dot-pro.active { + background: linear-gradient(45deg, #ffd700, #ff8c00); + } + + .galaxy-whirlpool { + background: + radial-gradient(ellipse at 20% 70%, rgba(0, 191, 255, 0.2) 0%, transparent 60%), + radial-gradient(ellipse at 80% 30%, rgba(64, 224, 208, 0.18) 0%, transparent 50%), + radial-gradient(ellipse at 50% 50%, rgba(0, 206, 209, 0.15) 0%, transparent 70%), + linear-gradient(135deg, #0a0a0f 0%, #0f1f2a 30%, #1f2f3a 50%, #0f1f2a 70%, #0a0a0f 100%); + } + + .galaxy-whirlpool .progress-fill-pro { + background: linear-gradient(90deg, #00bfff, #40e0d0, #00ced1, #5f9ea0); + box-shadow: 0 0 15px rgba(0, 191, 255, 0.5); + } + + .galaxy-whirlpool .reader-content-interstellar h1::after { + background: linear-gradient(90deg, #00bfff, #40e0d0); + box-shadow: 0 0 20px rgba(0, 191, 255, 0.6); + } + + .galaxy-whirlpool .reader-content-interstellar h2::before { + background: linear-gradient(180deg, #00bfff, #40e0d0); + } + + .galaxy-whirlpool .reader-content-interstellar blockquote { + border-left-color: #00bfff; + background: rgba(0, 191, 255, 0.08); + } + + .galaxy-whirlpool .reader-content-interstellar blockquote::before { + color: rgba(0, 191, 255, 0.4); + } + + .galaxy-whirlpool .reader-scroll-interstellar::-webkit-scrollbar-thumb { + background: linear-gradient(180deg, #00bfff, #40e0d0); + } + + .galaxy-whirlpool .dot-pro.active { + background: linear-gradient(45deg, #00bfff, #40e0d0); + } + + .galaxy-sombrero { + background: + radial-gradient(ellipse at 30% 40%, rgba(255, 107, 71, 0.2) 0%, transparent 60%), + radial-gradient(ellipse at 70% 60%, rgba(255, 142, 60, 0.18) 0%, transparent 50%), + radial-gradient(ellipse at 50% 50%, rgba(255, 165, 0, 0.15) 0%, transparent 70%), + linear-gradient(135deg, #0a0a0f 0%, #2a1510 30%, #3a2520 50%, #2a1510 70%, #0a0a0f 100%); + } + + .galaxy-sombrero .progress-fill-pro { + background: linear-gradient(90deg, #ff6b47, #ff8e3c, #ffa500, #cd853f); + box-shadow: 0 0 15px rgba(255, 107, 71, 0.5); + } + + .galaxy-sombrero .reader-content-interstellar h1::after { + background: linear-gradient(90deg, #ff6b47, #ffa500); + box-shadow: 0 0 20px rgba(255, 107, 71, 0.6); + } + + .galaxy-sombrero .reader-content-interstellar h2::before { + background: linear-gradient(180deg, #ff6b47, #ffa500); + } + + .galaxy-sombrero .reader-content-interstellar blockquote { + border-left-color: #ff6b47; + background: rgba(255, 107, 71, 0.08); + } + + .galaxy-sombrero .reader-content-interstellar blockquote::before { + color: rgba(255, 107, 71, 0.4); + } + + .galaxy-sombrero .reader-scroll-interstellar::-webkit-scrollbar-thumb { + background: linear-gradient(180deg, #ff6b47, #ffa500); + } + + .galaxy-sombrero .dot-pro.active { + background: linear-gradient(45deg, #ff6b47, #ffa500); + } + + .galaxy-pinwheel { + background: + radial-gradient(ellipse at 25% 25%, rgba(50, 205, 50, 0.2) 0%, transparent 60%), + radial-gradient(ellipse at 75% 75%, rgba(0, 255, 127, 0.18) 0%, transparent 50%), + radial-gradient(ellipse at 50% 50%, rgba(152, 251, 152, 0.15) 0%, transparent 70%), + linear-gradient(135deg, #0a0a0f 0%, #0f2a15 30%, #1f3a25 50%, #0f2a15 70%, #0a0a0f 100%); + } + + .galaxy-pinwheel .progress-fill-pro { + background: linear-gradient(90deg, #32cd32, #00ff7f, #98fb98, #90ee90); + box-shadow: 0 0 15px rgba(50, 205, 50, 0.5); + } + + .galaxy-pinwheel .reader-content-interstellar h1::after { + background: linear-gradient(90deg, #32cd32, #00ff7f); + box-shadow: 0 0 20px rgba(50, 205, 50, 0.6); + } + + .galaxy-pinwheel .reader-content-interstellar h2::before { + background: linear-gradient(180deg, #32cd32, #00ff7f); + } + + .galaxy-pinwheel .reader-content-interstellar blockquote { + border-left-color: #32cd32; + background: rgba(50, 205, 50, 0.08); + } + + .galaxy-pinwheel .reader-content-interstellar blockquote::before { + color: rgba(50, 205, 50, 0.4); + } + + .galaxy-pinwheel .reader-scroll-interstellar::-webkit-scrollbar-thumb { + background: linear-gradient(180deg, #32cd32, #00ff7f); + } + + .galaxy-pinwheel .dot-pro.active { + background: linear-gradient(45deg, #32cd32, #00ff7f); + } + + /* Focus Mode - Fixed to only affect backdrop opacity */ + .focus-mode-active .interstellar-backdrop { + opacity: 0.3; + } + + .focus-mode-active .reader-content-interstellar { + filter: contrast(1.15) brightness(1.05); + text-shadow: 0 0 6px rgba(255, 255, 255, 0.15); + } + + .focus-mode-active .celestial-system { + opacity: 0.4; + } + + .focus-mode-active .interstellar-black-hole { + opacity: 0.2; + } + + .quantum-particles-container { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + pointer-events: none; + z-index: 5; + } + + .quantum-particle { + position: absolute; + width: 2px; + height: 2px; + background: rgba(100, 200, 255, 0.8); + border-radius: 50%; + animation: quantum-drift 10s linear infinite; + } + + @keyframes quantum-drift { + 0% { + transform: translateX(0) translateY(0) scale(1); + opacity: 0; + } + 10% { opacity: 1; } + 90% { opacity: 0.8; } + 100% { + transform: translateX(-100px) translateY(-200px) scale(0.5); + opacity: 0; + } + } + + /* Responsive Design */ + @media (max-width: 768px) { + .reader-header-pro { + padding: 0 25px; + height: 65px; + } + + .galaxy-name-pro { + font-size: 14px; + } + + .progress-system { + max-width: 200px; + margin: 0 20px; + } + + .stopwatch-display { + font-size: 12px; + padding: 6px 10px; + } + + .reader-content-interstellar { + padding: 70px 40px 140px; + font-size: 18px; + } + + .reader-content-interstellar h1 { + font-size: 2.4em; + } + + .reader-content-interstellar h2 { + font-size: 1.9em; + } + + .interstellar-black-hole { + width: 180px; + height: 180px; + opacity: 0.25; + } + + .control-btn-pro { + width: 40px; + height: 40px; + } + + .reader-controls-pro { + gap: 12px; + } + } + `; + + document.head.appendChild(style); + document.body.appendChild(readerOverlay); + document.body.style.overflow = 'hidden'; + + this.setupInteractiveElements(); + } + + setupInteractiveElements() { + document.querySelectorAll('.dot-pro').forEach(dot => { + dot.addEventListener('click', (e) => { + document.querySelectorAll('.dot-pro').forEach(d => d.classList.remove('active')); + dot.classList.add('active'); + this.changeGalaxy(dot.dataset.galaxy); + this.triggerGalaxyTransition(); + }); + }); + + const focusBtn = document.getElementById('focusMode'); + if (focusBtn) { + focusBtn.addEventListener('click', () => { + this.toggleFocusMode(); + }); + } + + const exitBtn = document.getElementById('exitReader'); + if (exitBtn) { + exitBtn.addEventListener('click', () => { + this.deactivateGalacticReader(); + }); + } + } + + setupReadingProgress() { + const scrollContainer = document.querySelector('.reader-scroll-interstellar'); + const progressFill = document.querySelector('.progress-fill-pro'); + const progressText = document.querySelector('.progress-text-pro'); + + if (!scrollContainer || !progressFill || !progressText) return; + + const updateProgress = () => { + const scrollTop = scrollContainer.scrollTop; + const scrollHeight = scrollContainer.scrollHeight - scrollContainer.clientHeight; + const progress = Math.min((scrollTop / scrollHeight) * 100, 100); + + progressFill.style.width = `${progress}%`; + progressText.textContent = `${Math.round(progress)}%`; + + this.readingProgress = progress; + + if (progress >= 25 && progress < 26) { + this.triggerMilestoneEffect(25); + } else if (progress >= 50 && progress < 51) { + this.triggerMilestoneEffect(50); + } else if (progress >= 75 && progress < 76) { + this.triggerMilestoneEffect(75); + } else if (progress >= 100) { + this.triggerMilestoneEffect(100); + } + }; + + scrollContainer.addEventListener('scroll', updateProgress); + setTimeout(updateProgress, 100); + } + + triggerMilestoneEffect(milestone) { + const progressTrack = document.querySelector('.progress-track-pro'); + if (!progressTrack) return; + + const effect = document.createElement('div'); + effect.style.cssText = ` + position: absolute; + top: -5px; + left: ${milestone}%; + width: 20px; + height: 20px; + background: radial-gradient(circle, rgba(255, 255, 255, 0.8), transparent); + border-radius: 50%; + animation: milestone-burst 1s ease-out forwards; + pointer-events: none; + z-index: 10; + `; + + const style = document.createElement('style'); + style.textContent = ` + @keyframes milestone-burst { + 0% { transform: scale(0); opacity: 1; } + 50% { transform: scale(2); opacity: 0.8; } + 100% { transform: scale(4); opacity: 0; } + } + `; + document.head.appendChild(style); + + progressTrack.appendChild(effect); + + setTimeout(() => { + effect.remove(); + style.remove(); + }, 1000); + + if (milestone === 100) { + this.triggerCosmicEvent('celebration'); + } + } + + changeGalaxy(galaxy) { + this.currentGalaxy = galaxy; + const universe = document.querySelector('.galactic-universe-interstellar'); + const galaxyName = document.querySelector('.galaxy-name-pro'); + + if (universe) { + universe.className = `galactic-universe-interstellar galaxy-${galaxy}`; + } + + if (galaxyName) { + galaxyName.textContent = this.getGalaxyName(galaxy); + } + } + + triggerGalaxyTransition() { + const universe = document.querySelector('.galactic-universe-interstellar'); + if (!universe) return; + + universe.style.transform = 'scale(1.05)'; + universe.style.filter = 'brightness(1.2)'; + + setTimeout(() => { + universe.style.transform = 'scale(1)'; + universe.style.filter = 'brightness(1)'; + }, 500); + } + + getGalaxyName(galaxy = this.currentGalaxy) { + const names = { + andromeda: 'Andromeda', + milkyway: 'Milky Way', + whirlpool: 'Whirlpool', + sombrero: 'Sombrero', + pinwheel: 'Pinwheel' + }; + return names[galaxy] || 'Andromeda'; + } + + toggleFocusMode() { + const btn = document.getElementById('focusMode'); + const universe = document.querySelector('.galactic-universe-interstellar'); + + this.focusModeActive = !this.focusModeActive; + + if (this.focusModeActive) { + btn.classList.add('active'); + universe.classList.add('focus-mode-active'); + this.createQuantumFocusField(); + } else { + btn.classList.remove('active'); + universe.classList.remove('focus-mode-active'); + } + } + + createQuantumFocusField() { + const content = document.querySelector('.reader-content-interstellar'); + if (!content) return; + + const field = document.createElement('div'); + field.style.cssText = ` + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: radial-gradient(circle at 50% 50%, transparent 60%, rgba(0, 191, 255, 0.05) 100%); + border-radius: 20px; + animation: focus-pulse 3s ease-in-out infinite; + pointer-events: none; + z-index: -1; + `; + + const style = document.createElement('style'); + style.textContent = ` + @keyframes focus-pulse { + 0%, 100% { opacity: 0.3; transform: scale(1); } + 50% { opacity: 0.6; transform: scale(1.02); } + } + `; + document.head.appendChild(style); + + content.appendChild(field); + + setTimeout(() => { + field.remove(); + style.remove(); + }, 6000); + } + + triggerCosmicEvent(eventType) { + const container = document.querySelector('.cosmic-events-interstellar'); + if (!container) return; + + switch(eventType) { + case 'supernova': + this.createCinematicSupernova(container); + break; + case 'meteor': + this.createCinematicMeteor(container); + break; + case 'aurora': + this.createCinematicAurora(container); + break; + case 'celebration': + this.createCelebrationFireworks(container); + break; + } + } + + createCinematicSupernova(container) { + const supernova = document.createElement('div'); + supernova.style.cssText = ` + position: absolute; + top: ${20 + Math.random() * 30}%; + right: ${20 + Math.random() * 30}%; + width: 6px; + height: 6px; + background: #ffffff; + border-radius: 50%; + animation: cinematic-supernova 4s ease-out forwards; + pointer-events: none; + `; + + const style = document.createElement('style'); + style.textContent = ` + @keyframes cinematic-supernova { + 0% { + transform: scale(1); + opacity: 1; + box-shadow: 0 0 15px #ffffff; + } + 20% { + transform: scale(8); + opacity: 0.95; + box-shadow: 0 0 50px #ffffff, 0 0 100px rgba(255,255,255,0.7); + } + 40% { + transform: scale(25); + opacity: 0.8; + box-shadow: 0 0 150px #ffffff, 0 0 300px rgba(255,255,255,0.5); + } + 100% { + transform: scale(60); + opacity: 0; + box-shadow: 0 0 400px rgba(255,255,255,0.2); + } + } + `; + document.head.appendChild(style); + + container.appendChild(supernova); + + setTimeout(() => { + supernova.remove(); + style.remove(); + }, 4000); + } + + createCinematicMeteor(container) { + for (let i = 0; i < 8; i++) { + setTimeout(() => { + const meteor = document.createElement('div'); + meteor.style.cssText = ` + position: absolute; + top: ${Math.random() * 40}%; + left: ${85 + Math.random() * 15}%; + width: 3px; + height: ${15 + Math.random() * 25}px; + background: linear-gradient(180deg, transparent 0%, #ffffff 30%, #ffeb3b 70%, #ff9800 100%); + animation: cinematic-meteor 3s linear forwards; + pointer-events: none; + border-radius: 50%; + `; + + container.appendChild(meteor); + + setTimeout(() => meteor.remove(), 3000); + }, i * 200); + } + + const style = document.createElement('style'); + style.textContent = ` + @keyframes cinematic-meteor { + 0% { + transform: translateX(0) translateY(0) rotate(45deg); + opacity: 0; + box-shadow: 0 0 10px rgba(255, 255, 255, 0.8); + } + 15% { opacity: 1; } + 85% { opacity: 0.9; } + 100% { + transform: translateX(-500px) translateY(500px) rotate(45deg); + opacity: 0; + box-shadow: 0 0 5px rgba(255, 255, 255, 0.3); + } + } + `; + document.head.appendChild(style); + + setTimeout(() => style.remove(), 5000); + } + + createCinematicAurora(container) { + const aurora = document.createElement('div'); + aurora.style.cssText = ` + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 50%; + background: linear-gradient(180deg, + rgba(0, 255, 127, 0.2) 0%, + rgba(138, 43, 226, 0.12) 30%, + rgba(255, 20, 147, 0.08) 60%, + transparent 100%); + animation: cinematic-aurora 15s ease-in-out forwards; + pointer-events: none; + `; + + const style = document.createElement('style'); + style.textContent = ` + @keyframes cinematic-aurora { + 0%, 100% { + opacity: 0; + transform: translateY(-40px) skewX(-4deg); + } + 20% { + opacity: 0.7; + transform: translateY(-20px) skewX(2deg); + } + 40% { + opacity: 0.9; + transform: translateY(-10px) skewX(-1deg); + } + 60% { + opacity: 1; + transform: translateY(0) skewX(3deg); + } + 80% { + opacity: 0.8; + transform: translateY(-15px) skewX(-2deg); + } + } + `; + document.head.appendChild(style); + + container.appendChild(aurora); + + setTimeout(() => { + aurora.remove(); + style.remove(); + }, 15000); + } + + createCelebrationFireworks(container) { + for (let i = 0; i < 12; i++) { + setTimeout(() => { + const firework = document.createElement('div'); + firework.style.cssText = ` + position: absolute; + top: ${60 + Math.random() * 30}%; + left: ${10 + Math.random() * 80}%; + width: 4px; + height: 4px; + background: ${['#ff1493', '#00bfff', '#32cd32', '#ffd700', '#ff6b47'][Math.floor(Math.random() * 5)]}; + border-radius: 50%; + animation: celebration-burst 2s ease-out forwards; + pointer-events: none; + `; + + container.appendChild(firework); + + setTimeout(() => firework.remove(), 2000); + }, i * 150); + } + + const style = document.createElement('style'); + style.textContent = ` + @keyframes celebration-burst { + 0% { + transform: scale(1); + opacity: 1; + box-shadow: 0 0 10px currentColor; + } + 50% { + transform: scale(15); + opacity: 0.8; + box-shadow: 0 0 50px currentColor; + } + 100% { + transform: scale(25); + opacity: 0; + box-shadow: 0 0 100px currentColor; + } + } + `; + document.head.appendChild(style); + + setTimeout(() => style.remove(), 4000); + } + + startStopwatch() { + const stopwatchTime = document.getElementById('stopwatchTime'); + if (!stopwatchTime) return; + + this.stopwatchInterval = setInterval(() => { + if (!this.isActive || !this.readingStartTime) return; + + const elapsed = Date.now() - this.readingStartTime; + const minutes = Math.floor(elapsed / 60000); + const seconds = Math.floor((elapsed % 60000) / 1000); + + stopwatchTime.textContent = `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`; + }, 1000); + } + + stopStopwatch() { + if (this.stopwatchInterval) { + clearInterval(this.stopwatchInterval); + this.stopwatchInterval = null; + } + } + + initializeInterstellarBackground() { + this.createInterstellarStars(); + this.startQuantumParticles(); + } + + initializeQuantumEffects() { + this.createQuantumParticles(); + } + + createQuantumParticles() { + const container = document.querySelector('.quantum-particles-container'); + if (!container) return; + + setInterval(() => { + if (!this.isActive) return; + + if (Math.random() < 0.3) { + const particle = document.createElement('div'); + particle.className = 'quantum-particle'; + particle.style.cssText = ` + top: ${Math.random() * 100}%; + left: ${90 + Math.random() * 10}%; + background: rgba(${100 + Math.random() * 155}, ${150 + Math.random() * 105}, 255, 0.8); + `; + + container.appendChild(particle); + + setTimeout(() => particle.remove(), 10000); + } + }, 2000); + } + + startQuantumParticles() { + this.createQuantumParticles(); + } + + createInterstellarStars() { + setInterval(() => { + if (!this.isActive) return; + + if (Math.random() < 0.15) { + const star = document.createElement('div'); + star.style.cssText = ` + position: fixed; + top: ${Math.random() * 50}%; + left: ${70 + Math.random() * 30}%; + width: 1px; + height: ${15 + Math.random() * 15}px; + background: linear-gradient(180deg, transparent 0%, rgba(255,255,255,0.9) 100%); + animation: interstellar-shooting-star 6s linear forwards; + pointer-events: none; + z-index: 5; + `; + + document.body.appendChild(star); + + setTimeout(() => star.remove(), 6000); + } + }, 4000); + + const style = document.createElement('style'); + style.textContent = ` + @keyframes interstellar-shooting-star { + 0% { + transform: translateX(0) translateY(0) rotate(45deg); + opacity: 0; + } + 15% { opacity: 1; } + 85% { opacity: 0.9; } + 100% { + transform: translateX(-500px) translateY(500px) rotate(45deg); + opacity: 0; + } + } + `; + document.head.appendChild(style); + } + + startAnimationLoop() { + const animate = () => { + if (!this.isActive) return; + + this.updateQuantumParticles(); + + this.animationFrameId = requestAnimationFrame(animate); + }; + + animate(); + } + + updateQuantumParticles() { + this.quantumParticles.forEach((particle, index) => { + if (particle.parentNode) { + const currentLeft = parseFloat(particle.style.left); + if (currentLeft < -5) { + particle.remove(); + this.quantumParticles.splice(index, 1); + } + } + }); + } + + stopAnimationLoop() { + if (this.animationFrameId) { + cancelAnimationFrame(this.animationFrameId); + this.animationFrameId = null; + } + } + + extractMainContent() { + const selectors = [ + 'article', + 'main', + '[role="main"]', + '.post-content', + '.entry-content', + '.article-content', + '.content-area', + '.main-content', + '.post-body', + '.story-body', + '.article-body', + '.entry-text', + '.content', + '.text' + ]; + + let contentElement = null; + + for (const selector of selectors) { + contentElement = document.querySelector(selector); + if (contentElement && contentElement.innerText.length > 300) { + break; + } + } + + if (!contentElement) { + const candidates = document.querySelectorAll('div, section, p'); + let maxText = 0; + + candidates.forEach(candidate => { + const textLength = candidate.innerText?.length || 0; + if (textLength > maxText && textLength > 500) { + maxText = textLength; + contentElement = candidate; + } + }); + } + + if (!contentElement || contentElement.innerText.length < 200) { + return ` +

🌌 Starlapse V2: Enhanced Galactic Reading Experience

+

Welcome to the most advanced cosmic reading mode ever created! Experience literature like never before with our enhanced interstellar environment.

+ +

🚀 V2 Features

+

Reading Stopwatch: Track your time spent in the cosmic reading environment with a beautiful stopwatch display.

+

Quantum Focus: Enhanced concentration mode that dims distractions while preserving galaxy themes.

+

Enhanced Galaxy Themes: More vibrant and immersive backgrounds for each galaxy with deeper color palettes.

+

Reading Milestones: Celebrate your progress with burst effects at 25%, 50%, 75%, and completion.

+

Quantum Particles: Floating cosmic particles that respond to your reading activity.

+ +

🌌 Galaxy Collection

+

Andromeda Galaxy: Rich purples and magentas with enhanced spiral arms and stellar nurseries.

+

Milky Way: Golden cosmic dust with warm stellar formations and enhanced accretion disks.

+

Whirlpool Galaxy: Cool blue-teal cosmic streams with dynamic spiral patterns.

+

Sombrero Galaxy: Warm orange-red cosmic fire with enhanced gravitational effects.

+

Pinwheel Galaxy: Fresh green cosmic energy with vibrant stellar formations.

+ +

⚡ Interactive Controls

+

Stopwatch: Monitor your reading time with a cosmic stopwatch that shows minutes and seconds.

+

Quantum Focus: Click the eye icon for enhanced concentration with reduced background opacity.

+

Galaxy Switching: Click any colored dot to instantly transport to a different galactic environment.

+ +

🎯 Advanced Features

+

Enhanced Black Hole: More realistic event horizon with relativistic jets and photon sphere.

+

Celestial Bodies: Additional stars, nebulae, planets, and comets with realistic orbital mechanics.

+

Dark Matter Web: Subtle cosmic web structure visible in the background.

+

Quantum Foam: Microscopic space-time fluctuations for ultimate realism.

+

Progress Particles: Your reading progress generates cosmic particle effects.

+ +

🌟 Usage Tips

+

Switch galaxy themes to match your mood or content type. Use Quantum Focus for deep reading sessions while maintaining the beauty of your selected galaxy theme.

+ +

This enhanced reader mode preserves the original website structure while adding an immersive cosmic layer that makes every reading session an interstellar journey!

+ `; + } + + const clonedContent = contentElement.cloneNode(true); + + const unwantedSelectors = [ + 'script', 'style', 'nav', 'aside', 'header', 'footer', + '.ad', '.ads', '.advertisement', '.banner', '.popup', + '.sidebar', '.navigation', '.menu', '.social', '.share', + '.comments', '.related', '.recommended', '.widget', + '[class*="ad-"]', '[id*="ad-"]', '[class*="sidebar"]', + '.comment', '.reply', '.author-bio', '.tags', '.categories' + ]; + + unwantedSelectors.forEach(selector => { + const elements = clonedContent.querySelectorAll(selector); + elements.forEach(el => el.remove()); + }); + + const allElements = clonedContent.querySelectorAll('*'); + allElements.forEach(el => { + el.removeAttribute('onclick'); + el.removeAttribute('onload'); + el.removeAttribute('onerror'); + el.removeAttribute('style'); + + if (el.className && typeof el.className === 'string') { + el.className = ''; + } + }); + + return clonedContent.innerHTML; + } + + removeGalacticReader() { + const readerMode = document.getElementById(this.readerModeId); + if (readerMode) { + readerMode.style.animation = 'interstellar-exit 2s ease-in forwards'; + + const exitStyle = document.createElement('style'); + exitStyle.textContent = ` + @keyframes interstellar-exit { + 0% { + opacity: 1; + transform: scale(1) perspective(1000px) rotateX(0deg); + filter: blur(0); + } + 30% { + opacity: 0.7; + transform: scale(1.03) perspective(1000px) rotateX(-3deg); + filter: blur(3px); + } + 70% { + opacity: 0.3; + transform: scale(1.1) perspective(1000px) rotateX(-10deg); + filter: blur(10px); + } + 100% { + opacity: 0; + transform: scale(1.3) perspective(1000px) rotateX(-20deg); + filter: blur(25px); + } + } + `; + document.head.appendChild(exitStyle); + + setTimeout(() => { + readerMode.remove(); + exitStyle.remove(); + }, 2000); + } + + document.body.style.overflow = ''; + } +} + +new GalacticReader(); diff --git a/submissions/Starlapse/icons/icon128.png b/submissions/Starlapse/icons/icon128.png new file mode 100644 index 00000000..c630afbc Binary files /dev/null and b/submissions/Starlapse/icons/icon128.png differ diff --git a/submissions/Starlapse/icons/icon16.png b/submissions/Starlapse/icons/icon16.png new file mode 100644 index 00000000..3190a90d Binary files /dev/null and b/submissions/Starlapse/icons/icon16.png differ diff --git a/submissions/Starlapse/icons/icon48.png b/submissions/Starlapse/icons/icon48.png new file mode 100644 index 00000000..ee3dfdd9 Binary files /dev/null and b/submissions/Starlapse/icons/icon48.png differ diff --git a/submissions/Starlapse/manifest.json b/submissions/Starlapse/manifest.json new file mode 100644 index 00000000..3097d9d1 --- /dev/null +++ b/submissions/Starlapse/manifest.json @@ -0,0 +1,32 @@ +{ + "manifest_version": 3, + "name": "Starlapse", + "version": "2.0.0", + "description": "The ultimate galactic reading experience! Transform any webpage into an interactive galactic journey with multiple galaxies, cosmic events, planetary systems!", + "author": "Raghav Karn", + + "permissions": [ + "activeTab", + "storage", + "scripting" + ], + "action": { + "default_popup": "popup.html", + "default_title": "Starlapse - Galactic Reader" + }, + "content_scripts": [ + { + "matches": [""], + "js": ["content.js"], + "run_at": "document_idle" + } + ], + "background": { + "service_worker": "background.js" + }, + "icons": { + "16": "icons/icon16.png", + "48": "icons/icon48.png", + "128": "icons/icon128.png" + } +} diff --git a/submissions/Starlapse/popup.css b/submissions/Starlapse/popup.css new file mode 100644 index 00000000..84b2ec04 --- /dev/null +++ b/submissions/Starlapse/popup.css @@ -0,0 +1,440 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + width: 350px; + height: 450px; + background: + radial-gradient(ellipse at center, #0a0a0a 0%, #000000 100%), + url('data:image/svg+xml,'); + color: #ffffff; + font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; + overflow: hidden; + position: relative; +} + +body::before { + content: ''; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: url('data:image/svg+xml,'); + opacity: 0.4; + animation: starfield 25s linear infinite; +} + +small { + font-size: 11px; + font-family: 'Courier New', monospace; + font-weight: 400; + opacity: 0.7; +} + +a { + text-decoration: none; + color: #ffffff; + transition: color 0.3s ease; +} + +a:hover { + color: #ffa500; +} + +@keyframes starfield { + 0% { transform: translateY(0) translateX(0); } + 100% { transform: translateY(-20px) translateX(-5px); } +} + +.container { + padding: 25px; + text-align: center; + position: relative; + z-index: 1; + height: 100%; + display: flex; + flex-direction: column; + justify-content: space-between; +} + +.title { + font-size: 28px; + font-family: 'Courier New', monospace; + font-weight: bold; + margin-bottom: 20px; + letter-spacing: 3px; + text-shadow: + 0 0 10px rgba(255, 165, 0, 0.8), + 0 0 20px rgba(255, 165, 0, 0.4), + 0 0 30px rgba(255, 165, 0, 0.2); + animation: title-glow 3s ease-in-out infinite alternate; +} + +@keyframes title-glow { + 0% { + opacity: 1; + text-shadow: + 0 0 10px rgba(255, 165, 0, 0.8), + 0 0 20px rgba(255, 165, 0, 0.4), + 0 0 30px rgba(255, 165, 0, 0.2); + } + 100% { + opacity: 0.9; + text-shadow: + 0 0 15px rgba(255, 165, 0, 1), + 0 0 25px rgba(255, 165, 0, 0.6), + 0 0 35px rgba(255, 165, 0, 0.3); + } +} + +.black-hole-container { + position: relative; + width: 180px; + height: 180px; + margin: 0 auto 25px; +} + +.black-hole { + position: relative; + width: 100%; + height: 100%; + border-radius: 50%; + background: + radial-gradient(circle at center, + #000000 0%, + #000000 25%, + rgba(20, 20, 20, 0.8) 30%, + rgba(40, 25, 0, 0.6) 45%, + rgba(80, 50, 0, 0.4) 60%, + rgba(120, 80, 20, 0.3) 75%, + rgba(180, 120, 40, 0.2) 85%, + rgba(255, 165, 0, 0.1) 95%, + transparent 100%); + animation: black-hole-rotation 8s linear infinite; + filter: blur(0.5px); +} + +.black-hole.active { + animation: black-hole-active 4s linear infinite, black-hole-rotation 8s linear infinite; +} + +@keyframes black-hole-rotation { + 0% { transform: rotate(0deg); } + 100% { transform: rotate(360deg); } +} + +@keyframes black-hole-active { + 0% { + filter: blur(0.5px) brightness(1); + box-shadow: 0 0 30px rgba(255, 165, 0, 0.3); + } + 50% { + filter: blur(1px) brightness(1.2); + box-shadow: 0 0 50px rgba(255, 165, 0, 0.6); + } + 100% { + filter: blur(0.5px) brightness(1); + box-shadow: 0 0 30px rgba(255, 165, 0, 0.3); + } +} + +.event-horizon { + position: absolute; + top: 50%; + left: 50%; + width: 45px; + height: 45px; + background: #000000; + border-radius: 50%; + transform: translate(-50%, -50%); + box-shadow: + 0 0 15px rgba(0, 0, 0, 1), + inset 0 0 10px rgba(0, 0, 0, 1); + border: 1px solid rgba(255, 165, 0, 0.1); +} + +.accretion-disk { + position: absolute; + top: 50%; + left: 50%; + width: 120px; + height: 120px; + border-radius: 50%; + transform: translate(-50%, -50%); + background: conic-gradient( + from 0deg, + rgba(255, 165, 0, 0.8) 0deg, + rgba(255, 140, 0, 0.6) 45deg, + rgba(255, 100, 0, 0.4) 90deg, + rgba(200, 80, 0, 0.3) 135deg, + rgba(150, 60, 0, 0.2) 180deg, + rgba(100, 40, 0, 0.1) 225deg, + rgba(80, 30, 0, 0.05) 270deg, + rgba(255, 165, 0, 0.8) 315deg, + rgba(255, 165, 0, 0.8) 360deg + ); + animation: accretion-spin 3s linear infinite; + mask: radial-gradient(circle, transparent 37%, white 38%, white 85%, transparent 86%); + -webkit-mask: radial-gradient(circle, transparent 37%, white 38%, white 85%, transparent 86%); +} + +@keyframes accretion-spin { + 0% { transform: translate(-50%, -50%) rotate(0deg); } + 100% { transform: translate(-50%, -50%) rotate(360deg); } +} + +.gravitational-lensing { + position: absolute; + top: 50%; + left: 50%; + width: 160px; + height: 160px; + border: 2px solid transparent; + border-radius: 50%; + transform: translate(-50%, -50%); + background: + radial-gradient(circle, transparent 70%, rgba(255, 165, 0, 0.1) 75%, transparent 80%), + radial-gradient(circle, transparent 80%, rgba(255, 165, 0, 0.05) 85%, transparent 90%); + animation: lensing-effect 6s ease-in-out infinite; +} + +@keyframes lensing-effect { + 0%, 100% { + transform: translate(-50%, -50%) scale(1); + opacity: 0.3; + } + 50% { + transform: translate(-50%, -50%) scale(1.1); + opacity: 0.6; + } +} + +.particles { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + pointer-events: none; +} + +.particle { + position: absolute; + width: 2px; + height: 2px; + background: radial-gradient(circle, #ffffff 0%, transparent 70%); + border-radius: 50%; + animation: particle-orbit 4s linear infinite; +} + +.particle:nth-child(1) { + top: 20%; left: 30%; + animation-delay: 0s; + animation-duration: 3s; +} +.particle:nth-child(2) { + top: 70%; left: 20%; + animation-delay: -0.5s; + animation-duration: 4s; +} +.particle:nth-child(3) { + top: 80%; left: 70%; + animation-delay: -1s; + animation-duration: 3.5s; +} +.particle:nth-child(4) { + top: 40%; left: 80%; + animation-delay: -1.5s; + animation-duration: 4.5s; +} +.particle:nth-child(5) { + top: 60%; left: 10%; + animation-delay: -2s; + animation-duration: 3.8s; +} +.particle:nth-child(6) { + top: 10%; left: 60%; + animation-delay: -2.5s; + animation-duration: 4.2s; +} + +@keyframes particle-orbit { + 0% { + transform: rotate(0deg) translateX(40px) rotate(0deg); + opacity: 0; + } + 10%, 90% { + opacity: 1; + } + 100% { + transform: rotate(360deg) translateX(40px) rotate(-360deg); + opacity: 0; + } +} + +.controls { + margin: 20px 0; +} + +.cosmic-btn { + background: linear-gradient(135deg, + rgba(255, 165, 0, 0.1) 0%, + rgba(255, 140, 0, 0.2) 50%, + rgba(255, 100, 0, 0.1) 100%); + border: 2px solid rgba(255, 165, 0, 0.4); + color: #ffffff; + padding: 12px 20px; + border-radius: 25px; + cursor: pointer; + font-size: 14px; + font-weight: bold; + letter-spacing: 1px; + transition: all 0.3s ease; + backdrop-filter: blur(10px); + position: relative; + overflow: hidden; +} + +.cosmic-btn:hover { + background: linear-gradient(135deg, + rgba(255, 165, 0, 0.2) 0%, + rgba(255, 140, 0, 0.3) 50%, + rgba(255, 100, 0, 0.2) 100%); + border-color: rgba(255, 165, 0, 0.6); + box-shadow: 0 0 20px rgba(255, 165, 0, 0.3); + transform: translateY(-2px); +} + +.cosmic-btn.active { + background: linear-gradient(135deg, + rgba(255, 165, 0, 0.3) 0%, + rgba(255, 140, 0, 0.4) 50%, + rgba(255, 100, 0, 0.3) 100%); + border-color: rgba(255, 165, 0, 0.8); + box-shadow: 0 0 25px rgba(255, 165, 0, 0.5); +} + +.cosmic-btn::before { + content: ''; + position: absolute; + top: 0; + left: -100%; + width: 100%; + height: 100%; + background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent); + transition: left 0.5s; +} + +.cosmic-btn:hover::before { + left: 100%; +} + +.status { + margin: 15px 0; + font-size: 12px; + font-family: 'Courier New', monospace; + color: rgba(255, 165, 0, 0.8); + min-height: 20px; + animation: status-pulse 2s ease-in-out infinite; +} + +@keyframes status-pulse { + 0%, 100% { opacity: 0.8; } + 50% { opacity: 1; } +} + +.info { + margin-top: auto; + padding-top: 15px; + border-top: 1px solid rgba(255, 165, 0, 0.2); +} + +.reader-content-wrapper::-webkit-scrollbar { + width: 12px; + background: rgba(0, 0, 0, 0.8); +} + +.reader-content-wrapper::-webkit-scrollbar-thumb { + background: linear-gradient(45deg, #8a2be2, #ff1493); + border-radius: 6px; + box-shadow: 0 0 10px rgba(138, 43, 226, 0.8); +} + +.reader-content-wrapper::-webkit-scrollbar-track { + background: rgba(0, 0, 0, 0.5); + border-radius: 6px; +} + +.reader-content ::selection { + background: rgba(138, 43, 226, 0.8); + color: #ffffff; + text-shadow: 0 0 10px rgba(138, 43, 226, 1); +} + +@keyframes cosmic-breathe { + 0%, 100% { transform: scale(1); } + 50% { transform: scale(1.005); } +} + +.reader-content.breathing { + animation: cosmic-breathe 8s ease-in-out infinite; +} + +.galaxy-andromeda .nebula-clouds { + background: + radial-gradient(ellipse 800px 400px at 25% 30%, rgba(138, 43, 226, 0.15) 0%, transparent 60%), + radial-gradient(ellipse 600px 800px at 75% 70%, rgba(255, 20, 147, 0.12) 0%, transparent 50%); +} + +.galaxy-milkyway .nebula-clouds { + background: + radial-gradient(ellipse 800px 400px at 25% 30%, rgba(255, 215, 0, 0.1) 0%, transparent 60%), + radial-gradient(ellipse 600px 800px at 75% 70%, rgba(255, 140, 0, 0.08) 0%, transparent 50%); +} + +.galaxy-whirlpool .nebula-clouds { + background: + radial-gradient(ellipse 800px 400px at 25% 30%, rgba(0, 191, 255, 0.12) 0%, transparent 60%), + radial-gradient(ellipse 600px 800px at 75% 70%, rgba(64, 224, 208, 0.1) 0%, transparent 50%); +} + +.cosmic-loading { + position: fixed; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + width: 100px; + height: 100px; + border: 3px solid rgba(138, 43, 226, 0.3); + border-top: 3px solid #8a2be2; + border-radius: 50%; + animation: cosmic-spin 2s linear infinite; + z-index: 10000; +} + +@keyframes cosmic-spin { + 0% { transform: translate(-50%, -50%) rotate(0deg); } + 100% { transform: translate(-50%, -50%) rotate(360deg); } +} + +.cosmic-tooltip { + position: absolute; + background: rgba(0, 0, 0, 0.9); + color: #ffffff; + padding: 8px 12px; + border-radius: 8px; + font-size: 12px; + border: 1px solid rgba(138, 43, 226, 0.5); + z-index: 10001; + pointer-events: none; + animation: tooltip-float 2s ease-in-out infinite alternate; +} + +@keyframes tooltip-float { + 0% { transform: translateY(0px); } + 100% { transform: translateY(-5px); } +} diff --git a/submissions/Starlapse/popup.html b/submissions/Starlapse/popup.html new file mode 100644 index 00000000..b12230ee --- /dev/null +++ b/submissions/Starlapse/popup.html @@ -0,0 +1,48 @@ + + + + + + + +
+
STARLAPSE
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+ + + +
+ +
+ Ready to explore the cosmos... +
+ + +
+ + + + diff --git a/submissions/Starlapse/popup.js b/submissions/Starlapse/popup.js new file mode 100644 index 00000000..15a3c160 --- /dev/null +++ b/submissions/Starlapse/popup.js @@ -0,0 +1,113 @@ +document.addEventListener('DOMContentLoaded', function() { + const activateBtn = document.getElementById('activate-btn'); + const deactivateBtn = document.getElementById('deactivate-btn'); + const status = document.getElementById('status'); + + const statusMessages = { + ready: "Ready to explore the cosmos...", + activating: "Initializing galactic coordinates...", + active: "🌌 Galactic mode active", + deactivating: "Returning to Earth...", + error: "⚠️ Cosmic interference detected" + }; + + function updateStatus(message, type = 'normal') { + status.textContent = message; + status.className = `status ${type}`; + } + + function checkCurrentState() { + chrome.tabs.query({active: true, currentWindow: true}, function(tabs) { + chrome.tabs.sendMessage(tabs[0].id, {action: 'checkState'}, function(response) { + if (chrome.runtime.lastError) { + updateStatus(statusMessages.ready); + activateBtn.style.display = 'block'; + deactivateBtn.style.display = 'none'; + } else if (response && response.isActive) { + updateStatus(statusMessages.active, 'active'); + activateBtn.style.display = 'none'; + deactivateBtn.style.display = 'block'; + } else { + updateStatus(statusMessages.ready); + activateBtn.style.display = 'block'; + deactivateBtn.style.display = 'none'; + } + }); + }); + } + + activateBtn.addEventListener('click', function() { + updateStatus(statusMessages.activating, 'loading'); + + chrome.tabs.query({active: true, currentWindow: true}, function(tabs) { + chrome.tabs.sendMessage(tabs[0].id, {action: 'activateGalacticMode'}, function(response) { + if (chrome.runtime.lastError) { + updateStatus(statusMessages.error, 'error'); + setTimeout(() => updateStatus(statusMessages.ready), 2000); + } else { + updateStatus(statusMessages.active, 'active'); + activateBtn.style.display = 'none'; + deactivateBtn.style.display = 'block'; + + triggerCosmicActivation(); + } + }); + }); + }); + + deactivateBtn.addEventListener('click', function() { + updateStatus(statusMessages.deactivating, 'loading'); + + chrome.tabs.query({active: true, currentWindow: true}, function(tabs) { + chrome.tabs.sendMessage(tabs[0].id, {action: 'deactivateGalacticMode'}, function(response) { + updateStatus(statusMessages.ready); + activateBtn.style.display = 'block'; + deactivateBtn.style.display = 'none'; + }); + }); + }); + + function triggerCosmicActivation() { + const container = document.querySelector('.container'); + const effect = document.createElement('div'); + effect.style.cssText = ` + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: radial-gradient(circle, rgba(138, 43, 226, 0.2) 0%, transparent 70%); + animation: cosmic-pulse 1.5s ease-out forwards; + pointer-events: none; + border-radius: 15px; + `; + + const style = document.createElement('style'); + style.textContent = ` + @keyframes cosmic-pulse { + 0% { opacity: 0; transform: scale(0.8); } + 50% { opacity: 1; transform: scale(1.05); } + 100% { opacity: 0; transform: scale(1.2); } + } + `; + document.head.appendChild(style); + + container.appendChild(effect); + + setTimeout(() => { + effect.remove(); + style.remove(); + }, 1500); + } + + checkCurrentState(); + + const blackHole = document.querySelector('.black-hole'); + if (blackHole) { + blackHole.addEventListener('click', function() { + chrome.tabs.query({active: true, currentWindow: true}, function(tabs) { + chrome.tabs.sendMessage(tabs[0].id, {action: 'triggerCosmicEvent', event: 'supernova'}); + }); + }); + } +});