<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>用户登录</title>
<script src="https://cdn.tailwindcss.com"></script> //引入外部资源
<link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
<script>
#Tailwind CSS配置
tailwind.config = {
theme: {
extend: {
colors: {
primary: '#165DFF',
secondary: '#4080FF',
neutral: '#F5F7FA',
dark: '#1D2129',
},
fontFamily: {
inter: ['Inter', 'system-ui', 'sans-serif'],
},
},
}
}
</script>
<style type="text/tailwindcss">
#自定义CSS工具类
@layer utilities {
.content-auto {
content-visibility: auto;
}
.card-shadow { //卡片阴影效果
box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.1);
}
.input-focus { //输入框获得焦点时的样式
@apply focus:border-primary focus:ring-2 focus:ring-primary/20 focus:outline-none;
}
.btn-hover { //按钮悬停动画效果（轻微上浮+阴影加深）
@apply hover:shadow-lg hover:-translate-y-0.5 transition-all duration-300;
}
}
</style>
</head>
<body class="font-inter bg-gradient-to-br from-neutral to-gray-100 min-h-screen flex items-center justify-center p-4">
// min-h-screen : 确保页面至少占满整个屏幕高度
// flex items-center justify-center : 使用Flex布局将登录卡片居中
//max-w-md : 限制卡片最大宽度，在大屏幕上不会太宽
//rounded-2xl : 卡片圆角设计，现代感更强
<div class="w-full max-w-md">
<div class="bg-white rounded-2xl p-8 card-shadow transform transition-all duration-500 hover:shadow-xl">
<div class="text-center mb-8">
<h1 class="text-[clamp(1.5rem,3vw,2rem)] font-bold text-dark mb-2">欢迎回来</h1>
<p class="text-gray-500">请登录您的账号</p>
</div>
<form id="loginForm" class="space-y-6">
<div class="space-y-2">
<label for="username" class="block text-sm font-medium text-gray-700">账号</label>
<div class="relative">
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none text-gray-400">
<i class="fa fa-user"></i>
</div>
<input type="text" id="username" name="username" required
class="w-full pl-10 pr-4 py-3 border border-gray-300 rounded-lg input-focus"
placeholder="请输入账号"> //required : HTML5表单验证，确保用户必须填写
</div>
</div>
<div class="space-y-2">
<label for="password" class="block text-sm font-medium text-gray-700">密码</label>
<div class="relative">
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none text-gray-400">
<i class="fa fa-lock"></i>
</div>
<input type="password" id="password" name="password" required
class="w-full pl-10 pr-10 py-3 border border-gray-300 rounded-lg input-focus"
placeholder="请输入密码">
<button type="button" id="togglePassword" class="absolute inset-y-0 right-0 pr-3 flex items-center text-gray-400 hover:text-primary">
<i class="fa fa-eye-slash"></i>
</button>
</div>
</div>
<div class="flex items-center justify-between">
<div class="flex items-center">
<input id="remember-me" name="remember-me" type="checkbox"
class="h-4 w-4 rounded border-gray-300 text-primary focus:ring-primary">
<label for="remember-me" class="ml-2 block text-sm text-gray-700">
记住我
</label>
</div>
<div class="text-sm">
<a href="#" class="font-medium text-primary hover:text-secondary">
忘记密码?
</a>
</div>
</div>
<div>
<button type="submit"
class="w-full flex justify-center py-3 px-4 border border-transparent rounded-lg shadow-sm text-sm font-medium text-white bg-primary hover:bg-primary/90 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary btn-hover">
登录
</button>
</div>
</form>
<div class="mt-6 text-center text-sm text-gray-600">
还没有账号? <a href="#" class="font-medium text-primary hover:text-secondary">立即注册</a>
</div>
</div>
</div>
<script>
const togglePassword = document.getElementById('togglePassword');
const passwordInput = document.getElementById('password');
togglePassword.addEventListener('click', function() {
const type = passwordInput.getAttribute('type') === 'password' ? 'text' : 'password';
passwordInput.setAttribute('type', type);
this.querySelector('i').classList.toggle('fa-eye');
this.querySelector('i').classList.toggle('fa-eye-slash');
});
const loginForm = document.getElementById('loginForm');
loginForm.addEventListener('submit', function(e) {
e.preventDefault();
const username = document.getElementById('username').value;
const password = document.getElementById('password').value;
alert(`账号: ${username}\n密码: ${password}\n\n登录功能已触发，实际应用中会发送请求到服务器`);
});
</script>
</body>
</html>
: 声明文档类型为HTML5 : HTML根元素， lang="zh-CN" 表示页面使用中文 : 包含页面元数据（如字符集、标题）和外部资源 : 包含用户可见的页面内容