kjannette/koin_ping_0.2.0
1
0
Fork 0
Code Issues Pull Requests Actions 26 Packages Projects Releases Wiki Activity

style tweaks

Browse Source
This commit is contained in:
KS Jannette
2026-03-05 02:14:55 -05:00
parent 9414af8108
commit e48de2d6b6
2 changed files with 8 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
frontend/src/pages/login/Login.css
View File

@@ -67,16 +67,19 @@
from { from {
opacity: 0; opacity: 0;
} }
to { to {
opacity: 1; opacity: 1;
} }
} }
.login-form-hidden { .login-card-fadein {
opacity: 0; opacity: 0;
animation: fadeIn 2s ease-in-out forwards;
animation-delay: 3s;
} }
.login-form-visible { .login-interactive-fadein {
opacity: 0;
animation: fadeIn 2s ease-in-out forwards; animation: fadeIn 2s ease-in-out forwards;
animation-delay: 6s;
} }

5
frontend/src/pages/login/Login.jsx
View File

@@ -5,7 +5,6 @@ import Input from "../../components/Input";
import "./Login.css"; import "./Login.css";
export default function Login() { export default function Login() {
const [isVisible, setIsVisible] = useState(false);
const [email, setEmail] = useState(""); const [email, setEmail] = useState("");
const [password, setPassword] = useState(""); const [password, setPassword] = useState("");
const [error, setError] = useState(""); const [error, setError] = useState("");
@@ -46,12 +45,12 @@ export default function Login() {
<source src="/koin_spin.mp4" type="video/mp4" /> <source src="/koin_spin.mp4" type="video/mp4" />
</video> </video>
<div className="login-card" onMouseEnter={() => setIsVisible(true)}> <div className="login-card login-card-fadein">
<h1 className="login-heading"> <h1 className="login-heading">
<span className="login-brand">Koin Ping</span> - Login <span className="login-brand">Koin Ping</span> - Login
</h1> </h1>
<div className={isVisible ? "login-form-visible" : "login-form-hidden"}> <div className="login-interactive-fadein">
{error && <div className="alert alert--error">{error}</div>} {error && <div className="alert alert--error">{error}</div>}
<form onSubmit={handleSubmit}> <form onSubmit={handleSubmit}>