从代码中诞生的浪漫：一个程序员的表白艺术

Lethehong

于 2025-05-10 15:05:36 发布

阅读量1.1k

点赞数 90

分类专栏：热点时事文章标签： codebuudy html css js deepseek V3

本文链接：https://blog.csdn.net/2301_76341691/article/details/147853410

版权

热点时事专栏收录该内容

33 篇文章

订阅专栏

我正在参加CodeBuddy「首席试玩官」内容创作大赛，本文所使用的 CodeBuddy 免费下载链接：腾讯云代码助手 CodeBuddy - AI 时代的智能编程伙伴

序言：技术与情感的跨界之旅

在这个数字化的时代，爱情早已不再局限于传统的表达方式。作为一名程序员，我深知代码不仅仅是冰冷的逻辑堆砌，更可以成为传递情感的桥梁。这个表白网页项目，就是我用技术编织浪漫的最佳见证。

项目的起源：不只是一个网页

为什么选择用代码表白？

传统的表白方式已经被重复千百遍：玫瑰、巧克力、烛光晚餐。但作为一个程序员，我想用自己的方式诉说爱意 - 用代码，用创意，用每一行充满心意的程序。

这个项目不仅仅是一个网页，它是：

一段用JavaScript编写的爱情诗
一个充满互动的情感载体
一种展现个人独特魅力的方式

CodeBuddy：革新软件开发的AI智能助手

产品定位与核心价值

CodeBuddy不仅仅是一个编程辅助工具，更是现代开发者的得力助手。它通过先进的AI技术，为开发者提供全方位的编程支持，显著提升编码效率和代码质量。

核心能力解析

1. 多文件智能编辑

一次性跨文件修改
自动生成统一补丁
精准的代码上下文理解

2. 深度代码库分析

智能向量数据库生成
快速定位相关代码文件
提供代码结构洞察

3. 智能代码建议

实时代码补全
上下文相关推荐
风格一致性优化

4. 开发环境集成

VSCode插件
JetBrains全系列IDE支持
无缝集成开发流程

技术架构

AI引擎特点

大规模语言模型
深度学习算法
实时交互响应
持续学习能力

关键技术

自然语言处理
代码理解与生成
机器学习算法
上下文感知技术

应用场景

1. 个人开发者

提升编码效率
学习最佳实践
快速问题解决

3. 企业级开发

大型项目管理
技术标准化
开发流程优化

独特优势

1. 多语言支持

覆盖主流编程语言：

Python
JavaScript/TypeScript
Java
C++
Go
Rust
等20+编程语言

2. 智能交互

自然语言编程指令
语音交互
上下文理解

3. 安全与隐私

本地部署选项
企业级安全认证
代码隐私保护

用户价值

提升效率

减少重复劳动
加速开发进度
降低技术门槛

代码质量

实时错误检测
性能优化建议
最佳实践推荐

学习成长

代码示例
即时技术指导
编程模式学习

技术架构：浪漫的工程学

前端技术栈

我们选择了最经典的前端三剑客：

HTML5：提供语义化的结构

<!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="style.css">
</head>
<body>
    <div class="page-transition"></div>
    <nav class="main-nav">
        <a href="home.html" class="nav-link active">首页</a>
        <a href="memories.html" class="nav-link">我们的回忆</a>
        <a href="confession.html" class="nav-link">我的心意</a>
    </nav>
    
    <div class="home-container">
        <div class="welcome-text">
            <h1 class="title">致我最爱的你</h1>
            <p class="subtitle">请慢慢探索我的心意...</p>
        </div>
        <div class="start-button">
            <button id="startJourney">开始旅程</button>
        </div>
    </div>

    <div class="music-control">
        <button id="musicToggle">🎵 播放音乐</button>
    </div>

    <script src="navigation.js"></script>
    <script src="music.js"></script>
    <script>
        document.getElementById('startJourney').addEventListener('click', function() {
            navigateTo('memories.html', 'slide-left');
        });
    </script>
</body>
</html>

CSS3：赋予页面生命力的动画

