<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>记忆</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        :root {
            --primary-color: #e63946;
            --secondary-color: #a8dadc;
            --dark-color: #1d3557;
            --light-color: #f1faee;
            --accent-color: #457b9d;
            --transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
            --card-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
            --card-hover-shadow: 0 20px 40px rgba(231, 57, 70, 0.3);
        }

        * {
            box-sizing: border-box;
        }

        body {
            margin: 0;
            padding: 0;
            font-family: 'Montserrat', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background: linear-gradient(135deg, #0f2027, #203a43, #2c5364);
            color: var(--light-color);
            min-height: 100vh;
            overflow-x: hidden;
            line-height: 1.6;
        }

        .container {
            max-width: 1400px;
            margin: 0 auto;
            padding: 3rem;
        }

        .main-title {
            color: var(--light-color);
            text-align: center;
            margin-bottom: 3rem;
            font-weight: 300;
            letter-spacing: 3px;
            font-size: 2.5rem;
            text-transform: uppercase;
            position: relative;
            padding-bottom: 1rem;
        }

        .main-title::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 100px;
            height: 3px;
            background: var(--primary-color);
        }

        /* 相册选择模块 */
        .album-selection {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
            gap: 3rem;
            margin-top: 3rem;
        }

        .album-card {
            background: rgba(29, 53, 87, 0.7);
            border-radius: 16px;
            overflow: hidden;
            box-shadow: var(--card-shadow);
            transition: var(--transition);
            cursor: pointer;
            position: relative;
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.1);
            transform: translateY(0);
        }

        .album-card:hover {
            transform: translateY(-10px);
            box-shadow: var(--card-hover-shadow);
            border-color: var(--primary-color);
        }

        .album-cover {
            height: 240px;
            background-size: cover;
            background-position: center;
            position: relative;
            transition: var(--transition);
        }

        .album-card:hover .album-cover {
            transform: scale(1.02);
        }

        .album-overlay {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
            display: flex;
            align-items: flex-end;
            justify-content: center;
            padding: 2rem;
            opacity: 1;
            transition: var(--transition);
        }

        .album-info {
            padding: 2rem;
            text-align: center;
        }

        .album-title {
            font-size: 1.4rem;
            font-weight: 600;
            margin-bottom: 0.5rem;
            color: var(--light-color);
            letter-spacing: 1px;
        }

        .album-date {
            font-size: 0.9rem;
            color: var(--secondary-color);
            letter-spacing: 1px;
        }

        /* 相册详情模块 */
        .album-detail {
            display: none;
            animation: fadeIn 0.5s ease-out;
        }

        .back-button {
            background: rgba(69, 123, 157, 0.3);
            border: none;
            font-size: 1rem;
            color: var(--light-color);
            cursor: pointer;
            margin-bottom: 2rem;
            display: flex;
            align-items: center;
            gap: 0.5rem;
            transition: var(--transition);
            padding: 0.8rem 1.5rem;
            border-radius: 30px;
            backdrop-filter: blur(5px);
        }

        .back-button:hover {
            background: rgba(69, 123, 157, 0.5);
            transform: translateX(-5px);
        }

        .detail-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 3rem;
        }

        .detail-title {
            font-size: 2.5rem;
            font-weight: 300;
            color: var(--light-color);
            margin: 0;
            letter-spacing: 2px;
            text-transform: uppercase;
        }

        .photo-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
            gap: 2rem;
        }

        .photo-item {
            position: relative;
            border-radius: 12px;
            overflow: hidden;
            box-shadow: var(--card-shadow);
            transition: var(--transition);
            aspect-ratio: 1;
            background: rgba(29, 53, 87, 0.5);
            transform: scale(1);
        }

        .photo-item:hover {
            transform: scale(1.03);
            box-shadow: var(--card-hover-shadow);
            z-index: 2;
        }

        .photo-img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: var(--transition);
            opacity: 0;
            transform: scale(0.95);
        }

        .photo-img.loaded {
            opacity: 1;
            transform: scale(1);
        }

        .loading-spinner {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 40px;
            height: 40px;
            border: 3px solid rgba(168, 218, 220, 0.3);
            border-radius: 50%;
            border-top-color: var(--secondary-color);
            animation: spin 1s ease-in-out infinite;
        }

        /* 图片预览模态框 */
        .preview-modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.95);
            z-index: 1000;
            align-items: center;
            justify-content: center;
            opacity: 0;
            transition: opacity 0.3s ease;
        }

        .preview-modal.active {
            opacity: 1;
            display: flex;
        }

        .modal-content {
            position: relative;
            max-width: 90%;
            max-height: 90%;
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .modal-img {
            max-width: 100%;
            max-height: 80vh;
            object-fit: contain;
            border-radius: 8px;
            transform: scale(0.5);
            transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease;
            opacity: 0;
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
        }

        .modal-img.active {
            transform: scale(1);
            opacity: 1;
        }

        .modal-tools {
            display: flex;
            gap: 1.5rem;
            margin-top: 2rem;
        }

        .tool-btn {
            background: rgba(230, 57, 70, 0.3);
            border: none;
            width: 50px;
            height: 50px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: var(--transition);
            color: white;
            font-size: 1.2rem;
            backdrop-filter: blur(5px);
        }

        .tool-btn:hover {
            background: rgba(230, 57, 70, 0.5);
            transform: scale(1.1);
        }

        .nav-btn {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            width: 60px;
            height: 60px;
            background: rgba(230, 57, 70, 0.3);
            border: none;
            border-radius: 50%;
            color: white;
            font-size: 1.5rem;
            cursor: pointer;
            transition: var(--transition);
            z-index: 10;
            backdrop-filter: blur(5px);
        }

        .nav-btn:hover {
            background: rgba(230, 57, 70, 0.5);
            transform: translateY(-50%) scale(1.1);
        }

        .prev-btn {
            left: 30px;
        }

        .next-btn {
            right: 30px;
        }

        .close-modal {
            position: absolute;
            top: 40px;
            right: 40px;
            background: rgba(230, 57, 70, 0.3);
            border: none;
            width: 50px;
            height: 50px;
            border-radius: 50%;
            color: white;
            font-size: 1.5rem;
            cursor: pointer;
            transition: var(--transition);
            display: flex;
            align-items: center;
            justify-content: center;
            backdrop-filter: blur(5px);
        }

        .close-modal:hover {
            background: rgba(230, 57, 70, 0.5);
            transform: rotate(90deg);
        }

        /* 动画 */
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }

        @keyframes spin {
            to { transform: translate(-50%, -50%) rotate(360deg); }
        }

        /* 雪花背景效果 */
        .snowflake {
            position: fixed;
            color: white;
            font-size: 1em;
            user-select: none;
            pointer-events: none;
            opacity: 0.8;
            text-shadow: 0 0 10px rgba(230, 57, 70, 0.5);
            animation: fall linear infinite;
            z-index: -1;
        }

        @keyframes fall {
            to {
                transform: translateY(100vh);
            }
        }

        /* 响应式设计 */
        @media (max-width: 1024px) {
            .container {
                padding: 2rem;
            }

            .album-selection {
                grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
                gap: 2rem;
            }

            .photo-grid {
                grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
            }
        }

        @media (max-width: 768px) {
            .container {
                padding: 1.5rem;
            }

            .main-title {
                font-size: 2rem;
                margin-bottom: 2rem;
            }

            .album-selection {
                grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
                gap: 1.5rem;
            }

            .album-cover {
                height: 200px;
            }

            .detail-title {
                font-size: 2rem;
            }

            .photo-grid {
                grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
                gap: 1.5rem;
            }

            .tool-btn, .close-modal {
                width: 45px;
                height: 45px;
                font-size: 1.1rem;
            }

            .nav-btn {
                width: 50px;
                height: 50px;
                font-size: 1.3rem;
            }
        }

        @media (max-width: 480px) {
            .container {
                padding: 1rem;
            }

            .main-title {
                font-size: 1.8rem;
            }

            .album-selection {
                grid-template-columns: 1fr;
            }

            .detail-title {
                font-size: 1.8rem;
            }

            .photo-grid {
                grid-template-columns: 1fr;
            }
        }
    </style>
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;600&display=swap" rel="stylesheet">
</head>
<body>
<div class="container">
    <h1 class="main-title">我们的订婚相册</h1>

    <!-- 相册选择模块 -->
    <div class="album-selection" id="albumSelection">
        <!-- 相册卡片将通过JS动态生成 -->
    </div>

    <!-- 相册详情模块 -->
    <div class="album-detail" id="albumDetail">
        <button class="back-button" id="backButton">
            <i class="fas fa-arrow-left"></i> 返回相册列表
        </button>

        <div class="detail-header">
            <h2 class="detail-title" id="detailTitle">相册标题</h2>
        </div>

        <div class="photo-grid" id="photoGrid">
            <!-- 照片将通过JS动态生成 -->
        </div>
    </div>
