公告识别链接转按钮

2250898553 2025-10-25 16 次下载
详细描述
实时预览
源代码
<!-- 本DIY代码来自于 https://diy.zhongzhipian.top -->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DIY Card Verification</title>
<style>
    body {
        margin: 0;
        padding: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        min-height: 100vh;
        font-family: Arial, sans-serif;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    }
    .card {
        background-color: #2e384d;
        color: white;
        padding: 30px;
        border-radius: 10px;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
        max-width: 400px;
        text-align: center;
        animation: fadeInUp 0.5s ease-out forwards;
        position: relative;
        overflow: hidden;
    }
    @keyframes fadeInUp {
        from {
            opacity: 0;
            transform: translateY(20px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
    /* 卡片上的动态特效 */
    .card::before {
        content: '';
        position: absolute;
        top: -50%;
        left: -50%;
        width: 200%;
        height: 200%;
        background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0) 70%);
        animation: rotate 15s linear infinite;
        z-index: 0;
    }
    @keyframes rotate {
        from {
            transform: rotate(0deg);
        }
        to {
            transform: rotate(360deg);
        }
    }
    .card h2 {
        margin-top: 0;
        position: relative;
        z-index: 1;
        white-space: pre-line;
        line-height: 1.4;
    }
    .input-group {
        margin-bottom: 20px;
        position: relative;
        z-index: 1;
    }
    input[type="text"] {
        width: calc(100% - 22px);
        padding: 12px;
        border: none;
        border-radius: 5px;
        background-color: #3b4863;
        color: white;
        outline: none;
        transition: all 0.3s;
    }
    input[type="text"]:focus {
        box-shadow: 0 0 0 2px rgba(0, 170, 255, 0.5);
    }
    .button-container {
        display: flex;
        justify-content: space-between;
        margin-bottom: 15px;
        position: relative;
        z-index: 1;
    }
    button {
        padding: 8px 12px;
        border: none;
        border-radius: 5px;
        cursor: pointer;
        transition: all 0.3s;
        font-weight: bold;
        flex: 1;
        margin: 0 5px;
    }
    .verify-btn {
        background-color: #00aaff;
        color: white;
    }
    .query-btn {
        background-color: #ffa500;
        color: white;
    }
    .buy-btn {
        background-color: #4CAF50;
        color: white;
    }
    .link-btn {
        background-color: #8BC34A;
        color: white;
        margin-top: 10px;
        width: 100%;
    }
    .error-link-btn {
        background-color: #ff6666;
        color: white;
        margin-top: 10px;
        width: 100%;
        cursor: not-allowed;
    }
    .error-link-btn:hover {
        transform: none;
        box-shadow: none;
    }
    /* 按钮动态效果 */
    button:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    }
    button:active {
        transform: translateY(0);
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    }
    .system-info {
        margin-top: 20px;
        padding-top: 10px;
        border-top: 1px solid #444;
        position: relative;
        z-index: 1;
    }
    .system-info p {
        margin: 5px 0;
        font-size: 0.9em;
        color: #aaa;
    }
    /* 公告样式 */
    .notice-container {
        margin-top: 15px;
        padding: 10px;
        background-color: rgba(0, 170, 255, 0.1);
        border-radius: 5px;
        position: relative;
        z-index: 1;
    }
    .notice-title {
        font-weight: bold;
        color: #00aaff;
        margin-bottom: 5px;
    }
    .notice-content {
        font-size: 0.9em;
        color: #ddd;
        line-height: 1.4;
        margin-bottom: 10px;
        white-space: pre-line;
    }
    /* 水印样式 */
    .watermark {
        position: fixed;
        bottom: 20px;
        right: 20px;
        color: rgba(255, 255, 255, 0.5);
        font-size: 12px;
        z-index: 100;
        white-space: pre-line;
        text-align: right;
        line-height: 1.4;
    }
    /* 隐藏类 */
    .hidden {
        display: none;
    }
    /* 状态消息样式 */
    .status-message {
        margin: 10px 0;
        padding: 8px;
        border-radius: 5px;
        font-size: 0.9em;
        display: none;
    }
    .status-success {
        background-color: rgba(76, 175, 80, 0.2);
        border: 1px solid #4CAF50;
        color: #4CAF50;
        display: block;
    }
    .status-error {
        background-color: rgba(244, 67, 54, 0.2);
        border: 1px solid #f44336;
        color: #f44336;
        display: block;
    }
    .status-info {
        background-color: rgba(33, 150, 243, 0.2);
        border: 1px solid #2196F3;
        color: #2196F3;
        display: block;
    }
