Oronemu/game-marathon
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix UI

Browse Source
This commit is contained in:
Oronemu
2025-12-17 14:53:56 +07:00
parent 332491454d
commit debdd66458
22 changed files with 853 additions and 310 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/src/components/ui/Button.tsx
View File

@@ -18,7 +18,7 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
'inline-flex items-center justify-center font-medium rounded-lg transition-all duration-200',
'disabled:opacity-50 disabled:cursor-not-allowed',
{
'bg-neon-500 hover:bg-neon-400 text-dark-900 font-semibold shadow-[0_0_10px_rgba(0,240,255,0.3)] hover:shadow-[0_0_20px_rgba(0,240,255,0.5)]': variant === 'primary',
'bg-neon-500 hover:bg-neon-400 text-dark-900 font-semibold shadow-[0_0_8px_rgba(34,211,238,0.25)] hover:shadow-[0_0_14px_rgba(34,211,238,0.4)]': variant === 'primary',
'bg-dark-600 hover:bg-dark-500 text-white border border-dark-500': variant === 'secondary',
'bg-red-600 hover:bg-red-700 text-white': variant === 'danger',
'bg-transparent hover:bg-dark-700 text-gray-300 hover:text-white': variant === 'ghost',

2
frontend/src/components/ui/Card.tsx
View File

@@ -12,7 +12,7 @@ export function Card({ children, className, hover = false }: CardProps) {
<div
className={clsx(
'bg-dark-800 rounded-xl p-6 border border-dark-600',
hover && 'transition-all duration-300 hover:-translate-y-1 hover:border-neon-500/30 hover:shadow-[0_10px_40px_rgba(0,240,255,0.1)]',
hover && 'transition-all duration-300 hover:-translate-y-1 hover:border-neon-500/30 hover:shadow-[0_10px_40px_rgba(34,211,238,0.08)]',
className
)}
>

14
frontend/src/components/ui/GlassCard.tsx
View File

@@ -91,10 +91,10 @@ export function StatsCard({
className
)}
>
<div className="flex items-center justify-between">
<div>
<div className="flex items-center justify-between gap-3">
<div className="min-w-0 flex-1">
<p className="text-sm text-gray-400 mb-1">{label}</p>
<p className={clsx('text-2xl font-bold', valueColorClasses[color])}>
<p className={clsx('text-2xl font-bold truncate', valueColorClasses[color])}>
{value}
</p>
{trend && (
@@ -111,7 +111,7 @@ export function StatsCard({
{icon && (
<div
className={clsx(
'w-12 h-12 rounded-lg flex items-center justify-center',
'w-12 h-12 rounded-lg flex items-center justify-center flex-shrink-0',
iconColorClasses[color]
)}
>
@@ -143,17 +143,17 @@ export function FeatureCard({
neon: {
icon: 'text-neon-500 bg-neon-500/10 group-hover:bg-neon-500/20',
border: 'group-hover:border-neon-500/50',
glow: 'group-hover:shadow-[0_0_30px_rgba(0,240,255,0.15)]',
glow: 'group-hover:shadow-[0_0_20px_rgba(34,211,238,0.12)]',
},
purple: {
icon: 'text-accent-500 bg-accent-500/10 group-hover:bg-accent-500/20',
border: 'group-hover:border-accent-500/50',
glow: 'group-hover:shadow-[0_0_30px_rgba(168,85,247,0.15)]',
glow: 'group-hover:shadow-[0_0_20px_rgba(139,92,246,0.12)]',
},
pink: {
icon: 'text-pink-500 bg-pink-500/10 group-hover:bg-pink-500/20',
border: 'group-hover:border-pink-500/50',
glow: 'group-hover:shadow-[0_0_30px_rgba(236,72,153,0.15)]',
glow: 'group-hover:shadow-[0_0_20px_rgba(244,114,182,0.12)]',
},
}

4
frontend/src/components/ui/GlitchText.tsx
View File

@@ -31,8 +31,8 @@ export function GlitchText({
const glowClasses = {
neon: 'neon-text',
purple: 'neon-text-purple',
pink: '[text-shadow:0_0_10px_#ec4899,0_0_20px_#ec4899,0_0_30px_#ec4899]',
white: '[text-shadow:0_0_10px_rgba(255,255,255,0.5),0_0_20px_rgba(255,255,255,0.3)]',
pink: '[text-shadow:0_0_8px_rgba(244,114,182,0.5),0_0_16px_rgba(244,114,182,0.25)]',
white: '[text-shadow:0_0_8px_rgba(255,255,255,0.4),0_0_16px_rgba(255,255,255,0.2)]',
}
const intensityClasses = {

2
frontend/src/components/ui/Input.tsx
View File

@@ -21,7 +21,7 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(
className={clsx(
'w-full px-4 py-3 bg-dark-800 border rounded-lg text-white placeholder-gray-500',
'focus:outline-none focus:border-neon-500',
'focus:shadow-[0_0_0_3px_rgba(0,240,255,0.1),0_0_10px_rgba(0,240,255,0.2)]',
'focus:shadow-[0_0_0_3px_rgba(34,211,238,0.1),0_0_8px_rgba(34,211,238,0.15)]',
'transition-all duration-200',
error ? 'border-red-500' : 'border-dark-600',
className

14
frontend/src/components/ui/NeonButton.tsx
View File

@@ -38,8 +38,8 @@ export const NeonButton = forwardRef<HTMLButtonElement, NeonButtonProps>(
outline: 'bg-transparent border-2 border-neon-500 text-neon-500 hover:bg-neon-500 hover:text-dark-900',
ghost: 'bg-transparent hover:bg-neon-500/10 text-neon-400',
danger: 'bg-red-600 hover:bg-red-700 text-white',
glow: '0 0 20px rgba(0, 240, 255, 0.5)',
glowHover: '0 0 30px rgba(0, 240, 255, 0.7)',
glow: '0 0 12px rgba(34, 211, 238, 0.4)',
glowHover: '0 0 18px rgba(34, 211, 238, 0.55)',
},
purple: {
primary: 'bg-accent-500 hover:bg-accent-400 text-white',
@@ -47,8 +47,8 @@ export const NeonButton = forwardRef<HTMLButtonElement, NeonButtonProps>(
outline: 'bg-transparent border-2 border-accent-500 text-accent-500 hover:bg-accent-500 hover:text-white',
ghost: 'bg-transparent hover:bg-accent-500/10 text-accent-400',
danger: 'bg-red-600 hover:bg-red-700 text-white',
glow: '0 0 20px rgba(168, 85, 247, 0.5)',
glowHover: '0 0 30px rgba(168, 85, 247, 0.7)',
glow: '0 0 12px rgba(139, 92, 246, 0.4)',
glowHover: '0 0 18px rgba(139, 92, 246, 0.55)',
},
pink: {
primary: 'bg-pink-500 hover:bg-pink-400 text-white',
@@ -56,8 +56,8 @@ export const NeonButton = forwardRef<HTMLButtonElement, NeonButtonProps>(
outline: 'bg-transparent border-2 border-pink-500 text-pink-500 hover:bg-pink-500 hover:text-white',
ghost: 'bg-transparent hover:bg-pink-500/10 text-pink-400',
danger: 'bg-red-600 hover:bg-red-700 text-white',
glow: '0 0 20px rgba(236, 72, 153, 0.5)',
glowHover: '0 0 30px rgba(236, 72, 153, 0.7)',
glow: '0 0 12px rgba(244, 114, 182, 0.4)',
glowHover: '0 0 18px rgba(244, 114, 182, 0.55)',
},
}
@@ -147,7 +147,7 @@ export const GradientButton = forwardRef<HTMLButtonElement, GradientButtonProps>
'relative inline-flex items-center justify-center font-semibold rounded-lg',
'bg-gradient-to-r from-neon-500 via-accent-500 to-pink-500',
'text-white transition-all duration-300',
'hover:shadow-[0_0_30px_rgba(168,85,247,0.5)]',
'hover:shadow-[0_0_20px_rgba(139,92,246,0.35)]',
'disabled:opacity-50 disabled:cursor-not-allowed',
'focus:outline-none focus:ring-2 focus:ring-accent-500 focus:ring-offset-2 focus:ring-offset-dark-900',
sizeClasses[size],