/* 基础样式 */
body {
    margin: 0;
    padding: 0;
    font-family: 'Arial', sans-serif;
    background: linear-gradient(135deg, #ff9a9e 0%, #fad0c4 100%);
    height: 100vh;
    overflow-x: hidden;
    color: #fff;
}

/* 页面过渡效果 */
.page-transition {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #ff6b81;
    z-index: 1000;
    transform: scaleY(0);
    transform-origin: top;
    transition: transform 0.7s ease-in-out;
}

/* 导航菜单 */
.main-nav {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    border-radius: 30px;
    padding: 10px 20px;
    z-index: 100;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.nav-link {
    color: white;
    text-decoration: none;
    margin: 0 15px;
    padding: 5px 15px;
    border-radius: 20px;
    transition: all 0.3s ease;
}

.nav-link.active {
    background: rgba(255, 255, 255, 0.3);
    font-weight: bold;
}

.nav-link:hover {
    background: rgba(255, 255, 255, 0.2);
}

/* 首页样式 */
.home-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100vh;
    text-align: center;
    padding: 0 20px;
}

.welcome-text {
    margin-bottom: 40px;
    opacity: 0;
    animation: fadeIn 1s ease-out 0.5s forwards;
}

.title {
    font-size: 3.5rem;
    margin-bottom: 1rem;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

.subtitle {
    font-size: 1.5rem;
    opacity: 0.8;
}

.start-button {
    opacity: 0;
    animation: fadeIn 1s ease-out 1.5s forwards;
}

#startJourney {
    padding: 15px 40px;
    font-size: 1.2rem;
    background: linear-gradient(45deg, #ff6b81, #ff8e53);
    border: none;
    border-radius: 50px;
    color: white;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

#startJourney:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}

/* 回忆页样式 */
.memories-container {
    max-width: 900px;
    margin: 100px auto;
    padding: 0 20px;
}

.page-title {
    text-align: center;
    font-size: 2.5rem;
    margin-bottom: 50px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

.timeline {
    position: relative;
    padding-left: 50px;
}

.timeline::before {
    content: '';
    position: absolute;
    left: 20px;
    top: 0;
    bottom: 0;
    width: 4px;
    background: rgba(255, 255, 255, 0.3);
}

.timeline-item {
    position: relative;
    margin-bottom: 50px;
}

.timeline-date {
    position: absolute;
    left: -50px;
    width: 100px;
    padding: 5px 10px;
    background: #ff6b81;
    border-radius: 20px;
    text-align: center;
    font-weight: bold;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.timeline-content {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    padding: 20px;
    border-radius: 10px;
    transition: all 0.3s ease;
}

.timeline-content:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.timeline-content h3 {
    margin-top: 0;
    color: #fff;
}

.timeline-photos {
    display: flex;
    margin-top: 15px;
    overflow-x: auto;
    padding-bottom: 10px;
}

.timeline-photos img {
    width: 200px;
    height: 150px;
    object-fit: cover;
    border-radius: 8px;
    margin-right: 10px;
    cursor: pointer;
    transition: transform 0.3s ease;
}

.timeline-photos img:hover {
    transform: scale(1.05);
}

/* 表白页样式 */
.content {
    max-width: 800px;
    margin: 100px auto;
    padding: 0 20px;
    text-align: center;
    opacity: 0;
    animation: fadeIn 2s ease-in-out forwards;
    position: relative;
    z-index: 10;
}

/* 漂浮心形动画 */
.hearts-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
}

.heart {
    position: absolute;
    width: 20px;
    height: 20px;
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23ff6b81" d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/></svg>') no-repeat center center;
    background-size: contain;
    opacity: 0.6;
    animation: float 15s linear infinite;
}

@keyframes float {
    0% {
        transform: translateY(100vh) scale(0.5);
        opacity: 0;
    }
    10% {
        opacity: 0.6;
    }
    90% {
        opacity: 0.6;
    }
    100% {
        transform: translateY(-20vh) scale(1.2);
        opacity: 0;
    }
}

/* 打字机效果 */
.message p {
    overflow: hidden;
    white-space: nowrap;
    margin: 10px auto;
    opacity: 0;
    animation: typing 3s steps(40, end) forwards;
}

.message p:nth-child(1) { animation-delay: 0.5s; }
.message p:nth-child(2) { animation-delay: 1.5s; }
.message p:nth-child(3) { animation-delay: 2.5s; }
.message p:nth-child(4) { animation-delay: 3.5s; }

@keyframes typing {
    from { width: 0; opacity: 0; }
    to { width: 100%; opacity: 1; }
}

/* 按钮波纹效果 */
.choice-btn {
    position: relative;
    overflow: hidden;
}

.choice-btn:after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 5px;
    height: 5px;
    background: rgba(255, 255, 255, 0.5);
    opacity: 0;
    border-radius: 100%;
    transform: scale(1, 1) translate(-50%, -50%);
    transform-origin: 50% 50%;
}

.choice-btn:focus:not(:active)::after {
    animation: ripple 1s ease-out;
}

@keyframes ripple {
    0% {
        transform: scale(0, 0);
        opacity: 0.5;
    }
    100% {
        transform: scale(20, 20);
        opacity: 0;
    }
}

/* 其他原有样式保持不变... */

/* 新增互动选择样式 */
.interactive-choices {
    margin-top: 40px;
    display: flex;
    justify-content: center;
    gap: 20px;
}

.choice-btn {
    padding: 12px 30px;
    font-size: 1.2rem;
    border: none;
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.choice-btn[data-response="yes"] {
    background: linear-gradient(45deg, #4CAF50, #8BC34A);
    color: white;
}

.choice-btn[data-response="no"] {
    background: linear-gradient(45deg, #f44336, #FF9800);
    color: white;
}

.choice-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2);
}

/* 模态框样式 */
.response-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    z-index: 1000;
    justify-content: center;
    align-items: center;
}

.modal-content {
    background: white;
    padding: 30px;
    border-radius: 15px;
    text-align: center;
    max-width: 400px;
    width: 80%;
    position: relative;
}

.modal-content h2 {
    color: #ff6b81;
    margin-top: 0;
}

.modal-content p {
    color: #555;
    margin-bottom: 25px;
}

#closeModal {
    padding: 10px 25px;
    background: #ff6b81;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

.close-modal {
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: 1.5rem;
    cursor: pointer;
}

/* 画廊模态框样式 */
.gallery-modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.9);
    overflow: auto;
}

.modal-content {
    position: relative;
    margin: 5% auto;
    padding: 20px;
    width: 90%;
    max-width: 1200px;
    background: rgba(0,0,0,0.7);
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    min-height: 80vh;
}

.close-modal {
    position: absolute;
    top: 15px;
    right: 15px;
    color: white;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
}

/* 相册导航 */
.album-nav {
    margin-bottom: 20px;
}

.album-thumbnails {
    display: flex;
    justify-content: center;
    gap: 15px;
    flex-wrap: wrap;
    padding: 10px 0;
}

.album-thumb {
    width: 100px;
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: center;
}

.album-thumb img {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: 8px;
    border: 2px solid transparent;
    transition: all 0.3s ease;
}

.album-thumb span {
    display: block;
    margin-top: 5px;
    font-size: 12px;
    color: #fff;
}

.album-thumb.active img {
    border-color: #ff6b81;
    transform: scale(1.1);
}

.album-thumb:hover img {
    transform: scale(1.05);
    opacity: 0.8;
}

/* 照片查看区 */
.gallery-viewer {
    position: relative;
    flex-grow: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.gallery-slides {
    position: relative;
    width: 100%;
    height: 100%;
}

.gallery-slide {
    display: none;
    width: 100%;
    height: 100%;
    text-align: center;
}

.gallery-slide.active {
    display: flex;
    align-items: center;
    justify-content: center;
}

.gallery-slide img {
    max-width: 100%;
    max-height: 70vh;
    object-fit: contain;
    border-radius: 8px;
}

.slide-caption {
    position: absolute;
    bottom: 20px;
    left: 0;
    right: 0;
    color: white;
    text-align: center;
    padding: 10px;
    background: rgba(0,0,0,0.5);
    border-radius: 0 0 8px 8px;
}

/* 相册标题 */
.album-title {
    color: #fff;
    text-align: center;
    margin-bottom: 20px;
    font-size: 1.5em;
    text-shadow: 0 2px 4px rgba(0,0,0,0.5);
}

/* 导航按钮 */
.prev, .next {
    position: absolute;
    top: 50%;
    width: auto;
    padding: 16px;
    margin-top: -22px;
    color: white;
    font-weight: bold;
    font-size: 20px;
    transition: 0.3s;
    cursor: pointer;
    user-select: none;
    background: rgba(0,0,0,0.3);
    border-radius: 0 3px 3px 0;
}

.next {
    right: 0;
    border-radius: 3px -1 0 3px;
}
.prev{
    left: 0;
    border-radius: 3px -1 0 3px;
}

.prev:hover, .next:hover {
    background-color: rgba(255,107,129,0.8);
}

/* 音乐控制 */
.music-control {
    position: fixed;
    bottom: 20px;
    right: 20px;
}

#musicToggle {
    padding: 10px 20px;
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    border: none;
    border-radius: 30px;
    color: white;
    cursor: pointer;
    transition: all 0.3s ease;
}

#musicToggle:hover {
    background: rgba(255, 255, 255, 0.3);
}

