验证ui展示 - 主页

云科技网络验证UI

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

第 1-100 行(共100行)
<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
    <title>验证窗口</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
        }

        body {
            min-height: 100vh;
            background: #fff;
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 20px;
            position: relative;
            overflow: hidden;
        }

        .ink-background {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: -1;
            background: 
                radial-gradient(circle at 30% 20%, #000 1%, transparent 10%),
                radial-gradient(circle at 70% 40%, #000 1%, transparent 12%),
                radial-gradient(circle at 40% 60%, #000 2%, transparent 15%),
                radial-gradient(circle at 80% 70%, #000 1%, transparent 8%),
                radial-gradient(circle at 20% 80%, #000 1%, transparent 10%),
                radial-gradient(circle at 60% 90%, #000 2%, transparent 12%);
            opacity: 0.1;
        }

        .ink-dots {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: -1;
            background: 
                radial-gradient(circle at 10% 30%, #000 0.5%, transparent 3%),
                radial-gradient(circle at 85% 25%, #000 0.5%, transparent 4%),
                radial-gradient(circle at 45% 75%, #000 0.5%, transparent 3%),
                radial-gradient(circle at 90% 85%, #000 0.5%, transparent 2%);
            opacity: 0.05;
        }

        .container {
            width: 100%;
            max-width: 400px;
            background: rgba(255, 255, 255, 0.95);
            border: 2px solid #000;
            padding: 30px;
            position: relative;
            z-index: 1;
            border-radius: 20px;
        }

        .input-group {
            margin-bottom: 25px;
        }

        .input-label {
            display: block;
            font-size: 14px;
            margin-bottom: 8px;
            font-weight: 500;
            color: #000;
        }

        .input-group input {
            width: 100%;
            padding: 12px;
            border: 1px solid #000;
            font-size: 16px;
            background: #fff;
            border-radius: 12px;
        }

        .input-group input:focus {
            outline: none;
            background: #f0f0f0;
        }

        .btn {
            width: 100%;
            padding: 12px;
            margin-bottom: 15px;
            font-size: 16px;
            cursor: pointer;
第 101-181 行(共81行)
            border: 1px solid #000;
            background: #fff;
            font-weight: 500;
            border-radius: 12px;
        }

        .btn-verify {
            background: #000;
            color: #fff;
        }

        .btn-verify:active {
            background: #333;
        }

        .btn-query {
            background: #fff;
            color: #000;
        }

        .btn-query:active {
            background: #f0f0f0;
        }

        .notice-box {
            margin-top: 25px;
            padding: 20px;
            border: 1px solid #000;
            background: rgba(255, 255, 255, 0.9);
            border-radius: 12px;
        }

        .notice-box h3 {
            font-size: 16px;
            margin-bottom: 10px;
            font-weight: 500;
            color: #000;
        }

        .notice-box p {
            font-size: 14px;
            line-height: 1.5;
            color: #000;
        }

        /* 移除所有过渡动画 */
        * {
            transition: none !important;
        }
    </style>
</head>
<body>
    <div class="ink-background"></div>
    <div class="ink-dots"></div>
    
    <div class="container">
        <div class="input-group">
            <label class="input-label">激活码验证</label>
            <input type="text" id="code" placeholder="请输入激活码">
        </div>
        
        <button class="btn btn-verify" onclick="Call_Verify(code.value)">立即验证</button>
        <button class="btn btn-query" onclick="Call_Query_Trial(code.value)">查询卡密</button>

        <div class="notice-box">
            <h3>系统公告</h3>
            <p id="notice"></p>
        </div>
    </div>

    <script>
        function Call_Verify(text) {
            RuoLv.onButtonClick(0, text);
        }
        
        function Call_Query_Trial(text) {
            RuoLv.onButtonClick(1, text);
        }
    </script>
</body>
</html>

用户评论

0 条评论
暂无评论

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

相关应用