script.js

// 页面加载完成后执行
document.addEventListener('DOMContentLoaded', function() {
    // 获取容器和页面元素
    const container = document.querySelector('.container');
    const pages = document.querySelectorAll('.page');
    const easterEgg = document.getElementById('easter-egg');
    const languagesContainer = document.querySelector('.languages-container');
    const languageItems = document.querySelectorAll('.language-item');
    const initialPage = document.getElementById('initialPage');
    const clickButton = document.getElementById('clickButton');
    const mainContainer = document.getElementById('mainContainer');
    
    // 提取所有语言项文本作为刷屏消息
    const loveMessages = Array.from(languageItems).map(item => item.textContent);
    
    // 柔和背景色列表
    const bgColors = [
        "#FFE6E6", "#E6F7FF", "#E6FFE6", "#FFF0E6", "#F5E6FF",
        "#E6FFFF", "#FFE6F5", "#FFFFE6", "#E6F0FF", "#FFE6CC",
        "#F0F8FF", "#F5FFFA", "#FFF8DC", "#F8F8FF"
    ];
    
    // 创建单个提示卡片
    function createTipCard() {
        // 创建卡片元素
        const card = document.createElement("div");
        card.className = "tip-card";
        
        // 随机选择提示语和背景色
        const message = loveMessages[Math.floor(Math.random() * loveMessages.length)];
        card.style.backgroundColor = bgColors[Math.floor(Math.random() * bgColors.length)];
        
        // 创建消息内容元素，实现文字淡入效果
        const messageContent = document.createElement("div");
        messageContent.className = "message-content";
        messageContent.textContent = message;
        
        // 将消息内容添加到卡片
        card.appendChild(messageContent);
        
        // 随机位置，确保弹窗不超出屏幕边界
        const cardWidth = 200; // 预估弹窗宽度
        const cardHeight = 60; // 预估弹窗高度
        const randomX = Math.random() * (window.innerWidth - cardWidth);
        const randomY = Math.random() * (window.innerHeight - cardHeight);
        card.style.left = `${randomX}px`;
        card.style.top = `${randomY}px`;
        
        // 移除动画延迟，立即显示卡片（国旗）
        card.style.animationDelay = '0s';
        
        // 固定较短的动画持续时间
        card.style.animationDuration = '0.5s';
        
        // 固定大小，确保一致性
        card.style.transform = 'scale(1)';
        
        // 添加到页面
        document.body.appendChild(card);
    }
    
    // 点击按钮事件
    clickButton.addEventListener('click', function() {
        // 隐藏初始页面
        initialPage.classList.add('hidden');
        
        // 一次性创建适量弹窗，平稳布满屏幕
        for (let i = 0; i < 30; i++) {
            createTipCard();
        }
        
        // 开始持续刷屏效果
        const interval = setInterval(() => {
            // 每次间隔创建2个弹窗
            for (let i = 0; i < 2; i++) {
                createTipCard();
            }
        }, 150); // 每150毫秒创建2个弹窗，相当于每秒约13个弹窗
        
        // 5秒后停止刷屏并显示主页面
        setTimeout(() => {
            // 清除刷屏定时器
            clearInterval(interval);
            
            // 移除所有提示卡片
            const tipCards = document.querySelectorAll('.tip-card');
            tipCards.forEach(card => {
                card.remove();
            });
            
            // 显示主页面 - 使用更明确的方式
            mainContainer.classList.add('visible');
            mainContainer.style.opacity = '1';
            mainContainer.style.zIndex = '1';
        }, 5000);
    });
    
    // 页面索引
    let currentPage = 0;
    
    // 滚动监听，用于更新当前页面索引和显示彩蛋页面
    container.addEventListener('scroll', function() {
        const scrollTop = container.scrollTop;
        const scrollHeight = container.scrollHeight;
        const clientHeight = container.clientHeight;
        
        // 当滚动到接近底部时显示彩蛋页面
        if (scrollTop + clientHeight >= scrollHeight - 100) {
            easterEgg.classList.add('show');
        } else {
            easterEgg.classList.remove('show');
        }
        
        // 优化页面索引计算：使用Math.floor，避免快速滚动时跳过页面
        // 只有当滚动超过当前页面一半时才切换到下一页
        const pagePosition = scrollTop / clientHeight;
        let newPage = Math.floor(pagePosition);
        
        // 如果滚动超过当前页面的70%，则切换到下一页
        if (pagePosition - newPage > 0.7 && newPage < pages.length - 1) {
            newPage++;
        }
        
        if (newPage !== currentPage) {
            currentPage = newPage;
        }
    });
    
    // 点击事件，用于触发彩蛋页面
    document.addEventListener('click', function(e) {
        // 如果点击的是文字内容，显示彩蛋页面
        if (e.target.tagName === 'H1' || e.target.tagName === 'P' || e.target.tagName === 'DIV') {
            // 显示彩蛋页面，但不直接控制滚动，让用户自然滚动查看
            easterEgg.classList.add('show');
        }
    });
    
    // 增强多国语言轮播效果
    let languageIndex = 0;
    
    function rotateLanguages() {
        // 隐藏所有语言项
        languageItems.forEach(item => {
            item.style.opacity = '0';
            item.style.transform = 'translate(-50%, -50%) translateY(20px)';
            item.style.transition = 'opacity 0.5s ease, transform 0.5s ease';
        });
        
        // 显示当前语言项
        languageItems[languageIndex].style.opacity = '1';
        languageItems[languageIndex].style.transform = 'translate(-50%, -50%) translateY(0)';
        languageItems[languageIndex].style.transition = 'opacity 0.5s ease, transform 0.5s ease';
        
        // 增加索引，循环播放
        languageIndex = (languageIndex + 1) % languageItems.length;
        
        // 设置下一次轮换时间
        setTimeout(rotateLanguages, 1500); // 每个语言显示1.5秒
    }
    
    // 启动语言轮播（在页面5加载后）
    const observer = new IntersectionObserver(function(entries) {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                // 页面5进入视口，启动语言轮播
                rotateLanguages();
                observer.unobserve(entry.target);
            }
        });
    }, { threshold: 0.5 });
    
    observer.observe(document.getElementById('page5'));
    
    // 页面进入视口时添加动画效果
    const pageObserver = new IntersectionObserver(function(entries) {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                // 页面进入视口，添加动画类
                entry.target.classList.add('active');
                pageObserver.unobserve(entry.target);
            }
        });
    }, { threshold: 0.1 });
    
    // 观察所有页面
    pages.forEach(page => {
        pageObserver.observe(page);
    });
    
    // 键盘事件，支持上下箭头切换页面
    document.addEventListener('keydown', function(e) {
        if (e.key === 'ArrowDown' || e.key === 'PageDown') {
            // 向下滚动
            if (currentPage < pages.length - 1) {
                currentPage++;
                // 使用CSS滚动捕捉而非直接调用scrollIntoView
                container.scrollTop = currentPage * container.clientHeight;
            }
        } else if (e.key === 'ArrowUp' || e.key === 'PageUp') {
            // 向上滚动
            if (currentPage > 0) {
                currentPage--;
                // 使用CSS滚动捕捉而非直接调用scrollIntoView
                container.scrollTop = currentPage * container.clientHeight;
            }
        }
    });
    
    // 添加触摸滑动支持 - 优化版本，避免与CSS滚动捕捉冲突
    let startY = 0;
    let endY = 0;
    let isSwiping = false;
    
    container.addEventListener('touchstart', function(e) {
        startY = e.touches[0].clientY;
        isSwiping = true;
    });
    
    container.addEventListener('touchmove', function(e) {
        if (!isSwiping) return;
        endY = e.touches[0].clientY;
    });
    
    container.addEventListener('touchend', function(e) {
        if (!isSwiping) return;
        isSwiping = false;
        endY = e.changedTouches[0].clientY;
        handleSwipe();
    });
    
    function handleSwipe() {
        const swipeThreshold = 150; // 增加阈值，减少误触
        const swipeDistance = endY - startY;
        
        // 仅在滑动距离足够大时才触发页面切换
        if (Math.abs(swipeDistance) < swipeThreshold) return;
        
        // 向下滑动（下一页）
        if (swipeDistance < -swipeThreshold) {
            if (currentPage < pages.length - 1) {
                // 直接滚动到目标页面，避免跨页
                container.scrollTo({
                    top: (currentPage + 1) * container.clientHeight,
                    behavior: 'smooth'
                });
            }
        }
        // 向上滑动（上一页）
        else if (swipeDistance > swipeThreshold) {
            if (currentPage > 0) {
                // 直接滚动到目标页面，避免跨页
                container.scrollTo({
                    top: (currentPage - 1) * container.clientHeight,
                    behavior: 'smooth'
                });
            }
        }
    }
    
    // 修改页面加载动画，使其与我们的页面切换逻辑兼容
    window.addEventListener('load', function() {
        // 保持容器初始状态为隐藏，由点击按钮后控制显示
        mainContainer.style.opacity = '0';
        mainContainer.style.transition = 'opacity 1s ease';
        // 确保容器初始z-index为0，点击按钮后再提升
        mainContainer.style.zIndex = '0';
    });
    
    // 为每个页面添加进入动画
    pages.forEach((page, index) => {
        // 初始状态
        page.style.opacity = '0';
        page.style.transform = 'translateY(100px)';
        
        // 当页面进入视口时的动画
        const pageEntryObserver = new IntersectionObserver(function(entries) {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    entry.target.style.transition = 'opacity 1s ease, transform 1s ease';
                    entry.target.style.opacity = '1';
                    entry.target.style.transform = 'translateY(0)';
                    pageEntryObserver.unobserve(entry.target);
                }
            });
        }, { threshold: 0.3 });
        
        pageEntryObserver.observe(page);
    });
    
    // 增强彩蛋页面的显示效果
    easterEgg.addEventListener('mouseenter', function() {
        this.style.transform = 'scale(1.02)';
        this.style.transition = 'transform 0.3s ease';
    });
    
    easterEgg.addEventListener('mouseleave', function() {
        this.style.transform = 'scale(1)';
    });
    
    // 添加一些交互反馈
    const contentElements = document.querySelectorAll('.content');
    contentElements.forEach(element => {
        element.addEventListener('mouseenter', function() {
            this.style.transform = 'scale(1.02)';
            this.style.transition = 'transform 0.3s ease';
        });
        
        element.addEventListener('mouseleave', function() {
            this.style.transform = 'scale(1)';
        });
    });
    
    // 移除动态背景渐变，使用纯白色背景
    document.body.style.background = 'white';
    document.body.style.animation = 'none';
});