Spaces:
Running
Running
File size: 3,312 Bytes
620a894 | 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 | document.addEventListener('DOMContentLoaded', () => {
const slides = document.querySelectorAll('.slide');
const totalSlides = slides.length;
let currentSlideIndex = 0;
const progressFill = document.getElementById('progressFill');
const slideCounter = document.getElementById('slideCounter');
const nextBtn = document.getElementById('nextBtn');
const prevBtn = document.getElementById('prevBtn');
const blobs = document.querySelectorAll('.blob');
function updateSlide() {
slides.forEach((slide, index) => {
slide.classList.remove('active');
if (index === currentSlideIndex) {
slide.classList.add('active');
}
});
// Update progress bar
const progress = ((currentSlideIndex + 1) / totalSlides) * 100;
progressFill.style.width = `${progress}%`;
// Update slide counter text
const currentCount = (currentSlideIndex + 1).toString().padStart(2, '0');
const totalCount = totalSlides.toString().padStart(2, '0');
slideCounter.textContent = `${currentCount} / ${totalCount}`;
// Update button states
prevBtn.disabled = currentSlideIndex === 0;
nextBtn.disabled = currentSlideIndex === totalSlides - 1;
prevBtn.style.opacity = prevBtn.disabled ? '0.2' : '1';
nextBtn.style.opacity = nextBtn.disabled ? '0.2' : '1';
// Background parallax effect
blobs.forEach((blob, i) => {
const shiftX = (currentSlideIndex / totalSlides) * 100 * (i === 0 ? 1 : -1);
const shiftY = (currentSlideIndex / totalSlides) * 50 * (i === 0 ? -1 : 1);
blob.style.transform = `translate(${shiftX}px, ${shiftY}px)`;
});
}
function nextSlide() {
if (currentSlideIndex < totalSlides - 1) {
currentSlideIndex++;
updateSlide();
} else {
// Flash effect for end of presentation
document.body.style.backgroundColor = 'rgba(6, 182, 212, 0.1)';
setTimeout(() => {
document.body.style.backgroundColor = '#020617';
}, 200);
}
}
function prevSlide() {
if (currentSlideIndex > 0) {
currentSlideIndex--;
updateSlide();
}
}
// Click handlers
nextBtn.addEventListener('click', nextSlide);
prevBtn.addEventListener('click', prevSlide);
// Keyboard handlers
document.addEventListener('keydown', (e) => {
if (e.key === 'ArrowRight' || e.key === ' ' || e.key === 'ArrowDown') {
e.preventDefault();
nextSlide();
} else if (e.key === 'ArrowLeft' || e.key === 'ArrowUp') {
e.preventDefault();
prevSlide();
}
});
// Touch support (simple swipe)
let touchstartX = 0;
let touchendX = 0;
document.addEventListener('touchstart', (e) => {
touchstartX = e.changedTouches[0].screenX;
});
document.addEventListener('touchend', (e) => {
touchendX = e.changedTouches[0].screenX;
handleSwipe();
});
function handleSwipe() {
if (touchendX < touchstartX - 50) nextSlide();
if (touchendX > touchstartX + 50) prevSlide();
}
// Init
updateSlide();
});
|