1. Шрифты и Иконки:
- Используйте кодировку @charset “UTF-8” для CSS, чтобы обеспечить корректное отображение всех символов. Это поможет избежать проблем с кодировкой, особенно при использовании локальных шрифтов.
- Интегрируйте шрифты через @import или @font-face, чтобы повысить гибкость в выборе между Google Fonts, Adobe Fonts и другими платформами, по необходимости.
- При выборе иконографических библиотек, ориентируйтесь на гибкость и лёгкую кастомизацию. Поддерживайте разнообразные библиотеки, такие как Material Design Icons, Font Awesome, а также открытые коллекции на GitHub.

2. Цвета и Фоны:
- Разработайте несколько цветовых палитр, чтобы можно было адаптироваться к различным брендам, придерживаясь при этом стандартов WCAG для обеспечения доступности.
- Включите возможность для пользователей переключаться между светлой и тёмной темами для лучшего пользовательского опыта и адаптации под предпочтения пользователя.

3. Отзывчивый Дизайн:
- Используйте подход “mobile-first”, адаптируя интерфейс от минимального разрешения к большому, начиная с 320px и заканчивая экраном настольного ПК, чтобы обеспечить оптимальную производительность на всех устройствах.
- Обеспечьте гибкую организацию элементов, таких как меню и кнопки, на всех экранах с использованием медиазапросов и относительных единиц измерения (EM, REM).

### Улучшенные Компоненты Макета

1. Верхняя Панель (Top Bar):
- Рассмотрите возможность автоскрытия или уменьшения размеров верхней панели на мобильных устройствах, чтобы освободить место для основного содержимого при прокрутке.
- Используйте полупрозрачность и плавные переходы для визуального отделения верхней панели без излишнего отвлечения внимания.

2. Боковые панели и вертикальные меню:
- Реализуйте off-canvas меню для экономии места на мобильных устройствах. На больших экранах используйте фиксированные боковые панели с возможностью минимизации.
- Включите понятные анимации и визуальные эффекты, такие как плавный цветовой переход или тени при наведении, чтобы взаимодействие было интуитивным.

3. Карточки Серверов:
- Проработайте адаптивный дизайн карточек с использованием сеток и расчёта размеров в процентных значениях, чтобы они естественно вписывались в экраны любого размера.
- Добавьте чёткие иконки и заметные кнопки для быстро гипотетических действий, таких как “Посмотреть детали”, строго соблюдая визуальную иерархию.

### Улучшенные Интерактивные Элементы

1. Кнопки и Формы:
- Оформите кнопки с плавными анимациями и визуальными эффектами, включающими понятную обратную связь при нажатии и наведении.
- Разработайте формы с учётом эргономики и удобства ввода на сенсорных экранах, включая крупные элементы управления и заметные индикаторы ошибок.

2. Элементы Взаимодействия:
- Убедитесь, что все интерактивные элементы поддерживают визуальную обратную связь, такую как анимации или изменение цвета, что улучшает доступность (например, для пользователей с нарушениями зрения).

### Улучшенные Дизайнерские Подходы

1. Структура и Визуальная Иерархия:
- Уделите внимание логичной иерархии элементов, используя контрастные размеры, яркость и пространство для выделения ключевых компонентов.
- Минимизируйте перегруженность интерфейса, обеспечивая баланс между пустым пространством и содержимым для лучшего понимания и восприятия.

2. Адаптивность и Простота:
- Стремитесь к чистоте и лаконичности в дизайне, избегая избыточных украшений и акцентируя внимание на простой в навигации структуре.
- Поддерживайте минимумно-необходимое количество взаимодействий, обеспечивающих ключевые функции без излишнего отвлечения, и проводите устойчивое тестирование с реальными пользователями.

