init: uusi moderni kipinalomat webbisivu

main.js

@@ -0,0 +1,172 @@
+import './style.css'
+
+// Smooth scrolling for navigation links
+document.querySelectorAll('a[href^="#"]').forEach(anchor => {
+  anchor.addEventListener('click', function (e) {
+    e.preventDefault();
+    const target = document.querySelector(this.getAttribute('href'));
+    if (target) {
+      window.scrollTo({
+        top: target.offsetTop,
+        behavior: 'smooth'
+      });
+    }
+  });
+});
+
+// Update navbar styling on scroll
+const navbar = document.getElementById('navbar');
+window.addEventListener('scroll', () => {
+  if (window.scrollY > 50) {
+    navbar.classList.add('scrolled');
+  } else {
+    navbar.classList.remove('scrolled');
+  }
+});
+
+// Scroll Reveal Animation Initialization using IntersectionObserver
+const revealElements = document.querySelectorAll('.scroll-reveal');
+
+const revealOptions = {
+  threshold: 0.15,
+  rootMargin: "0px 0px -50px 0px"
+};
+
+const scrollObserver = new IntersectionObserver((entries, observer) => {
+  entries.forEach(entry => {
+    if (entry.isIntersecting) {
+      entry.target.classList.add('active');
+      // Optional: stop observing once revealed
+      // observer.unobserve(entry.target);
+    }
+  });
+}, revealOptions);
+
+revealElements.forEach(el => {
+  scrollObserver.observe(el);
+});
+
+// Theme toggling logic
+const themeToggleBtn = document.getElementById('theme-toggle');
+const moonIcon = document.getElementById('moon-icon');
+const sunIcon = document.getElementById('sun-icon');
+
+// Check for saved theme preference or use system preference (default to light)
+const savedTheme = localStorage.getItem('theme');
+const systemPrefersDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
+let currentTheme = savedTheme || (systemPrefersDark ? 'dark' : 'light');
+
+function applyTheme(theme) {
+  if (theme === 'dark') {
+    document.documentElement.setAttribute('data-theme', 'dark');
+    moonIcon.style.display = 'none';
+    sunIcon.style.display = 'block';
+  } else {
+    document.documentElement.removeAttribute('data-theme');
+    moonIcon.style.display = 'block';
+    sunIcon.style.display = 'none';
+  }
+}
+
+// Initial appliance
+applyTheme(currentTheme);
+
+themeToggleBtn.addEventListener('click', () => {
+  currentTheme = currentTheme === 'dark' ? 'light' : 'dark';
+  localStorage.setItem('theme', currentTheme);
+  applyTheme(currentTheme);
+});
+
+// Gallery Grid & Lightbox Logic
+const finalImages = [
+  "aamiainen-2-768x432.jpeg", "kipinatie10.jpeg", "kipinatie10_13.jpeg", "kipinatie10_14.jpeg",
+  "kipinatie10_15.jpeg", "kipinatie10_2-2.jpeg", "kipinatie10_20.jpeg", "kipinatie10_28.jpeg",
+  "kipinatie10_3.jpeg", "kipinatie10_36-7.jpeg", "kipinatie10_37.jpeg", "kipinatie10_5.jpeg",
+  "kipinatie10_50-5.jpeg", "kipinatie10_52.jpeg", "kipinatie10_53.jpeg", "kipinatie10_54.jpeg",
+  "kipinatie10_57.jpeg", "kipinatie10_58-2.jpeg", "kipinatie10_59.jpeg", "kipinatie10_6.jpeg",
+  "kipinatie10_60.jpeg", "kipinatie10_61.jpeg", "kipinatie10_62.jpeg", "kipinatie10_64.jpeg",
+  "kipinatie10_65.jpeg", "kipinatie10_68.jpeg", "kipinatie10_69-0.jpeg", "kipinatie10_70-2.jpeg",
+  "kipinatie10_71-3.jpeg", "kipinatie10_8.jpeg", "kipinatie10_9.jpeg", "ranta-aurinko.jpeg"
+];
+
+const galleryImages = finalImages.map(src => ({ src, title: 'Kipinä Lomat Kuvagalleria' }));
+
+const galleryGrid = document.getElementById('gallery-grid');
+const lightbox = document.getElementById('lightbox');
+const lightboxImg = document.getElementById('lightbox-img');
+const lightboxCaption = document.getElementById('lightbox-caption');
+const lightboxClose = document.getElementById('lightbox-close');
+const lightboxPrev = document.getElementById('lightbox-prev');
+const lightboxNext = document.getElementById('lightbox-next');
+
+let currentLightboxIndex = 0;
+
+if (galleryGrid && lightbox) {
+  galleryGrid.innerHTML = '';
+  // Populate Gallery Grid
+  galleryImages.forEach((item, index) => {
+    const galleryItem = document.createElement('div');
+    galleryItem.className = 'gallery-item';
+    
+    const imgEl = document.createElement('img');
+    imgEl.src = `/img/${item.src}`;
+    imgEl.alt = item.title;
+    imgEl.loading = 'lazy';
+
+    galleryItem.appendChild(imgEl);
+    galleryGrid.appendChild(galleryItem);
+
+    // Open Lightbox on Click
+    galleryItem.addEventListener('click', () => openLightbox(index));
+  });
+
+  // Lightbox Functions
+  function openLightbox(index) {
+    currentLightboxIndex = index;
+    updateLightboxImage();
+    lightbox.classList.add('active');
+    document.body.style.overflow = 'hidden';
+  }
+
+  function closeLightbox() {
+    lightbox.classList.remove('active');
+    document.body.style.overflow = 'auto';
+  }
+
+  function updateLightboxImage() {
+    lightboxImg.classList.remove('loaded');
+    const currentItem = galleryImages[currentLightboxIndex];
+    setTimeout(() => {
+      lightboxImg.src = `/img/${currentItem.src}`;
+      lightboxCaption.textContent = currentItem.title;
+      setTimeout(() => lightboxImg.classList.add('loaded'), 50);
+    }, 200);
+  }
+
+  function showNext() {
+    currentLightboxIndex = (currentLightboxIndex + 1) % galleryImages.length;
+    updateLightboxImage();
+  }
+
+  function showPrev() {
+    currentLightboxIndex = (currentLightboxIndex - 1 + galleryImages.length) % galleryImages.length;
+    updateLightboxImage();
+  }
+
+  lightboxClose.addEventListener('click', closeLightbox);
+  lightboxNext.addEventListener('click', (e) => { e.stopPropagation(); showNext(); });
+  lightboxPrev.addEventListener('click', (e) => { e.stopPropagation(); showPrev(); });
+  
+  lightbox.addEventListener('click', (e) => {
+    if (e.target === lightbox || e.target === document.querySelector('.lightbox-content-wrapper')) {
+      closeLightbox();
+    }
+  });
+
+  document.addEventListener('keydown', (e) => {
+    if (!lightbox.classList.contains('active')) return;
+    if (e.key === 'Escape') closeLightbox();
+    if (e.key === 'ArrowRight') showNext();
+    if (e.key === 'ArrowLeft') showPrev();
+  });
+}