script.js

// 頁面載入完成後的動畫效果
document.addEventListener('DOMContentLoaded', function() {
    // 為心形添加點擊效果
    const heart = document.querySelector('.heart');
    heart.addEventListener('click', function() {
        this.style.transform = 'rotate(45deg) scale(1.3)';
        setTimeout(() => {
            this.style.transform = 'rotate(45deg) scale(1)';
        }, 200);
    });

    // 為訊息容器添加滑鼠懸停效果
    const messageContainer = document.querySelector('.message-container');
    messageContainer.addEventListener('mouseenter', function() {
        this.style.transform = 'translateY(-5px)';
        this.style.boxShadow = '0 25px 50px rgba(0, 0, 0, 0.15)';
    });

    messageContainer.addEventListener('mouseleave', function() {
        this.style.transform = 'translateY(0)';
        this.style.boxShadow = '0 20px 40px rgba(0, 0, 0, 0.1)';
    });

    // 為標題添加打字機效果
    const title = document.querySelector('.title');
    const originalText = title.textContent;
    title.textContent = '';
    
    let i = 0;
    const typeWriter = () => {
        if (i < originalText.length) {
            title.textContent += originalText.charAt(i);
            i++;
            setTimeout(typeWriter, 100);
        }
    };
    
    // 延遲開始打字機效果
    setTimeout(typeWriter, 500);

    // 為訊息添加淡入效果
    const message = document.querySelector('.message');
    message.style.opacity = '0';
    message.style.transform = 'translateY(20px)';
    
    setTimeout(() => {
        message.style.transition = 'all 1s ease-out';
        message.style.opacity = '1';
        message.style.transform = 'translateY(0)';
    }, 1500);

    // 添加一些隨機的愛心動畫
    setInterval(() => {
        createRandomHeart();
    }, 3000);
});

// 創建隨機位置的愛心
function createRandomHeart() {
    const heart = document.createElement('div');
    heart.innerHTML = '💖';
    heart.style.position = 'fixed';
    heart.style.left = Math.random() * 100 + '%';
    heart.style.top = '100vh';
    heart.style.fontSize = '1.5rem';
    heart.style.pointerEvents = 'none';
    heart.style.zIndex = '1';
    heart.style.animation = 'float 4s ease-in-out forwards';
    
    document.body.appendChild(heart);
    
    // 動畫結束後移除元素
    setTimeout(() => {
        if (heart.parentNode) {
            heart.parentNode.removeChild(heart);
        }
    }, 4000);
}

// 添加鍵盤互動
document.addEventListener('keydown', function(e) {
    if (e.key === ' ') { // 空白鍵
        e.preventDefault();
        const heart = document.querySelector('.heart');
        heart.style.animation = 'none';
        heart.offsetHeight; // 觸發重繪
        heart.style.animation = 'heartbeat 0.5s ease-in-out';
    }
});

// 添加觸摸支援（手機版）
if ('ontouchstart' in window) {
    document.addEventListener('touchstart', function() {
        const heart = document.querySelector('.heart');
        heart.style.transform = 'rotate(45deg) scale(1.3)';
        setTimeout(() => {
            heart.style.transform = 'rotate(45deg) scale(1)';
        }, 200);
    });
}