验证ui展示 - 主页
验证ui展示

云科技验证UI

云DIY模板 9 次查看 15 次下载

查看代码

HTML内容

预览模式 代码模式
第 1-100 行（共100行）
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>云科技系统 - 安全授权</title>
    <link rel="stylesheet" href="styles.css">
    <!-- 引入字体图标 -->
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style type="text/css" media="all">
        /* 全局样式重置 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* 基本样式 */
body {
    font-family: "Microsoft YaHei", "微软雅黑", "SimHei", "黑体", sans-serif;
    line-height: 1.6;
    color: #e0f7ff;
    background-color: #0c1016;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
}

/* 粒子背景 */
#particles-js {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 0;
}

/* 主容器 */
.container {
    width: 100%;
    max-width: 100%;
    padding: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1;
    position: relative;
}

/* 授权界面 */
.auth-interface {
    background: rgba(16, 24, 38, 0.8);
    width: 100%;
    max-width: 480px;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 
        0 0 30px rgba(0, 132, 255, 0.15),
        0 0 60px rgba(0, 132, 255, 0.1);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    position: relative;
    transition: all 0.5s ease;
}

/* 顶部装饰线 */
.interface-lines {
    height: 4px;
    width: 100%;
    display: flex;
    overflow: hidden;
}

.line {
    height: 100%;
    flex: 1;
}

.line:nth-child(1) {
    background: linear-gradient(90deg, #0062ff, #00b3ff);
}

.line:nth-child(2) {
    background: linear-gradient(90deg, #00b3ff, #00ffe7);
}

.line:nth-child(3) {
    background: linear-gradient(90deg, #00ffe7, #0062ff);
}

/* 系统标识 */
.system-identity {
    display: flex;
    align-items: center;
    padding: 25px 30px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
第 101-200 行（共100行）
    background: rgba(16, 24, 38, 0.5);
}

.system-logo {
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, #0062ff, #00b3ff);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 15px;
    box-shadow: 0 5px 15px rgba(0, 132, 255, 0.3);
}

.system-logo i {
    font-size: 24px;
    color: white;
}

.system-info h1 {
    font-size: 24px;
    font-weight: 700;
    letter-spacing: 2px;
    margin-bottom: 5px;
    color: white;
}

.system-version {
    font-size: 12px;
    opacity: 0.7;
    margin-left: 5px;
    font-weight: normal;
    letter-spacing: 0;
}

.system-status {
    display: flex;
    align-items: center;
}

.status-dot {
    width: 8px;
    height: 8px;
    background-color: #00ff9d;
    border-radius: 50%;
    margin-right: 8px;
    position: relative;
}

.status-dot::after {
    content: "";
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background-color: rgba(0, 255, 157, 0.4);
    border-radius: 50%;
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% {
        transform: scale(1);
        opacity: 0.7;
    }
    70% {
        transform: scale(1.5);
        opacity: 0;
    }
    100% {
        transform: scale(1);
        opacity: 0;
    }
}

.status-text {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.7);
}

/* 授权面板 */
.auth-panel {
    padding: 30px;
}

.panel-header {
    display: flex;
    align-items: center;
    margin-bottom: 25px;
}

.header-icon {
    width: 36px;
    height: 36px;
    background: rgba(0, 132, 255, 0.15);
    border-radius: 8px;
    display: flex;
    align-items: center;
第 201-300 行（共100行）
    justify-content: center;
    margin-right: 12px;
}

.header-icon i {
    font-size: 18px;
    color: #00a8ff;
}

.panel-header h2 {
    font-size: 18px;
    font-weight: 600;
    color: white;
}

/* 输入容器 */
.input-container {
    margin-bottom: 25px;
}

.input-group {
    position: relative;
    margin-bottom: 15px;
}

.input-group label {
    display: block;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 8px;
}

.input-group input {
    width: 100%;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 14px 16px;
    color: white;
    font-size: 15px;
    transition: all 0.3s;
}

.input-group input:focus {
    outline: none;
    border-color: #0084ff;
    background: rgba(255, 255, 255, 0.08);
}

.input-group input::placeholder {
    color: rgba(255, 255, 255, 0.3);
}

.input-highlight {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 2px;
    width: 0;
    background: linear-gradient(90deg, #0062ff, #00b3ff);
    transition: width 0.3s;
}

.input-group input:focus ~ .input-highlight {
    width: 100%;
}

/* 安全指示器 */
.security-indicator {
    display: flex;
    align-items: center;
    margin-top: 12px;
}

.indicator-icon {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 8px;
}

.indicator-icon i {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.5);
}

.indicator-text {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.5);
}

/* 授权按钮 */
.auth-btn {
    width: 100%;
    background: linear-gradient(90deg, #0062ff, #00b3ff);
    border: none;
    border-radius: 8px;
    padding: 14px;
第 301-400 行（共100行）
    color: white;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.auth-btn::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: all 0.5s;
}

.auth-btn:hover {
    box-shadow: 0 5px 15px rgba(0, 132, 255, 0.3);
    transform: translateY(-2px);
}

.auth-btn:hover::before {
    left: 100%;
}

.btn-text {
    margin-right: 8px;
}

.btn-icon {
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 底部操作区 */
.action-panel {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px 30px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(16, 24, 38, 0.5);
}

.action-item {
    display: flex;
    align-items: center;
    cursor: pointer;
    transition: all 0.3s;
    padding: 8px 12px;
    border-radius: 6px;
}

.action-item:hover {
    background: rgba(255, 255, 255, 0.05);
}

.action-item i {
    font-size: 16px;
    color: #00a8ff;
    margin-right: 8px;
}

.action-item span {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.7);
}

.action-separator {
    width: 1px;
    height: 20px;
    background: rgba(255, 255, 255, 0.1);
    margin: 0 20px;
}

/* 系统页脚 */
.system-footer {
    padding: 15px 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(10, 15, 25, 0.8);
}

.encryption-info {
    display: flex;
    align-items: center;
}

.encryption-info i {
第 401-500 行（共100行）
    font-size: 14px;
    color: rgba(255, 255, 255, 0.4);
    margin-right: 8px;
}

.encryption-info span {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.4);
}

.copyright span {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.4);
}

