// 全屏网站推荐弹窗 - 兼容性优化版本
document.addEventListener('DOMContentLoaded', function() {
    // 网站数据
    var sites = [
    {
        "title": "综信查",
        "desc": "综信查是一款综合信息查询工具，提供法院案件查询、车辆信息查询、实名信息验证、企业工商信息查询等服务。致力于为用户提供安全、便捷的信息查询服务，帮助您快速获取所需信息。",
        "link": "https://www.zongxincha.com"
    },
    {
        "title": "易估值",
        "desc": "【易估值】专业提供在线手机号、车牌号、QQ号等价值在线精准评估，一站式满足您的数字资产估值与传统文化测算需求！",
        "link": "https://www.yiguzhi.cn/bazi?xz=1"
    },
    {
        "title": "八字测算",
        "desc": "【易估值】结合精准八字测算、星座运势解析与黄历查询服务，助您洞察先机，把握运势，决策更精准！",
        "link": "https://www.yiguzhi.cn/bazi?xz=1"
    },
    {
        "title": "短视频祛水印",
        "desc": "聚合等多个平台在线免费去水印解析下载，永久免费、速度快、去视频水印、去封面水印，致力提供全网最优质的去水印解析服务！",
        "link": "https://www.zongxincha.com/tools/?lx=qsy"
    },
    {
        "title": "易查站",
        "desc": "ICP备案查询网,工业和信息化部ICP/IP地址/域名信息备案查询平台、工信部网站备案查询。提供ICP备案查询,网站备案查询,域名备案查询,查备案号,API调用,不用输验证码,速度快,数据实时更新！",
        "link": "https://www.yichazhan.cn/"
    },
    {
        "title": "头像圈",
        "desc": "远昔头像圈是一个专注于高清头像和手机壁纸的分享平台。我们提供海量优质头像和壁纸资源，涵盖各种风格，帮助用户轻松找到心仪的图片，打造个性化手机界面。每日更新，免费下载，满足你的所有头像与壁纸需求！",
        "link": "https://touxiangquan.com/"
    },
    {
        "title": "远昔博客",
        "desc": "远昔博客(yuanxiblog.cn)是一家乐享资源记忆点滴的博客，致力于互联网资源的共享，专业的IT技术博客创作平台。",
        "link": "https://yuanxiblog.cn"
    },
    {
        "title": "易扒站",
        "desc": "易扒站工具永久免费使用！只需要一个浏览器，一键将目标网站的前端代码扒下来，自动将指定网页的HTML、CSS、JS、图片等前端资源分类，自动更改资源路径为本地路径，支持一键打包在线下载",
        "link": "https://yibazhan.cn"
    }
];
    
    // 创建样式 - 使用更兼容的CSS
    var style = document.createElement('style');
    style.textContent = 
        '.website-modal {' +
        '    position: fixed;' +
        '    top: 0;' +
        '    left: 0;' +
        '    width: 100%;' +
        '    height: 100%;' +
        '    background-color: rgba(0, 0, 0, 0.9);' +
        '    z-index: 10000;' +
        '    display: none;' +
        '    overflow-y: auto;' +
        '    padding: 20px 0;' +
        '    font-family: "Microsoft YaHei", sans-serif;' +
        '}' +
        '' +
        '.website-modal-content {' +
        '    max-width: 1200px;' +
        '    margin: 0 auto;' +
        '    padding: 20px;' +
        '    color: #fff;' +
        '}' +
        '' +
        '.website-modal-header {' +
        '    display: flex;' +
        '    justify-content: space-between;' +
        '    align-items: center;' +
        '    margin-bottom: 30px;' +
        '    padding-bottom: 15px;' +
        '    border-bottom: 1px solid rgba(255, 255, 255, 0.2);' +
        '}' +
        '' +
        '.website-modal-title {' +
        '    font-size: 28px;' +
        '    font-weight: bold;' +
        '    color: #fff;' +
        '}' +
        '' +
        '.website-modal-close {' +
        '    font-size: 30px;' +
        '    color: #fff;' +
        '    cursor: pointer;' +
        '    transition: all 0.3s;' +
        '    background: none;' +
        '    border: none;' +
        '    padding: 0;' +
        '    width: 40px;' +
        '    height: 40px;' +
        '    display: flex;' +
        '    align-items: center;' +
        '    justify-content: center;' +
        '}' +
        '' +
        '.website-modal-close:hover {' +
        '    color: #4CAF50;' +
        '    transform: rotate(90deg);' +
        '}' +
        '' +
        '.website-grid {' +
        '    display: grid;' +
        '    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));' +
        '    gap: 25px;' +
        '}' +
        '' +
        '.website-card {' +
        '    background: rgba(255, 255, 255, 0.1);' + // 简化背景，提高兼容性
        '    border-radius: 10px;' +
        '    padding: 25px;' +
        '    transition: all 0.3s;' +
        '    border: 1px solid rgba(255, 255, 255, 0.1);' +
        '    display: flex;' +
        '    flex-direction: column;' +
        '}' +
        '' +
        '.website-card:hover {' +
        '    transform: translateY(-5px);' +
        '    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);' +
        '    border-color: rgba(76, 175, 80, 0.5);' +
        '}' +
        '' +
        '.website-header {' +
        '    display: flex;' +
        '    align-items: center;' +
        '    margin-bottom: 15px;' +
        '}' +
        '' +
        '.website-icon {' +
        '    font-size: 24px;' +
        '    color: #4CAF50;' +
        '    margin-right: 15px;' +
        '    width: 50px;' +
        '    height: 50px;' +
        '    display: flex;' +
        '    align-items: center;' +
        '    justify-content: center;' +
        '    background: rgba(255, 255, 255, 0.1);' +
        '    border-radius: 50%;' +
        '}' +
        '' +
        '.website-title {' +
        '    font-size: 20px;' +
        '    font-weight: bold;' +
        '    color: #fff;' +
        '    text-align: left;' +
        '}' +
        '' +
        '.website-desc {' +
        '    color: rgba(255, 255, 255, 0.8);' +
        '    line-height: 1.6;' +
        '    font-size: 14px;' +
        '    text-align: left;' +
        '    margin-bottom: 20px;' +
        '    flex-grow: 1;' +
        '}' +
        '' +
        '.website-link {' +
        '    display: block;' +
        '    padding: 10px 15px;' +
        '    background-color: #4CAF50;' +
        '    color: white;' +
        '    text-align: center;' +
        '    border-radius: 5px;' +
        '    text-decoration: none;' +
        '    transition: all 0.3s;' +
        '    font-size: 14px;' +
        '}' +
        '' +
        '.website-link:hover {' +
        '    background-color: #45a049;' +
        '    color: white;' +
        '    transform: translateY(-2px);' +
        '    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2);' +
        '}' +
        '' +
        '.website-modal-footer {' +
        '    text-align: center;' +
        '    margin-top: 40px;' +
        '    color: rgba(255, 255, 255, 0.6);' +
        '    font-size: 14px;' +
        '}' +
        '' +
        '.website-close-btn {' +
        '    display: block;' +
        '    margin: 20px auto 0;' +
        '    padding: 12px 30px;' +
        '    background: #ff6b6b;' + // 简化渐变，提高兼容性
        '    color: white;' +
        '    border: none;' +
        '    border-radius: 25px;' +
        '    font-size: 16px;' +
        '    font-weight: bold;' +
        '    cursor: pointer;' +
        '    transition: all 0.3s ease;' +
        '    box-shadow: 0 4px 15px rgba(255, 107, 107, 0.3);' +
        '}' +
        '' +
        '.website-close-btn:hover {' +
        '    background: #ff5252;' +
        '    transform: translateY(-2px);' +
        '    box-shadow: 0 6px 20px rgba(255, 107, 107, 0.4);' +
        '}' +
        '' +
        '.website-close-btn:active {' +
        '    transform: translateY(0);' +
        '}' +
        '' +
        '@media (max-width: 768px) {' +
        '    .website-grid {' +
        '        grid-template-columns: 1fr;' +
        '    }' +
        '    ' +
        '    .website-modal-content {' +
        '        padding: 10px;' +
        '    }' +
        '}';
    document.head.appendChild(style);
    
    // 创建弹窗容器
    var modal = document.createElement('div');
    modal.className = 'website-modal';
    modal.id = 'websiteModal';
    
    // 创建弹窗内容
    var modalContent = document.createElement('div');
    modalContent.className = 'website-modal-content';
    
    // 创建弹窗头部
    var modalHeader = document.createElement('div');
    modalHeader.className = 'website-modal-header';
    
    var modalTitle = document.createElement('h2');
    modalTitle.className = 'website-modal-title';
    modalTitle.textContent = '优质平台推荐';
    
    var closeBtn = document.createElement('button');
    closeBtn.className = 'website-modal-close';
    closeBtn.id = 'closeModal';
    closeBtn.innerHTML = '×';
    
    modalHeader.appendChild(modalTitle);
    modalHeader.appendChild(closeBtn);
    
    // 创建网站网格
    var websiteGrid = document.createElement('div');
    websiteGrid.className = 'website-grid';
    websiteGrid.id = 'websiteGrid';
    
    // 生成网站卡片
    for (var i = 0; i < sites.length; i++) {
        var site = sites[i];
        var card = document.createElement('div');
        card.className = 'website-card';
        
        var siteHeader = document.createElement('div');
        siteHeader.className = 'website-header';
        
        var siteIcon = document.createElement('div');
        siteIcon.className = 'website-icon';
        siteIcon.innerHTML = '🌐';
        
        var siteTitle = document.createElement('div');
        siteTitle.className = 'website-title';
        siteTitle.textContent = site.title;
        
        siteHeader.appendChild(siteIcon);
        siteHeader.appendChild(siteTitle);
        
        var siteDesc = document.createElement('div');
        siteDesc.className = 'website-desc';
        siteDesc.textContent = site.desc;
        
        var siteLink = document.createElement('a');
        siteLink.className = 'website-link';
        siteLink.href = site.link;
        siteLink.target = '_blank';
        siteLink.textContent = '访问网站';
        
        card.appendChild(siteHeader);
        card.appendChild(siteDesc);
        card.appendChild(siteLink);
        
        websiteGrid.appendChild(card);
    }
    
    // 创建弹窗底部
    var footer = document.createElement('div');
    footer.className = 'website-modal-footer';
    
    var footerText = document.createElement('p');
    footerText.textContent = '更多精彩内容，敬请期待...';
    
    var closeButton = document.createElement('button');
    closeButton.className = 'website-close-btn';
    closeButton.textContent = '点此关闭推荐窗口';
    
    footer.appendChild(footerText);
    footer.appendChild(closeButton);
    
    // 组装弹窗
    modalContent.appendChild(modalHeader);
    modalContent.appendChild(websiteGrid);
    modalContent.appendChild(footer);
    modal.appendChild(modalContent);
    
    // 添加到页面
    document.body.appendChild(modal);
    
    // 获取触发按钮
    var triggerBtn = document.getElementById('tuijian_url');
    
    // 打开弹窗
    if (triggerBtn) {
        triggerBtn.addEventListener('click', function() {
            modal.style.display = 'block';
            document.body.style.overflow = 'hidden';
        });
    }
    
    // 关闭弹窗
    closeBtn.addEventListener('click', function() {
        modal.style.display = 'none';
        document.body.style.overflow = 'auto';
    });
    
    // 底部关闭按钮事件
    closeButton.addEventListener('click', function() {
        modal.style.display = 'none';
        document.body.style.overflow = 'auto';
    });
    
    // 点击遮罩层关闭弹窗
    modal.addEventListener('click', function(e) {
        if (e.target === modal) {
            modal.style.display = 'none';
            document.body.style.overflow = 'auto';
        }
    });
    
    // 防止事件冒泡
    modalContent.addEventListener('click', function(e) {
        e.stopPropagation();
    });
});