3. Интерактивные Возможности:
- Разработайте дизайн, который поддерживает улучшенное взаимодействие, ориентированное на задачу, с акцентом на производительность и легкость обучения пользователя основным функциям.


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CS:GO Server Monitoring</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/mdi/6.5.95/css/materialdesignicons.min.css">
    <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@300;400;700&display=swap" rel="stylesheet">
    <style>
        body {
            font-family: 'Nunito', sans-serif;
            background-color: #121212;
            color: #ffffff;
            margin: 0;
            padding: 0;
            display: flex;
            min-height: 100vh;
            flex-direction: column;
        }

        #page-topbar {
            width: 100%;
            background: linear-gradient(90deg, #1f1f1f, #1c1c1c);
            z-index: 1000;
            position: fixed;
            top: 0;
            display: flex;
        }

        .navbar {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 20px;
            width: 100%;
        }

        .branding {
            display: flex;
            align-items: center;
            gap: 10px;
            font-size: 1.8rem;
            font-weight: bold;
        }

        .menu ul {
            list-style: none;
            display: flex;
            gap: 15px;
            margin: 0;
            padding: 0;
        }

        .menu a {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background-color: #2e2e2e;
            color: #bfc9d9;
            transition: background-color 0.3s, color 0.3s;
        }

        .menu a:hover {
            background-color: #6c63ff;
            color: #ffffff;
        }

        .theme-toggle {
            cursor: pointer;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background-color: #2e2e2e;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: background-color 0.3s;
        }

        .theme-toggle:hover {
            background-color: #6c63ff;
        }

        .sidebar {
            background-color: #1f1f1f;
            width: 220px;
            padding: 20px;
            position: fixed;
            top: 80px;
            bottom: 0;
            left: 0;
            overflow-y: auto;
        }

        .sidebar ul {
            list-style: none;
            padding: 0;
        }

        .vertical-menu a {
            display: flex;
            align-items: center;
            padding: 12px 20px;
            color: #bfc9d9;
            text-decoration: none;
            font-size: 1.1rem;
            transition: background-color 0.3s, color 0.3s;
            border-radius: 8px;
            margin-bottom: 10px;
        }

        .vertical-menu a:hover {
            background-color: #6c63ff;
            color: #ffffff;
        }

        main {
            flex: 1;
            padding: 20px;
            padding-top: 100px;
            margin-left: 220px;
            display: flex;
            justify-content: center;
            align-items: flex-start;
        }

        .server-list {
            max-width: 1000px;
            width: 100%;
        }

        .server-list h2 {
            font-size: 2rem;
            margin-bottom: 20px;
        }

        .cards {
            display: flex;
            gap: 20px;
            flex-wrap: wrap;
        }

        .server-card {
            background-color: #262626;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
            transition: transform 0.3s, box-shadow 0.3s;
            position: relative;
            border-left: 5px solid #6c63ff;
            max-width: 300px;
        }

        .server-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4);
        }

        .card-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 10px;
        }

        .server-info, .server-extra {
            margin: 10px 0;
        }

        .server-info p, .server-extra p {
            font-size: 1rem;
            margin: 4px 0;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .status {
            padding: 3px 6px;
            border-radius: 4px;
            font-weight: bold;
        }

        .online {
            background-color: #4caf50;
            color: white;
        }

        .offline {
            background-color: #f44336;
            color: white;
        }

        .card-actions {
            margin-top: 10px;
        }

        .details-button {
            background-color: #6c63ff;
            color: white;
            border: none;
            padding: 8px 12px;
            cursor: pointer;
            border-radius: 4px;
            transition: background-color 0.3s;
        }

        .details-button:hover {
            background-color: #5b52e0;
        }

        @media (max-width: 768px) {
            .sidebar {
                display: none;
            }

            main {
                margin-left: 0;
                padding: 10px;
            }
        }
    </style>
</head>
<body>
    <header id="page-topbar">
        <nav class="navbar">
            <div class="branding">
                <i class="fas fa-gamepad"></i>
                <h1>CS:GO Monitor</h1>
            </div>
            <div class="menu">
                <ul>
                    <li><a href="#"><i class="mdi mdi-home-outline"></i></a></li>
                    <li><a href="#"><i class="mdi mdi-server-network"></i></a></li>
                    <li><a href="#"><i class="mdi mdi-information-outline"></i></a></li>
                    <li><a href="#"><i class="mdi mdi-message-outline"></i></a></li>
                </ul>
                <div class="theme-toggle">
                    <i class="mdi mdi-theme-light-dark"></i>
                </div>
            </div>
        </nav>
    </header>

    <aside class="sidebar">
        <ul class="vertical-menu">
            <li><a href="#"><i class="mdi mdi-server"></i> Dashboard</a></li>
            <li><a href="#"><i class="mdi mdi-chart-line"></i> Performance</a></li>
            <li><a href="#"><i class="mdi mdi-settings"></i> Settings</a></li>
        </ul>
    </aside>

    <main>
        <section class="server-list">
            <h2>Active Servers</h2>
            <div class="cards">
                <div class="server-card">
                    <div class="card-header">
                        <h3>Server 1</h3>
                        <span class="status online">Online</span>
                    </div>
                    <div class="server-info">
                        <p><i class="mdi mdi-lan"></i> <strong>IP:</strong> 192.168.1.1</p>
                        <p><i class="mdi mdi-account-group"></i> <strong>Players:</strong> 12/20</p>
                    </div>
                    <div class="server-extra">
                        <p><i class="mdi mdi-clock-outline"></i> <strong>Uptime:</strong> 72 hours</p>
                        <p><i class="mdi mdi-map-marker"></i> <strong>Location:</strong> New York</p>
                    </div>
                    <div class="card-actions">
                        <button class="details-button">View Details</button>
                    </div>
                </div>
                <div class="server-card">
                    <div class="card-header">
                        <h3>Server 2</h3>
                        <span class="status offline">Offline</span>
                    </div>
                    <div class="server-info">
                        <p><i class="mdi mdi-lan"></i> <strong>IP:</strong> 192.168.1.2</p>
                        <p><i class="mdi mdi-account-group"></i> <strong>Players:</strong> 0/20</p>
                    </div>
                    <div class="server-extra">
                        <p><i class="mdi mdi-clock-outline"></i> <strong>Uptime:</strong> 0 hours</p>
                        <p><i class="mdi mdi-map-marker"></i> <strong>Location:</strong> London</p>
                    </div>
                    <div class="card-actions">
                        <button class="details-button">View Details</button>
                    </div>
                </div>
            </div>
        </section>
    </main>
</body>
</html>