Add covers

frontend/src/api/marathons.ts

@@ -1,5 +1,5 @@
 import client from './client'
-import type { Marathon, MarathonListItem, MarathonPublicInfo, LeaderboardEntry, ParticipantWithUser, ParticipantRole, GameProposalMode } from '@/types'
+import type { Marathon, MarathonListItem, MarathonPublicInfo, MarathonUpdate, LeaderboardEntry, ParticipantWithUser, ParticipantRole, GameProposalMode } from '@/types'
 
 export interface CreateMarathonData {
   title: string
@@ -10,6 +10,8 @@ export interface CreateMarathonData {
   game_proposal_mode?: GameProposalMode
 }
 
+export type { MarathonUpdate }
+
 export const marathonsApi = {
   list: async (): Promise<MarathonListItem[]> => {
     const response = await client.get<MarathonListItem[]>('/marathons')
@@ -32,7 +34,7 @@ export const marathonsApi = {
     return response.data
   },
 
-  update: async (id: number, data: Partial<CreateMarathonData>): Promise<Marathon> => {
+  update: async (id: number, data: MarathonUpdate): Promise<Marathon> => {
     const response = await client.patch<Marathon>(`/marathons/${id}`, data)
     return response.data
   },
@@ -78,4 +80,20 @@ export const marathonsApi = {
     const response = await client.get<LeaderboardEntry[]>(`/marathons/${id}/leaderboard`)
     return response.data
   },
+
+  uploadCover: async (id: number, file: File): Promise<Marathon> => {
+    const formData = new FormData()
+    formData.append('file', file)
+    const response = await client.post<Marathon>(`/marathons/${id}/cover`, formData, {
+      headers: {
+        'Content-Type': 'multipart/form-data',
+      },
+    })
+    return response.data
+  },
+
+  deleteCover: async (id: number): Promise<Marathon> => {
+    const response = await client.delete<Marathon>(`/marathons/${id}/cover`)
+    return response.data
+  },
 }

frontend/src/components/MarathonSettingsModal.tsx

@@ -0,0 +1,501 @@
+import { useState, useRef, useEffect } from 'react'
+import { useForm } from 'react-hook-form'
+import { zodResolver } from '@hookform/resolvers/zod'
+import { z } from 'zod'
+import { marathonsApi } from '@/api'
+import type { Marathon, GameProposalMode } from '@/types'
+import { NeonButton, Input } from '@/components/ui'
+import { useToast } from '@/store/toast'
+import {
+  X, Camera, Trash2, Loader2, Save, Globe, Lock, Users, UserCog, Sparkles, Zap
+} from 'lucide-react'
+
+const settingsSchema = z.object({
+  title: z.string().min(1, 'Название обязательно').max(100, 'Максимум 100 символов'),
+  description: z.string().optional(),
+  start_date: z.string().min(1, 'Дата начала обязательна'),
+  is_public: z.boolean(),
+  game_proposal_mode: z.enum(['all_participants', 'organizer_only']),
+  auto_events_enabled: z.boolean(),
+})
+
+type SettingsForm = z.infer<typeof settingsSchema>
+
+interface MarathonSettingsModalProps {
+  marathon: Marathon
+  isOpen: boolean
+  onClose: () => void
+  onUpdate: (marathon: Marathon) => void
+}
+
+export function MarathonSettingsModal({
+  marathon,
+  isOpen,
+  onClose,
+  onUpdate,
+}: MarathonSettingsModalProps) {
+  const toast = useToast()
+  const fileInputRef = useRef<HTMLInputElement>(null)
+
+  const [isUploading, setIsUploading] = useState(false)
+  const [isDeleting, setIsDeleting] = useState(false)
+  const [coverPreview, setCoverPreview] = useState<string | null>(null)
+
+  const {
+    register,
+    handleSubmit,
+    watch,
+    setValue,
+    reset,
+    formState: { errors, isSubmitting, isDirty },
+  } = useForm<SettingsForm>({
+    resolver: zodResolver(settingsSchema),
+    defaultValues: {
+      title: marathon.title,
+      description: marathon.description || '',
+      start_date: marathon.start_date
+        ? new Date(marathon.start_date).toISOString().slice(0, 16)
+        : '',
+      is_public: marathon.is_public,
+      game_proposal_mode: marathon.game_proposal_mode as GameProposalMode,
+      auto_events_enabled: marathon.auto_events_enabled,
+    },
+  })
+
+  const isPublic = watch('is_public')
+  const gameProposalMode = watch('game_proposal_mode')
+  const autoEventsEnabled = watch('auto_events_enabled')
+
+  // Reset form when marathon changes
+  useEffect(() => {
+    reset({
+      title: marathon.title,
+      description: marathon.description || '',
+      start_date: marathon.start_date
+        ? new Date(marathon.start_date).toISOString().slice(0, 16)
+        : '',
+      is_public: marathon.is_public,
+      game_proposal_mode: marathon.game_proposal_mode as GameProposalMode,
+      auto_events_enabled: marathon.auto_events_enabled,
+    })
+    setCoverPreview(null)
+  }, [marathon, reset])
+
+  // Handle escape key
+  useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === 'Escape' && isOpen) {
+        onClose()
+      }
+    }
+    window.addEventListener('keydown', handleKeyDown)
+    return () => window.removeEventListener('keydown', handleKeyDown)
+  }, [isOpen, onClose])
+
+  // Prevent body scroll when modal is open
+  useEffect(() => {
+    if (isOpen) {
+      document.body.style.overflow = 'hidden'
+    } else {
+      document.body.style.overflow = ''
+    }
+    return () => {
+      document.body.style.overflow = ''
+    }
+  }, [isOpen])
+
+  const onSubmit = async (data: SettingsForm) => {
+    try {
+      const updated = await marathonsApi.update(marathon.id, {
+        title: data.title,
+        description: data.description || undefined,
+        start_date: new Date(data.start_date).toISOString(),
+        is_public: data.is_public,
+        game_proposal_mode: data.game_proposal_mode,
+        auto_events_enabled: data.auto_events_enabled,
+      })
+      onUpdate(updated)
+      toast.success('Настройки сохранены')
+      onClose()
+    } catch (err: unknown) {
+      const error = err as { response?: { data?: { detail?: string } } }
+      toast.error(error.response?.data?.detail || 'Не удалось сохранить настройки')
+    }
+  }
+
+  const handleCoverClick = () => {
+    fileInputRef.current?.click()
+  }
+
+  const handleCoverChange = async (e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0]
+    if (!file) return
+
+    if (!file.type.startsWith('image/')) {
+      toast.error('Файл должен быть изображением')
+      return
+    }
+    if (file.size > 5 * 1024 * 1024) {
+      toast.error('Максимальный размер файла 5 МБ')
+      return
+    }
+
+    // Show preview immediately
+    const previewUrl = URL.createObjectURL(file)
+    setCoverPreview(previewUrl)
+
+    setIsUploading(true)
+    try {
+      const updated = await marathonsApi.uploadCover(marathon.id, file)
+      onUpdate(updated)
+      toast.success('Обложка загружена')
+    } catch (err: unknown) {
+      const error = err as { response?: { data?: { detail?: string } } }
+      toast.error(error.response?.data?.detail || 'Не удалось загрузить обложку')
+      setCoverPreview(null)
+    } finally {
+      setIsUploading(false)
+      // Reset input
+      if (fileInputRef.current) {
+        fileInputRef.current.value = ''
+      }
+    }
+  }
+
+  const handleDeleteCover = async () => {
+    setIsDeleting(true)
+    try {
+      const updated = await marathonsApi.deleteCover(marathon.id)
+      onUpdate(updated)
+      setCoverPreview(null)
+      toast.success('Обложка удалена')
+    } catch (err: unknown) {
+      const error = err as { response?: { data?: { detail?: string } } }
+      toast.error(error.response?.data?.detail || 'Не удалось удалить обложку')
+    } finally {
+      setIsDeleting(false)
+    }
+  }
+
+  if (!isOpen) return null
+
+  const displayCover = coverPreview || marathon.cover_url
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center p-4">
+      {/* Backdrop */}
+      <div
+        className="absolute inset-0 bg-black/70 backdrop-blur-sm animate-in fade-in duration-200"
+        onClick={onClose}
+      />
+
+      {/* Modal */}
+      <div className="relative glass rounded-xl shadow-2xl max-w-2xl w-full max-h-[90vh] overflow-y-auto animate-in zoom-in-95 fade-in duration-200 border border-dark-600 custom-scrollbar">
+        {/* Header */}
+        <div className="sticky top-0 z-10 bg-dark-800/95 backdrop-blur-sm border-b border-dark-600 px-6 py-4 flex items-center justify-between">
+          <h2 className="text-xl font-bold text-white">Настройки марафона</h2>
+          <button
+            onClick={onClose}
+            className="text-gray-400 hover:text-white transition-colors p-1"
+          >
+            <X className="w-5 h-5" />
+          </button>
+        </div>
+
+        <div className="p-6 space-y-6">
+          {/* Cover Image */}
+          <div>
+            <label className="block text-sm font-medium text-gray-300 mb-3">
+              Обложка марафона
+            </label>
+            <div className="relative group">
+              <button
+                type="button"
+                onClick={handleCoverClick}
+                disabled={isUploading || isDeleting}
+                className="relative w-full h-48 rounded-xl overflow-hidden bg-dark-700 border-2 border-dashed border-dark-500 hover:border-neon-500/50 transition-all"
+              >
+                {displayCover ? (
+                  <img
+                    src={displayCover}
+                    alt="Обложка марафона"
+                    className="w-full h-full object-cover"
+                  />
+                ) : (
+                  <div className="w-full h-full flex flex-col items-center justify-center text-gray-500">
+                    <Camera className="w-10 h-10 mb-2" />
+                    <span className="text-sm">Нажмите для загрузки</span>
+                    <span className="text-xs text-gray-600 mt-1">JPG, PNG до 5 МБ</span>
+                  </div>
+                )}
+                {(isUploading || isDeleting) && (
+                  <div className="absolute inset-0 bg-dark-900/80 flex items-center justify-center">
+                    <Loader2 className="w-8 h-8 text-neon-500 animate-spin" />
+                  </div>
+                )}
+                {displayCover && !isUploading && !isDeleting && (
+                  <div className="absolute inset-0 bg-dark-900/70 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity">
+                    <Camera className="w-8 h-8 text-neon-500" />
+                    <span className="ml-2 text-white">Изменить</span>
+                  </div>
+                )}
+              </button>
+              {displayCover && !isUploading && !isDeleting && (
+                <button
+                  type="button"
+                  onClick={handleDeleteCover}
+                  className="absolute top-2 right-2 p-2 rounded-lg bg-red-500/20 text-red-400 hover:bg-red-500/30 transition-colors"
+                >
+                  <Trash2 className="w-4 h-4" />
+                </button>
+              )}
+            </div>
+            <input
+              ref={fileInputRef}
+              type="file"
+              accept="image/*"
+              onChange={handleCoverChange}
+              className="hidden"
+            />
+          </div>
+
+          <form onSubmit={handleSubmit(onSubmit)} className="space-y-6">
+            {/* Title */}
+            <Input
+              label="Название"
+              placeholder="Введите название марафона"
+              error={errors.title?.message}
+              {...register('title')}
+            />
+
+            {/* Description */}
+            <div>
+              <label className="block text-sm font-medium text-gray-300 mb-2">
+                Описание (необязательно)
+              </label>
+              <textarea
+                className="input min-h-[100px] resize-none w-full"
+                placeholder="Расскажите о вашем марафоне..."
+                {...register('description')}
+              />
+            </div>
+
+            {/* Start date */}
+            <div>
+              <label className="block text-sm font-medium text-gray-300 mb-2">
+                Дата начала
+              </label>
+              <input
+                type="datetime-local"
+                className="input w-full"
+                {...register('start_date')}
+              />
+              {errors.start_date && (
+                <p className="text-red-400 text-xs mt-1">{errors.start_date.message}</p>
+              )}
+            </div>
+
+            {/* Marathon type */}
+            <div>
+              <label className="block text-sm font-medium text-gray-300 mb-3">
+                Тип марафона
+              </label>
+              <div className="grid grid-cols-2 gap-3">
+                <button
+                  type="button"
+                  onClick={() => setValue('is_public', false, { shouldDirty: true })}
+                  className={`
+                    relative p-4 rounded-xl border-2 transition-all duration-300 text-left group
+                    ${!isPublic
+                      ? 'border-neon-500/50 bg-neon-500/10 shadow-[0_0_14px_rgba(34,211,238,0.08)]'
+                      : 'border-dark-600 bg-dark-700/50 hover:border-dark-500'
+                    }
+                  `}
+                >
+                  <div className={`
+                    w-10 h-10 rounded-xl mb-3 flex items-center justify-center transition-colors
+                    ${!isPublic ? 'bg-neon-500/20' : 'bg-dark-600'}
+                  `}>
+                    <Lock className={`w-5 h-5 ${!isPublic ? 'text-neon-400' : 'text-gray-400'}`} />
+                  </div>
+                  <div className={`font-semibold mb-1 ${!isPublic ? 'text-white' : 'text-gray-300'}`}>
+                    Закрытый
+                  </div>
+                  <div className="text-xs text-gray-500">
+                    Вход только по коду приглашения
+                  </div>
+                  {!isPublic && (
+                    <div className="absolute top-3 right-3">
+                      <Sparkles className="w-4 h-4 text-neon-400" />
+                    </div>
+                  )}
+                </button>
+
+                <button
+                  type="button"
+                  onClick={() => setValue('is_public', true, { shouldDirty: true })}
+                  className={`
+                    relative p-4 rounded-xl border-2 transition-all duration-300 text-left group
+                    ${isPublic
+                      ? 'border-accent-500/50 bg-accent-500/10 shadow-[0_0_14px_rgba(139,92,246,0.08)]'
+                      : 'border-dark-600 bg-dark-700/50 hover:border-dark-500'
+                    }
+                  `}
+                >
+                  <div className={`
+                    w-10 h-10 rounded-xl mb-3 flex items-center justify-center transition-colors
+                    ${isPublic ? 'bg-accent-500/20' : 'bg-dark-600'}
+                  `}>
+                    <Globe className={`w-5 h-5 ${isPublic ? 'text-accent-400' : 'text-gray-400'}`} />
+                  </div>
+                  <div className={`font-semibold mb-1 ${isPublic ? 'text-white' : 'text-gray-300'}`}>
+                    Открытый
+                  </div>
+                  <div className="text-xs text-gray-500">
+                    Виден всем пользователям
+                  </div>
+                  {isPublic && (
+                    <div className="absolute top-3 right-3">
+                      <Sparkles className="w-4 h-4 text-accent-400" />
+                    </div>
+                  )}
+                </button>
+              </div>
+            </div>
+
+            {/* Game proposal mode */}
+            <div>
+              <label className="block text-sm font-medium text-gray-300 mb-3">
+                Кто может предлагать игры
+              </label>
+              <div className="grid grid-cols-2 gap-3">
+                <button
+                  type="button"
+                  onClick={() => setValue('game_proposal_mode', 'all_participants', { shouldDirty: true })}
+                  className={`
+                    relative p-4 rounded-xl border-2 transition-all duration-300 text-left
+                    ${gameProposalMode === 'all_participants'
+                      ? 'border-neon-500/50 bg-neon-500/10 shadow-[0_0_14px_rgba(34,211,238,0.08)]'
+                      : 'border-dark-600 bg-dark-700/50 hover:border-dark-500'
+                    }
+                  `}
+                >
+                  <div className={`
+                    w-10 h-10 rounded-xl mb-3 flex items-center justify-center transition-colors
+                    ${gameProposalMode === 'all_participants' ? 'bg-neon-500/20' : 'bg-dark-600'}
+                  `}>
+                    <Users className={`w-5 h-5 ${gameProposalMode === 'all_participants' ? 'text-neon-400' : 'text-gray-400'}`} />
+                  </div>
+                  <div className={`font-semibold mb-1 ${gameProposalMode === 'all_participants' ? 'text-white' : 'text-gray-300'}`}>
+                    Все участники
+                  </div>
+                  <div className="text-xs text-gray-500">
+                    С модерацией организатором
+                  </div>
+                  {gameProposalMode === 'all_participants' && (
+                    <div className="absolute top-3 right-3">
+                      <Sparkles className="w-4 h-4 text-neon-400" />
+                    </div>
+                  )}
+                </button>
+
+                <button
+                  type="button"
+                  onClick={() => setValue('game_proposal_mode', 'organizer_only', { shouldDirty: true })}
+                  className={`
+                    relative p-4 rounded-xl border-2 transition-all duration-300 text-left
+                    ${gameProposalMode === 'organizer_only'
+                      ? 'border-accent-500/50 bg-accent-500/10 shadow-[0_0_14px_rgba(139,92,246,0.08)]'
+                      : 'border-dark-600 bg-dark-700/50 hover:border-dark-500'
+                    }
+                  `}
+                >
+                  <div className={`
+                    w-10 h-10 rounded-xl mb-3 flex items-center justify-center transition-colors
+                    ${gameProposalMode === 'organizer_only' ? 'bg-accent-500/20' : 'bg-dark-600'}
+                  `}>
+                    <UserCog className={`w-5 h-5 ${gameProposalMode === 'organizer_only' ? 'text-accent-400' : 'text-gray-400'}`} />
+                  </div>
+                  <div className={`font-semibold mb-1 ${gameProposalMode === 'organizer_only' ? 'text-white' : 'text-gray-300'}`}>
+                    Только организатор
+                  </div>
+                  <div className="text-xs text-gray-500">
+                    Без модерации
+                  </div>
+                  {gameProposalMode === 'organizer_only' && (
+                    <div className="absolute top-3 right-3">
+                      <Sparkles className="w-4 h-4 text-accent-400" />
+                    </div>
+                  )}
+                </button>
+              </div>
+            </div>
+
+            {/* Auto events toggle */}
+            <div>
+              <label className="block text-sm font-medium text-gray-300 mb-3">
+                Автоматические события
+              </label>
+              <button
+                type="button"
+                onClick={() => setValue('auto_events_enabled', !autoEventsEnabled, { shouldDirty: true })}
+                className={`
+                  w-full p-4 rounded-xl border-2 transition-all duration-300 text-left flex items-center gap-4
+                  ${autoEventsEnabled
+                    ? 'border-yellow-500/50 bg-yellow-500/10'
+                    : 'border-dark-600 bg-dark-700/50 hover:border-dark-500'
+                  }
+                `}
+              >
+                <div className={`
+                  w-10 h-10 rounded-xl flex items-center justify-center transition-colors flex-shrink-0
+                  ${autoEventsEnabled ? 'bg-yellow-500/20' : 'bg-dark-600'}
+                `}>
+                  <Zap className={`w-5 h-5 ${autoEventsEnabled ? 'text-yellow-400' : 'text-gray-400'}`} />
+                </div>
+                <div className="flex-1">
+                  <div className={`font-semibold ${autoEventsEnabled ? 'text-white' : 'text-gray-300'}`}>
+                    {autoEventsEnabled ? 'Включены' : 'Выключены'}
+                  </div>
+                  <div className="text-xs text-gray-500">
+                    Случайные бонусные события во время марафона
+                  </div>
+                </div>
+                <div className={`
+                  w-12 h-7 rounded-full transition-colors relative flex-shrink-0
+                  ${autoEventsEnabled ? 'bg-yellow-500' : 'bg-dark-600'}
+                `}>
+                  <div className={`
+                    absolute top-1 w-5 h-5 rounded-full bg-white shadow transition-transform
+                    ${autoEventsEnabled ? 'left-6' : 'left-1'}
+                  `} />
+                </div>
+              </button>
+            </div>
+
+            {/* Actions */}
+            <div className="flex gap-3 pt-4 border-t border-dark-600">
+              <NeonButton
+                type="button"
+                variant="outline"
+                className="flex-1"
+                onClick={onClose}
+              >
+                Отмена
+              </NeonButton>
+              <NeonButton
+                type="submit"
+                className="flex-1"
+                isLoading={isSubmitting}
+                disabled={!isDirty}
+                icon={<Save className="w-4 h-4" />}
+              >
+                Сохранить
+              </NeonButton>
+            </div>
+          </form>
+        </div>
+      </div>
+    </div>
+  )
+}

