Create scripts.js

scripts.js

@@ -0,0 +1,140 @@
+import { config } from './config.js';
+
+document.addEventListener('DOMContentLoaded', () => {
+  // Elements
+  const symbols = document.querySelectorAll('.symbol');
+  const textPanels = document.querySelectorAll('.text-panel');
+  const prevBtn = document.getElementById('prev-btn');
+  const nextBtn = document.getElementById('next-btn');
+  const progressDots = document.querySelectorAll('.progress-dot');
+  const video = document.getElementById('background-video');
+  
+  // Set initial state
+  let currentStage = 0;
+  const totalStages = symbols.length;
+  
+  // Update CSS variables from config
+  document.documentElement.style.setProperty('--intimate-color', config.colors.intimate);
+  document.documentElement.style.setProperty('--universal-color', config.colors.universal);
+  document.documentElement.style.setProperty('--divine-color', config.colors.divine);
+  document.documentElement.style.setProperty('--transition-time', `${config.transitionTime}s`);
+  
+  // Background video settings
+  video.style.opacity = config.background.opacity;
+  
+  // Initialize the first stage
+  updateStage();
+  
+  // Event listeners
+  prevBtn.addEventListener('click', navigateToPrevious);
+  nextBtn.addEventListener('click', navigateToNext);
+  
+  progressDots.forEach(dot => {
+    dot.addEventListener('click', (e) => {
+      const index = parseInt(e.target.dataset.index);
+      goToStage(index);
+    });
+  });
+  
+  // Keyboard navigation
+  document.addEventListener('keydown', (e) => {
+    if (e.key === 'ArrowLeft') navigateToPrevious();
+    if (e.key === 'ArrowRight') navigateToNext();
+  });
+  
+  // Automatic progression if enabled
+  let autoProgressInterval;
+  
+  if (config.autoProgress.enabled) {
+    startAutoProgress();
+  }
+  
+  function startAutoProgress() {
+    autoProgressInterval = setInterval(() => {
+      if (currentStage < totalStages - 1) {
+        navigateToNext();
+      } else {
+        goToStage(0);
+      }
+    }, config.autoProgress.interval);
+  }
+  
+  // Navigation functions
+  function navigateToNext() {
+    if (currentStage < totalStages - 1) {
+      currentStage++;
+      updateStage();
+    }
+  }
+  
+  function navigateToPrevious() {
+    if (currentStage > 0) {
+      currentStage--;
+      updateStage();
+    }
+  }
+  
+  function goToStage(index) {
+    if (index >= 0 && index < totalStages) {
+      currentStage = index;
+      updateStage();
+    }
+  }
+  
+  function updateStage() {
+    // Update symbols
+    symbols.forEach((symbol, index) => {
+      if (index === currentStage) {
+        symbol.classList.add('active');
+      } else {
+        symbol.classList.remove('active');
+      }
+    });
+    
+    // Update text panels
+    textPanels.forEach((panel, index) => {
+      if (index === currentStage) {
+        panel.classList.add('active');
+      } else {
+        panel.classList.remove('active');
+      }
+    });
+    
+    // Update progress dots
+    progressDots.forEach((dot, index) => {
+      if (index === currentStage) {
+        dot.classList.add('active');
+      } else {
+        dot.classList.remove('active');
+      }
+    });
+    
+    // Update buttons
+    prevBtn.disabled = currentStage === 0;
+    nextBtn.disabled = currentStage === totalStages - 1;
+    
+    // Set background color based on current stage
+    let currentColor;
+    switch(currentStage) {
+      case 0:
+        currentColor = config.colors.intimate;
+        break;
+      case 1:
+        currentColor = config.colors.universal;
+        break;
+      case 2:
+        currentColor = config.colors.divine;
+        break;
+    }
+    
+    // Apply subtle color overlay to background
+    document.getElementById('background').style.boxShadow = `inset 0 0 100px ${currentColor}33`;
+    
+    // Reset auto-progression timer if enabled
+    if (config.autoProgress.enabled) {
+      clearInterval(autoProgressInterval);
+      startAutoProgress();
+    }
+  }
+});
+