Compare commits
3 Commits
main
...
develop_da
| Author | SHA1 | Date | |
|---|---|---|---|
|
cdccad46c1 | ||
|
|
078ee21548 | ||
|
|
f3caa4ef87 |
411
app/(auth)/register/page.tsx
Normal file
411
app/(auth)/register/page.tsx
Normal 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>
|
||||
)
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
@@ -1,236 +1,748 @@
|
||||
"use client"
|
||||
|
||||
import { useState } from "react"
|
||||
import { useState, useEffect, useRef } from "react"
|
||||
import { Card } from "@/components/ui/card"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { Progress } from "@/components/ui/progress"
|
||||
import { User, Award, BookOpen, Trophy, Star } from "lucide-react"
|
||||
import { Input } from "@/components/ui/input"
|
||||
import { Label } from "@/components/ui/label"
|
||||
import {
|
||||
User,
|
||||
CheckCircle2,
|
||||
Lock,
|
||||
ChevronLeft,
|
||||
ChevronRight,
|
||||
Sparkles,
|
||||
Zap,
|
||||
Trophy,
|
||||
Star,
|
||||
Award,
|
||||
TrendingUp,
|
||||
Shield,
|
||||
Crown,
|
||||
Flame
|
||||
} from "lucide-react"
|
||||
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() {
|
||||
const [activeTab, setActiveTab] = useState("profile")
|
||||
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
|
||||
const userData = {
|
||||
name: "Alex Johnson",
|
||||
nickname: "pennytige",
|
||||
totalPoints: 1337,
|
||||
level: 5,
|
||||
xp: 2450,
|
||||
maxXp: 3000,
|
||||
rank: "Advanced",
|
||||
achievements: 8,
|
||||
coursesCompleted: 12,
|
||||
totalStudyTime: "124h"
|
||||
questsCompleted: 7,
|
||||
totalQuests: 12,
|
||||
gameProgress: 58,
|
||||
rank: "Elite Hacker",
|
||||
joinDate: "15.08.2024"
|
||||
}
|
||||
|
||||
const stats = [
|
||||
{ label: "Level", value: userData.level, icon: Star },
|
||||
{ label: "XP", value: `${userData.xp}/${userData.maxXp}`, icon: Trophy },
|
||||
{ label: "Rank", value: userData.rank, icon: Award }
|
||||
const quests = [
|
||||
{ id: 1, name: "Registration", date: "2024-08-15 14:23", points: 100, completed: true, active: false },
|
||||
{ id: 2, name: "Memories", date: "", points: 100, completed: false, active: true, badge: "Получить подарочек" },
|
||||
{ id: 3, name: "Cyber toy", date: "", points: 100, completed: false, active: false },
|
||||
{ id: 4, name: "Flood", date: "", points: 100, completed: false, active: false },
|
||||
{ id: 5, name: "Core", date: "", points: 100, completed: false, active: false },
|
||||
{ id: 6, name: "Access point", date: "", points: 100, completed: false, active: false }
|
||||
]
|
||||
|
||||
const achievements = [
|
||||
{ title: "First Steps", description: "Complete your first course", unlocked: true },
|
||||
{ title: "Quick Learner", description: "Complete a course in under 24h", unlocked: true },
|
||||
{ title: "Dedication", description: "Study 7 days in a row", unlocked: true },
|
||||
{ title: "Master", description: "Complete 10 courses", unlocked: true },
|
||||
{ title: "Expert", description: "Reach level 5", unlocked: true },
|
||||
{ title: "Marathon", description: "Study for 100 hours", unlocked: true },
|
||||
{ title: "Perfectionist", description: "Score 100% on 5 tests", unlocked: false },
|
||||
{ title: "Legend", description: "Reach level 10", unlocked: false }
|
||||
const badges = [
|
||||
{
|
||||
id: 1,
|
||||
name: "Speed Runner",
|
||||
date: "16.08.2024",
|
||||
description: "За скорость",
|
||||
requirement: "Решить: 8%",
|
||||
icon: "🏃",
|
||||
color: "from-cyan-500 to-blue-500",
|
||||
rarity: "rare"
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: "Precision Master",
|
||||
date: "17.08.2024",
|
||||
description: "За точность",
|
||||
requirement: "Решить: 25%",
|
||||
icon: "🎯",
|
||||
color: "from-purple-500 to-pink-500",
|
||||
rarity: "epic"
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
name: "Secret Master",
|
||||
date: "Заблокировано",
|
||||
description: "Заблокировано",
|
||||
requirement: "Решить: ???",
|
||||
locked: true,
|
||||
icon: "🔒",
|
||||
color: "from-gray-500 to-gray-700",
|
||||
rarity: "legendary"
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
name: "NoName",
|
||||
date: "Заблокировано",
|
||||
description: "",
|
||||
requirement: "Решить:",
|
||||
locked: true,
|
||||
icon: "❓",
|
||||
color: "from-gray-500 to-gray-700",
|
||||
rarity: "unknown"
|
||||
}
|
||||
]
|
||||
|
||||
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 = () => {
|
||||
if (currentBadgeSlide < badges.length - 3) {
|
||||
setCurrentBadgeSlide(currentBadgeSlide + 1)
|
||||
}
|
||||
}
|
||||
|
||||
const prevSlide = () => {
|
||||
if (currentBadgeSlide > 0) {
|
||||
setCurrentBadgeSlide(currentBadgeSlide - 1)
|
||||
}
|
||||
}
|
||||
|
||||
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 (
|
||||
<div className="min-h-screen bg-[#0a0e1a]">
|
||||
<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 */}
|
||||
<div
|
||||
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-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 className="bg-[#0d1117] border-b border-cyan-500/30 sticky top-0 z-50">
|
||||
<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">
|
||||
<nav className="container mx-auto px-6 py-4">
|
||||
<div className="flex items-center justify-center">
|
||||
<div className="flex items-center gap-12">
|
||||
<Link href="/home/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"
|
||||
>
|
||||
<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 cursor-pointer">
|
||||
Main
|
||||
</button>
|
||||
</Link>
|
||||
<Link href="/home/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"
|
||||
>
|
||||
<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 cursor-pointer">
|
||||
Progress
|
||||
</button>
|
||||
</Link>
|
||||
<button
|
||||
onClick={() => setActiveTab("profile")}
|
||||
className="text-sm font-bold tracking-[0.2em] transition-all duration-200 font-mono uppercase text-cyan-400"
|
||||
>
|
||||
<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
|
||||
</button>
|
||||
<Link href="/home/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"
|
||||
>
|
||||
<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
|
||||
</button>
|
||||
</Link>
|
||||
<Link href="/login">
|
||||
<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"
|
||||
>
|
||||
Login
|
||||
</button>
|
||||
</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
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
{/* Main Content */}
|
||||
<main className="container mx-auto px-6 py-8 max-w-6xl">
|
||||
<main className="container mx-auto px-6 py-8 max-w-7xl relative z-10">
|
||||
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
|
||||
{/* User Profile Card */}
|
||||
<Card className="lg:col-span-1 bg-[#0d1117] border-2 border-cyan-500/30 p-6">
|
||||
<div className="text-center">
|
||||
{/* Avatar */}
|
||||
<div className="w-32 h-32 bg-gradient-to-br from-cyan-500/20 to-blue-500/20 rounded-full flex items-center justify-center mx-auto mb-4 border-4 border-cyan-500/30">
|
||||
<User className="w-16 h-16 text-cyan-400" />
|
||||
</div>
|
||||
|
||||
{/* User Info */}
|
||||
<h2 className="text-2xl font-bold text-cyan-400 font-mono mb-1">
|
||||
{userData.name}
|
||||
</h2>
|
||||
<p className="text-cyan-400/60 font-mono text-sm mb-6">
|
||||
{userData.rank} • Level {userData.level}
|
||||
</p>
|
||||
|
||||
{/* XP Progress */}
|
||||
<div className="mb-6">
|
||||
<div className="flex justify-between items-center mb-2">
|
||||
<span className="text-xs font-mono text-cyan-400/60">XP Progress</span>
|
||||
<span className="text-xs font-mono text-cyan-400">
|
||||
{userData.xp}/{userData.maxXp}
|
||||
</span>
|
||||
</div>
|
||||
<Progress
|
||||
value={(userData.xp / userData.maxXp) * 100}
|
||||
className="h-3 bg-[#0a0e1a]"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Quick Stats */}
|
||||
<div className="grid grid-cols-2 gap-4 mb-6">
|
||||
<div className="bg-[#0a0e1a] border border-cyan-500/20 rounded-lg p-3">
|
||||
<BookOpen className="w-5 h-5 text-cyan-400 mx-auto mb-1" />
|
||||
<div className="text-xl font-bold text-cyan-400 font-mono">
|
||||
{userData.coursesCompleted}
|
||||
</div>
|
||||
<div className="text-xs text-cyan-400/60 font-mono">Courses</div>
|
||||
</div>
|
||||
<div className="bg-[#0a0e1a] border border-cyan-500/20 rounded-lg p-3">
|
||||
<Award className="w-5 h-5 text-cyan-400 mx-auto mb-1" />
|
||||
<div className="text-xl font-bold text-cyan-400 font-mono">
|
||||
{userData.achievements}
|
||||
</div>
|
||||
<div className="text-xs text-cyan-400/60 font-mono">Badges</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Button
|
||||
className="w-full bg-cyan-500 hover:bg-cyan-400 text-black font-mono font-bold"
|
||||
>
|
||||
EDIT PROFILE
|
||||
</Button>
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
{/* Stats and Achievements */}
|
||||
{/* Left Column - Personal Progress & Quests */}
|
||||
<div className="lg:col-span-2 space-y-6">
|
||||
{/* Personal Progress Card */}
|
||||
<Card className="bg-[#0d1117] border-2 border-cyan-500/30 p-6">
|
||||
<h3 className="text-xl font-bold text-cyan-400 font-mono mb-4">
|
||||
Personal progress
|
||||
</h3>
|
||||
<div className="grid grid-cols-3 gap-4">
|
||||
{stats.map((stat, index) => {
|
||||
const Icon = stat.icon
|
||||
return (
|
||||
<div
|
||||
key={index}
|
||||
className="bg-[#0a0e1a] border border-cyan-500/20 rounded-lg p-4 text-center"
|
||||
>
|
||||
<Icon className="w-6 h-6 text-cyan-400 mx-auto mb-2" />
|
||||
<div className="text-2xl font-bold text-cyan-400 font-mono mb-1">
|
||||
{stat.value}
|
||||
{/* Personal Progress */}
|
||||
<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">
|
||||
{/* 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" />
|
||||
|
||||
{/* 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="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" />
|
||||
</div>
|
||||
<h3 className="text-xl font-bold text-cyan-400 font-mono">
|
||||
Personal Progress
|
||||
</h3>
|
||||
</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="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/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="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}
|
||||
</div>
|
||||
<div className="text-xs text-cyan-400/60 font-mono">
|
||||
{stat.label}
|
||||
<div className="text-xs text-cyan-400/60 font-mono font-semibold">
|
||||
Total Points
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
|
||||
<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="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}
|
||||
</div>
|
||||
<div className="text-xs text-cyan-400/60 font-mono font-semibold">
|
||||
Current Level
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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="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}
|
||||
</div>
|
||||
<div className="text-xs text-cyan-400/60 font-mono font-semibold">
|
||||
Quests Completed
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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="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}%
|
||||
</div>
|
||||
<div className="text-xs text-cyan-400/60 font-mono font-semibold">
|
||||
Game Progress
|
||||
</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 */}
|
||||
<div className="space-y-3">
|
||||
<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
|
||||
key={quest.id}
|
||||
className={`flex items-center justify-between p-4 rounded-xl border transition-all duration-300 group/quest relative overflow-hidden cursor-pointer ${
|
||||
quest.active
|
||||
? '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
|
||||
? '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_20px_rgba(6,182,212,0.1)] hover:scale-[1.01]'
|
||||
}`}
|
||||
style={{ animationDelay: `${index * 0.1}s` }}
|
||||
>
|
||||
{/* Animated background for active quest */}
|
||||
{quest.active && (
|
||||
<>
|
||||
<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">
|
||||
{quest.completed ? (
|
||||
<div className="relative">
|
||||
<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">
|
||||
<CheckCircle2 className="w-5 h-5 text-green-400 drop-shadow-[0_0_8px_rgba(34,197,94,0.5)]" />
|
||||
</div>
|
||||
<div className="absolute -inset-1 bg-green-500/20 rounded-lg blur animate-pulse" />
|
||||
</div>
|
||||
) : (
|
||||
<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 items-center gap-3 mb-1">
|
||||
<span className={`font-bold font-mono text-sm ${
|
||||
quest.active ? 'text-yellow-300' : quest.completed ? 'text-green-400' : 'text-cyan-400'
|
||||
}`}>
|
||||
{quest.name}
|
||||
</span>
|
||||
{quest.badge && (
|
||||
<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="w-3 h-3" />
|
||||
{quest.badge}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
{quest.date && (
|
||||
<div className="text-xs text-cyan-400/50 font-mono">
|
||||
{quest.date}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-3">
|
||||
<div className={`font-mono font-bold text-sm px-4 py-2 rounded-lg ${
|
||||
quest.completed
|
||||
? '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>
|
||||
</Card>
|
||||
|
||||
{/* Achievements Card */}
|
||||
<Card className="bg-[#0d1117] border-2 border-cyan-500/30 p-6">
|
||||
<h3 className="text-xl font-bold text-cyan-400 font-mono mb-4">
|
||||
Achievements
|
||||
</h3>
|
||||
<div className="grid grid-cols-2 gap-3">
|
||||
{achievements.map((achievement, index) => (
|
||||
<Card
|
||||
key={index}
|
||||
className={`p-4 transition-all ${
|
||||
achievement.unlocked
|
||||
? 'bg-cyan-500/10 border-cyan-500/40 hover:border-cyan-500/60'
|
||||
: 'bg-[#0a0e1a] border-cyan-500/10 opacity-40'
|
||||
}`}
|
||||
{/* Badges Carousel */}
|
||||
<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-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="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">
|
||||
<button
|
||||
onClick={prevSlide}
|
||||
disabled={currentBadgeSlide === 0}
|
||||
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"
|
||||
>
|
||||
<div className="flex items-start gap-3">
|
||||
<div className={`w-10 h-10 rounded-lg flex items-center justify-center flex-shrink-0 ${
|
||||
achievement.unlocked
|
||||
? 'bg-cyan-500/20'
|
||||
: 'bg-cyan-500/5'
|
||||
}`}>
|
||||
<Trophy className={`w-5 h-5 ${
|
||||
achievement.unlocked
|
||||
? 'text-cyan-400'
|
||||
: 'text-cyan-400/30'
|
||||
}`} />
|
||||
</div>
|
||||
<div className="flex-1 min-w-0">
|
||||
<h4 className={`font-bold font-mono text-sm mb-1 ${
|
||||
achievement.unlocked
|
||||
? 'text-cyan-400'
|
||||
: 'text-cyan-400/30'
|
||||
}`}>
|
||||
{achievement.title}
|
||||
</h4>
|
||||
<p className="text-xs text-cyan-400/50 font-mono line-clamp-2">
|
||||
{achievement.description}
|
||||
</p>
|
||||
</div>
|
||||
<ChevronLeft className="w-6 h-6 text-cyan-400" />
|
||||
</button>
|
||||
|
||||
<div className="flex-1 px-4">
|
||||
<div className="grid grid-cols-3 gap-4">
|
||||
{visibleBadges.map((badge, index) => (
|
||||
<Card
|
||||
key={badge.id}
|
||||
className={`p-6 text-center transition-all duration-300 relative overflow-hidden group/badge cursor-pointer ${
|
||||
badge.locked
|
||||
? '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_40px_rgba(6,182,212,0.25)]'
|
||||
}`}
|
||||
style={{ animationDelay: `${index * 0.1}s` }}
|
||||
>
|
||||
{!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 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={`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 border-2 border-cyan-500/20`
|
||||
}`}>
|
||||
{!badge.locked && (
|
||||
<>
|
||||
<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 transform group-hover/badge:scale-110 transition-transform">
|
||||
{badge.icon}
|
||||
</span>
|
||||
</div>
|
||||
<h4 className={`font-bold font-mono text-sm mb-1 ${
|
||||
badge.locked ? 'text-cyan-400/30' : 'text-cyan-400'
|
||||
}`}>
|
||||
{badge.name}
|
||||
</h4>
|
||||
<p className={`text-xs font-mono mb-2 ${
|
||||
badge.locked ? 'text-cyan-400/20' : 'text-cyan-400/60'
|
||||
}`}>
|
||||
{badge.date}
|
||||
</p>
|
||||
{badge.description && (
|
||||
<p className="text-xs text-cyan-400/60 font-mono mb-1">
|
||||
{badge.description}
|
||||
</p>
|
||||
)}
|
||||
<p className="text-xs text-cyan-400/50 font-mono">
|
||||
{badge.requirement}
|
||||
</p>
|
||||
</div>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<button
|
||||
onClick={nextSlide}
|
||||
disabled={currentBadgeSlide >= badges.length - 3}
|
||||
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" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Dots Indicator */}
|
||||
<div className="flex justify-center gap-2">
|
||||
{Array.from({ length: badges.length - 2 }).map((_, index) => (
|
||||
<button
|
||||
key={index}
|
||||
onClick={() => setCurrentBadgeSlide(index)}
|
||||
className={`h-2 rounded-full transition-all cursor-pointer ${
|
||||
currentBadgeSlide === index
|
||||
? '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'
|
||||
}`}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
{/* 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 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" />
|
||||
|
||||
{/* 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="text-center mb-6">
|
||||
<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-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>
|
||||
{/* Level badge */}
|
||||
<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>
|
||||
<p className="text-xs text-cyan-400/60 font-mono">
|
||||
Member since {userData.joinDate}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* School Nickname */}
|
||||
<div className="space-y-2 mb-6">
|
||||
<Label className="text-cyan-400 font-mono text-sm flex items-center gap-2">
|
||||
<Sparkles className="w-3 h-3" />
|
||||
School nickname:
|
||||
</Label>
|
||||
<Input
|
||||
value={userData.nickname}
|
||||
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)] cursor-text"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Change Password */}
|
||||
<div className="space-y-4 mb-6">
|
||||
<Label className="text-cyan-400 font-mono text-sm flex items-center gap-2">
|
||||
<Lock className="w-3 h-3" />
|
||||
Change password
|
||||
</Label>
|
||||
<Input
|
||||
type="password"
|
||||
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)] cursor-text"
|
||||
/>
|
||||
<Input
|
||||
type="password"
|
||||
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)] cursor-text"
|
||||
/>
|
||||
<Input
|
||||
type="password"
|
||||
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)] 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 cursor-pointer">
|
||||
Apply Changes
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* Change Avatar */}
|
||||
<div className="space-y-3">
|
||||
<Label className="text-cyan-400 font-mono text-sm flex items-center gap-2">
|
||||
<User className="w-3 h-3" />
|
||||
Change avatar
|
||||
</Label>
|
||||
<div className="grid grid-cols-2 gap-3">
|
||||
<Button
|
||||
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 cursor-pointer"
|
||||
>
|
||||
Choose File
|
||||
</Button>
|
||||
<Button
|
||||
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 cursor-pointer"
|
||||
>
|
||||
Upload Avatar
|
||||
</Button>
|
||||
</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>
|
||||
</Card>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
{/* Background grid */}
|
||||
{/* Enhanced Background grid */}
|
||||
<div
|
||||
className="fixed inset-0 pointer-events-none -z-10"
|
||||
className="fixed inset-0 pointer-events-none -z-10 opacity-40"
|
||||
style={{
|
||||
backgroundImage: `
|
||||
linear-gradient(rgba(6, 182, 212, 0.03) 1px, transparent 1px),
|
||||
linear-gradient(90deg, rgba(6, 182, 212, 0.03) 1px, transparent 1px)
|
||||
linear-gradient(rgba(6, 182, 212, 0.08) 1px, transparent 1px),
|
||||
linear-gradient(90deg, rgba(6, 182, 212, 0.08) 1px, transparent 1px)
|
||||
`,
|
||||
backgroundSize: '50px 50px'
|
||||
backgroundSize: '60px 60px'
|
||||
}}
|
||||
/>
|
||||
|
||||
<style jsx>{`
|
||||
@keyframes pulse-slow {
|
||||
0%, 100% { opacity: 1; }
|
||||
50% { opacity: 0.8; }
|
||||
}
|
||||
.animate-pulse-slow {
|
||||
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>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -1,286 +1,619 @@
|
||||
"use client"
|
||||
|
||||
import { useState } from "react"
|
||||
import { useState, useEffect, useRef } from "react"
|
||||
import { Card } from "@/components/ui/card"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { Progress } from "@/components/ui/progress"
|
||||
import { Input } from "@/components/ui/input"
|
||||
import {
|
||||
Building2,
|
||||
Trophy,
|
||||
User,
|
||||
Search,
|
||||
Medal,
|
||||
Crown,
|
||||
Star,
|
||||
TrendingUp,
|
||||
Award,
|
||||
Sparkles,
|
||||
Zap,
|
||||
Shield
|
||||
} from "lucide-react"
|
||||
import Link from "next/link"
|
||||
import { CheckCircle2, Circle, Clock } from "lucide-react"
|
||||
|
||||
interface Particle {
|
||||
x: number
|
||||
y: number
|
||||
vx: number
|
||||
vy: number
|
||||
size: number
|
||||
opacity: number
|
||||
color: string
|
||||
}
|
||||
|
||||
export default function ProgressPage() {
|
||||
const [activeTab, setActiveTab] = useState("progress")
|
||||
const [searchQuery, setSearchQuery] = useState("")
|
||||
const [particles, setParticles] = useState<Particle[]>([])
|
||||
const [mousePos, setMousePos] = useState({ x: 0, y: 0 })
|
||||
const canvasRef = useRef<HTMLCanvasElement>(null)
|
||||
|
||||
// Mock data
|
||||
const courses = [
|
||||
{ id: 1, name: "React", lessons: 12, completed: 8 },
|
||||
{ id: 2, name: "TypeScript", lessons: 10, completed: 6 },
|
||||
{ id: 3, name: "Next.js", lessons: 15, completed: 4 },
|
||||
{ id: 4, name: "Node.js", lessons: 20, completed: 0 }
|
||||
// Mock data для рейтингов
|
||||
const cityLeaderboard = [
|
||||
{ rank: 1, name: "Moscow", points: 12450, growth: "+320" },
|
||||
{ rank: 2, name: "Kazan", points: 8920, growth: "+180" },
|
||||
{ rank: 3, name: "SPB", points: 7185, growth: "+150" },
|
||||
{ rank: 4, name: "Novosibirsk", points: 5670, growth: "+95" },
|
||||
{ rank: 5, name: "Ekaterinburg", points: 4320, growth: "+70" }
|
||||
]
|
||||
|
||||
const assignments = [
|
||||
{ id: 1, course: "React", name: "Build a Todo App", grade: 95, status: "completed" },
|
||||
{ id: 2, course: "TypeScript", name: "Type System", grade: 88, status: "completed" },
|
||||
{ id: 3, course: "Next.js", name: "SSR Project", grade: null, status: "pending" },
|
||||
{ id: 4, course: "Node.js", name: "REST API", grade: null, status: "not_started" }
|
||||
const playerLeaderboard = [
|
||||
{ rank: 1, name: "cyber_god", points: 2840, level: 12, streak: 15 },
|
||||
{ rank: 2, name: "h4ck3r_pro", points: 2650, level: 11, streak: 12 },
|
||||
{ rank: 3, name: "matrix_neo", points: 2420, level: 10, streak: 8 },
|
||||
{ rank: 4, name: "data_wizard", points: 2180, level: 9, streak: 6 },
|
||||
{ rank: 5, name: "code_ninja", points: 1950, level: 8, streak: 5 }
|
||||
]
|
||||
|
||||
const weekActivity = [
|
||||
{ day: "Mon", hours: 2.5 },
|
||||
{ day: "Tue", hours: 3.2 },
|
||||
{ day: "Wed", hours: 1.8 },
|
||||
{ day: "Thu", hours: 4.1 },
|
||||
{ day: "Fri", hours: 2.9 },
|
||||
{ day: "Sat", hours: 3.5 },
|
||||
{ day: "Sun", hours: 1.2 }
|
||||
const kazanLeaderboard = [
|
||||
{ rank: 1, name: "pennytige", points: 1337, level: 5, isYou: true },
|
||||
{ rank: 2, name: "kzn_hacker", points: 1280, level: 6, isYou: false },
|
||||
{ rank: 3, name: "tatar_coder", points: 1150, level: 5, isYou: false },
|
||||
{ rank: 4, name: "crypto_bear", points: 980, level: 4, isYou: false },
|
||||
{ rank: 5, name: "byte_master", points: 875, level: 4, isYou: false }
|
||||
]
|
||||
|
||||
const maxHours = Math.max(...weekActivity.map(d => d.hours))
|
||||
const allPlayers = [
|
||||
{ rank: 1, name: "cyber_god", level: 12, points: 2840, city: "Moscow", change: "up" },
|
||||
{ rank: 2, name: "h4ck3r_pro", level: 11, points: 2650, city: "SPB", change: "up" },
|
||||
{ rank: 3, name: "matrix_neo", level: 10, points: 2420, city: "Kazan", change: "same" },
|
||||
{ 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 =>
|
||||
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) => {
|
||||
if (rank === 1) return "text-yellow-400"
|
||||
if (rank === 2) return "text-gray-300"
|
||||
if (rank === 3) return "text-amber-600"
|
||||
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 (
|
||||
<div className="min-h-screen bg-[#0a0e1a]">
|
||||
<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 */}
|
||||
<div
|
||||
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 className="bg-[#0d1117] border-b border-cyan-500/30 sticky top-0 z-50">
|
||||
<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">
|
||||
<nav className="container mx-auto px-6 py-4">
|
||||
<div className="flex items-center justify-center">
|
||||
<div className="flex items-center gap-12">
|
||||
<Link href="/home/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">
|
||||
<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 cursor-pointer">
|
||||
Main
|
||||
</button>
|
||||
</Link>
|
||||
<button
|
||||
onClick={() => setActiveTab("progress")}
|
||||
className="text-sm font-bold tracking-[0.2em] transition-all duration-200 font-mono uppercase text-cyan-400"
|
||||
>
|
||||
<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">
|
||||
Progress
|
||||
</button>
|
||||
<Link href="/home/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">
|
||||
<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 cursor-pointer">
|
||||
Profile
|
||||
</button>
|
||||
</Link>
|
||||
<Link href="/home/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">
|
||||
<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
|
||||
</button>
|
||||
</Link>
|
||||
<Link href="/login">
|
||||
<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">
|
||||
Login
|
||||
</button>
|
||||
</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
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
{/* Main Content */}
|
||||
<main className="container mx-auto px-6 py-8 max-w-7xl">
|
||||
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
|
||||
{/* Left Column - Course Progress */}
|
||||
<div className="space-y-6">
|
||||
{/* My Courses */}
|
||||
<Card className="bg-[#0d1117] border-2 border-cyan-500/30 p-6">
|
||||
<h3 className="text-xl font-bold text-cyan-400 font-mono mb-4">
|
||||
My courses
|
||||
</h3>
|
||||
<div className="space-y-3">
|
||||
{courses.map((course) => {
|
||||
const progress = (course.completed / course.lessons) * 100
|
||||
return (
|
||||
<Card
|
||||
key={course.id}
|
||||
className="bg-[#0a0e1a] border border-cyan-500/20 p-4 hover:border-cyan-500/40 transition-all"
|
||||
>
|
||||
<div className="flex justify-between items-start mb-2">
|
||||
<h4 className="font-bold text-cyan-400 font-mono text-sm">
|
||||
{course.name}
|
||||
</h4>
|
||||
<span className="text-xs text-cyan-400/60 font-mono">
|
||||
{course.completed}/{course.lessons}
|
||||
<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 */}
|
||||
<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">
|
||||
<div className="absolute inset-0 bg-gradient-to-br from-cyan-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(6, 182, 212, 0.4) 1px, transparent 0)`,
|
||||
backgroundSize: '25px 25px',
|
||||
animation: 'moveBackground 20s linear infinite'
|
||||
}} />
|
||||
</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>
|
||||
<p className="text-xs text-cyan-400/50 font-mono">City Rankings</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
{cityLeaderboard.map((entry, index) => (
|
||||
<div
|
||||
key={entry.rank}
|
||||
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 flex-1">
|
||||
<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}
|
||||
</span>
|
||||
</div>
|
||||
<Progress value={progress} className="h-2 bg-[#0d1117]" />
|
||||
</Card>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
{/* My Grades */}
|
||||
<Card className="bg-[#0d1117] border-2 border-cyan-500/30 p-6">
|
||||
<h3 className="text-xl font-bold text-cyan-400 font-mono mb-4">
|
||||
My grades
|
||||
</h3>
|
||||
<div className="space-y-3">
|
||||
{assignments.slice(0, 3).map((assignment) => (
|
||||
<Card
|
||||
key={assignment.id}
|
||||
className="bg-[#0a0e1a] border border-cyan-500/20 p-3"
|
||||
>
|
||||
<div className="flex justify-between items-center">
|
||||
<div className="flex-1">
|
||||
<div className="text-sm font-bold text-cyan-400 font-mono mb-1">
|
||||
{assignment.course}
|
||||
</div>
|
||||
<div className="text-xs text-cyan-400/60 font-mono">
|
||||
{assignment.name}
|
||||
</div>
|
||||
</div>
|
||||
{assignment.grade ? (
|
||||
<div className="text-xl font-bold text-cyan-400 font-mono">
|
||||
{assignment.grade}%
|
||||
</div>
|
||||
) : (
|
||||
<div className="text-xs text-cyan-400/40 font-mono">
|
||||
Pending
|
||||
</div>
|
||||
)}
|
||||
<span className="text-cyan-400 font-mono text-sm font-semibold group-hover/item:text-cyan-300 transition-colors">
|
||||
{entry.name}
|
||||
</span>
|
||||
</div>
|
||||
</Card>
|
||||
<div className="flex flex-col items-end">
|
||||
<span className="text-green-400 font-mono font-bold text-sm">
|
||||
{entry.points.toLocaleString()}
|
||||
</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>
|
||||
</Card>
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
{/* Mathematics (Separate) */}
|
||||
<Card className="bg-[#0d1117] border-2 border-cyan-500/30 p-6">
|
||||
<h3 className="text-xl font-bold text-cyan-400 font-mono mb-4">
|
||||
Mathematics
|
||||
</h3>
|
||||
<div className="space-y-3">
|
||||
<Card className="bg-[#0a0e1a] border border-cyan-500/20 p-4">
|
||||
<div className="flex justify-between items-start mb-2">
|
||||
<h4 className="font-bold text-cyan-400 font-mono text-sm">
|
||||
Algebra
|
||||
</h4>
|
||||
<span className="text-xs text-cyan-400/60 font-mono">
|
||||
8/10
|
||||
{/* Топ игроков */}
|
||||
<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" />
|
||||
|
||||
{/* Animated background pattern */}
|
||||
<div className="absolute inset-0 opacity-5">
|
||||
<div className="absolute inset-0" style={{
|
||||
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 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>
|
||||
<p className="text-xs text-yellow-400/50 font-mono">Global Rankings</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
{playerLeaderboard.map((entry, index) => (
|
||||
<div
|
||||
key={entry.rank}
|
||||
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 flex-1">
|
||||
<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}
|
||||
</span>
|
||||
</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}
|
||||
</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>
|
||||
<span className="text-green-400 font-mono font-bold text-sm">
|
||||
{entry.points.toLocaleString()}
|
||||
</span>
|
||||
</div>
|
||||
<Progress value={80} className="h-2 bg-[#0d1117]" />
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
{/* Center Column - Assignments Table */}
|
||||
<Card className="lg:col-span-2 bg-[#0d1117] border-2 border-cyan-500/30 p-6">
|
||||
<h3 className="text-xl font-bold text-cyan-400 font-mono mb-4">
|
||||
All Assignments
|
||||
</h3>
|
||||
{/* Топ Kazan */}
|
||||
<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-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="flex items-center gap-3 mb-5">
|
||||
<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">
|
||||
<Shield className="w-6 h-6 text-purple-400" />
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="text-lg font-bold text-purple-400 font-mono">
|
||||
Топ Kazan
|
||||
</h3>
|
||||
<p className="text-xs text-purple-400/50 font-mono">Local Rankings</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
{kazanLeaderboard.map((entry, index) => (
|
||||
<div
|
||||
key={entry.rank}
|
||||
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 flex-1">
|
||||
<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}
|
||||
</span>
|
||||
</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}
|
||||
</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>
|
||||
<span className="text-green-400 font-mono font-bold text-sm">
|
||||
{entry.points.toLocaleString()}
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
{/* All Players Table */}
|
||||
<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-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="flex items-center justify-between mb-6">
|
||||
<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>
|
||||
<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>
|
||||
|
||||
{/* Search */}
|
||||
<div className="mb-6 relative">
|
||||
<Search className="absolute left-4 top-1/2 -translate-y-1/2 w-5 h-5 text-cyan-400/50 pointer-events-none" />
|
||||
<Input
|
||||
type="text"
|
||||
placeholder="Поиск игрока..."
|
||||
value={searchQuery}
|
||||
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)] cursor-text h-12 rounded-xl"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Table */}
|
||||
<div className="overflow-x-auto">
|
||||
<div className="overflow-x-auto rounded-xl border border-cyan-500/20">
|
||||
<table className="w-full">
|
||||
<thead>
|
||||
<tr className="border-b border-cyan-500/20">
|
||||
<th className="text-left py-3 px-4 text-xs font-mono text-cyan-400/60 uppercase">
|
||||
#
|
||||
<tr className="bg-[#0a0e1a]/80 border-b border-cyan-500/30">
|
||||
<th className="text-left py-4 px-6 text-sm font-mono text-cyan-400/80 uppercase font-bold">
|
||||
Ранг
|
||||
</th>
|
||||
<th className="text-left py-3 px-4 text-xs font-mono text-cyan-400/60 uppercase">
|
||||
Course
|
||||
<th className="text-left py-4 px-6 text-sm font-mono text-cyan-400/80 uppercase font-bold">
|
||||
Игрок
|
||||
</th>
|
||||
<th className="text-left py-3 px-4 text-xs font-mono text-cyan-400/60 uppercase">
|
||||
Assignment
|
||||
<th className="text-left py-4 px-6 text-sm font-mono text-cyan-400/80 uppercase font-bold">
|
||||
Уровень
|
||||
</th>
|
||||
<th className="text-left py-3 px-4 text-xs font-mono text-cyan-400/60 uppercase">
|
||||
Grade
|
||||
<th className="text-left py-4 px-6 text-sm font-mono text-cyan-400/80 uppercase font-bold">
|
||||
Очки
|
||||
</th>
|
||||
<th className="text-left py-3 px-4 text-xs font-mono text-cyan-400/60 uppercase">
|
||||
Status
|
||||
<th className="text-left py-4 px-6 text-sm font-mono text-cyan-400/80 uppercase font-bold">
|
||||
Город
|
||||
</th>
|
||||
<th className="text-left py-4 px-6 text-sm font-mono text-cyan-400/80 uppercase font-bold">
|
||||
Тренд
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{assignments.map((assignment, index) => (
|
||||
{filteredPlayers.map((player, index) => (
|
||||
<tr
|
||||
key={assignment.id}
|
||||
className="border-b border-cyan-500/10 hover:bg-cyan-500/5 transition-colors"
|
||||
key={player.rank}
|
||||
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-3 px-4 text-sm font-mono text-cyan-400">
|
||||
{index + 1}
|
||||
</td>
|
||||
<td className="py-3 px-4 text-sm font-mono text-cyan-400">
|
||||
{assignment.course}
|
||||
</td>
|
||||
<td className="py-3 px-4 text-sm font-mono text-cyan-400">
|
||||
{assignment.name}
|
||||
</td>
|
||||
<td className="py-3 px-4 text-sm font-mono text-cyan-400">
|
||||
{assignment.grade ? `${assignment.grade}%` : '-'}
|
||||
</td>
|
||||
<td className="py-3 px-4">
|
||||
<td className="py-4 px-6">
|
||||
<div className="flex items-center gap-2">
|
||||
{assignment.status === 'completed' ? (
|
||||
<>
|
||||
<CheckCircle2 className="w-4 h-4 text-green-400" />
|
||||
<span className="text-xs font-mono text-green-400">
|
||||
Completed
|
||||
</span>
|
||||
</>
|
||||
) : assignment.status === 'pending' ? (
|
||||
<>
|
||||
<Clock className="w-4 h-4 text-yellow-400" />
|
||||
<span className="text-xs font-mono text-yellow-400">
|
||||
Pending
|
||||
</span>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Circle className="w-4 h-4 text-cyan-400/30" />
|
||||
<span className="text-xs font-mono text-cyan-400/30">
|
||||
Not Started
|
||||
</span>
|
||||
</>
|
||||
{getRankIcon(player.rank)}
|
||||
<span className={`font-bold font-mono text-sm ${getRankColor(player.rank)}`}>
|
||||
#{player.rank}
|
||||
</span>
|
||||
</div>
|
||||
</td>
|
||||
<td className="py-4 px-6">
|
||||
<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}
|
||||
</span>
|
||||
{player.isYou && (
|
||||
<span className="px-2 py-0.5 bg-cyan-500 text-black text-[10px] font-mono font-bold rounded-full">
|
||||
YOU
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</td>
|
||||
<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">
|
||||
{player.points.toLocaleString()}
|
||||
</span>
|
||||
</td>
|
||||
<td className="py-4 px-6">
|
||||
<span className="text-cyan-400/70 font-mono text-sm">
|
||||
{player.city}
|
||||
</span>
|
||||
</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>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
{/* Weekly Activity Chart */}
|
||||
<div className="mt-8">
|
||||
<h4 className="text-lg font-bold text-cyan-400 font-mono mb-4">
|
||||
Weekly Activity
|
||||
</h4>
|
||||
<div className="flex items-end justify-between gap-2 h-48">
|
||||
{weekActivity.map((day) => (
|
||||
<div key={day.day} className="flex-1 flex flex-col items-center gap-2">
|
||||
<div className="w-full relative flex-1">
|
||||
<div
|
||||
className="absolute bottom-0 w-full bg-gradient-to-t from-cyan-500 to-cyan-400 rounded-t-lg transition-all hover:from-cyan-400 hover:to-cyan-300"
|
||||
style={{ height: `${(day.hours / maxHours) * 100}%` }}
|
||||
/>
|
||||
</div>
|
||||
<div className="text-xs font-mono text-cyan-400/60">
|
||||
{day.day}
|
||||
</div>
|
||||
<div className="text-xs font-mono text-cyan-400 font-bold">
|
||||
{day.hours}h
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
{filteredPlayers.length === 0 && (
|
||||
<div className="text-center py-16">
|
||||
<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 className="text-cyan-400/30 font-mono text-sm mt-2">
|
||||
Попробуйте другой запрос
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</Card>
|
||||
</main>
|
||||
|
||||
{/* Background grid */}
|
||||
{/* Enhanced Background grid */}
|
||||
<div
|
||||
className="fixed inset-0 pointer-events-none -z-10"
|
||||
className="fixed inset-0 pointer-events-none -z-10 opacity-40"
|
||||
style={{
|
||||
backgroundImage: `
|
||||
linear-gradient(rgba(6, 182, 212, 0.03) 1px, transparent 1px),
|
||||
linear-gradient(90deg, rgba(6, 182, 212, 0.03) 1px, transparent 1px)
|
||||
linear-gradient(rgba(6, 182, 212, 0.08) 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>
|
||||
)
|
||||
}
|
||||
@@ -54,7 +54,7 @@ export default function WelcomePage() {
|
||||
Управляй своим прогрессом в киберпространстве
|
||||
</p>
|
||||
|
||||
<Link href="/home/main">
|
||||
<Link href="/main">
|
||||
<Button
|
||||
size="lg"
|
||||
className="bg-cyan-500 hover:bg-cyan-400 text-black font-bold font-mono tracking-wider px-8 py-6 text-lg rounded-lg shadow-[0_0_30px_rgba(6,182,212,0.4)] hover:shadow-[0_0_50px_rgba(6,182,212,0.6)] transition-all duration-300 group"
|
||||
|
||||
109
werf.yaml
Normal file
109
werf.yaml
Normal file
@@ -0,0 +1,109 @@
|
||||
---
|
||||
project: s21game2-frontend
|
||||
configVersion: 1
|
||||
build:
|
||||
platform:
|
||||
- linux/amd64
|
||||
imageSpec:
|
||||
author: s21party
|
||||
config:
|
||||
keepEssentialWerfLabels: true
|
||||
|
||||
---
|
||||
image: frontend_base
|
||||
platform:
|
||||
- linux/amd64
|
||||
from: registry.corp.s21party.ru/public-mirrors/node:25.2.1-alpine3.22
|
||||
|
||||
---
|
||||
image: frontend_deps
|
||||
platform:
|
||||
- linux/amd64
|
||||
from: frontend_base
|
||||
git:
|
||||
- add: /
|
||||
to: /app
|
||||
includePaths:
|
||||
- package.json
|
||||
- package-lock.json
|
||||
stageDependencies:
|
||||
install:
|
||||
- package.json
|
||||
- package-lock.json
|
||||
shell:
|
||||
beforeInstall:
|
||||
- apk add --no-cache libc6-compat
|
||||
install:
|
||||
- cd /app
|
||||
- |
|
||||
if [ -f yarn.lock ]; then yarn --frozen-lockfile;
|
||||
elif [ -f package-lock.json ]; then npm ci;
|
||||
elif [ -f pnpm-lock.yaml ]; then corepack enable pnpm && pnpm i --frozen-lockfile;
|
||||
else echo "Lockfile not found." && exit 1;
|
||||
fi
|
||||
|
||||
---
|
||||
image: frontend_builder
|
||||
platform:
|
||||
- linux/amd64
|
||||
from: frontend_base
|
||||
imageSpec:
|
||||
config:
|
||||
workingDir: /app
|
||||
env:
|
||||
NEXT_TELEMETRY_DISABLED: "1"
|
||||
git:
|
||||
- add: /
|
||||
to: /app
|
||||
import:
|
||||
- from: frontend_deps
|
||||
before: install
|
||||
add: /app/node_modules
|
||||
to: /app/node_modules
|
||||
shell:
|
||||
install:
|
||||
- cd /app
|
||||
- |
|
||||
if [ -f yarn.lock ]; then yarn run build;
|
||||
elif [ -f package-lock.json ]; then npm run build;
|
||||
elif [ -f pnpm-lock.yaml ]; then corepack enable pnpm && pnpm run build;
|
||||
else echo "Lockfile not found." && exit 1;
|
||||
fi
|
||||
|
||||
---
|
||||
image: frontend_runner
|
||||
platform:
|
||||
- linux/amd64
|
||||
from: frontend_base
|
||||
imageSpec:
|
||||
config:
|
||||
workingDir: /app
|
||||
env:
|
||||
NODE_ENV: "production"
|
||||
PORT: "3000"
|
||||
HOSTNAME: "0.0.0.0"
|
||||
cmd: ["node", "server.js"]
|
||||
user: nextjs
|
||||
expose:
|
||||
- "3000"
|
||||
import:
|
||||
- from: frontend_builder
|
||||
before: setup
|
||||
add: /app/.next/standalone
|
||||
to: /app
|
||||
owner: "1001"
|
||||
group: "1001"
|
||||
- from: frontend_builder
|
||||
before: setup
|
||||
add: /app/.next/static
|
||||
to: /app/.next/static
|
||||
owner: "1001"
|
||||
group: "1001"
|
||||
- from: frontend_builder
|
||||
before: setup
|
||||
add: /app/public
|
||||
to: /app/public
|
||||
shell:
|
||||
beforeSetup:
|
||||
- addgroup --system --gid 1001 nodejs
|
||||
- adduser --system --uid 1001 nextjs
|
||||
Reference in New Issue
Block a user