stouchinglhh
Claude
sync processor from GitLab c697b6e: 版本 1.19.4 / 前端 1.12.4 —— 服务端 i18n(首屏不再闪英文)、推理模块并入模型页、前端抽出 shared/、缓存键改用前端号
bb59211
Raw History Blame Contribute Delete
6.71 kB
<!DOCTYPE html>
<html lang="{{ current_lang() }}">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>EgoData — Login</title>
<link rel="stylesheet" href="/static/plyr.css" />
<link rel="stylesheet" href="/static/tailwind-generated.css?v={{ asset_version }}">
<script src="/static/iconify-preload.js"></script>
<script src="/static/iconify-icon.min.js"></script>
<style>
/* Particle background */
.particle-bg {
position: fixed; inset: 0; overflow: hidden; z-index: 0;
background: linear-gradient(135deg, #0a0f1a 0%, #0d1525 30%, #0a1220 60%, #060d18 100%);
}
.particle {
position: absolute;
width: 2px; height: 2px;
background: rgba(59, 130, 246, 0.3);
border-radius: 50%;
animation: float linear infinite;
}
@keyframes float {
0% { transform: translateY(100vh) scale(0); opacity: 0; }
10% { opacity: 1; }
90% { opacity: 1; }
100% { transform: translateY(-10vh) scale(1); opacity: 0; }
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}
.animate-fade-in { animation: fadeIn 0.5s ease-out both; }
.delay-1 { animation-delay: 0.1s; }
.delay-2 { animation-delay: 0.2s; }
.delay-3 { animation-delay: 0.3s; }
.delay-4 { animation-delay: 0.4s; }
.delay-5 { animation-delay: 0.5s; }
</style>
</head>
<body class="min-h-screen flex items-center justify-center relative bg-gray-950">
<!-- Particle background -->
<div class="particle-bg" id="particle-bg"></div>
<!-- Login card -->
<div class="relative z-10 w-full max-w-md mx-4">
<div class="bg-gray-900/80 backdrop-blur-xl border border-gray-800 rounded-2xl shadow-2xl shadow-blue-900/10 p-8 animate-fade-in">
<!-- Logo -->
<div class="text-center mb-8 animate-fade-in">
<div class="inline-flex items-center justify-center w-16 h-16 rounded-2xl bg-blue-600/10 border border-blue-500/20 mb-4">
<img src="/static/logo.png" alt="EgoData" class="w-10 h-10">
</div>
<h1 class="text-2xl font-bold text-white tracking-tight">EgoData</h1>
<p class="text-sm text-gray-500 mt-1">Robot Data Intelligence Platform</p>
</div>
<!-- Error message -->
<div id="login-error" class="hidden bg-red-900/30 border border-red-800 rounded-lg px-4 py-3 mb-4 flex items-center gap-2 text-red-300 text-sm animate-fade-in">
<iconify-icon icon="ant-design:warning-filled" class="text-red-400 icon-sm flex-shrink-0"></iconify-icon>
<span id="login-error-text"></span>
</div>
<!-- Form -->
<form id="login-form" class="space-y-4">
<div class="animate-fade-in delay-1">
<label class="block text-xs text-gray-500 mb-1.5">Username</label>
<input
type="text"
id="username"
name="username"
autocomplete="username"
class="w-full bg-gray-800 border border-gray-700 rounded-lg px-4 py-2.5 text-gray-200 text-sm placeholder-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500/50 focus:border-blue-500/50 transition-all"
>
</div>
<div class="animate-fade-in delay-2">
<label class="block text-xs text-gray-500 mb-1.5">Password</label>
<input
type="password"
id="password"
name="password"
autocomplete="current-password"
class="w-full bg-gray-800 border border-gray-700 rounded-lg px-4 py-2.5 text-gray-200 text-sm placeholder-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500/50 focus:border-blue-500/50 transition-all"
>
</div>
<div class="flex items-center gap-2 animate-fade-in delay-3">
<input
type="checkbox"
id="remember-me"
class="w-4 h-4 rounded border-gray-600 bg-gray-800 text-blue-600 focus:ring-blue-500/50 focus:ring-offset-0"
>
<label for="remember-me" class="text-xs text-gray-500 cursor-pointer select-none">Remember me for 30 days</label>
</div>
<div class="animate-fade-in delay-4">
<button
type="submit"
id="btn-login"
class="w-full bg-blue-600 hover:bg-blue-500 active:bg-blue-700 text-white text-sm font-medium py-2.5 rounded-lg transition-colors focus:outline-none focus:ring-2 focus:ring-blue-500/50"
>
Sign In
</button>
</div>
<div class="text-center animate-fade-in delay-5">
<a href="javascript:void(0)" class="text-xs text-gray-600 hover:text-gray-400 transition-colors">Forgot Password?</a>
</div>
</form>
</div>
<!-- Footer -->
<p class="text-center text-xs text-gray-700 mt-6 animate-fade-in delay-5">
v0.2.0 &middot; Robot Data Platform
</p>
</div>
<script src="/static/js/login.js?v={{ asset_version }}"></script>
<script>
// Generate particles
(function() {
const bg = document.getElementById('particle-bg');
const count = 40;
for (let i = 0; i < count; i++) {
const p = document.createElement('div');
p.className = 'particle';
p.style.left = Math.random() * 100 + '%';
p.style.animationDuration = (8 + Math.random() * 20) + 's';
p.style.animationDelay = Math.random() * 15 + 's';
p.style.width = (1 + Math.random() * 2) + 'px';
p.style.height = p.style.width;
// Vary opacity and hue slightly
const hue = 200 + Math.random() * 40; // blue range
const alpha = 0.15 + Math.random() * 0.25;
p.style.background = `hsla(${hue}, 80%, 60%, ${alpha})`;
bg.appendChild(p);
}
})();
</script>
</body>
</html>