<!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="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> <style> * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif; } body { background: linear-gradient(135deg, #0c0c0c 0%, #1a1a1a 100%); color: #ffffff; min-height: 100vh; display: flex; justify-content: center; align-items: center; overflow: hidden; } .login-container { width: 100%; max-width: 420px; background: rgba(15, 15, 15, 0.85); border-radius: 16px; padding: 40px 35px; box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5); position: relative; z-index: 10; backdrop-filter: blur(10px); border: 1px solid rgba(151, 0, 0, 0.3); transition: transform 0.3s ease, box-shadow 0.3s ease; } .login-container:hover { transform: translateY(-5px); box-shadow: 0 20px 40px rgba(151, 0, 0, 0.2); } .logo-section { text-align: center; margin-bottom: 40px; position: relative; } .logo { font-size: 3.8rem; font-weight: 700; color: #ffffff; text-shadow: 0 0 20px rgba(151, 0, 0, 0.7); letter-spacing: 3px; margin-bottom: 10px; position: relative; display: inline-block; } .logo::after { content: ''; position: absolute; bottom: -10px; left: 50%; transform: translateX(-50%); width: 100px; height: 3px; background: linear-gradient(90deg, transparent, #970000, transparent); border-radius: 2px; } .slogan { font-size: 1.1rem; color: #cccccc; letter-spacing: 2px; margin-top: 15px; } .form-group { margin-bottom: 25px; position: relative; } .form-label { display: block; margin-bottom: 8px; font-size: 0.95rem; color: #aaaaaa; letter-spacing: 1px; } .input-with-icon { position: relative; } .form-input { width: 100%; padding: 14px 45px 14px 15px; background: rgba(30, 30, 30, 0.7); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 8px; color: #ffffff; font-size: 1rem; transition: all 0.3s ease; } .form-input:focus { outline: none; border-color: #970000; box-shadow: 0 0 0 2px rgba(151, 0, 0, 0.3); } .input-icon { position: absolute; right: 15px; top: 50%; transform: translateY(-50%); color: #970000; font-size: 1.1rem; } .remember-forgot { display: flex; justify-content: space-between; align-items: center; margin-bottom: 30px; font-size: 0.9rem; } .remember-me { display: flex; align-items: center; } .remember-me input { margin-right: 8px; accent-color: #970000; } .forgot-password { color: #970000; text-decoration: none; transition: color 0.2s ease; } .forgot-password:hover { color: #ffffff; text-decoration: underline; } .login-btn { width: 100%; padding: 14px; background: linear-gradient(135deg, #970000 0%, #7a0000 100%); border: none; border-radius: 8px; color: #ffffff; font-size: 1.1rem; font-weight: 600; cursor: pointer; transition: all 0.3s ease; letter-spacing: 1px; box-shadow: 0 5px 15px rgba(151, 0, 0, 0.3); } .login-btn:hover { background: linear-gradient(135deg, #a80000 0%, #8a0000 100%); transform: translateY(-2px); box-shadow: 0 8px 20px rgba(151, 0, 0, 0.4); } .login-btn:active { transform: translateY(0); } .register-link { text-align: center; font-size: 0.95rem; color: #aaaaaa; margin-top: 25px; } .register-link a { color: #970000; text-decoration: none; margin-left: 5px; transition: color 0.2s ease; } .register-link a:hover { color: #ffffff; text-decoration: underline; } .particles-container { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; } .floating-elements { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; } .floating-element { position: absolute; width: 4px; height: 4px; background: rgba(151, 0, 0, 0.6); border-radius: 50%; box-shadow: 0 0 10px 2px rgba(151, 0, 0, 0.5); animation: float 15s infinite linear; } @keyframes float { 0% { transform: translateY(0) translateX(0); opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { transform: translateY(-100vh) translateX(100px); opacity: 0; } } .error-message { background: rgba(151, 0, 0, 0.2); border: 1px solid rgba(151, 0, 0, 0.5); border-radius: 8px; padding: 12px 15px; margin-bottom: 20px; display: none; align-items: center; animation: fadeIn 0.3s ease; } .error-message i { color: #970000; margin-right: 10px; font-size: 1.2rem; } @keyframes fadeIn { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } } @keyframes shake { 0%, 100% { transform: translateX(0); } 10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); } 20%, 40%, 60%, 80% { transform: translateX(5px); } } .shake { animation: shake 0.5s ease; } @media (max-width: 480px) { .login-container { padding: 30px 20px; margin: 20px; } .logo { font-size: 3rem; } } </style></head><body> <div class="particles-container" id="particles-container"></div> <div class="floating-elements" id="floating-elements"></div> <div class="login-container"> <div class="logo-section"> <h1 class="logo">造作云</h1> <p class="slogan">创新科技 · 智造未来</p> </div> <form id="login-form"> <div class="error-message" id="error-message"> <i class="fas fa-exclamation-circle"></i> <span>请输入正确的用户账号</span> </div> <div class="form-group"> <label class="form-label">用户名 / 邮箱</label> <div class="input-with-icon"> <input type="text" class="form-input" id="username" placeholder="请输入用户名或邮箱" required> <div class="input-icon"> <i class="fas fa-user"></i> </div> </div> </div> <div class="form-group"> <label class="form-label">密码</label> <div class="input-with-icon"> <input type="password" class="form-input" id="password" placeholder="请输入密码" required> <div class="input-icon"> <i class="fas fa-lock"></i> </div> </div> </div> <div class="remember-forgot"> <label class="remember-me"> <input type="checkbox" checked> 记住我 </label> <a href="#" class="forgot-password">忘记密码?</a> </div> <button type="submit" class="login-btn">登录</button> <div class="register-link"> 还没有账户? <a href="#">立即注册</a> </div> </form> </div> <script> // 创建粒子背景 function createParticles() { const container = document.getElementById('particles-container'); const particleCount = 100; for (let i = 0; i < particleCount; i++) { const particle = document.createElement('div'); particle.classList.add('particle'); // 随机位置 const posX = Math.random() * 100; const posY = Math.random() * 100; particle.style.left = `${posX}%`; particle.style.top = `${posY}%`; // 随机大小 const size = Math.random() * 3 + 1; particle.style.width = `${size}px`; particle.style.height = `${size}px`; // 随机透明度 particle.style.opacity = Math.random() * 0.5 + 0.1; container.appendChild(particle); // 动画粒子 animateParticle(particle); } } function animateParticle(particle) { let posX = parseFloat(particle.style.left); let posY = parseFloat(particle.style.top); let speedX = (Math.random() - 0.5) * 0.2; let speedY = (Math.random() - 0.5) * 0.2; function move() { posX += speedX; posY += speedY; // 边界反弹 if (posX <= 0 || posX >= 100) speedX *= -1; if (posY <= 0 || posY >= 100) speedY *= -1; particle.style.left = `${posX}%`; particle.style.top = `${posY}%`; requestAnimationFrame(move); } move(); } // 创建浮动元素 function createFloatingElements() { const container = document.getElementById('floating-elements'); const elementCount = 20; for (let i = 0; i < elementCount; i++) { const element = document.createElement('div'); element.classList.add('floating-element'); // 随机位置 const posX = Math.random() * 100; element.style.left = `${posX}%`; // 随机大小 const size = Math.random() * 3 + 1; element.style.width = `${size}px`; element.style.height = `${size}px`; // 随机动画延迟 const delay = Math.random() * 15; element.style.animationDelay = `${delay}s`; container.appendChild(element); } } // 表单提交处理 document.getElementById('login-form').addEventListener('submit', function(e) { e.preventDefault(); const username = document.getElementById('username').value; const password = document.getElementById('password').value; const errorMessage = document.getElementById('error-message'); // 简单的验证逻辑 if (username === '' || password === '') { errorMessage.querySelector('span').textContent = '请输入用户名和密码'; errorMessage.style.display = 'flex'; document.getElementById('login-form').classList.add('shake'); setTimeout(() => { document.getElementById('login-form').classList.remove('shake'); }, 500); } else { // 模拟登录验证 // 这里假设正确的用户名是"admin"，密码是"123456" if (username !== 'admin' || password !== '123456') { errorMessage.querySelector('span').textContent = '请输入正确的用户账号'; errorMessage.style.display = 'flex'; document.getElementById('login-form').classList.add('shake'); setTimeout(() => { document.getElementById('login-form').classList.remove('shake'); }, 500); } else { // 登录成功 errorMessage.style.display = 'none'; alert('登录成功！'); // 这里可以添加页面跳转或其他操作 } } }); // 输入框焦点效果 const inputs = document.querySelectorAll('.form-input'); inputs.forEach(input => { input.addEventListener('focus', function() { this.parentElement.style.transform = 'scale(1.02)'; }); input.addEventListener('blur', function() { this.parentElement.style.transform = 'scale(1)'; }); // 输入时隐藏错误消息 input.addEventListener('input', function() { document.getElementById('error-message').style.display = 'none'; }); }); // 初始化 document.addEventListener('DOMContentLoaded', () => { createParticles(); createFloatingElements(); }); </script></body></html>
