styles.css

/* frontend/src/styles/App.css */
/* Основные стили для ChessProfi */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
  background-color: #f5f5f5;
  color: #333;
}

.App {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* Навигация */
.navigation {
  background-color: #2c3e50;
  color: white;
  padding: 1rem 0;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.nav-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.logo {
  font-size: 1.5rem;
  font-weight: bold;
  color: white;
  text-decoration: none;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 2rem;
}

.nav-links a {
  color: white;
  text-decoration: none;
  transition: opacity 0.3s;
}

.nav-links a:hover {
  opacity: 0.8;
}

.user-name {
  color: #ecf0f1;
}

/* Кнопки */
.btn {
  padding: 0.5rem 1.5rem;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
  font-size: 1rem;
  transition: all 0.3s;
}

.btn-primary {
  background-color: #3498db;
  color: white;
}

.btn-primary:hover {
  background-color: #2980b9;
}

.btn-secondary {
  background-color: #95a5a6;
  color: white;
}

.btn-danger {
  background-color: #e74c3c;
  color: white;
}

.btn-logout {
  background: none;
  border: 1px solid white;
  color: white;
  padding: 0.4rem 1rem;
  border-radius: 4px;
  cursor: pointer;
}

/* Главная страница */
.home-page {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
}

.hero-section {
  text-align: center;
  max-width: 800px;
}

.hero-section h1 {
  font-size: 3rem;
  margin-bottom: 1rem;
  color: #2c3e50;
}

.subtitle {
  font-size: 1.2rem;
  color: #7f8c8d;
  margin-bottom: 3rem;
}

.features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 2rem;
  margin-bottom: 3rem;
}

.feature-card {
  background: white;
  padding: 2rem;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.feature-card h3 {
  margin-bottom: 1rem;
  color: #2c3e50;
}

.cta-buttons {
  display: flex;
  gap: 1rem;
  justify-content: center;
}

/* Страница входа */
.login-page {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
}

.login-container {
  background: white;
  padding: 2rem;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  width: 100%;
  max-width: 400px;
}

.login-container h2 {
  margin-bottom: 1.5rem;
  text-align: center;
  color: #2c3e50;
}

.form-group {
  margin-bottom: 1rem;
}

.form-group label {
  display: block;
  margin-bottom: 0.5rem;
  color: #555;
}

.form-group input,
.form-group select {
  width: 100%;
  padding: 0.75rem;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 1rem;
}

.error-message {
  background-color: #fee;
  color: #c33;
  padding: 0.75rem;
  border-radius: 4px;
  margin-bottom: 1rem;
}

.toggle-form {
  text-align: center;
  margin-top: 1rem;
  color: #666;
}

.link-button {
  background: none;
  border: none;
  color: #3498db;
  cursor: pointer;
  text-decoration: underline;
  margin-left: 0.5rem;
}

/* Шахматная доска */
.chessboard-container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.chessboard {
  display: grid;
  grid-template-columns: repeat(8, 60px);
  grid-template-rows: repeat(8, 60px);
  border: 2px solid #333;
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

.square {
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: relative;
}

.square.light {
  background-color: #f0d9b5;
}

.square.dark {
  background-color: #b58863;
}

.square.selected {
  background-color: #646f40 !important;
}

.square.possible-move::after {
  content: '';
  width: 20px;
  height: 20px;
  background-color: rgba(0,0,0,0.2);
  border-radius: 50%;
  position: absolute;
}

.square.last-move {
  background-color: #ced26e !important;
}

.piece {
  font-size: 48px;
  line-height: 1;
  user-select: none;
}

.board-info {
  margin-top: 1rem;
  text-align: center;
}

.board-info p {
  margin: 0.5rem 0;
  font-weight: bold;
}

.check {
  color: #e74c3c;
}

.checkmate {
  color: #c0392b;
  font-size: 1.2rem;
}

/* Страница игры */
.game-page {
  flex: 1;
  padding: 2rem;
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
}

.game-header {
  text-align: center;
  margin-bottom: 2rem;
}

.players {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  margin-top: 1rem;
}

.player {
  background: white;
  padding: 1rem 2rem;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.game-content {
  display: flex;
  gap: 2rem;
  justify-content: center;
}

.game-sidebar {
  width: 300px;
}

.move-history {
  background: white;
  padding: 1rem;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  margin-bottom: 1rem;
  max-height: 400px;
  overflow-y: auto;
}

.game-controls {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

/* Dashboard */
.dashboard-page {
  flex: 1;
  padding: 2rem;
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
}

.dashboard-header {
  margin-bottom: 2rem;
}

.user-info {
  background: white;
  padding: 1.5rem;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  margin-top: 1rem;
}

.actions-section {
  margin-bottom: 2rem;
}

.games-section {
  background: white;
  padding: 1.5rem;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* Список игр */
.game-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.game-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem;
  background: #f8f9fa;
  border-radius: 4px;
  text-decoration: none;
  color: #333;
  transition: background 0.3s;
}

.game-item:hover {
  background: #e9ecef;
}

.game-info {
  display: flex;
  flex-direction: column;
}

.opponent {
  font-weight: bold;
}

.date {
  font-size: 0.9rem;
  color: #666;
}

.game-result {
  padding: 0.25rem 0.75rem;
  border-radius: 4px;
  font-weight: bold;
}

.game-result.победа {
  background: #d4edda;
  color: #155724;
}

.game-result.поражение {
  background: #f8d7da;
  color: #721c24;
}

.game-result.ничья {
  background: #fff3cd;
  color: #856404;
}

/* Footer */
.footer {
  background: #2c3e50;
  color: white;
  text-align: center;
  padding: 1rem;
  margin-top: auto;
}

/* Утилиты */
.loading {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  color: #666;
}

.error {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #e74c3c;
  font-size: 1.2rem;
}

/* Адаптивность */
@media (max-width: 768px) {
  .features {
    grid-template-columns: 1fr;
  }
  
  .game-content {
    flex-direction: column;
    align-items: center;
  }
  
  .chessboard {
    grid-template-columns: repeat(8, 45px);
    grid-template-rows: repeat(8, 45px);
  }
  
  .square {
    width: 45px;
    height: 45px;
  }
  
  .piece {
    font-size: 36px;
  }
  
  .nav-links {
    gap: 1rem;
  }
}

// frontend/package.json
{
  "name": "chessprofi-frontend",
  "version": "1.0.0",
  "description": "ChessProfi - Платформа для обучения шахматам (Frontend)",
  "private": true,
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-router-dom": "^6.8.0",
    "axios": "^1.3.0",
    "socket.io-client": "^4.6.0",
    "chess.js": "^1.0.0-beta.6"
  },
  "devDependencies": {
    "react-scripts": "5.0.1"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

// frontend/public/index.html
<!DOCTYPE html>
<html lang="ru">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
      content="ChessProfi - Современная платформа для обучения шахматам"
    />
    <title>ChessProfi - Обучение шахматам</title>
  </head>
  <body>
    <noscript>Вам необходимо включить JavaScript для работы этого приложения.</noscript>
    <div id="root"></div>
  </body>
</html>