/* 动画定义 */
@keyframes fadeIn {
    to {
        opacity: 1;
    }
}

/* 其他原有动画保持不变... */

/* 响应式设计 */
@media (max-width: 768px) {
    .main-nav {
        top: 10px;
        padding: 8px 15px;
    }
    
    .nav-link {
        margin: 0 5px;
        padding: 5px 10px;
        font-size: 0.9rem;
    }
    
    .title {
        font-size: 2.5rem;
    }
    
    .interactive-choices {
        flex-direction: column;
        gap: 10px;
    }
    
    .choice-btn {
        width: 100%;
    }
}

/* 恐龙跳一跳游戏 */
.game-container {
    margin-top: 40px;
    padding: 20px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    text-align: center;
}

.game-area {
    position: relative;
    width: 100%;
    height: 200px;
    margin: 20px auto;
    background: rgba(255, 255, 255, 0.05);
    overflow: hidden;
    border-radius: 8px;
}

.dino {
    position: absolute;
    bottom: 0;
    left: 50px;
    width: 50px;
    height: 50px;
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path fill="%234CAF50" d="M30,70 Q50,40 70,70 L70,90 L30,90 Z"/><circle cx="40" cy="60" r="5" fill="%23333333"/><circle cx="60" cy="60" r="5" fill="%23333333"/></svg>') no-repeat center;
    background-size: contain;
    transition: transform 0.1s;
}

