Spaces:
Running
Running
File size: 3,846 Bytes
156366e |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 |
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();
}
}
});
|