script.js

// ===== 表情包数据 =====
const stickers = [
    { name: "膜拜大佬", file: "膜拜大佬.png" },
    { name: "冲鸭加油", file: "冲鸭加油.png" },
    { name: "救命哭哭", file: "救命哭哭.png" },
    { name: "无语", file: "无语.png" },
    { name: "满头问号", file: "满头问号.png" },
    { name: "暗中观察", file: "暗中观察.png" },
    { name: "敬礼", file: "敬礼.png" },
    { name: "危险！苦力怕", file: "危险！苦力怕.png" },
    { name: "Bug 修好了", file: "Bug 修好了.png" },
    { name: "服务器崩了", file: "服务器崩了.png" },
    { name: "原来如此", file: "原来如此.png" },
    { name: "敲代码中", file: "敲代码中.png" },
    { name: "晚安下线", file: "晚安下线.png" },
    { name: "谢谢大佬", file: "谢谢大佬.png" },
    { name: "收到 OK", file: "收到 OK.png" },
    { name: "开心挥手", file: "开心挥手.png" },
];

// ===== 主题切换 =====
const themeToggle = document.getElementById('themeToggle');
const html = document.documentElement;

// 检测系统主题偏好
function getPreferredTheme() {
    const saved = localStorage.getItem('theme');
    if (saved) return saved;
    return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
}

function applyTheme(theme) {
    html.setAttribute('data-theme', theme);
    localStorage.setItem('theme', theme);
}

// 初始化主题
applyTheme(getPreferredTheme());

// 监听系统主题变化
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (e) => {
    if (!localStorage.getItem('theme-manual')) {
        applyTheme(e.matches ? 'dark' : 'light');
    }
});

themeToggle.addEventListener('click', () => {
    const current = html.getAttribute('data-theme');
    const next = current === 'dark' ? 'light' : 'dark';
    applyTheme(next);
    localStorage.setItem('theme-manual', 'true');
});

// ===== 导航栏滚动效果 =====
const navbar = document.getElementById('navbar');
const backToTop = document.getElementById('backToTop');

window.addEventListener('scroll', () => {
    const scrolled = window.scrollY > 20;
    navbar.classList.toggle('scrolled', scrolled);
    backToTop.classList.toggle('visible', window.scrollY > 400);
});

// 回到顶部
backToTop.addEventListener('click', () => {
    window.scrollTo({ top: 0, behavior: 'smooth' });
});

// ===== 移动端菜单 =====
const navMobileToggle = document.getElementById('navMobileToggle');
const navLinks = document.querySelector('.nav-links');

navMobileToggle.addEventListener('click', () => {
    navMobileToggle.classList.toggle('active');
    navLinks.classList.toggle('open');
});

// 点击导航链接后关闭移动端菜单
navLinks.querySelectorAll('a').forEach(link => {
    link.addEventListener('click', () => {
        navMobileToggle.classList.remove('active');
        navLinks.classList.remove('open');
    });
});

// ===== 生成表情包画廊 =====
const galleryGrid = document.getElementById('galleryGrid');
const stickerCount = document.getElementById('stickerCount');

// 更新表情包数量
stickerCount.textContent = stickers.length;

stickers.forEach((sticker, index) => {
    const card = document.createElement('div');
    card.className = 'sticker-card';
    card.style.animationDelay = `${index * 0.05}s`;
    card.innerHTML = `
        <div class="sticker-img-wrapper">
            <img src="stickers/${encodeURIComponent(sticker.file)}" alt="${sticker.name}" class="sticker-img" loading="lazy">
        </div>
        <p class="sticker-name">${sticker.name}</p>
    `;
    card.addEventListener('click', () => openModal(sticker));
    galleryGrid.appendChild(card);
});

// ===== 模态框 =====
const modalOverlay = document.getElementById('modalOverlay');
const modalImg = document.getElementById('modalImg');
const modalTitle = document.getElementById('modalTitle');
const modalDownload = document.getElementById('modalDownload');
const modalClose = document.getElementById('modalClose');

