AI generation React

src/App.css

@@ -0,0 +1,184 @@
+.counter {
+  font-size: 16px;
+  padding: 5px 10px;
+  border-radius: 5px;
+  color: var(--accent);
+  background: var(--accent-bg);
+  border: 2px solid transparent;
+  transition: border-color 0.3s;
+  margin-bottom: 24px;
+
+  &:hover {
+    border-color: var(--accent-border);
+  }
+  &:focus-visible {
+    outline: 2px solid var(--accent);
+    outline-offset: 2px;
+  }
+}
+
+.hero {
+  position: relative;
+
+  .base,
+  .framework,
+  .vite {
+    inset-inline: 0;
+    margin: 0 auto;
+  }
+
+  .base {
+    width: 170px;
+    position: relative;
+    z-index: 0;
+  }
+
+  .framework,
+  .vite {
+    position: absolute;
+  }
+
+  .framework {
+    z-index: 1;
+    top: 34px;
+    height: 28px;
+    transform: perspective(2000px) rotateZ(300deg) rotateX(44deg) rotateY(39deg)
+      scale(1.4);
+  }
+
+  .vite {
+    z-index: 0;
+    top: 107px;
+    height: 26px;
+    width: auto;
+    transform: perspective(2000px) rotateZ(300deg) rotateX(40deg) rotateY(39deg)
+      scale(0.8);
+  }
+}
+
+#center {
+  display: flex;
+  flex-direction: column;
+  gap: 25px;
+  place-content: center;
+  place-items: center;
+  flex-grow: 1;
+
+  @media (max-width: 1024px) {
+    padding: 32px 20px 24px;
+    gap: 18px;
+  }
+}
+
+#next-steps {
+  display: flex;
+  border-top: 1px solid var(--border);
+  text-align: left;
+
+  & > div {
+    flex: 1 1 0;
+    padding: 32px;
+    @media (max-width: 1024px) {
+      padding: 24px 20px;
+    }
+  }
+
+  .icon {
+    margin-bottom: 16px;
+    width: 22px;
+    height: 22px;
+  }
+
+  @media (max-width: 1024px) {
+    flex-direction: column;
+    text-align: center;
+  }
+}
+
+#docs {
+  border-right: 1px solid var(--border);
+
+  @media (max-width: 1024px) {
+    border-right: none;
+    border-bottom: 1px solid var(--border);
+  }
+}
+
+#next-steps ul {
+  list-style: none;
+  padding: 0;
+  display: flex;
+  gap: 8px;
+  margin: 32px 0 0;
+
+  .logo {
+    height: 18px;
+  }
+
+  a {
+    color: var(--text-h);
+    font-size: 16px;
+    border-radius: 6px;
+    background: var(--social-bg);
+    display: flex;
+    padding: 6px 12px;
+    align-items: center;
+    gap: 8px;
+    text-decoration: none;
+    transition: box-shadow 0.3s;
+
+    &:hover {
+      box-shadow: var(--shadow);
+    }
+    .button-icon {
+      height: 18px;
+      width: 18px;
+    }
+  }
+
+  @media (max-width: 1024px) {
+    margin-top: 20px;
+    flex-wrap: wrap;
+    justify-content: center;
+
+    li {
+      flex: 1 1 calc(50% - 8px);
+    }
+
+    a {
+      width: 100%;
+      justify-content: center;
+      box-sizing: border-box;
+    }
+  }
+}
+
+#spacer {
+  height: 88px;
+  border-top: 1px solid var(--border);
+  @media (max-width: 1024px) {
+    height: 48px;
+  }
+}
+
+.ticks {
+  position: relative;
+  width: 100%;
+
+  &::before,
+  &::after {
+    content: '';
+    position: absolute;
+    top: -4.5px;
+    border: 5px solid transparent;
+  }
+
+  &::before {
+    left: 0;
+    border-left-color: var(--border);
+  }
+  &::after {
+    right: 0;
+    border-right-color: var(--border);
+  }
+}

src/App.jsx

