前端网络安全

最新推荐文章于 2025-07-24 16:48:04 发布

遗悲风

最新推荐文章于 2025-07-24 16:48:04 发布

阅读量213

点赞数 1

CC 4.0 BY-SA版权

文章标签：前端 web安全安全

本文链接：https://blog.csdn.net/s20231129/article/details/149570629

1.代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <!-- 确保页面在各种设备上正确缩放 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>机器登录</title>
    <!-- 引入Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- 引入Font Awesome图标库 -->
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    
    <!-- 配置Tailwind自定义主题 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    // 定义主色调，适合机器/工业系统的蓝色
                    colors: {
                        primary: '#1E40AF',
                        secondary: '#3B82F6',
                    },
                }
            }
        }
    </script>
    
    <!-- 自定义工具类 -->
    <style type="text/tailwindcss">
        @layer utilities {
            /* 输入框聚焦效果 */
            .input-focus {
                @apply focus:border-primary focus:ring-2 focus:ring-primary/20 focus:outline-none;
            }
            /* 按钮悬停动画 */
            .btn-effect {
                @apply transition-all duration-300 hover:shadow-lg hover:-translate-y-0.5;
            }
        }
    </style>
</head>
<body class="bg-gray-100 min-h-screen flex items-center justify-center p-4">
    <!-- 登录卡片容器 -->
    <div class="w-full max-w-md">
        <!-- 登录卡片 -->
        <div class="bg-white rounded-xl shadow-md overflow-hidden">
            <!-- 卡片头部 -->
            <div class="bg-primary p-6 text-white">
                <div class="flex items-center justify-center">
                    <!-- 机器图标 -->
                    <i class="fa fa-microchip text-3xl mr-3"></i>
                    <!-- 标题 -->
                    <h1 class="text-2xl font-bold">机器登录系统</h1>
                </div>
            </div>
            
            <!-- 卡片主体 - 登录表单 -->
            <div class="p-6">
                <form id="loginForm" class="space-y-4">
                    <!-- 设备ID输入 -->
                    <div>
                        <label for="deviceId" class="block text-sm font-medium text-gray-700 mb-1">
                            设备ID
                        </label>
                        <div class="relative">
                            <!-- 图标 -->
                            <div class="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400">
                                <i class="fa fa-id-card"></i>
                            </div>
                            <!-- 输入框 -->
                            <input 
                                type="text" 
                                id="deviceId" 
                                required
                                placeholder="请输入设备唯一ID"
                                class="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-lg input-focus"
                            >
                        </div>
                    </div>
                    
                    <!-- 访问密钥输入 -->
                    <div>
                        <label for="accessKey" class="block text-sm font-medium text-gray-700 mb-1">
                            访问密钥
                        </label>
                        <div class="relative">
                            <!-- 图标 -->
                            <div class="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400">
                                <i class="fa fa-key"></i>
                            </div>
                            <!-- 输入框 -->
                            <input 
                                type="password" 
                                id="accessKey" 
                                required
                                placeholder="请输入访问密钥"
                                class="w-full pl-10 pr-10 py-2 border border-gray-300 rounded-lg input-focus"
                            >
                            <!-- 显示/隐藏密码按钮 -->
                            <button 
                                type="button" 
                                id="toggleKey" 
                                class="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 hover:text-gray-600"
                            >
                                <i class="fa fa-eye-slash"></i>
                            </button>
                        </div>
                    </div>
                    
                    <!-- 验证码 -->
                    <div>
                        <label for="captcha" class="block text-sm font-medium text-gray-700 mb-1">
                            验证码
                        </label>
                        <div class="flex gap-2">
                            <div class="relative flex-1">
                                <!-- 图标 -->
                                <div class="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400">
                                    <i class="fa fa-shield"></i>
                                </div>
                                <!-- 输入框 -->
                                <input 
                                    type="text" 
                                    id="captcha" 
                                    required
                                    placeholder="输入验证码"
                                    class="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-lg input-focus"
                                >
                            </div>
                            <!-- 验证码图片 -->
                            <div 
                                id="captchaImg" 
                                class="w-24 h-10 bg-gray-100 rounded-lg flex items-center justify-center text-gray-700 font-bold cursor-pointer select-none"
                            >
                                8A3Z
                            </div>
                        </div>
                    </div>
                    
                    <!-- 登录按钮 -->
                    <button 
                        type="submit" 
                        class="w-full bg-primary text-white py-2 px-4 rounded-lg font-medium btn-effect"
                    >
                        登录设备
                    </button>
                </form>
                
                <!-- 辅助链接 -->
                <div class="mt-6 text-center text-sm">
                    <a href="#" class="text-secondary hover:underline mr-4">设备注册</a>
                    <a href="#" class="text-secondary hover:underline">忘记密钥</a>
                </div>
            </div>
        </div>
        
        <!-- 页脚信息 -->
        <div class="mt-4 text-center text-gray-500 text-xs">
            &copy; 2023 工业设备管理系统 - 版本 1.0.0
        </div>
    </div>

    <script>
        // 显示/隐藏访问密钥功能
        const toggleKey = document.getElementById('toggleKey');
        const accessKey = document.getElementById('accessKey');
        
        toggleKey.addEventListener('click', () => {
            // 切换输入框类型
            const type = accessKey.getAttribute('type') === 'password' ? 'text' : 'password';
            accessKey.setAttribute('type', type);
            
            // 切换图标
            const icon = toggleKey.querySelector('i');
            icon.classList.toggle('fa-eye');
            icon.classList.toggle('fa-eye-slash');
        });
        
        // 刷新验证码功能
        const captchaImg = document.getElementById('captchaImg');
        
        // 生成随机验证码
        function generateCaptcha() {
            const chars = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ';
            let captcha = '';
            for (let i = 0; i < 4; i++) {
                captcha += chars.charAt(Math.floor(Math.random() * chars.length));
            }
            return captcha;
        }
        
        // 点击刷新验证码
        captchaImg.addEventListener('click', () => {
            captchaImg.textContent = generateCaptcha();
        });
        
        // 表单提交处理
        const loginForm = document.getElementById('loginForm');
        
        loginForm.addEventListener('submit', (e) => {
            // 阻止表单默认提交行为
            e.preventDefault();
            
            // 获取表单数据
            const deviceId = document.getElementById('deviceId').value;
            const accessKey = document.getElementById('accessKey').value;
            const captcha = document.getElementById('captcha').value;
            
            // 简单验证
            if (!deviceId || !accessKey || !captcha) {
                alert('请填写完整信息');
                return;
            }
            
            // 获取提交按钮并修改状态
            const submitBtn = loginForm.querySelector('button[type="submit"]');
            const originalText = submitBtn.textContent;
            submitBtn.disabled = true;
            submitBtn.innerHTML = '<i class="fa fa-spinner fa-spin mr-1"></i> 登录中...';
            
            // 模拟登录请求延迟
            setTimeout(() => {
                // 这里是模拟登录成功，实际应用中会调用API
                alert(`设备 ${deviceId} 登录成功！`);
                
                // 恢复按钮状态
                submitBtn.disabled = false;
                submitBtn.textContent = originalText;
            }, 1500);
        });
    </script>
</body>
</html>

2.运行界面