/* 验证状态动画 */
.auth-interface.verifying {
    box-shadow: 
        0 0 30px rgba(255, 208, 0, 0.15),
        0 0 60px rgba(255, 208, 0, 0.1);
}

.auth-interface.verified {
    box-shadow: 
        0 0 30px rgba(0, 255, 157, 0.15),
        0 0 60px rgba(0, 255, 157, 0.1);
}

.auth-interface.error {
    box-shadow: 
        0 0 30px rgba(255, 71, 87, 0.15),
        0 0 60px rgba(255, 71, 87, 0.1);
}

/* 响应式调整 */
@media (max-width: 500px) {
    .auth-interface {
        max-width: 100%;
    }
    
    .system-identity,
    .auth-panel,
    .action-panel,
    .system-footer {
        padding-left: 20px;
        padding-right: 20px;
    }
    
    .system-logo {
        width: 40px;
        height: 40px;
    }
    
    .system-info h1 {
        font-size: 20px;
    }
} 

/* 公告弹窗样式 */
.modal {
    display: none; /* 默认隐藏 */
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6); /* 半透明黑色背景 */
    backdrop-filter: blur(10px); /* 背景模糊效果 */
    justify-content: center;
    align-items: center;
}

.modal-content {
    background: rgba(16, 24, 38, 0.9); /* 与授权界面一致的背景 */
    border-radius: 12px;
    width: 90%;
    max-width: 500px;
    box-shadow: 0 5px 15px rgba(0, 132, 255, 0.3);
    overflow: hidden;
    animation: fadeIn 0.3s ease;
}

