arthur/xtablo-source
1
0
Fork 0
Code Issues Pull requests 1 Projects Releases Packages Wiki Activity Actions 5

Improve login/signup ui

Browse source
This commit is contained in:
Arthur Belleville 2025-10-16 21:36:27 +02:00
parent 9d270da61b
commit e4502ef54f
No known key found for this signature in database
3 changed files with 22 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
ui/index.html
View file

@ -4,7 +4,6 @@
<meta charset="UTF-8" />
<link rel="icon" type="image/jpg+xml" href="/public/icon.jpg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="/src/ui-library/theme/index.css" />
<title>XTablo</title>
</head>
<body>

12
ui/src/pages/login.tsx
View file

@ -28,6 +28,7 @@ export function LoginPage() {
// 3D Parallax effect
const cardRef = useRef<HTMLDivElement>(null);
const [transform, setTransform] = useState("");
const [isHovered, setIsHovered] = useState(false);
const handleMouseMove = (e: React.MouseEvent<HTMLDivElement>) => {
if (!cardRef.current) return;
@ -46,10 +47,12 @@ export function LoginPage() {
setTransform(
`perspective(1000px) rotateX(${rotateX}deg) rotateY(${rotateY}deg) scale3d(1.01, 1.01, 1.01)`
);
setIsHovered(true);
};
const handleMouseLeave = () => {
setTransform("");
setIsHovered(false);
};
// Theme
@ -103,7 +106,14 @@ export function LoginPage() {
{/* Glow effect behind the card */}
<div className="absolute inset-0 rounded-2xl bg-gradient-to-br from-primary/10 via-primary/5 to-secondary/10 blur-xl -z-10"></div>
<div className="relative w-full h-full p-8 bg-card/80 backdrop-blur-md rounded-2xl border border-border shadow-2xl shadow-black/20 dark:shadow-black/40 z-10">
<div
className={twMerge(
"relative w-full h-full p-8 bg-card/80 backdrop-blur-md rounded-2xl border border-border z-10 transition-shadow duration-200",
isHovered
? "shadow-[0_20px_50px_rgba(0,0,0,0.3)] dark:shadow-[0_20px_50px_rgba(0,0,0,0.6)]"
: "shadow-2xl shadow-black/20 dark:shadow-black/40"
)}
>
<div className="mb-6 flex items-center justify-between">
<a
href="https://www.xtablo.com"

12
ui/src/pages/signup.tsx
View file

@ -32,6 +32,7 @@ export function SignUpPage() {
// 3D Parallax effect
const cardRef = useRef<HTMLDivElement>(null);
const [transform, setTransform] = useState("");
const [isHovered, setIsHovered] = useState(false);
const handleMouseMove = (e: React.MouseEvent<HTMLDivElement>) => {
if (!cardRef.current) return;
@ -50,10 +51,12 @@ export function SignUpPage() {
setTransform(
`perspective(1000px) rotateX(${rotateX}deg) rotateY(${rotateY}deg) scale3d(1.01, 1.01, 1.01)`
);
setIsHovered(true);
};
const handleMouseLeave = () => {
setTransform("");
setIsHovered(false);
};
// Theme
@ -149,7 +152,14 @@ export function SignUpPage() {
{/* Glow effect behind the card */}
<div className="absolute inset-0 rounded-2xl bg-gradient-to-br from-primary/10 via-primary/5 to-secondary/10 blur-xl -z-10"></div>
<div className="relative w-full h-full p-6 bg-card/80 backdrop-blur-md rounded-2xl border border-border shadow-2xl shadow-black/20 dark:shadow-black/40 z-10">
<div
className={twMerge(
"relative w-full h-full p-6 bg-card/80 backdrop-blur-md rounded-2xl border border-border z-10 transition-shadow duration-200",
isHovered
? "shadow-[0_20px_50px_rgba(0,0,0,0.3)] dark:shadow-[0_20px_50px_rgba(0,0,0,0.6)]"
: "shadow-2xl shadow-black/20 dark:shadow-black/40"
)}
>
<div className="mb-4 flex items-center justify-between">
<a
href="https://www.xtablo.com"