deerflow2/frontend/public/demo/threads/c02bb4d5-4202-490e-ae8f-ff4864fc0d2e/user-data/outputs/script.js

// Pride and Prejudice - Interactive Features

document.addEventListener("DOMContentLoaded", () => {
  // Navigation scroll effect
  initNavigation();

  // Quotes slider
  initQuotesSlider();

  // Scroll reveal animations
  initScrollReveal();

  // Smooth scroll for anchor links
  initSmoothScroll();
});

// ============================================
// NAVIGATION SCROLL EFFECT
// ============================================
function initNavigation() {
  const nav = document.querySelector(".nav");
  let lastScroll = 0;

  window.addEventListener("scroll", () => {
    const currentScroll = window.pageYOffset;

    // Add/remove scrolled class
    if (currentScroll > 100) {
      nav.classList.add("scrolled");
    } else {
      nav.classList.remove("scrolled");
    }

    lastScroll = currentScroll;
  });
}

// ============================================
// QUOTES SLIDER
// ============================================
function initQuotesSlider() {
  const quotes = document.querySelectorAll(".quote-card");
  const dots = document.querySelectorAll(".quote-dot");
  let currentIndex = 0;
  let autoSlideInterval;

  function showQuote(index) {
    // Remove active class from all quotes and dots
    quotes.forEach((quote) => quote.classList.remove("active"));
    dots.forEach((dot) => dot.classList.remove("active"));

    // Add active class to current quote and dot
    quotes[index].classList.add("active");
    dots[index].classList.add("active");

    currentIndex = index;
  }

  function nextQuote() {
    const nextIndex = (currentIndex + 1) % quotes.length;
    showQuote(nextIndex);
  }

  // Dot click handlers
  dots.forEach((dot, index) => {
    dot.addEventListener("click", () => {
      showQuote(index);
      resetAutoSlide();
    });
  });

  // Auto-slide functionality
  function startAutoSlide() {
    autoSlideInterval = setInterval(nextQuote, 6000);
  }

  function resetAutoSlide() {
    clearInterval(autoSlideInterval);
    startAutoSlide();
  }

  // Start auto-slide
  startAutoSlide();

  // Pause on hover
  const slider = document.querySelector(".quotes-slider");
  slider.addEventListener("mouseenter", () => clearInterval(autoSlideInterval));
  slider.addEventListener("mouseleave", startAutoSlide);
}

// ============================================
// SCROLL REVEAL ANIMATIONS
// ============================================
function initScrollReveal() {
  const revealElements = document.querySelectorAll(
    ".about-content, .character-card, .theme-item, .section-header",
  );

  const revealOptions = {
    threshold: 0.15,
    rootMargin: "0px 0px -50px 0px",
  };

  const revealObserver = new IntersectionObserver((entries) => {
    entries.forEach((entry, index) => {
      if (entry.isIntersecting) {
        // Add staggered delay for grid items
        const delay =
          entry.target.classList.contains("character-card") ||
          entry.target.classList.contains("theme-item")
            ? index * 100
            : 0;

        setTimeout(() => {
          entry.target.classList.add("reveal");
          entry.target.style.opacity = "1";
          entry.target.style.transform = "translateY(0)";
        }, delay);

        revealObserver.unobserve(entry.target);
      }
    });
  }, revealOptions);

  revealElements.forEach((el) => {
    el.style.opacity = "0";
    el.style.transform = "translateY(30px)";
    el.style.transition =
      "opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1)";
    revealObserver.observe(el);
  });
}

// ============================================
// SMOOTH SCROLL FOR ANCHOR LINKS
// ============================================
function initSmoothScroll() {
  document.querySelectorAll('a[href^="#"]').forEach((anchor) => {
    anchor.addEventListener("click", function (e) {
      e.preventDefault();
      const target = document.querySelector(this.getAttribute("href"));

      if (target) {
        const navHeight = document.querySelector(".nav").offsetHeight;
        const targetPosition =
          target.getBoundingClientRect().top + window.pageYOffset - navHeight;

        window.scrollTo({
          top: targetPosition,
          behavior: "smooth",
        });
      }
    });
  });
}

// ============================================
// PARALLAX EFFECT FOR HERO
// ============================================
window.addEventListener("scroll", () => {
  const scrolled = window.pageYOffset;
  const heroPattern = document.querySelector(".hero-pattern");

  if (heroPattern && scrolled < window.innerHeight) {
    heroPattern.style.transform = `translateY(${scrolled * 0.3}px) rotate(${scrolled * 0.02}deg)`;
  }
});

// ============================================
// CHARACTER CARD HOVER EFFECT
// ============================================
document.querySelectorAll(".character-card").forEach((card) => {
  card.addEventListener("mouseenter", function () {
    this.style.zIndex = "10";
  });

  card.addEventListener("mouseleave", function () {
    this.style.zIndex = "1";
  });
});