function openModal(sticker) {
    const imgUrl = `stickers/${encodeURIComponent(sticker.file)}`;
    modalImg.src = imgUrl;
    modalImg.alt = sticker.name;
    modalTitle.textContent = sticker.name;
    modalDownload.href = imgUrl;
    modalDownload.download = sticker.file;
    modalOverlay.classList.add('active');
    document.body.style.overflow = 'hidden';
}

function closeModal() {
    modalOverlay.classList.remove('active');
    document.body.style.overflow = '';
}

modalClose.addEventListener('click', closeModal);
modalOverlay.addEventListener('click', (e) => {
    if (e.target === modalOverlay) closeModal();
});

// ESC 关闭模态框
document.addEventListener('keydown', (e) => {
    if (e.key === 'Escape' && modalOverlay.classList.contains('active')) {
        closeModal();
    }
});

// ===== 滚动渐入动画 (Intersection Observer) =====
const observerOptions = {
    threshold: 0.1,
    rootMargin: '0px 0px -50px 0px'
};

const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
        if (entry.isIntersecting) {
            entry.target.style.opacity = '1';
            entry.target.style.transform = 'translateY(0)';
        }
    });
}, observerOptions);

// 观察各 section
document.querySelectorAll('.about-card, .link-card').forEach(el => {
    el.style.opacity = '0';
    el.style.transform = 'translateY(30px)';
    el.style.transition = 'opacity 0.6s ease, transform 0.6s ease';
    observer.observe(el);
});

// ===== 键盘导航支持 =====
let currentStickerIndex = -1;

document.addEventListener('keydown', (e) => {
    if (!modalOverlay.classList.contains('active')) return;
    
    if (e.key === 'ArrowLeft') {
        currentStickerIndex = (currentStickerIndex - 1 + stickers.length) % stickers.length;
        openModal(stickers[currentStickerIndex]);
    } else if (e.key === 'ArrowRight') {
        currentStickerIndex = (currentStickerIndex + 1) % stickers.length;
        openModal(stickers[currentStickerIndex]);
    }
});

// 记录当前打开的表情包索引
const originalOpenModal = openModal;
window.openModal = function(sticker) {
    currentStickerIndex = stickers.findIndex(s => s.file === sticker.file);
    originalOpenModal(sticker);
};

// ===== 触摸滑动支持 (移动端模态框) =====
let touchStartX = 0;
let touchEndX = 0;

modalOverlay.addEventListener('touchstart', (e) => {
    touchStartX = e.changedTouches[0].screenX;
});

modalOverlay.addEventListener('touchend', (e) => {
    touchEndX = e.changedTouches[0].screenX;
    const diff = touchStartX - touchEndX;
    
    if (Math.abs(diff) > 50 && modalOverlay.classList.contains('active')) {
        if (diff > 0) {
            // 向左滑 - 下一个
            currentStickerIndex = (currentStickerIndex + 1) % stickers.length;
        } else {
            // 向右滑 - 上一个
            currentStickerIndex = (currentStickerIndex - 1 + stickers.length) % stickers.length;
        }
        openModal(stickers[currentStickerIndex]);
    }
});

// ===== 控制台彩蛋 =====
console.log('%cMCJPG Sticker Pack 🎨', 'font-size: 24px; font-weight: bold; background: linear-gradient(135deg, #6c5ce7, #a29bfe); -webkit-background-clip: text; -webkit-text-fill-color: transparent;');
console.log('%c由 MCJPG 组织原创 | CC BY-NC 4.0', 'font-size: 14px; color: #8a8aaa;');
console.log('%c官网: https://mcjpg.org', 'font-size: 14px; color: #6c5ce7;');
console.log('%cGitHub: https://github.com/MineJPGcraft/Sticker', 'font-size: 14px; color: #6c5ce7;');