转场动态加载diy_惠享云网络验证

56713732 2025-10-21 43 次下载
详细描述
实时预览
源代码
<!-- 本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, maximum-scale=1.0, user-scalable=no">
    <title>系统安全验证</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Courier New', monospace;
        }
        
        body {
            width: 100%;
            height: 100vh;
            overflow: hidden;
            background-color: rgba(0, 0, 0, 0.85);
            color: #0f0;
            position: relative;
        }
        
        .container {
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            position: relative;
            z-index: 2;
        }
        
        .title {
            font-size: 2.5rem;
            margin-bottom: 20px;
            text-align: center;
            text-shadow: 0 0 10px rgba(0, 255, 0, 0.5);
            animation: glow 2s infinite alternate;
        }
        
        .announcement {
            background: rgba(0, 255, 0, 0.1);
            padding: 15px;
            border-radius: 10px;
            margin: 0 20px 30px;
            max-width: 90%;
            text-align: center;
            backdrop-filter: blur(5px);
            border: 1px solid rgba(0, 255, 0, 0.2);
        }
        
        .loading-bar {
            width: 80%;
            height: 20px;
            background: rgba(0, 255, 0, 0.1);
            border-radius: 10px;
            margin: 20px 0;
            overflow: hidden;
            position: relative;
        }
        
        .progress {
            height: 100%;
            width: 0%;
            background: linear-gradient(90deg, #00ff00, #009900);
            border-radius: 10px;
            transition: width 0.3s ease;
            position: relative;
            overflow: hidden;
        }
        
        .progress::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(90deg, 
                            transparent, 
                            rgba(0, 255, 0, 0.4), 
                            transparent);
            animation: shimmer 2s infinite;
        }
        
        .countdown {
            font-size: 1.2rem;
            margin-top: 20px;
            opacity: 0;
            transition: opacity 0.5s;
        }
        
        .modal {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.9);
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 10;
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.5s;
            backdrop-filter: blur(5px);
        }
        
        .modal.active {
            opacity: 1;
            pointer-events: all;
        }
        
        .modal-content {
            background: rgba(0, 20, 0, 0.8);
            padding: 30px;
            border-radius: 5px;
            width: 90%;
            max-width: 400px;
            box-shadow: 0 0 20px rgba(0, 255, 0, 0.3);
            border: 1px solid rgba(0, 255, 0, 0.3);
            position: relative;
        }
        
        .modal-title {
            font-size: 1.5rem;
            margin-bottom: 20px;
            text-align: center;
            color: #0f0;
        }
        
        .input-group {
            margin-bottom: 20px;
        }
        
        .input-group label {
            display: block;
            margin-bottom: 8px;
            font-size: 0.9rem;
        }
        
        .input-group input {
            width: 100%;
            padding: 12px 15px;
            border-radius: 5px;
            border: none;
            background: rgba(0, 255, 0, 0.1);
            color: #0f0;
            font-size: 1rem;
            border: 1px solid rgba(0, 255, 0, 0.3);
        }
        
        .button-group {
            display: flex;
            justify-content: space-between;
            margin-top: 30px;
        }
        
        .btn {
            padding: 12px 20px;
            border-radius: 5px;
            border: none;
            font-size: 1rem;
            font-weight: bold;
            cursor: pointer;
            transition: all 0.3s;
            font-family: 'Courier New', monospace;
        }
        
        .btn-verify {
            background: linear-gradient(90deg, #00aa00, #007700);
            color: #0f0;
            flex: 1;
            margin-right: 10px;
        }
        
        .btn-unbind {
            background: linear-gradient(90deg, #aa0000, #770000);
            color: #f00;
            flex: 1;
        }
        
        .btn-extra {
            background: rgba(0, 100, 200, 0.7);
            color: white;
            margin-top: 10px;
        }
        
        .btn:hover {
            transform: translateY(-3px);
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
        }
        
        .status-message {
            margin-top: 15px;
            padding: 10px;
            border-radius: 5px;
            text-align: center;
            font-size: 0.9rem;
            display: none;
        }
        
        .success {
            background: rgba(0, 255, 0, 0.1);
            border: 1px solid #0f0;
            color: #0f0;
            display: block;
        }
        
        .error {
            background: rgba(255, 0, 0, 0.1);
            border: 1px solid #f00;
            color: #f00;
            display: block;
        }
        
        .extra-buttons {
            display: flex;
            flex-direction: column;
            margin-top: 20px;
            gap: 10px;
        }
        
        /* 代码雨样式 */
        #matrix {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 1;
        }
        
        @keyframes glow {
            from {
                text-shadow: 0 0 5px rgba(0, 255, 0, 0.5);
            }
            to {
                text-shadow: 0 0 20px rgba(0, 255, 0, 0.8);
            }
        }
        
        @keyframes shimmer {
            0% {
                transform: translateX(-100%);
            }
            100% {
                transform: translateX(100%);
            }
        }
    </style>
</head>
<body>
    <canvas id="matrix"></canvas>
    
    <div class="container">
        <h1 class="title" id="title">系统安全验证</h1>
        
        <div class="announcement" id="notice">
            <p>正在初始化安全协议... 请勿中断进程</p>
        </div>
        
        <div class="loading-bar">
            <div class="progress" id="progress"></div>
        </div>
        
        <div class="countdown" id="countdown">
            正在建立安全连接...
        </div>
    </div>
    
    <div class="modal" id="modal">
        <div class="modal-content">
            <h2 class="modal-title">授权验证</h2>
            
            <div class="input-group">
                <label for="card-number">访问密钥</label>
                <input type="text" id="card-number" placeholder="输入授权密钥">
            </div>
            
            <div class="input-group">
                <label for="device-id">终端ID</label>
                <input type="text" id="device-id" readonly>
            </div>
            
            <div class="status-message" id="status-message"></div>
            
            <div class="button-group">
                <button class="btn btn-verify" id="verify-btn">验证</button>
                <button class="btn btn-unbind" id="unbind-btn">重置</button>
            </div>
            
            <div class="extra-buttons">
                <button class="btn btn-extra" id="buy-btn">购买卡密</button>
            </div>
        </div>
    </div>

    <script>
        // 初始化函数
        function init() {
            // 设置标题和通知
            if (typeof PanGolin !== 'undefined') {
                document.getElementById("title").innerHTML = PanGolin.GetTitle();
                document.getElementById("notice").innerHTML = PanGolin.GetNotice();
                
                // 设置设备ID
                const deviceId = PanGolin.GetDeviceId ? PanGolin.GetDeviceId() : generateDeviceId();
                document.getElementById("device-id").value = deviceId;
            } else {
                // 模拟PanGolin对象用于测试
                window.PanGolin = {
                    GetTitle: function() { return "系统安全验证"; },
                    GetNotice: function() { return "<p>正在初始化安全协议... 请勿中断进程</p>"; },
                    GetDeviceId: function() { return generateDeviceId(); },
                    Verify: function(data) { 
                        console.log("验证调用:", data);
                        // 模拟验证成功
                        setTimeout(() => {
                            showStatusMessage('验证成功！欢迎使用系统', 'success');
                        }, 1000);
                    },
                    Unbind: function() {
                        console.log("重置调用");
                        showStatusMessage('系统已重置', 'success');
                    },
                    BuyCard: function() {
                        console.log("购买卡密调用");
                        // 这里可以跳转到购买页面或打开购买对话框
                        window.open('https://example.com/buy', '_blank');
                    }
                };
                
                document.getElementById("title").innerHTML = PanGolin.GetTitle();
                document.getElementById("notice").innerHTML = PanGolin.GetNotice();
                document.getElementById("device-id").value = PanGolin.GetDeviceId();
            }
            
            // 初始化代码雨效果
            initMatrix();
            
            // 初始化进度条动画
            initProgressBar();
            
            // 绑定事件监听器
            bindEvents();
        }

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

        // 代码雨效果
        function initMatrix() {
            const canvas = document.getElementById('matrix');
            const ctx = canvas.getContext('2d');
            
            canvas.width = window.innerWidth;
            canvas.height = window.innerHeight;
            
            const chars = '01abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789';
            const charArray = chars.split('');
            const fontSize = 14;
            const columns = canvas.width / fontSize;
            const drops = [];
            
            for (let i = 0; i < columns; i++) {
                drops[i] = 1;
            }
            
            function draw() {
                ctx.fillStyle = 'rgba(0, 0, 0, 0.05)';
                ctx.fillRect(0, 0, canvas.width, canvas.height);
                
                ctx.fillStyle = '#0F0';
                ctx.font = fontSize + 'px monospace';
                
                for (let i = 0; i < drops.length; i++) {
                    const text = charArray[Math.floor(Math.random() * charArray.length)];
                    ctx.fillText(text, i * fontSize, drops[i] * fontSize);
                    
                    if (drops[i] * fontSize > canvas.height && Math.random() > 0.975) {
                        drops[i] = 0;
                    }
                    drops[i]++;
                }
            }
            
            setInterval(draw, 33);
            
            window.addEventListener('resize', function() {
                canvas.width = window.innerWidth;
                canvas.height = window.innerHeight;
            });
        }

        // 进度条动画
        function initProgressBar() {
            const progress = document.getElementById('progress');
            const countdown = document.getElementById('countdown');
            const modal = document.getElementById('modal');
            
            let progressValue = 0;
            const interval = setInterval(() => {
                progressValue += Math.random() * 10;
                if (progressValue >= 100) {
                    progressValue = 100;
                    clearInterval(interval);
                    
                    // 进度完成后的操作
                    setTimeout(() => {
                        countdown.style.opacity = '1';
                        countdown.textContent = '安全连接已建立';
                        
                        setTimeout(() => {
                            modal.classList.add('active');
                        }, 1000);
                    }, 500);
                }
                progress.style.width = progressValue + '%';
            }, 200);
        }

        // 绑定事件
        function bindEvents() {
            const verifyBtn = document.getElementById('verify-btn');
            const unbindBtn = document.getElementById('unbind-btn');
            const buyBtn = document.getElementById('buy-btn');
            const cardNumberInput = document.getElementById('card-number');
            const statusMessage = document.getElementById('status-message');

            // 验证按钮点击事件
            verifyBtn.addEventListener('click', function() {
                const cardNumber = cardNumberInput.value.trim();
                
                if (!cardNumber) {
                    showStatusMessage('请输入授权密钥', 'error');
                    return;
                }
                
                showStatusMessage('正在验证，请稍候...', 'success');
                
                // 调用PanGolin验证接口
                Call_Verify(cardNumber);
            });

            // 重置按钮点击事件
            unbindBtn.addEventListener('click', function() {
                cardNumberInput.value = '';
                statusMessage.style.display = 'none';
                
                if (typeof PanGolin !== 'undefined' && PanGolin.Unbind) {
                    PanGolin.Unbind();
                } else {
                    showStatusMessage('系统已重置', 'success');
                    setTimeout(() => {
                        statusMessage.style.display = 'none';
                    }, 2000);
                }
            });

            // 购买卡密按钮点击事件 - 修复后的绑定
            buyBtn.addEventListener('click', function() {
                console.log("购买卡密按钮被点击");
                
                if (typeof PanGolin !== 'undefined') {
                    if (PanGolin.BuyCard) {
                        // 调用PanGolin的购买卡密接口
                        PanGolin.BuyCard();
                    } else if (PanGolin.Pay) {
                        // 如果存在Pay方法，也调用
                        PanGolin.Pay();
                    } else {
                        // 如果没有特定的购买方法，调用通用的Call_Pay
                        Call_Pay();
                    }
                } else {
                    // 测试环境下的处理
                    Call_Pay();
                }
            });

            // 添加键盘事件支持
            cardNumberInput.addEventListener('keypress', function(e) {
                if (e.key === 'Enter') {
                    verifyBtn.click();
                }
            });
        }

        // 显示状态消息
        function showStatusMessage(message, type) {
            const statusMessage = document.getElementById('status-message');
            statusMessage.textContent = message;
            statusMessage.className = 'status-message ' + type;
            statusMessage.style.display = 'block';
        }

        // PanGolin接口函数
        function Call_Verify(data) {
            if (typeof PanGolin !== 'undefined' && PanGolin.Verify) {
                PanGolin.Verify(data);
            } else {
                // 模拟验证
                setTimeout(() => {
                    if (data && data.length >= 8) {
                        showStatusMessage('验证成功！欢迎使用系统', 'success');
                    } else {
                        showStatusMessage('验证失败：无效的授权密钥', 'error');
                    }
                }, 1500);
            }
        }

        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() {
            console.log("Call_Pay函数被调用");
            if (typeof PanGolin !== 'undefined') {
                if (PanGolin.Pay) {
                    PanGolin.Pay();
                } else if (PanGolin.BuyCard) {
                    PanGolin.BuyCard();
                }
            } else {
                alert('购买功能：正在跳转到购买页面...');
                window.open('https://zhongzhipian.top', '_blank');
            }
        }

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