frontend/src/components/ui/NeonButton.tsx

@@ -67,18 +67,28 @@ export const NeonButton = forwardRef<HTMLButtonElement, NeonButtonProps>(
       },
     }
 
-    const sizeClasses = {
-      sm: 'px-3 py-1.5 text-sm gap-1.5',
-      md: 'px-4 py-2.5 text-base gap-2',
-      lg: 'px-6 py-3 text-lg gap-2.5',
-    }
-
     const iconSizes = {
       sm: 'w-4 h-4',
       md: 'w-5 h-5',
       lg: 'w-6 h-6',
     }
 
+    const isIconOnly = icon && !children
+
+    const sizeClassesWithText = {
+      sm: 'px-3 py-1.5 text-sm gap-1.5',
+      md: 'px-4 py-2.5 text-base gap-2',
+      lg: 'px-6 py-3 text-lg gap-2.5',
+    }
+
+    const sizeClassesIconOnly = {
+      sm: 'p-2 text-sm',
+      md: 'p-2.5 text-base',
+      lg: 'p-3 text-lg',
+    }
+
+    const sizeClasses = isIconOnly ? sizeClassesIconOnly : sizeClassesWithText
+
     const colors = colorMap[color]
 
     return (

frontend/src/pages/CreateMarathonPage.tsx

@@ -1,12 +1,13 @@
-import { useState } from 'react'
+import { useState, useRef } from 'react'
 import { useNavigate, Link } from 'react-router-dom'
 import { useForm } from 'react-hook-form'
 import { zodResolver } from '@hookform/resolvers/zod'
 import { z } from 'zod'
 import { marathonsApi } from '@/api'
 import { NeonButton, Input, GlassCard } from '@/components/ui'
-import { Globe, Lock, Users, UserCog, ArrowLeft, Gamepad2, AlertCircle, Sparkles, Calendar, Clock } from 'lucide-react'
+import { Globe, Lock, Users, UserCog, ArrowLeft, Gamepad2, AlertCircle, Sparkles, Calendar, Clock, Camera, Trash2 } from 'lucide-react'
 import type { GameProposalMode } from '@/types'
+import { useToast } from '@/store/toast'
 
 const createSchema = z.object({
   title: z.string().min(1, 'Название обязательно').max(100),
@@ -21,8 +22,12 @@ type CreateForm = z.infer<typeof createSchema>
 
 export function CreateMarathonPage() {
   const navigate = useNavigate()
+  const toast = useToast()
   const [isLoading, setIsLoading] = useState(false)
   const [error, setError] = useState<string | null>(null)
+  const [coverFile, setCoverFile] = useState<File | null>(null)
+  const [coverPreview, setCoverPreview] = useState<string | null>(null)
+  const fileInputRef = useRef<HTMLInputElement>(null)
 
   const {
     register,
@@ -42,6 +47,38 @@ export function CreateMarathonPage() {
   const isPublic = watch('is_public')
   const gameProposalMode = watch('game_proposal_mode')
 
+  const handleCoverClick = () => {
+    fileInputRef.current?.click()
+  }
+
+  const handleCoverChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0]
+    if (!file) return
+
+    if (!file.type.startsWith('image/')) {
+      toast.error('Файл должен быть изображением')
+      return
+    }
+    if (file.size > 5 * 1024 * 1024) {
+      toast.error('Максимальный размер файла 5 МБ')
+      return
+    }
+
+    setCoverFile(file)
+    setCoverPreview(URL.createObjectURL(file))
+  }
+
+  const handleRemoveCover = () => {
+    setCoverFile(null)
+    if (coverPreview) {
+      URL.revokeObjectURL(coverPreview)
+    }
+    setCoverPreview(null)
+    if (fileInputRef.current) {
+      fileInputRef.current.value = ''
+    }
+  }
+
   const onSubmit = async (data: CreateForm) => {
     setIsLoading(true)
     setError(null)
@@ -54,6 +91,16 @@ export function CreateMarathonPage() {
         is_public: data.is_public,
         game_proposal_mode: data.game_proposal_mode as GameProposalMode,
       })
+
+      // Upload cover if selected
+      if (coverFile) {
+        try {
+          await marathonsApi.uploadCover(marathon.id, coverFile)
+        } catch {
+          toast.warning('Марафон создан, но не удалось загрузить обложку')
+        }
+      }
+
       navigate(`/marathons/${marathon.id}/lobby`)
     } catch (err: unknown) {
       const apiError = err as { response?: { data?: { detail?: string } } }
@@ -94,6 +141,57 @@ export function CreateMarathonPage() {
             </div>
           )}
 
+          {/* Cover Image */}
+          <div>
+            <label className="block text-sm font-medium text-gray-300 mb-3">
+              Обложка (необязательно)
+            </label>
+            <div className="relative group">
+              <button
+                type="button"
+                onClick={handleCoverClick}
+                disabled={isLoading}
+                className="relative w-full h-40 rounded-xl overflow-hidden bg-dark-700 border-2 border-dashed border-dark-500 hover:border-neon-500/50 transition-all"
+              >
+                {coverPreview ? (
+                  <img
+                    src={coverPreview}
+                    alt="Обложка марафона"
+                    className="w-full h-full object-cover"
+                  />
+                ) : (
+                  <div className="w-full h-full flex flex-col items-center justify-center text-gray-500">
+                    <Camera className="w-8 h-8 mb-2" />
+                    <span className="text-sm">Нажмите для загрузки</span>
+                    <span className="text-xs text-gray-600 mt-1">JPG, PNG до 5 МБ</span>
+                  </div>
+                )}
+                {coverPreview && (
+                  <div className="absolute inset-0 bg-dark-900/70 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity">
+                    <Camera className="w-6 h-6 text-neon-500" />
+                    <span className="ml-2 text-white text-sm">Изменить</span>
+                  </div>
+                )}
+              </button>
+              {coverPreview && (
+                <button
+                  type="button"
+                  onClick={handleRemoveCover}
+                  className="absolute top-2 right-2 p-2 rounded-lg bg-red-500/20 text-red-400 hover:bg-red-500/30 transition-colors"
+                >
+                  <Trash2 className="w-4 h-4" />
+                </button>
+              )}
+            </div>
+            <input
+              ref={fileInputRef}
+              type="file"
+              accept="image/*"
+              onChange={handleCoverChange}
+              className="hidden"
+            />
+          </div>
+
           {/* Basic info */}
           <div className="space-y-4">
             <Input

frontend/src/pages/LobbyPage.tsx

@@ -9,8 +9,9 @@ import { useConfirm } from '@/store/confirm'
 import { fuzzyFilter } from '@/utils/fuzzySearch'
 import {
   Plus, Trash2, Sparkles, Play, Loader2, Gamepad2, X, Save, Eye,
-  ChevronDown, ChevronUp, Edit2, Check, CheckCircle, XCircle, Clock, User, ArrowLeft, Zap, Search
+  ChevronDown, ChevronUp, Edit2, Check, CheckCircle, XCircle, Clock, User, ArrowLeft, Zap, Search, Settings
 } from 'lucide-react'
+import { MarathonSettingsModal } from '@/components/MarathonSettingsModal'
 
 export function LobbyPage() {
   const { id } = useParams<{ id: string }>()
@@ -90,6 +91,9 @@ export function LobbyPage() {
   const [searchQuery, setSearchQuery] = useState('')
   const [generateSearchQuery, setGenerateSearchQuery] = useState('')
 
+  // Settings modal
+  const [showSettings, setShowSettings] = useState(false)
+
   useEffect(() => {
     loadData()
   }, [id])
@@ -1062,14 +1066,22 @@ export function LobbyPage() {
         </div>
 
         {isOrganizer && (
-          <NeonButton
-            onClick={handleStartMarathon}
-            isLoading={isStarting}
-            disabled={approvedGames.length === 0}
-            icon={<Play className="w-4 h-4" />}
-          >
-            Запустить марафон
-          </NeonButton>
+          <div className="flex gap-2">
+            <NeonButton
+              variant="ghost"
+              onClick={() => setShowSettings(true)}
+              className="!text-gray-400 hover:!bg-dark-600"
+              icon={<Settings className="w-4 h-4" />}
+            />
+            <NeonButton
+              onClick={handleStartMarathon}
+              isLoading={isStarting}
+              disabled={approvedGames.length === 0}
+              icon={<Play className="w-4 h-4" />}
+            >
+              Запустить марафон
+            </NeonButton>
+          </div>
         )}
       </div>
 
@@ -1747,6 +1759,16 @@ export function LobbyPage() {
           )
         })()}
       </GlassCard>
+
+      {/* Settings Modal */}
+      {marathon && (
+        <MarathonSettingsModal
+          marathon={marathon}
+          isOpen={showSettings}
+          onClose={() => setShowSettings(false)}
+          onUpdate={setMarathon}
+        />
+      )}
     </div>
   )
 }

frontend/src/pages/MarathonPage.tsx

@@ -9,6 +9,7 @@ import { useConfirm } from '@/store/confirm'
 import { EventBanner } from '@/components/EventBanner'
 import { EventControl } from '@/components/EventControl'
 import { ActivityFeed, type ActivityFeedRef } from '@/components/ActivityFeed'
+import { MarathonSettingsModal } from '@/components/MarathonSettingsModal'
 import {
   Users, Calendar, Trophy, Play, Settings, Copy, Check, Loader2, Trash2,
   Globe, Lock, CalendarCheck, UserPlus, Gamepad2, ArrowLeft, Zap, Flag,
@@ -35,6 +36,7 @@ export function MarathonPage() {
   const [showEventControl, setShowEventControl] = useState(false)
   const [showChallenges, setShowChallenges] = useState(false)
   const [expandedGameId, setExpandedGameId] = useState<number | null>(null)
+  const [showSettings, setShowSettings] = useState(false)
   const activityFeedRef = useRef<ActivityFeedRef>(null)
 
   useEffect(() => {
@@ -227,8 +229,8 @@ export function MarathonPage() {
 
               {marathon.status === 'preparing' && isOrganizer && (
                 <Link to={`/marathons/${id}/lobby`}>
-                  <NeonButton variant="secondary" icon={<Settings className="w-4 h-4" />}>
-                    Настройка
+                  <NeonButton variant="secondary" icon={<Gamepad2 className="w-4 h-4" />}>
+                    Игры
                   </NeonButton>
                 </Link>
               )}
@@ -266,6 +268,15 @@ export function MarathonPage() {
                 </button>
               )}
 
+              {marathon.status === 'preparing' && isOrganizer && (
+                <NeonButton
+                  variant="ghost"
+                  onClick={() => setShowSettings(true)}
+                  className="!text-gray-400 hover:!bg-dark-600"
+                  icon={<Settings className="w-4 h-4" />}
+                />
+              )}
+
               {canDelete && (
                 <NeonButton
                   variant="ghost"
@@ -533,6 +544,14 @@ export function MarathonPage() {
           </div>
         )}
       </div>
+
+      {/* Settings Modal */}
+      <MarathonSettingsModal
+        marathon={marathon}
+        isOpen={showSettings}
+        onClose={() => setShowSettings(false)}
+        onUpdate={setMarathon}
+      />
     </div>
   )
 }

frontend/src/pages/MarathonsPage.tsx

@@ -233,10 +233,20 @@ export function MarathonsPage() {
                 >
                   <div className="flex items-center justify-between">
                     <div className="flex items-center gap-4">
-                      {/* Icon */}
-                      <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 group-hover:border-neon-500/40 transition-colors">
-                        <Gamepad2 className="w-7 h-7 text-neon-400" />
-                      </div>
+                      {/* Cover or Icon */}
+                      {marathon.cover_url ? (
+                        <div className="w-14 h-14 rounded-xl overflow-hidden border border-dark-500 group-hover:border-neon-500/40 transition-colors flex-shrink-0">
+                          <img
+                            src={marathon.cover_url}
+                            alt={marathon.title}
+                            className="w-full h-full object-cover"
+                          />
+                        </div>
+                      ) : (
+                        <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 group-hover:border-neon-500/40 transition-colors flex-shrink-0">
+                          <Gamepad2 className="w-7 h-7 text-neon-400" />
+                        </div>
+                      )}
 
                       {/* Info */}
                       <div>

frontend/src/types/index.ts

@@ -63,6 +63,7 @@ export interface Marathon {
   is_public: boolean
   game_proposal_mode: GameProposalMode
   auto_events_enabled: boolean
+  cover_url: string | null
   start_date: string | null
   end_date: string | null
   participants_count: number
@@ -76,6 +77,7 @@ export interface MarathonListItem {
   title: string
   status: MarathonStatus
   is_public: boolean
+  cover_url: string | null
   participants_count: number
   start_date: string | null
   end_date: string | null
@@ -90,11 +92,21 @@ export interface MarathonCreate {
   game_proposal_mode: GameProposalMode
 }
 
+export interface MarathonUpdate {
+  title?: string
+  description?: string
+  start_date?: string
+  is_public?: boolean
+  game_proposal_mode?: GameProposalMode
+  auto_events_enabled?: boolean
+}
+
 export interface MarathonPublicInfo {
   id: number
   title: string
   description: string | null
   status: MarathonStatus
+  cover_url: string | null
   participants_count: number
   creator_nickname: string
 }