</div>

<!-- 图片预览模态框 -->
<div class="preview-modal" id="previewModal">
    <button class="close-modal" id="closeModal">
        <i class="fas fa-times"></i>
    </button>

    <button class="nav-btn prev-btn" id="prevBtn">
        <i class="fas fa-chevron-left"></i>
    </button>

    <div class="modal-content">
        <img class="modal-img" id="modalImg" src="" alt="预览图片">

        <div class="modal-tools">
            <button class="tool-btn" id="rotateLeft" title="向左旋转">
                <i class="fas fa-undo"></i>
            </button>
            <button class="tool-btn" id="rotateRight" title="向右旋转">
                <i class="fas fa-redo"></i>
            </button>
            <button class="tool-btn" id="downloadBtn" title="下载图片">
                <i class="fas fa-download"></i>
            </button>
        </div>
    </div>

    <button class="nav-btn next-btn" id="nextBtn">
        <i class="fas fa-chevron-right"></i>
    </button>
</div>

<script>
    const albums = <?php echo json_encode($photo_album) ?>;

    // DOM元素
    const albumSelection = document.getElementById('albumSelection');
    const albumDetail = document.getElementById('albumDetail');
    const detailTitle = document.getElementById('detailTitle');
    const photoGrid = document.getElementById('photoGrid');
    const backButton = document.getElementById('backButton');
    const previewModal = document.getElementById('previewModal');
    const modalImg = document.getElementById('modalImg');
    const closeModal = document.getElementById('closeModal');
    const rotateLeft = document.getElementById('rotateLeft');
    const rotateRight = document.getElementById('rotateRight');
    const downloadBtn = document.getElementById('downloadBtn');
    const prevBtn = document.getElementById('prevBtn');
    const nextBtn = document.getElementById('nextBtn');

    // 当前状态
    let currentAlbum = null;
    let currentPhotoIndex = 0;
    let currentPhotos = [];
    let currentRotation = 0;

    // 初始化相册列表
    function initAlbums() {
        albumSelection.innerHTML = '';

        albums.forEach(album => {
            const albumCard = document.createElement('div');
            albumCard.className = 'album-card';
            albumCard.innerHTML = `
                    <div class="album-cover" style="background-image: url('${album.url}')">
                        <div class="album-overlay">
                            <div class="album-info">
                                <h3 class="album-title">${album.title}</h3>
                                <p class="album-date">${album.created_at}</p>
                            </div>
                        </div>
                    </div>
                `;

            albumCard.addEventListener('click', () => showAlbumDetail(album));
            albumSelection.appendChild(albumCard);
        });
    }

    // 显示相册详情
    function showAlbumDetail(album) {
        currentAlbum = album;
        currentPhotos = album.photos;
        detailTitle.textContent = album.title;
        photoGrid.innerHTML = '';

        album.photos.forEach((photo, index) => {
            const photoItem = document.createElement('div');
            photoItem.className = 'photo-item';

            // 创建加载指示器
            const spinner = document.createElement('div');
            spinner.className = 'loading-spinner';

            // 创建图片元素
            const img = new Image();
            img.className = 'photo-img';
            img.alt = `照片 ${index + 1}`;
            img.dataset.index = index;

            // 设置data-src属性用于懒加载
            img.dataset.src = photo.compressed;

            // 添加点击事件
            photoItem.addEventListener('click', () => {
                currentPhotoIndex = index;
                // showPhotoPreview(photo.original);
                showPhotoPreview(photo.compressed);
            });

            // 观察图片是否进入视口
            const observer = new IntersectionObserver((entries) => {
                entries.forEach(entry => {
                    if (entry.isIntersecting) {
                        const lazyImage = entry.target;
                        lazyImage.src = lazyImage.dataset.src;

                        // 图片加载完成后显示
                        lazyImage.onload = () => {
                            lazyImage.classList.add('loaded');
                            if (spinner.parentNode === photoItem) {
                                photoItem.removeChild(spinner);
                            }
                        };

                        observer.unobserve(lazyImage);
                    }
                });
            }, {
                rootMargin: '200px'
            });

            photoItem.appendChild(spinner);
            photoItem.appendChild(img);
            photoGrid.appendChild(photoItem);

            // 开始观察图片
            observer.observe(img);
        });

        albumSelection.style.display = 'none';
        albumDetail.style.display = 'block';

        // 滚动到顶部
        window.scrollTo({
            top: 0,
            behavior: 'smooth'
        });
    }

    // 返回相册列表
    function backToAlbums() {
        albumDetail.style.display = 'none';
        albumSelection.style.display = 'grid';
        currentAlbum = null;
        currentPhotos = [];
    }

    // 显示图片预览
    function showPhotoPreview(photo) {
        modalImg.src = photo;
        currentRotation = 0;
        modalImg.style.transform = 'rotate(0deg)';

        previewModal.classList.add('active');
        setTimeout(() => {
            previewModal.style.opacity = '1';
            setTimeout(() => {
                modalImg.classList.add('active');
            }, 50);
        }, 10);
    }

    // 关闭图片预览
    function closePhotoPreview() {
        modalImg.classList.remove('active');
        previewModal.style.opacity = '0';

        setTimeout(() => {
            previewModal.classList.remove('active');
        }, 300);
    }

    // 显示上一张图片
    function showPrevPhoto() {
        if (currentPhotoIndex > 0) {
            currentPhotoIndex--;
            modalImg.classList.remove('active');
            setTimeout(() => {
                // modalImg.src = currentPhotos[currentPhotoIndex].original;
                modalImg.src = currentPhotos[currentPhotoIndex].compressed;
                modalImg.style.transform = 'rotate(0deg)';
                currentRotation = 0;
                setTimeout(() => {
                    modalImg.classList.add('active');
                }, 50);
            }, 300);
        }
    }

    // 显示下一张图片
    function showNextPhoto() {
        if (currentPhotoIndex < currentPhotos.length - 1) {
            currentPhotoIndex++;
            modalImg.classList.remove('active');
            setTimeout(() => {
                // modalImg.src = currentPhotos[currentPhotoIndex].original;
                modalImg.src = currentPhotos[currentPhotoIndex].compressed;
                modalImg.style.transform = 'rotate(0deg)';
                currentRotation = 0;
                setTimeout(() => {
                    modalImg.classList.add('active');
                }, 50);
            }, 300);
        }
    }

    // 旋转图片
    function rotatePhoto(direction) {
        if (direction === 'left') {
            currentRotation -= 90;
        } else {
            currentRotation += 90;
        }

        modalImg.style.transform = `rotate(${currentRotation}deg)`;
    }

    // 下载图片
    function downloadPhoto() {
        if (!currentAlbum || currentPhotoIndex === null) return;

        const link = document.createElement('a');
        link.href = currentPhotos[currentPhotoIndex];
        link.download = `photo_${currentAlbum.title}_${Date.now()}.jpg`;
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
    }

    // 事件监听
    backButton.addEventListener('click', backToAlbums);
    closeModal.addEventListener('click', closePhotoPreview);
    rotateLeft.addEventListener('click', () => rotatePhoto('left'));
    rotateRight.addEventListener('click', () => rotatePhoto('right'));
    downloadBtn.addEventListener('click', downloadPhoto);
    prevBtn.addEventListener('click', showPrevPhoto);
    nextBtn.addEventListener('click', showNextPhoto);

    // 键盘导航
    document.addEventListener('keydown', (e) => {
        if (previewModal.classList.contains('active')) {
            if (e.key === 'ArrowLeft') {
                showPrevPhoto();
            } else if (e.key === 'ArrowRight') {
                showNextPhoto();
            } else if (e.key === 'Escape') {
                closePhotoPreview();
            }
        }
    });

    // 初始化雪花效果
    function createSnowflakes() {
        const width = window.innerWidth;
        const height = window.innerHeight;
        const count = Math.min(50, Math.floor(width * height / 20000));

        for (let i = 0; i < count; i++) {
            createSnowflake();
        }
    }

    function createSnowflake() {
        const snowflake = document.createElement('div');
        snowflake.className = 'snowflake';

        const shapes = ['❄', '❅', '❆', '✻', '✼', '✾', '✵'];
        snowflake.textContent = shapes[Math.floor(Math.random() * shapes.length)];

        const size = Math.random() * 0.8 + 0.2;
        snowflake.style.fontSize = `${size}em`;
        snowflake.style.opacity = Math.random() * 0.6 + 0.3;
        snowflake.style.left = `${Math.random() * window.innerWidth}px`;
        snowflake.style.top = '-20px';

        const duration = Math.random() * 5 + 5;
        snowflake.style.animationDuration = `${duration}s`;
        snowflake.style.animationDelay = `${Math.random() * 5}s`;

        document.body.appendChild(snowflake);

        snowflake.addEventListener('animationiteration', () => {
            snowflake.style.left = `${Math.random() * window.innerWidth}px`;
            snowflake.style.top = '-20px';
        });
    }

    // 窗口大小改变时重新创建雪花
    window.addEventListener('resize', () => {
        const snowflakes = document.querySelectorAll('.snowflake');
        snowflakes.forEach(snowflake => snowflake.remove());
        createSnowflakes();
    });

    // 初始化应用
    window.addEventListener('load', () => {
        initAlbums();
        createSnowflakes();
    });
</script>
</body>
</html>
