diff --git a/frontend/public/koin_spin.mp4 b/frontend/public/koin_spin.mp4 new file mode 100644 index 0000000..0202eca Binary files /dev/null and b/frontend/public/koin_spin.mp4 differ diff --git a/frontend/src/pages/login/Login.css b/frontend/src/pages/login/Login.css index 9dd7ff2..637c571 100644 --- a/frontend/src/pages/login/Login.css +++ b/frontend/src/pages/login/Login.css @@ -1,19 +1,38 @@ .login-page { - min-height: 100vh; - background-image: url(/ping.png); - background-size: 67%; - background-position: center; - background-repeat: no-repeat; + position: relative; + width: 100vw; + height: 100vh; + overflow: hidden; + background-color: #000000; +} + +.login-bg-video { + position: absolute; + top: 50%; + left: 50%; + min-width: 100%; + min-height: 100%; + width: auto; + height: auto; + transform: translate(-50%, -50%); + object-fit: cover; + z-index: 0; + filter: grayscale(85%); + -webkit-filter: grayscale(85%); + opacity: 0.06; } .login-card { + position: relative; + z-index: 1; max-width: 400px; - margin: 20px auto; + margin: 0 auto; padding: 2rem; padding-top: 8rem; border: 1px solid var(--color-border-light); border-radius: var(--radius-xl); background-color: rgba(0, 0, 0, 0.75); + top: 20px; } .login-heading { @@ -32,7 +51,6 @@ padding: 0.75rem; font-size: 1.2rem; margin-top: 16px; - ; } .login-footer { diff --git a/frontend/src/pages/login/Login.jsx b/frontend/src/pages/login/Login.jsx index 9111861..68610d4 100644 --- a/frontend/src/pages/login/Login.jsx +++ b/frontend/src/pages/login/Login.jsx @@ -36,6 +36,16 @@ export default function Login() { return (