云科技验证UI

第 1-100 行（共100行）

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <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: 'PingFang SC', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
        }

        @keyframes float {
            0% {
                transform: translatey(0px);
            }
            50% {
                transform: translatey(-10px);
            }
            100% {
                transform: translatey(0px);
            }
        }

        @keyframes bounce {
            0%, 100% {
                transform: translateY(0);
            }
            50% {
                transform: translateY(-5px);
            }
        }

        body {
            position: fixed;
            inset: 0;
            background-color: #fedbe7;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            overflow: hidden;
        }

        /* 气泡装饰 */
        .bubble {
            position: absolute;
            background-color: rgba(255, 255, 255, 0.7);
            border-radius: 50%;
            box-shadow: 0 0 10px rgba(255, 192, 203, 0.3);
            z-index: -1;
        }

        .bubble:nth-child(1) {
            width: 60px;
            height: 60px;
            top: 10%;
            left: 20%;
            animation: float 6s ease-in-out infinite;
        }

        .bubble:nth-child(2) {
            width: 40px;
            height: 40px;
            top: 70%;
            left: 15%;
            animation: float 7s ease-in-out infinite;
        }

        .bubble:nth-child(3) {
            width: 80px;
            height: 80px;
            top: 30%;
            right: 10%;
            animation: float 5s ease-in-out infinite;
        }

        .bubble:nth-child(4) {
            width: 50px;
            height: 50px;
            bottom: 15%;
            right: 20%;
            animation: float 8s ease-in-out infinite;
        }

        .container {
            width: 90%;
            max-width: 360px;
            background-color: white;
            border-radius: 30px;
            padding: 30px 25px;
            box-shadow: 
                0 15px 35px rgba(255, 175, 204, 0.3),
                0 0 0 8px rgba(255, 192, 203, 0.4);
            position: relative;
            z-index: 1;

第 101-200 行（共100行）

        }

        /* 猫耳装饰 */
        .cat-ear {
            position: absolute;
            top: -15px;
            width: 40px;
            height: 40px;
            background-color: #ff9eb5;
            border-radius: 0 50% 0 50%;
            z-index: -1;
        }

        .cat-ear-left {
            left: 30px;
            transform: rotate(-30deg);
        }

        .cat-ear-right {
            right: 30px;
            transform: rotate(30deg) scaleX(-1);
        }

        .cat-ear::after {
            content: '';
            position: absolute;
            top: 8px;
            left: 8px;
            width: 20px;
            height: 20px;
            background-color: #ffccd5;
            border-radius: 0 50% 0 50%;
        }

        /* 标题样式 */
        .header {
            text-align: center;
            margin-bottom: 25px;
            position: relative;
        }

        .header h1 {
            color: #ff6b99;
            font-size: 22px;
            font-weight: 700;
            margin-bottom: 5px;
            position: relative;
            display: inline-block;
        }

        .header h1::after {
            content: '❤';
            position: absolute;
            top: -5px;
            right: -20px;
            font-size: 14px;
            animation: bounce 2s infinite;
        }

        .header p {
            color: #ff9eb5;
            font-size: 14px;
        }

        /* 输入框样式 */
        .input-container {
            margin-bottom: 25px;
            position: relative;
        }

        .input-label {
            position: absolute;
            top: -10px;
            left: 20px;
            background-color: white;
            padding: 0 8px;
            font-size: 12px;
            color: #ff6b99;
            font-weight: 600;
            z-index: 2;
        }

        .input {
            width: 100%;
            padding: 15px 20px;
            background-color: #fff;
            border: 2px solid #ffccd5;
            border-radius: 20px;
            font-size: 15px;
            color: #ff6b99;
            transition: all 0.3s;
            box-shadow: 0 5px 15px rgba(255, 192, 203, 0.15);
        }

        .input:focus {
            outline: none;
            border-color: #ff6b99;
            box-shadow: 0 5px 20px rgba(255, 192, 203, 0.25);
        }