.modal-header {
    padding: 20px;
    background: rgba(0, 132, 255, 0.1);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.modal-header h2 {
    font-size: 20px;
    color: #fff;
    margin: 0;
}

.close-btn {
    background: none;
第 501-600 行（共100行）
    border: none;
    color: #fff;
    font-size: 24px;
    cursor: pointer;
    transition: opacity 0.3s;
}

.close-btn:hover {
    opacity: 0.7;
}

.modal-body {
    padding: 20px;
    color: rgba(255, 255, 255, 0.8);
    font-size: 16px;
    line-height: 1.6;
}

/* 淡入动画 */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 主题切换按钮样式 */
.theme-switch {
    margin-left: auto;
    padding-left: 20px;
}

.theme-btn {
    background: none;
    border: none;
    color: #00a8ff;
    font-size: 20px;
    cursor: pointer;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.theme-btn:hover {
    background: rgba(255, 255, 255, 0.1);
}

/* 暗色主题样式 */
body.dark-theme {
    background-color: #0c1016;
}

body.dark-theme .auth-interface {
    background: rgba(16, 24, 38, 0.8);
}

/* 亮色主题样式 */
body.light-theme {
    background-color: #f0f2f5;
}

body.light-theme .auth-interface {
    background: rgba(255, 255, 255, 0.95);
    box-shadow: 
        0 0 30px rgba(0, 0, 0, 0.1),
        0 0 60px rgba(0, 0, 0, 0.05);
}

body.light-theme .system-identity {
    background: rgba(255, 255, 255, 0.9);
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

body.light-theme .system-info h1 {
    color: #1a1a1a;
}

body.light-theme .status-text {
    color: #555;
}

body.light-theme .panel-header h2 {
    color: #1a1a1a;
}

body.light-theme .input-group label {
    color: #444;
}

body.light-theme .input-group input {
    background: rgba(0, 0, 0, 0.03);
    border-color: rgba(0, 0, 0, 0.15);
第 601-700 行（共100行）
    color: #333;
}

body.light-theme .input-group input::placeholder {
    color: rgba(0, 0, 0, 0.3);
}

body.light-theme .security-indicator {
    color: #666;
}

body.light-theme .indicator-icon i {
    color: #666;
}

body.light-theme .indicator-text {
    color: #666;
}

body.light-theme .action-panel {
    background: rgba(255, 255, 255, 0.9);
    border-top: 1px solid rgba(0, 0, 0, 0.1);
}

body.light-theme .action-item span {
    color: #444;
}

body.light-theme .action-separator {
    background: rgba(0, 0, 0, 0.1);
}

body.light-theme .system-footer {
    background: rgba(255, 255, 255, 0.95);
}

body.light-theme .encryption-info i,
body.light-theme .encryption-info span,
body.light-theme .copyright span {
    color: #666;
}

body.light-theme .modal-content {
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.15);
}

body.light-theme .modal-header h3 {
    color: #1a1a1a;
}

body.light-theme .modal-body {
    color: #444;
}

body.light-theme .modal-header {
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

/* 粒子效果在亮色主题下的调整 */
body.light-theme #particles-js canvas {
    opacity: 1;
}
    </style>
    
</head>
<body>
    <!-- 背景粒子 -->
    <div id="particles-js"></div>
    
    <div class="container">
        <div class="auth-interface">
            <!-- 顶部装饰线 -->
            <div class="interface-lines">
                <div class="line"></div>
                <div class="line"></div>
                <div class="line"></div>
            </div>
            <!-- 系统标识 -->
            <div class="system-identity">
                <div class="system-logo">
                    <i class="fas fa-shield-alt"></i>
                </div>
                <div class="system-info">
                     <h1 id="title"></h1>
                    <div class="system-status">
                        <span class="status-dot"></span>
                        <span class="status-text">安全系统在线</span>
                    </div>
                </div>
                <!-- 添加主题切换按钮 -->
                <div class="theme-switch">
                    <button class="theme-btn" onclick="toggleTheme()">
                        <i class="fas fa-sun"></i>
                    </button>
                </div>
            </div>
            
            <!-- 授权界面 -->
            <div class="auth-panel">
第 701-800 行（共100行）
                <div class="panel-header">
                    <div class="header-icon"><i class="fas fa-key"></i></div>
                    <p id="notice">
                </div>
                
                <form id="login-form">
                    <div class="input-container">
                        <div class="input-group">
                            <label for="card-key">授权密钥</label>
                            <input type="text" id="code" name="card-key" placeholder="输入您的授权密钥" required>
                            <div class="input-highlight"></div>
                        </div>
                        
                        <div class="security-indicator">
                            <div class="indicator-icon"><i class="fas fa-lock"></i></div>
                            <div class="indicator-text">端到端加密传输</div>
                        </div>
                    </div>
                    
<button type="button" class="auth-btn" onclick="Call_Verify(code.value);" style="margin-bottom: 10px;">
                        <span class="btn-text">立即验证</span>
                        <span class="btn-icon"><i class="fas fa-arrow-right"></i></span>
                    </button>
                    <button type="button" class="auth-btn" onclick="Call_jiebang(code.value);">
                        <span class="btn-text">查询卡密</span>
                        <span class="btn-icon"><i class="fas fa-search"></i></span>
                    </button>
                </form>
            </div>
            
            <!-- 底部操作区 -->
       <div class="action-panel">
    <!-- 获取授权 -->
    <div class="action-item" onclick="Call_Pay()">
        <i class="fas fa-shopping-cart"></i>
        <span>购买卡密</span>
    </div>
    
    <!-- 分隔线 -->
    <div class="action-separator"></div>
    
    <!-- 技术支持 -->
    <div class="action-item" onclick="Call_Extra_Event();">
        <i class="fas fa-headset"></i>
        <span>技术支持</span>
    </div>
</div>
            <!-- 系统信息 -->
            <div class="system-footer">
                <div class="encryption-info">
                    <i class="fas fa-fingerprint"></i>
                    <span>SHA-256 加密保护</span>
                </div>
                <div class="copyright">
                    <span>云科技 SYSTEMS © 2025</span>
                </div>
            </div>
        </div>
    </div>
    
    <!-- 粒子效果JS -->
    <script src="https://cdn.staticfile.org/particles.js/2.0.0/particles.min.js"></script>
    
    <!-- 登录验证脚本 -->
    <script>
        // 初始化粒子效果
        document.addEventListener('DOMContentLoaded', function() {
            if(typeof particlesJS !== 'undefined') {
                particlesJS("particles-js", {
                    "particles": {
                        "number": {
                            "value": 80,
                            "density": {
                                "enable": true,
                                "value_area": 800
                            }
                        },
                        "color": {
                            "value": "#ffffff"
                        },
                        "shape": {
                            "type": "circle",
                            "stroke": {
                                "width": 0,
                                "color": "#000000"
                            },
                        },
                        "opacity": {
                            "value": 0.3,
                            "random": true,
                            "anim": {
                                "enable": true,
                                "speed": 1,
                                "opacity_min": 0.1,
                                "sync": false
                            }
                        },
                        "size": {
                            "value": 3,
                            "random": true,
第 801-900 行（共100行）
                            "anim": {
                                "enable": false,
                                "speed": 40,
                                "size_min": 0.1,
                                "sync": false
                            }
                        },
                        "line_linked": {
                            "enable": true,
                            "distance": 150,
                            "color": "#ffffff",
                            "opacity": 0.2,
                            "width": 1
                        },
                        "move": {
                            "enable": true,
                            "speed": 2,
                            "direction": "none",
                            "random": false,
                            "straight": false,
                            "out_mode": "out",
                            "bounce": false,
                        }
                    },
                    "interactivity": {
                        "detect_on": "canvas",
                        "events": {
                            "onhover": {
                                "enable": true,
                                "mode": "grab"
                            },
                            "onclick": {
                                "enable": true,
                                "mode": "push"
                            },
                            "resize": true
                        },
                        "modes": {
                            "grab": {
                                "distance": 140,
                                "line_linked": {
                                    "opacity": 1
                                }
                            },
                            "push": {
                                "particles_nb": 4
                            }
                        }
                    },
                    "retina_detect": true
                });
            }
        });


    </script>
    
    <script>function Call_Verify(data) {
            RuoLv.onButtonClick(0, data);
        }
        function Call_jiebang(data) {
            RuoLv.onButtonClick(1, data);
        }
        function Call_Pay() {
            云科技.buykami("https://baidu.com/");
        }
      function mStart(n) {
        n.style.backgroundColor = "#075aa3"
      }
      function mUp(n) {
        n.style.backgroundColor = "#fff"
      }
      function tStart(n) {
        n.style.color = "#075db3",
        n.style.textDecoration = "underline"
      }
      function tUp(n) {
        n.style.color = "#a0a4a7",
        n.style.textDecoration = "none"
      }     document.getElementById("title").innerHTML = 云科技.GetTitle(),
      document.getElementById("notice").innerHTML = RuoLv.getNotice(),
      document.getElementById("Query_Trial").innerHTML = 1 == 云科技.Is_Trial() ? "试用": "查码",
      document.getElementById("Pay").style.display = 1 == 云科技.Is_Pay() ? "block": "none";</script>

    <script>
        // 初始化主题
        function initTheme() {
            try {
                const savedTheme = localStorage.getItem('云科技_theme') || 'dark';
                setTheme(savedTheme);
                console.log('Theme initialized:', savedTheme);
            } catch(e) {
                console.error('Failed to initialize theme:', e);
                setTheme('dark');
            }
        }

        // 设置主题的统一函数
        function setTheme(theme) {
            const body = document.body;
第 901-1000 行（共100行）
            const themeBtn = document.querySelector('.theme-btn i');
            
            body.classList.remove('light-theme', 'dark-theme');
            body.classList.add(theme + '-theme');
            
            if(themeBtn) {
                themeBtn.classList.remove('fa-sun', 'fa-moon');
                themeBtn.classList.add(theme === 'light' ? 'fa-moon' : 'fa-sun');
            }
            
            try {
                localStorage.setItem('云科技_theme', theme);
            } catch(e) {
                console.error('Failed to save theme:', e);
            }
            
            // 更新粒子效果
            updateParticles(theme);
        }

        // 主题切换功能
        function toggleTheme() {
            try {
                const isDark = document.body.classList.contains('dark-theme');
                setTheme(isDark ? 'light' : 'dark');
            } catch(e) {
                console.error('Failed to toggle theme:', e);
            }
        }

        // 更新粒子效果
        function updateParticles(theme) {
            if(typeof particlesJS === 'undefined') return;
            
            const isDark = theme === 'dark';
            const config = {
                "particles": {
                    "number": {
                        "value": isDark ? 80 : 40,
                        "density": {
                            "enable": true,
                            "value_area": 800
                        }
                    },
                    "color": {
                        "value": isDark ? "#ffffff" : "#0062ff"
                    },
                    "shape": {
                        "type": "circle"
                    },
                    "opacity": {
                        "value": isDark ? 0.3 : 0.6,
                        "random": true,
                        "anim": {
                            "enable": true,
                            "speed": 1,
                            "opacity_min": isDark ? 0.1 : 0.2,
                            "sync": false
                        }
                    },
                    "size": {
                        "value": isDark ? 3 : 4,
                        "random": true,
                        "anim": {
                            "enable": false,
                            "speed": 40,
                            "size_min": 0.1,
                            "sync": false
                        }
                    },
                    "line_linked": {
                        "enable": true,
                        "distance": 150,
                        "color": isDark ? "#ffffff" : "#0062ff",
                        "opacity": isDark ? 0.2 : 0.4,
                        "width": isDark ? 1 : 2
                    },
                    "move": {
                        "enable": true,
                        "speed": isDark ? 2 : 3,
                        "direction": "none",
                        "random": false,
                        "straight": false,
                        "out_mode": "out",
                        "bounce": false
                    }
                },
                "interactivity": {
                    "detect_on": "canvas",
                    "events": {
                        "onhover": {
                            "enable": true,
                            "mode": "grab"
                        },
                        "onclick": {
                            "enable": true,
                            "mode": "push"
                        },
                        "resize": true
                    },
第 1001-1033 行（共33行）
                    "modes": {
                        "grab": {
                            "distance": 140,
                            "line_linked": {
                                "opacity": isDark ? 1 : 0.8
                            }
                        },
                        "push": {
                            "particles_nb": 4
                        }
                    }
                },
                "retina_detect": true
            };
            
            particlesJS("particles-js", config);
        }

        // 暴露给外部接口使用的函数
        window.云科技 = window.云科技 || {};
        window.云科技.setTheme = function(theme) {
            if (theme === 'light' || theme === 'dark') {
                setTheme(theme);
            }
        };

        // 页面加载完成后初始化
        document.addEventListener('DOMContentLoaded', function() {
            initTheme();
        });
    </script>
</body>
</html>

相关应用

云科技验证UI
云科技验证UI
云DIY模板
1,549
查看详情
云科技验证UI
云科技验证UI
云DIY模板
236
查看详情
云科技验证UI
云科技验证UI
云DIY模板
224
查看详情
云科技验证UI
云科技验证UI
云DIY模板
187
查看详情

用户评论

0 条评论
暂无评论

成为第一个评论此应用的用户吧！

相关应用

云科技验证UI

云科技验证UI

1,549 下载
云科技验证UI

云科技验证UI

236 下载
云科技验证UI

云科技验证UI

224 下载
云科技验证UI

云科技验证UI

187 下载