d.solyanov/s21_game2_front_dan
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Make page register, profile, main, progress

Browse Source
This commit is contained in:
Daniil
2025-12-23 13:02:38 +03:00
parent 078ee21548
commit cdccad46c1
5 changed files with 1507 additions and 355 deletions
Download Patch File Download Diff File Expand all files Collapse all files

0
app/(home)/main/reset-password/page.tsx → app/(auth)/login/reset-password/page.tsx
View File

411
app/(auth)/register/page.tsx Normal file
View File

@@ -0,0 +1,411 @@
"use client"
import { useState, useEffect, useRef } from "react"
import { Card } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import Link from "next/link"
import {
MessageCircle,
X,
Sparkles,
Shield,
Zap,
CheckCircle,
ArrowRight,
Info
} from "lucide-react"
interface Particle {
x: number
y: number
vx: number
vy: number
size: number
opacity: number
color: string
}
export default function RegisterPage() {
const [showModal, setShowModal] = useState(false)
const [particles, setParticles] = useState<Particle[]>([])
const [mousePos, setMousePos] = useState({ x: 0, y: 0 })
const canvasRef = useRef<HTMLCanvasElement>(null)
const telegramBotUrl = "https://t.me/School21AnonimousGame_bot"
// Initialize particles
useEffect(() => {
const initParticles: Particle[] = []
const colors = ['#06b6d4', '#0ea5e9', '#3b82f6', '#8b5cf6']
for (let i = 0; i < 50; i++) {
initParticles.push({
x: Math.random() * (typeof window !== 'undefined' ? window.innerWidth : 1920),
y: Math.random() * (typeof window !== 'undefined' ? window.innerHeight : 1080),
vx: (Math.random() - 0.5) * 0.5,
vy: (Math.random() - 0.5) * 0.5,
size: Math.random() * 2 + 1,
opacity: Math.random() * 0.4 + 0.2,
color: colors[Math.floor(Math.random() * colors.length)]
})
}
setParticles(initParticles)
}, [])
// Animate particles
useEffect(() => {
const canvas = canvasRef.current
if (!canvas) return
const ctx = canvas.getContext('2d')
if (!ctx) return
const updateCanvasSize = () => {
canvas.width = window.innerWidth
canvas.height = window.innerHeight
}
updateCanvasSize()
let animationFrameId: number
const animate = () => {
ctx.clearRect(0, 0, canvas.width, canvas.height)
setParticles(prevParticles => {
return prevParticles.map(particle => {
let newX = particle.x + particle.vx
let newY = particle.y + particle.vy
if (newX < 0 || newX > canvas.width) particle.vx *= -1
if (newY < 0 || newY > canvas.height) particle.vy *= -1
newX = Math.max(0, Math.min(canvas.width, newX))
newY = Math.max(0, Math.min(canvas.height, newY))
ctx.shadowBlur = 8
ctx.shadowColor = particle.color
ctx.fillStyle = `${particle.color}${Math.floor(particle.opacity * 255).toString(16).padStart(2, '0')}`
ctx.beginPath()
ctx.arc(newX, newY, particle.size, 0, Math.PI * 2)
ctx.fill()
return { ...particle, x: newX, y: newY }
})
})
animationFrameId = requestAnimationFrame(animate)
}
animate()
window.addEventListener('resize', updateCanvasSize)
return () => {
cancelAnimationFrame(animationFrameId)
window.removeEventListener('resize', updateCanvasSize)
}
}, [])
// Mouse parallax
useEffect(() => {
const handleMouseMove = (e: MouseEvent) => {
setMousePos({ x: e.clientX, y: e.clientY })
}
window.addEventListener('mousemove', handleMouseMove)
return () => window.removeEventListener('mousemove', handleMouseMove)
}, [])
const handleTelegramClick = () => {
setShowModal(true)
setTimeout(() => {
window.open(telegramBotUrl, '_blank')
}, 500)
}
return (
<div className="min-h-screen bg-[#0a0e1a] flex items-center justify-center p-6 relative overflow-hidden">
{/* Animated particles canvas */}
<canvas
ref={canvasRef}
className="fixed inset-0 pointer-events-none z-0"
style={{ opacity: 0.6 }}
/>
{/* Background grid */}
<div
className="fixed inset-0 pointer-events-none -z-10 opacity-40"
style={{
backgroundImage: `
linear-gradient(rgba(6, 182, 212, 0.08) 1px, transparent 1px),
linear-gradient(90deg, rgba(6, 182, 212, 0.08) 1px, transparent 1px)
`,
backgroundSize: '60px 60px'
}}
/>
{/* Glowing effects */}
<div
className="fixed w-[500px] h-[500px] bg-cyan-500/15 rounded-full blur-[150px] animate-pulse transition-transform duration-1000"
style={{
top: '10%',
left: '20%',
transform: `translate(${(mousePos.x - (typeof window !== 'undefined' ? window.innerWidth : 1920) / 2) * 0.02}px, ${(mousePos.y - (typeof window !== 'undefined' ? window.innerHeight : 1080) / 2) * 0.02}px)`
}}
/>
<div
className="fixed w-[500px] h-[500px] bg-blue-500/15 rounded-full blur-[150px] animate-pulse transition-transform duration-1000"
style={{
bottom: '10%',
right: '20%',
animationDelay: '1s',
transform: `translate(${-(mousePos.x - (typeof window !== 'undefined' ? window.innerWidth : 1920) / 2) * 0.02}px, ${-(mousePos.y - (typeof window !== 'undefined' ? window.innerHeight : 1080) / 2) * 0.02}px)`
}}
/>
<Card className="w-full max-w-md bg-[#0d1117]/80 backdrop-blur-xl border-2 border-cyan-500/40 shadow-[0_0_60px_rgba(6,182,212,0.3)] relative overflow-hidden z-10">
{/* Animated top accent line */}
<div className="absolute top-0 left-0 right-0 h-1 bg-gradient-to-r from-transparent via-cyan-400 to-transparent animate-shimmer" />
{/* Animated corner glow */}
<div className="absolute inset-0 bg-gradient-to-br from-cyan-500/5 via-transparent to-blue-500/5 opacity-50" />
<div className="p-8 relative z-10">
{/* Header */}
<div className="text-center mb-8">
<div className="w-20 h-20 bg-gradient-to-br from-cyan-500/30 via-blue-500/30 to-purple-500/30 rounded-2xl flex items-center justify-center mx-auto mb-4 border-2 border-cyan-500/40 shadow-[0_0_30px_rgba(6,182,212,0.3)] relative overflow-hidden group">
<div className="absolute inset-0 bg-gradient-to-br from-cyan-400/20 to-blue-400/20 animate-pulse" />
<Sparkles className="w-10 h-10 text-cyan-400 relative z-10 drop-shadow-[0_0_10px_rgba(6,182,212,0.8)] animate-pulse" />
</div>
<h1 className="text-4xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-cyan-400 via-blue-400 to-cyan-400 font-mono mb-2 animate-gradient">
Registration
</h1>
<p className="text-cyan-400/60 font-mono text-sm">
Join the Cyber Academy
</p>
</div>
{/* Info Block */}
<div className="mb-6 p-4 bg-gradient-to-r from-cyan-500/10 to-blue-500/10 border border-cyan-500/30 rounded-xl">
<div className="flex items-start gap-3">
<div className="w-8 h-8 bg-cyan-500/20 rounded-lg flex items-center justify-center flex-shrink-0 mt-0.5">
<Info className="w-4 h-4 text-cyan-400" />
</div>
<div>
<p className="text-cyan-400 font-mono text-sm leading-relaxed">
Регистрация проходит через нашего <span className="font-bold text-cyan-300">Telegram бота</span>.
Нажмите кнопку ниже для начала регистрации.
</p>
</div>
</div>
</div>
{/* Features List */}
<div className="mb-6 space-y-3">
{[
{ icon: Zap, text: "Быстрая регистрация", color: "blue" },
{ icon: CheckCircle, text: "Мгновенный доступ", color: "purple" }
].map((feature, index) => (
<div
key={index}
className="flex items-center gap-3 p-3 bg-[#0a0e1a]/50 border border-cyan-500/20 rounded-lg hover:border-cyan-500/40 transition-all cursor-pointer hover:scale-[1.02] group"
style={{ animationDelay: `${index * 0.1}s` }}
>
<div className={`w-10 h-10 bg-gradient-to-br from-${feature.color}-500/20 to-${feature.color}-600/20 rounded-lg flex items-center justify-center border border-${feature.color}-500/30 group-hover:scale-110 transition-transform`}>
<feature.icon className={`w-5 h-5 text-${feature.color}-400`} />
</div>
<span className="text-cyan-400/80 font-mono text-sm group-hover:text-cyan-300 transition-colors">
{feature.text}
</span>
</div>
))}
</div>
{/* Telegram Registration Button */}
<Button
onClick={handleTelegramClick}
className="w-full bg-gradient-to-r from-cyan-500 to-blue-500 hover:from-cyan-400 hover:to-blue-400 text-white font-bold font-mono tracking-wider py-6 text-base shadow-[0_0_40px_rgba(6,182,212,0.4)] hover:shadow-[0_0_60px_rgba(6,182,212,0.6)] transition-all hover:scale-105 active:scale-95 cursor-pointer relative overflow-hidden group"
>
<div className="absolute inset-0 bg-gradient-to-r from-transparent via-white/20 to-transparent -translate-x-full group-hover:translate-x-full transition-transform duration-1000" />
<div className="relative z-10 flex items-center justify-center gap-3">
<MessageCircle className="w-5 h-5" />
<span>REGISTER VIA TELEGRAM</span>
<ArrowRight className="w-5 h-5 group-hover:translate-x-1 transition-transform" />
</div>
</Button>
{/* Telegram Bot Username */}
<div className="mt-4 text-center">
<p className="text-cyan-400/50 font-mono text-xs mb-2">Telegram Bot:</p>
<a
href={telegramBotUrl}
target="_blank"
rel="noopener noreferrer"
className="inline-flex items-center gap-2 text-cyan-400 hover:text-cyan-300 font-mono text-sm font-bold transition-colors cursor-pointer hover:scale-105"
>
<MessageCircle className="w-4 h-4" />
@School21AnonimousGame_bot
</a>
</div>
{/* Footer Links */}
<div className="mt-8 text-center space-y-4">
<div className="relative">
<div className="absolute inset-0 flex items-center">
<div className="w-full border-t border-cyan-500/20"></div>
</div>
<div className="relative flex justify-center text-xs">
<span className="bg-[#0d1117] px-4 text-cyan-400/40 font-mono">
OR
</span>
</div>
</div>
<p className="text-cyan-400/60 font-mono text-sm">
Already have an account?{" "}
<Link
href="/login"
className="text-cyan-400 hover:text-cyan-300 font-bold transition-colors cursor-pointer"
>
Login
</Link>
</p>
<Link
href="/"
className="inline-block text-cyan-400/50 hover:text-cyan-400 font-mono text-xs transition-colors cursor-pointer"
>
← Back to home
</Link>
</div>
</div>
{/* Enhanced corner decorations */}
<div className="absolute top-2 left-2 w-6 h-6 border-t-2 border-l-2 border-cyan-500/40 rounded-tl-sm"></div>
<div className="absolute top-2 right-2 w-6 h-6 border-t-2 border-r-2 border-cyan-500/40 rounded-tr-sm"></div>
<div className="absolute bottom-2 left-2 w-6 h-6 border-b-2 border-l-2 border-cyan-500/40 rounded-bl-sm"></div>
<div className="absolute bottom-2 right-2 w-6 h-6 border-b-2 border-r-2 border-cyan-500/40 rounded-br-sm"></div>
</Card>
{/* Modal */}
{showModal && (
<div className="fixed inset-0 bg-black/80 backdrop-blur-sm flex items-center justify-center p-6 z-50 animate-in fade-in duration-300">
<Card className="w-full max-w-lg bg-[#0d1117]/95 backdrop-blur-xl border-2 border-cyan-500/40 shadow-[0_0_80px_rgba(6,182,212,0.4)] relative overflow-hidden animate-in zoom-in-95 duration-300">
{/* Animated top accent */}
<div className="absolute top-0 left-0 right-0 h-1 bg-gradient-to-r from-transparent via-cyan-400 to-transparent animate-shimmer" />
{/* Close button */}
<button
onClick={() => setShowModal(false)}
className="absolute top-4 right-4 w-10 h-10 bg-red-500/20 hover:bg-red-500/30 rounded-lg flex items-center justify-center transition-all border border-red-500/40 hover:border-red-500/60 cursor-pointer hover:scale-110 active:scale-95 z-10"
>
<X className="w-5 h-5 text-red-400" />
</button>
<div className="p-8">
{/* Icon */}
<div className="w-20 h-20 bg-gradient-to-br from-cyan-500/30 via-blue-500/30 to-purple-500/30 rounded-2xl flex items-center justify-center mx-auto mb-6 border-2 border-cyan-500/40 shadow-[0_0_40px_rgba(6,182,212,0.4)] relative overflow-hidden">
<div className="absolute inset-0 bg-gradient-to-br from-cyan-400/20 to-blue-400/20 animate-pulse" />
<MessageCircle className="w-10 h-10 text-cyan-400 relative z-10 drop-shadow-[0_0_15px_rgba(6,182,212,1)] animate-pulse" />
</div>
{/* Title */}
<h2 className="text-2xl font-bold text-center text-transparent bg-clip-text bg-gradient-to-r from-cyan-400 via-blue-400 to-cyan-400 font-mono mb-4 animate-gradient">
Регистрация через Telegram
</h2>
{/* Content */}
<div className="space-y-4 mb-6">
<p className="text-cyan-400/80 font-mono text-sm text-center leading-relaxed">
Вы будете перенаправлены на нашего <span className="font-bold text-cyan-300">Telegram бота</span>.
</p>
<div className="bg-gradient-to-r from-cyan-500/10 to-blue-500/10 border border-cyan-500/30 rounded-xl p-4">
<div className="flex items-center gap-3 mb-3">
<div className="w-8 h-8 bg-cyan-500/20 rounded-lg flex items-center justify-center">
<Shield className="w-4 h-4 text-cyan-400" />
</div>
<span className="text-cyan-400 font-mono text-sm font-bold">Что нужно сделать:</span>
</div>
<ol className="space-y-2 text-cyan-400/70 font-mono text-sm ml-11">
<li className="flex items-start gap-2">
<span className="text-cyan-400 font-bold">1.</span>
<span>Откройте бота в Telegram</span>
</li>
<li className="flex items-start gap-2">
<span className="text-cyan-400 font-bold">2.</span>
<span>Нажмите "Start" или "/start"</span>
</li>
<li className="flex items-start gap-2">
<span className="text-cyan-400 font-bold">3.</span>
<span>Следуйте инструкциям бота</span>
</li>
<li className="flex items-start gap-2">
<span className="text-cyan-400 font-bold">4.</span>
<span>Получите данные для входа</span>
</li>
</ol>
</div>
{/* Bot username display */}
<div className="flex items-center justify-center gap-2 p-4 bg-[#0a0e1a]/80 border border-cyan-500/30 rounded-xl">
<MessageCircle className="w-5 h-5 text-cyan-400" />
<a
href={telegramBotUrl}
target="_blank"
rel="noopener noreferrer"
className="text-cyan-400 hover:text-cyan-300 font-mono font-bold transition-colors cursor-pointer"
>
@School21AnonimousGame_bot
</a>
</div>
</div>
{/* Buttons */}
<div className="flex gap-3">
<Button
onClick={() => setShowModal(false)}
variant="outline"
className="flex-1 bg-[#0a0e1a] border-cyan-500/40 text-cyan-400 hover:bg-cyan-500/10 hover:border-cyan-400/60 font-mono font-bold transition-all cursor-pointer"
>
Close
</Button>
<Button
onClick={() => window.open(telegramBotUrl, '_blank')}
className="flex-1 bg-gradient-to-r from-cyan-500 to-blue-500 hover:from-cyan-400 hover:to-blue-400 text-white font-bold font-mono shadow-[0_0_30px_rgba(6,182,212,0.4)] hover:shadow-[0_0_50px_rgba(6,182,212,0.6)] transition-all hover:scale-105 active:scale-95 cursor-pointer relative overflow-hidden group"
>
<div className="absolute inset-0 bg-gradient-to-r from-transparent via-white/20 to-transparent -translate-x-full group-hover:translate-x-full transition-transform duration-1000" />
<span className="relative z-10 flex items-center gap-2">
Open Bot
<ArrowRight className="w-4 h-4" />
</span>
</Button>
</div>
</div>
{/* Corner decorations */}
<div className="absolute top-2 left-2 w-6 h-6 border-t-2 border-l-2 border-cyan-500/40 rounded-tl-sm"></div>
<div className="absolute top-2 right-2 w-6 h-6 border-t-2 border-r-2 border-cyan-500/40 rounded-tr-sm"></div>
<div className="absolute bottom-2 left-2 w-6 h-6 border-b-2 border-l-2 border-cyan-500/40 rounded-bl-sm"></div>
<div className="absolute bottom-2 right-2 w-6 h-6 border-b-2 border-r-2 border-cyan-500/40 rounded-br-sm"></div>
</Card>
</div>
)}
<style jsx>{`
@keyframes shimmer {
0% { transform: translateX(-100%); }
100% { transform: translateX(100%); }
}
.animate-shimmer {
animation: shimmer 3s infinite;
}
@keyframes gradient {
0%, 100% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
}
.animate-gradient {
background-size: 200% 200%;
animation: gradient 3s ease infinite;
}
`}</style>
</div>
)
}

407
app/(home)/main/page.tsx
View File