.obstacle {
    position: absolute;
    bottom: 0;
    right: -20px;
    width: 20px;
    height: 40px;
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 40"><rect width="20" height="40" fill="%23F44336"/></svg>') no-repeat center;
    background-size: contain;
}

.game-controls {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    margin-top: 20px;
}

#startGame {
    padding: 10px 20px;
    background: #4CAF50;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.3s;
}

#startGame:hover {
    background: #45a049;
    transform: translateY(-2px);
}

.score {
    color: white;
    font-size: 1.2em;
}

/* 游戏响应式设计 */
@media (max-width: 600px) {
    .game-area {
        height: 150px;
    }
    
    .dino {
        width: 40px;
        height: 40px;
        left: 30px;
    }
    
    .obstacle {
        width: 15px;
        height: 30px;
    }
    
    .game-controls {
        flex-direction: column;
        gap: 10px;
    }
}

JavaScript：注入交互的灵魂

// 照片画廊系统
document.addEventListener('DOMContentLoaded', function() {
    // 照片数据 - 实际项目中可以从服务器获取
    const galleryData = {
        'first-meet': [
            { url: 'img/R-C.gif', caption: '我们的第一次相遇' },
            { url: 'img/yinghua.gif', caption: '美好的回忆' },
            { url: 'img/zhiwo.gif', caption: '难忘的瞬间' }
        ],
        'first-date': [
            { url: 'img/R-C.gif', caption: '第一次约会' },
            { url: 'img/yinghua.gif', caption: '愉快的交谈' },
            { url: 'img/zhiwo.gif', caption: '甜蜜的时光' }
        ],
        'valentine': [
            { url: 'img/R-C.gif', caption: '第一个情人节' },
            { url: 'img/yinghua.gif', caption: '特别的礼物' },
            { url: 'img/zhiwo.gif', caption: '浪漫的晚餐' }
        ]
    };

    // 初始化画廊
    initGallery();

    function initGallery() {
        // 绑定相册缩略图点击事件
        const albumThumbs = document.querySelectorAll('.album-thumb');
        albumThumbs.forEach(thumb => {
            thumb.addEventListener('click', function() {
                const albumId = this.getAttribute('data-album');
                switchAlbum(albumId);
            });
        });

        // 绑定缩略图点击事件
        const thumbnailContainers = document.querySelectorAll('.timeline-photos');
        thumbnailContainers.forEach(container => {
            const galleryId = container.getAttribute('data-gallery');
            const thumbnails = container.querySelectorAll('img');
            
            thumbnails.forEach((thumbnail, index) => {
                thumbnail.addEventListener('click', () => {
                    openGalleryModal(galleryId, index);
                });
            });
        });

        // 绑定模态框关闭按钮
        const closeModalBtn = document.querySelector('.close-modal');
        if (closeModalBtn) {
            closeModalBtn.addEventListener('click', closeGalleryModal);
        }

        // 绑定导航箭头
        const prevBtn = document.querySelector('.prev');
        const nextBtn = document.querySelector('.next');
        if (prevBtn && nextBtn) {
            prevBtn.addEventListener('click', showPrevSlide);
            nextBtn.addEventListener('click', showNextSlide);
        }

        // 点击模态框背景关闭
        const modal = document.getElementById('galleryModal');
        if (modal) {
            modal.addEventListener('click', function(e) {
                if (e.target === this) {
                    closeGalleryModal();
                }
            });
        }
    }

    // 当前画廊状态
    let currentGallery = {
        id: null,
        photos: [],
        currentIndex: 0
    };

    // 打开画廊模态框
    function openGalleryModal(galleryId, startIndex = 0) {
        currentGallery.id = galleryId;
        currentGallery.photos = galleryData[galleryId] || [];
        currentGallery.currentIndex = startIndex;

        const modal = document.getElementById('galleryModal');
        const slidesContainer = document.querySelector('.gallery-slides');
        const albumTitle = document.createElement('h3');
        albumTitle.className = 'album-title';
        albumTitle.textContent = getAlbumName(galleryId);

        if (modal && slidesContainer) {
            // 清空现有幻灯片
            slidesContainer.innerHTML = '';
            slidesContainer.appendChild(albumTitle);

            // 创建幻灯片
            currentGallery.photos.forEach((photo, index) => {
                const slide = document.createElement('div');
                slide.className = 'slide';
                if (index === startIndex) {
                    slide.classList.add('active');
                }

                const img = document.createElement('img');
                img.src = photo.url;
                img.alt = photo.caption;
                img.onerror = function() {
                    this.src = 'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="400" height="300" viewBox="0 0 400 300"><rect width="400" height="300" fill="%23f5f5f5"/><text x="200" y="150" font-family="Arial" font-size="16" text-anchor="middle" fill="%23999999">图片加载失败</text></svg>';
                    const caption = this.parentNode.querySelector('.caption');
                    if (caption) {
                        caption.textContent = `[图片加载失败] ${photo.caption}`;
                        caption.style.color = '#ff6b6b';
                    }
                };

                const caption = document.createElement('p');
                caption.className = 'caption';
                caption.textContent = photo.caption;

                slide.appendChild(img);
                slide.appendChild(caption);
                slidesContainer.appendChild(slide);
            });

            // 显示模态框
            modal.style.display = 'block';
            document.body.style.overflow = 'hidden';

            // 更新幻灯片位置
            updateSlidePosition();
        }
    }

    // 切换相册
    function switchAlbum(albumId) {
        // 更新活动相册指示器
        const albumThumbs = document.querySelectorAll('.album-thumb');
        albumThumbs.forEach(thumb => {
            thumb.classList.remove('active');
            if (thumb.getAttribute('data-album') === albumId) {
                thumb.classList.add('active');
            }
        });

        // 打开新相册的第一张照片
        openGalleryModal(albumId, 0);
    }

    // 关闭画廊模态框
    function closeGalleryModal() {
        const modal = document.getElementById('galleryModal');
        if (modal) {
            modal.style.display = 'none';
            document.body.style.overflow = 'auto';
        }
    }

    // 显示上一张幻灯片
    function showPrevSlide() {
        if (currentGallery.photos.length === 0) return;

        currentGallery.currentIndex--;
        if (currentGallery.currentIndex < 0) {
            currentGallery.currentIndex = currentGallery.photos.length - 1;
        }

        updateSlidePosition();
    }

    // 显示下一张幻灯片
    function showNextSlide() {
        if (currentGallery.photos.length === 0) return;

        currentGallery.currentIndex++;
        if (currentGallery.currentIndex >= currentGallery.photos.length) {
            currentGallery.currentIndex = 0;
        }

        updateSlidePosition();
    }

    // 更新幻灯片位置
    function updateSlidePosition() {
        const slidesContainer = document.querySelector('.gallery-slides');
        if (!slidesContainer) return;

        const slides = slidesContainer.querySelectorAll('.slide');
        const slideWidth = slidesContainer.clientWidth;

        slides.forEach((slide, index) => {
            slide.classList.remove('active', 'prev', 'next');
            
            if (index === currentGallery.currentIndex) {
                slide.classList.add('active');
            } else if (index === (currentGallery.currentIndex - 1 + slides.length) % slides.length) {
                slide.classList.add('prev');
            } else if (index === (currentGallery.currentIndex + 1) % slides.length) {
                slide.classList.add('next');
            }

            slide.style.transform = `translateX(${(index - currentGallery.currentIndex) * slideWidth}px)`;
        });
    }

    // 获取相册名称
    function getAlbumName(albumId) {
        const albumNames = {
            'first-meet': '第一次相遇',
            'first-date': '第一次约会', 
            'valentine': '情人节'
        };
        return albumNames[albumId] || '相册';
    }

    // 添加键盘导航
    document.addEventListener('keydown', function(e) {
        const modal = document.getElementById('galleryModal');
        if (modal && modal.style.display === 'block') {
            if (e.key === 'Escape') {
                closeGalleryModal();
            } else if (e.key === 'ArrowLeft') {
                showPrevSlide();
            } else if (e.key === 'ArrowRight') {
                showNextSlide();
            }
        }
    });

    // 添加画廊样式
    const galleryStyle = document.createElement('style');
    galleryStyle.textContent = `
        #galleryModal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(46, 241, 169, 0.9);
            z-index: 1000;
            overflow: hidden;
        }
        
        .modal-content {
            position: relative;
            width: 90%;
            max-width: 900px;
            height: 80vh;
            margin: 5vh auto;
            background: #fff;
            border-radius: 10px;
            overflow: hidden;
        }
        
        .close-modal {
            position: absolute;
            top: 15px;
            right: 25px;
            color: white;
            font-size: 35px;
            font-weight: bold;
            cursor: pointer;
            z-index: 1001;
        }
        
        .gallery-slides {
            position: relative;
            width: 100%;
            height: 100%;
            overflow: hidden;
        }
        
        .slide {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            transition: transform 0.5s ease-in-out;
            padding: 20px;
            box-sizing: border-box;
        }
        
        .slide img {
            max-width: 100%;
            max-height: 70vh;
            object-fit: contain;
            border-radius: 5px;
            box-shadow: 0 4px 15px rgba(111, 93, 215, 0.2);
        }
        
        .caption {
            margin-top: 20px;
            font-size: 1.2rem;
            color: #333;
            text-align: center;
        }
        
        .prev, .next {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            width: auto;
            padding: 16px;
            color: white;
            font-weight: bold;
            font-size: 20px;
            cursor: pointer;
            background: rgba(249, 98, 98, 0.3);
            border: none;
            border-radius: 0 3px 3px 0;
            z-index: 1001;
        }
        
        .next {
            right: 0;
            border-radius: 3px 0 0 3px;
        }
        
        @media (max-width: 768px) {
            .modal-content {
                width: 95%;
                height: 70vh;
                margin: 15vh auto;
            }
            
            .slide img {
                max-height: 50vh;
            }
            
            .caption {
                font-size: 1rem;
            }
        }
    `;
    document.head.appendChild(galleryStyle);
});