287 lines
19 KiB
HTML
287 lines
19 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="registerSection" 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-1566576912321-d58ddd7a6088?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="reg_welcome">加入我们</h2>
|
|
<p class="text-white/80" data-i18n="reg_welcome_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="reg_feat1">新用户专属优惠</span>
|
|
</div>
|
|
<div class="flex items-center space-x-3">
|
|
<i class="fas fa-check-circle text-brand-green"></i>
|
|
<span data-i18n="reg_feat2">免费获取物流方案</span>
|
|
</div>
|
|
<div class="flex items-center space-x-3">
|
|
<i class="fas fa-check-circle text-brand-green"></i>
|
|
<span data-i18n="reg_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="reg_title">企业注册</h2>
|
|
<p class="text-gray-600 mb-8"><span data-i18n="reg_have_account">已有账号？</span><button onclick="window.location.href='login.html'" class="text-brand-blue font-semibold hover:underline" data-i18n="reg_login_link">立即登录</button></p>
|
|
|
|
<form id="registerForm" class="space-y-5">
|
|
<div class="grid sm:grid-cols-2 gap-5">
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 mb-2" data-i18n="reg_company_label">企业名称</label>
|
|
<input type="text" name="company" required placeholder="请输入企业名称" data-i18n-ph="reg_company_ph" class="input-field w-full px-4 py-3.5 border border-gray-200 rounded-xl outline-none">
|
|
</div>
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 mb-2" data-i18n="reg_contact_label">联系人</label>
|
|
<input type="text" name="contact" required placeholder="请输入联系人姓名" data-i18n-ph="reg_contact_ph" class="input-field w-full px-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="reg_email_label">邮箱</label>
|
|
<div class="relative">
|
|
<i class="fas fa-envelope absolute left-4 top-1/2 -translate-y-1/2 text-gray-400"></i>
|
|
<input type="email" name="email" required placeholder="请输入企业邮箱" data-i18n-ph="reg_email_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="reg_phone_label">手机号</label>
|
|
<div class="relative">
|
|
<i class="fas fa-phone absolute left-4 top-1/2 -translate-y-1/2 text-gray-400"></i>
|
|
<input type="tel" name="phone" required placeholder="请输入手机号" data-i18n-ph="reg_phone_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="reg_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="请设置8-20位密码" data-i18n-ph="reg_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-start">
|
|
<input type="checkbox" id="agree" required class="w-4 h-4 text-brand-blue rounded border-gray-300 mt-1 mr-2">
|
|
<label for="agree" class="text-sm text-gray-600">
|
|
<span data-i18n="reg_agree">我已阅读并同意</span> <button type="button" onclick="showToast(t('toast_tos'))" class="text-brand-blue hover:underline" data-i18n="reg_agree_tos">《用户服务协议》</button> 和 <button type="button" onclick="showToast(t('toast_pp'))" class="text-brand-blue hover:underline" data-i18n="reg_agree_pp">《隐私政策》</button>
|
|
</label>
|
|
</div>
|
|
|
|
<button type="submit" class="btn-accent w-full text-white font-bold py-4 rounded-xl text-lg" data-i18n="reg_submit">
|
|
立即注册
|
|
</button>
|
|
</form>
|
|
</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: {
|
|
reg_welcome: "加入我们",
|
|
reg_welcome_desc: "注册虫虫出海企业账号，开启高效跨境物流体验。",
|
|
reg_feat1: "新用户专属优惠",
|
|
reg_feat2: "免费获取物流方案",
|
|
reg_feat3: "专属客户经理对接",
|
|
reg_title: "企业注册",
|
|
reg_have_account: "已有账号？",
|
|
reg_login_link: "立即登录",
|
|
reg_company_label: "企业名称",
|
|
reg_company_ph: "请输入企业名称",
|
|
reg_contact_label: "联系人",
|
|
reg_contact_ph: "请输入联系人姓名",
|
|
reg_email_label: "邮箱",
|
|
reg_email_ph: "请输入企业邮箱",
|
|
reg_phone_label: "手机号",
|
|
reg_phone_ph: "请输入手机号",
|
|
reg_password_label: "密码",
|
|
reg_password_ph: "请设置8-20位密码",
|
|
reg_agree: "我已阅读并同意",
|
|
reg_agree_tos: "《用户服务协议》",
|
|
reg_agree_pp: "《隐私政策》",
|
|
reg_submit: "立即注册",
|
|
toast_tos: "服务协议即将上线",
|
|
toast_pp: "隐私政策即将上线",
|
|
toast_register_ok: "注册成功！欢迎加入虫虫出海"
|
|
},
|
|
en: {
|
|
reg_welcome: "Join Us",
|
|
reg_welcome_desc: "Register a Chongchong Global business account and start efficient cross-border logistics.",
|
|
reg_feat1: "Exclusive New-User Offers",
|
|
reg_feat2: "Free Logistics Plan",
|
|
reg_feat3: "Dedicated Account Manager",
|
|
reg_title: "Business Registration",
|
|
reg_have_account: "Already have an account?",
|
|
reg_login_link: "Log In Now",
|
|
reg_company_label: "Company Name",
|
|
reg_company_ph: "Enter company name",
|
|
reg_contact_label: "Contact Person",
|
|
reg_contact_ph: "Enter contact name",
|
|
reg_email_label: "Email",
|
|
reg_email_ph: "Enter company email",
|
|
reg_phone_label: "Phone Number",
|
|
reg_phone_ph: "Enter phone number",
|
|
reg_password_label: "Password",
|
|
reg_password_ph: "Set an 8-20 char password",
|
|
reg_agree: "I have read and agree to the",
|
|
reg_agree_tos: "User Agreement",
|
|
reg_agree_pp: "Privacy Policy",
|
|
reg_submit: "Sign Up Now",
|
|
toast_tos: "Terms of Service coming soon",
|
|
toast_pp: "Privacy Policy coming soon",
|
|
toast_register_ok: "Registration successful! Welcome to Chongchong Global"
|
|
},
|
|
es: {
|
|
reg_welcome: "Únete a nosotros",
|
|
reg_welcome_desc: "Regístrate en la cuenta empresarial de Chongchong Global y comienza una logística eficiente.",
|
|
reg_feat1: "Ofertas exclusivas para nuevos usuarios",
|
|
reg_feat2: "Plan logístico gratuito",
|
|
reg_feat3: "Gerente de cuenta dedicado",
|
|
reg_title: "Registro empresarial",
|
|
reg_have_account: "¿Ya tienes una cuenta?",
|
|
reg_login_link: "Inicia sesión ahora",
|
|
reg_company_label: "Nombre de empresa",
|
|
reg_company_ph: "Ingresa el nombre de empresa",
|
|
reg_contact_label: "Persona de contacto",
|
|
reg_contact_ph: "Ingresa el nombre de contacto",
|
|
reg_email_label: "Correo electrónico",
|
|
reg_email_ph: "Ingresa el correo empresarial",
|
|
reg_phone_label: "Número de teléfono",
|
|
reg_phone_ph: "Ingresa tu número de teléfono",
|
|
reg_password_label: "Contraseña",
|
|
reg_password_ph: "Define una contraseña de 8-20 caracteres",
|
|
reg_agree: "He leído y acepto los",
|
|
reg_agree_tos: "Términos de servicio",
|
|
reg_agree_pp: "Política de privacidad",
|
|
reg_submit: "Regístrate ahora",
|
|
toast_tos: "Términos de servicio próximamente",
|
|
toast_pp: "Política de privacidad próximamente",
|
|
toast_register_ok: "¡Registro exitoso! Bienvenido a Chongchong Global"
|
|
}
|
|
};
|
|
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('registerForm').addEventListener('submit', function(e) {
|
|
e.preventDefault();
|
|
showToast(t('toast_register_ok'));
|
|
setTimeout(() => window.location.href = 'workbench.html', 900);
|
|
});
|
|
applyLanguage(currentLang);
|
|
</script>
|
|
</body>
|
|
</html>
|