公司网站是否有必要销售产品网站开发类合同范本
设计思路
使用卡片式布局，背景采用渐变设计
包含用户名/邮箱和密码输入框
添加"记住我"和"忘记密码"功能
实现表单验证和错误提示
添加社交媒体登录选项
确保移动设备友好
代码如下：
<!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.0.0/css/all.min.css"><style>:root {--primary-color: #764ba2;--secondary-color: #667eea;--text-color: #333;--bg-color: #f9f9f9;--card-bg: rgba(255, 255, 255, 0.95);--input-bg: #fff;--border-color: #ddd;--error-color: #e74c3c;--success-color: #2ecc71;--shadow: 0 10px 30px rgba(0, 0, 0, 0.1);--transition: all 0.3s ease;}.dark-theme {--primary-color: #8c64c6;--secondary-color: #7a93ce;--text-color: #f0f0f0;--bg-color: #1a1a2e;--card-bg: rgba(26, 26, 46, 0.95);--input-bg: #2d2d44;--border-color: #444;--error-color: #ff6b6b;--success-color: #1dd1a1;--shadow: 0 10px 30px rgba(0, 0, 0, 0.3);}* {margin: 0;padding: 0;box-sizing: border-box;transition: var(--transition);}body {display: flex;justify-content: center;align-items: center;min-height: 100vh;background: linear-gradient(135deg, var(--secondary-color), var(--primary-color));padding: 20px;color: var(--text-color);background-attachment: fixed;}.container {width: 100%;max-width: 420px;padding: 20px;}.login-card {background: var(--card-bg);border-radius: 16px;box-shadow: var(--shadow);overflow: hidden;padding: 35px 30px;backdrop-filter: blur(10px);border: 1px solid rgba(255, 255, 255, 0.1);}.header {display: flex;justify-content: space-between;align-items: center;margin-bottom: 25px;}.logo {display: flex;align-items: center;gap: 10px;}.logo i {font-size: 32px;color: var(--primary-color);}.logo h2 {color: var(--text-color);font-weight: 600;}.theme-toggle {background: var(--input-bg);border: 1px solid var(--border-color);width: 45px;height: 25px;border-radius: 20px;position: relative;cursor: pointer;display: flex;align-items: center;padding: 0 3px;}.theme-toggle i {font-size: 12px;color: var(--primary-color);}.toggle-thumb {position: absolute;width: 19px;height: 19px;border-radius: 50%;background: var(--primary-color);left: 3px;transition: var(--transition);}.dark .toggle-thumb {left: 23px;}.input-group {margin-bottom: 20px;position: relative;}.input-group i {position: absolute;left: 15px;top: 50%;transform: translateY(-50%);color: var(--primary-color);z-index: 1;}.input-group input {width: 100%;padding: 14px 15px 14px 45px;border: 1px solid var(--border-color);border-radius: 10px;font-size: 16px;background: var(--input-bg);color: var(--text-color);position: relative;z-index: 0;}.input-group input:focus {border-color: var(--primary-color);box-shadow: 0 0 0 3px rgba(118, 75, 162, 0.2);outline: none;}.password-toggle {position: absolute;right: 15px;top: 50%;transform: translateY(-50%);color: var(--text-color);opacity: 0.6;cursor: pointer;z-index: 2;}.password-toggle:hover {opacity: 1;}.options {display: flex;justify-content: space-between;align-items: center;margin-bottom: 25px;font-size: 14px;}.remember-me {display: flex;align-items: center;gap: 8px;cursor: pointer;}.remember-me input {display: none;}.checkmark {width: 18px;height: 18px;border: 1px solid var(--border-color);border-radius: 4px;display: inline-flex;align-items: center;justify-content: center;background: var(--input-bg);}.remember-me input:checked + .checkmark {background: var(--primary-color);border-color: var(--primary-color);}.remember-me input:checked + .checkmark::after {content: "✓";color: white;font-size: 12px;}.forgot-password {color: var(--primary-color);text-decoration: none;font-weight: 500;}.forgot-password:hover {text-decoration: underline;}.login-btn {width: 100%;padding: 14px;background: linear-gradient(135deg, var(--secondary-color), var(--primary-color));border: none;border-radius: 10px;color: white;font-size: 16px;font-weight: 600;cursor: pointer;position: relative;overflow: hidden;}.login-btn:hover {transform: translateY(-2px);box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);}.login-btn:active {transform: translateY(0);}.btn-text {transition: opacity 0.3s;}.loading {display: inline-block;width: 20px;height: 20px;border: 3px solid rgba(255,255,255,.3);border-radius: 50%;border-top-color: #fff;animation: spin 1s ease-in-out infinite;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);opacity: 0;}.separator {text-align: center;margin: 30px 0;position: relative;color: var(--text-color);opacity: 0.7;}.separator::before {content: "";position: absolute;left: 0;top: 50%;width: 42%;height: 1px;background: var(--border-color);}.separator::after {content: "";position: absolute;right: 0;top: 50%;width: 42%;height: 1px;background: var(--border-color);}.social-login {display: flex;justify-content: center;gap: 15px;margin-bottom: 25px;}.social-btn {width: 50px;height: 50px;border-radius: 50%;display: flex;justify-content: center;align-items: center;color: white;font-size: 18px;cursor: pointer;transition: var(--transition);background: var(--input-bg);border: 1px solid var(--border-color);color: var(--text-color);}.social-btn:hover {transform: translateY(-3px);box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);}.facebook:hover {background: #3b5999;color: white;}.google:hover {background: #dd4b39;color: white;}.twitter:hover {background: #55acee;color: white;}.signup-link {text-align: center;margin-top: 20px;font-size: 14px;color: var(--text-color);}.signup-link a {color: var(--primary-color);text-decoration: none;font-weight: 500;}.signup-link a:hover {text-decoration: underline;}.error-message {color: var(--error-color);font-size: 13px;margin-top: 5px;display: none;padding-left: 10px;}.success-message {background: var(--success-color);color: white;padding: 12px;border-radius: 8px;text-align: center;margin-bottom: 20px;display: none;}.input-group.error input {border-color: var(--error-color);box-shadow: 0 0 0 3px rgba(231, 76, 60, 0.2);}.input-group.success input {border-color: var(--success-color);box-shadow: 0 0 0 3px rgba(46, 204, 113, 0.2);}@keyframes spin {to { transform: translate(-50%, -50%) rotate(360deg); }}@keyframes shake {0%, 100% { transform: translateX(0); }15%, 45%, 75% { transform: translateX(-10px); }30%, 60%, 90% { transform: translateX(10px); }}.shake {animation: shake 0.6s ease;}@media (max-width: 480px) {.container {padding: 10px;}.login-card {padding: 25px 20px;}.options {flex-direction: column;align-items: flex-start;gap: 12px;}.social-login {gap: 10px;}.social-btn {width: 45px;height: 45px;}}</style>
</head>
<body><div class="container"><div class="login-card"><div class="header"><div class="logo"><i class="fas fa-lock"></i><h2>账号登录</h2></div><div class="theme-toggle"><i class="fas fa-sun"></i><div class="toggle-thumb"></div></div></div><div class="success-message" id="successMessage"><i class="fas fa-check-circle"></i> 登录成功！</div><form id="loginForm"><div class="input-group" id="usernameGroup"><i class="fas fa-user"></i><input type="text" id="username" placeholder="用户名或邮箱" required><div class="error-message" id="usernameError">请输入有效的用户名或邮箱</div></div><div class="input-group" id="passwordGroup"><i class="fas fa-key"></i><input type="password" id="password" placeholder="密码" required><span class="password-toggle" id="passwordToggle"><i class="far fa-eye"></i></span><div class="error-message" id="passwordError">密码必须至少包含6个字符</div></div><div class="options"><label class="remember-me"><input type="checkbox" id="remember"><span class="checkmark"></span><span>记住我</span></label><a href="#" class="forgot-password">忘记密码?</a></div><button type="submit" class="login-btn" id="loginButton"><span class="btn-text">登录</span><span class="loading" id="loadingAnimation"></span></button></form><div class="separator"><span>或使用社交账号登录</span></div><div class="social-login"><div class="social-btn facebook"><i class="fab fa-facebook-f"></i></div><div class="social-btn google"><i class="fab fa-google"></i></div><div class="social-btn twitter"><i class="fab fa-twitter"></i></div></div><div class="signup-link">还没有账号? <a href="#">立即注册</a></div></div></div><script>document.addEventListener('DOMContentLoaded', function() {const loginForm = document.getElementById('loginForm');const usernameInput = document.getElementById('username');const passwordInput = document.getElementById('password');const usernameError = document.getElementById('usernameError');const passwordError = document.getElementById('passwordError');const usernameGroup = document.getElementById('usernameGroup');const passwordGroup = document.getElementById('passwordGroup');const passwordToggle = document.getElementById('passwordToggle');const loginButton = document.getElementById('loginButton');const loadingAnimation = document.getElementById('loadingAnimation');const btnText = document.querySelector('.btn-text');const successMessage = document.getElementById('successMessage');const themeToggle = document.querySelector('.theme-toggle');// 主题切换功能themeToggle.addEventListener('click', function() {document.body.classList.toggle('dark-theme');themeToggle.classList.toggle('dark');// 更新图标const icon = themeToggle.querySelector('i');if (document.body.classList.contains('dark-theme')) {icon.className = 'fas fa-moon';} else {icon.className = 'fas fa-sun';}});// 密码可见性切换passwordToggle.addEventListener('click', function() {const type = passwordInput.getAttribute('type') === 'password' ? 'text' : 'password';passwordInput.setAttribute('type', type);// 切换图标const icon = passwordToggle.querySelector('i');icon.className = type === 'password' ? 'far fa-eye' : 'far fa-eye-slash';});// 表单提交验证loginForm.addEventListener('submit', function(e) {e.preventDefault();let isValid = true;// 验证用户名if (usernameInput.value.trim() === '') {showError(usernameGroup, usernameError, '请输入用户名或邮箱');isValid = false;} else {clearError(usernameGroup, usernameError);}// 验证密码if (passwordInput.value.length < 6) {showError(passwordGroup, passwordError, '密码必须至少包含6个字符');isValid = false;} else {clearError(passwordGroup, passwordError);}// 如果验证通过，模拟登录过程if (isValid) {// 显示加载动画btnText.style.opacity = '0';loadingAnimation.style.opacity = '1';loginButton.disabled = true;// 模拟网络请求setTimeout(function() {// 隐藏加载动画btnText.style.opacity = '1';loadingAnimation.style.opacity = '0';loginButton.disabled = false;// 显示成功消息successMessage.style.display = 'block';// 标记输入框为成功状态usernameGroup.classList.add('success');passwordGroup.classList.add('success');// 3秒后隐藏成功消息setTimeout(function() {successMessage.style.display = 'none';}, 3000);// 在实际应用中，这里会进行页面跳转}, 1500);} else {// 添加抖动效果if (!usernameInput.value.trim()) {usernameGroup.classList.add('shake');setTimeout(() => usernameGroup.classList.remove('shake'), 600);}if (passwordInput.value.length < 6) {passwordGroup.classList.add('shake');setTimeout(() => passwordGroup.classList.remove('shake'), 600);}}});// 实时验证usernameInput.addEventListener('input', function() {if (usernameInput.value.trim() !== '') {clearError(usernameGroup, usernameError);}});passwordInput.addEventListener('input', function() {if (passwordInput.value.length >= 6) {clearError(passwordGroup, passwordError);}});// 显示错误函数function showError(inputGroup, errorElement, message) {errorElement.textContent = message;errorElement.style.display = 'block';inputGroup.classList.add('error');inputGroup.classList.remove('success');}// 清除错误函数function clearError(inputGroup, errorElement) {errorElement.style.display = 'none';inputGroup.classList.remove('error');}// 添加社交按钮点击效果const socialButtons = document.querySelectorAll('.social-btn');socialButtons.forEach(button => {button.addEventListener('click', function() {this.style.transform = 'scale(0.95)';setTimeout(() => {this.style.transform = '';alert('此功能尚未实现');}, 150);});});});</script>
</body>
</html>