Redesign p1

frontend/src/pages/InvitePage.tsx

@@ -3,8 +3,8 @@ import { useParams, useNavigate, Link } from 'react-router-dom'
 import { marathonsApi } from '@/api'
 import type { MarathonPublicInfo } from '@/types'
 import { useAuthStore } from '@/store/auth'
-import { Button, Card, CardContent, CardHeader, CardTitle } from '@/components/ui'
-import { Users, Loader2, Trophy, UserPlus, LogIn } from 'lucide-react'
+import { NeonButton, GlassCard } from '@/components/ui'
+import { Users, Loader2, Trophy, UserPlus, LogIn, Gamepad2, AlertCircle, Sparkles, Crown } from 'lucide-react'
 
 export function InvitePage() {
   const { code } = useParams<{ code: string }>()
@@ -63,8 +63,9 @@ export function InvitePage() {
 
   if (isLoading) {
     return (
-      <div className="flex justify-center py-12">
-        <Loader2 className="w-8 h-8 animate-spin text-primary-500" />
+      <div className="flex flex-col items-center justify-center py-24">
+        <Loader2 className="w-12 h-12 animate-spin text-neon-500 mb-4" />
+        <p className="text-gray-400">Загрузка приглашения...</p>
       </div>
     )
   }
@@ -72,97 +73,154 @@ export function InvitePage() {
   if (error || !marathon) {
     return (
       <div className="max-w-md mx-auto">
-        <Card>
-          <CardContent className="text-center py-8">
-            <div className="text-red-400 mb-4">{error || 'Марафон не найден'}</div>
-            <Link to="/marathons">
-              <Button variant="secondary">К списку марафонов</Button>
-            </Link>
-          </CardContent>
-        </Card>
+        <GlassCard className="text-center py-12">
+          <div className="w-16 h-16 mx-auto mb-4 rounded-2xl bg-red-500/10 border border-red-500/30 flex items-center justify-center">
+            <AlertCircle className="w-8 h-8 text-red-400" />
+          </div>
+          <h2 className="text-xl font-bold text-white mb-2">Ошибка</h2>
+          <p className="text-gray-400 mb-6">{error || 'Марафон не найден'}</p>
+          <Link to="/marathons">
+            <NeonButton variant="outline">К списку марафонов</NeonButton>
+          </Link>
+        </GlassCard>
       </div>
     )
   }
 
-  const statusText = {
-    preparing: 'Подготовка',
-    active: 'Активен',
-    finished: 'Завершён',
-  }[marathon.status]
+  const getStatusConfig = (status: string) => {
+    switch (status) {
+      case 'preparing':
+        return {
+          color: 'bg-yellow-500/20 text-yellow-400 border-yellow-500/30',
+          text: 'Подготовка',
+          dot: 'bg-yellow-500',
+        }
+      case 'active':
+        return {
+          color: 'bg-neon-500/20 text-neon-400 border-neon-500/30',
+          text: 'Активен',
+          dot: 'bg-neon-500 animate-pulse',
+        }
+      case 'finished':
+        return {
+          color: 'bg-gray-500/20 text-gray-400 border-gray-500/30',
+          text: 'Завершён',
+          dot: 'bg-gray-500',
+        }
+      default:
+        return {
+          color: 'bg-gray-500/20 text-gray-400 border-gray-500/30',
+          text: status,
+          dot: 'bg-gray-500',
+        }
+    }
+  }
+
+  const status = getStatusConfig(marathon.status)
 
   return (
-    <div className="max-w-md mx-auto">
-      <Card>
-        <CardHeader className="text-center">
-          <CardTitle className="flex items-center justify-center gap-2">
-            <Trophy className="w-6 h-6 text-primary-500" />
-            Приглашение в марафон
-          </CardTitle>
-        </CardHeader>
-        <CardContent className="space-y-6">
-          {/* Marathon info */}
-          <div className="text-center">
-            <h2 className="text-2xl font-bold text-white mb-2">{marathon.title}</h2>
-            {marathon.description && (
-              <p className="text-gray-400 text-sm mb-4">{marathon.description}</p>
-            )}
-            <div className="flex items-center justify-center gap-4 text-sm text-gray-400">
-              <span className="flex items-center gap-1">
-                <Users className="w-4 h-4" />
-                {marathon.participants_count} участников
-              </span>
-              <span className={`px-2 py-0.5 rounded text-xs ${
-                marathon.status === 'active' ? 'bg-green-900/50 text-green-400' :
-                marathon.status === 'preparing' ? 'bg-yellow-900/50 text-yellow-400' :
-                'bg-gray-700 text-gray-400'
-              }`}>
-                {statusText}
-              </span>
+    <div className="min-h-[70vh] flex items-center justify-center px-4">
+      {/* Background effects */}
+      <div className="fixed inset-0 overflow-hidden pointer-events-none">
+        <div className="absolute top-1/4 -left-32 w-96 h-96 bg-neon-500/10 rounded-full blur-[100px]" />
+        <div className="absolute bottom-1/4 -right-32 w-96 h-96 bg-accent-500/10 rounded-full blur-[100px]" />
+      </div>
+
+      <div className="relative w-full max-w-md">
+        <GlassCard variant="neon" className="animate-scale-in">
+          {/* Header */}
+          <div className="text-center mb-8">
+            <div className="w-20 h-20 mx-auto mb-4 rounded-2xl bg-gradient-to-br from-neon-500/20 to-accent-500/20 border border-neon-500/30 flex items-center justify-center">
+              <Trophy className="w-10 h-10 text-neon-400" />
             </div>
-            <p className="text-gray-500 text-xs mt-2">
-              Организатор: {marathon.creator_nickname}
-            </p>
+            <h1 className="text-xl font-bold text-white mb-1">Приглашение в марафон</h1>
+            <p className="text-gray-400 text-sm">Вас пригласили присоединиться</p>
           </div>
 
+          {/* Marathon info */}
+          <div className="glass rounded-xl p-5 mb-6">
+            <div className="flex items-start gap-4">
+              <div className="w-14 h-14 rounded-xl bg-gradient-to-br from-neon-500/20 to-accent-500/20 flex items-center justify-center border border-neon-500/20 flex-shrink-0">
+                <Gamepad2 className="w-7 h-7 text-neon-400" />
+              </div>
+              <div className="flex-1 min-w-0">
+                <h2 className="text-xl font-bold text-white mb-1 truncate">{marathon.title}</h2>
+                {marathon.description && (
+                  <p className="text-gray-400 text-sm line-clamp-2 mb-3">{marathon.description}</p>
+                )}
+                <div className="flex flex-wrap items-center gap-3">
+                  <span className={`px-2.5 py-1 rounded-full text-xs font-medium border flex items-center gap-1.5 ${status.color}`}>
+                    <span className={`w-1.5 h-1.5 rounded-full ${status.dot}`} />
+                    {status.text}
+                  </span>
+                  <span className="flex items-center gap-1.5 text-sm text-gray-400">
+                    <Users className="w-4 h-4" />
+                    {marathon.participants_count}
+                  </span>
+                </div>
+              </div>
+            </div>
+
+            {/* Organizer */}
+            <div className="mt-4 pt-4 border-t border-dark-600 flex items-center gap-2 text-sm text-gray-500">
+              <Crown className="w-4 h-4 text-yellow-500" />
+              <span>Организатор:</span>
+              <span className="text-gray-300">{marathon.creator_nickname}</span>
+            </div>
+          </div>
+
+          {/* Actions */}
           {marathon.status === 'finished' ? (
-            <div className="text-center text-gray-400">
-              Этот марафон уже завершён
+            <div className="text-center">
+              <div className="w-12 h-12 mx-auto mb-3 rounded-xl bg-gray-500/10 flex items-center justify-center">
+                <AlertCircle className="w-6 h-6 text-gray-400" />
+              </div>
+              <p className="text-gray-400 mb-4">Этот марафон уже завершён</p>
+              <Link to="/marathons">
+                <NeonButton variant="outline" className="w-full">
+                  К списку марафонов
+                </NeonButton>
+              </Link>
             </div>
           ) : isAuthenticated ? (
-            /* Authenticated - show join button */
-            <Button
+            <NeonButton
               className="w-full"
+              size="lg"
               onClick={handleJoin}
               isLoading={isJoining}
+              icon={<Sparkles className="w-5 h-5" />}
             >
-              <UserPlus className="w-4 h-4 mr-2" />
-              Присоединиться к марафону
-            </Button>
+              Присоединиться
+            </NeonButton>
           ) : (
-            /* Not authenticated - show login/register options */
-            <div className="space-y-3">
+            <div className="space-y-4">
               <p className="text-center text-gray-400 text-sm">
                 Чтобы присоединиться, войдите или зарегистрируйтесь
               </p>
-              <Button
+              <NeonButton
                 className="w-full"
+                size="lg"
                 onClick={() => handleAuthRedirect('/login')}
+                icon={<LogIn className="w-5 h-5" />}
               >
-                <LogIn className="w-4 h-4 mr-2" />
                 Войти
-              </Button>
-              <Button
-                variant="secondary"
+              </NeonButton>
+              <NeonButton
+                variant="outline"
                 className="w-full"
                 onClick={() => handleAuthRedirect('/register')}
+                icon={<UserPlus className="w-5 h-5" />}
               >
-                <UserPlus className="w-4 h-4 mr-2" />
                 Зарегистрироваться
-              </Button>
+              </NeonButton>
             </div>
           )}
-        </CardContent>
-      </Card>
+        </GlassCard>
+
+        {/* Decorative elements */}
+        <div className="absolute -top-4 -left-4 w-24 h-24 border border-neon-500/20 rounded-2xl -z-10" />
+        <div className="absolute -bottom-4 -right-4 w-32 h-32 border border-accent-500/20 rounded-2xl -z-10" />
+      </div>
     </div>
   )
 }