Add covers

backend/alembic/versions/019_add_marathon_cover.py

@@ -0,0 +1,36 @@
+"""Add marathon cover_url field
+
+Revision ID: 019_add_marathon_cover
+Revises: 018_seed_static_content
+Create Date: 2024-12-21
+
+"""
+from typing import Sequence, Union
+
+from alembic import op
+import sqlalchemy as sa
+from sqlalchemy import inspect
+
+
+# revision identifiers, used by Alembic.
+revision: str = '019_add_marathon_cover'
+down_revision: Union[str, None] = '018_seed_static_content'
+branch_labels: Union[str, Sequence[str], None] = None
+depends_on: Union[str, Sequence[str], None] = None
+
+
+def column_exists(table_name: str, column_name: str) -> bool:
+    bind = op.get_bind()
+    inspector = inspect(bind)
+    columns = [col['name'] for col in inspector.get_columns(table_name)]
+    return column_name in columns
+
+
+def upgrade() -> None:
+    if not column_exists('marathons', 'cover_url'):
+        op.add_column('marathons', sa.Column('cover_url', sa.String(500), nullable=True))
+
+
+def downgrade() -> None:
+    if column_exists('marathons', 'cover_url'):
+        op.drop_column('marathons', 'cover_url')

backend/app/api/v1/marathons.py

@@ -1,7 +1,7 @@
 from datetime import timedelta
 import secrets
 import string
-from fastapi import APIRouter, HTTPException, status, Depends
+from fastapi import APIRouter, HTTPException, status, Depends, UploadFile, File, Response
 from fastapi.security import HTTPBearer, HTTPAuthorizationCredentials
 from sqlalchemy import select, func
 from sqlalchemy.orm import selectinload
@@ -11,7 +11,9 @@ from app.api.deps import (
     require_participant, require_organizer, require_creator,
     get_participant,
 )
+from app.core.config import settings
 from app.core.security import decode_access_token
+from app.services.storage import storage_service
 
 # Optional auth for endpoints that need it conditionally
 optional_auth = HTTPBearer(auto_error=False)
@@ -62,6 +64,7 @@ async def get_marathon_by_code(invite_code: str, db: DbSession):
         title=marathon.title,
         description=marathon.description,
         status=marathon.status,
+        cover_url=marathon.cover_url,
         participants_count=participants_count,
         creator_nickname=marathon.creator.nickname,
     )
@@ -128,6 +131,7 @@ async def list_marathons(current_user: CurrentUser, db: DbSession):
             title=marathon.title,
             status=marathon.status,
             is_public=marathon.is_public,
+            cover_url=marathon.cover_url,
             participants_count=row[1],
             start_date=marathon.start_date,
             end_date=marathon.end_date,
