<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>资讯推送Web端</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="shortcut icon" href="{{ url_for('static', filename='favicon.ico') }}">
    <!-- 引入 Layui 的 CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/layui-src/dist/css/layui.css">
    <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
    <style>
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            margin: 0;
            padding: 20px;
            background-color: #f8f9fa;
            line-height: 1.6;
        }
        
        .layui-container {
            max-width: 1200px;
            margin: 0 auto;
            background: white;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            padding: 20px;
        }
        
        h1 {
            color: #333;
            font-size: 1.8em;
            text-align: center;
            margin-bottom: 20px;
            border-bottom: 2px solid #009688;
            padding-bottom: 10px;
        }
        
        #markdown-content {
            white-space: pre-wrap;
            font-size: 1em;
            padding: 15px;
            background-color: #fafafa;
            border-radius: 4px;
            min-height: 400px;
        }
        
        /* 按钮容器样式优化 */
        #button-container {
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
            gap: 10px;
            margin: 15px 0;
        }
        
        #button-container .layui-btn {
            margin: 5px;
            transition: all 0.3s ease;
            min-width: 120px;
        }
        
        /* 不同类型的按钮使用不同颜色 */
        #sec-news-btn { background-color: #FF5722; }
        #tech-passage-btn { background-color: #2196F3; }
        #baidu-news-btn { background-color: #2F4F4F; }
        #github-news-btn { background-color: #333; }
        #wx-news-btn { background-color: #07C160; }
        
        /* 按钮悬停效果 */
        #button-container .layui-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 8px rgba(0,0,0,0.2);
        }
        
        /* 折叠面板样式优化 */
        .layui-colla-item {
            margin-bottom: 15px;
            border-radius: 4px;
            overflow: hidden;
        }
        
        .layui-colla-title {
            background-color: #f2f2f2;
            font-weight: 600;
        }
        
        /* 提示文字样式 */
        .info-text {
            text-align: center;
            color: #666;
            font-size: 0.9em;
            margin: 10px 0 20px;
            padding: 10px;
            background-color: #f0f8ff;
            border-radius: 4px;
        }
        
        /* 返回顶部按钮样式 - 已优化 */
        #back-to-top {
            display: none; /* 初始隐藏，滚动后显示 */
            position: fixed;
            bottom: 20px;
            right: 20px;
            z-index: 1000;
            font-size: 14px;
            border: none;
            outline: none;
            background-color: #009688; /* 使用layui主题色 */
            color: white;
            cursor: pointer;
            padding: 12px 15px;
            border-radius: 50%;
            box-shadow: 0 2px 10px rgba(0,0,0,0.3);
            transition: background-color 0.3s;
        }
        
        #back-to-top:hover {
            background-color: #007a6e;
            transform: scale(1.1); /* 悬停放大效果 */
        }
        
        #markdown-content a {
            color: #009688;
            text-decoration: none;
        }
        
        #markdown-content a:hover {
            text-decoration: underline;
        }
        
        /* 错误消息样式 */
        .error-message {
            text-align: center;
            padding: 40px;
            color: #ff6b6b;
            font-size: 1.1em;
        }
        
        /* 加载动画样式 */
        .loading {
            text-align: center;
            padding: 50px;
        }
        
        /* 移动端样式调整 */
        @media only screen and (max-width: 600px) {
            body {
                margin: 5px;
                padding: 10px;
            }
            
            .layui-container {
                padding: 15px;
            }
            
            h1 {
                font-size: 1.5em;
            }
            
            #markdown-content {
                font-size: 0.9em;
                padding: 10px;
            }
            
            #back-to-top {
                font-size: 14px;
                padding: 10px;
                bottom: 15px;
                right: 15px;
            }
            
            /* 按钮样式调整 */
            #button-container {
                flex-direction: column; /* 换行显示按钮 */
                align-items: center; /* 按钮居中对齐 */
            }
            
            #button-container .layui-btn {
                margin: 8px 0; /* 增加按钮间距 */
                width: 95%; /* 调整按钮宽度 */
                max-width: 300px; /* 设置最大宽度 */
            }
        }
        
        /* 平滑滚动 */
        html {
            scroll-behavior: smooth;
        }
    </style>