@@ -0,0 +1,480 @@
+// App.js
+import React, { useState, useEffect } from 'react';
+import QuizQuestion from './components/QuizQuestion';
+import QuizResults from './components/QuizResults';
+import Timer from './components/Timer';
+import ComparisonScreen from './components/ComparisonScreen';
+import Lobby from './components/Lobby';
+import './styles/Quiz.css';
+
+const App = () => {
+  const [quizData, setQuizData] = useState(null);
+  const [currentQuestion, setCurrentQuestion] = useState(0);
+  const [userAnswers, setUserAnswers] = useState([]);
+  const [quizCompleted, setQuizCompleted] = useState(false);
+  const [loading, setLoading] = useState(true);
+  const [timeExpiredQuestions, setTimeExpiredQuestions] = useState([]);
+  const [quizStarted, setQuizStarted] = useState(false);
+  const [timePerQuestion, setTimePerQuestion] = useState(30);
+  const [showComparison, setShowComparison] = useState(false);
+  const [currentAnswerResult, setCurrentAnswerResult] = useState(null);
+  const [otherPlayersResults, setOtherPlayersResults] = useState([]);
+  
+  // Новые состояния для лобби
+  const [showLobby, setShowLobby] = useState(true);
+  const [currentPlayer, setCurrentPlayer] = useState(null);
+  const [players, setPlayers] = useState([]);
+  const [roomCode, setRoomCode] = useState(null);
+  const [isHost, setIsHost] = useState(false);
+  const [gameSettings, setGameSettings] = useState({
+    timePerQuestion: 30,
+    showCorrectAnswer: true,
+    difficulty: "medium"
+  });
+
+  useEffect(() => {
+    const loadQuizData = async () => {
+      const mockQuizData = {
+        title: "Увлекательная викторина",
+        description: "Проверьте свои знания! Сравнивайте свои результаты с другими игроками после каждого вопроса.",
+        timeLimit: 30,
+        questions: [
+          {
+            id: 1,
+            text: "Какая планета находится ближе всего к Солнцу?",
+            imageUrl: "https://example.com/solar-system.jpg",
+            type: "single",
+            timeLimit: 30,
+            points: 100,
+            answers: [
+              { id: "a", text: "Венера", imageUrl: "https://example.com/venus.jpg", isCorrect: false },
+              { id: "b", text: "Меркурий", imageUrl: "https://example.com/mercury.jpg", isCorrect: true },
+              { id: "c", text: "Марс", imageUrl: "https://example.com/mars.jpg", isCorrect: false },
+              { id: "d", text: "Юпитер", imageUrl: "https://example.com/jupiter.jpg", isCorrect: false }
+            ]
+          },
+          {
+            id: 2,
+            text: "Какой из этих языков программирования наиболее популярен для веб-разработки?",
+            type: "single",
+            timeLimit: 25,
+            points: 100,
+            answers: [
+              { id: "a", text: "Python", imageUrl: "https://example.com/python.jpg", isCorrect: false },
+              { id: "b", text: "Java", imageUrl: "https://example.com/java.jpg", isCorrect: false },
+              { id: "c", text: "JavaScript", isCorrect: true },
+              { id: "d", text: "C++", isCorrect: false }
+            ]
+          },
+          {
+            id: 3,
+            text: "Напишите свой ответ на вопрос: Какой ваш любимый цвет?",
+            type: "text",
+            timeLimit: 45,
+            points: 50,
+            answers: []
+          },
+          {
+            id: 4,
+            text: "Какое животное изображено на картинке?",
+            imageUrl: "https://example.com/animal.jpg",
+            type: "single",
+            timeLimit: 20,
+            points: 100,
+            answers: [
+              { id: "a", text: "Собака", imageUrl: "https://example.com/dog.jpg", isCorrect: false },
+              { id: "b", text: "Кошка", imageUrl: "https://example.com/cat.jpg", isCorrect: true },
+              { id: "c", text: "Птица", imageUrl: "https://example.com/bird.jpg", isCorrect: false },
+              { id: "d", text: "Рыба", imageUrl: "https://example.com/fish.jpg", isCorrect: false }
+            ]
+          }
+        ]
+      };
+
+      setQuizData(mockQuizData);
+      setLoading(false);
+    };
+
+    loadQuizData();
+  }, []);
+
+  // Генерация случайного кода комнаты
+  const generateRoomCode = () => {
+    return Math.random().toString(36).substring(2, 8).toUpperCase();
+  };
+
+  // Создание новой комнаты
+  const handleCreateRoom = (playerName, avatar) => {
+    const newRoomCode = generateRoomCode();
+    const newPlayer = {
+      id: Date.now().toString(),
+      name: playerName,
+      avatar: avatar,
+      score: 0,
+      isHost: true,
+      answers: [],
+      joinTime: new Date()
+    };
+    
+    setRoomCode(newRoomCode);
+    setCurrentPlayer(newPlayer);
+    setPlayers([newPlayer]);
+    setIsHost(true);
+    setShowLobby(false);
+  };
+
+  // Подключение к существующей комнате
+  const handleJoinRoom = (playerName, avatar, code) => {
+    // В реальном приложении здесь был бы запрос к серверу
+    // Симулируем подключение к комнате
+    const existingPlayers = [
+      {
+        id: "host123",
+        name: "Алексей",
+        avatar: "👨‍💻",
+        score: 0,
+        isHost: true,
+        answers: [],
+        joinTime: new Date(Date.now() - 300000)
+      },
+      {
+        id: "player456",
+        name: "Мария",
+        avatar: "👩‍🎨",
+        score: 0,
+        isHost: false,
+        answers: [],
+        joinTime: new Date(Date.now() - 120000)
+      }
+    ];
+    
+    const newPlayer = {
+      id: Date.now().toString(),
+      name: playerName,
+      avatar: avatar,
+      score: 0,
+      isHost: false,
+      answers: [],
+      joinTime: new Date()
+    };
+    
+    setRoomCode(code.toUpperCase());
+    setCurrentPlayer(newPlayer);
+    setPlayers([...existingPlayers, newPlayer]);
+    setIsHost(false);
+    setShowLobby(false);
+  };
+
+  // Запуск игры (только для хоста)
+  const handleStartGame = () => {
+    if (isHost && players.length >= 1) {
+      setQuizStarted(true);
+    }
+  };
+
+  // Симуляция ответов других игроков
+  const generateOtherPlayersResults = (currentQuestionIndex, userAnswer) => {
+    return players
+      .filter(player => player.id !== currentPlayer.id)
+      .map(player => {
+        const currentQ = quizData.questions[currentQuestionIndex];
+        let isCorrect = false;
+        let answerText = "";
+        let timeSpent = Math.floor(Math.random() * (gameSettings.timePerQuestion - 5)) + 5;
+
+        if (currentQ.type === "single") {
+          const correctAnswer = currentQ.answers.find(a => a.isCorrect);
+          // Учитываем сложность игры
+          const correctProbability = gameSettings.difficulty === "easy" ? 0.8 : 
+                                     gameSettings.difficulty === "medium" ? 0.6 : 0.4;
+          isCorrect = Math.random() < correctProbability;
+          answerText = isCorrect ? correctAnswer.text : currentQ.answers[Math.floor(Math.random() * currentQ.answers.length)].text;
+        } else {
+          answerText = player.name === "Мария" ? "Синий" : "Красный";
+          isCorrect = Math.random() < 0.5;
+        }
+
+        return {
+          ...player,
+          isCorrect,
+          answerText,
+          timeSpent,
+        };
+      });
+  };
+
+  const handleAnswer = (answer) => {
+    const newAnswers = [...userAnswers];
+    const currentQ = quizData.questions[currentQuestion];
+    
+    let isCorrect = false;
+    let answerText = "";
+    let pointsEarned = 0;
+    
+    if (currentQ.type === "single") {
+      isCorrect = answer.isCorrect;
+      answerText = answer.text;
+      pointsEarned = isCorrect ? currentQ.points : 0;
+      
+      // Добавляем бонус за скорость
+      if (isCorrect && timePerQuestion < 10) {
+        pointsEarned += 50;
+      } else if (isCorrect && timePerQuestion < 20) {
+        pointsEarned += 25;
+      }
+      
+      newAnswers[currentQuestion] = { 
+        ...answer, 
+        timeSpent: gameSettings.timePerQuestion - timePerQuestion,
+        pointsEarned 
+      };
+    } else if (currentQ.type === "text") {
+      answerText = answer;
+      isCorrect = null;
+      pointsEarned = 0;
+      newAnswers[currentQuestion] = { 
+        text: answer, 
+        questionId: currentQ.id, 
+        timeSpent: gameSettings.timePerQuestion - timePerQuestion,
+        pointsEarned 
+      };
+    }
+    
+    // Обновляем счет игрока
+    const updatedPlayer = {
+      ...currentPlayer,
+      score: currentPlayer.score + pointsEarned
+    };
+    setCurrentPlayer(updatedPlayer);
+    
+    setUserAnswers(newAnswers);
+    
+    const result = {
+      isCorrect,
+      answerText,
+      timeSpent: gameSettings.timePerQuestion - timePerQuestion,
+      pointsEarned,
+      userAnswer: answer
+    };
+    setCurrentAnswerResult(result);
+    
+    const otherResults = generateOtherPlayersResults(currentQuestion, answer);
+    setOtherPlayersResults(otherResults);
+    setShowComparison(true);
+  };
+
+  const handleTimeExpired = () => {
+    const currentQ = quizData.questions[currentQuestion];
+    
+    if (!userAnswers[currentQuestion]) {
+      const expiredAnswer = currentQ.type === "text" 
+        ? { text: "[Время истекло]", questionId: currentQ.id, timeExpired: true, pointsEarned: 0 }
+        : { timeExpired: true, id: null, pointsEarned: 0 };
+      
+      const newAnswers = [...userAnswers];
+      newAnswers[currentQuestion] = expiredAnswer;
+      setUserAnswers(newAnswers);
+      
+      setTimeExpiredQuestions([...timeExpiredQuestions, currentQuestion]);
+      
+      const result = {
+        isCorrect: false,
+        answerText: "Время истекло",
+        timeSpent: gameSettings.timePerQuestion,
+        pointsEarned: 0,
+        userAnswer: expiredAnswer
+      };
+      setCurrentAnswerResult(result);
+      const otherResults = generateOtherPlayersResults(currentQuestion, expiredAnswer);
+      setOtherPlayersResults(otherResults);
+      setShowComparison(true);
+    }
+  };
+
+  const handleContinueToNext = () => {
+    setShowComparison(false);
+    
+    if (currentQuestion + 1 < quizData.questions.length) {
+      setCurrentQuestion(currentQuestion + 1);
+    } else {
+      setQuizCompleted(true);
+    }
+  };
+
+  const handleRestart = () => {
+    setCurrentQuestion(0);
+    setUserAnswers([]);
+    setQuizCompleted(false);
+    setTimeExpiredQuestions([]);
+    setQuizStarted(false);
+    setShowComparison(false);
+    setCurrentAnswerResult(null);
+    setOtherPlayersResults([]);
+    setShowLobby(true);
+    setCurrentPlayer(null);
+    setPlayers([]);
+    setRoomCode(null);
+    setIsHost(false);
+  };
+
+  const calculateScore = () => {
+    return currentPlayer?.score || 0;
+  };
+
+  const getTimeForCurrentQuestion = () => {
+    if (!quizData) return gameSettings.timePerQuestion;
+    const currentQ = quizData.questions[currentQuestion];
+    return currentQ.timeLimit || gameSettings.timePerQuestion;
+  };
+
+  if (loading) {
+    return <div className="loading">Загрузка викторины...</div>;
+  }
+
+  if (showLobby) {
+    return (
+      <Lobby
+        onCreateRoom={handleCreateRoom}
+        onJoinRoom={handleJoinRoom}
+        players={players}
+        roomCode={roomCode}
+        isHost={isHost}
+        onStartGame={handleStartGame}
+        gameSettings={gameSettings}
+        setGameSettings={setGameSettings}
+      />
+    );
+  }
+
+  if (!quizStarted) {
+    return (
+      <div className="waiting-room">
+        <div className="waiting-card">
+          <h2>Ожидание начала игры</h2>
+          <div className="room-info">
+            <p>Код комнаты: <strong>{roomCode}</strong></p>
+            <p>Игроков в комнате: {players.length}</p>
+          </div>
+          <div className="players-list">
+            <h3>Игроки:</h3>
+            {players.map(player => (
+              <div key={player.id} className="waiting-player">
+                <span className="player-avatar">{player.avatar}</span>
+                <span className="player-name">{player.name}</span>
+                {player.isHost && <span className="host-badge">Хост</span>}
+              </div>
+            ))}
+          </div>
+          {isHost && (
+            <button onClick={handleStartGame} className="start-game-button">
+              Начать игру 🎮
+            </button>
+          )}
+          {!isHost && (
+            <div className="waiting-message">
+              <p>⏳ Ожидаем начала игры от хоста...</p>
+            </div>
+          )}
+        </div>
+      </div>
+    );
+  }
+
+  if (quizCompleted) {
+    const score = calculateScore();
+    const allPlayersScores = [
+      { ...currentPlayer, isCurrent: true },
+      ...players.filter(p => p.id !== currentPlayer.id)
+    ].sort((a, b) => b.score - a.score);
+    
+    return (
+      <QuizResults 
+        score={score} 
+        totalQuestions={quizData.questions.length}
+        userAnswers={userAnswers}
+        quizData={quizData}
+        onRestart={handleRestart}
+        timeExpiredQuestions={timeExpiredQuestions}
+        allPlayers={allPlayersScores}
+        currentPlayer={currentPlayer}
+      />
+    );
+  }
+
+  if (showComparison) {
+    const currentQ = quizData.questions[currentQuestion];
+    return (
+      <ComparisonScreen
+        question={currentQ}
+        userAnswer={currentAnswerResult}
+        otherPlayers={otherPlayersResults}
+        currentQuestionNumber={currentQuestion + 1}
+        totalQuestions={quizData.questions.length}
+        onContinue={handleContinueToNext}
+        currentPlayer={currentPlayer}
+      />
+    );
+  }
+
+  const currentQ = quizData.questions[currentQuestion];
+  const hasPrevious = currentQuestion > 0;
+  const progress = ((currentQuestion + 1) / quizData.questions.length) * 100;
+  const timeLimit = getTimeForCurrentQuestion();
+  const isTimeExpired = userAnswers[currentQuestion]?.timeExpired;
+
+  return (
+    <div className="quiz-container">
+      <div className="quiz-header">
+        <div className="header-top">
+          <h1>{quizData.title}</h1>
+          <div className="score-display">
+            <span className="score-label">🎯 Ваш счет:</span>
+            <span className="score-value">{currentPlayer?.score || 0}</span>
+          </div>
+        </div>
+        <div className="quiz-stats">
+          <div className="progress-bar">
+            <div className="progress-fill" style={{ width: `${progress}%` }}></div>
+          </div>
+          <div className="stats-info">
+            <div className="question-counter">
+              Вопрос {currentQuestion + 1} из {quizData.questions.length}
+            </div>
+            <Timer 
+              key={currentQuestion}
+              timeLimit={timeLimit}
+              onTimeExpired={handleTimeExpired}
+              isActive={!isTimeExpired && !userAnswers[currentQuestion]}
+            />
+          </div>
+        </div>
+      </div>
+      
+      {isTimeExpired ? (
+        <div className="time-expired-message">
+          <div className="expired-content">
+            <span className="expired-icon">⏰</span>
+            <h3>Время на ответ истекло!</h3>
+            <p>Переход к сравнению результатов...</p>
+          </div>
+        </div>
+      ) : (
+        <QuizQuestion 
+          question={currentQ}
+          onAnswer={handleAnswer}
+          currentAnswer={userAnswers[currentQuestion]}
+        />
+      )}
+      
+      <div className="navigation-buttons">
+        {hasPrevious && !isTimeExpired && (
+          <button onClick={handlePrevious} className="nav-button prev">
+            ← Назад
+          </button>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default App;

src/assets/react.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg>

src/components/ComparisonScreen.css

@@ -0,0 +1,323 @@
+/* components/ComparisonScreen.css */
+.comparison-container {
+  min-height: 100vh;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  padding: 20px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+}
+
+.confetti {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+  font-size: 48px;
+  text-align: center;
+  animation: confettiFall 3s ease-out forwards;
+  z-index: 1000;
+}
+
+@keyframes confettiFall {
+  0% {
+    transform: translateY(-100%) rotate(0deg);
+    opacity: 1;
+  }
+  100% {
+    transform: translateY(100vh) rotate(720deg);
+    opacity: 0;
+  }
+}
+
+.comparison-card {
+  max-width: 900px;
+  width: 100%;
+  background: white;
+  border-radius: 20px;
+  padding: 40px;
+  box-shadow: 0 20px 40px rgba(0,0,0,0.1);
+  animation: slideUp 0.5s ease;
+}
+
+@keyframes slideUp {
+  from {
+    opacity: 0;
+    transform: translateY(30px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.comparison-header {
+  text-align: center;
+  margin-bottom: 30px;
+  padding-bottom: 20px;
+  border-bottom: 2px solid #f0f0f0;
+}
+
+.comparison-header h2 {
+  color: #333;
+  margin-bottom: 15px;
+}
+
+.question-preview {
+  background: #f8f9fa;
+  padding: 15px;
+  border-radius: 10px;
+}
+
+.question-text-preview {
+  color: #666;
+  font-size: 1rem;
+  margin: 0;
+}
+
+.your-result {
+  background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
+  border-radius: 15px;
+  padding: 25px;
+  margin-bottom: 30px;
+  border: 2px solid #e0e0e0;
+}
+
+.result-badge {
+  display: inline-block;
+  padding: 8px 20px;
+  border-radius: 25px;
+  font-weight: bold;
+  margin-bottom: 20px;
+  font-size: 1.1rem;
+}
+
+.result-badge.correct {
+  background: #d4edda;
+  color: #155724;
+  border: 1px solid #c3e6cb;
+}
+
+.result-badge.incorrect {
+  background: #f8d7da;
+  color: #721c24;
+  border: 1px solid #f5c6cb;
+}
+
+.result-badge.pending {
+  background: #fff3cd;
+  color: #856404;
+  border: 1px solid #ffeeba;
+}
+
+.your-stats {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  gap: 15px;
+}
+
+.stat-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 10px;
+  background: white;
+  border-radius: 10px;
+}
+
+.stat-label {
+  color: #666;
+  font-weight: 500;
+}
+
+.stat-value {
+  color: #333;
+  font-weight: bold;
+}
+
+.stat-value.points {
+  color: #4caf50;
+  font-size: 1.1rem;
+}
+
+.comparison-section {
+  margin-bottom: 30px;
+}
+
+.comparison-section h3 {
+  color: #333;
+  margin-bottom: 20px;
+}
+
+.players-ranking {
+  background: #f8f9fa;
+  border-radius: 15px;
+  overflow: hidden;
+}
+
+.player-row {
+  display: flex;
+  align-items: center;
+  padding: 15px 20px;
+  border-bottom: 1px solid #e0e0e0;
+  transition: all 0.3s ease;
+}
+
+.player-row:last-child {
+  border-bottom: none;
+}
+
+.player-row.current-user {
+  background: linear-gradient(90deg, #e8eaf6 0%, #ffffff 100%);
+  box-shadow: 0 2px 5px rgba(102, 126, 234, 0.2);
+}
+
+.player-rank {
+  font-size: 1.5rem;
+  margin-right: 15px;
+  min-width: 50px;
+}
+
+.player-avatar {
+  font-size: 2rem;
+  margin-right: 15px;
+}
+
+.player-info {
+  flex: 1;
+}
+
+.player-name {
+  font-weight: bold;
+  color: #333;
+  margin-bottom: 5px;
+}
+
+.user-badge {
+  margin-left: 8px;
+  font-size: 0.8rem;
+  color: #667eea;
+  font-weight: normal;
+}
+
+.player-answer {
+  font-size: 0.85rem;
+  color: #666;
+}
+
+.player-stats {
+  display: flex;
+  gap: 15px;
+  align-items: center;
+}
+
+.player-correct {
+  width: 30px;
+  height: 30px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: bold;
+}
+
+.player-correct.correct {
+  background: #d4edda;
+  color: #155724;
+}
+
+.player-correct.incorrect {
+  background: #f8d7da;
+  color: #721c24;
+}
+
+.player-time {
+  font-family: monospace;
+  font-size: 0.9rem;
+  color: #666;
+}
+
+.statistics-summary {
+  margin-bottom: 30px;
+}
+
+.statistics-summary h3 {
+  color: #333;
+  margin-bottom: 20px;
+}
+
+.stats-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  gap: 20px;
+}
+
+.stat-card {
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  color: white;
+  padding: 20px;
+  border-radius: 15px;
+  text-align: center;
+}
+
+.stat-number {
+  font-size: 2rem;
+  font-weight: bold;
+  margin-bottom: 10px;
+}
+
+.stat-description {
+  font-size: 0.85rem;
+  opacity: 0.9;
+}
+
+.continue-button {
+  width: 100%;
+  padding: 15px;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  color: white;
+  border: none;
+  border-radius: 30px;
+  font-size: 1.1rem;
+  font-weight: bold;
+  cursor: pointer;
+  transition: all 0.3s ease;
+}
+
+.continue-button:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 10px 20px rgba(102, 126, 234, 0.4);
+}
+
+@media (max-width: 768px) {
+  .comparison-card {
+    padding: 20px;
+  }
+  
+  .player-row {
+    flex-wrap: wrap;
+    padding: 10px 15px;
+  }
+  
+  .player-info {
+    width: 100%;
+    margin-top: 10px;
+    margin-left: 65px;
+  }
+  
+  .player-stats {
+    margin-left: 65px;
+    margin-top: 10px;
+  }
+  
+  .your-stats {
+    grid-template-columns: 1fr;
+  }
+  
+  .stats-grid {
+    grid-template-columns: 1fr;
+  }
+}

src/components/ComparisonScreen.jsx

@@ -0,0 +1,168 @@
+import React, { useState, useEffect } from 'react';
+import './ComparisonScreen.css';
+
+const ComparisonScreen = ({ 
+  question, 
+  userAnswer, 
+  otherPlayers, 
+  currentQuestionNumber, 
+  totalQuestions, 
+  onContinue 
+}) => {
+  const [showConfetti, setShowConfetti] = useState(false);
+  const [sortedPlayers, setSortedPlayers] = useState([]);
+
+  useEffect(() => {
+    // Если ответ правильный, показываем конфетти
+    if (userAnswer.isCorrect === true) {
+      setShowConfetti(true);
+      setTimeout(() => setShowConfetti(false), 3000);
+    }
+
+    // Сортируем игроков по правильности ответа и времени
+    const allPlayers = [
+      {
+        name: "Вы",
+        avatar: "👤",
+        isCorrect: userAnswer.isCorrect,
+        answerText: userAnswer.answerText,
+        timeSpent: userAnswer.timeSpent,
+        isUser: true
+      },
+      ...otherPlayers
+    ];
+
+    const sorted = allPlayers.sort((a, b) => {
+      if (a.isCorrect === b.isCorrect) {
+        return a.timeSpent - b.timeSpent;
+      }
+      return b.isCorrect ? 1 : -1;
+    });
+
+    setSortedPlayers(sorted);
+  }, [userAnswer, otherPlayers]);
+
+  const getRankEmoji = (index) => {
+    switch(index) {
+      case 0: return "🥇";
+      case 1: return "🥈";
+      case 2: return "🥉";
+      default: return `${index + 1}️⃣`;
+    }
+  };
+
+  const getScoreChange = (isCorrect, timeSpent) => {
+    if (isCorrect) {
+      if (timeSpent < 10) return "+15 ⚡";
+      if (timeSpent < 20) return "+10 ✨";
+      return "+5 📝";
+    }
+    return "0 ❌";
+  };
+
+  const getSpeedRating = (timeSpent) => {
+    if (timeSpent < 10) return "Молниеносно! 🚀";
+    if (timeSpent < 20) return "Быстро ⚡";
+    if (timeSpent < 30) return "Средне 🐌";
+    return "Медленно 🐢";
+  };
+
+  return (
+    <div className="comparison-container">
+      {showConfetti && <div className="confetti">🎉✨🎊</div>}
+      
+      <div className="comparison-card">
+        <div className="comparison-header">
+          <h2>Результаты вопроса {currentQuestionNumber}</h2>
+          <div className="question-preview">
+            <p className="question-text-preview">{question.text}</p>
+          </div>
+        </div>
+
+        <div className="your-result">
+          <div className={`result-badge ${userAnswer.isCorrect ? 'correct' : userAnswer.isCorrect === null ? 'pending' : 'incorrect'}`}>
+            {userAnswer.isCorrect === true && "✅ Правильно!"}
+            {userAnswer.isCorrect === false && "❌ Неправильно!"}
+            {userAnswer.isCorrect === null && "⏳ Ожидает оценки"}
+          </div>
+          
+          <div className="your-stats">
+            <div className="stat-item">
+              <span className="stat-label">Ваш ответ:</span>
+              <span className="stat-value">{userAnswer.answerText}</span>
+            </div>
+            <div className="stat-item">
+              <span className="stat-label">Время ответа:</span>
+              <span className="stat-value">{userAnswer.timeSpent} сек</span>
+            </div>
+            <div className="stat-item">
+              <span className="stat-label">Скорость:</span>
+              <span className="stat-value">{getSpeedRating(userAnswer.timeSpent)}</span>
+            </div>
+            <div className="stat-item">
+              <span className="stat-label">Очки:</span>
+              <span className="stat-value points">{getScoreChange(userAnswer.isCorrect, userAnswer.timeSpent)}</span>
+            </div>
+          </div>
+        </div>
+
+        <div className="comparison-section">
+          <h3>🏆 Сравнение с другими игроками</h3>
+          <div className="players-ranking">
+            {sortedPlayers.map((player, index) => (
+              <div key={index} className={`player-row ${player.isUser ? 'current-user' : ''}`}>
+                <div className="player-rank">{getRankEmoji(index)}</div>
+                <div className="player-avatar">{player.avatar}</div>
+                <div className="player-info">
+                  <div className="player-name">
+                    {player.name}
+                    {player.isUser && <span className="user-badge">(Вы)</span>}
+                  </div>
+                  <div className="player-answer">{player.answerText}</div>
+                </div>
+                <div className="player-stats">
+                  <div className={`player-correct ${player.isCorrect ? 'correct' : 'incorrect'}`}>
+                    {player.isCorrect ? "✓" : "✗"}
+                  </div>
+                  <div className="player-time">{player.timeSpent}с</div>
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+
+        <div className="statistics-summary">
+          <h3>📊 Статистика вопроса</h3>
+          <div className="stats-grid">
+            <div className="stat-card">
+              <div className="stat-number">
+                {Math.round((sortedPlayers.filter(p => p.isCorrect).length / sortedPlayers.length) * 100)}%
+              </div>
+              <div className="stat-description">игроков ответили правильно</div>
+            </div>
+            <div className="stat-card">
+              <div className="stat-number">
+                {Math.min(...sortedPlayers.map(p => p.timeSpent))}с
+              </div>
+              <div className="stat-description">самый быстрый ответ</div>
+            </div>
+            <div className="stat-card">
+              <div className="stat-number">
+                {Math.round(sortedPlayers.reduce((sum, p) => sum + p.timeSpent, 0) / sortedPlayers.length)}с
+              </div>
+              <div className="stat-description">среднее время ответа</div>
+            </div>
+          </div>
+        </div>
+
+        <div className="navigation-buttons">
+          <button onClick={onContinue} className="continue-button">
+            {currentQuestionNumber === totalQuestions ? "Завершить викторину 🏁" : "Следующий вопрос →"}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ComparisonScreen;

src/components/Lobby.css

@@ -0,0 +1,356 @@
+/* components/Lobby.css */
+.lobby-container {
+  min-height: 100vh;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 20px;
+}
+
+.lobby-card {
+  max-width: 600px;
+  width: 100%;
+  background: white;
+  border-radius: 20px;
+  padding: 40px;
+  box-shadow: 0 20px 40px rgba(0,0,0,0.1);
+  animation: slideIn 0.5s ease;
+}
+
+@keyframes slideIn {
+  from {
+    opacity: 0;
+    transform: translateY(-30px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.lobby-header {
+  text-align: center;
+  margin-bottom: 30px;
+}
+
+.lobby-header h1 {
+  color: #333;
+  margin-bottom: 10px;
+  font-size: 2rem;
+}
+
+.lobby-header p {
+  color: #666;
+  font-size: 0.9rem;
+}
+
+.lobby-tabs {
+  display: flex;
+  gap: 10px;
+  margin-bottom: 30px;
+  border-bottom: 2px solid #e0e0e0;
+}
+
+.tab {
+  flex: 1;
+  padding: 12px;
+  background: none;
+  border: none;
+  font-size: 1rem;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  color: #666;
+  position: relative;
+}
+
+.tab.active {
+  color: #667eea;
+  font-weight: bold;
+}
+
+.tab.active::after {
+  content: '';
+  position: absolute;
+  bottom: -2px;
+  left: 0;
+  right: 0;
+  height: 2px;
+  background: #667eea;
+}
+
+.lobby-form {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+
+.form-group {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.form-group label {
+  font-weight: 500;
+  color: #333;
+}
+
+.form-group input, .form-group select {
+  padding: 12px;
+  border: 2px solid #e0e0e0;
+  border-radius: 10px;
+  font-size: 1rem;
+  transition: border-color 0.3s ease;
+}
+
+.form-group input:focus, .form-group select:focus {
+  outline: none;
+  border-color: #667eea;
+}
+
+.avatar-selection {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));
+  gap: 10px;
+}
+
+.avatar-option {
+  aspect-ratio: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: #f8f9fa;
+  border-radius: 10px;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  border: 2px solid transparent;
+}
+
+.avatar-option:hover {
+  transform: scale(1.05);
+  background: #e0e0e0;
+}
+
+.avatar-option.selected {
+  border-color: #667eea;
+  background: #e8eaf6;
+}
+
+.avatar-emoji {
+  font-size: 2rem;
+}
+
+.settings-button {
+  padding: 10px;
+  background: #f8f9fa;
+  border: 1px solid #e0e0e0;
+  border-radius: 10px;
+  cursor: pointer;
+  transition: all 0.3s ease;
+}
+
+.settings-button:hover {
+  background: #e0e0e0;
+}
+
+.game-settings {
+  margin-top: 15px;
+  padding: 15px;
+  background: #f8f9fa;
+  border-radius: 10px;
+  display: flex;
+  flex-direction: column;
+  gap: 15px;
+}
+
+.setting-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.setting-item label {
+  margin: 0;
+}
+
+.create-button, .join-button {
+  padding: 15px;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  color: white;
+  border: none;
+  border-radius: 10px;
+  font-size: 1rem;
+  font-weight: bold;
+  cursor: pointer;
+  transition: all 0.3s ease;
+}
+
+.create-button:hover, .join-button:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);
+}
+
+.room-info {
+  margin-top: 30px;
+  padding-top: 30px;
+  border-top: 2px solid #e0e0e0;
+}
+
+.room-code {
+  background: #f8f9fa;
+  padding: 15px;
+  border-radius: 10px;
+  text-align: center;
+  margin: 15px 0;
+  font-size: 1.2rem;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 10px;
+}
+
+.copy-button {
+  padding: 5px 10px;
+  background: #667eea;
+  color: white;
+  border: none;
+  border-radius: 5px;
+  cursor: pointer;
+  transition: all 0.3s ease;
+}
+
+.copy-button:hover {
+  background: #764ba2;
+}
+
+.players-list {
+  margin: 20px 0;
+}
+
+.lobby-player {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 10px;
+  background: #f8f9fa;
+  border-radius: 10px;
+  margin-bottom: 10px;
+}
+
+.host-tag {
+  background: #ff9800;
+  color: white;
+  padding: 2px 8px;
+  border-radius: 5px;
+  font-size: 0.75rem;
+}
+
+.start-game-btn {
+  width: 100%;
+  padding: 15px;
+  background: linear-gradient(135deg, #4caf50 0%, #45a049 100%);
+  color: white;
+  border: none;
+  border-radius: 10px;
+  font-size: 1rem;
+  font-weight: bold;
+  cursor: pointer;
+  transition: all 0.3s ease;
+}
+
+.start-game-btn:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 5px 15px rgba(76, 175, 80, 0.4);
+}
+
+/* Waiting room styles */
+.waiting-room {
+  min-height: 100vh;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 20px;
+}
+
+.waiting-card {
+  max-width: 500px;
+  width: 100%;
+  background: white;
+  border-radius: 20px;
+  padding: 40px;
+  text-align: center;
+  box-shadow: 0 20px 40px rgba(0,0,0,0.1);
+}
+
+.waiting-card h2 {
+  color: #333;
+  margin-bottom: 20px;
+}
+
+.room-info {
+  margin: 20px 0;
+  padding: 15px;
+  background: #f8f9fa;
+  border-radius: 10px;
+}
+
+.waiting-player {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 10px;
+  background: #f8f9fa;
+  border-radius: 10px;
+  margin-bottom: 10px;
+}
+
+.host-badge {
+  background: #ff9800;
+  color: white;
+  padding: 2px 8px;
+  border-radius: 5px;
+  font-size: 0.75rem;
+}
+
+.start-game-button {
+  width: 100%;
+  padding: 15px;
+  background: linear-gradient(135deg, #4caf50 0%, #45a049 100%);
+  color: white;
+  border: none;
+  border-radius: 10px;
+  font-size: 1rem;
+  font-weight: bold;
+  cursor: pointer;
+  margin-top: 20px;
+}
+
+.waiting-message {
+  margin-top: 20px;
+  padding: 15px;
+  background: #fff3cd;
+  border-radius: 10px;
+  color: #856404;
+}
+
+@media (max-width: 768px) {
+  .lobby-card {
+    padding: 20px;
+  }
+  
+  .avatar-selection {
+    grid-template-columns: repeat(auto-fill, minmax(50px, 1fr));
+  }
+  
+  .avatar-emoji {
+    font-size: 1.5rem;
+  }
+  
+  .setting-item {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 5px;
+  }
+}

src/components/Lobby.jsx

@@ -0,0 +1,234 @@
+// components/Lobby.js
+import React, { useState } from 'react';
+import './Lobby.css';
+
+const Lobby = ({ 
+  onCreateRoom, 
+  onJoinRoom, 
+  players, 
+  roomCode, 
+  isHost, 
+  onStartGame,
+  gameSettings,
+  setGameSettings 
+}) => {
+  const [playerName, setPlayerName] = useState("");
+  const [playerAvatar, setPlayerAvatar] = useState("👤");
+  const [joinCode, setJoinCode] = useState("");
+  const [showCreateForm, setShowCreateForm] = useState(true);
+  const [showSettings, setShowSettings] = useState(false);
+
+  const avatars = ["👤", "👨‍💻", "👩‍🎨", "👨‍🚀", "🦸‍♂️", "🦸‍♀️", "🐱", "🐶", "🦊", "🐼"];
+
+  const handleCreateSubmit = (e) => {
+    e.preventDefault();
+    if (playerName.trim()) {
+      onCreateRoom(playerName, playerAvatar);
+    }
+  };
+
+  const handleJoinSubmit = (e) => {
+    e.preventDefault();
+    if (playerName.trim() && joinCode.trim()) {
+      onJoinRoom(playerName, playerAvatar, joinCode);
+    }
+  };
+
+  return (
+    <div className="lobby-container">
+      <div className="lobby-card">
+        <div className="lobby-header">
+          <h1>🎮 Игровое лобби</h1>
+          <p>Присоединяйтесь к викторине или создайте свою комнату</p>
+        </div>
+
+        <div className="lobby-tabs">
+          <button 
+            className={`tab ${showCreateForm ? 'active' : ''}`}
+            onClick={() => setShowCreateForm(true)}
+          >
+            Создать комнату
+          </button>
+          <button 
+            className={`tab ${!showCreateForm ? 'active' : ''}`}
+            onClick={() => setShowCreateForm(false)}
+          >
+            Присоединиться
+          </button>
+        </div>
+
+        {showCreateForm ? (
+          <form onSubmit={handleCreateSubmit} className="lobby-form">
+            <div className="form-group">
+              <label>Ваше имя:</label>
+              <input
+                type="text"
+                value={playerName}
+                onChange={(e) => setPlayerName(e.target.value)}
+                placeholder="Введите ваше имя"
+                maxLength="20"
+                required
+              />
+            </div>
+
+            <div className="form-group">
+              <label>Выберите аватар:</label>
+              <div className="avatar-selection">
+                {avatars.map(avatar => (
+                  <div
+                    key={avatar}
+                    className={`avatar-option ${playerAvatar === avatar ? 'selected' : ''}`}
+                    onClick={() => setPlayerAvatar(avatar)}
+                  >
+                    <span className="avatar-emoji">{avatar}</span>
+                  </div>
+                ))}
+              </div>
+            </div>
+
+            <div className="form-group">
+              <label>Настройки комнаты:</label>
+              <button 
+                type="button" 
+                className="settings-button"
+                onClick={() => setShowSettings(!showSettings)}
+              >
+                ⚙️ Настройки игры
+              </button>
+              
+              {showSettings && (
+                <div className="game-settings">
+                  <div className="setting-item">
+                    <label>Время на вопрос (секунд):</label>
+                    <select 
+                      value={gameSettings.timePerQuestion}
+                      onChange={(e) => setGameSettings({
+                        ...gameSettings,
+                        timePerQuestion: parseInt(e.target.value)
+                      })}
+                    >
+                      <option value="15">15 секунд</option>
+                      <option value="30">30 секунд</option>
+                      <option value="45">45 секунд</option>
+                      <option value="60">60 секунд</option>
+                    </select>
+                  </div>
+                  
+                  <div className="setting-item">
+                    <label>Сложность:</label>
+                    <select 
+                      value={gameSettings.difficulty}
+                      onChange={(e) => setGameSettings({
+                        ...gameSettings,
+                        difficulty: e.target.value
+                      })}
+                    >
+                      <option value="easy">Легкая</option>
+                      <option value="medium">Средняя</option>
+                      <option value="hard">Сложная</option>
+                    </select>
+                  </div>
+                  
+                  <div className="setting-item">
+                    <label>
+                      <input
+                        type="checkbox"
+                        checked={gameSettings.showCorrectAnswer}
+                        onChange={(e) => setGameSettings({
+                          ...gameSettings,
+                          showCorrectAnswer: e.target.checked
+                        })}
+                      />
+                      Показывать правильный ответ после вопроса
+                    </label>
+                  </div>
+                </div>
+              )}
+            </div>
+
+            <button type="submit" className="create-button">
+              Создать комнату 🚀
+            </button>
+          </form>
+        ) : (
+          <form onSubmit={handleJoinSubmit} className="lobby-form">
+            <div className="form-group">
+              <label>Ваше имя:</label>
+              <input
+                type="text"
+                value={playerName}
+                onChange={(e) => setPlayerName(e.target.value)}
+                placeholder="Введите ваше имя"
+                maxLength="20"
+                required
+              />
+            </div>
+
+            <div className="form-group">
+              <label>Выберите аватар:</label>
+              <div className="avatar-selection">
+                {avatars.map(avatar => (
+                  <div
+                    key={avatar}
+                    className={`avatar-option ${playerAvatar === avatar ? 'selected' : ''}`}
+                    onClick={() => setPlayerAvatar(avatar)}
+                  >
+                    <span className="avatar-emoji">{avatar}</span>
+                  </div>
+                ))}
+              </div>
+            </div>
+
+            <div className="form-group">
+              <label>Код комнаты:</label>
+              <input
+                type="text"
+                value={joinCode}
+                onChange={(e) => setJoinCode(e.target.value.toUpperCase())}
+                placeholder="Введите код комнаты"
+                maxLength="6"
+                required
+              />
+            </div>
+
+            <button type="submit" className="join-button">
+              Присоединиться 🎮
+            </button>
+          </form>
+        )}
+
+        {roomCode && (
+          <div className="room-info">
+            <h3>Ваша комната:</h3>
+            <div className="room-code">
+              Код: <strong>{roomCode}</strong>
+              <button 
+                onClick={() => navigator.clipboard.writeText(roomCode)}
+                className="copy-button"
+              >
+                📋
+              </button>
+            </div>
+            <div className="players-list">
+              <h4>Игроки в комнате ({players.length}):</h4>
+              {players.map(player => (
+                <div key={player.id} className="lobby-player">
+                  <span className="player-avatar">{player.avatar}</span>
+                  <span className="player-name">{player.name}</span>
+                  {player.isHost && <span className="host-tag">Хост</span>}
+                </div>
+              ))}
+            </div>
+            {isHost && players.length > 0 && (
+              <button onClick={onStartGame} className="start-game-btn">
+                Начать игру 🎯
+              </button>
+            )}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default Lobby;

src/components/QuizQuestion.css

@@ -0,0 +1,196 @@
+.quiz-question {
+  background: white;
+  border-radius: 15px;
+  padding: 30px;
+  box-shadow: 0 10px 30px rgba(0,0,0,0.1);
+}
+
+.question-text {
+  font-size: 1.3rem;
+  color: #333;
+  margin-bottom: 20px;
+  line-height: 1.4;
+}
+
+.question-image {
+  text-align: center;
+  margin-bottom: 25px;
+}
+
+.question-image img {
+  max-width: 100%;
+  max-height: 300px;
+  border-radius: 10px;
+  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
+}
+
+.answers-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+  gap: 20px;
+  margin-top: 20px;
+}
+
+.answer-card {
+  background: #f8f9fa;
+  border-radius: 12px;
+  padding: 20px;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  border: 2px solid transparent;
+  text-align: center;
+}
+
+.answer-card:hover {
+  transform: translateY(-5px);
+  box-shadow: 0 10px 20px rgba(0,0,0,0.1);
+  background: #f0f0f0;
+}
+
+.answer-card.selected {
+  border-color: #667eea;
+  background: #e8eaf6;
+  box-shadow: 0 5px 15px rgba(102, 126, 234, 0.3);
+}
+
+.answer-image {
+  margin-bottom: 15px;
+}
+
+.answer-image img {
+  max-width: 100%;
+  max-height: 150px;
+  border-radius: 8px;
+}
+
+.answer-text {
+  font-size: 1rem;
+  color: #333;
+  font-weight: 500;
+}
+
+.text-answer-container {
+  margin-top: 25px;
+}
+
+.text-answer-input {
+  width: 100%;
+  padding: 15px;
+  border: 2px solid #e0e0e0;
+  border-radius: 10px;
+  font-size: 1rem;
+  font-family: inherit;
+  resize: vertical;
+  transition: border-color 0.3s ease;
+}
+
+.text-answer-input:focus {
+  outline: none;
+  border-color: #667eea;
+}
+
+.submit-button {
+  margin-top: 15px;
+  padding: 12px 30px;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  color: white;
+  border: none;
+  border-radius: 25px;
+  font-size: 1rem;
+  cursor: pointer;
+  transition: all 0.3s ease;
+}
+
+.submit-button:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);
+}
+
+@media (max-width: 768px) {
+  .quiz-question {
+    padding: 20px;
+  }
+  
+  .question-text {
+    font-size: 1.1rem;
+  }
+  
+  .answers-grid {
+    grid-template-columns: 1fr;
+    gap: 15px;
+  }
+}
+.quiz-question {
+  animation: slideIn 0.5s ease;
+}
+
+@keyframes slideIn {
+  from {
+    opacity: 0;
+    transform: translateX(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+/* Стиль для заблокированных ответов при истекшем времени */
+.answer-card.disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.time-expired-message {
+  background: white;
+  border-radius: 15px;
+  padding: 60px 30px;
+  text-align: center;
+  box-shadow: 0 10px 30px rgba(0,0,0,0.1);
+  animation: fadeIn 0.5s ease;
+}
+
+.expired-content {
+  max-width: 400px;
+  margin: 0 auto;
+}
+
+.expired-icon {
+  font-size: 64px;
+  display: block;
+  margin-bottom: 20px;
+  animation: shake 0.5s ease;
+}
+
+.time-expired-message h3 {
+  color: #f44336;
+  margin-bottom: 10px;
+  font-size: 24px;
+}
+
+.time-expired-message p {
+  color: #666;
+  font-size: 16px;
+}
+
+@keyframes shake {
+  0%, 100% {
+    transform: translateX(0);
+  }
+  25% {
+    transform: translateX(-10px);
+  }
+  75% {
+    transform: translateX(10px);
+  }
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}

src/components/QuizQuestion.jsx

@@ -0,0 +1,72 @@
+import React, { useState } from 'react';
+import './QuizQuestion.css';
+
+const QuizQuestion = ({ question, onAnswer, currentAnswer }) => {
+  const [textAnswer, setTextAnswer] = useState(currentAnswer?.text || "");
+  const [selectedAnswerId, setSelectedAnswerId] = useState(currentAnswer?.id || null);
+
+  const handleTextSubmit = () => {
+    if (textAnswer.trim()) {
+      onAnswer(textAnswer.trim());
+    }
+  };
+
+  const handleAnswerSelect = (answer) => {
+    setSelectedAnswerId(answer.id);
+    onAnswer(answer);
+  };
+
+  if (question.type === "text") {
+    return (
+      <div className="quiz-question">
+        <h3 className="question-text">{question.text}</h3>
+        {question.imageUrl && (
+          <div className="question-image">
+            <img src={question.imageUrl} alt="Question illustration" />
+          </div>
+        )}
+        <div className="text-answer-container">
+          <textarea
+            value={textAnswer}
+            onChange={(e) => setTextAnswer(e.target.value)}
+            placeholder="Введите ваш ответ здесь..."
+            className="text-answer-input"
+            rows={4}
+          />
+          <button onClick={handleTextSubmit} className="submit-button">
+            Отправить ответ
+          </button>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="quiz-question">
+      <h3 className="question-text">{question.text}</h3>
+      {question.imageUrl && (
+        <div className="question-image">
+          <img src={question.imageUrl} alt="Question" />
+        </div>
+      )}
+      <div className="answers-grid">
+        {question.answers.map((answer) => (
+          <div
+            key={answer.id}
+            className={`answer-card ${selectedAnswerId === answer.id ? 'selected' : ''}`}
+            onClick={() => handleAnswerSelect(answer)}
+          >
+            {answer.imageUrl && (
+              <div className="answer-image">
+                <img src={answer.imageUrl} alt={answer.text} />
+              </div>
+            )}
+            <div className="answer-text">{answer.text}</div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default QuizQuestion;

src/components/QuizResults.css

@@ -0,0 +1,133 @@
+.results-container {
+  max-width: 800px;
+  margin: 0 auto;
+  padding: 20px;
+  min-height: 100vh;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+}
+
+.results-card {
+  background: white;
+  border-radius: 20px;
+  padding: 40px;
+  box-shadow: 0 20px 40px rgba(0,0,0,0.1);
+  text-align: center;
+}
+
+.results-card h2 {
+  color: #333;
+  margin-bottom: 30px;
+}
+
+.score-circle {
+  width: 150px;
+  height: 150px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: 0 auto 30px;
+  background: conic-gradient(from 0deg, #667eea 0deg, #e0e0e0 0deg);
+}
+
+.score-number {
+  font-size: 48px;
+  font-weight: bold;
+  color: white;
+}
+
+.score-total {
+  font-size: 24px;
+  color: white;
+  margin-left: 5px;
+}
+
+.result-message {
+  margin-bottom: 30px;
+}
+
+.result-message p {
+  font-size: 1.2rem;
+  color: #555;
+  margin: 10px 0;
+}
+
+.percentage {
+  font-size: 1rem;
+  color: #666;
+}
+
+.answers-review {
+  text-align: left;
+  margin: 30px 0;
+}
+
+.answers-review h3 {
+  color: #333;
+  margin-bottom: 20px;
+}
+
+.review-item {
+  background: #f8f9fa;
+  border-radius: 10px;
+  padding: 15px;
+  margin-bottom: 15px;
+  border-left: 4px solid;
+}
+
+.review-item.correct {
+  border-left-color: #4caf50;
+}
+
+.review-item.incorrect {
+  border-left-color: #f44336;
+}
+
+.review-question {
+  margin-bottom: 10px;
+}
+
+.question-number {
+  font-weight: bold;
+  color: #666;
+  margin-right: 10px;
+}
+
+.review-answers {
+  font-size: 0.9rem;
+}
+
+.user-answer, .correct-answer {
+  margin: 5px 0;
+}
+
+.restart-button {
+  padding: 15px 40px;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  color: white;
+  border: none;
+  border-radius: 30px;
+  font-size: 1.1rem;
+  cursor: pointer;
+  transition: all 0.3s ease;
+}
+
+.restart-button:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 10px 20px rgba(102, 126, 234, 0.4);
+}
+
+@media (max-width: 768px) {
+  .results-card {
+    padding: 20px;
+  }
+  
+  .score-circle {
+    width: 120px;
+    height: 120px;
+  }
+  
+  .score-number {
+    font-size: 36px;
+  }
+}

src/components/QuizResults.jsx

@@ -0,0 +1,135 @@
+import React from 'react';
+import './QuizResults.css';
+
+const QuizResults = ({ score, totalQuestions, userAnswers, quizData, onRestart, timeExpiredQuestions }) => {
+  const percentage = (score / totalQuestions) * 100;
+  
+  let resultMessage = "";
+  let resultClass = "";
+  
+  if (percentage >= 80) {
+    resultMessage = "Отлично! Вы настоящий эксперт!";
+    resultClass = "excellent";
+  } else if (percentage >= 60) {
+    resultMessage = "Хорошо! Но есть куда расти!";
+    resultClass = "good";
+  } else if (percentage >= 40) {
+    resultMessage = "Неплохо! Продолжайте учиться!";
+    resultClass = "average";
+  } else {
+    resultMessage = "Не отчаивайтесь! Попробуйте ещё раз!";
+    resultClass = "poor";
+  }
+
+  const getCorrectAnswerText = (question, questionIndex) => {
+    if (question.type === "single") {
+      const correctAnswer = question.answers.find(a => a.isCorrect);
+      return correctAnswer ? correctAnswer.text : "Не указан";
+    }
+    return "Текстовый ответ (оценивается вручную)";
+  };
+
+  const getUserAnswerText = (question, answer, questionIndex) => {
+    if (answer?.timeExpired) {
+      return "⏰ Время истекло";
+    }
+    if (question.type === "single") {
+      return answer?.text || "Не отвечено";
+    } else if (question.type === "text") {
+      return answer?.text || "Не отвечено";
+    }
+    return "Не отвечено";
+  };
+
+  const getAnswerStatus = (question, answer, index) => {
+    if (timeExpiredQuestions.includes(index)) {
+      return "expired";
+    }
+    if (question.type === "single" && answer && !answer.timeExpired) {
+      const selectedAnswer = question.answers.find(a => a.id === answer.id);
+      return selectedAnswer?.isCorrect ? "correct" : "incorrect";
+    }
+    if (question.type === "text" && answer && !answer.timeExpired) {
+      return "pending";
+    }
+    return "unanswered";
+  };
+
+  return (
+    <div className="results-container">
+      <div className="results-card">
+        <h2>Ваши результаты</h2>
+        
+        <div className={`score-circle ${resultClass}`}>
+          <div className="score-number">{score}</div>
+          <div className="score-total">/{totalQuestions}</div>
+        </div>
+        
+        <div className="result-message">
+          <p>{resultMessage}</p>
+          <p className="percentage">Правильных ответов: {Math.round(percentage)}%</p>
+          {timeExpiredQuestions.length > 0 && (
+            <p className="time-warning">
+              ⚠️ На {timeExpiredQuestions.length} вопрос{(timeExpiredQuestions.length > 1 ? 'ах' : 'е')} время истекло
+            </p>
+          )}
+        </div>
+        
+        <div className="answers-review">
+          <h3>Обзор ответов:</h3>
+          {quizData.questions.map((question, index) => {
+            const userAnswer = userAnswers[index];
+            const status = getAnswerStatus(question, userAnswer, index);
+            
+            return (
+              <div key={index} className={`review-item ${status}`}>
+                <div className="review-question">
+                  <span className="question-number">Вопрос {index + 1}:</span>
+                  <span className="question-text">{question.text}</span>
+                  {question.timeLimit && (
+                    <span className="time-badge">⏱️ {question.timeLimit} сек</span>
+                  )}
+                </div>
+                <div className="review-answers">
+                  <div className="user-answer">
+                    <strong>Ваш ответ:</strong> {getUserAnswerText(question, userAnswer, index)}
+                  </div>
+                  {status !== "expired" && status !== "pending" && (
+                    <div className="correct-answer">
+                      <strong>Правильный ответ:</strong> {getCorrectAnswerText(question, index)}
+                    </div>
+                  )}
+                  {userAnswer?.timeSpent && (
+                    <div className="time-spent">
+                      <strong>⏱️ Время на ответ:</strong> {userAnswer.timeSpent} сек
+                    </div>
+                  )}
+                </div>
+              </div>
+            );
+          })}
+        </div>
+		<div className="leaderboard">
+		  <h3>🏆 Итоговая таблица лидеров</h3>
+		  {allPlayers.map((player, index) => (
+			<div key={player.id} className={`leaderboard-item ${player.isCurrent ? 'current' : ''}`}>
+			  <div className="leaderboard-rank">{index + 1}</div>
+			  <div className="leaderboard-avatar">{player.avatar}</div>
+			  <div className="leaderboard-name">
+				{player.name}
+				{player.isCurrent && <span className="you-badge">(Вы)</span>}
+			  </div>
+			  <div className="leaderboard-score">{player.score} очков</div>
+			</div>
+		  ))}
+		</div>
+        
+        <button onClick={onRestart} className="restart-button">
+          Пройти викторину снова 🔄
+        </button>
+      </div>
+    </div>
+  );
+};
+
+export default QuizResults;

src/components/Timer.css

@@ -0,0 +1,107 @@
+.timer {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+}
+
+.timer-circle {
+  position: relative;
+  width: 80px;
+  height: 80px;
+}
+
+.timer-svg {
+  width: 100%;
+  height: 100%;
+  transform: rotate(-90deg);
+}
+
+.timer-bg {
+  stroke: #e0e0e0;
+}
+
+.timer-progress {
+  stroke: currentColor;
+  transition: stroke-dashoffset 1s linear;
+}
+
+.timer-text {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  text-align: center;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
+.timer-label {
+  font-size: 8px;
+  color: #666;
+  text-transform: uppercase;
+}
+
+.timer-value {
+  font-size: 18px;
+  font-weight: bold;
+  color: #333;
+}
+
+/* Нормальное состояние */
+.timer {
+  color: #4caf50;
+}
+
+/* Состояние предупреждения (последние 5 секунд) */
+.timer.warning {
+  color: #ff9800;
+  animation: pulse 1s infinite;
+}
+
+.timer.warning .timer-value {
+  color: #ff9800;
+}
+
+/* Критическое состояние (последние 3 секунды) */
+.timer.critical {
+  color: #f44336;
+  animation: pulse 0.5s infinite;
+}
+
+.timer.critical .timer-value {
+  color: #f44336;
+}
+
+/* Пауза (ответ уже дан) */
+.timer.paused {
+  color: #9e9e9e;
+  opacity: 0.6;
+}
+
+@keyframes pulse {
+  0%, 100% {
+    transform: scale(1);
+  }
+  50% {
+    transform: scale(1.05);
+  }
+}
+
+/* Адаптивность */
+@media (max-width: 768px) {
+  .timer-circle {
+    width: 60px;
+    height: 60px;
+  }
+  
+  .timer-value {
+    font-size: 14px;
+  }
+  
+  .timer-label {
+    font-size: 6px;
+  }
+}

src/components/Timer.jsx

@@ -0,0 +1,88 @@
+import React, { useState, useEffect } from 'react';
+import './Timer.css';
+
+const Timer = ({ timeLimit, onTimeExpired, isActive }) => {
+  const [timeLeft, setTimeLeft] = useState(timeLimit);
+  const [isWarning, setIsWarning] = useState(false);
+
+  useEffect(() => {
+    if (!isActive) return;
+    
+    setTimeLeft(timeLimit);
+    setIsWarning(false);
+    
+    const timer = setInterval(() => {
+      setTimeLeft((prevTime) => {
+        if (prevTime <= 1) {
+          clearInterval(timer);
+          onTimeExpired();
+          return 0;
+        }
+        return prevTime - 1;
+      });
+    }, 1000);
+
+    return () => clearInterval(timer);
+  }, [timeLimit, isActive, onTimeExpired]);
+
+  useEffect(() => {
+    // Активируем предупреждение за последние 5 секунд
+    setIsWarning(timeLeft <= 5 && timeLeft > 0);
+  }, [timeLeft]);
+
+  const formatTime = (seconds) => {
+    const mins = Math.floor(seconds / 60);
+    const secs = seconds % 60;
+    if (mins > 0) {
+      return `${mins}:${secs.toString().padStart(2, '0')}`;
+    }
+    return `${secs} сек`;
+  };
+
+  const getTimerClass = () => {
+    if (!isActive) return 'timer paused';
+    if (isWarning) return 'timer warning';
+    if (timeLeft <= 10) return 'timer critical';
+    return 'timer';
+  };
+
+  const getProgressPercent = () => {
+    return (timeLeft / timeLimit) * 100;
+  };
+
+  return (
+    <div className={getTimerClass()}>
+      <div className="timer-circle">
+        <svg className="timer-svg" viewBox="0 0 100 100">
+          <circle
+            className="timer-bg"
+            cx="50"
+            cy="50"
+            r="45"
+            fill="none"
+            stroke="#e0e0e0"
+            strokeWidth="8"
+          />
+          <circle
+            className="timer-progress"
+            cx="50"
+            cy="50"
+            r="45"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="8"
+            strokeDasharray={`${2 * Math.PI * 45}`}
+            strokeDashoffset={`${2 * Math.PI * 45 * (1 - getProgressPercent() / 100)}`}
+            transform="rotate(-90 50 50)"
+          />
+        </svg>
+        <div className="timer-text">
+          <span className="timer-label">Осталось</span>
+          <span className="timer-value">{formatTime(timeLeft)}</span>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Timer;

src/index.css

@@ -0,0 +1,111 @@
+:root {
+  --text: #6b6375;
+  --text-h: #08060d;
+  --bg: #fff;
+  --border: #e5e4e7;
+  --code-bg: #f4f3ec;
+  --accent: #aa3bff;
+  --accent-bg: rgba(170, 59, 255, 0.1);
+  --accent-border: rgba(170, 59, 255, 0.5);
+  --social-bg: rgba(244, 243, 236, 0.5);
+  --shadow:
+    rgba(0, 0, 0, 0.1) 0 10px 15px -3px, rgba(0, 0, 0, 0.05) 0 4px 6px -2px;
+
+  --sans: system-ui, 'Segoe UI', Roboto, sans-serif;
+  --heading: system-ui, 'Segoe UI', Roboto, sans-serif;
+  --mono: ui-monospace, Consolas, monospace;
+
+  font: 18px/145% var(--sans);
+  letter-spacing: 0.18px;
+  color-scheme: light dark;
+  color: var(--text);
+  background: var(--bg);
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+
+  @media (max-width: 1024px) {
+    font-size: 16px;
+  }
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --text: #9ca3af;
+    --text-h: #f3f4f6;
+    --bg: #16171d;
+    --border: #2e303a;
+    --code-bg: #1f2028;
+    --accent: #c084fc;
+    --accent-bg: rgba(192, 132, 252, 0.15);
+    --accent-border: rgba(192, 132, 252, 0.5);
+    --social-bg: rgba(47, 48, 58, 0.5);
+    --shadow:
+      rgba(0, 0, 0, 0.4) 0 10px 15px -3px, rgba(0, 0, 0, 0.25) 0 4px 6px -2px;
+  }
+
+  #social .button-icon {
+    filter: invert(1) brightness(2);
+  }
+}
+
+body {
+  margin: 0;
+}
+
+#root {
+  width: 1126px;
+  max-width: 100%;
+  margin: 0 auto;
+  text-align: center;
+  border-inline: 1px solid var(--border);
+  min-height: 100svh;
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+}
+
+h1,
+h2 {
+  font-family: var(--heading);
+  font-weight: 500;
+  color: var(--text-h);
+}
+
+h1 {
+  font-size: 56px;
+  letter-spacing: -1.68px;
+  margin: 32px 0;
+  @media (max-width: 1024px) {
+    font-size: 36px;
+    margin: 20px 0;
+  }
+}
+h2 {
+  font-size: 24px;
+  line-height: 118%;
+  letter-spacing: -0.24px;
+  margin: 0 0 8px;
+  @media (max-width: 1024px) {
+    font-size: 20px;
+  }
+}
+p {
+  margin: 0;
+}
+
+code,
+.counter {
+  font-family: var(--mono);
+  display: inline-flex;
+  border-radius: 4px;
+  color: var(--text-h);
+}
+
+code {
+  font-size: 15px;
+  line-height: 135%;
+  padding: 4px 8px;
+  background: var(--code-bg);
+}

src/main.jsx

@@ -0,0 +1,10 @@
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import './index.css'
+import App from './App.jsx'
+
+createRoot(document.getElementById('root')).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+)

src/styles/Quiz.css

@@ -0,0 +1,232 @@
+.quiz-container {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 20px;
+  min-height: 100vh;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+}
+
+.quiz-header {
+  background: white;
+  border-radius: 15px;
+  padding: 25px;
+  margin-bottom: 30px;
+  box-shadow: 0 10px 30px rgba(0,0,0,0.1);
+  text-align: center;
+}
+
+.quiz-header h1 {
+  color: #333;
+  margin-bottom: 10px;
+  font-size: 2rem;
+}
+
+.quiz-description {
+  color: #666;
+  font-size: 1rem;
+}
+
+.progress-bar {
+  width: 100%;
+  height: 10px;
+  background: #e0e0e0;
+  border-radius: 5px;
+  margin: 20px 0;
+  overflow: hidden;
+}
+
+.progress-fill {
+  height: 100%;
+  background: linear-gradient(90deg, #667eea, #764ba2);
+  transition: width 0.3s ease;
+}
+
+.question-counter {
+  color: #666;
+  font-size: 0.9rem;
+}
+
+.loading {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
+  font-size: 1.2rem;
+  color: white;
+}
+
+.navigation-buttons {
+  margin-top: 30px;
+  text-align: center;
+}
+
+.nav-button {
+  padding: 12px 24px;
+  background: white;
+  border: none;
+  border-radius: 25px;
+  font-size: 1rem;
+  cursor: pointer;
+  transition: all 0.3s ease;
+}
+
+.nav-button:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 5px 15px rgba(0,0,0,0.2);
+}
+
+@media (max-width: 768px) {
+  .quiz-container {
+    padding: 10px;
+  }
+  
+  .quiz-header h1 {
+    font-size: 1.5rem;
+  }
+}
+
+.start-screen {
+  min-height: 100vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  padding: 20px;
+}
+
+.start-card {
+  background: white;
+  border-radius: 20px;
+  padding: 40px;
+  max-width: 600px;
+  width: 100%;
+  text-align: center;
+  box-shadow: 0 20px 40px rgba(0,0,0,0.1);
+  animation: fadeInUp 0.6s ease;
+}
+
+@keyframes fadeInUp {
+  from {
+    opacity: 0;
+    transform: translateY(30px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.start-card h1 {
+  color: #333;
+  font-size: 2rem;
+  margin-bottom: 15px;
+}
+
+.start-card .description {
+  color: #666;
+  font-size: 1rem;
+  margin-bottom: 30px;
+}
+
+.rules {
+  text-align: left;
+  background: #f8f9fa;
+  border-radius: 15px;
+  padding: 20px;
+  margin-bottom: 30px;
+}
+
+.rules h3 {
+  color: #333;
+  margin-bottom: 15px;
+}
+
+.rules ul {
+  list-style: none;
+  padding: 0;
+}
+
+.rules li {
+  padding: 8px 0;
+  color: #555;
+  font-size: 0.95rem;
+}
+
+.start-button {
+  padding: 15px 40px;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  color: white;
+  border: none;
+  border-radius: 30px;
+  font-size: 1.1rem;
+  font-weight: bold;
+  cursor: pointer;
+  transition: all 0.3s ease;
+}
+
+.start-button:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 10px 20px rgba(102, 126, 234, 0.4);
+}
+
+.quiz-stats {
+  margin-top: 20px;
+}
+
+.stats-info {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-top: 15px;
+}
+
+@media (max-width: 768px) {
+  .start-card {
+    padding: 20px;
+  }
+  
+  .start-card h1 {
+    font-size: 1.5rem;
+  }
+}
+
+.header-top {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 20px;
+  flex-wrap: wrap;
+  gap: 15px;
+}
+
+.score-display {
+  background: linear-gradient(135deg, #ff9800 0%, #f44336 100%);
+  padding: 10px 20px;
+  border-radius: 25px;
+  color: white;
+  display: flex;
+  gap: 10px;
+  align-items: baseline;
+  box-shadow: 0 5px 15px rgba(0,0,0,0.2);
+}
+
+.score-label {
+  font-size: 0.9rem;
+  opacity: 0.9;
+}
+
+.score-value {
+  font-size: 1.5rem;
+  font-weight: bold;
+}
+
+@media (max-width: 768px) {
+  .header-top {
+    flex-direction: column;
+    text-align: center;
+  }
+  
+  .score-display {
+    width: fit-content;
+  }
+}