@@ -180,6 +184,7 @@ async def create_marathon(
         is_public=marathon.is_public,
         game_proposal_mode=marathon.game_proposal_mode,
         auto_events_enabled=marathon.auto_events_enabled,
+        cover_url=marathon.cover_url,
         start_date=marathon.start_date,
         end_date=marathon.end_date,
         participants_count=1,
@@ -226,6 +231,7 @@ async def get_marathon(marathon_id: int, current_user: CurrentUser, db: DbSessio
         is_public=marathon.is_public,
         game_proposal_mode=marathon.game_proposal_mode,
         auto_events_enabled=marathon.auto_events_enabled,
+        cover_url=marathon.cover_url,
         start_date=marathon.start_date,
         end_date=marathon.end_date,
         participants_count=participants_count,
@@ -591,3 +597,109 @@ async def get_leaderboard(
         ))
 
     return leaderboard
+
+
+@router.get("/{marathon_id}/cover")
+async def get_marathon_cover(marathon_id: int, db: DbSession):
+    """Get marathon cover image"""
+    marathon = await get_marathon_or_404(db, marathon_id)
+
+    if not marathon.cover_path:
+        raise HTTPException(status_code=404, detail="Marathon has no cover")
+
+    file_data = await storage_service.get_file(marathon.cover_path, "covers")
+    if not file_data:
+        raise HTTPException(status_code=404, detail="Cover not found in storage")
+
+    content, content_type = file_data
+
+    return Response(
+        content=content,
+        media_type=content_type,
+        headers={
+            "Cache-Control": "public, max-age=3600",
+        }
+    )
+
+
+@router.post("/{marathon_id}/cover", response_model=MarathonResponse)
+async def upload_marathon_cover(
+    marathon_id: int,
+    current_user: CurrentUser,
+    db: DbSession,
+    file: UploadFile = File(...),
+):
+    """Upload marathon cover image (organizers only, preparing status)"""
+    await require_organizer(db, current_user, marathon_id)
+    marathon = await get_marathon_or_404(db, marathon_id)
+
+    if marathon.status != MarathonStatus.PREPARING.value:
+        raise HTTPException(status_code=400, detail="Cannot update cover of active or finished marathon")
+
+    # Validate file
+    if not file.content_type or not file.content_type.startswith("image/"):
+        raise HTTPException(
+            status_code=status.HTTP_400_BAD_REQUEST,
+            detail="File must be an image",
+        )
+
+    contents = await file.read()
+    if len(contents) > settings.MAX_UPLOAD_SIZE:
+        raise HTTPException(
+            status_code=status.HTTP_400_BAD_REQUEST,
+            detail=f"File too large. Maximum size is {settings.MAX_UPLOAD_SIZE // 1024 // 1024} MB",
+        )
+
+    # Get file extension
+    ext = file.filename.split(".")[-1].lower() if file.filename else "jpg"
+    if ext not in settings.ALLOWED_IMAGE_EXTENSIONS:
+        raise HTTPException(
+            status_code=status.HTTP_400_BAD_REQUEST,
+            detail=f"Invalid file type. Allowed: {settings.ALLOWED_IMAGE_EXTENSIONS}",
+        )
+
+    # Delete old cover if exists
+    if marathon.cover_path:
+        await storage_service.delete_file(marathon.cover_path)
+
+    # Upload file
+    filename = storage_service.generate_filename(marathon_id, file.filename)
+    file_path = await storage_service.upload_file(
+        content=contents,
+        folder="covers",
+        filename=filename,
+        content_type=file.content_type or "image/jpeg",
+    )
+
+    # Update marathon with cover path and URL
+    marathon.cover_path = file_path
+    marathon.cover_url = f"/api/v1/marathons/{marathon_id}/cover"
+    await db.commit()
+
+    return await get_marathon(marathon_id, current_user, db)
+
+
+@router.delete("/{marathon_id}/cover", response_model=MarathonResponse)
+async def delete_marathon_cover(
+    marathon_id: int,
+    current_user: CurrentUser,
+    db: DbSession,
+):
+    """Delete marathon cover image (organizers only, preparing status)"""
+    await require_organizer(db, current_user, marathon_id)
+    marathon = await get_marathon_or_404(db, marathon_id)
+
+    if marathon.status != MarathonStatus.PREPARING.value:
+        raise HTTPException(status_code=400, detail="Cannot update cover of active or finished marathon")
+
+    if not marathon.cover_path:
+        raise HTTPException(status_code=400, detail="Marathon has no cover")
+
+    # Delete file from storage
+    await storage_service.delete_file(marathon.cover_path)
+
+    marathon.cover_path = None
+    marathon.cover_url = None
+    await db.commit()
+
+    return await get_marathon(marathon_id, current_user, db)

backend/app/models/marathon.py

@@ -31,6 +31,8 @@ class Marathon(Base):
     start_date: Mapped[datetime | None] = mapped_column(DateTime, nullable=True)
     end_date: Mapped[datetime | None] = mapped_column(DateTime, nullable=True)
     auto_events_enabled: Mapped[bool] = mapped_column(Boolean, default=True)
+    cover_path: Mapped[str | None] = mapped_column(String(500), nullable=True)
+    cover_url: Mapped[str | None] = mapped_column(String(500), nullable=True)
     created_at: Mapped[datetime] = mapped_column(DateTime, default=datetime.utcnow)
 
     # Relationships

backend/app/schemas/marathon.py

@@ -49,6 +49,7 @@ class MarathonResponse(MarathonBase):
     is_public: bool
     game_proposal_mode: str
     auto_events_enabled: bool
+    cover_url: str | None
     start_date: datetime | None
     end_date: datetime | None
     participants_count: int
@@ -69,6 +70,7 @@ class MarathonListItem(BaseModel):
     title: str
     status: str
     is_public: bool
+    cover_url: str | None
     participants_count: int
     start_date: datetime | None
     end_date: datetime | None
@@ -87,6 +89,7 @@ class MarathonPublicInfo(BaseModel):
     title: str
     description: str | None
     status: str
+    cover_url: str | None
     participants_count: int
     creator_nickname: str
 

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,6 +1066,13 @@ export function LobbyPage() {
         </div>
 
         {isOrganizer && (
+          <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}
@@ -1070,6 +1081,7 @@ export function LobbyPage() {
             >
               Запустить марафон
             </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 */}
+                      {/* Cover or 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">
+                      {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
 }