</head>
<body>
    <div class="layui-container">
        <h1 class="layui-title" id="page-title">📰 资讯推送中心</h1>
        
        <!-- 信息提示 -->
        <div class="info-text">
            <strong>💡 提示：</strong>为保证网页运作性能，默认仅读取前20条记录
        </div>
        
        <!-- 折叠面板 -->
        <div class="layui-collapse" lay-accordion>
            <div class="layui-colla-item">
                <h2 class="layui-colla-title">📋 选择资讯类型</h2>
                <div class="layui-colla-content layui-show">
                    <div id="button-container">
                        <button id="sec-news-btn" class="layui-btn layui-btn-sm">🔒 安全新闻</button>
                        <button id="tech-passage-btn" class="layui-btn layui-btn-sm">💻 技术文章</button>
                        <button id="baidu-news-btn" class="layui-btn layui-btn-sm">📊 百度新闻</button>
                        <button id="github-news-btn" class="layui-btn layui-btn-sm">🐙 GitHub动态</button>
                        <button id="wx-news-btn" class="layui-btn layui-btn-sm">💬 微信文章</button>
                    </div>
                </div>
            </div>
        </div>
        
        <div id="markdown-content" class="layui-card-body"></div>
    </div>

    <!-- 返回顶部按钮 -->
    <button id="back-to-top" title="返回顶部">
        <i class="layui-icon layui-icon-top"></i>
    </button>

    <!-- 引入 Layui 的 JS -->
    <script src="https://cdn.jsdelivr.net/npm/layui-src/dist/layui.js"></script>
    <script>
        // 优化后的JavaScript代码
        layui.use(['layer', 'element'], function(){
            var layer = layui.layer;
            var element = layui.element;

            var buttonMap = {
                'sec-news-btn': '/get-sec-news',
                'tech-passage-btn': '/get-tech-passage',
                'baidu-news-btn': '/get-baidu-news',
                'github-news-btn': '/get-github-news',
                'wx-news-btn': '/get-wx-news'
            };

            var titleMap = {
                '/get-sec-news': '🔒 安全新闻',
                '/get-tech-passage': '💻 技术文章',
                '/get-baidu-news': '📊 百度新闻',
                '/get-github-news': '🐙 GitHub动态',
                '/get-wx-news': '💬 微信文章'
            };

            function updateTitle(url) {
                document.getElementById('page-title').innerText = titleMap[url] || '📰 资讯推送中心';
            }

            function fetchContent(url, buttonId) {
                // 更新所有按钮状态
                Object.keys(buttonMap).forEach(key => {
                    const btn = document.getElementById(key);
                    btn.disabled = (key === buttonId);
                    btn.style.opacity = (key === buttonId) ? '0.7' : '1';
                });

                updateTitle(url);

                // 显示加载动画
                document.getElementById('markdown-content').innerHTML = 
                    '<div class="loading"><i class="layui-icon layui-icon-loading layui-anim layui-anim-rotate layui-anim-loop"></i> 加载中...</div>';
                
                fetch(url)
                    .then(response => response.json())
                    .then(data => {
                        if (data.content) {
                            const htmlContent = marked.parse(data.content);
                            document.getElementById('markdown-content').innerHTML = htmlContent;
                            addTargetBlankToLinks();
                        } else {
                            document.getElementById('markdown-content').innerHTML = '<div class="error-message"><p>❌ 加载历史推送文件时出错！（推送历史记录为空）</p></div>';
                        }
                    })
                    .catch(error => {
                        console.error('获取源文件失败:', error);
                        document.getElementById('markdown-content').innerHTML = '<div class="error-message"><p>❌ 无法加载历史推送文件！</p></div>';
                        layer.msg('加载资源失败', {icon: 2});
                    });
            }

            // 为按钮添加点击事件
            Object.keys(buttonMap).forEach(key => {
                document.getElementById(key).addEventListener('click', function() {
                    fetchContent(buttonMap[key], key);
                    
                    // 移动设备上自动收起面板
                    if (isMobileDevice()) {
                        $('.layui-colla-content').removeClass('layui-show');
                    }
                });
            });

            // 页面加载时默认获取安全新闻
            var initialButtonId = 'sec-news-btn';
            fetchContent(buttonMap[initialButtonId], initialButtonId);
        });

        // 优化的滚动检测函数
        function scrollFunction() {
            const scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
            const backToTopBtn = document.getElementById("back-to-top");
            
            if (scrollTop > 300) {
                backToTopBtn.style.display = "block";
            } else {
                backToTopBtn.style.display = "none";
            }
        }

        // 显示或隐藏返回顶部按钮
        window.onscroll = function() {
            scrollFunction();
        };

        // 返回顶部按钮点击事件 - 已优化
        document.getElementById("back-to-top").addEventListener("click", function() {
            // 使用更平滑的滚动方式
            window.scrollTo({
                top: 0,
                behavior: 'smooth'
            });
        });

        // 检测是否为移动设备
        function isMobileDevice() {
            return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
        }

        function addTargetBlankToLinks() {
            var links = document.querySelectorAll('#markdown-content a');
            links.forEach(function(link) {
                link.setAttribute('target', '_blank');
            });
        }

        // 在页面加载完成后调用该函数
        window.onload = function() {
            addTargetBlankToLinks();
        };
    </script>
</body>
</html>