Add block main page, progress, profile
This commit is contained in:
Daniil
File diff suppressed because it is too large
Load Diff
@@ -3,234 +3,443 @@
|
|||||||
import { useState } from "react"
|
import { useState } from "react"
|
||||||
import { Card } from "@/components/ui/card"
|
import { Card } from "@/components/ui/card"
|
||||||
import { Button } from "@/components/ui/button"
|
import { Button } from "@/components/ui/button"
|
||||||
|
import { Input } from "@/components/ui/input"
|
||||||
|
import { Label } from "@/components/ui/label"
|
||||||
import { Progress } from "@/components/ui/progress"
|
import { Progress } from "@/components/ui/progress"
|
||||||
import { User, Award, BookOpen, Trophy, Star } from "lucide-react"
|
import { User, CheckCircle2, Lock, ChevronLeft, ChevronRight, Sparkles, Zap } from "lucide-react"
|
||||||
import Link from "next/link"
|
import Link from "next/link"
|
||||||
|
|
||||||
export default function ProfilePage() {
|
export default function ProfilePage() {
|
||||||
const [activeTab, setActiveTab] = useState("profile")
|
const [activeTab, setActiveTab] = useState("profile")
|
||||||
|
const [currentBadgeSlide, setCurrentBadgeSlide] = useState(0)
|
||||||
|
|
||||||
// Mock user data
|
// Mock user data
|
||||||
const userData = {
|
const userData = {
|
||||||
name: "Alex Johnson",
|
nickname: "pennytige",
|
||||||
|
totalPoints: 1337,
|
||||||
level: 5,
|
level: 5,
|
||||||
xp: 2450,
|
questsCompleted: 7,
|
||||||
maxXp: 3000,
|
totalQuests: 12,
|
||||||
rank: "Advanced",
|
gameProgress: 58
|
||||||
achievements: 8,
|
|
||||||
coursesCompleted: 12,
|
|
||||||
totalStudyTime: "124h"
|
|
||||||
}
|
}
|
||||||
|
|
||||||
const stats = [
|
const quests = [
|
||||||
{ label: "Level", value: userData.level, icon: Star },
|
{ id: 1, name: "Registration", date: "2024-08-15 14:23", points: 100, completed: true, active: false },
|
||||||
{ label: "XP", value: `${userData.xp}/${userData.maxXp}`, icon: Trophy },
|
{ id: 2, name: "Memories", date: "", points: 100, completed: false, active: true, badge: "Получить подарочек" },
|
||||||
{ label: "Rank", value: userData.rank, icon: Award }
|
{ 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 = [
|
const badges = [
|
||||||
{ title: "First Steps", description: "Complete your first course", unlocked: true },
|
{
|
||||||
{ title: "Quick Learner", description: "Complete a course in under 24h", unlocked: true },
|
id: 1,
|
||||||
{ title: "Dedication", description: "Study 7 days in a row", unlocked: true },
|
name: "Speed Runner",
|
||||||
{ title: "Master", description: "Complete 10 courses", unlocked: true },
|
date: "16.08.2024",
|
||||||
{ title: "Expert", description: "Reach level 5", unlocked: true },
|
description: "За скорость",
|
||||||
{ title: "Marathon", description: "Study for 100 hours", unlocked: true },
|
requirement: "Решить: 8%",
|
||||||
{ title: "Perfectionist", description: "Score 100% on 5 tests", unlocked: false },
|
icon: "🏃",
|
||||||
{ title: "Legend", description: "Reach level 10", unlocked: false }
|
color: "from-cyan-500 to-blue-500"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 2,
|
||||||
|
name: "Precision Master",
|
||||||
|
date: "17.08.2024",
|
||||||
|
description: "За точность",
|
||||||
|
requirement: "Решить: 25%",
|
||||||
|
icon: "🎯",
|
||||||
|
color: "from-purple-500 to-pink-500"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 3,
|
||||||
|
name: "Secret Master",
|
||||||
|
date: "Заблокировано",
|
||||||
|
description: "Заблокировано",
|
||||||
|
requirement: "Решить: ???",
|
||||||
|
locked: true,
|
||||||
|
icon: "🔒",
|
||||||
|
color: "from-gray-500 to-gray-700"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 4,
|
||||||
|
name: "NoName",
|
||||||
|
date: "Заблокировано",
|
||||||
|
description: "",
|
||||||
|
requirement: "Решить:",
|
||||||
|
locked: true,
|
||||||
|
icon: "❓",
|
||||||
|
color: "from-gray-500 to-gray-700"
|
||||||
|
}
|
||||||
]
|
]
|
||||||
|
|
||||||
|
const visibleBadges = badges.slice(currentBadgeSlide, currentBadgeSlide + 3)
|
||||||
|
|
||||||
|
const nextSlide = () => {
|
||||||
|
if (currentBadgeSlide < badges.length - 3) {
|
||||||
|
setCurrentBadgeSlide(currentBadgeSlide + 1)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const prevSlide = () => {
|
||||||
|
if (currentBadgeSlide > 0) {
|
||||||
|
setCurrentBadgeSlide(currentBadgeSlide - 1)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="min-h-screen bg-[#0a0e1a]">
|
<div className="min-h-screen bg-[#0a0e1a] relative overflow-hidden">
|
||||||
|
{/* Animated background effects */}
|
||||||
|
<div className="fixed top-20 left-20 w-96 h-96 bg-cyan-500/5 rounded-full blur-[120px] animate-pulse" />
|
||||||
|
<div className="fixed bottom-20 right-20 w-96 h-96 bg-pink-500/5 rounded-full blur-[120px] animate-pulse" style={{ animationDelay: '1s' }} />
|
||||||
|
<div className="fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[600px] h-[600px] bg-blue-500/3 rounded-full blur-[150px] animate-pulse" style={{ animationDelay: '2s' }} />
|
||||||
|
|
||||||
{/* Header */}
|
{/* 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">
|
<nav className="container mx-auto px-6 py-4">
|
||||||
<div className="flex items-center justify-center">
|
<div className="flex items-center justify-center">
|
||||||
<div className="flex items-center gap-12">
|
<div className="flex items-center gap-12">
|
||||||
<Link href="/home/main">
|
<Link href="/main">
|
||||||
<button
|
<button className="text-sm font-bold tracking-[0.2em] transition-all duration-200 font-mono uppercase text-cyan-500/50 hover:text-cyan-400/80 hover:scale-105">
|
||||||
className="text-sm font-bold tracking-[0.2em] transition-all duration-200 font-mono uppercase text-cyan-500/50 hover:text-cyan-400/80"
|
|
||||||
>
|
|
||||||
Main
|
Main
|
||||||
</button>
|
</button>
|
||||||
</Link>
|
</Link>
|
||||||
<Link href="/home/progress">
|
<Link href="/main/progress">
|
||||||
<button
|
<button className="text-sm font-bold tracking-[0.2em] transition-all duration-200 font-mono uppercase text-cyan-500/50 hover:text-cyan-400/80 hover:scale-105">
|
||||||
className="text-sm font-bold tracking-[0.2em] transition-all duration-200 font-mono uppercase text-cyan-500/50 hover:text-cyan-400/80"
|
|
||||||
>
|
|
||||||
Progress
|
Progress
|
||||||
</button>
|
</button>
|
||||||
</Link>
|
</Link>
|
||||||
<button
|
<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)]">
|
||||||
onClick={() => setActiveTab("profile")}
|
|
||||||
className="text-sm font-bold tracking-[0.2em] transition-all duration-200 font-mono uppercase text-cyan-400"
|
|
||||||
>
|
|
||||||
Profile
|
Profile
|
||||||
</button>
|
</button>
|
||||||
<Link href="/home/rules">
|
<Link href="/main/rules">
|
||||||
<button
|
<button className="text-sm font-bold tracking-[0.2em] transition-all duration-200 font-mono uppercase text-cyan-500/50 hover:text-cyan-400/80 hover:scale-105">
|
||||||
className="text-sm font-bold tracking-[0.2em] transition-all duration-200 font-mono uppercase text-cyan-500/50 hover:text-cyan-400/80"
|
|
||||||
>
|
|
||||||
Rules
|
Rules
|
||||||
</button>
|
</button>
|
||||||
</Link>
|
</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 hover:scale-105">
|
||||||
<button
|
Logoff
|
||||||
className="text-sm font-bold tracking-[0.2em] transition-all duration-200 font-mono uppercase text-cyan-500/50 hover:text-cyan-400/80"
|
</button>
|
||||||
>
|
|
||||||
Login
|
|
||||||
</button>
|
|
||||||
</Link>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</nav>
|
</nav>
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
{/* Main Content */}
|
{/* 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">
|
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
|
||||||
{/* User Profile Card */}
|
{/* Left Column - Personal Progress & Quests */}
|
||||||
<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 */}
|
|
||||||
<div className="lg:col-span-2 space-y-6">
|
<div className="lg:col-span-2 space-y-6">
|
||||||
{/* Personal Progress Card */}
|
{/* Personal Progress */}
|
||||||
<Card className="bg-[#0d1117] border-2 border-cyan-500/30 p-6">
|
<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">
|
||||||
<h3 className="text-xl font-bold text-cyan-400 font-mono mb-4">
|
{/* Animated border glow */}
|
||||||
Personal progress
|
<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" />
|
||||||
</h3>
|
|
||||||
<div className="grid grid-cols-3 gap-4">
|
<div className="relative z-10">
|
||||||
{stats.map((stat, index) => {
|
<div className="flex items-center gap-3 mb-6">
|
||||||
const Icon = stat.icon
|
<Sparkles className="w-5 h-5 text-cyan-400 animate-pulse" />
|
||||||
return (
|
<h3 className="text-xl font-bold text-cyan-400 font-mono">
|
||||||
<div
|
Personal progress
|
||||||
key={index}
|
</h3>
|
||||||
className="bg-[#0a0e1a] border border-cyan-500/20 rounded-lg p-4 text-center"
|
</div>
|
||||||
>
|
|
||||||
<Icon className="w-6 h-6 text-cyan-400 mx-auto mb-2" />
|
<div className="grid grid-cols-2 md:grid-cols-4 gap-4 mb-6">
|
||||||
<div className="text-2xl font-bold text-cyan-400 font-mono mb-1">
|
<div className="bg-gradient-to-br from-[#1a2332] to-[#0d1117] border border-cyan-500/30 rounded-lg p-4 text-center hover:border-cyan-500/50 transition-all hover:scale-105 hover:shadow-[0_0_20px_rgba(6,182,212,0.2)] group/card relative overflow-hidden">
|
||||||
{stat.value}
|
<div className="absolute inset-0 bg-gradient-to-br from-cyan-500/5 to-transparent opacity-0 group-hover/card:opacity-100 transition-opacity" />
|
||||||
|
<div className="relative z-10">
|
||||||
|
<div className="text-3xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-cyan-400 to-blue-400 font-mono mb-1">
|
||||||
|
{userData.totalPoints}
|
||||||
</div>
|
</div>
|
||||||
<div className="text-xs text-cyan-400/60 font-mono">
|
<div className="text-xs text-cyan-400/60 font-mono">
|
||||||
{stat.label}
|
Total Points
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
)
|
</div>
|
||||||
})}
|
<div className="bg-gradient-to-br from-[#1a2332] to-[#0d1117] border border-cyan-500/30 rounded-lg p-4 text-center hover:border-cyan-500/50 transition-all hover:scale-105 hover:shadow-[0_0_20px_rgba(6,182,212,0.2)] group/card relative overflow-hidden">
|
||||||
|
<div className="absolute inset-0 bg-gradient-to-br from-cyan-500/5 to-transparent opacity-0 group-hover/card:opacity-100 transition-opacity" />
|
||||||
|
<div className="relative z-10">
|
||||||
|
<div className="text-3xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-cyan-400 to-blue-400 font-mono mb-1">
|
||||||
|
Level {userData.level}
|
||||||
|
</div>
|
||||||
|
<div className="text-xs text-cyan-400/60 font-mono">
|
||||||
|
Current Level
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="bg-gradient-to-br from-[#1a2332] to-[#0d1117] border border-cyan-500/30 rounded-lg p-4 text-center hover:border-cyan-500/50 transition-all hover:scale-105 hover:shadow-[0_0_20px_rgba(6,182,212,0.2)] group/card relative overflow-hidden">
|
||||||
|
<div className="absolute inset-0 bg-gradient-to-br from-cyan-500/5 to-transparent opacity-0 group-hover/card:opacity-100 transition-opacity" />
|
||||||
|
<div className="relative z-10">
|
||||||
|
<div className="text-3xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-cyan-400 to-blue-400 font-mono mb-1">
|
||||||
|
{userData.questsCompleted}/{userData.totalQuests}
|
||||||
|
</div>
|
||||||
|
<div className="text-xs text-cyan-400/60 font-mono">
|
||||||
|
Quests Completed
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="bg-gradient-to-br from-[#1a2332] to-[#0d1117] border border-cyan-500/30 rounded-lg p-4 text-center hover:border-cyan-500/50 transition-all hover:scale-105 hover:shadow-[0_0_20px_rgba(6,182,212,0.2)] group/card relative overflow-hidden">
|
||||||
|
<div className="absolute inset-0 bg-gradient-to-br from-cyan-500/5 to-transparent opacity-0 group-hover/card:opacity-100 transition-opacity" />
|
||||||
|
<div className="relative z-10">
|
||||||
|
<div className="text-3xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-cyan-400 to-blue-400 font-mono mb-1">
|
||||||
|
{userData.gameProgress}%
|
||||||
|
</div>
|
||||||
|
<div className="text-xs text-cyan-400/60 font-mono">
|
||||||
|
Game Progress
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Quests List */}
|
||||||
|
<div className="space-y-2">
|
||||||
|
{quests.map((quest) => (
|
||||||
|
<div
|
||||||
|
key={quest.id}
|
||||||
|
className={`flex items-center justify-between p-4 rounded-lg border transition-all duration-300 group/quest relative overflow-hidden ${
|
||||||
|
quest.active
|
||||||
|
? 'bg-gradient-to-r from-yellow-900/30 via-yellow-800/20 to-yellow-900/30 border-yellow-500/50 shadow-[0_0_20px_rgba(234,179,8,0.15)] hover:shadow-[0_0_30px_rgba(234,179,8,0.25)] animate-pulse-slow'
|
||||||
|
: quest.completed
|
||||||
|
? 'bg-[#0a0e1a]/80 border-green-500/40 hover:border-green-500/60 hover:shadow-[0_0_20px_rgba(34,197,94,0.1)]'
|
||||||
|
: 'bg-[#0a0e1a]/50 border-cyan-500/20 hover:border-cyan-500/40 hover:shadow-[0_0_15px_rgba(6,182,212,0.1)]'
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
{quest.active && (
|
||||||
|
<div className="absolute inset-0 bg-gradient-to-r from-transparent via-yellow-500/10 to-transparent -translate-x-full group-hover/quest:translate-x-full transition-transform duration-1000" />
|
||||||
|
)}
|
||||||
|
|
||||||
|
<div className="flex items-center gap-4 flex-1 relative z-10">
|
||||||
|
{quest.completed ? (
|
||||||
|
<div className="relative">
|
||||||
|
<CheckCircle2 className="w-5 h-5 text-green-400 flex-shrink-0 drop-shadow-[0_0_8px_rgba(34,197,94,0.5)]" />
|
||||||
|
<div className="absolute inset-0 animate-ping opacity-20">
|
||||||
|
<CheckCircle2 className="w-5 h-5 text-green-400" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<Lock className={`w-5 h-5 flex-shrink-0 ${quest.active ? 'text-yellow-400 animate-pulse' : 'text-cyan-400/50'}`} />
|
||||||
|
)}
|
||||||
|
<div className="flex-1">
|
||||||
|
<div className="flex items-center gap-3">
|
||||||
|
<span className={`font-bold font-mono text-sm ${
|
||||||
|
quest.active ? 'text-yellow-300' : '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-black text-xs font-mono font-bold rounded shadow-[0_0_15px_rgba(236,72,153,0.4)] animate-pulse">
|
||||||
|
<Zap className="inline w-3 h-3 mr-1" />
|
||||||
|
{quest.badge}
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
{quest.date && (
|
||||||
|
<div className="text-xs text-cyan-400/50 font-mono mt-1">
|
||||||
|
{quest.date}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className={`font-mono font-bold text-sm ${
|
||||||
|
quest.completed ? 'text-green-400' : 'text-cyan-400'
|
||||||
|
} drop-shadow-[0_0_8px_rgba(6,182,212,0.5)]`}>
|
||||||
|
{quest.points} pts
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</Card>
|
</Card>
|
||||||
|
|
||||||
{/* Achievements Card */}
|
{/* Badges Carousel */}
|
||||||
<Card className="bg-[#0d1117] border-2 border-cyan-500/30 p-6">
|
<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">
|
||||||
<h3 className="text-xl font-bold text-cyan-400 font-mono mb-4">
|
<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" />
|
||||||
Achievements
|
|
||||||
</h3>
|
<div className="relative z-10">
|
||||||
<div className="grid grid-cols-2 gap-3">
|
<div className="flex items-center justify-between mb-6">
|
||||||
{achievements.map((achievement, index) => (
|
<button
|
||||||
<Card
|
onClick={prevSlide}
|
||||||
key={index}
|
disabled={currentBadgeSlide === 0}
|
||||||
className={`p-4 transition-all ${
|
className="w-12 h-12 rounded-full bg-gradient-to-br from-cyan-500/20 to-cyan-600/10 border border-cyan-500/40 flex items-center justify-center hover:from-cyan-500/30 hover:to-cyan-600/20 hover:border-cyan-400/60 transition-all disabled:opacity-20 disabled:cursor-not-allowed hover:scale-110 hover:shadow-[0_0_20px_rgba(6,182,212,0.3)] active:scale-95"
|
||||||
achievement.unlocked
|
|
||||||
? 'bg-cyan-500/10 border-cyan-500/40 hover:border-cyan-500/60'
|
|
||||||
: 'bg-[#0a0e1a] border-cyan-500/10 opacity-40'
|
|
||||||
}`}
|
|
||||||
>
|
>
|
||||||
<div className="flex items-start gap-3">
|
<ChevronLeft className="w-6 h-6 text-cyan-400" />
|
||||||
<div className={`w-10 h-10 rounded-lg flex items-center justify-center flex-shrink-0 ${
|
</button>
|
||||||
achievement.unlocked
|
|
||||||
? 'bg-cyan-500/20'
|
<div className="flex-1 px-4">
|
||||||
: 'bg-cyan-500/5'
|
<div className="grid grid-cols-3 gap-4">
|
||||||
}`}>
|
{visibleBadges.map((badge) => (
|
||||||
<Trophy className={`w-5 h-5 ${
|
<Card
|
||||||
achievement.unlocked
|
key={badge.id}
|
||||||
? 'text-cyan-400'
|
className={`p-6 text-center transition-all duration-300 relative overflow-hidden group/badge ${
|
||||||
: 'text-cyan-400/30'
|
badge.locked
|
||||||
}`} />
|
? 'bg-[#0a0e1a]/30 border-cyan-500/10 opacity-40'
|
||||||
</div>
|
: 'bg-gradient-to-br from-[#1a2332] to-[#0d1117] border-cyan-500/40 hover:border-cyan-500/70 hover:scale-105 hover:shadow-[0_0_30px_rgba(6,182,212,0.2)]'
|
||||||
<div className="flex-1 min-w-0">
|
}`}
|
||||||
<h4 className={`font-bold font-mono text-sm mb-1 ${
|
>
|
||||||
achievement.unlocked
|
{!badge.locked && (
|
||||||
? 'text-cyan-400'
|
<div className="absolute inset-0 bg-gradient-to-br from-cyan-500/5 to-transparent opacity-0 group-hover/badge:opacity-100 transition-opacity" />
|
||||||
: 'text-cyan-400/30'
|
)}
|
||||||
}`}>
|
|
||||||
{achievement.title}
|
<div className="relative z-10">
|
||||||
</h4>
|
<div className={`w-20 h-20 rounded-xl mx-auto mb-3 flex items-center justify-center text-4xl relative ${
|
||||||
<p className="text-xs text-cyan-400/50 font-mono line-clamp-2">
|
badge.locked ? 'bg-cyan-500/5' : `bg-gradient-to-br ${badge.color}/20 shadow-inner`
|
||||||
{achievement.description}
|
}`}>
|
||||||
</p>
|
{!badge.locked && (
|
||||||
</div>
|
<div className={`absolute inset-0 rounded-xl bg-gradient-to-br ${badge.color} opacity-0 group-hover/badge:opacity-20 blur transition-opacity`} />
|
||||||
|
)}
|
||||||
|
<span className="relative z-10 drop-shadow-lg">{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>
|
</div>
|
||||||
</Card>
|
</div>
|
||||||
))}
|
|
||||||
|
<button
|
||||||
|
onClick={nextSlide}
|
||||||
|
disabled={currentBadgeSlide >= badges.length - 3}
|
||||||
|
className="w-12 h-12 rounded-full bg-gradient-to-br from-cyan-500/20 to-cyan-600/10 border border-cyan-500/40 flex items-center justify-center hover:from-cyan-500/30 hover:to-cyan-600/20 hover:border-cyan-400/60 transition-all disabled:opacity-20 disabled:cursor-not-allowed hover:scale-110 hover:shadow-[0_0_20px_rgba(6,182,212,0.3)] active:scale-95"
|
||||||
|
>
|
||||||
|
<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 ${
|
||||||
|
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>
|
</div>
|
||||||
</Card>
|
</Card>
|
||||||
</div>
|
</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">
|
||||||
|
<div className="absolute inset-0 bg-gradient-to-br from-cyan-500/5 via-transparent to-pink-500/5 opacity-0 group-hover:opacity-100 transition-opacity duration-500" />
|
||||||
|
|
||||||
|
<div className="relative z-10">
|
||||||
|
<div className="text-center mb-6">
|
||||||
|
<div className="w-24 h-24 bg-gradient-to-br from-cyan-500/30 to-blue-500/30 rounded-full flex items-center justify-center mx-auto mb-4 border-4 border-cyan-500/40 shadow-[0_0_30px_rgba(6,182,212,0.2)] hover:scale-110 hover:shadow-[0_0_50px_rgba(6,182,212,0.4)] transition-all duration-300 group/avatar relative overflow-hidden">
|
||||||
|
<div className="absolute inset-0 bg-gradient-to-br from-cyan-400/20 to-blue-400/20 animate-pulse" />
|
||||||
|
<User className="w-12 h-12 text-cyan-400 relative z-10 drop-shadow-[0_0_10px_rgba(6,182,212,0.5)]" />
|
||||||
|
</div>
|
||||||
|
<h3 className="text-xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-cyan-400 to-blue-400 font-mono">
|
||||||
|
Profile settings
|
||||||
|
</h3>
|
||||||
|
</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)]"
|
||||||
|
/>
|
||||||
|
</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)]"
|
||||||
|
/>
|
||||||
|
<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)]"
|
||||||
|
/>
|
||||||
|
<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)]"
|
||||||
|
/>
|
||||||
|
<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">
|
||||||
|
Apply
|
||||||
|
</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"
|
||||||
|
>
|
||||||
|
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"
|
||||||
|
>
|
||||||
|
Upload Avatar
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</Card>
|
||||||
</div>
|
</div>
|
||||||
</main>
|
</main>
|
||||||
|
|
||||||
{/* Background grid */}
|
{/* Enhanced Background grid */}
|
||||||
<div
|
<div
|
||||||
className="fixed inset-0 pointer-events-none -z-10"
|
className="fixed inset-0 pointer-events-none -z-10 opacity-50"
|
||||||
style={{
|
style={{
|
||||||
backgroundImage: `
|
backgroundImage: `
|
||||||
linear-gradient(rgba(6, 182, 212, 0.03) 1px, transparent 1px),
|
linear-gradient(rgba(6, 182, 212, 0.05) 1px, transparent 1px),
|
||||||
linear-gradient(90deg, rgba(6, 182, 212, 0.03) 1px, transparent 1px)
|
linear-gradient(90deg, rgba(6, 182, 212, 0.05) 1px, transparent 1px)
|
||||||
`,
|
`,
|
||||||
backgroundSize: '50px 50px'
|
backgroundSize: '50px 50px'
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
|
<style jsx>{`
|
||||||
|
@keyframes pulse-slow {
|
||||||
|
0%, 100% { opacity: 1; }
|
||||||
|
50% { opacity: 0.8; }
|
||||||
|
}
|
||||||
|
.animate-pulse-slow {
|
||||||
|
animation: pulse-slow 3s ease-in-out infinite;
|
||||||
|
}
|
||||||
|
`}</style>
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
@@ -2,239 +2,286 @@
|
|||||||
|
|
||||||
import { useState } from "react"
|
import { useState } from "react"
|
||||||
import { Card } from "@/components/ui/card"
|
import { Card } from "@/components/ui/card"
|
||||||
import { Button } from "@/components/ui/button"
|
import { Input } from "@/components/ui/input"
|
||||||
import { Progress } from "@/components/ui/progress"
|
import { Building2, Trophy, User, Search } from "lucide-react"
|
||||||
import Link from "next/link"
|
import Link from "next/link"
|
||||||
import { CheckCircle2, Circle, Clock } from "lucide-react"
|
|
||||||
|
|
||||||
export default function ProgressPage() {
|
export default function RulesPage() {
|
||||||
const [activeTab, setActiveTab] = useState("progress")
|
const [activeTab, setActiveTab] = useState("rules")
|
||||||
|
const [searchQuery, setSearchQuery] = useState("")
|
||||||
|
|
||||||
// Mock data
|
// Mock data для рейтингов
|
||||||
const courses = [
|
const cityLeaderboard = [
|
||||||
{ id: 1, name: "React", lessons: 12, completed: 8 },
|
{ rank: 1, name: "Moscow", points: 12450 },
|
||||||
{ id: 2, name: "TypeScript", lessons: 10, completed: 6 },
|
{ rank: 2, name: "Kazan", points: 8920 },
|
||||||
{ id: 3, name: "Next.js", lessons: 15, completed: 4 },
|
{ rank: 3, name: "SPB", points: 7185 },
|
||||||
{ id: 4, name: "Node.js", lessons: 20, completed: 0 }
|
{ rank: 4, name: "Novosibirsk", points: 5670 },
|
||||||
|
{ rank: 5, name: "Ekaterinburg", points: 4320 }
|
||||||
]
|
]
|
||||||
|
|
||||||
const assignments = [
|
const playerLeaderboard = [
|
||||||
{ id: 1, course: "React", name: "Build a Todo App", grade: 95, status: "completed" },
|
{ rank: 1, name: "cyber_god", points: 2840 },
|
||||||
{ id: 2, course: "TypeScript", name: "Type System", grade: 88, status: "completed" },
|
{ rank: 2, name: "h4ck3r_pro", points: 2650 },
|
||||||
{ id: 3, course: "Next.js", name: "SSR Project", grade: null, status: "pending" },
|
{ rank: 3, name: "matrix_neo", points: 2420 },
|
||||||
{ id: 4, course: "Node.js", name: "REST API", grade: null, status: "not_started" }
|
{ rank: 4, name: "data_wizard", points: 2180 },
|
||||||
|
{ rank: 5, name: "code_ninja", points: 1950 }
|
||||||
]
|
]
|
||||||
|
|
||||||
const weekActivity = [
|
const kazanLeaderboard = [
|
||||||
{ day: "Mon", hours: 2.5 },
|
{ rank: 1, name: "pennytige", points: 1337 },
|
||||||
{ day: "Tue", hours: 3.2 },
|
{ rank: 2, name: "kzn_hacker", points: 1280 },
|
||||||
{ day: "Wed", hours: 1.8 },
|
{ rank: 3, name: "tatar_coder", points: 1150 },
|
||||||
{ day: "Thu", hours: 4.1 },
|
{ rank: 4, name: "crypto_bear", points: 980 },
|
||||||
{ day: "Fri", hours: 2.9 },
|
{ rank: 5, name: "byte_master", points: 875 }
|
||||||
{ day: "Sat", hours: 3.5 },
|
|
||||||
{ day: "Sun", hours: 1.2 }
|
|
||||||
]
|
]
|
||||||
|
|
||||||
const maxHours = Math.max(...weekActivity.map(d => d.hours))
|
const allPlayers = [
|
||||||
|
{ rank: 1, name: "cyber_god", level: 12, points: 2840, city: "Moscow" },
|
||||||
|
{ rank: 2, name: "h4ck3r_pro", level: 11, points: 2650, city: "SPB" },
|
||||||
|
{ rank: 3, name: "matrix_neo", level: 10, points: 2420, city: "Kazan" },
|
||||||
|
{ rank: 15, name: "pennytige", level: 5, points: 1337, city: "Kazan" }
|
||||||
|
]
|
||||||
|
|
||||||
|
const filteredPlayers = allPlayers.filter(player =>
|
||||||
|
player.name.toLowerCase().includes(searchQuery.toLowerCase())
|
||||||
|
)
|
||||||
|
|
||||||
|
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"
|
||||||
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="min-h-screen bg-[#0a0e1a]">
|
<div className="min-h-screen bg-[#0a0e1a] relative overflow-hidden">
|
||||||
|
{/* Animated background effects */}
|
||||||
|
<div className="fixed top-20 left-20 w-96 h-96 bg-cyan-500/5 rounded-full blur-[120px] animate-pulse" />
|
||||||
|
<div className="fixed bottom-20 right-20 w-96 h-96 bg-purple-500/5 rounded-full blur-[120px] animate-pulse" style={{ animationDelay: '1s' }} />
|
||||||
|
|
||||||
{/* Header */}
|
{/* 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">
|
<nav className="container mx-auto px-6 py-4">
|
||||||
<div className="flex items-center justify-center">
|
<div className="flex items-center justify-center">
|
||||||
<div className="flex items-center gap-12">
|
<div className="flex items-center gap-12">
|
||||||
<Link href="/home/main">
|
<Link href="/main">
|
||||||
<button className="text-sm font-bold tracking-[0.2em] transition-all duration-200 font-mono uppercase text-cyan-500/50 hover:text-cyan-400/80">
|
<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">
|
||||||
Main
|
Main
|
||||||
</button>
|
</button>
|
||||||
</Link>
|
</Link>
|
||||||
<button
|
<Link href="/main/progress">
|
||||||
onClick={() => setActiveTab("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">
|
||||||
className="text-sm font-bold tracking-[0.2em] transition-all duration-200 font-mono uppercase text-cyan-400"
|
Progress
|
||||||
>
|
</button>
|
||||||
Progress
|
</Link>
|
||||||
</button>
|
<Link href="/main/profile">
|
||||||
<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 hover:scale-105">
|
||||||
<button className="text-sm font-bold tracking-[0.2em] transition-all duration-200 font-mono uppercase text-cyan-500/50 hover:text-cyan-400/80">
|
|
||||||
Profile
|
Profile
|
||||||
</button>
|
</button>
|
||||||
</Link>
|
</Link>
|
||||||
<Link href="/home/rules">
|
<button className="text-sm font-bold tracking-[0.2em] transition-all duration-200 font-mono uppercase text-cyan-400 scale-110 drop-shadow-[0_0_8px_rgba(6,182,212,0.5)]">
|
||||||
<button className="text-sm font-bold tracking-[0.2em] transition-all duration-200 font-mono uppercase text-cyan-500/50 hover:text-cyan-400/80">
|
Rules
|
||||||
Rules
|
</button>
|
||||||
</button>
|
<button className="text-sm font-bold tracking-[0.2em] transition-all duration-200 font-mono uppercase text-cyan-500/50 hover:text-cyan-400/80 hover:scale-105">
|
||||||
</Link>
|
Logoff
|
||||||
<Link href="/login">
|
</button>
|
||||||
<button className="text-sm font-bold tracking-[0.2em] transition-all duration-200 font-mono uppercase text-cyan-500/50 hover:text-cyan-400/80">
|
|
||||||
Login
|
|
||||||
</button>
|
|
||||||
</Link>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</nav>
|
</nav>
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
{/* Main Content */}
|
{/* Main Content */}
|
||||||
<main className="container mx-auto px-6 py-8 max-w-7xl">
|
<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">
|
{/* Top Leaderboards */}
|
||||||
{/* Left Column - Course Progress */}
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-6">
|
||||||
<div className="space-y-6">
|
{/* Топ городов */}
|
||||||
{/* My Courses */}
|
<Card className="bg-[#0d1117]/50 backdrop-blur-xl border-2 border-cyan-500/30 p-6 shadow-[0_0_30px_rgba(6,182,212,0.1)] hover:shadow-[0_0_50px_rgba(6,182,212,0.2)] transition-all duration-300 relative overflow-hidden group">
|
||||||
<Card className="bg-[#0d1117] border-2 border-cyan-500/30 p-6">
|
<div className="absolute inset-0 bg-gradient-to-br from-cyan-500/5 to-transparent opacity-0 group-hover:opacity-100 transition-opacity" />
|
||||||
<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}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<Progress value={progress} className="h-2 bg-[#0d1117]" />
|
|
||||||
</Card>
|
|
||||||
)
|
|
||||||
})}
|
|
||||||
</div>
|
|
||||||
</Card>
|
|
||||||
|
|
||||||
{/* My Grades */}
|
<div className="relative z-10">
|
||||||
<Card className="bg-[#0d1117] border-2 border-cyan-500/30 p-6">
|
<div className="flex items-center gap-3 mb-4">
|
||||||
<h3 className="text-xl font-bold text-cyan-400 font-mono mb-4">
|
<div className="w-10 h-10 bg-cyan-500/20 rounded-lg flex items-center justify-center">
|
||||||
My grades
|
<Building2 className="w-5 h-5 text-cyan-400" />
|
||||||
</h3>
|
</div>
|
||||||
<div className="space-y-3">
|
<h3 className="text-lg font-bold text-cyan-400 font-mono">
|
||||||
{assignments.slice(0, 3).map((assignment) => (
|
Топ городов
|
||||||
<Card
|
</h3>
|
||||||
key={assignment.id}
|
</div>
|
||||||
className="bg-[#0a0e1a] border border-cyan-500/20 p-3"
|
|
||||||
|
<div className="space-y-2">
|
||||||
|
{cityLeaderboard.map((entry) => (
|
||||||
|
<div
|
||||||
|
key={entry.rank}
|
||||||
|
className="flex items-center justify-between p-3 bg-[#0a0e1a]/80 rounded-lg border border-cyan-500/20 hover:border-cyan-500/40 transition-all group/item"
|
||||||
>
|
>
|
||||||
<div className="flex justify-between items-center">
|
<div className="flex items-center gap-3">
|
||||||
<div className="flex-1">
|
<span className={`font-bold font-mono text-sm w-8 ${getRankColor(entry.rank)}`}>
|
||||||
<div className="text-sm font-bold text-cyan-400 font-mono mb-1">
|
#{entry.rank}
|
||||||
{assignment.course}
|
</span>
|
||||||
</div>
|
<span className="text-cyan-400 font-mono text-sm">
|
||||||
<div className="text-xs text-cyan-400/60 font-mono">
|
{entry.name}
|
||||||
{assignment.name}
|
</span>
|
||||||
</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>
|
|
||||||
)}
|
|
||||||
</div>
|
</div>
|
||||||
</Card>
|
<span className="text-green-400 font-mono font-bold text-sm">
|
||||||
))}
|
{entry.points.toLocaleString()}
|
||||||
</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
|
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
<Progress value={80} className="h-2 bg-[#0d1117]" />
|
))}
|
||||||
</Card>
|
|
||||||
</div>
|
</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">
|
<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">
|
||||||
<h3 className="text-xl font-bold text-cyan-400 font-mono mb-4">
|
<div className="absolute inset-0 bg-gradient-to-br from-yellow-500/5 to-transparent opacity-0 group-hover:opacity-100 transition-opacity" />
|
||||||
All Assignments
|
|
||||||
</h3>
|
<div className="relative z-10">
|
||||||
|
<div className="flex items-center gap-3 mb-4">
|
||||||
|
<div className="w-10 h-10 bg-yellow-500/20 rounded-lg flex items-center justify-center">
|
||||||
|
<Trophy className="w-5 h-5 text-yellow-400" />
|
||||||
|
</div>
|
||||||
|
<h3 className="text-lg font-bold text-yellow-400 font-mono">
|
||||||
|
Топ игроков
|
||||||
|
</h3>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="space-y-2">
|
||||||
|
{playerLeaderboard.map((entry) => (
|
||||||
|
<div
|
||||||
|
key={entry.rank}
|
||||||
|
className="flex items-center justify-between p-3 bg-[#0a0e1a]/80 rounded-lg border border-yellow-500/20 hover:border-yellow-500/40 transition-all group/item"
|
||||||
|
>
|
||||||
|
<div className="flex items-center gap-3">
|
||||||
|
<span className={`font-bold font-mono text-sm w-8 ${getRankColor(entry.rank)}`}>
|
||||||
|
#{entry.rank}
|
||||||
|
</span>
|
||||||
|
<span className="text-cyan-400 font-mono text-sm">
|
||||||
|
{entry.name}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<span className="text-green-400 font-mono font-bold text-sm">
|
||||||
|
{entry.points.toLocaleString()}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
{/* Топ Kazan */}
|
||||||
|
<Card className="bg-[#0d1117]/50 backdrop-blur-xl border-2 border-cyan-500/30 p-6 shadow-[0_0_30px_rgba(6,182,212,0.1)] hover:shadow-[0_0_50px_rgba(6,182,212,0.2)] transition-all duration-300 relative overflow-hidden group">
|
||||||
|
<div className="absolute inset-0 bg-gradient-to-br from-cyan-500/5 to-transparent opacity-0 group-hover:opacity-100 transition-opacity" />
|
||||||
|
|
||||||
|
<div className="relative z-10">
|
||||||
|
<div className="flex items-center gap-3 mb-4">
|
||||||
|
<div className="w-10 h-10 bg-cyan-500/20 rounded-lg flex items-center justify-center">
|
||||||
|
<User className="w-5 h-5 text-cyan-400" />
|
||||||
|
</div>
|
||||||
|
<h3 className="text-lg font-bold text-cyan-400 font-mono">
|
||||||
|
Топ Kazan
|
||||||
|
</h3>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="space-y-2">
|
||||||
|
{kazanLeaderboard.map((entry) => (
|
||||||
|
<div
|
||||||
|
key={entry.rank}
|
||||||
|
className="flex items-center justify-between p-3 bg-[#0a0e1a]/80 rounded-lg border border-cyan-500/20 hover:border-cyan-500/40 transition-all group/item"
|
||||||
|
>
|
||||||
|
<div className="flex items-center gap-3">
|
||||||
|
<span className={`font-bold font-mono text-sm w-8 ${getRankColor(entry.rank)}`}>
|
||||||
|
#{entry.rank}
|
||||||
|
</span>
|
||||||
|
<span className="text-cyan-400 font-mono text-sm">
|
||||||
|
{entry.name}
|
||||||
|
</span>
|
||||||
|
</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 gap-3 mb-6">
|
||||||
|
<Trophy className="w-6 h-6 text-cyan-400 animate-pulse" />
|
||||||
|
<h3 className="text-xl font-bold text-cyan-400 font-mono">
|
||||||
|
Все игроки
|
||||||
|
</h3>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Search */}
|
||||||
|
<div className="mb-6 relative">
|
||||||
|
<Search className="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-cyan-400/50" />
|
||||||
|
<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)]"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
{/* Table */}
|
{/* Table */}
|
||||||
<div className="overflow-x-auto">
|
<div className="overflow-x-auto">
|
||||||
<table className="w-full">
|
<table className="w-full">
|
||||||
<thead>
|
<thead>
|
||||||
<tr className="border-b border-cyan-500/20">
|
<tr className="border-b border-cyan-500/30">
|
||||||
<th className="text-left py-3 px-4 text-xs font-mono text-cyan-400/60 uppercase">
|
<th className="text-left py-4 px-4 text-sm font-mono text-cyan-400/60 uppercase">
|
||||||
#
|
Ранг
|
||||||
</th>
|
</th>
|
||||||
<th className="text-left py-3 px-4 text-xs font-mono text-cyan-400/60 uppercase">
|
<th className="text-left py-4 px-4 text-sm font-mono text-cyan-400/60 uppercase">
|
||||||
Course
|
Игрок
|
||||||
</th>
|
</th>
|
||||||
<th className="text-left py-3 px-4 text-xs font-mono text-cyan-400/60 uppercase">
|
<th className="text-left py-4 px-4 text-sm font-mono text-cyan-400/60 uppercase">
|
||||||
Assignment
|
Уровень
|
||||||
</th>
|
</th>
|
||||||
<th className="text-left py-3 px-4 text-xs font-mono text-cyan-400/60 uppercase">
|
<th className="text-left py-4 px-4 text-sm font-mono text-cyan-400/60 uppercase">
|
||||||
Grade
|
Очки
|
||||||
</th>
|
</th>
|
||||||
<th className="text-left py-3 px-4 text-xs font-mono text-cyan-400/60 uppercase">
|
<th className="text-left py-4 px-4 text-sm font-mono text-cyan-400/60 uppercase">
|
||||||
Status
|
Город
|
||||||
</th>
|
</th>
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
<tbody>
|
<tbody>
|
||||||
{assignments.map((assignment, index) => (
|
{filteredPlayers.map((player) => (
|
||||||
<tr
|
<tr
|
||||||
key={assignment.id}
|
key={player.rank}
|
||||||
className="border-b border-cyan-500/10 hover:bg-cyan-500/5 transition-colors"
|
className="border-b border-cyan-500/10 hover:bg-cyan-500/5 transition-all group/row"
|
||||||
>
|
>
|
||||||
<td className="py-3 px-4 text-sm font-mono text-cyan-400">
|
<td className="py-4 px-4">
|
||||||
{index + 1}
|
<span className={`font-bold font-mono text-sm ${getRankColor(player.rank)}`}>
|
||||||
|
#{player.rank}
|
||||||
|
</span>
|
||||||
</td>
|
</td>
|
||||||
<td className="py-3 px-4 text-sm font-mono text-cyan-400">
|
<td className="py-4 px-4">
|
||||||
{assignment.course}
|
<span className="text-cyan-400 font-mono text-sm group-hover/row:text-cyan-300 transition-colors">
|
||||||
|
{player.name}
|
||||||
|
</span>
|
||||||
</td>
|
</td>
|
||||||
<td className="py-3 px-4 text-sm font-mono text-cyan-400">
|
<td className="py-4 px-4">
|
||||||
{assignment.name}
|
<span className="text-cyan-400 font-mono text-sm">
|
||||||
|
Lvl {player.level}
|
||||||
|
</span>
|
||||||
</td>
|
</td>
|
||||||
<td className="py-3 px-4 text-sm font-mono text-cyan-400">
|
<td className="py-4 px-4">
|
||||||
{assignment.grade ? `${assignment.grade}%` : '-'}
|
<span className="text-green-400 font-mono font-bold text-sm">
|
||||||
|
{player.points.toLocaleString()}
|
||||||
|
</span>
|
||||||
</td>
|
</td>
|
||||||
<td className="py-3 px-4">
|
<td className="py-4 px-4">
|
||||||
<div className="flex items-center gap-2">
|
<span className="text-cyan-400/70 font-mono text-sm">
|
||||||
{assignment.status === 'completed' ? (
|
{player.city}
|
||||||
<>
|
</span>
|
||||||
<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>
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
))}
|
))}
|
||||||
@@ -242,41 +289,24 @@ export default function ProgressPage() {
|
|||||||
</table>
|
</table>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Weekly Activity Chart */}
|
{filteredPlayers.length === 0 && (
|
||||||
<div className="mt-8">
|
<div className="text-center py-12">
|
||||||
<h4 className="text-lg font-bold text-cyan-400 font-mono mb-4">
|
<p className="text-cyan-400/50 font-mono">
|
||||||
Weekly Activity
|
Игрок не найден
|
||||||
</h4>
|
</p>
|
||||||
<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>
|
|
||||||
))}
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
)}
|
||||||
</Card>
|
</div>
|
||||||
</div>
|
</Card>
|
||||||
</main>
|
</main>
|
||||||
|
|
||||||
{/* Background grid */}
|
{/* Enhanced Background grid */}
|
||||||
<div
|
<div
|
||||||
className="fixed inset-0 pointer-events-none -z-10"
|
className="fixed inset-0 pointer-events-none -z-10 opacity-50"
|
||||||
style={{
|
style={{
|
||||||
backgroundImage: `
|
backgroundImage: `
|
||||||
linear-gradient(rgba(6, 182, 212, 0.03) 1px, transparent 1px),
|
linear-gradient(rgba(6, 182, 212, 0.05) 1px, transparent 1px),
|
||||||
linear-gradient(90deg, rgba(6, 182, 212, 0.03) 1px, transparent 1px)
|
linear-gradient(90deg, rgba(6, 182, 212, 0.05) 1px, transparent 1px)
|
||||||
`,
|
`,
|
||||||
backgroundSize: '50px 50px'
|
backgroundSize: '50px 50px'
|
||||||
}}
|
}}
|
||||||
|
|||||||
@@ -54,7 +54,7 @@ export default function WelcomePage() {
|
|||||||
Управляй своим прогрессом в киберпространстве
|
Управляй своим прогрессом в киберпространстве
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<Link href="/home/main">
|
<Link href="/main">
|
||||||
<Button
|
<Button
|
||||||
size="lg"
|
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"
|
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"
|
||||||
|
|||||||
Reference in New Issue
Block a user