第 201-300 行（共100行）

        .input::placeholder {
            color: #ffccd5;
        }

        /* 按钮样式 */
        .button-group {
            display: flex;
            flex-direction: column;
            gap: 12px;
            margin-bottom: 25px;
        }

        .btn {
            position: relative;
            padding: 14px 0;
            border-radius: 20px;
            font-size: 15px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s;
            border: none;
            overflow: hidden;
            z-index: 1;
        }

        .btn-primary {
            background-color: #ff6b99;
            color: white;
            box-shadow: 0 5px 15px rgba(255, 107, 153, 0.3);
        }

        .btn-primary::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(45deg, #ff6b99, #ff9eb5);
            z-index: -1;
            transition: opacity 0.3s;
            opacity: 0;
        }

        .btn-primary:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 20px rgba(255, 107, 153, 0.4);
        }

        .btn-primary:hover::before {
            opacity: 1;
        }

        .btn-secondary {
            background-color: white;
            color: #ff6b99;
            border: 2px dashed #ffccd5;
        }

        .btn-secondary:hover {
            background-color: #fff9fb;
            border-color: #ff9eb5;
        }

        /* 公告样式 */
        .notice {
            padding: 20px;
            border-radius: 20px;
            background-color: #fff9fb;
            border: 2px solid #ffccd5;
            position: relative;
        }

        .notice-icon {
            position: absolute;
            top: -12px;
            left: 20px;
            background-color: white;
            border: 2px solid #ffccd5;
            border-radius: 50%;
            width: 30px;
            height: 30px;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 16px;
        }

        .notice-content {
            color: #ff9eb5;
            font-size: 13px;
            line-height: 1.6;
        }

        /* 页脚版本信息 */
        .footer {
            text-align: center;
            margin-top: 20px;
            font-size: 12px;
            color: #ffccd5;

第 301-400 行（共100行）

        }

        /* 页脚装饰 */
        .footer-decoration {
            display: flex;
            justify-content: center;
            gap: 5px;
            margin-top: 5px;
        }

        .dot {
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background-color: #ffccd5;
        }

        .dot:nth-child(2) {
            background-color: #ff9eb5;
        }

        .dot:nth-child(3) {
            background-color: #ff6b99;
        }
    </style>
</head>
<body>
    <div class="bubble"></div>
    <div class="bubble"></div>
    <div class="bubble"></div>
    <div class="bubble"></div>
    
    <div class="container">
        <div class="cat-ear cat-ear-left"></div>
        <div class="cat-ear cat-ear-right"></div>
        
        <div class="header">
            <h1>萌萌验证</h1>
            <p>请输入您的卡密完成验证哦~</p>
        </div>

        <div class="input-container">
            <div class="input-label">激活码</div>
            <input class="input" id="code" placeholder="请输入卡密..." type="text" pattern="^[a-zA-Z0-9_-]{1,16}$">
        </div>

        <div class="button-group">
            <button class="btn btn-primary" onclick="Call_Verify(code.value)">
                立即验证
            </button>
            
            <button class="btn btn-secondary" onclick="Call_Query_Trial(code.value)">
                查询状态
            </button>
        </div>

        <div class="notice">
            <div class="notice-icon"></div>
            <div class="notice-content" id="notice">
                欢迎使用萌萌验证系统，请输入有效的卡密进行验证。验证成功后可享受全部功能，如有问题请联系客服~
            </div>
        </div>
        
        <div class="footer">
            Kawaii UI • v2.0
            <div class="footer-decoration">
                <div class="dot"></div>
                <div class="dot"></div>
                <div class="dot"></div>
            </div>
        </div>
    </div>

    <script>
        function Call_Verify(text) {
            try {
                if (typeof RuoLv !== 'undefined' && RuoLv.onButtonClick) {
                    RuoLv.onButtonClick(0, text);
                }
            } catch (e) {
                console.error('验证接口调用失败', e);
            }
        }
        
        function Call_Query_Trial(text) {
            try {
                if (typeof RuoLv !== 'undefined' && RuoLv.onButtonClick) {
                    RuoLv.onButtonClick(1, text);
                }
            } catch (e) {
                console.error('查询接口调用失败', e);
            }
        }

        // 初始化公告内容
        document.addEventListener('DOMContentLoaded', function() {
            // 服务端获取公告内容
        });
    </script>
</body>

第 401-401 行（共1行）

</html>

HTML内容

相关应用

用户评论

暂无评论

相关应用