</style>
</head>
<body>

<div class="card">
    <h2 id="software-title">中纸片</h2>
    
    <!-- 状态消息显示 -->
    <div class="status-message" id="status-message"></div>
    
    <div class="input-group">
        <label for="card-password">请输入卡密</label><br>
        <input type="text" id="card-password" placeholder="请在此处输入您的卡密">
    </div>
    <div class="button-container">
        <button class="verify-btn" id="verify-btn">验证卡密</button>
        <button class="query-btn" id="query-btn">查询卡密</button>
        <button class="buy-btn" id="buy-btn">购买卡密</button>
    </div>
    
    <!-- 公告区域 -->
    <div class="notice-container">
        <div class="notice-title">系统公告</div>
        <div class="notice-content" id="notice-content">
            <!-- 公告内容将通过JavaScript动态加载 -->
        </div>
        <!-- 链接按钮容器 -->
        <div id="link-buttons-container">
            <!-- 链接按钮将在这里动态生成 -->
        </div>
    </div>

    <div class="system-info">
        <p>设备ID: <span id="device-id">正在获取...</span></p>
    </div>
</div>

<div class="watermark" id="watermark-text">
    <!-- 软件名称将通过JavaScript动态加载 -->
</div>

<script>
    // 定义默认内容
    const DEFAULT_TITLE = `自定义链接使用教程
如果不需要命名则直接填链接
链接建议一行一个链接`;
    
    const DEFAULT_NOTICE = `使用方法：<zzp 链接>链接名称</zzp>
示例：<zzp https://zhongzhipian.top>中纸片官网</zzp>
普通链接示例：https://zhongzhipian.top`;

    // 初始化函数
    function init() {
        // 初始化PanGolin接口
        initPanGolin();
        
        // 初始化事件监听
        bindEvents();
        
        // 初始化公告系统
        initNoticeSystem();
    }

    // 初始化PanGolin接口
    function initPanGolin() {
        if (typeof PanGolin !== 'undefined') {
            // 检查是否都是默认内容
            const allDefault = isAllDefault();
            
            // 设置软件标题
            const title = getTitle(allDefault);
            document.getElementById("software-title").textContent = title;
            document.getElementById("watermark-text").textContent = title;
            
            // 设置公告内容
            const notice = getNotice(allDefault);
            document.getElementById("notice-content").textContent = notice;
            
            // 设置设备ID
            const deviceId = PanGolin.GetDeviceId ? PanGolin.GetDeviceId() : generateDeviceId();
            document.getElementById("device-id").textContent = deviceId;
        }
    }

    // 检查是否都是默认内容
    function isAllDefault() {
        if (typeof PanGolin !== 'undefined') {
            const title = PanGolin.GetTitle ? PanGolin.GetTitle() : '';
            const notice = PanGolin.GetNotice ? PanGolin.GetNotice() : '';
            
            // 如果标题和公告都是空或者未定义，则认为是默认状态
            const isTitleDefault = !title || title.trim() === '';
            const isNoticeDefault = !notice || notice.trim() === '';
            
            return isTitleDefault && isNoticeDefault;
        }
        return true; // 如果没有PanGolin对象，也认为是默认状态
    }

    // 获取标题
    function getTitle(allDefault) {
        if (typeof PanGolin !== 'undefined' && PanGolin.GetTitle) {
            const title = PanGolin.GetTitle();
            if (title && title.trim() !== '') {
                return title;
            }
        }
        // 只有当全部都是默认时才显示默认标题
        return allDefault ? DEFAULT_TITLE : "中纸片";
    }

    // 获取公告
    function getNotice(allDefault) {
        if (typeof PanGolin !== 'undefined' && PanGolin.GetNotice) {
            const notice = PanGolin.GetNotice();
            if (notice && notice.trim() !== '') {
                return notice;
            }
        }
        // 只有当全部都是默认时才显示默认公告
        return allDefault ? DEFAULT_NOTICE : "官网：zhongzhipian.top";
    }

    // 验证链接格式
    function isValidUrl(url) {
        // 检查是否包含 http:// 或 https://
        return url.startsWith('http://') || url.startsWith('https://');
    }

    // 生成设备ID
    function generateDeviceId() {
        return '中纸片-' + Math.random().toString(36).substr(2, 9).toUpperCase();
    }

    // 初始化事件监听
    function bindEvents() {
        const verifyBtn = document.getElementById('verify-btn');
        const queryBtn = document.getElementById('query-btn');
        const buyBtn = document.getElementById('buy-btn');
        const cardPasswordInput = document.getElementById('card-password');

        // 验证按钮点击事件
        verifyBtn.addEventListener('click', function() {
            const cardPassword = cardPasswordInput.value.trim();
            if (cardPassword) {
                Call_Verify(cardPassword);
            } else {
                showStatusMessage('请输入卡密', 'error');
            }
        });

        // 查询按钮点击事件
        queryBtn.addEventListener('click', function() {
            const cardPassword = cardPasswordInput.value.trim();
            if (cardPassword) {
                Call_Query(cardPassword);
            } else {
                showStatusMessage('请输入要查询的卡密', 'error');
            }
        });

        // 购买按钮点击事件
        buyBtn.addEventListener('click', function() {
            Call_Pay();
        });

        // 输入框回车键支持
        cardPasswordInput.addEventListener('keypress', function(e) {
            if (e.key === 'Enter') {
                verifyBtn.click();
            }
        });
    }

    // 初始化公告系统
    function initNoticeSystem() {
        const noticeContent = document.getElementById('notice-content');
        const linkButtonsContainer = document.getElementById('link-buttons-container');
        
        const notice = getNotice(isAllDefault());
        
        if (notice) {
            // 检查是否都是默认内容
            const allDefault = isAllDefault();
            
            if (allDefault) {
                // 如果是默认内容，显示完整内容（包括链接）
                noticeContent.textContent = notice;
                
                // 同时生成链接按钮，让用户体验链接功能
                const allLinks = extractAllLinksInOrder(notice);
                
                // 清空按钮容器
                linkButtonsContainer.innerHTML = '';
                
                // 按原文顺序生成链接按钮
                if (allLinks.length > 0) {
                    let unnamedLinkCount = 0;
                    
                    allLinks.forEach((link) => {
                        const button = document.createElement('button');
                        
                        // 检查链接格式是否有效
                        const isValid = isValidUrl(link.url);
                        
                        if (isValid) {
                            button.className = 'link-btn';
                            
                            // 设置按钮文本
                            if (link.type === 'custom' && link.name) {
                                button.textContent = link.name;
                            } else {
                                unnamedLinkCount++;
                                button.textContent = `未命名链接 ${unnamedLinkCount}`;
                            }
                            
                            button.addEventListener('click', function() {
                                getUrl(link.url);
                            });
                        } else {
                            // 链接格式错误
                            button.className = 'error-link-btn';
                            button.textContent = '链接格式错误！链接必须带http://或https://';
                            button.disabled = true;
                        }
                        
                        linkButtonsContainer.appendChild(button);
                    });
                }
            } else {
                // 如果不是默认内容，按正常流程处理
                // 按原文顺序提取所有链接
                const allLinks = extractAllLinksInOrder(notice);
                
                // 获取纯文本内容（移除所有链接）
                const plainText = removeAllLinks(notice);
                
                // 显示公告文本
                noticeContent.textContent = plainText || '暂无公告';
                
                // 清空按钮容器
                linkButtonsContainer.innerHTML = '';
                
                // 按原文顺序生成链接按钮
                if (allLinks.length > 0) {
                    let unnamedLinkCount = 0;
                    
                    allLinks.forEach((link) => {
                        const button = document.createElement('button');
                        
                        // 检查链接格式是否有效
                        const isValid = isValidUrl(link.url);
                        
                        if (isValid) {
                            button.className = 'link-btn';
                            
                            // 设置按钮文本
                            if (link.type === 'custom' && link.name) {
                                button.textContent = link.name;
                            } else {
                                unnamedLinkCount++;
                                button.textContent = `未命名链接 ${unnamedLinkCount}`;
                            }
                            
                            button.addEventListener('click', function() {
                                getUrl(link.url);
                            });
                        } else {
                            // 链接格式错误
                            button.className = 'error-link-btn';
                            button.textContent = '链接格式错误！链接必须带http://或https://';
                            button.disabled = true;
                        }
                        
                        linkButtonsContainer.appendChild(button);
                    });
                }
            }
        } else {
            noticeContent.textContent = '暂无公告';
            linkButtonsContainer.innerHTML = '';
        }
    }

    // 按原文顺序提取所有链接
    function extractAllLinksInOrder(text) {
        const links = [];
        let currentIndex = 0;
        
        // 使用正则表达式匹配所有可能的链接形式
        const regex = /(<zzp\s+([^>]+)>([^<]+)<\/zzp>)|(https?:\/\/[^\s]+)/g;
        let match;
        
        while ((match = regex.exec(text)) !== null) {
            if (match[1]) {
                // 自定义链接 <zzp url>名称</zzp>
                links.push({
                    type: 'custom',
                    url: match[2].trim(),
                    name: match[3].trim(),
                    position: match.index
                });
            } else if (match[4]) {
                // 普通URL
                links.push({
                    type: 'normal',
                    url: match[4].trim(),
                    name: null,
                    position: match.index
                });
            }
        }
        
        // 按原文位置排序
        links.sort((a, b) => a.position - b.position);
        
        return links;
    }

    // 移除所有链接，只保留纯文本
    function removeAllLinks(text) {
        // 移除自定义链接
        let cleanText = text.replace(/<zzp\s+[^>]+>[^<]+<\/zzp>/g, '');
        // 移除普通URL
        cleanText = cleanText.replace(/(https?:\/\/[^\s]+)/g, '');
        return cleanText.trim();
    }

    // 显示状态消息
    function showStatusMessage(message, type) {
        const statusElement = document.getElementById('status-message');
        statusElement.textContent = message;
        statusElement.className = 'status-message status-' + type;
        statusElement.style.display = 'block';
        
        // 3秒后自动隐藏
        setTimeout(() => {
            statusElement.style.display = 'none';
        }, 3000);
    }

    // 打开URL
    function getUrl(url) {
        window.open(url, '_blank');
    }

    // PanGolin接口函数
    function Call_Verify(data) {
        if (typeof PanGolin !== 'undefined' && PanGolin.Verify) {
            PanGolin.Verify(data);
        }
    }

    function Call_Query(data) {
        if (typeof PanGolin !== 'undefined' && PanGolin.Query) {
            PanGolin.Query(data);
        }
    }

    function Call_Wuai_Cloud(data) {
        Call_Verify(data);
    }

    function Call_Query_Trial(data) {
        if (typeof PanGolin !== 'undefined') {
            if (PanGolin.Is_Trial && PanGolin.Is_Trial()) {
                PanGolin.Trial && PanGolin.Trial();
            } else {
                PanGolin.Query && PanGolin.Query(data);
            }
        }
    }

    function Call_Pay() {
        if (typeof PanGolin !== 'undefined' && PanGolin.Pay) {
            PanGolin.Pay();
        }
    }

    // 页面加载完成后初始化
    document.addEventListener('DOMContentLoaded', init);
</script>
</body>
</html>
<!-- 本DIY代码来自于 https://diy.zhongzhipian.top -->