index.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>每日AI Paper - 探索人工智能前沿</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        'neon-blue': '#00f7ff',
                        'neon-purple': '#bd00ff',
                        'dark-bg': '#0f172a',
                        'card-bg': '#1e293b',
                    },
                    animation: {
                        'pulse-slow': 'pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite',
                        'float': 'float 6s ease-in-out infinite',
                    },
                    keyframes: {
                        float: {
                            '0%, 100%': { transform: 'translateY(0)' },
                            '50%': { transform: 'translateY(-10px)' },
                        }
                    }
                }
            }
        }
    </script>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;600;700&family=Exo+2:wght@300;400;500;600;700&display=swap');
        
        body {
            font-family: 'Exo 2', sans-serif;
            background-color: #0f172a;
            color: #e2e8f0;
            overflow-x: hidden;
            background-image: 
                radial-gradient(circle at 10% 20%, rgba(59, 130, 246, 0.1) 0%, transparent 20%),
                radial-gradient(circle at 90% 80%, rgba(139, 92, 246, 0.1) 0%, transparent 20%);
        }
        
        .orbitron {
            font-family: 'Orbitron', sans-serif;
        }
        
        .card {
            transition: all 0.3s ease;
            transform-style: preserve-3d;
            perspective: 1000px;
            border: 1px solid rgba(99, 102, 241, 0.2);
            background: linear-gradient(145deg, #1e293b, #1a2435);
            box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.5);
        }
        
        .card:hover {
            transform: translateY(-5px) scale(1.02);
            box-shadow: 0 15px 30px -5px rgba(59, 130, 246, 0.3);
            border-color: rgba(99, 102, 241, 0.4);
        }
        
        .card-image {
            transition: all 0.5s ease;
            filter: grayscale(30%);
        }
        
        .card:hover .card-image {
            filter: grayscale(0%);
        }
        
        .neon-text {
            text-shadow: 0 0 5px #00f7ff, 0 0 10px #00f7ff;
        }
        
        .neon-border {
            box-shadow: 0 0 10px #00f7ff, inset 0 0 5px #00f7ff;
        }
        
        .glow {
            animation: glow 2s ease-in-out infinite alternate;
        }
        
        @keyframes glow {
            from {
                text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #00f7ff, 0 0 20px #00f7ff;
            }
            to {
                text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #00f7ff, 0 0 40px #00f7ff;
            }
        }
        
        .grid-pattern {
            background-image: 
                linear-gradient(rgba(99, 102, 241, 0.1) 1px, transparent 1px),
                linear-gradient(90deg, rgba(99, 102, 241, 0.1) 1px, transparent 1px);
            background-size: 30px 30px;
        }
        
        .detail-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(15, 23, 42, 0.95);
            backdrop-filter: blur(10px);
            z-index: 100;
            display: flex;
            justify-content: center;
            align-items: center;
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.3s ease;
        }
        
        .detail-overlay.active {
            opacity: 1;
            pointer-events: all;
        }
        
        .detail-content {
            transform: scale(0.9);
            transition: transform 0.3s ease;
        }
        
        .detail-overlay.active .detail-content {
            transform: scale(1);
        }
        
        .gradient-bg {
            background: linear-gradient(135deg, #0f172a, #1e293b);
        }
        
        .pulse-dot {
            animation: pulse-slow 2s infinite;
        }
        
        .tech-border {
            border: 1px solid;
            border-image: linear-gradient(45deg, #00f7ff, #bd00ff) 1;
        }
        
        .circuit-pattern {
            background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 12c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-6 60c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm29 22c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zM32 63c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm57-13c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-29-7c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4z' fill='%233b82f6' fill-opacity='0.1' fill-rule='evenodd'/%3E%3C/svg%3E");
        }
    </style>
</head>
<body class="gradient-bg circuit-pattern">
    <!-- 导航栏 -->
    <nav class="border-b border-gray-700 border-opacity-30 py-4">
        <div class="container mx-auto px-4 flex justify-between items-center">
            <div class="flex items-center">
                <div class="w-10 h-10 rounded-full bg-gradient-to-r from-neon-blue to-neon-purple flex items-center justify-center mr-3">
                    <i class="fas fa-brain text-white text-xl"></i>
                </div>
                <h1 class="orbitron text-2xl font-bold text-white">每日<span class="text-neon-blue">AI</span> Paper</h1>
            </div>
            <div class="flex items-center space-x-6">
                <a href="#" class="text-gray-300 hover:text-neon-blue transition">首页</a>
                <a href="#" class="text-gray-300 hover:text-neon-blue transition">分类</a>
                <a href="#" class="text-gray-300 hover:text-neon-blue transition">收藏</a>
                <a href="#" class="text-gray-300 hover:text-neon-blue transition">关于</a>
                <button class="bg-gradient-to-r from-neon-blue to-neon-purple text-white px-4 py-2 rounded-full hover:opacity-90 transition">
                    <i class="fas fa-user mr-2"></i>登录
                </button>
            </div>
        </div>
    </nav>

    <!-- 头部区域 -->
    <header class="py-16 text-center relative overflow-hidden">
        <div class="absolute top-0 left-0 w-full h-full grid-pattern"></div>
        <div class="absolute -top-20 -right-20 w-64 h-64 bg-neon-purple rounded-full opacity-10 blur-3xl"></div>
        <div class="absolute -bottom-20 -left-20 w-64 h-64 bg-neon-blue rounded-full opacity-10 blur-3xl"></div>
        
        <div class="container mx-auto px-4 relative z-10">
            <h2 class="orbitron text-4xl md:text-6xl font-bold mb-6">
                <span class="text-white">探索</span> 
                <span class="text-neon-blue glow">人工智能</span> 
                <span class="text-white">前沿研究</span>
            </h2>
            <p class="text-xl text-gray-300 max-w-2xl mx-auto mb-10">
                每日精选最新AI论文，涵盖机器学习、计算机视觉、自然语言处理等领域，助您掌握AI研究动态
            </p>
            <div class="flex justify-center space-x-4">
                <button class="bg-gradient-to-r from-neon-blue to-neon-purple text-white px-8 py-3 rounded-full hover:opacity-90 transition flex items-center">
                    <i class="fas fa-paper-plane mr-2"></i> 订阅更新
                </button>
                <button class="border border-neon-blue text-neon-blue px-8 py-3 rounded-full hover:bg-neon-blue hover:bg-opacity-10 transition flex items-center">
                    <i class="fas fa-book-open mr-2"></i> 浏览论文
                </button>
            </div>
        </div>
    </header>

    <!-- 论文展示区域 -->
    <section class="py-12">
        <div class="container mx-auto px-4">
            <div class="flex justify-between items-center mb-10">
                <h3 class="orbitron text-3xl text-white">今日精选论文</h3>
                <div class="flex items-center">
                    <span class="text-gray-400 mr-3">分类:</span>
                    <div class="flex space-x-2">
                        <button class="px-4 py-2 bg-card-bg rounded-full text-gray-300 hover:text-neon-blue transition">全部</button>
                        <button class="px-4 py-2 bg-card-bg rounded-full text-gray-300 hover:text-neon-blue transition">机器学习</button>
                        <button class="px-4 py-2 bg-card-bg rounded-full text-gray-300 hover:text-neon-blue transition">计算机视觉</button>
                        <button class="px-4 py-2 bg-card-bg rounded-full text-gray-300 hover:text-neon-blue transition">NLP</button>
                        <button class="px-4 py-2 bg-card-bg rounded-full text-gray-300 hover:text-neon-blue transition">强化学习</button>
                    </div>
                </div>
            </div>
            
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
                <!-- 论文卡片 1 -->
                <div class="card rounded-xl overflow-hidden cursor-pointer" onclick="showPaperDetail(0)">
                    <div class="relative">
                        <div class="absolute top-4 right-4 bg-neon-purple text-white text-xs px-3 py-1 rounded-full">新发布</div>
                        <img src="https://images.unsplash.com/photo-1677442135722-5f3df2f67e08?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" 
                             alt="AI论文" class="w-full h-48 object-cover card-image">
                    </div>
                    <div class="p-6">
                        <div class="flex items-center mb-3">
                            <span class="text-xs bg-neon-blue bg-opacity-20 text-neon-blue px-2 py-1 rounded mr-3">机器学习</span>
                            <span class="text-gray-400 text-sm"><i class="far fa-calendar mr-1"></i> 2023-10-15</span>
                        </div>
                        <h4 class="text-xl font-bold text-white mb-3">Transformer-XL：超越固定长度上下文的语言模型</h4>
                        <p class="text-gray-300 mb-4">本文提出了一种新的神经网络架构Transformer-XL，它能够处理长距离依赖关系，同时保持计算效率...</p>
                        <div class="flex justify-between items-center">
                            <div class="flex items-center">
                                <div class="w-8 h-8 rounded-full bg-gray-600 flex items-center justify-center">
                                    <span class="text-xs">ZS</span>
                                </div>
                                <div class="ml-2">
                                    <p class="text-sm text-gray-300">作者: Zihang Dai</p>
                                </div>
                            </div>
                            <button class="text-neon-blue hover:text-neon-purple transition">
                                <i class="fas fa-arrow-right"></i>
                            </button>
                        </div>
                    </div>
                </div>
                
                <!-- 论文卡片 2 -->
                <div class="card rounded-xl overflow-hidden cursor-pointer" onclick="showPaperDetail(1)">
                    <div class="relative">
                        <img src="https://images.unsplash.com/photo-1620712943543-bcc4688e7485?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" 
                             alt="AI论文" class="w-full h-48 object-cover card-image">
                    </div>
                    <div class="p-6">
                        <div class="flex items-center mb-3">
                            <span class="text-xs bg-neon-purple bg-opacity-20 text-neon-purple px-2 py-1 rounded mr-3">计算机视觉</span>
                            <span class="text-gray-400 text-sm"><i class="far fa-calendar mr-1"></i> 2023-10-14</span>
                        </div>
                        <h4 class="text-xl font-bold text-white mb-3">基于自监督学习的3D场景理解新方法</h4>
                        <p class="text-gray-300 mb-4">我们提出了一种创新的自监督学习方法，用于3D场景理解，该方法在多个基准测试中达到了最先进的性能...</p>
                        <div class="flex justify-between items-center">
                            <div class="flex items-center">
                                <div class="w-8 h-8 rounded-full bg-gray-600 flex items-center justify-center">
                                    <span class="text-xs">AL</span>
                                </div>
                                <div class="ml-2">
                                    <p class="text-sm text-gray-300">作者: Angela Li</p>
                                </div>
                            </div>
                            <button class="text-neon-blue hover:text-neon-purple transition">
                                <i class="fas fa-arrow-right"></i>
                            </button>
                        </div>
                    </div>
                </div>
                
                <!-- 论文卡片 3 -->
                <div class="card rounded-xl overflow-hidden cursor-pointer" onclick="showPaperDetail(2)">
                    <div class="relative">
                        <div class="absolute top-4 right-4 bg-neon-blue text-white text-xs px-3 py-1 rounded-full">热门</div>
                        <img src="https://images.unsplash.com/photo-1677442135133-33d36439055c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" 
                             alt="AI论文" class="w-full h-48 object-cover card-image">
                    </div>
                    <div class="p-6">
                        <div class="flex items-center mb-3">
                            <span class="text-xs bg-gradient-to-r from-neon-blue to-neon-purple text-white px-2 py-1 rounded mr-3">NLP</span>
                            <span class="text-gray-400 text-sm"><i class="far fa-calendar mr-1"></i> 2023-10-13</span>
                        </div>
                        <h4 class="text-xl font-bold text-white mb-3">BERT：深度双向Transformer的语言理解预训练</h4>
                        <p class="text-gray-300 mb-4">我们介绍了一种新的语言表示模型BERT，它通过在所有层中联合调节左右上下文来预训练深度双向表示...</p>
                        <div class="flex justify-between items-center">
                            <div class="flex items-center">
                                <div class="w-8 h-8 rounded-full bg-gray-600 flex items-center justify-center">
                                    <span class="text-xs">JD</span>
                                </div>
                                <div class="ml-2">
                                    <p class="text-sm text-gray-300">作者: Jacob Devlin</p>
                                </div>
                            </div>
                            <button class="text-neon-blue hover:text-neon-purple transition">
                                <i class="fas fa-arrow-right"></i>
                            </button>
                        </div>
                    </div>
                </div>
                
                <!-- 论文卡片 4 -->
                <div class="card rounded-xl overflow-hidden cursor-pointer" onclick="showPaperDetail(3)">
                    <div class="relative">
                        <img src="https://images.unsplash.com/photo-1677442135133-33d36439055c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" 
                             alt="AI论文" class="w-full h-48 object-cover card-image">
                    </div>
                    <div class="p-6">
                        <div class="flex items-center mb-3">
                            <span class="text-xs bg-yellow-500 bg-opacity-20 text-yellow-500 px-2 py-1 rounded mr-3">强化学习</span>
                            <span class="text-gray-400 text-sm"><i class="far fa-calendar mr-1"></i> 2023-10-12</span>
                        </div>
                        <h4 class="text-xl font-bold text-white mb-3">AlphaZero：从零开始掌握国际象棋和将棋</h4>
                        <p class="text-gray-300 mb-4">AlphaZero是一种通用的强化学习算法，它通过自我对弈从零开始学习，在多个复杂游戏中超越了人类水平...</p>
                        <div class="flex justify-between items-center">
                            <div class="flex items-center">
                                <div class="w-8 h-8 rounded-full bg-gray-600 flex items-center justify-center">
                                    <span class="text-xs">DS</span>
                                </div>
                                <div class="ml-2">
                                    <p class="text-sm text-gray-300">作者: David Silver</p>
                                </div>
                            </div>
                            <button class="text-neon-blue hover:text-neon-purple transition">
                                <i class="fas fa-arrow-right"></i>
                            </button>
                        </div>
                    </div>
                </div>
                
                <!-- 论文卡片 5 -->
                <div class="card rounded-xl overflow-hidden cursor-pointer" onclick="showPaperDetail(4)">
                    <div class="relative">
                        <div class="absolute top-4 right-4 bg-neon-purple text-white text-xs px-3 py-1 rounded-full">新发布</div>
                        <img src="https://images.unsplash.com/photo-1677442135722-5f3df2f67e08?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" 
                             alt="AI论文" class="w-full h-48 object-cover card-image">
                    </div>
                    <div class="p-6">
                        <div class="flex items-center mb-3">
                            <span class="text-xs bg-neon-blue bg-opacity-20 text-neon-blue px-2 py-1 rounded mr-3">机器学习</span>
                           {"ok":false,"message":"terminated"}
</body>
</html>