Spaces:
Running
Running
File size: 6,707 Bytes
d646dd7 bb59211 d646dd7 849e0ae d646dd7 849e0ae d646dd7 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 | <!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 · 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>
|