267 lines
17 KiB
HTML
267 lines
17 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>%s</title>
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;600;700;900&family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<script>
|
|
tailwind.config = { theme: { extend: { colors: { brand: { green:'#4CAF50', greenDark:'#2E7D32', blue:'#1565C0', blueDark:'#0D47A1', teal:'#00838F', light:'#F0F7FF', dark:'#0A1628' } }, fontFamily: { sans:['Inter','Noto Sans SC','system-ui','sans-serif'] } } } };
|
|
</script>
|
|
<style>
|
|
:root { --primary:#1565C0; --primary-dark:#0D47A1; --accent:#4CAF50; --accent-dark:#2E7D32; }
|
|
* { scroll-behavior:smooth; }
|
|
body { font-family:'Inter','Noto Sans SC',system-ui,sans-serif; overflow-x:hidden; }
|
|
.gradient-text { background:linear-gradient(135deg,#1565C0 0%,#4CAF50 100%); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
|
|
.gradient-bg { background:linear-gradient(135deg,#0A1628 0%,#1565C0 50%,#00838F 100%); }
|
|
.btn-primary { background:linear-gradient(135deg,#1565C0 0%,#0D47A1 100%); transition:all .3s ease; }
|
|
.btn-primary:hover { transform:translateY(-2px); box-shadow:0 10px 30px rgba(21,101,192,.35); }
|
|
.btn-accent { background:linear-gradient(135deg,#4CAF50 0%,#2E7D32 100%); transition:all .3s ease; }
|
|
.btn-accent:hover { transform:translateY(-2px); box-shadow:0 10px 30px rgba(76,175,80,.35); }
|
|
.input-field { transition:all .3s ease; }
|
|
.input-field:focus { border-color:#1565C0; box-shadow:0 0 0 4px rgba(21,101,192,.1); }
|
|
.auth-logo { display:block; filter:brightness(0) saturate(100%) invert(20%) sepia(84%) saturate(1926%) hue-rotate(202deg) brightness(94%) contrast(93%); }
|
|
.lang-switcher { display:flex; align-items:center; background:rgba(21,101,192,.08); border-radius:9999px; padding:3px; border:1px solid rgba(21,101,192,.15); }
|
|
.lang-switcher button { font-size:12px; font-weight:600; padding:4px 9px; border-radius:9999px; color:#0A1628; transition:all .25s ease; white-space:nowrap; }
|
|
.lang-switcher button:hover { color:#1565C0; }
|
|
.lang-switcher button.active { background:#1565C0; color:#fff; }
|
|
</style>
|
|
</head>
|
|
<body class="text-gray-800 antialiased bg-gray-50">
|
|
<!-- 顶部栏 -->
|
|
<header class="fixed top-0 inset-x-0 z-50 bg-white/95 backdrop-blur border-b border-gray-100">
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 h-16 flex items-center justify-between">
|
|
<a href="index.html" class="flex items-center" aria-label="返回官网">
|
|
<img src="assets/logo.png" alt="柏悦物流" class="auth-logo" style="width:161px;height:60px;object-fit:contain;">
|
|
</a>
|
|
<div class="lang-switcher" id="langSwitcher">
|
|
<button data-lang="zh" class="active" title="中文">中</button>
|
|
<button data-lang="en" title="English">EN</button>
|
|
<button data-lang="es" title="Español (México)">🇲🇽</button>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
<section id="loginSection" class="min-h-screen pt-24 pb-12 bg-gray-50 flex items-center">
|
|
<div class="w-full max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div class="bg-white rounded-3xl shadow-2xl overflow-hidden">
|
|
<div class="grid lg:grid-cols-2">
|
|
<!-- 左侧视觉 -->
|
|
<div class="hidden lg:block relative">
|
|
<img src="https://images.unsplash.com/photo-1494412574643-ff11b0a5c1c3?ixlib=rb-4.0.3&auto=format&fit=crop&w=2070&q=80" alt="物流" class="absolute inset-0 w-full h-full object-cover">
|
|
<div class="absolute inset-0 gradient-bg opacity-90"></div>
|
|
<div class="relative z-10 p-12 h-full flex flex-col justify-between text-white">
|
|
<div>
|
|
<img src="assets/logo.png" alt="虫虫出海" style="width:161px;height:60px;object-fit:contain;">
|
|
<h2 class="text-3xl font-bold mb-4" data-i18n="login_welcome">欢迎回来</h2>
|
|
<p class="text-white/80" data-i18n="login_desc">登录虫虫出海平台，实时追踪货物轨迹，管理订单与库存。</p>
|
|
</div>
|
|
<div class="space-y-4">
|
|
<div class="flex items-center space-x-3">
|
|
<i class="fas fa-check-circle text-brand-green"></i>
|
|
<span data-i18n="login_feat1">全程可视化追踪</span>
|
|
</div>
|
|
<div class="flex items-center space-x-3">
|
|
<i class="fas fa-check-circle text-brand-green"></i>
|
|
<span data-i18n="login_feat2">智能订单管理</span>
|
|
</div>
|
|
<div class="flex items-center space-x-3">
|
|
<i class="fas fa-check-circle text-brand-green"></i>
|
|
<span data-i18n="login_feat3">在线询价下单</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 右侧表单 -->
|
|
<div class="p-8 sm:p-12 lg:p-16">
|
|
<div class="max-w-md mx-auto">
|
|
<h2 class="text-3xl font-bold text-gray-900 mb-2" data-i18n="login_title">账号登录</h2>
|
|
<p class="text-gray-600 mb-8"><span data-i18n="login_no_account">还没有账号？</span><button onclick="window.location.href='register.html'" class="text-brand-blue font-semibold hover:underline" data-i18n="login_register_link">立即注册</button></p>
|
|
|
|
<form id="loginForm" class="space-y-5">
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 mb-2" data-i18n="login_account_label">邮箱 / 手机号</label>
|
|
<div class="relative">
|
|
<i class="fas fa-user absolute left-4 top-1/2 -translate-y-1/2 text-gray-400"></i>
|
|
<input type="text" name="account" required placeholder="请输入邮箱或手机号" data-i18n-ph="login_account_ph" class="input-field w-full pl-11 pr-4 py-3.5 border border-gray-200 rounded-xl outline-none">
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 mb-2" data-i18n="login_password_label">密码</label>
|
|
<div class="relative">
|
|
<i class="fas fa-lock absolute left-4 top-1/2 -translate-y-1/2 text-gray-400"></i>
|
|
<input type="password" name="password" required placeholder="请输入密码" data-i18n-ph="login_password_ph" class="input-field w-full pl-11 pr-12 py-3.5 border border-gray-200 rounded-xl outline-none">
|
|
<button type="button" class="toggle-password absolute right-4 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-600">
|
|
<i class="fas fa-eye"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex items-center justify-between text-sm">
|
|
<label class="flex items-center text-gray-600 cursor-pointer">
|
|
<input type="checkbox" class="w-4 h-4 text-brand-blue rounded border-gray-300 mr-2">
|
|
<span data-i18n="login_remember">记住我</span>
|
|
</label>
|
|
<button type="button" onclick="showToast(t('toast_resetpw'))" class="text-brand-blue hover:underline" data-i18n="login_forgot">忘记密码？</button>
|
|
</div>
|
|
|
|
<button type="submit" class="btn-primary w-full text-white font-bold py-4 rounded-xl text-lg" data-i18n="login_submit">
|
|
登 录
|
|
</button>
|
|
</form>
|
|
|
|
<div class="mt-8">
|
|
<div class="relative">
|
|
<div class="absolute inset-0 flex items-center">
|
|
<div class="w-full border-t border-gray-200"></div>
|
|
</div>
|
|
<div class="relative flex justify-center text-sm">
|
|
<span class="px-2 bg-white text-gray-500" data-i18n="login_other">其他方式登录</span>
|
|
</div>
|
|
</div>
|
|
<div class="flex justify-center space-x-4 mt-6">
|
|
<button onclick="showToast('微信登录即将上线')" class="w-12 h-12 rounded-full border border-gray-200 flex items-center justify-center text-green-600 hover:bg-green-50 transition-colors">
|
|
<i class="fab fa-weixin text-xl"></i>
|
|
</button>
|
|
<button onclick="showToast('企业微信登录即将上线')" class="w-12 h-12 rounded-full border border-gray-200 flex items-center justify-center text-blue-600 hover:bg-blue-50 transition-colors">
|
|
<i class="fas fa-briefcase text-xl"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section> <!-- Toast 提示 -->
|
|
<div id="toast" class="fixed top-24 left-1/2 -translate-x-1/2 z-[60] opacity-0 pointer-events-none transition-all duration-300 transform -translate-y-4">
|
|
<div class="bg-gray-900 text-white px-6 py-3 rounded-full shadow-2xl flex items-center space-x-2">
|
|
<i class="fas fa-info-circle text-brand-green"></i>
|
|
<span id="toastMessage">提示信息</span>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
let currentLang = localStorage.getItem('cc_lang') || 'zh';
|
|
function t(key) {
|
|
return (i18n[currentLang] && i18n[currentLang][key] !== undefined) ? i18n[currentLang][key] : key;
|
|
}
|
|
const i18n = {
|
|
zh: {
|
|
login_welcome: "欢迎回来",
|
|
login_desc: "登录虫虫出海平台，实时追踪货物轨迹，管理订单与库存。",
|
|
login_feat1: "全程可视化追踪",
|
|
login_feat2: "智能订单管理",
|
|
login_feat3: "在线询价下单",
|
|
login_title: "账号登录",
|
|
login_no_account: "还没有账号？",
|
|
login_register_link: "立即注册",
|
|
login_account_label: "邮箱 / 手机号",
|
|
login_account_ph: "请输入邮箱或手机号",
|
|
login_password_label: "密码",
|
|
login_password_ph: "请输入密码",
|
|
login_remember: "记住我",
|
|
login_forgot: "忘记密码？",
|
|
login_submit: "登 录",
|
|
login_other: "其他方式登录",
|
|
toast_resetpw: "请联系客服重置密码",
|
|
toast_login_ok: "登录成功！欢迎回来"
|
|
},
|
|
en: {
|
|
login_welcome: "Welcome Back",
|
|
login_desc: "Log in to track shipments in real time and manage orders and inventory.",
|
|
login_feat1: "Full Visual Tracking",
|
|
login_feat2: "Smart Order Management",
|
|
login_feat3: "Online Quoting & Ordering",
|
|
login_title: "Account Login",
|
|
login_no_account: "No account yet?",
|
|
login_register_link: "Sign Up Now",
|
|
login_account_label: "Email / Phone",
|
|
login_account_ph: "Enter email or phone",
|
|
login_password_label: "Password",
|
|
login_password_ph: "Enter password",
|
|
login_remember: "Remember Me",
|
|
login_forgot: "Forgot Password?",
|
|
login_submit: "Log In",
|
|
login_other: "Other Sign-In Methods",
|
|
toast_resetpw: "Please contact support to reset your password",
|
|
toast_login_ok: "Login successful! Welcome back"
|
|
},
|
|
es: {
|
|
login_welcome: "Bienvenido de nuevo",
|
|
login_desc: "Inicia sesión para rastrear envíos en tiempo real y gestionar pedidos e inventario.",
|
|
login_feat1: "Seguimiento visual completo",
|
|
login_feat2: "Gestión inteligente de pedidos",
|
|
login_feat3: "Cotización y pedidos en línea",
|
|
login_title: "Inicio de sesión",
|
|
login_no_account: "¿Aún no tienes cuenta?",
|
|
login_register_link: "Regístrate ahora",
|
|
login_account_label: "Correo / Teléfono",
|
|
login_account_ph: "Ingresa correo o teléfono",
|
|
login_password_label: "Contraseña",
|
|
login_password_ph: "Ingresa tu contraseña",
|
|
login_remember: "Recuérdame",
|
|
login_forgot: "¿Olvidó su contraseña?",
|
|
login_submit: "Iniciar sesión",
|
|
login_other: "Otros métodos de acceso",
|
|
toast_resetpw: "Contacta a soporte para restablecer tu contraseña",
|
|
toast_login_ok: "¡Inicio de sesión exitoso! Bienvenido"
|
|
}
|
|
};
|
|
function applyLanguage(lang) {
|
|
if (!i18n[lang]) lang = 'zh';
|
|
currentLang = lang;
|
|
const langAttr = lang === 'zh' ? 'zh-CN' : (lang === 'es' ? 'es-MX' : 'en');
|
|
document.documentElement.setAttribute('lang', langAttr);
|
|
document.querySelectorAll('[data-i18n]').forEach(el => {
|
|
const k = el.getAttribute('data-i18n');
|
|
const v = i18n[lang][k];
|
|
if (v !== undefined) { if (v.indexOf('<br>') !== -1) el.innerHTML = v; else el.textContent = v; }
|
|
});
|
|
document.querySelectorAll('[data-i18n-ph]').forEach(el => {
|
|
const k = el.getAttribute('data-i18n-ph');
|
|
if (i18n[lang][k] !== undefined) el.setAttribute('placeholder', i18n[lang][k]);
|
|
});
|
|
document.querySelectorAll('[data-lang]').forEach(b => {
|
|
b.classList.toggle('active', b.getAttribute('data-lang') === lang);
|
|
});
|
|
try { localStorage.setItem('cc_lang', lang); } catch (e) {}
|
|
}
|
|
document.querySelectorAll('#langSwitcher [data-lang]').forEach(b => {
|
|
b.addEventListener('click', () => applyLanguage(b.getAttribute('data-lang')));
|
|
});
|
|
function showToast(message) {
|
|
const toast = document.getElementById('toast');
|
|
const toastMessage = document.getElementById('toastMessage');
|
|
toastMessage.textContent = message;
|
|
toast.classList.remove('opacity-0', 'pointer-events-none', '-translate-y-4');
|
|
toast.classList.add('opacity-100', 'translate-y-0');
|
|
setTimeout(() => {
|
|
toast.classList.add('opacity-0', 'pointer-events-none', '-translate-y-4');
|
|
toast.classList.remove('opacity-100', 'translate-y-0');
|
|
}, 3000);
|
|
}
|
|
function updateAuthUI() {}
|
|
document.querySelectorAll('.toggle-password').forEach(button => {
|
|
button.addEventListener('click', function() {
|
|
const input = this.previousElementSibling;
|
|
const icon = this.querySelector('i');
|
|
if (input.type === 'password') { input.type = 'text'; icon.classList.remove('fa-eye'); icon.classList.add('fa-eye-slash'); }
|
|
else { input.type = 'password'; icon.classList.remove('fa-eye-slash'); icon.classList.add('fa-eye'); }
|
|
});
|
|
});
|
|
document.getElementById('loginForm').addEventListener('submit', function(e) {
|
|
e.preventDefault();
|
|
showToast(t('toast_login_ok'));
|
|
setTimeout(() => window.location.href = 'workbench.html', 900);
|
|
});
|
|
applyLanguage(currentLang);
|
|
</script>
|
|
</body>
|
|
</html>
|