多级整蛊密码，HTML代码在线实时编辑、实时预览

index.html

style.css

index.js

README.md

index.html

            
                1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

            
            <!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="style.css">
      <script src="index.js"></script>
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/font-awesome/6.4.0/css/all.min.css">
</head>
<body>
    <div class="login-box" id="login-container">
        <h2>后台管理系统</h2>
        <div class="input-group">
            <input type="password" id="pwd-input" placeholder="请输入密码">
            <i class="pwd-eye fa-solid fa-eye-slash" id="pwd-eye"></i>
        </div>
        <button id="login-btn">登录</button>
        <div id="tip-text">请输入密码</div>
    </div>
    <div class="success-box" id="success-container" style="display: none;">
        <h1>恭喜你登录成功！</h1>
        <p>即将进入后台管理系统...</p>
    </div>
</body>
</html>

编辑器加载中

style.css

            
                1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96

            
            
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: "Microsoft YaHei", sans-serif;
        }
        body {
            background-color: #f5f7fa;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
        }
        .login-box {
            width: 400px;
            padding: 40px;
            background: #fff;
            border-radius: 8px;
            box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
        }
        .login-box h2 {
            text-align: center;
            margin-bottom: 30px;
            color: #333;
            font-size: 24px;
        }
        .input-group {
            position: relative;
            margin-bottom: 20px;
        }
        #pwd-input {
            width: 100%;
            height: 48px;
            padding: 0 45px 0 15px;
            border: 1px solid #e6e6e6;
            border-radius: 4px;
            font-size: 16px;
            outline: none;
        }
        #pwd-input:focus {
            border-color: #409eff;
        }
        .pwd-eye {
            position: absolute;
            right: 15px;
            top: 50%;
            transform: translateY(-50%);
            width: 20px;
            height: 20px;
            cursor: pointer;
            color: #999;
            font-size: 20px;
            user-select: none; 
        }
        .pwd-eye:hover {
            color: #409eff;
        }
        #login-btn {
            width: 100%;
            height: 48px;
            background: #409eff;
            color: #fff;
            border: none;
            border-radius: 4px;
            font-size: 16px;
            cursor: pointer;
            transition: background 0.3s;
        }
        #login-btn:hover {
            background: #337ecc;
        }
        #tip-text {
            text-align: center;
            margin-top: 15px;
            font-size: 14px;
            color: #333;
        }
        .red-tip {
            color: #f56c6c !important;
        }
        .blue-tip {
            color: #409eff !important;
        }
        .success-box {
            text-align: center;
            padding: 50px 0;
        }
        .success-box h1 {
            color: #67c23a;
            margin-bottom: 20px;
        }
        .success-box p {
            color: #666;
            font-size: 16px;
        }

编辑器加载中

index.js

            
                1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61

            
            
        const pwdInput = document.getElementById('pwd-input');
        const loginBtn = document.getElementById('login-btn');
        const tipText = document.getElementById('tip-text');
        const loginContainer = document.getElementById('login-container');
        const successContainer = document.getElementById('success-container');
        const pwdEye = document.getElementById('pwd-eye'); 
        let isPwdVisible = false;
        
        const passwordLevels = [
            { pwd: '密码', tip: '密码不正确', class: 'red-tip' },   
            { pwd: '不正确', tip: '请尝试重新输入', class: 'red-tip' },
            { pwd: '重新输入', tip: '请尝试稍后输入密码', class: 'red-tip' },
            { pwd: '稍后输入密码', tip: '密码已锁定', class: 'blue-tip' },
            { pwd: '已锁定', tip: '', class: '' }
        ];
        let currentLevel = 0; 

        loginBtn.addEventListener('click', verifyPwd);
        pwdInput.addEventListener('keydown', (e) => {
            if (e.key === 'Enter') verifyPwd();
        });
        pwdEye.addEventListener('click', togglePwdVisible);

        function togglePwdVisible() {
            isPwdVisible = !isPwdVisible;
            pwdInput.type = isPwdVisible ? 'text' : 'password';
            pwdEye.classList.toggle('fa-eye-slash');
            pwdEye.classList.toggle('fa-eye');
            pwdInput.focus();
        }

        function verifyPwd() {
            const inputVal = pwdInput.value.trim();
            if (!inputVal) return;

            if (inputVal === passwordLevels[currentLevel].pwd) {
                if (currentLevel === passwordLevels.length - 1) {
                    loginSuccess(); 
                } else {
                    updateTip(
                        passwordLevels[currentLevel].tip,
                        passwordLevels[currentLevel].class
                    );
                    currentLevel++; 
                }
            }
            pwdInput.value = '';
            pwdInput.focus();
        }

        function updateTip(text, className) {
            tipText.innerText = text;
            tipText.classList.remove('red-tip', 'blue-tip');
            tipText.classList.add(className);
        }

        function loginSuccess() {
            loginContainer.style.display = 'none';
            successContainer.style.display = 'block';
        }

编辑器加载中

README.md

            
                1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

            
            # HTML/JS/CSS 项目模板

笔COOL提供的基础HTML项目，样式、脚本分离到单独的文件

## 用途

- 想要简单练习 HTML
- 快速预览AI生成的 HTML 
- 展示自己的 HTML 作品

## 文件

- **index.html**： 网页入口文件（笔COOL目前会编译并运行 index.html 以及它所引用的文件）
- **sytle.css**： 样式文件
- **index.js**： 脚本文件

你可以自行添加更多的文件

## 内容
项目介绍
- 通过 `<link rel="stylesheet" href="./style.css">` 引入样式文件
- 通过 `<script src="./index.js"></script>` 引入脚本文件
- 页面显示标题 "Hello 笔.COOL"，副标题 "一笔一划，绘就人生；一码一境，酷创未来。"，一个 HTML 图标
- 控制台输出 `["Hello 笔.COOL 控制台"]`，用于展示控制台能力

## 模板使用

- 首页点击 **创建项目**，选择 **新建 HTML/JS/CSS 项目** 即可使用该模板

- 或访问 https://bi.cool/project 即可快速进入此模版

编辑器加载中

预览

控制台