@@ -21,7 +21,8 @@ import {
Clock, Clock,
Star, Star,
Sparkles, Sparkles,
ChevronDown Award,
TrendingUp
} from "lucide-react" } from "lucide-react"
import Link from "next/link" import Link from "next/link"
@@ -35,23 +36,20 @@ interface Particle {
} }
export default function MainPage() { export default function MainPage() {
const [activeTab, setActiveTab] = useState("main")
const [selectedQuest, setSelectedQuest] = useState<number | null>(null) const [selectedQuest, setSelectedQuest] = useState<number | null>(null)
const [hoveredQuest, setHoveredQuest] = useState<number | null>(null) const [hoveredQuest, setHoveredQuest] = useState<number | null>(null)
const [mousePos, setMousePos] = useState({ x: 0, y: 0 }) const [mousePos, setMousePos] = useState({ x: 0, y: 0 })
const [particles, setParticles] = useState<Particle[]>([]) const [particles, setParticles] = useState<Particle[]>([])
const [searchQuery, setSearchQuery] = useState("") const [searchQuery, setSearchQuery] = useState("")
const [filterDifficulty, setFilterDifficulty] = useState<string>("all") const [filterDifficulty, setFilterDifficulty] = useState<string>("all")
const [viewMode, setViewMode] = useState<"map" | "list">("map")
const canvasRef = useRef<HTMLCanvasElement>(null) const canvasRef = useRef<HTMLCanvasElement>(null)
const [stats, setStats] = useState({ const [stats] = useState({
xpToday: 450, xpToday: 450,
timeSpent: "2h 15m", timeSpent: "2h 15m",
streak: 7, streak: 7,
levelProgress: 68 levelProgress: 68
}) })
// Квесты/проекты
const quests = [ const quests = [
{ {
id: 1, id: 1,
@@ -151,17 +149,28 @@ export default function MainPage() {
} }
] ]
const questPositions = [
{ x: 150, y: 250 },
{ x: 300, y: 250 },
{ x: 450, y: 250 },
{ x: 600, y: 250 },
{ x: 750, y: 150 },
{ x: 750, y: 350 },
{ x: 900, y: 250 },
{ x: 1050, y: 250 }
]
// Initialize particles // Initialize particles
useEffect(() => { useEffect(() => {
const initParticles: Particle[] = [] const initParticles: Particle[] = []
for (let i = 0; i < 50; i++) { for (let i = 0; i < 80; i++) {
initParticles.push({ initParticles.push({
x: Math.random() * window.innerWidth, x: Math.random() * (typeof window !== 'undefined' ? window.innerWidth : 1920),
y: Math.random() * window.innerHeight, y: Math.random() * (typeof window !== 'undefined' ? window.innerHeight : 1080),
vx: (Math.random() - 0.5) * 0.5, vx: (Math.random() - 0.5) * 0.8,
vy: (Math.random() - 0.5) * 0.5, vy: (Math.random() - 0.5) * 0.8,
size: Math.random() * 2 + 1, size: Math.random() * 3 + 1,
opacity: Math.random() * 0.5 + 0.2 opacity: Math.random() * 0.6 + 0.2
}) })
} }
setParticles(initParticles) setParticles(initParticles)
@@ -175,8 +184,11 @@ export default function MainPage() {
const ctx = canvas.getContext('2d') const ctx = canvas.getContext('2d')
if (!ctx) return if (!ctx) return
const updateCanvasSize = () => {
canvas.width = window.innerWidth canvas.width = window.innerWidth
canvas.height = window.innerHeight canvas.height = window.innerHeight
}
updateCanvasSize()
let animationFrameId: number let animationFrameId: number
@@ -194,7 +206,9 @@ export default function MainPage() {
newX = Math.max(0, Math.min(canvas.width, newX)) newX = Math.max(0, Math.min(canvas.width, newX))
newY = Math.max(0, Math.min(canvas.height, newY)) newY = Math.max(0, Math.min(canvas.height, newY))
// Draw particle // Draw particle with glow
ctx.shadowBlur = 10
ctx.shadowColor = 'rgba(6, 182, 212, 0.8)'
ctx.fillStyle = `rgba(6, 182, 212, ${particle.opacity})` ctx.fillStyle = `rgba(6, 182, 212, ${particle.opacity})`
ctx.beginPath() ctx.beginPath()
ctx.arc(newX, newY, particle.size, 0, Math.PI * 2) ctx.arc(newX, newY, particle.size, 0, Math.PI * 2)
@@ -209,7 +223,11 @@ export default function MainPage() {
animate() animate()
return () => cancelAnimationFrame(animationFrameId) window.addEventListener('resize', updateCanvasSize)
return () => {
cancelAnimationFrame(animationFrameId)
window.removeEventListener('resize', updateCanvasSize)
}
}, []) }, [])
// Mouse parallax // Mouse parallax
@@ -246,42 +264,40 @@ export default function MainPage() {
return matchesSearch && matchesDifficulty return matchesSearch && matchesDifficulty
}) })
const questPositions = [
{ x: 150, y: 250 },
{ x: 300, y: 250 },
{ x: 450, y: 250 },
{ x: 600, y: 250 },
{ x: 750, y: 150 },
{ x: 750, y: 350 },
{ x: 900, y: 250 },
{ x: 1050, y: 250 }
]
return ( return (
<div className="min-h-screen bg-[#0a0e1a] relative overflow-hidden"> <div className="min-h-screen bg-[#0a0e1a] relative overflow-hidden">
{/* Animated particles canvas */} {/* Animated particles canvas */}
<canvas <canvas
ref={canvasRef} ref={canvasRef}
className="fixed inset-0 pointer-events-none z-0" className="fixed inset-0 pointer-events-none z-0"
style={{ opacity: 0.4 }} style={{ opacity: 0.5 }}
/> />
{/* Animated background effects */} {/* Animated background effects */}
<div <div
className="fixed w-96 h-96 bg-cyan-500/5 rounded-full blur-[120px] animate-pulse transition-transform duration-1000" className="fixed w-[500px] h-[500px] bg-cyan-500/10 rounded-full blur-[150px] animate-pulse transition-transform duration-1000"
style={{ style={{
top: '20%', top: '10%',
left: '20%', left: '15%',
transform: `translate(${(mousePos.x - window.innerWidth / 2) * 0.02}px, ${(mousePos.y - window.innerHeight / 2) * 0.02}px)` transform: `translate(${(mousePos.x - (typeof window !== 'undefined' ? window.innerWidth : 1920) / 2) * 0.03}px, ${(mousePos.y - (typeof window !== 'undefined' ? window.innerHeight : 1080) / 2) * 0.03}px)`
}} }}
/> />
<div <div
className="fixed w-96 h-96 bg-purple-500/5 rounded-full blur-[120px] animate-pulse transition-transform duration-1000" className="fixed w-[500px] h-[500px] bg-purple-500/10 rounded-full blur-[150px] animate-pulse transition-transform duration-1000"
style={{ style={{
bottom: '20%', bottom: '10%',
right: '20%', right: '15%',
animationDelay: '1s', animationDelay: '1s',
transform: `translate(${-(mousePos.x - window.innerWidth / 2) * 0.02}px, ${-(mousePos.y - window.innerHeight / 2) * 0.02}px)` transform: `translate(${-(mousePos.x - (typeof window !== 'undefined' ? window.innerWidth : 1920) / 2) * 0.03}px, ${-(mousePos.y - (typeof window !== 'undefined' ? window.innerHeight : 1080) / 2) * 0.03}px)`
}}
/>
<div
className="fixed w-[400px] h-[400px] bg-blue-500/8 rounded-full blur-[120px] animate-pulse transition-transform duration-1000"
style={{
top: '50%',
left: '50%',
animationDelay: '0.5s',
transform: `translate(-50%, -50%) translate(${(mousePos.x - (typeof window !== 'undefined' ? window.innerWidth : 1920) / 2) * 0.02}px, ${(mousePos.y - (typeof window !== 'undefined' ? window.innerHeight : 1080) / 2) * 0.02}px)`
}} }}
/> />
@@ -297,25 +313,25 @@ export default function MainPage() {
</div> </div>
<div className="flex items-center gap-12"> <div className="flex items-center gap-12">
<button className="text-sm font-bold tracking-[0.2em] transition-all duration-200 font-mono uppercase text-cyan-400 scale-110 drop-shadow-[0_0_8px_rgba(6,182,212,0.5)]"> <button className="text-sm font-bold tracking-[0.2em] transition-all duration-200 font-mono uppercase text-cyan-400 scale-110 drop-shadow-[0_0_8px_rgba(6,182,212,0.5)] cursor-pointer">
Main Main
</button> </button>
<Link href="/home/progress"> <Link href="/main/progress">
<button className="text-sm font-bold tracking-[0.2em] transition-all duration-200 font-mono uppercase text-cyan-500/50 hover:text-cyan-400/80 hover:scale-105"> <button className="text-sm font-bold tracking-[0.2em] transition-all duration-200 font-mono uppercase text-cyan-500/50 hover:text-cyan-400/80 hover:scale-105 cursor-pointer">
Progress Progress
</button> </button>
</Link> </Link>
<Link href="/home/profile"> <Link href="/main/profile">
<button className="text-sm font-bold tracking-[0.2em] transition-all duration-200 font-mono uppercase text-cyan-500/50 hover:text-cyan-400/80 hover:scale-105"> <button className="text-sm font-bold tracking-[0.2em] transition-all duration-200 font-mono uppercase text-cyan-500/50 hover:text-cyan-400/80 hover:scale-105 cursor-pointer">
Profile Profile
</button> </button>
</Link> </Link>
<Link href="/home/rules"> <Link href="/main/rules">
<button className="text-sm font-bold tracking-[0.2em] transition-all duration-200 font-mono uppercase text-cyan-500/50 hover:text-cyan-400/80 hover:scale-105"> <button className="text-sm font-bold tracking-[0.2em] transition-all duration-200 font-mono uppercase text-cyan-500/50 hover:text-cyan-400/80 hover:scale-105 cursor-pointer">
Rules Rules
</button> </button>
</Link> </Link>
<button className="text-sm font-bold tracking-[0.2em] transition-all duration-200 font-mono uppercase text-cyan-500/50 hover:text-cyan-400/80 hover:scale-105"> <button className="text-sm font-bold tracking-[0.2em] transition-all duration-200 font-mono uppercase text-cyan-500/50 hover:text-cyan-400/80 hover:scale-105 cursor-pointer">
Logoff Logoff
</button> </button>
</div> </div>
@@ -326,7 +342,7 @@ export default function MainPage() {
{/* Stats Bar */} {/* Stats Bar */}
<div className="container mx-auto px-6 py-4 relative z-10"> <div className="container mx-auto px-6 py-4 relative z-10">
<div className="grid grid-cols-4 gap-4"> <div className="grid grid-cols-4 gap-4">
<Card className="bg-[#0d1117]/50 backdrop-blur-xl border border-cyan-500/30 p-4 shadow-[0_0_20px_rgba(6,182,212,0.1)] hover:shadow-[0_0_30px_rgba(6,182,212,0.2)] transition-all"> <Card className="bg-[#0d1117]/50 backdrop-blur-xl border border-cyan-500/30 p-4 shadow-[0_0_20px_rgba(6,182,212,0.1)] hover:shadow-[0_0_30px_rgba(6,182,212,0.2)] transition-all cursor-pointer hover:scale-[1.02]">
<div className="flex items-center gap-3"> <div className="flex items-center gap-3">
<div className="w-10 h-10 bg-cyan-500/20 rounded-lg flex items-center justify-center"> <div className="w-10 h-10 bg-cyan-500/20 rounded-lg flex items-center justify-center">
<Trophy className="w-5 h-5 text-cyan-400" /> <Trophy className="w-5 h-5 text-cyan-400" />
@@ -338,7 +354,7 @@ export default function MainPage() {
</div> </div>
</Card> </Card>
<Card className="bg-[#0d1117]/50 backdrop-blur-xl border border-cyan-500/30 p-4 shadow-[0_0_20px_rgba(6,182,212,0.1)] hover:shadow-[0_0_30px_rgba(6,182,212,0.2)] transition-all"> <Card className="bg-[#0d1117]/50 backdrop-blur-xl border border-cyan-500/30 p-4 shadow-[0_0_20px_rgba(6,182,212,0.1)] hover:shadow-[0_0_30px_rgba(6,182,212,0.2)] transition-all cursor-pointer hover:scale-[1.02]">
<div className="flex items-center gap-3"> <div className="flex items-center gap-3">
<div className="w-10 h-10 bg-cyan-500/20 rounded-lg flex items-center justify-center"> <div className="w-10 h-10 bg-cyan-500/20 rounded-lg flex items-center justify-center">
<Clock className="w-5 h-5 text-cyan-400" /> <Clock className="w-5 h-5 text-cyan-400" />
@@ -350,7 +366,7 @@ export default function MainPage() {
</div> </div>
</Card> </Card>
<Card className="bg-[#0d1117]/50 backdrop-blur-xl border border-cyan-500/30 p-4 shadow-[0_0_20px_rgba(6,182,212,0.1)] hover:shadow-[0_0_30px_rgba(6,182,212,0.2)] transition-all"> <Card className="bg-[#0d1117]/50 backdrop-blur-xl border border-cyan-500/30 p-4 shadow-[0_0_20px_rgba(6,182,212,0.1)] hover:shadow-[0_0_30px_rgba(6,182,212,0.2)] transition-all cursor-pointer hover:scale-[1.02]">
<div className="flex items-center gap-3"> <div className="flex items-center gap-3">
<div className="w-10 h-10 bg-cyan-500/20 rounded-lg flex items-center justify-center"> <div className="w-10 h-10 bg-cyan-500/20 rounded-lg flex items-center justify-center">
<Zap className="w-5 h-5 text-yellow-400 animate-pulse" /> <Zap className="w-5 h-5 text-yellow-400 animate-pulse" />
@@ -362,7 +378,7 @@ export default function MainPage() {
</div> </div>
</Card> </Card>
<Card className="bg-[#0d1117]/50 backdrop-blur-xl border border-cyan-500/30 p-4 shadow-[0_0_20px_rgba(6,182,212,0.1)] hover:shadow-[0_0_30px_rgba(6,182,212,0.2)] transition-all"> <Card className="bg-[#0d1117]/50 backdrop-blur-xl border border-cyan-500/30 p-4 shadow-[0_0_20px_rgba(6,182,212,0.1)] hover:shadow-[0_0_30px_rgba(6,182,212,0.2)] transition-all cursor-pointer hover:scale-[1.02]">
<div className="flex items-center gap-3"> <div className="flex items-center gap-3">
<div className="w-10 h-10 bg-cyan-500/20 rounded-lg flex items-center justify-center"> <div className="w-10 h-10 bg-cyan-500/20 rounded-lg flex items-center justify-center">
<Star className="w-5 h-5 text-cyan-400" /> <Star className="w-5 h-5 text-cyan-400" />
@@ -371,9 +387,11 @@ export default function MainPage() {
<div className="text-xs text-cyan-400/60 font-mono mb-1">Level Progress</div> <div className="text-xs text-cyan-400/60 font-mono mb-1">Level Progress</div>
<div className="h-2 bg-[#0a0e1a] rounded-full overflow-hidden"> <div className="h-2 bg-[#0a0e1a] rounded-full overflow-hidden">
<div <div
className="h-full bg-gradient-to-r from-cyan-500 to-blue-500 rounded-full transition-all duration-500" className="h-full bg-gradient-to-r from-cyan-500 to-blue-500 rounded-full transition-all duration-500 relative"
style={{ width: `${stats.levelProgress}%` }} style={{ width: `${stats.levelProgress}%` }}
/> >
<div className="absolute inset-0 bg-white/20 animate-pulse" />
</div>
</div> </div>
</div> </div>
</div> </div>
@@ -392,10 +410,10 @@ export default function MainPage() {
Missions Missions
</h3> </h3>
<div className="flex gap-2"> <div className="flex gap-2">
<button className="text-cyan-400 hover:text-cyan-300 transition-colors"> <button className="text-cyan-400 hover:text-cyan-300 transition-colors cursor-pointer hover:scale-110">
<Search className="w-4 h-4" /> <Search className="w-4 h-4" />
</button> </button>
<button className="text-cyan-400 hover:text-cyan-300 transition-colors"> <button className="text-cyan-400 hover:text-cyan-300 transition-colors cursor-pointer hover:scale-110">
<Filter className="w-4 h-4" /> <Filter className="w-4 h-4" />
</button> </button>
</div> </div>
@@ -408,7 +426,7 @@ export default function MainPage() {
placeholder="Search missions..." placeholder="Search missions..."
value={searchQuery} value={searchQuery}
onChange={(e) => setSearchQuery(e.target.value)} onChange={(e) => setSearchQuery(e.target.value)}
className="bg-[#0a0e1a]/80 border-cyan-500/40 text-cyan-400 placeholder:text-cyan-400/30 font-mono text-sm" className="bg-[#0a0e1a]/80 border-cyan-500/40 text-cyan-400 placeholder:text-cyan-400/30 font-mono text-sm cursor-text focus:border-cyan-400 transition-all"
/> />
</div> </div>
@@ -417,7 +435,7 @@ export default function MainPage() {
<select <select
value={filterDifficulty} value={filterDifficulty}
onChange={(e) => setFilterDifficulty(e.target.value)} onChange={(e) => setFilterDifficulty(e.target.value)}
className="w-full bg-[#0a0e1a]/80 border border-cyan-500/40 text-cyan-400 font-mono text-sm rounded-lg p-2 focus:border-cyan-400 focus:outline-none" className="w-full bg-[#0a0e1a]/80 border border-cyan-500/40 text-cyan-400 font-mono text-sm rounded-lg p-2 focus:border-cyan-400 focus:outline-none cursor-pointer hover:border-cyan-400/60 transition-all"
> >
<option value="all">All Difficulties</option> <option value="all">All Difficulties</option>
<option value="Easy">Easy</option> <option value="Easy">Easy</option>
@@ -434,33 +452,34 @@ export default function MainPage() {
<button <button
key={quest.id} key={quest.id}
onClick={() => setSelectedQuest(quest.id)} onClick={() => setSelectedQuest(quest.id)}
className={`w-full text-left p-3 rounded-lg border transition-all duration-300 group ${ className={`w-full text-left p-3 rounded-lg border transition-all duration-300 group cursor-pointer ${
selectedQuest === quest.id selectedQuest === quest.id
? 'bg-cyan-500/20 border-cyan-500/60 shadow-[0_0_20px_rgba(6,182,212,0.2)]' ? 'bg-cyan-500/20 border-cyan-500/60 shadow-[0_0_20px_rgba(6,182,212,0.2)] scale-[1.02]'
: quest.status === 'completed' : quest.status === 'completed'
? 'bg-green-500/5 border-green-500/30 hover:border-green-500/50' ? 'bg-green-500/5 border-green-500/30 hover:border-green-500/50 hover:scale-[1.01]'
: quest.status === 'unlocked' : quest.status === 'unlocked'
? 'bg-yellow-500/5 border-yellow-500/30 hover:border-yellow-500/50' ? 'bg-yellow-500/5 border-yellow-500/30 hover:border-yellow-500/50 hover:scale-[1.01]'
: 'bg-[#0a0e1a]/50 border-cyan-500/20 hover:border-cyan-500/30' : 'bg-[#0a0e1a]/50 border-cyan-500/20 hover:border-cyan-500/30 hover:scale-[1.01]'
}`} }`}
> >
<div className="flex items-center gap-3"> <div className="flex items-center gap-3">
<div className={`w-8 h-8 rounded-lg bg-gradient-to-br ${getStatusColor(quest.status)}/20 flex items-center justify-center flex-shrink-0`}> <div className={`w-8 h-8 rounded-lg bg-gradient-to-br ${getStatusColor(quest.status)}/20 flex items-center justify-center flex-shrink-0 group-hover:scale-110 transition-transform relative overflow-hidden`}>
<Icon className={`w-4 h-4 ${ <div className="absolute inset-0 bg-gradient-to-br from-white/5 to-transparent opacity-0 group-hover:opacity-100 transition-opacity" />
<Icon className={`w-4 h-4 relative z-10 ${
quest.status === 'completed' ? 'text-green-400' : quest.status === 'completed' ? 'text-green-400' :
quest.status === 'unlocked' ? 'text-yellow-400' : quest.status === 'unlocked' ? 'text-yellow-400' :
'text-red-400/50' 'text-red-400/50'
}`} /> }`} />
</div> </div>
<div className="flex-1 min-w-0"> <div className="flex-1 min-w-0">
<div className="font-mono text-sm text-cyan-400 truncate"> <div className="font-mono text-sm text-cyan-400 truncate group-hover:text-cyan-300 transition-colors">
{quest.name} {quest.name}
</div> </div>
<div className="text-xs text-cyan-400/50 font-mono"> <div className="text-xs text-cyan-400/50 font-mono">
{quest.difficulty} • {quest.reward} pts {quest.difficulty} • {quest.reward} pts
</div> </div>
</div> </div>
{quest.status === 'completed' && <CheckCircle2 className="w-4 h-4 text-green-400" />} {quest.status === 'completed' && <CheckCircle2 className="w-4 h-4 text-green-400 group-hover:scale-110 transition-transform" />}
{quest.status === 'unlocked' && <Zap className="w-4 h-4 text-yellow-400 animate-pulse" />} {quest.status === 'unlocked' && <Zap className="w-4 h-4 text-yellow-400 animate-pulse" />}
{quest.status === 'locked' && <Lock className="w-4 h-4 text-red-400/50" />} {quest.status === 'locked' && <Lock className="w-4 h-4 text-red-400/50" />}
</div> </div>
@@ -472,71 +491,147 @@ export default function MainPage() {
{/* Center - Interactive Quest Map */} {/* Center - Interactive Quest Map */}
<Card className="lg:col-span-3 bg-[#0d1117]/50 backdrop-blur-xl border-2 border-cyan-500/30 p-8 shadow-[0_0_30px_rgba(6,182,212,0.1)] relative overflow-hidden group min-h-[600px]"> <Card className="lg:col-span-3 bg-[#0d1117]/50 backdrop-blur-xl border-2 border-cyan-500/30 p-8 shadow-[0_0_30px_rgba(6,182,212,0.1)] relative overflow-hidden group min-h-[600px]">
{/* Animated background pattern */}
<div className="absolute inset-0 opacity-10">
<div className="absolute inset-0" style={{
backgroundImage: `radial-gradient(circle at 2px 2px, rgba(6, 182, 212, 0.3) 1px, transparent 0)`,
backgroundSize: '40px 40px',
animation: 'moveBackground 20s linear infinite'
}} />
</div>
<div className="relative z-10"> <div className="relative z-10">
<div className="flex items-center justify-between mb-6"> <div className="flex items-center justify-between mb-6">
<div className="flex items-center gap-4">
<h3 className="text-2xl font-bold text-cyan-400 font-mono flex items-center gap-3"> <h3 className="text-2xl font-bold text-cyan-400 font-mono flex items-center gap-3">
<Globe className="w-7 h-7 animate-pulse" /> <Globe className="w-7 h-7 animate-pulse" />
Quest Network Quest Network
</h3> </h3>
<div className="text-sm text-cyan-400/60 font-mono"> <div className="px-4 py-2 bg-cyan-500/10 border border-cyan-500/30 rounded-lg">
<div className="text-sm text-cyan-400/60 font-mono flex items-center gap-2">
<Award className="w-4 h-4" />
{quests.filter(q => q.status === 'completed').length}/{quests.length} Completed {quests.filter(q => q.status === 'completed').length}/{quests.length} Completed
</div> </div>
</div> </div>
</div>
<div className="flex items-center gap-3 px-4 py-2 bg-green-500/10 border border-green-500/30 rounded-lg">
<TrendingUp className="w-5 h-5 text-green-400" />
<div>
<div className="text-xs text-green-400/60 font-mono">Total XP</div>
<div className="text-sm font-bold text-green-400 font-mono">
{quests.filter(q => q.status === 'completed').reduce((acc, q) => acc + q.reward, 0)} / {quests.reduce((acc, q) => acc + q.reward, 0)}
</div>
</div>
</div>
</div>
{/* SVG Quest Map */} {/* SVG Quest Map */}
<div className="relative min-h-[500px] flex items-center justify-center"> <div className="relative min-h-[500px] flex items-center justify-center">
<svg <svg
viewBox="0 0 1200 500" viewBox="0 0 1200 500"
className="w-full h-full" className="w-full h-full"
style={{ filter: 'drop-shadow(0 0 10px rgba(6, 182, 212, 0.3))' }} style={{ filter: 'drop-shadow(0 0 15px rgba(6, 182, 212, 0.4))' }}
> >
<defs> <defs>
{/* Enhanced gradients */}
<linearGradient id="lineGradient1" x1="0%" y1="0%" x2="100%" y2="0%"> <linearGradient id="lineGradient1" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" stopColor="#10b981" stopOpacity="0.8" /> <stop offset="0%" stopColor="#10b981" stopOpacity="0.9" />
<stop offset="100%" stopColor="#10b981" stopOpacity="0.3" /> <stop offset="50%" stopColor="#34d399" stopOpacity="0.7" />
<stop offset="100%" stopColor="#10b981" stopOpacity="0.4" />
</linearGradient> </linearGradient>
<linearGradient id="lineGradient2" x1="0%" y1="0%" x2="100%" y2="0%"> <linearGradient id="lineGradient2" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" stopColor="#eab308" stopOpacity="0.6" /> <stop offset="0%" stopColor="#eab308" stopOpacity="0.7" />
<stop offset="50%" stopColor="#f59e0b" stopOpacity="0.5" />
<stop offset="100%" stopColor="#ef4444" stopOpacity="0.3" /> <stop offset="100%" stopColor="#ef4444" stopOpacity="0.3" />
</linearGradient> </linearGradient>
<linearGradient id="lineGradient3" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" stopColor="#ef4444" stopOpacity="0.5" />
<stop offset="100%" stopColor="#7f1d1d" stopOpacity="0.2" />
</linearGradient>
{/* Enhanced glow filter */}
<filter id="glow"> <filter id="glow">
<feGaussianBlur stdDeviation="3" result="coloredBlur"/> <feGaussianBlur stdDeviation="4" result="coloredBlur"/>
<feMerge> <feMerge>
<feMergeNode in="coloredBlur"/> <feMergeNode in="coloredBlur"/>
<feMergeNode in="coloredBlur"/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
{/* Pulsing filter */}
<filter id="pulse">
<feGaussianBlur stdDeviation="2" result="blur"/>
<feFlood floodColor="#06b6d4" floodOpacity="0.5" result="color"/>
<feComposite in="color" in2="blur" operator="in" result="glow"/>
<feMerge>
<feMergeNode in="glow"/>
<feMergeNode in="SourceGraphic"/> <feMergeNode in="SourceGraphic"/>
</feMerge> </feMerge>
</filter> </filter>
</defs> </defs>
{/* Animated data flow particles */} {/* Animated energy flow particles */}
{quests.slice(0, -1).map((quest, index) => { {quests.slice(0, -1).map((quest, index) => {
if (quest.status === 'completed') { if (quest.status === 'completed' && quests[index + 1]) {
const start = questPositions[index] const start = questPositions[index]
const end = questPositions[index + 1] const end = questPositions[index + 1]
return ( return (
<circle key={`flow-${index}`} r="3" fill="#10b981" opacity="0.8"> <g key={`flow-${index}`}>
<circle r="4" fill="#10b981" opacity="0.9" filter="url(#glow)">
<animateMotion <animateMotion
dur="2s" dur="1.5s"
repeatCount="indefinite" repeatCount="indefinite"
path={`M ${start.x} ${start.y} L ${end.x} ${end.y}`} path={`M ${start.x} ${start.y} L ${end.x} ${end.y}`}
/> />
</circle> </circle>
<circle r="3" fill="#34d399" opacity="0.7">
<animateMotion
dur="1.5s"
repeatCount="indefinite"
begin="0.3s"
path={`M ${start.x} ${start.y} L ${end.x} ${end.y}`}
/>
</circle>
<circle r="2" fill="#6ee7b7" opacity="0.5">
<animateMotion
dur="1.5s"
repeatCount="indefinite"
begin="0.6s"
path={`M ${start.x} ${start.y} L ${end.x} ${end.y}`}
/>
</circle>
</g>
) )
} }
return null return null
})} })}
{/* Connection Lines */} {/* Enhanced Connection Lines */}
<path d="M 150 250 L 300 250" stroke="url(#lineGradient1)" strokeWidth="3" strokeLinecap="round" /> <g strokeLinecap="round">
<path d="M 300 250 L 450 250" stroke="url(#lineGradient1)" strokeWidth="3" strokeLinecap="round" /> <path d="M 150 250 L 300 250" stroke="url(#lineGradient1)" strokeWidth="4" opacity="0.8" />
<path d="M 450 250 L 600 250" stroke="url(#lineGradient2)" strokeWidth="3" strokeLinecap="round" strokeDasharray="5,5" /> <path d="M 300 250 L 450 250" stroke="url(#lineGradient1)" strokeWidth="4" opacity="0.8" />
<path d="M 600 250 L 750 150" stroke="url(#lineGradient2)" strokeWidth="3" strokeLinecap="round" strokeDasharray="5,5" /> <path d="M 450 250 L 600 250" stroke="url(#lineGradient2)" strokeWidth="3" strokeDasharray="8,4">
<path d="M 600 250 L 750 350" stroke="url(#lineGradient2)" strokeWidth="3" strokeLinecap="round" strokeDasharray="5,5" /> <animate attributeName="stroke-dashoffset" from="0" to="12" dur="1s" repeatCount="indefinite" />
<path d="M 750 150 L 900 250" stroke="url(#lineGradient2)" strokeWidth="3" strokeLinecap="round" strokeDasharray="5,5" /> </path>
<path d="M 750 350 L 900 250" stroke="url(#lineGradient2)" strokeWidth="3" strokeLinecap="round" strokeDasharray="5,5" /> <path d="M 600 250 L 750 150" stroke="url(#lineGradient3)" strokeWidth="3" strokeDasharray="8,4" opacity="0.6">
<path d="M 900 250 L 1050 250" stroke="url(#lineGradient2)" strokeWidth="3" strokeLinecap="round" strokeDasharray="5,5" /> <animate attributeName="stroke-dashoffset" from="0" to="12" dur="1s" repeatCount="indefinite" />
</path>
<path d="M 600 250 L 750 350" stroke="url(#lineGradient3)" strokeWidth="3" strokeDasharray="8,4" opacity="0.6">
<animate attributeName="stroke-dashoffset" from="0" to="12" dur="1s" repeatCount="indefinite" />
</path>
<path d="M 750 150 L 900 250" stroke="url(#lineGradient3)" strokeWidth="3" strokeDasharray="8,4" opacity="0.6">
<animate attributeName="stroke-dashoffset" from="0" to="12" dur="1s" repeatCount="indefinite" />
</path>
<path d="M 750 350 L 900 250" stroke="url(#lineGradient3)" strokeWidth="3" strokeDasharray="8,4" opacity="0.6">
<animate attributeName="stroke-dashoffset" from="0" to="12" dur="1s" repeatCount="indefinite" />
</path>
<path d="M 900 250 L 1050 250" stroke="url(#lineGradient3)" strokeWidth="3" strokeDasharray="8,4" opacity="0.5">
<animate attributeName="stroke-dashoffset" from="0" to="12" dur="1s" repeatCount="indefinite" />
</path>
</g>
{/* Quest Nodes - Hexagons */} {/* Quest Nodes - Enhanced Hexagons */}
{questPositions.map((pos, index) => { {questPositions.map((pos, index) => {
const quest = quests[index] const quest = quests[index]
const isSelected = selectedQuest === quest.id const isSelected = selectedQuest === quest.id
@@ -546,8 +641,7 @@ export default function MainPage() {
quest.status === 'unlocked' ? '#eab308' : quest.status === 'unlocked' ? '#eab308' :
'#ef4444' '#ef4444'
const Icon = quest.icon const hexSize = isHovered ? 35 : 30
const hexSize = 30
const hexPoints = Array.from({ length: 6 }, (_, i) => { const hexPoints = Array.from({ length: 6 }, (_, i) => {
const angle = (Math.PI / 3) * i const angle = (Math.PI / 3) * i
return `${pos.x + hexSize * Math.cos(angle)},${pos.y + hexSize * Math.sin(angle)}` return `${pos.x + hexSize * Math.cos(angle)},${pos.y + hexSize * Math.sin(angle)}`
@@ -561,43 +655,58 @@ export default function MainPage() {
onClick={() => setSelectedQuest(quest.id)} onClick={() => setSelectedQuest(quest.id)}
className="cursor-pointer transition-all duration-300" className="cursor-pointer transition-all duration-300"
style={{ style={{
transform: isHovered ? 'translateY(-10px)' : 'translateY(0)', transform: isHovered ? 'scale(1.1)' : 'scale(1)',
transformOrigin: `${pos.x}px ${pos.y}px` transformOrigin: `${pos.x}px ${pos.y}px`,
transition: 'transform 0.3s ease'
}} }}
> >
{/* Outer glow rings */} {/* Multiple glow rings for selected */}
{isSelected && ( {isSelected && (
<> <>
<polygon <polygon
points={Array.from({ length: 6 }, (_, i) => { points={Array.from({ length: 6 }, (_, i) => {
const angle = (Math.PI / 3) * i const angle = (Math.PI / 3) * i
return `${pos.x + 45 * Math.cos(angle)},${pos.y + 45 * Math.sin(angle)}` return `${pos.x + 55 * Math.cos(angle)},${pos.y + 55 * Math.sin(angle)}`
}).join(' ')} }).join(' ')}
fill="none" fill="none"
stroke={statusColor} stroke={statusColor}
strokeWidth="2" strokeWidth="2"
opacity="0.3" opacity="0.2"
className="animate-ping" >
/> <animate attributeName="opacity" values="0.2;0.5;0.2" dur="2s" repeatCount="indefinite" />
</polygon>
<polygon <polygon
points={Array.from({ length: 6 }, (_, i) => { points={Array.from({ length: 6 }, (_, i) => {
const angle = (Math.PI / 3) * i const angle = (Math.PI / 3) * i
return `${pos.x + 40 * Math.cos(angle)},${pos.y + 40 * Math.sin(angle)}` return `${pos.x + 50 * Math.cos(angle)},${pos.y + 50 * Math.sin(angle)}`
}).join(' ')}
fill="none"
stroke={statusColor}
strokeWidth="2"
opacity="0.4"
>
<animate attributeName="opacity" values="0.4;0.7;0.4" dur="1.5s" repeatCount="indefinite" />
</polygon>
<polygon
points={Array.from({ length: 6 }, (_, i) => {
const angle = (Math.PI / 3) * i
return `${pos.x + 43 * Math.cos(angle)},${pos.y + 43 * Math.sin(angle)}`
}).join(' ')} }).join(' ')}
fill="none" fill="none"
stroke={statusColor} stroke={statusColor}
strokeWidth="3" strokeWidth="3"
opacity="0.6" opacity="0.7"
/> />
</> </>
)} )}
{/* Hexagon node */} {/* Outer hexagon with gradient */}
<polygon <polygon
points={hexPoints} points={hexPoints}
fill={`${statusColor}20`} fill={`url(#${quest.status === 'completed' ? 'lineGradient1' : quest.status === 'unlocked' ? 'lineGradient2' : 'lineGradient3'})`}
fillOpacity="0.15"
stroke={statusColor} stroke={statusColor}
strokeWidth={isSelected ? "4" : "2"} strokeWidth={isSelected ? "4" : isHovered ? "3" : "2"}
filter="url(#glow)" filter="url(#glow)"
className="transition-all duration-300" className="transition-all duration-300"
/> />
@@ -606,32 +715,48 @@ export default function MainPage() {
<polygon <polygon
points={Array.from({ length: 6 }, (_, i) => { points={Array.from({ length: 6 }, (_, i) => {
const angle = (Math.PI / 3) * i const angle = (Math.PI / 3) * i
return `${pos.x + 20 * Math.cos(angle)},${pos.y + 20 * Math.sin(angle)}` const innerSize = isHovered ? 23 : 20
return `${pos.x + innerSize * Math.cos(angle)},${pos.y + innerSize * Math.sin(angle)}`
}).join(' ')} }).join(' ')}
fill={statusColor} fill={statusColor}
opacity={quest.status === 'locked' ? '0.3' : '0.6'} opacity={quest.status === 'locked' ? '0.3' : '0.7'}
/> filter="url(#pulse)"
>
{quest.status === 'unlocked' && (
<animate attributeName="opacity" values="0.5;0.9;0.5" dur="2s" repeatCount="indefinite" />
)}
</polygon>
{/* Hover tooltip */} {/* Enhanced hover tooltip */}
{isHovered && ( {isHovered && (
<g> <g>
<rect <rect
x={pos.x - 100} x={pos.x - 120}
y={pos.y - 80} y={pos.y - 100}
width="200" width="240"
height="60" height="80"
rx="8" rx="12"
fill="#0d1117" fill="#0d1117"
stroke="#06b6d4" fillOpacity="0.98"
stroke={statusColor}
strokeWidth="2" strokeWidth="2"
opacity="0.95" filter="url(#glow)"
/>
<rect
x={pos.x - 115}
y={pos.y - 95}
width="230"
height="70"
rx="10"
fill={statusColor}
fillOpacity="0.05"
/> />
<text <text
x={pos.x} x={pos.x}
y={pos.y - 55} y={pos.y - 68}
textAnchor="middle" textAnchor="middle"
fill="#06b6d4" fill="#06b6d4"
fontSize="14" fontSize="16"
fontWeight="bold" fontWeight="bold"
fontFamily="monospace" fontFamily="monospace"
> >
@@ -639,25 +764,25 @@ export default function MainPage() {
</text> </text>
<text <text
x={pos.x} x={pos.x}
y={pos.y - 35} y={pos.y - 48}
textAnchor="middle" textAnchor="middle"
fill="#06b6d4" fill={statusColor}
fontSize="10" fontSize="11"
fontFamily="monospace" fontFamily="monospace"
opacity="0.7" fontWeight="600"
> >
{quest.difficulty} • {quest.estimatedTime} {quest.difficulty} • {quest.estimatedTime}
</text> </text>
<text <text
x={pos.x} x={pos.x}
y={pos.y - 20} y={pos.y - 30}
textAnchor="middle" textAnchor="middle"
fill="#10b981" fill="#10b981"
fontSize="10" fontSize="12"
fontWeight="bold" fontWeight="bold"
fontFamily="monospace" fontFamily="monospace"
> >
+{quest.reward} PTS +{quest.reward} XP
</text> </text>
</g> </g>
)} )}
@@ -666,9 +791,9 @@ export default function MainPage() {
})} })}
</svg> </svg>
{/* Quest Details Panel with Close Button */} {/* Enhanced Quest Details Panel */}
{selectedQuest && ( {selectedQuest && (
<Card className="absolute bottom-4 left-4 right-4 bg-[#0a0e1a]/95 backdrop-blur-xl border-2 border-cyan-500/40 p-6 shadow-[0_0_40px_rgba(6,182,212,0.2)] animate-in fade-in slide-in-from-bottom-4 duration-300"> <Card className="absolute bottom-4 left-4 right-4 bg-[#0a0e1a]/98 backdrop-blur-xl border-2 border-cyan-500/50 p-6 shadow-[0_0_60px_rgba(6,182,212,0.3)] animate-in fade-in slide-in-from-bottom-4 duration-300">
{(() => { {(() => {
const quest = quests.find(q => q.id === selectedQuest) const quest = quests.find(q => q.id === selectedQuest)
if (!quest) return null if (!quest) return null
@@ -682,15 +807,16 @@ export default function MainPage() {
e.stopPropagation() e.stopPropagation()
setSelectedQuest(null) setSelectedQuest(null)
}} }}
className="absolute top-4 right-4 w-8 h-8 bg-red-500/20 hover:bg-red-500/30 rounded-lg flex items-center justify-center transition-all group border border-red-500/40 hover:border-red-500/60" className="absolute top-4 right-4 w-9 h-9 bg-red-500/20 hover:bg-red-500/30 rounded-lg flex items-center justify-center transition-all group border border-red-500/40 hover:border-red-500/60 cursor-pointer hover:scale-110"
> >
<X className="w-5 h-5 text-red-400 group-hover:text-red-300" /> <X className="w-5 h-5 text-red-400 group-hover:text-red-300" />
</button> </button>
<div className="flex items-start gap-6"> <div className="flex items-start gap-6">
<div className={`w-20 h-20 rounded-2xl bg-gradient-to-br ${getStatusColor(quest.status)}/20 border-2 border-cyan-500/40 flex items-center justify-center flex-shrink-0 shadow-lg relative overflow-hidden group`}> <div className={`w-24 h-24 rounded-2xl bg-gradient-to-br ${getStatusColor(quest.status)}/20 border-2 border-cyan-500/40 flex items-center justify-center flex-shrink-0 shadow-lg relative overflow-hidden group cursor-pointer hover:scale-105 transition-transform`}>
<div className="absolute inset-0 bg-gradient-to-br from-cyan-500/10 to-transparent opacity-0 group-hover:opacity-100 transition-opacity" /> <div className="absolute inset-0 bg-gradient-to-br from-cyan-500/10 to-transparent opacity-0 group-hover:opacity-100 transition-opacity" />
<Icon className={`w-10 h-10 relative z-10 ${ <div className="absolute inset-0 bg-gradient-to-br from-white/5 via-transparent to-transparent" />
<Icon className={`w-12 h-12 relative z-10 ${
quest.status === 'completed' ? 'text-green-400' : quest.status === 'completed' ? 'text-green-400' :
quest.status === 'unlocked' ? 'text-yellow-400 animate-pulse' : quest.status === 'unlocked' ? 'text-yellow-400 animate-pulse' :
'text-red-400/50' 'text-red-400/50'
@@ -700,20 +826,25 @@ export default function MainPage() {
<div className="flex-1"> <div className="flex-1">
<div className="flex items-start justify-between mb-3"> <div className="flex items-start justify-between mb-3">
<div> <div>
<h4 className="text-2xl font-bold text-cyan-400 font-mono mb-2"> <h4 className="text-2xl font-bold text-cyan-400 font-mono mb-2 flex items-center gap-3">
{quest.name} {quest.name}
{quest.status === 'completed' && (
<span className="text-xs bg-green-500/20 text-green-400 px-2 py-1 rounded-full border border-green-500/40">
✓ CLEARED
</span>
)}
</h4> </h4>
<div className="flex items-center gap-4 mb-3"> <div className="flex items-center gap-4 mb-3">
<span className={`text-xs font-mono ${getDifficultyColor(quest.difficulty)} font-bold px-3 py-1 bg-cyan-500/10 rounded-full border border-cyan-500/30`}> <span className={`text-xs font-mono ${getDifficultyColor(quest.difficulty)} font-bold px-3 py-1.5 bg-cyan-500/10 rounded-full border border-cyan-500/30`}>
{quest.difficulty} {quest.difficulty}
</span> </span>
<span className="text-xs text-cyan-400 font-mono flex items-center gap-1"> <span className="text-xs text-cyan-400 font-mono flex items-center gap-1.5">
<Clock className="w-3 h-3" /> <Clock className="w-3.5 h-3.5" />
{quest.estimatedTime} {quest.estimatedTime}
</span> </span>
<span className="text-xs text-green-400 font-mono font-bold flex items-center gap-1"> <span className="text-xs text-green-400 font-mono font-bold flex items-center gap-1.5 bg-green-500/10 px-2 py-1 rounded-full border border-green-500/30">
<Trophy className="w-3 h-3" /> <Trophy className="w-3.5 h-3.5" />
+{quest.reward} PTS +{quest.reward} XP
</span> </span>
</div> </div>
</div> </div>
@@ -739,7 +870,7 @@ export default function MainPage() {
</div> </div>
</div> </div>
<p className="text-cyan-400/70 font-mono text-sm mb-4 leading-relaxed"> <p className="text-cyan-400/80 font-mono text-sm mb-4 leading-relaxed">
{quest.description} {quest.description}
</p> </p>
@@ -756,7 +887,7 @@ export default function MainPage() {
return prereq ? ( return prereq ? (
<span <span
key={prereqId} key={prereqId}
className={`text-xs font-mono px-2 py-1 rounded ${ className={`text-xs font-mono px-2 py-1 rounded cursor-pointer hover:scale-105 transition-transform ${
prereq.status === 'completed' prereq.status === 'completed'
? 'bg-green-500/20 text-green-400 border border-green-500/40' ? 'bg-green-500/20 text-green-400 border border-green-500/40'
: 'bg-red-500/20 text-red-400 border border-red-500/40' : 'bg-red-500/20 text-red-400 border border-red-500/40'
@@ -775,7 +906,7 @@ export default function MainPage() {
disabled={quest.status === 'locked' || quest.status === 'completed'} disabled={quest.status === 'locked' || quest.status === 'completed'}
className={`${ className={`${
quest.status === 'unlocked' quest.status === 'unlocked'
? 'bg-gradient-to-r from-cyan-500 to-blue-500 hover:from-cyan-400 hover:to-blue-400 text-black shadow-[0_0_30px_rgba(6,182,212,0.4)] hover:shadow-[0_0_50px_rgba(6,182,212,0.6)]' ? 'bg-gradient-to-r from-cyan-500 to-blue-500 hover:from-cyan-400 hover:to-blue-400 text-black shadow-[0_0_30px_rgba(6,182,212,0.5)] hover:shadow-[0_0_50px_rgba(6,182,212,0.7)] cursor-pointer'
: 'bg-cyan-500/20 text-cyan-400/50 cursor-not-allowed' : 'bg-cyan-500/20 text-cyan-400/50 cursor-not-allowed'
} font-mono font-bold transition-all hover:scale-105 active:scale-95 flex items-center gap-2`} } font-mono font-bold transition-all hover:scale-105 active:scale-95 flex items-center gap-2`}
> >
@@ -800,7 +931,7 @@ export default function MainPage() {
{quest.status === 'completed' && ( {quest.status === 'completed' && (
<Button <Button
variant="outline" variant="outline"
className="bg-cyan-500/10 border-cyan-500/40 text-cyan-400 hover:bg-cyan-500/20 font-mono" className="bg-cyan-500/10 border-cyan-500/40 text-cyan-400 hover:bg-cyan-500/20 font-mono cursor-pointer hover:scale-105 transition-transform"
> >
Review Review
</Button> </Button>
@@ -821,20 +952,20 @@ export default function MainPage() {
{/* Enhanced Background grid */} {/* Enhanced Background grid */}
<div <div
className="fixed inset-0 pointer-events-none -z-10 opacity-50" className="fixed inset-0 pointer-events-none -z-10 opacity-40"
style={{ style={{
backgroundImage: ` backgroundImage: `
linear-gradient(rgba(6, 182, 212, 0.05) 1px, transparent 1px), linear-gradient(rgba(6, 182, 212, 0.08) 1px, transparent 1px),
linear-gradient(90deg, rgba(6, 182, 212, 0.05) 1px, transparent 1px) linear-gradient(90deg, rgba(6, 182, 212, 0.08) 1px, transparent 1px)
`, `,
backgroundSize: '50px 50px' backgroundSize: '60px 60px'
}} }}
/> />
{/* Scanline effect */} {/* Scanline effect */}
<div className="fixed inset-0 pointer-events-none z-50 opacity-5"> <div className="fixed inset-0 pointer-events-none z-50 opacity-5">
<div className="h-full w-full" style={{ <div className="h-full w-full" style={{
backgroundImage: 'repeating-linear-gradient(0deg, rgba(6, 182, 212, 0.1) 0px, transparent 2px, transparent 4px)', backgroundImage: 'repeating-linear-gradient(0deg, rgba(6, 182, 212, 0.15) 0px, transparent 2px, transparent 4px)',
animation: 'scanline 8s linear infinite' animation: 'scanline 8s linear infinite'
}} /> }} />
</div> </div>
@@ -844,6 +975,10 @@ export default function MainPage() {
0% { transform: translateY(0); } 0% { transform: translateY(0); }
100% { transform: translateY(100%); } 100% { transform: translateY(100%); }
} }
@keyframes moveBackground {
0% { transform: translate(0, 0); }
100% { transform: translate(40px, 40px); }
}
`}</style> `}</style>
</div> </div>
) )

465
app/(home)/main/profile/page.tsx
View File

@@ -1,17 +1,43 @@
"use client" "use client"
import { useState } from "react" import { useState, useEffect, useRef } from "react"
import { Card } from "@/components/ui/card" import { Card } from "@/components/ui/card"
import { Button } from "@/components/ui/button" import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input" import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label" import { Label } from "@/components/ui/label"
import { Progress } from "@/components/ui/progress" import {
import { User, CheckCircle2, Lock, ChevronLeft, ChevronRight, Sparkles, Zap } from "lucide-react" User,
CheckCircle2,
Lock,
ChevronLeft,
ChevronRight,
Sparkles,
Zap,
Trophy,
Star,
Award,
TrendingUp,
Shield,
Crown,
Flame
} from "lucide-react"
import Link from "next/link" import Link from "next/link"
interface Particle {
x: number
y: number
vx: number
vy: number
size: number
opacity: number
color: string
}
export default function ProfilePage() { export default function ProfilePage() {
const [activeTab, setActiveTab] = useState("profile")
const [currentBadgeSlide, setCurrentBadgeSlide] = useState(0) const [currentBadgeSlide, setCurrentBadgeSlide] = useState(0)
const [particles, setParticles] = useState<Particle[]>([])
const [mousePos, setMousePos] = useState({ x: 0, y: 0 })
const canvasRef = useRef<HTMLCanvasElement>(null)
// Mock user data // Mock user data
const userData = { const userData = {
@@ -20,7 +46,9 @@ export default function ProfilePage() {
level: 5, level: 5,
questsCompleted: 7, questsCompleted: 7,
totalQuests: 12, totalQuests: 12,
gameProgress: 58 gameProgress: 58,
rank: "Elite Hacker",
joinDate: "15.08.2024"
} }
const quests = [ const quests = [
@@ -40,7 +68,8 @@ export default function ProfilePage() {
description: "За скорость", description: "За скорость",
requirement: "Решить: 8%", requirement: "Решить: 8%",
icon: "🏃", icon: "🏃",
color: "from-cyan-500 to-blue-500" color: "from-cyan-500 to-blue-500",
rarity: "rare"
}, },
{ {
id: 2, id: 2,
@@ -49,7 +78,8 @@ export default function ProfilePage() {
description: "За точность", description: "За точность",
requirement: "Решить: 25%", requirement: "Решить: 25%",
icon: "🎯", icon: "🎯",
color: "from-purple-500 to-pink-500" color: "from-purple-500 to-pink-500",
rarity: "epic"
}, },
{ {
id: 3, id: 3,
@@ -59,7 +89,8 @@ export default function ProfilePage() {
requirement: "Решить: ???", requirement: "Решить: ???",
locked: true, locked: true,
icon: "🔒", icon: "🔒",
color: "from-gray-500 to-gray-700" color: "from-gray-500 to-gray-700",
rarity: "legendary"
}, },
{ {
id: 4, id: 4,
@@ -69,12 +100,93 @@ export default function ProfilePage() {
requirement: "Решить:", requirement: "Решить:",
locked: true, locked: true,
icon: "❓", icon: "❓",
color: "from-gray-500 to-gray-700" color: "from-gray-500 to-gray-700",
rarity: "unknown"
} }
] ]
const visibleBadges = badges.slice(currentBadgeSlide, currentBadgeSlide + 3) const visibleBadges = badges.slice(currentBadgeSlide, currentBadgeSlide + 3)
// Initialize particles
useEffect(() => {
const initParticles: Particle[] = []
const colors = ['#06b6d4', '#ec4899', '#8b5cf6', '#3b82f6']
for (let i = 0; i < 60; i++) {
initParticles.push({
x: Math.random() * (typeof window !== 'undefined' ? window.innerWidth : 1920),
y: Math.random() * (typeof window !== 'undefined' ? window.innerHeight : 1080),
vx: (Math.random() - 0.5) * 0.6,
vy: (Math.random() - 0.5) * 0.6,
size: Math.random() * 2.5 + 1,
opacity: Math.random() * 0.5 + 0.2,
color: colors[Math.floor(Math.random() * colors.length)]
})
}
setParticles(initParticles)
}, [])
// Animate particles
useEffect(() => {
const canvas = canvasRef.current
if (!canvas) return
const ctx = canvas.getContext('2d')
if (!ctx) return
const updateCanvasSize = () => {
canvas.width = window.innerWidth
canvas.height = window.innerHeight
}
updateCanvasSize()
let animationFrameId: number
const animate = () => {
ctx.clearRect(0, 0, canvas.width, canvas.height)
setParticles(prevParticles => {
return prevParticles.map(particle => {
let newX = particle.x + particle.vx
let newY = particle.y + particle.vy
if (newX < 0 || newX > canvas.width) particle.vx *= -1
if (newY < 0 || newY > canvas.height) particle.vy *= -1
newX = Math.max(0, Math.min(canvas.width, newX))
newY = Math.max(0, Math.min(canvas.height, newY))
ctx.shadowBlur = 8
ctx.shadowColor = particle.color
ctx.fillStyle = `${particle.color}${Math.floor(particle.opacity * 255).toString(16).padStart(2, '0')}`
ctx.beginPath()
ctx.arc(newX, newY, particle.size, 0, Math.PI * 2)
ctx.fill()
return { ...particle, x: newX, y: newY }
})
})
animationFrameId = requestAnimationFrame(animate)
}
animate()
window.addEventListener('resize', updateCanvasSize)
return () => {
cancelAnimationFrame(animationFrameId)
window.removeEventListener('resize', updateCanvasSize)
}
}, [])
// Mouse parallax
useEffect(() => {
const handleMouseMove = (e: MouseEvent) => {
setMousePos({ x: e.clientX, y: e.clientY })
}
window.addEventListener('mousemove', handleMouseMove)
return () => window.removeEventListener('mousemove', handleMouseMove)
}, [])
const nextSlide = () => { const nextSlide = () => {
if (currentBadgeSlide < badges.length - 3) { if (currentBadgeSlide < badges.length - 3) {
setCurrentBadgeSlide(currentBadgeSlide + 1) setCurrentBadgeSlide(currentBadgeSlide + 1)
@@ -87,12 +199,51 @@ export default function ProfilePage() {
} }
} }
const getRarityColor = (rarity: string) => {
switch (rarity) {
case 'rare': return 'from-blue-500 to-cyan-500'
case 'epic': return 'from-purple-500 to-pink-500'
case 'legendary': return 'from-yellow-500 to-orange-500'
default: return 'from-gray-500 to-gray-600'
}
}
return ( return (
<div className="min-h-screen bg-[#0a0e1a] relative overflow-hidden"> <div className="min-h-screen bg-[#0a0e1a] relative overflow-hidden">
{/* Animated particles canvas */}
<canvas
ref={canvasRef}
className="fixed inset-0 pointer-events-none z-0"
style={{ opacity: 0.5 }}
/>
{/* Animated background effects */} {/* Animated background effects */}
<div className="fixed top-20 left-20 w-96 h-96 bg-cyan-500/5 rounded-full blur-[120px] animate-pulse" /> <div
<div className="fixed bottom-20 right-20 w-96 h-96 bg-pink-500/5 rounded-full blur-[120px] animate-pulse" style={{ animationDelay: '1s' }} /> className="fixed w-[500px] h-[500px] bg-cyan-500/10 rounded-full blur-[150px] animate-pulse transition-transform duration-1000"
<div className="fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[600px] h-[600px] bg-blue-500/3 rounded-full blur-[150px] animate-pulse" style={{ animationDelay: '2s' }} /> style={{
top: '10%',
left: '15%',
transform: `translate(${(mousePos.x - (typeof window !== 'undefined' ? window.innerWidth : 1920) / 2) * 0.03}px, ${(mousePos.y - (typeof window !== 'undefined' ? window.innerHeight : 1080) / 2) * 0.03}px)`
}}
/>
<div
className="fixed w-[500px] h-[500px] bg-pink-500/10 rounded-full blur-[150px] animate-pulse transition-transform duration-1000"
style={{
bottom: '10%',
right: '15%',
animationDelay: '1s',
transform: `translate(${-(mousePos.x - (typeof window !== 'undefined' ? window.innerWidth : 1920) / 2) * 0.03}px, ${-(mousePos.y - (typeof window !== 'undefined' ? window.innerHeight : 1080) / 2) * 0.03}px)`
}}
/>
<div
className="fixed w-[400px] h-[400px] bg-purple-500/8 rounded-full blur-[120px] animate-pulse transition-transform duration-1000"
style={{
top: '50%',
left: '50%',
animationDelay: '0.5s',
transform: `translate(-50%, -50%) translate(${(mousePos.x - (typeof window !== 'undefined' ? window.innerWidth : 1920) / 2) * 0.02}px, ${(mousePos.y - (typeof window !== 'undefined' ? window.innerHeight : 1080) / 2) * 0.02}px)`
}}
/>
{/* Header */} {/* Header */}
<header className="bg-[#0d1117]/80 backdrop-blur-xl border-b border-cyan-500/30 sticky top-0 z-50 shadow-lg shadow-cyan-500/5"> <header className="bg-[#0d1117]/80 backdrop-blur-xl border-b border-cyan-500/30 sticky top-0 z-50 shadow-lg shadow-cyan-500/5">
@@ -100,24 +251,24 @@ export default function ProfilePage() {
<div className="flex items-center justify-center"> <div className="flex items-center justify-center">
<div className="flex items-center gap-12"> <div className="flex items-center gap-12">
<Link href="/main"> <Link href="/main">
<button className="text-sm font-bold tracking-[0.2em] transition-all duration-200 font-mono uppercase text-cyan-500/50 hover:text-cyan-400/80 hover:scale-105"> <button className="text-sm font-bold tracking-[0.2em] transition-all duration-200 font-mono uppercase text-cyan-500/50 hover:text-cyan-400/80 hover:scale-105 cursor-pointer">
Main Main
</button> </button>
</Link> </Link>
<Link href="/main/progress"> <Link href="/main/progress">
<button className="text-sm font-bold tracking-[0.2em] transition-all duration-200 font-mono uppercase text-cyan-500/50 hover:text-cyan-400/80 hover:scale-105"> <button className="text-sm font-bold tracking-[0.2em] transition-all duration-200 font-mono uppercase text-cyan-500/50 hover:text-cyan-400/80 hover:scale-105 cursor-pointer">
Progress Progress
</button> </button>
</Link> </Link>
<button className="text-sm font-bold tracking-[0.2em] transition-all duration-200 font-mono uppercase text-pink-500 scale-110 drop-shadow-[0_0_8px_rgba(236,72,153,0.5)]"> <button className="text-sm font-bold tracking-[0.2em] transition-all duration-200 font-mono uppercase text-pink-500 scale-110 drop-shadow-[0_0_8px_rgba(236,72,153,0.5)] cursor-pointer">
Profile Profile
</button> </button>
<Link href="/main/rules"> <Link href="/main/rules">
<button className="text-sm font-bold tracking-[0.2em] transition-all duration-200 font-mono uppercase text-cyan-500/50 hover:text-cyan-400/80 hover:scale-105"> <button className="text-sm font-bold tracking-[0.2em] transition-all duration-200 font-mono uppercase text-cyan-500/50 hover:text-cyan-400/80 hover:scale-105 cursor-pointer">
Rules Rules
</button> </button>
</Link> </Link>
<button className="text-sm font-bold tracking-[0.2em] transition-all duration-200 font-mono uppercase text-cyan-500/50 hover:text-cyan-400/80 hover:scale-105"> <button className="text-sm font-bold tracking-[0.2em] transition-all duration-200 font-mono uppercase text-cyan-500/50 hover:text-cyan-400/80 hover:scale-105 cursor-pointer">
Logoff Logoff
</button> </button>
</div> </div>
@@ -135,114 +286,184 @@ export default function ProfilePage() {
{/* Animated border glow */} {/* Animated border glow */}
<div className="absolute inset-0 bg-gradient-to-r from-transparent via-cyan-500/10 to-transparent -translate-x-full group-hover:translate-x-full transition-transform duration-1000" /> <div className="absolute inset-0 bg-gradient-to-r from-transparent via-cyan-500/10 to-transparent -translate-x-full group-hover:translate-x-full transition-transform duration-1000" />
{/* Animated background pattern */}
<div className="absolute inset-0 opacity-5">
<div className="absolute inset-0" style={{
backgroundImage: `radial-gradient(circle at 2px 2px, rgba(6, 182, 212, 0.4) 1px, transparent 0)`,
backgroundSize: '30px 30px',
animation: 'moveBackground 15s linear infinite'
}} />
</div>
<div className="relative z-10"> <div className="relative z-10">
<div className="flex items-center gap-3 mb-6"> <div className="flex items-center justify-between mb-6">
<div className="flex items-center gap-3">
<div className="w-10 h-10 bg-gradient-to-br from-cyan-500/20 to-blue-500/20 rounded-lg flex items-center justify-center">
<Sparkles className="w-5 h-5 text-cyan-400 animate-pulse" /> <Sparkles className="w-5 h-5 text-cyan-400 animate-pulse" />
</div>
<h3 className="text-xl font-bold text-cyan-400 font-mono"> <h3 className="text-xl font-bold text-cyan-400 font-mono">
Personal progress Personal Progress
</h3> </h3>
</div> </div>
<div className="flex items-center gap-2 px-4 py-2 bg-gradient-to-r from-yellow-500/10 to-orange-500/10 border border-yellow-500/30 rounded-lg">
<Crown className="w-5 h-5 text-yellow-400" />
<span className="text-sm font-mono font-bold text-yellow-400">{userData.rank}</span>
</div>
</div>
<div className="grid grid-cols-2 md:grid-cols-4 gap-4 mb-6"> <div className="grid grid-cols-2 md:grid-cols-4 gap-4 mb-6">
<div className="bg-gradient-to-br from-[#1a2332] to-[#0d1117] border border-cyan-500/30 rounded-lg p-4 text-center hover:border-cyan-500/50 transition-all hover:scale-105 hover:shadow-[0_0_20px_rgba(6,182,212,0.2)] group/card relative overflow-hidden"> <div className="bg-gradient-to-br from-[#1a2332] to-[#0d1117] border border-cyan-500/30 rounded-xl p-4 text-center hover:border-cyan-500/50 transition-all hover:scale-105 hover:shadow-[0_0_30px_rgba(6,182,212,0.2)] group/card relative overflow-hidden cursor-pointer">
<div className="absolute inset-0 bg-gradient-to-br from-cyan-500/5 to-transparent opacity-0 group-hover/card:opacity-100 transition-opacity" /> <div className="absolute inset-0 bg-gradient-to-br from-cyan-500/10 to-transparent opacity-0 group-hover/card:opacity-100 transition-opacity" />
<div className="absolute top-2 right-2 w-8 h-8 bg-cyan-500/10 rounded-full flex items-center justify-center opacity-0 group-hover/card:opacity-100 transition-opacity">
<Trophy className="w-4 h-4 text-cyan-400" />
</div>
<div className="relative z-10"> <div className="relative z-10">
<div className="text-3xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-cyan-400 to-blue-400 font-mono mb-1"> <div className="text-3xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-cyan-400 via-blue-400 to-cyan-400 font-mono mb-1 animate-gradient">
{userData.totalPoints} {userData.totalPoints}
</div> </div>
<div className="text-xs text-cyan-400/60 font-mono"> <div className="text-xs text-cyan-400/60 font-mono font-semibold">
Total Points Total Points
</div> </div>
</div> </div>
</div> </div>
<div className="bg-gradient-to-br from-[#1a2332] to-[#0d1117] border border-cyan-500/30 rounded-lg p-4 text-center hover:border-cyan-500/50 transition-all hover:scale-105 hover:shadow-[0_0_20px_rgba(6,182,212,0.2)] group/card relative overflow-hidden">
<div className="absolute inset-0 bg-gradient-to-br from-cyan-500/5 to-transparent opacity-0 group-hover/card:opacity-100 transition-opacity" /> <div className="bg-gradient-to-br from-[#1a2332] to-[#0d1117] border border-cyan-500/30 rounded-xl p-4 text-center hover:border-cyan-500/50 transition-all hover:scale-105 hover:shadow-[0_0_30px_rgba(6,182,212,0.2)] group/card relative overflow-hidden cursor-pointer">
<div className="absolute inset-0 bg-gradient-to-br from-purple-500/10 to-transparent opacity-0 group-hover/card:opacity-100 transition-opacity" />
<div className="absolute top-2 right-2 w-8 h-8 bg-purple-500/10 rounded-full flex items-center justify-center opacity-0 group-hover/card:opacity-100 transition-opacity">
<Star className="w-4 h-4 text-purple-400" />
</div>
<div className="relative z-10"> <div className="relative z-10">
<div className="text-3xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-cyan-400 to-blue-400 font-mono mb-1"> <div className="text-3xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-purple-400 via-pink-400 to-purple-400 font-mono mb-1 animate-gradient">
Level {userData.level} Level {userData.level}
</div> </div>
<div className="text-xs text-cyan-400/60 font-mono"> <div className="text-xs text-cyan-400/60 font-mono font-semibold">
Current Level Current Level
</div> </div>
</div> </div>
</div> </div>
<div className="bg-gradient-to-br from-[#1a2332] to-[#0d1117] border border-cyan-500/30 rounded-lg p-4 text-center hover:border-cyan-500/50 transition-all hover:scale-105 hover:shadow-[0_0_20px_rgba(6,182,212,0.2)] group/card relative overflow-hidden">
<div className="absolute inset-0 bg-gradient-to-br from-cyan-500/5 to-transparent opacity-0 group-hover/card:opacity-100 transition-opacity" /> <div className="bg-gradient-to-br from-[#1a2332] to-[#0d1117] border border-cyan-500/30 rounded-xl p-4 text-center hover:border-cyan-500/50 transition-all hover:scale-105 hover:shadow-[0_0_30px_rgba(6,182,212,0.2)] group/card relative overflow-hidden cursor-pointer">
<div className="absolute inset-0 bg-gradient-to-br from-green-500/10 to-transparent opacity-0 group-hover/card:opacity-100 transition-opacity" />
<div className="absolute top-2 right-2 w-8 h-8 bg-green-500/10 rounded-full flex items-center justify-center opacity-0 group-hover/card:opacity-100 transition-opacity">
<CheckCircle2 className="w-4 h-4 text-green-400" />
</div>
<div className="relative z-10"> <div className="relative z-10">
<div className="text-3xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-cyan-400 to-blue-400 font-mono mb-1"> <div className="text-3xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-green-400 via-emerald-400 to-green-400 font-mono mb-1 animate-gradient">
{userData.questsCompleted}/{userData.totalQuests} {userData.questsCompleted}/{userData.totalQuests}
</div> </div>
<div className="text-xs text-cyan-400/60 font-mono"> <div className="text-xs text-cyan-400/60 font-mono font-semibold">
Quests Completed Quests Completed
</div> </div>
</div> </div>
</div> </div>
<div className="bg-gradient-to-br from-[#1a2332] to-[#0d1117] border border-cyan-500/30 rounded-lg p-4 text-center hover:border-cyan-500/50 transition-all hover:scale-105 hover:shadow-[0_0_20px_rgba(6,182,212,0.2)] group/card relative overflow-hidden">
<div className="absolute inset-0 bg-gradient-to-br from-cyan-500/5 to-transparent opacity-0 group-hover/card:opacity-100 transition-opacity" /> <div className="bg-gradient-to-br from-[#1a2332] to-[#0d1117] border border-cyan-500/30 rounded-xl p-4 text-center hover:border-cyan-500/50 transition-all hover:scale-105 hover:shadow-[0_0_30px_rgba(6,182,212,0.2)] group/card relative overflow-hidden cursor-pointer">
<div className="absolute inset-0 bg-gradient-to-br from-blue-500/10 to-transparent opacity-0 group-hover/card:opacity-100 transition-opacity" />
<div className="absolute top-2 right-2 w-8 h-8 bg-blue-500/10 rounded-full flex items-center justify-center opacity-0 group-hover/card:opacity-100 transition-opacity">
<TrendingUp className="w-4 h-4 text-blue-400" />
</div>
<div className="relative z-10"> <div className="relative z-10">
<div className="text-3xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-cyan-400 to-blue-400 font-mono mb-1"> <div className="text-3xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-blue-400 via-cyan-400 to-blue-400 font-mono mb-1 animate-gradient">
{userData.gameProgress}% {userData.gameProgress}%
</div> </div>
<div className="text-xs text-cyan-400/60 font-mono"> <div className="text-xs text-cyan-400/60 font-mono font-semibold">
Game Progress Game Progress
</div> </div>
</div> </div>
</div> </div>
</div> </div>
{/* Progress Bar */}
<div className="mb-6 p-4 bg-[#0a0e1a]/50 rounded-xl border border-cyan-500/20">
<div className="flex items-center justify-between mb-2">
<span className="text-xs text-cyan-400/60 font-mono">Overall Progress</span>
<span className="text-xs text-cyan-400 font-mono font-bold">{userData.gameProgress}%</span>
</div>
<div className="h-3 bg-[#0a0e1a] rounded-full overflow-hidden relative">
<div
className="h-full bg-gradient-to-r from-cyan-500 via-blue-500 to-purple-500 rounded-full transition-all duration-500 relative"
style={{ width: `${userData.gameProgress}%` }}
>
<div className="absolute inset-0 bg-gradient-to-r from-transparent via-white/30 to-transparent animate-shimmer" />
</div>
</div>
</div>
{/* Quests List */} {/* Quests List */}
<div className="space-y-2"> <div className="space-y-3">
{quests.map((quest) => ( <div className="flex items-center gap-2 mb-3">
<Shield className="w-5 h-5 text-cyan-400" />
<h4 className="text-sm font-mono font-bold text-cyan-400">Quest Log</h4>
</div>
{quests.map((quest, index) => (
<div <div
key={quest.id} key={quest.id}
className={`flex items-center justify-between p-4 rounded-lg border transition-all duration-300 group/quest relative overflow-hidden ${ className={`flex items-center justify-between p-4 rounded-xl border transition-all duration-300 group/quest relative overflow-hidden cursor-pointer ${
quest.active quest.active
? 'bg-gradient-to-r from-yellow-900/30 via-yellow-800/20 to-yellow-900/30 border-yellow-500/50 shadow-[0_0_20px_rgba(234,179,8,0.15)] hover:shadow-[0_0_30px_rgba(234,179,8,0.25)] animate-pulse-slow' ? 'bg-gradient-to-r from-yellow-900/40 via-yellow-800/30 to-yellow-900/40 border-yellow-500/60 shadow-[0_0_25px_rgba(234,179,8,0.2)] hover:shadow-[0_0_40px_rgba(234,179,8,0.3)]'
: quest.completed : quest.completed
? 'bg-[#0a0e1a]/80 border-green-500/40 hover:border-green-500/60 hover:shadow-[0_0_20px_rgba(34,197,94,0.1)]' ? 'bg-[#0a0e1a]/80 border-green-500/40 hover:border-green-500/60 hover:shadow-[0_0_25px_rgba(34,197,94,0.15)] hover:scale-[1.01]'
: 'bg-[#0a0e1a]/50 border-cyan-500/20 hover:border-cyan-500/40 hover:shadow-[0_0_15px_rgba(6,182,212,0.1)]' : 'bg-[#0a0e1a]/50 border-cyan-500/20 hover:border-cyan-500/40 hover:shadow-[0_0_20px_rgba(6,182,212,0.1)] hover:scale-[1.01]'
}`} }`}
style={{ animationDelay: `${index * 0.1}s` }}
> >
{/* Animated background for active quest */}
{quest.active && ( {quest.active && (
<div className="absolute inset-0 bg-gradient-to-r from-transparent via-yellow-500/10 to-transparent -translate-x-full group-hover/quest:translate-x-full transition-transform duration-1000" /> <>
<div className="absolute inset-0 bg-gradient-to-r from-transparent via-yellow-500/15 to-transparent -translate-x-full group-hover/quest:translate-x-full transition-transform duration-1000" />
<div className="absolute inset-0 animate-pulse-border" />
</>
)} )}
<div className="flex items-center gap-4 flex-1 relative z-10"> <div className="flex items-center gap-4 flex-1 relative z-10">
{quest.completed ? ( {quest.completed ? (
<div className="relative"> <div className="relative">
<CheckCircle2 className="w-5 h-5 text-green-400 flex-shrink-0 drop-shadow-[0_0_8px_rgba(34,197,94,0.5)]" /> <div className="w-10 h-10 bg-gradient-to-br from-green-500/30 to-emerald-500/30 rounded-lg flex items-center justify-center border border-green-500/40">
<div className="absolute inset-0 animate-ping opacity-20"> <CheckCircle2 className="w-5 h-5 text-green-400 drop-shadow-[0_0_8px_rgba(34,197,94,0.5)]" />
<CheckCircle2 className="w-5 h-5 text-green-400" />
</div> </div>
<div className="absolute -inset-1 bg-green-500/20 rounded-lg blur animate-pulse" />
</div> </div>
) : ( ) : (
<Lock className={`w-5 h-5 flex-shrink-0 ${quest.active ? 'text-yellow-400 animate-pulse' : 'text-cyan-400/50'}`} /> <div className={`w-10 h-10 rounded-lg flex items-center justify-center border relative ${
quest.active
? 'bg-gradient-to-br from-yellow-500/30 to-orange-500/30 border-yellow-500/40'
: 'bg-cyan-500/10 border-cyan-500/30'
}`}>
{quest.active && (
<div className="absolute inset-0 bg-yellow-500/20 rounded-lg animate-pulse" />
)}
<Lock className={`w-5 h-5 relative z-10 ${quest.active ? 'text-yellow-400 animate-pulse' : 'text-cyan-400/50'}`} />
</div>
)} )}
<div className="flex-1"> <div className="flex-1">
<div className="flex items-center gap-3"> <div className="flex items-center gap-3 mb-1">
<span className={`font-bold font-mono text-sm ${ <span className={`font-bold font-mono text-sm ${
quest.active ? 'text-yellow-300' : 'text-cyan-400' quest.active ? 'text-yellow-300' : quest.completed ? 'text-green-400' : 'text-cyan-400'
}`}> }`}>
{quest.name} {quest.name}
</span> </span>
{quest.badge && ( {quest.badge && (
<span className="px-3 py-1 bg-gradient-to-r from-pink-500 to-pink-600 text-black text-xs font-mono font-bold rounded shadow-[0_0_15px_rgba(236,72,153,0.4)] animate-pulse"> <span className="px-3 py-1 bg-gradient-to-r from-pink-500 to-pink-600 text-white text-xs font-mono font-bold rounded-full shadow-[0_0_20px_rgba(236,72,153,0.5)] animate-pulse flex items-center gap-1">
<Zap className="inline w-3 h-3 mr-1" /> <Zap className="w-3 h-3" />
{quest.badge} {quest.badge}
</span> </span>
)} )}
</div> </div>
{quest.date && ( {quest.date && (
<div className="text-xs text-cyan-400/50 font-mono mt-1"> <div className="text-xs text-cyan-400/50 font-mono">
{quest.date} {quest.date}
</div> </div>
)} )}
</div> </div>
</div> </div>
<div className={`font-mono font-bold text-sm ${ <div className="flex items-center gap-3">
quest.completed ? 'text-green-400' : 'text-cyan-400' <div className={`font-mono font-bold text-sm px-4 py-2 rounded-lg ${
} drop-shadow-[0_0_8px_rgba(6,182,212,0.5)]`}> quest.completed
{quest.points} pts ? 'bg-green-500/20 text-green-400 border border-green-500/40'
: 'bg-cyan-500/20 text-cyan-400 border border-cyan-500/40'
} drop-shadow-[0_0_8px_rgba(6,182,212,0.3)]`}>
+{quest.points} XP
</div>
</div> </div>
</div> </div>
))} ))}
@@ -255,38 +476,58 @@ export default function ProfilePage() {
<div className="absolute inset-0 bg-gradient-to-r from-transparent via-cyan-500/10 to-transparent -translate-x-full group-hover:translate-x-full transition-transform duration-1000" /> <div className="absolute inset-0 bg-gradient-to-r from-transparent via-cyan-500/10 to-transparent -translate-x-full group-hover:translate-x-full transition-transform duration-1000" />
<div className="relative z-10"> <div className="relative z-10">
<div className="flex items-center gap-3 mb-6">
<div className="w-10 h-10 bg-gradient-to-br from-purple-500/20 to-pink-500/20 rounded-lg flex items-center justify-center">
<Award className="w-5 h-5 text-purple-400 animate-pulse" />
</div>
<h3 className="text-xl font-bold text-cyan-400 font-mono">
Achievement Collection
</h3>
</div>
<div className="flex items-center justify-between mb-6"> <div className="flex items-center justify-between mb-6">
<button <button
onClick={prevSlide} onClick={prevSlide}
disabled={currentBadgeSlide === 0} disabled={currentBadgeSlide === 0}
className="w-12 h-12 rounded-full bg-gradient-to-br from-cyan-500/20 to-cyan-600/10 border border-cyan-500/40 flex items-center justify-center hover:from-cyan-500/30 hover:to-cyan-600/20 hover:border-cyan-400/60 transition-all disabled:opacity-20 disabled:cursor-not-allowed hover:scale-110 hover:shadow-[0_0_20px_rgba(6,182,212,0.3)] active:scale-95" className="w-12 h-12 rounded-xl bg-gradient-to-br from-cyan-500/20 to-cyan-600/10 border border-cyan-500/40 flex items-center justify-center hover:from-cyan-500/30 hover:to-cyan-600/20 hover:border-cyan-400/60 transition-all disabled:opacity-20 disabled:cursor-not-allowed hover:scale-110 hover:shadow-[0_0_20px_rgba(6,182,212,0.3)] active:scale-95 cursor-pointer"
> >
<ChevronLeft className="w-6 h-6 text-cyan-400" /> <ChevronLeft className="w-6 h-6 text-cyan-400" />
</button> </button>
<div className="flex-1 px-4"> <div className="flex-1 px-4">
<div className="grid grid-cols-3 gap-4"> <div className="grid grid-cols-3 gap-4">
{visibleBadges.map((badge) => ( {visibleBadges.map((badge, index) => (
<Card <Card
key={badge.id} key={badge.id}
className={`p-6 text-center transition-all duration-300 relative overflow-hidden group/badge ${ className={`p-6 text-center transition-all duration-300 relative overflow-hidden group/badge cursor-pointer ${
badge.locked badge.locked
? 'bg-[#0a0e1a]/30 border-cyan-500/10 opacity-40' ? 'bg-[#0a0e1a]/30 border-cyan-500/10 opacity-40'
: 'bg-gradient-to-br from-[#1a2332] to-[#0d1117] border-cyan-500/40 hover:border-cyan-500/70 hover:scale-105 hover:shadow-[0_0_30px_rgba(6,182,212,0.2)]' : 'bg-gradient-to-br from-[#1a2332] to-[#0d1117] border-cyan-500/40 hover:border-cyan-500/70 hover:scale-105 hover:shadow-[0_0_40px_rgba(6,182,212,0.25)]'
}`} }`}
style={{ animationDelay: `${index * 0.1}s` }}
> >
{!badge.locked && ( {!badge.locked && (
<>
<div className="absolute inset-0 bg-gradient-to-br from-cyan-500/5 to-transparent opacity-0 group-hover/badge:opacity-100 transition-opacity" /> <div className="absolute inset-0 bg-gradient-to-br from-cyan-500/5 to-transparent opacity-0 group-hover/badge:opacity-100 transition-opacity" />
<div className={`absolute top-2 right-2 px-2 py-1 bg-gradient-to-r ${getRarityColor(badge.rarity)} rounded-full text-[8px] font-mono font-bold text-white uppercase opacity-80`}>
{badge.rarity}
</div>
</>
)} )}
<div className="relative z-10"> <div className="relative z-10">
<div className={`w-20 h-20 rounded-xl mx-auto mb-3 flex items-center justify-center text-4xl relative ${ <div className={`w-20 h-20 rounded-xl mx-auto mb-3 flex items-center justify-center text-4xl relative ${
badge.locked ? 'bg-cyan-500/5' : `bg-gradient-to-br ${badge.color}/20 shadow-inner` badge.locked ? 'bg-cyan-500/5' : `bg-gradient-to-br ${badge.color}/20 shadow-inner border-2 border-cyan-500/20`
}`}> }`}>
{!badge.locked && ( {!badge.locked && (
<div className={`absolute inset-0 rounded-xl bg-gradient-to-br ${badge.color} opacity-0 group-hover/badge:opacity-20 blur transition-opacity`} /> <>
<div className={`absolute inset-0 rounded-xl bg-gradient-to-br ${badge.color} opacity-0 group-hover/badge:opacity-30 blur transition-opacity`} />
<div className="absolute inset-0 rounded-xl bg-gradient-to-br from-white/10 to-transparent" />
</>
)} )}
<span className="relative z-10 drop-shadow-lg">{badge.icon}</span> <span className="relative z-10 drop-shadow-lg transform group-hover/badge:scale-110 transition-transform">
{badge.icon}
</span>
</div> </div>
<h4 className={`font-bold font-mono text-sm mb-1 ${ <h4 className={`font-bold font-mono text-sm mb-1 ${
badge.locked ? 'text-cyan-400/30' : 'text-cyan-400' badge.locked ? 'text-cyan-400/30' : 'text-cyan-400'
@@ -315,7 +556,7 @@ export default function ProfilePage() {
<button <button
onClick={nextSlide} onClick={nextSlide}
disabled={currentBadgeSlide >= badges.length - 3} disabled={currentBadgeSlide >= badges.length - 3}
className="w-12 h-12 rounded-full bg-gradient-to-br from-cyan-500/20 to-cyan-600/10 border border-cyan-500/40 flex items-center justify-center hover:from-cyan-500/30 hover:to-cyan-600/20 hover:border-cyan-400/60 transition-all disabled:opacity-20 disabled:cursor-not-allowed hover:scale-110 hover:shadow-[0_0_20px_rgba(6,182,212,0.3)] active:scale-95" className="w-12 h-12 rounded-xl bg-gradient-to-br from-cyan-500/20 to-cyan-600/10 border border-cyan-500/40 flex items-center justify-center hover:from-cyan-500/30 hover:to-cyan-600/20 hover:border-cyan-400/60 transition-all disabled:opacity-20 disabled:cursor-not-allowed hover:scale-110 hover:shadow-[0_0_20px_rgba(6,182,212,0.3)] active:scale-95 cursor-pointer"
> >
<ChevronRight className="w-6 h-6 text-cyan-400" /> <ChevronRight className="w-6 h-6 text-cyan-400" />
</button> </button>
@@ -327,7 +568,7 @@ export default function ProfilePage() {
<button <button
key={index} key={index}
onClick={() => setCurrentBadgeSlide(index)} onClick={() => setCurrentBadgeSlide(index)}
className={`h-2 rounded-full transition-all ${ className={`h-2 rounded-full transition-all cursor-pointer ${
currentBadgeSlide === index currentBadgeSlide === index
? 'bg-cyan-400 w-8 shadow-[0_0_10px_rgba(6,182,212,0.5)]' ? 'bg-cyan-400 w-8 shadow-[0_0_10px_rgba(6,182,212,0.5)]'
: 'bg-cyan-500/30 w-2 hover:bg-cyan-500/50' : 'bg-cyan-500/30 w-2 hover:bg-cyan-500/50'
@@ -340,18 +581,34 @@ export default function ProfilePage() {
</div> </div>
{/* Right Column - Profile Settings */} {/* Right Column - Profile Settings */}
<Card className="bg-[#0d1117]/50 backdrop-blur-xl border-2 border-cyan-500/30 p-6 shadow-[0_0_30px_rgba(6,182,212,0.1)] hover:shadow-[0_0_50px_rgba(6,182,212,0.2)] transition-all duration-300 relative overflow-hidden group"> <Card className="bg-[#0d1117]/50 backdrop-blur-xl border-2 border-cyan-500/30 p-6 shadow-[0_0_30px_rgba(6,182,212,0.1)] hover:shadow-[0_0_50px_rgba(6,182,212,0.2)] transition-all duration-300 relative overflow-hidden group h-fit">
<div className="absolute inset-0 bg-gradient-to-br from-cyan-500/5 via-transparent to-pink-500/5 opacity-0 group-hover:opacity-100 transition-opacity duration-500" /> <div className="absolute inset-0 bg-gradient-to-br from-cyan-500/5 via-transparent to-pink-500/5 opacity-0 group-hover:opacity-100 transition-opacity duration-500" />
{/* Animated corner decorations */}
<div className="absolute top-0 right-0 w-32 h-32 bg-gradient-to-br from-cyan-500/10 to-transparent rounded-bl-full opacity-50" />
<div className="absolute bottom-0 left-0 w-32 h-32 bg-gradient-to-tr from-pink-500/10 to-transparent rounded-tr-full opacity-50" />
<div className="relative z-10"> <div className="relative z-10">
<div className="text-center mb-6"> <div className="text-center mb-6">
<div className="w-24 h-24 bg-gradient-to-br from-cyan-500/30 to-blue-500/30 rounded-full flex items-center justify-center mx-auto mb-4 border-4 border-cyan-500/40 shadow-[0_0_30px_rgba(6,182,212,0.2)] hover:scale-110 hover:shadow-[0_0_50px_rgba(6,182,212,0.4)] transition-all duration-300 group/avatar relative overflow-hidden"> <div className="relative inline-block mb-4">
<div className="w-28 h-28 bg-gradient-to-br from-cyan-500/30 via-blue-500/30 to-purple-500/30 rounded-2xl flex items-center justify-center border-4 border-cyan-500/40 shadow-[0_0_40px_rgba(6,182,212,0.3)] hover:scale-110 hover:shadow-[0_0_60px_rgba(6,182,212,0.5)] hover:rotate-6 transition-all duration-300 group/avatar relative overflow-hidden cursor-pointer">
<div className="absolute inset-0 bg-gradient-to-br from-cyan-400/20 to-blue-400/20 animate-pulse" /> <div className="absolute inset-0 bg-gradient-to-br from-cyan-400/20 to-blue-400/20 animate-pulse" />
<User className="w-12 h-12 text-cyan-400 relative z-10 drop-shadow-[0_0_10px_rgba(6,182,212,0.5)]" /> <div className="absolute inset-0 bg-gradient-to-br from-transparent via-white/10 to-transparent" />
<User className="w-14 h-14 text-cyan-400 relative z-10 drop-shadow-[0_0_10px_rgba(6,182,212,0.5)]" />
</div> </div>
<h3 className="text-xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-cyan-400 to-blue-400 font-mono"> {/* Level badge */}
Profile settings <div className="absolute -bottom-2 -right-2 w-12 h-12 bg-gradient-to-br from-purple-500 to-pink-500 rounded-xl flex items-center justify-center border-4 border-[#0d1117] shadow-lg">
<span className="text-white font-mono font-bold text-sm">{userData.level}</span>
</div>
{/* Status indicator */}
<div className="absolute -top-1 -right-1 w-4 h-4 bg-green-500 rounded-full border-2 border-[#0d1117] animate-pulse" />
</div>
<h3 className="text-xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-cyan-400 via-blue-400 to-purple-400 font-mono mb-1">
Profile Settings
</h3> </h3>
<p className="text-xs text-cyan-400/60 font-mono">
Member since {userData.joinDate}
</p>
</div> </div>
{/* School Nickname */} {/* School Nickname */}
@@ -363,7 +620,7 @@ export default function ProfilePage() {
<Input <Input
value={userData.nickname} value={userData.nickname}
readOnly readOnly
className="bg-[#0a0e1a]/80 backdrop-blur border-cyan-500/40 text-cyan-400 font-mono hover:border-cyan-500/60 transition-all focus:shadow-[0_0_20px_rgba(6,182,212,0.2)]" className="bg-[#0a0e1a]/80 backdrop-blur border-cyan-500/40 text-cyan-400 font-mono hover:border-cyan-500/60 transition-all focus:shadow-[0_0_20px_rgba(6,182,212,0.2)] cursor-text"
/> />
</div> </div>
@@ -376,20 +633,20 @@ export default function ProfilePage() {
<Input <Input
type="password" type="password"
placeholder="Current pswd" placeholder="Current pswd"
className="bg-[#0a0e1a]/80 backdrop-blur border-cyan-500/40 text-cyan-400 placeholder:text-cyan-400/30 font-mono hover:border-cyan-500/60 transition-all focus:border-cyan-400 focus:shadow-[0_0_20px_rgba(6,182,212,0.2)]" className="bg-[#0a0e1a]/80 backdrop-blur border-cyan-500/40 text-cyan-400 placeholder:text-cyan-400/30 font-mono hover:border-cyan-500/60 transition-all focus:border-cyan-400 focus:shadow-[0_0_20px_rgba(6,182,212,0.2)] cursor-text"
/> />
<Input <Input
type="password" type="password"
placeholder="New pswd" placeholder="New pswd"
className="bg-[#0a0e1a]/80 backdrop-blur border-cyan-500/40 text-cyan-400 placeholder:text-cyan-400/30 font-mono hover:border-cyan-500/60 transition-all focus:border-cyan-400 focus:shadow-[0_0_20px_rgba(6,182,212,0.2)]" className="bg-[#0a0e1a]/80 backdrop-blur border-cyan-500/40 text-cyan-400 placeholder:text-cyan-400/30 font-mono hover:border-cyan-500/60 transition-all focus:border-cyan-400 focus:shadow-[0_0_20px_rgba(6,182,212,0.2)] cursor-text"
/> />
<Input <Input
type="password" type="password"
placeholder="Confirm new pswd" placeholder="Confirm new pswd"
className="bg-[#0a0e1a]/80 backdrop-blur border-cyan-500/40 text-cyan-400 placeholder:text-cyan-400/30 font-mono hover:border-cyan-500/60 transition-all focus:border-cyan-400 focus:shadow-[0_0_20px_rgba(6,182,212,0.2)]" className="bg-[#0a0e1a]/80 backdrop-blur border-cyan-500/40 text-cyan-400 placeholder:text-cyan-400/30 font-mono hover:border-cyan-500/60 transition-all focus:border-cyan-400 focus:shadow-[0_0_20px_rgba(6,182,212,0.2)] cursor-text"
/> />
<Button className="w-full bg-gradient-to-r from-cyan-500 to-cyan-600 hover:from-cyan-400 hover:to-cyan-500 text-black font-mono font-bold shadow-[0_0_20px_rgba(6,182,212,0.3)] hover:shadow-[0_0_40px_rgba(6,182,212,0.5)] transition-all hover:scale-105 active:scale-95"> <Button className="w-full bg-gradient-to-r from-cyan-500 to-cyan-600 hover:from-cyan-400 hover:to-cyan-500 text-black font-mono font-bold shadow-[0_0_20px_rgba(6,182,212,0.3)] hover:shadow-[0_0_40px_rgba(6,182,212,0.5)] transition-all hover:scale-105 active:scale-95 cursor-pointer">
Apply Apply Changes
</Button> </Button>
</div> </div>
@@ -402,18 +659,38 @@ export default function ProfilePage() {
<div className="grid grid-cols-2 gap-3"> <div className="grid grid-cols-2 gap-3">
<Button <Button
variant="outline" variant="outline"
className="bg-gradient-to-r from-cyan-500/90 to-cyan-600/90 hover:from-cyan-400 hover:to-cyan-500 border-0 text-black font-mono font-bold shadow-[0_0_15px_rgba(6,182,212,0.2)] hover:shadow-[0_0_30px_rgba(6,182,212,0.4)] transition-all hover:scale-105 active:scale-95" className="bg-gradient-to-r from-cyan-500/90 to-cyan-600/90 hover:from-cyan-400 hover:to-cyan-500 border-0 text-black font-mono font-bold shadow-[0_0_15px_rgba(6,182,212,0.2)] hover:shadow-[0_0_30px_rgba(6,182,212,0.4)] transition-all hover:scale-105 active:scale-95 cursor-pointer"
> >
Choose File Choose File
</Button> </Button>
<Button <Button
variant="outline" variant="outline"
className="bg-gradient-to-r from-cyan-500/90 to-cyan-600/90 hover:from-cyan-400 hover:to-cyan-500 border-0 text-black font-mono font-bold shadow-[0_0_15px_rgba(6,182,212,0.2)] hover:shadow-[0_0_30px_rgba(6,182,212,0.4)] transition-all hover:scale-105 active:scale-95" className="bg-gradient-to-r from-cyan-500/90 to-cyan-600/90 hover:from-cyan-400 hover:to-cyan-500 border-0 text-black font-mono font-bold shadow-[0_0_15px_rgba(6,182,212,0.2)] hover:shadow-[0_0_30px_rgba(6,182,212,0.4)] transition-all hover:scale-105 active:scale-95 cursor-pointer"
> >
Upload Avatar Upload Avatar
</Button> </Button>
</div> </div>
</div> </div>
{/* Additional Stats */}
<div className="mt-6 pt-6 border-t border-cyan-500/20">
<div className="grid grid-cols-2 gap-3">
<div className="bg-[#0a0e1a]/50 rounded-lg p-3 border border-cyan-500/20 hover:border-cyan-500/40 transition-all cursor-pointer hover:scale-105">
<div className="flex items-center gap-2 mb-1">
<Flame className="w-4 h-4 text-orange-400" />
<span className="text-xs text-cyan-400/60 font-mono">Streak</span>
</div>
<div className="text-lg font-bold text-orange-400 font-mono">7 days</div>
</div>
<div className="bg-[#0a0e1a]/50 rounded-lg p-3 border border-cyan-500/20 hover:border-cyan-500/40 transition-all cursor-pointer hover:scale-105">
<div className="flex items-center gap-2 mb-1">
<Trophy className="w-4 h-4 text-yellow-400" />
<span className="text-xs text-cyan-400/60 font-mono">Rank</span>
</div>
<div className="text-lg font-bold text-yellow-400 font-mono">#42</div>
</div>
</div>
</div>
</div> </div>
</Card> </Card>
</div> </div>
@@ -421,13 +698,13 @@ export default function ProfilePage() {
{/* Enhanced Background grid */} {/* Enhanced Background grid */}
<div <div
className="fixed inset-0 pointer-events-none -z-10 opacity-50" className="fixed inset-0 pointer-events-none -z-10 opacity-40"
style={{ style={{
backgroundImage: ` backgroundImage: `
linear-gradient(rgba(6, 182, 212, 0.05) 1px, transparent 1px), linear-gradient(rgba(6, 182, 212, 0.08) 1px, transparent 1px),
linear-gradient(90deg, rgba(6, 182, 212, 0.05) 1px, transparent 1px) linear-gradient(90deg, rgba(6, 182, 212, 0.08) 1px, transparent 1px)
`, `,
backgroundSize: '50px 50px' backgroundSize: '60px 60px'
}} }}
/> />
@@ -439,6 +716,32 @@ export default function ProfilePage() {
.animate-pulse-slow { .animate-pulse-slow {
animation: pulse-slow 3s ease-in-out infinite; animation: pulse-slow 3s ease-in-out infinite;
} }
@keyframes moveBackground {
0% { transform: translate(0, 0); }
100% { transform: translate(30px, 30px); }
}
@keyframes shimmer {
0% { transform: translateX(-100%); }
100% { transform: translateX(100%); }
}
.animate-shimmer {
animation: shimmer 2s infinite;
}
@keyframes gradient {
0%, 100% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
}
.animate-gradient {
background-size: 200% 200%;
animation: gradient 3s ease infinite;
}
@keyframes pulse-border {
0%, 100% { box-shadow: 0 0 20px rgba(234, 179, 8, 0.2); }
50% { box-shadow: 0 0 30px rgba(234, 179, 8, 0.4); }
}
.animate-pulse-border {
animation: pulse-border 2s ease-in-out infinite;
}
`}</style> `}</style>
</div> </div>
) )

483
app/(home)/main/progress/page.tsx
View File

@@ -1,51 +1,158 @@
"use client" "use client"
import { useState } from "react" import { useState, useEffect, useRef } from "react"
import { Card } from "@/components/ui/card" import { Card } from "@/components/ui/card"
import { Input } from "@/components/ui/input" import { Input } from "@/components/ui/input"
import { Building2, Trophy, User, Search } from "lucide-react" import {
Building2,
Trophy,
User,
Search,
Medal,
Crown,
Star,
TrendingUp,
Award,
Sparkles,
Zap,
Shield
} from "lucide-react"
import Link from "next/link" import Link from "next/link"
export default function RulesPage() { interface Particle {
const [activeTab, setActiveTab] = useState("rules") x: number
y: number
vx: number
vy: number
size: number
opacity: number
color: string
}
export default function ProgressPage() {
const [searchQuery, setSearchQuery] = useState("") const [searchQuery, setSearchQuery] = useState("")
const [particles, setParticles] = useState<Particle[]>([])
const [mousePos, setMousePos] = useState({ x: 0, y: 0 })
const canvasRef = useRef<HTMLCanvasElement>(null)
// Mock data для рейтингов // Mock data для рейтингов
const cityLeaderboard = [ const cityLeaderboard = [
{ rank: 1, name: "Moscow", points: 12450 }, { rank: 1, name: "Moscow", points: 12450, growth: "+320" },
{ rank: 2, name: "Kazan", points: 8920 }, { rank: 2, name: "Kazan", points: 8920, growth: "+180" },
{ rank: 3, name: "SPB", points: 7185 }, { rank: 3, name: "SPB", points: 7185, growth: "+150" },
{ rank: 4, name: "Novosibirsk", points: 5670 }, { rank: 4, name: "Novosibirsk", points: 5670, growth: "+95" },
{ rank: 5, name: "Ekaterinburg", points: 4320 } { rank: 5, name: "Ekaterinburg", points: 4320, growth: "+70" }
] ]
const playerLeaderboard = [ const playerLeaderboard = [
{ rank: 1, name: "cyber_god", points: 2840 }, { rank: 1, name: "cyber_god", points: 2840, level: 12, streak: 15 },
{ rank: 2, name: "h4ck3r_pro", points: 2650 }, { rank: 2, name: "h4ck3r_pro", points: 2650, level: 11, streak: 12 },
{ rank: 3, name: "matrix_neo", points: 2420 }, { rank: 3, name: "matrix_neo", points: 2420, level: 10, streak: 8 },
{ rank: 4, name: "data_wizard", points: 2180 }, { rank: 4, name: "data_wizard", points: 2180, level: 9, streak: 6 },
{ rank: 5, name: "code_ninja", points: 1950 } { rank: 5, name: "code_ninja", points: 1950, level: 8, streak: 5 }
] ]
const kazanLeaderboard = [ const kazanLeaderboard = [
{ rank: 1, name: "pennytige", points: 1337 }, { rank: 1, name: "pennytige", points: 1337, level: 5, isYou: true },
{ rank: 2, name: "kzn_hacker", points: 1280 }, { rank: 2, name: "kzn_hacker", points: 1280, level: 6, isYou: false },
{ rank: 3, name: "tatar_coder", points: 1150 }, { rank: 3, name: "tatar_coder", points: 1150, level: 5, isYou: false },
{ rank: 4, name: "crypto_bear", points: 980 }, { rank: 4, name: "crypto_bear", points: 980, level: 4, isYou: false },
{ rank: 5, name: "byte_master", points: 875 } { rank: 5, name: "byte_master", points: 875, level: 4, isYou: false }
] ]
const allPlayers = [ const allPlayers = [
{ rank: 1, name: "cyber_god", level: 12, points: 2840, city: "Moscow" }, { rank: 1, name: "cyber_god", level: 12, points: 2840, city: "Moscow", change: "up" },
{ rank: 2, name: "h4ck3r_pro", level: 11, points: 2650, city: "SPB" }, { rank: 2, name: "h4ck3r_pro", level: 11, points: 2650, city: "SPB", change: "up" },
{ rank: 3, name: "matrix_neo", level: 10, points: 2420, city: "Kazan" }, { rank: 3, name: "matrix_neo", level: 10, points: 2420, city: "Kazan", change: "same" },
{ rank: 15, name: "pennytige", level: 5, points: 1337, city: "Kazan" } { rank: 4, name: "data_wizard", level: 9, points: 2180, city: "Moscow", change: "down" },
{ rank: 5, name: "code_ninja", level: 8, points: 1950, city: "Kazan", change: "up" },
{ rank: 15, name: "pennytige", level: 5, points: 1337, city: "Kazan", change: "up", isYou: true }
] ]
const filteredPlayers = allPlayers.filter(player => const filteredPlayers = allPlayers.filter(player =>
player.name.toLowerCase().includes(searchQuery.toLowerCase()) player.name.toLowerCase().includes(searchQuery.toLowerCase())
) )
// Initialize particles
useEffect(() => {
const initParticles: Particle[] = []
const colors = ['#06b6d4', '#eab308', '#8b5cf6', '#3b82f6', '#10b981']
for (let i = 0; i < 70; i++) {
initParticles.push({
x: Math.random() * (typeof window !== 'undefined' ? window.innerWidth : 1920),
y: Math.random() * (typeof window !== 'undefined' ? window.innerHeight : 1080),
vx: (Math.random() - 0.5) * 0.7,
vy: (Math.random() - 0.5) * 0.7,
size: Math.random() * 2.5 + 1,
opacity: Math.random() * 0.5 + 0.2,
color: colors[Math.floor(Math.random() * colors.length)]
})
}
setParticles(initParticles)
}, [])
// Animate particles
useEffect(() => {
const canvas = canvasRef.current
if (!canvas) return
const ctx = canvas.getContext('2d')
if (!ctx) return
const updateCanvasSize = () => {
canvas.width = window.innerWidth
canvas.height = window.innerHeight
}
updateCanvasSize()
let animationFrameId: number
const animate = () => {
ctx.clearRect(0, 0, canvas.width, canvas.height)
setParticles(prevParticles => {
return prevParticles.map(particle => {
let newX = particle.x + particle.vx
let newY = particle.y + particle.vy
if (newX < 0 || newX > canvas.width) particle.vx *= -1
if (newY < 0 || newY > canvas.height) particle.vy *= -1
newX = Math.max(0, Math.min(canvas.width, newX))
newY = Math.max(0, Math.min(canvas.height, newY))
ctx.shadowBlur = 10
ctx.shadowColor = particle.color
ctx.fillStyle = `${particle.color}${Math.floor(particle.opacity * 255).toString(16).padStart(2, '0')}`
ctx.beginPath()
ctx.arc(newX, newY, particle.size, 0, Math.PI * 2)
ctx.fill()
return { ...particle, x: newX, y: newY }
})
})
animationFrameId = requestAnimationFrame(animate)
}
animate()
window.addEventListener('resize', updateCanvasSize)
return () => {
cancelAnimationFrame(animationFrameId)
window.removeEventListener('resize', updateCanvasSize)
}
}, [])
// Mouse parallax
useEffect(() => {
const handleMouseMove = (e: MouseEvent) => {
setMousePos({ x: e.clientX, y: e.clientY })
}
window.addEventListener('mousemove', handleMouseMove)
return () => window.removeEventListener('mousemove', handleMouseMove)
}, [])
const getRankColor = (rank: number) => { const getRankColor = (rank: number) => {
if (rank === 1) return "text-yellow-400" if (rank === 1) return "text-yellow-400"
if (rank === 2) return "text-gray-300" if (rank === 2) return "text-gray-300"
@@ -53,11 +160,56 @@ export default function RulesPage() {
return "text-cyan-400" return "text-cyan-400"
} }
const getRankIcon = (rank: number) => {
if (rank === 1) return <Crown className="w-5 h-5 text-yellow-400" />
if (rank === 2) return <Medal className="w-5 h-5 text-gray-300" />
if (rank === 3) return <Award className="w-5 h-5 text-amber-600" />
return null
}
const getRankBg = (rank: number) => {
if (rank === 1) return "bg-gradient-to-br from-yellow-500/20 to-orange-500/20 border-yellow-500/40"
if (rank === 2) return "bg-gradient-to-br from-gray-400/20 to-gray-500/20 border-gray-400/40"
if (rank === 3) return "bg-gradient-to-br from-amber-600/20 to-orange-700/20 border-amber-600/40"
return "bg-cyan-500/5 border-cyan-500/20"
}
return ( return (
<div className="min-h-screen bg-[#0a0e1a] relative overflow-hidden"> <div className="min-h-screen bg-[#0a0e1a] relative overflow-hidden">
{/* Animated particles canvas */}
<canvas
ref={canvasRef}
className="fixed inset-0 pointer-events-none z-0"
style={{ opacity: 0.5 }}
/>
{/* Animated background effects */} {/* Animated background effects */}
<div className="fixed top-20 left-20 w-96 h-96 bg-cyan-500/5 rounded-full blur-[120px] animate-pulse" /> <div
<div className="fixed bottom-20 right-20 w-96 h-96 bg-purple-500/5 rounded-full blur-[120px] animate-pulse" style={{ animationDelay: '1s' }} /> className="fixed w-[500px] h-[500px] bg-cyan-500/10 rounded-full blur-[150px] animate-pulse transition-transform duration-1000"
style={{
top: '10%',
left: '15%',
transform: `translate(${(mousePos.x - (typeof window !== 'undefined' ? window.innerWidth : 1920) / 2) * 0.03}px, ${(mousePos.y - (typeof window !== 'undefined' ? window.innerHeight : 1080) / 2) * 0.03}px)`
}}
/>
<div
className="fixed w-[500px] h-[500px] bg-yellow-500/10 rounded-full blur-[150px] animate-pulse transition-transform duration-1000"
style={{
bottom: '10%',
right: '15%',
animationDelay: '1s',
transform: `translate(${-(mousePos.x - (typeof window !== 'undefined' ? window.innerWidth : 1920) / 2) * 0.03}px, ${-(mousePos.y - (typeof window !== 'undefined' ? window.innerHeight : 1080) / 2) * 0.03}px)`
}}
/>
<div
className="fixed w-[400px] h-[400px] bg-purple-500/8 rounded-full blur-[120px] animate-pulse transition-transform duration-1000"
style={{
top: '50%',
left: '50%',
animationDelay: '0.5s',
transform: `translate(-50%, -50%) translate(${(mousePos.x - (typeof window !== 'undefined' ? window.innerWidth : 1920) / 2) * 0.02}px, ${(mousePos.y - (typeof window !== 'undefined' ? window.innerHeight : 1080) / 2) * 0.02}px)`
}}
/>
{/* Header */} {/* Header */}
<header className="bg-[#0d1117]/80 backdrop-blur-xl border-b border-cyan-500/30 sticky top-0 z-50 shadow-lg shadow-cyan-500/5"> <header className="bg-[#0d1117]/80 backdrop-blur-xl border-b border-cyan-500/30 sticky top-0 z-50 shadow-lg shadow-cyan-500/5">
@@ -65,24 +217,24 @@ export default function RulesPage() {
<div className="flex items-center justify-center"> <div className="flex items-center justify-center">
<div className="flex items-center gap-12"> <div className="flex items-center gap-12">
<Link href="/main"> <Link href="/main">
<button className="text-sm font-bold tracking-[0.2em] transition-all duration-200 font-mono uppercase text-cyan-500/50 hover:text-cyan-400/80 hover:scale-105"> <button className="text-sm font-bold tracking-[0.2em] transition-all duration-200 font-mono uppercase text-cyan-500/50 hover:text-cyan-400/80 hover:scale-105 cursor-pointer">
Main Main
</button> </button>
</Link> </Link>
<Link href="/main/progress"> <button className="text-sm font-bold tracking-[0.2em] transition-all duration-200 font-mono uppercase text-cyan-400 scale-110 drop-shadow-[0_0_8px_rgba(6,182,212,0.5)] cursor-pointer">
<button className="text-sm font-bold tracking-[0.2em] transition-all duration-200 font-mono uppercase text-cyan-500/50 hover:text-cyan-400/80 hover:scale-105">
Progress Progress
</button> </button>
</Link>
<Link href="/main/profile"> <Link href="/main/profile">
<button className="text-sm font-bold tracking-[0.2em] transition-all duration-200 font-mono uppercase text-cyan-500/50 hover:text-cyan-400/80 hover:scale-105"> <button className="text-sm font-bold tracking-[0.2em] transition-all duration-200 font-mono uppercase text-cyan-500/50 hover:text-cyan-400/80 hover:scale-105 cursor-pointer">
Profile Profile
</button> </button>
</Link> </Link>
<button className="text-sm font-bold tracking-[0.2em] transition-all duration-200 font-mono uppercase text-cyan-400 scale-110 drop-shadow-[0_0_8px_rgba(6,182,212,0.5)]"> <Link href="/main/rules">
<button className="text-sm font-bold tracking-[0.2em] transition-all duration-200 font-mono uppercase text-cyan-500/50 hover:text-cyan-400/80 hover:scale-105 cursor-pointer">
Rules Rules
</button> </button>
<button className="text-sm font-bold tracking-[0.2em] transition-all duration-200 font-mono uppercase text-cyan-500/50 hover:text-cyan-400/80 hover:scale-105"> </Link>
<button className="text-sm font-bold tracking-[0.2em] transition-all duration-200 font-mono uppercase text-cyan-500/50 hover:text-cyan-400/80 hover:scale-105 cursor-pointer">
Logoff Logoff
</button> </button>
</div> </div>
@@ -92,39 +244,73 @@ export default function RulesPage() {
{/* Main Content */} {/* Main Content */}
<main className="container mx-auto px-6 py-8 max-w-7xl relative z-10"> <main className="container mx-auto px-6 py-8 max-w-7xl relative z-10">
{/* Page Title */}
<div className="mb-8 text-center">
<div className="inline-flex items-center gap-3 mb-2">
<Trophy className="w-8 h-8 text-yellow-400 animate-pulse" />
<h1 className="text-3xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-cyan-400 via-blue-400 to-purple-400 font-mono">
Leaderboards
</h1>
<Trophy className="w-8 h-8 text-yellow-400 animate-pulse" />
</div>
<p className="text-cyan-400/60 font-mono text-sm">Соревнуйся с лучшими хакерами!</p>
</div>
{/* Top Leaderboards */} {/* Top Leaderboards */}
<div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-6"> <div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
{/* Топ городов */} {/* Топ городов */}
<Card className="bg-[#0d1117]/50 backdrop-blur-xl border-2 border-cyan-500/30 p-6 shadow-[0_0_30px_rgba(6,182,212,0.1)] hover:shadow-[0_0_50px_rgba(6,182,212,0.2)] transition-all duration-300 relative overflow-hidden group"> <Card className="bg-[#0d1117]/50 backdrop-blur-xl border-2 border-cyan-500/30 p-6 shadow-[0_0_30px_rgba(6,182,212,0.1)] hover:shadow-[0_0_50px_rgba(6,182,212,0.2)] transition-all duration-300 relative overflow-hidden group">
<div className="absolute inset-0 bg-gradient-to-br from-cyan-500/5 to-transparent opacity-0 group-hover:opacity-100 transition-opacity" /> <div className="absolute inset-0 bg-gradient-to-br from-cyan-500/5 to-transparent opacity-0 group-hover:opacity-100 transition-opacity" />
<div className="relative z-10"> {/* Animated background pattern */}
<div className="flex items-center gap-3 mb-4"> <div className="absolute inset-0 opacity-5">
<div className="w-10 h-10 bg-cyan-500/20 rounded-lg flex items-center justify-center"> <div className="absolute inset-0" style={{
<Building2 className="w-5 h-5 text-cyan-400" /> backgroundImage: `radial-gradient(circle at 2px 2px, rgba(6, 182, 212, 0.4) 1px, transparent 0)`,
backgroundSize: '25px 25px',
animation: 'moveBackground 20s linear infinite'
}} />
</div> </div>
<div className="relative z-10">
<div className="flex items-center gap-3 mb-5">
<div className="w-12 h-12 bg-gradient-to-br from-cyan-500/20 to-blue-500/20 rounded-xl flex items-center justify-center border border-cyan-500/30">
<Building2 className="w-6 h-6 text-cyan-400" />
</div>
<div>
<h3 className="text-lg font-bold text-cyan-400 font-mono"> <h3 className="text-lg font-bold text-cyan-400 font-mono">
Топ городов Топ городов
</h3> </h3>
<p className="text-xs text-cyan-400/50 font-mono">City Rankings</p>
</div>
</div> </div>
<div className="space-y-2"> <div className="space-y-2">
{cityLeaderboard.map((entry) => ( {cityLeaderboard.map((entry, index) => (
<div <div
key={entry.rank} key={entry.rank}
className="flex items-center justify-between p-3 bg-[#0a0e1a]/80 rounded-lg border border-cyan-500/20 hover:border-cyan-500/40 transition-all group/item" className={`flex items-center justify-between p-3 rounded-xl border transition-all group/item cursor-pointer hover:scale-[1.02] ${getRankBg(entry.rank)} hover:shadow-[0_0_20px_rgba(6,182,212,0.15)]`}
style={{ animationDelay: `${index * 0.1}s` }}
> >
<div className="flex items-center gap-3"> <div className="flex items-center gap-3 flex-1">
<span className={`font-bold font-mono text-sm w-8 ${getRankColor(entry.rank)}`}> <div className="flex items-center gap-2 w-16">
{getRankIcon(entry.rank)}
<span className={`font-bold font-mono text-sm ${getRankColor(entry.rank)}`}>
#{entry.rank} #{entry.rank}
</span> </span>
<span className="text-cyan-400 font-mono text-sm"> </div>
<span className="text-cyan-400 font-mono text-sm font-semibold group-hover/item:text-cyan-300 transition-colors">
{entry.name} {entry.name}
</span> </span>
</div> </div>
<div className="flex flex-col items-end">
<span className="text-green-400 font-mono font-bold text-sm"> <span className="text-green-400 font-mono font-bold text-sm">
{entry.points.toLocaleString()} {entry.points.toLocaleString()}
</span> </span>
<span className="text-green-400/60 font-mono text-xs flex items-center gap-1">
<TrendingUp className="w-3 h-3" />
{entry.growth}
</span>
</div>
</div> </div>
))} ))}
</div> </div>
@@ -135,29 +321,54 @@ export default function RulesPage() {
<Card className="bg-[#0d1117]/50 backdrop-blur-xl border-2 border-yellow-500/30 p-6 shadow-[0_0_30px_rgba(234,179,8,0.1)] hover:shadow-[0_0_50px_rgba(234,179,8,0.2)] transition-all duration-300 relative overflow-hidden group"> <Card className="bg-[#0d1117]/50 backdrop-blur-xl border-2 border-yellow-500/30 p-6 shadow-[0_0_30px_rgba(234,179,8,0.1)] hover:shadow-[0_0_50px_rgba(234,179,8,0.2)] transition-all duration-300 relative overflow-hidden group">
<div className="absolute inset-0 bg-gradient-to-br from-yellow-500/5 to-transparent opacity-0 group-hover:opacity-100 transition-opacity" /> <div className="absolute inset-0 bg-gradient-to-br from-yellow-500/5 to-transparent opacity-0 group-hover:opacity-100 transition-opacity" />
<div className="relative z-10"> {/* Animated background pattern */}
<div className="flex items-center gap-3 mb-4"> <div className="absolute inset-0 opacity-5">
<div className="w-10 h-10 bg-yellow-500/20 rounded-lg flex items-center justify-center"> <div className="absolute inset-0" style={{
<Trophy className="w-5 h-5 text-yellow-400" /> backgroundImage: `radial-gradient(circle at 2px 2px, rgba(234, 179, 8, 0.4) 1px, transparent 0)`,
backgroundSize: '25px 25px',
animation: 'moveBackground 20s linear infinite'
}} />
</div> </div>
<div className="relative z-10">
<div className="flex items-center gap-3 mb-5">
<div className="w-12 h-12 bg-gradient-to-br from-yellow-500/20 to-orange-500/20 rounded-xl flex items-center justify-center border border-yellow-500/30">
<Trophy className="w-6 h-6 text-yellow-400 animate-pulse" />
</div>
<div>
<h3 className="text-lg font-bold text-yellow-400 font-mono"> <h3 className="text-lg font-bold text-yellow-400 font-mono">
Топ игроков Топ игроков
</h3> </h3>
<p className="text-xs text-yellow-400/50 font-mono">Global Rankings</p>
</div>
</div> </div>
<div className="space-y-2"> <div className="space-y-2">
{playerLeaderboard.map((entry) => ( {playerLeaderboard.map((entry, index) => (
<div <div
key={entry.rank} key={entry.rank}
className="flex items-center justify-between p-3 bg-[#0a0e1a]/80 rounded-lg border border-yellow-500/20 hover:border-yellow-500/40 transition-all group/item" className={`flex items-center justify-between p-3 rounded-xl border transition-all group/item cursor-pointer hover:scale-[1.02] ${getRankBg(entry.rank)} hover:shadow-[0_0_20px_rgba(234,179,8,0.15)]`}
style={{ animationDelay: `${index * 0.1}s` }}
> >
<div className="flex items-center gap-3"> <div className="flex items-center gap-3 flex-1">
<span className={`font-bold font-mono text-sm w-8 ${getRankColor(entry.rank)}`}> <div className="flex items-center gap-2 w-16">
{getRankIcon(entry.rank)}
<span className={`font-bold font-mono text-sm ${getRankColor(entry.rank)}`}>
#{entry.rank} #{entry.rank}
</span> </span>
<span className="text-cyan-400 font-mono text-sm"> </div>
<div className="flex flex-col">
<span className="text-cyan-400 font-mono text-sm font-semibold group-hover/item:text-cyan-300 transition-colors">
{entry.name} {entry.name}
</span> </span>
<div className="flex items-center gap-2 text-xs">
<span className="text-cyan-400/60 font-mono">Lvl {entry.level}</span>
<span className="text-orange-400 font-mono flex items-center gap-1">
<Zap className="w-3 h-3" />
{entry.streak}
</span>
</div>
</div>
</div> </div>
<span className="text-green-400 font-mono font-bold text-sm"> <span className="text-green-400 font-mono font-bold text-sm">
{entry.points.toLocaleString()} {entry.points.toLocaleString()}
@@ -169,32 +380,61 @@ export default function RulesPage() {
</Card> </Card>
{/* Топ Kazan */} {/* Топ Kazan */}
<Card className="bg-[#0d1117]/50 backdrop-blur-xl border-2 border-cyan-500/30 p-6 shadow-[0_0_30px_rgba(6,182,212,0.1)] hover:shadow-[0_0_50px_rgba(6,182,212,0.2)] transition-all duration-300 relative overflow-hidden group"> <Card className="bg-[#0d1117]/50 backdrop-blur-xl border-2 border-purple-500/30 p-6 shadow-[0_0_30px_rgba(168,85,247,0.1)] hover:shadow-[0_0_50px_rgba(168,85,247,0.2)] transition-all duration-300 relative overflow-hidden group">
<div className="absolute inset-0 bg-gradient-to-br from-cyan-500/5 to-transparent opacity-0 group-hover:opacity-100 transition-opacity" /> <div className="absolute inset-0 bg-gradient-to-br from-purple-500/5 to-transparent opacity-0 group-hover:opacity-100 transition-opacity" />
{/* Animated background pattern */}
<div className="absolute inset-0 opacity-5">
<div className="absolute inset-0" style={{
backgroundImage: `radial-gradient(circle at 2px 2px, rgba(168, 85, 247, 0.4) 1px, transparent 0)`,
backgroundSize: '25px 25px',
animation: 'moveBackground 20s linear infinite'
}} />
</div>
<div className="relative z-10"> <div className="relative z-10">
<div className="flex items-center gap-3 mb-4"> <div className="flex items-center gap-3 mb-5">
<div className="w-10 h-10 bg-cyan-500/20 rounded-lg flex items-center justify-center"> <div className="w-12 h-12 bg-gradient-to-br from-purple-500/20 to-pink-500/20 rounded-xl flex items-center justify-center border border-purple-500/30">
<User className="w-5 h-5 text-cyan-400" /> <Shield className="w-6 h-6 text-purple-400" />
</div> </div>
<h3 className="text-lg font-bold text-cyan-400 font-mono"> <div>
<h3 className="text-lg font-bold text-purple-400 font-mono">
Топ Kazan Топ Kazan
</h3> </h3>
<p className="text-xs text-purple-400/50 font-mono">Local Rankings</p>
</div>
</div> </div>
<div className="space-y-2"> <div className="space-y-2">
{kazanLeaderboard.map((entry) => ( {kazanLeaderboard.map((entry, index) => (
<div <div
key={entry.rank} key={entry.rank}
className="flex items-center justify-between p-3 bg-[#0a0e1a]/80 rounded-lg border border-cyan-500/20 hover:border-cyan-500/40 transition-all group/item" className={`flex items-center justify-between p-3 rounded-xl border transition-all group/item cursor-pointer hover:scale-[1.02] ${
entry.isYou
? 'bg-gradient-to-br from-cyan-500/30 to-blue-500/30 border-cyan-500/60 shadow-[0_0_25px_rgba(6,182,212,0.2)] animate-pulse-slow'
: getRankBg(entry.rank)
} hover:shadow-[0_0_20px_rgba(168,85,247,0.15)]`}
style={{ animationDelay: `${index * 0.1}s` }}
> >
<div className="flex items-center gap-3"> <div className="flex items-center gap-3 flex-1">
<span className={`font-bold font-mono text-sm w-8 ${getRankColor(entry.rank)}`}> <div className="flex items-center gap-2 w-16">
{getRankIcon(entry.rank)}
<span className={`font-bold font-mono text-sm ${getRankColor(entry.rank)}`}>
#{entry.rank} #{entry.rank}
</span> </span>
<span className="text-cyan-400 font-mono text-sm"> </div>
<div className="flex items-center gap-2">
<span className={`font-mono text-sm font-semibold transition-colors ${
entry.isYou ? 'text-cyan-300' : 'text-cyan-400 group-hover/item:text-cyan-300'
}`}>
{entry.name} {entry.name}
</span> </span>
{entry.isYou && (
<span className="px-2 py-0.5 bg-cyan-500 text-black text-[10px] font-mono font-bold rounded-full">
YOU
</span>
)}
</div>
</div> </div>
<span className="text-green-400 font-mono font-bold text-sm"> <span className="text-green-400 font-mono font-bold text-sm">
{entry.points.toLocaleString()} {entry.points.toLocaleString()}
@@ -211,78 +451,121 @@ export default function RulesPage() {
<div className="absolute inset-0 bg-gradient-to-r from-transparent via-cyan-500/10 to-transparent -translate-x-full group-hover:translate-x-full transition-transform duration-1000" /> <div className="absolute inset-0 bg-gradient-to-r from-transparent via-cyan-500/10 to-transparent -translate-x-full group-hover:translate-x-full transition-transform duration-1000" />
<div className="relative z-10"> <div className="relative z-10">
<div className="flex items-center gap-3 mb-6"> <div className="flex items-center justify-between mb-6">
<Trophy className="w-6 h-6 text-cyan-400 animate-pulse" /> <div className="flex items-center gap-3">
<div className="w-12 h-12 bg-gradient-to-br from-cyan-500/20 to-blue-500/20 rounded-xl flex items-center justify-center border border-cyan-500/30">
<Sparkles className="w-6 h-6 text-cyan-400 animate-pulse" />
</div>
<div>
<h3 className="text-xl font-bold text-cyan-400 font-mono"> <h3 className="text-xl font-bold text-cyan-400 font-mono">
Все игроки Все игроки
</h3> </h3>
<p className="text-xs text-cyan-400/50 font-mono">Complete Rankings</p>
</div>
</div>
<div className="flex items-center gap-2 px-4 py-2 bg-gradient-to-r from-cyan-500/10 to-blue-500/10 border border-cyan-500/30 rounded-lg">
<User className="w-4 h-4 text-cyan-400" />
<span className="text-sm font-mono font-bold text-cyan-400">
{allPlayers.length} игроков
</span>
</div>
</div> </div>
{/* Search */} {/* Search */}
<div className="mb-6 relative"> <div className="mb-6 relative">
<Search className="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-cyan-400/50" /> <Search className="absolute left-4 top-1/2 -translate-y-1/2 w-5 h-5 text-cyan-400/50 pointer-events-none" />
<Input <Input
type="text" type="text"
placeholder="Поиск игрока..." placeholder="Поиск игрока..."
value={searchQuery} value={searchQuery}
onChange={(e) => setSearchQuery(e.target.value)} onChange={(e) => setSearchQuery(e.target.value)}
className="pl-12 bg-[#0a0e1a]/80 backdrop-blur border-cyan-500/40 text-cyan-400 placeholder:text-cyan-400/30 font-mono hover:border-cyan-500/60 transition-all focus:border-cyan-400 focus:shadow-[0_0_20px_rgba(6,182,212,0.2)]" className="pl-12 bg-[#0a0e1a]/80 backdrop-blur border-cyan-500/40 text-cyan-400 placeholder:text-cyan-400/30 font-mono hover:border-cyan-500/60 transition-all focus:border-cyan-400 focus:shadow-[0_0_20px_rgba(6,182,212,0.2)] cursor-text h-12 rounded-xl"
/> />
</div> </div>
{/* Table */} {/* Table */}
<div className="overflow-x-auto"> <div className="overflow-x-auto rounded-xl border border-cyan-500/20">
<table className="w-full"> <table className="w-full">
<thead> <thead>
<tr className="border-b border-cyan-500/30"> <tr className="bg-[#0a0e1a]/80 border-b border-cyan-500/30">
<th className="text-left py-4 px-4 text-sm font-mono text-cyan-400/60 uppercase"> <th className="text-left py-4 px-6 text-sm font-mono text-cyan-400/80 uppercase font-bold">
Ранг Ранг
</th> </th>
<th className="text-left py-4 px-4 text-sm font-mono text-cyan-400/60 uppercase"> <th className="text-left py-4 px-6 text-sm font-mono text-cyan-400/80 uppercase font-bold">
Игрок Игрок
</th> </th>
<th className="text-left py-4 px-4 text-sm font-mono text-cyan-400/60 uppercase"> <th className="text-left py-4 px-6 text-sm font-mono text-cyan-400/80 uppercase font-bold">
Уровень Уровень
</th> </th>
<th className="text-left py-4 px-4 text-sm font-mono text-cyan-400/60 uppercase"> <th className="text-left py-4 px-6 text-sm font-mono text-cyan-400/80 uppercase font-bold">
Очки Очки
</th> </th>
<th className="text-left py-4 px-4 text-sm font-mono text-cyan-400/60 uppercase"> <th className="text-left py-4 px-6 text-sm font-mono text-cyan-400/80 uppercase font-bold">
Город Город
</th> </th>
<th className="text-left py-4 px-6 text-sm font-mono text-cyan-400/80 uppercase font-bold">
Тренд
</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
{filteredPlayers.map((player) => ( {filteredPlayers.map((player, index) => (
<tr <tr
key={player.rank} key={player.rank}
className="border-b border-cyan-500/10 hover:bg-cyan-500/5 transition-all group/row" className={`border-b border-cyan-500/10 transition-all group/row cursor-pointer ${
player.isYou
? 'bg-cyan-500/10 hover:bg-cyan-500/15'
: 'hover:bg-cyan-500/5'
}`}
style={{ animationDelay: `${index * 0.05}s` }}
> >
<td className="py-4 px-4"> <td className="py-4 px-6">
<div className="flex items-center gap-2">
{getRankIcon(player.rank)}
<span className={`font-bold font-mono text-sm ${getRankColor(player.rank)}`}> <span className={`font-bold font-mono text-sm ${getRankColor(player.rank)}`}>
#{player.rank} #{player.rank}
</span> </span>
</div>
</td> </td>
<td className="py-4 px-4"> <td className="py-4 px-6">
<span className="text-cyan-400 font-mono text-sm group-hover/row:text-cyan-300 transition-colors"> <div className="flex items-center gap-2">
<span className={`font-mono text-sm font-semibold transition-colors ${
player.isYou ? 'text-cyan-300' : 'text-cyan-400 group-hover/row:text-cyan-300'
}`}>
{player.name} {player.name}
</span> </span>
</td> {player.isYou && (
<td className="py-4 px-4"> <span className="px-2 py-0.5 bg-cyan-500 text-black text-[10px] font-mono font-bold rounded-full">
<span className="text-cyan-400 font-mono text-sm"> YOU
Lvl {player.level}
</span> </span>
)}
</div>
</td> </td>
<td className="py-4 px-4"> <td className="py-4 px-6">
<div className="flex items-center gap-2 px-3 py-1 bg-cyan-500/10 border border-cyan-500/30 rounded-lg w-fit">
<Star className="w-3 h-3 text-cyan-400" />
<span className="text-cyan-400 font-mono text-sm font-bold">
{player.level}
</span>
</div>
</td>
<td className="py-4 px-6">
<span className="text-green-400 font-mono font-bold text-sm"> <span className="text-green-400 font-mono font-bold text-sm">
{player.points.toLocaleString()} {player.points.toLocaleString()}
</span> </span>
</td> </td>
<td className="py-4 px-4"> <td className="py-4 px-6">
<span className="text-cyan-400/70 font-mono text-sm"> <span className="text-cyan-400/70 font-mono text-sm">
{player.city} {player.city}
</span> </span>
</td> </td>
<td className="py-4 px-6">
<div className="flex items-center gap-1">
{player.change === 'up' && <TrendingUp className="w-4 h-4 text-green-400" />}
{player.change === 'down' && <TrendingUp className="w-4 h-4 text-red-400 rotate-180" />}
{player.change === 'same' && <span className="text-cyan-400/50 font-mono text-xs">—</span>}
</div>
</td>
</tr> </tr>
))} ))}
</tbody> </tbody>
@@ -290,10 +573,16 @@ export default function RulesPage() {
</div> </div>
{filteredPlayers.length === 0 && ( {filteredPlayers.length === 0 && (
<div className="text-center py-12"> <div className="text-center py-16">
<p className="text-cyan-400/50 font-mono"> <div className="w-16 h-16 bg-cyan-500/10 rounded-full flex items-center justify-center mx-auto mb-4">
<Search className="w-8 h-8 text-cyan-400/50" />
</div>
<p className="text-cyan-400/50 font-mono text-lg">
Игрок не найден Игрок не найден
</p> </p>
<p className="text-cyan-400/30 font-mono text-sm mt-2">
Попробуйте другой запрос
</p>
</div> </div>
)} )}
</div> </div>
@@ -302,15 +591,29 @@ export default function RulesPage() {
{/* Enhanced Background grid */} {/* Enhanced Background grid */}
<div <div
className="fixed inset-0 pointer-events-none -z-10 opacity-50" className="fixed inset-0 pointer-events-none -z-10 opacity-40"
style={{ style={{
backgroundImage: ` backgroundImage: `
linear-gradient(rgba(6, 182, 212, 0.05) 1px, transparent 1px), linear-gradient(rgba(6, 182, 212, 0.08) 1px, transparent 1px),
linear-gradient(90deg, rgba(6, 182, 212, 0.05) 1px, transparent 1px) linear-gradient(90deg, rgba(6, 182, 212, 0.08) 1px, transparent 1px)
`, `,
backgroundSize: '50px 50px' backgroundSize: '60px 60px'
}} }}
/> />
<style jsx>{`
@keyframes moveBackground {
0% { transform: translate(0, 0); }
100% { transform: translate(25px, 25px); }
}
@keyframes pulse-slow {
0%, 100% { opacity: 1; }
50% { opacity: 0.7; }
}
.animate-pulse-slow {
animation: pulse-slow 3s ease-in-out infinite;
}
`}</style>
</div> </div>
) )
} }