Измени:
Сделай чтобы там были вкладки где правила
Код:
<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Правила для Друзей</title>
    <!-- Подключение шрифтов -->
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&family=Playfair+Display:wght@700&display=swap" rel="stylesheet">
    <!-- Встроенные стили -->
    <style>
        /* Общие стили */
        body {
            font-family: 'Roboto', sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f4f4f4;
            color: #333;
        }

        .container {
            max-width: 900px;
            margin: 0 auto;
            padding: 20px;
            background-color: #fff;
        }

        /* Заголовок */
        header {
            text-align: center;
            padding-bottom: 20px;
            border-bottom: 2px solid #e0e0e0;
        }

        header h1 {
            font-family: 'Playfair Display', serif;
            font-size: 2.5em;
            margin-bottom: 10px;
        }

        header p {
            font-size: 1.2em;
            color: #666;
        }

        /* Вкладки */
        .tabs {
            display: flex;
            border-bottom: 2px solid #e0e0e0;
            margin-top: 20px;
        }

        .tab-button {
            flex: 1;
            padding: 10px;
            background-color: #f9f9f9;
            border: none;
            cursor: pointer;
            font-size: 1em;
            transition: background-color 0.3s ease;
        }

        .tab-button:hover,
        .tab-button.active {
            background-color: #e0e0e0;
        }

        .tab-content {
            display: none;
            padding: 20px 0;
        }

        .tab-content.active {
            display: block;
        }

        /* Правила */
        .rules ol {
            padding-left: 20px;
        }

        .rules li {
            margin-bottom: 10px;
        }

        .rules li strong {
            font-size: 1.1em;
        }

        .rules li ol {
            padding-left: 20px;
            margin-top: 5px;
        }

        .rules li ol li {
            margin-bottom: 5px;
        }

        /* Аккордеон */
        .accordion {
            border-top: 1px solid #e0e0e0;
        }

        .accordion-item {
            border-bottom: 1px solid #e0e0e0;
        }

        .accordion-header {
            background: none;
            border: none;
            width: 100%;
            text-align: left;
            padding: 15px;
            font-size: 1.1em;
            cursor: pointer;
            display: flex;
            justify-content: space-between;
            align-items: center;
            outline: none;
            transition: background-color 0.3s ease;
        }

        .accordion-header:hover,
        .accordion-header:focus {
            background-color: #f9f9f9;
        }

        .accordion-header[aria-expanded="true"] .arrow {
            transform: rotate(180deg);
        }

        .arrow {
            transition: transform 0.3s ease;
        }

        .accordion-content {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.3s ease;
            padding: 0 15px;
            background-color: #fafafa;
        }

        .accordion-content p {
            padding: 15px 0;
            margin: 0;
        }

        /* Discord секция */
        .discord-link {
            text-align: center;
            padding: 30px 0;
            border-top: 2px solid #e0e0e0;
            border-bottom: 2px solid #e0e0e0;
        }

        .discord-button {
            background-color: #5865F2;
            color: #fff;
            border: none;
            padding: 10px 20px;
            font-size: 1em;
            border-radius: 5px;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }

        .discord-button:hover,
        .discord-button:focus {
            background-color: #4752c4;
        }

        /* Привилегии */
        .privileges {
            padding: 20px 0;
        }

        .privileges h2 {
            text-align: center;
            margin-bottom: 15px;
        }

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

        .privileges li {
            padding: 10px 0;
            border-bottom: 1px solid #e0e0e0;
        }

        .privileges li strong {
            color: #555;
        }

        /* Футер */
        footer {
            text-align: center;
            padding: 15px 0;
            border-top: 2px solid #e0e0e0;
            margin-top: 20px;
            color: #777;
            font-size: 0.9em;
        }

        /* Подача заявки */
        .apply-role {
            text-align: center;
            margin-top: 20px;
        }

        .apply-button {
            background-color: #28a745;
            color: #fff;
            border: none;
            padding: 10px 25px;
            font-size: 1em;
            border-radius: 5px;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }

        .apply-button:hover,
        .apply-button:focus {
            background-color: #218838;
        }

        .message {
            margin-top: 15px;
            font-size: 1em;
            color: #155724;
        }

        /* Вкладка Admin */
        .admin-list {
            list-style-type: none;
            padding: 0;
        }

        .admin-list li {
            padding: 8px 0;
            border-bottom: 1px solid #e0e0e0;
        }

        /* Медиа-запросы для адаптивности */
        @media (max-width: 600px) {
            .tab-button {
                font-size: 0.9em;
                padding: 8px;
            }

            .apply-button {
                padding: 8px 20px;
                font-size: 0.9em;
            }
        }
    </style>
    <!-- Встроенные скрипты -->
    <script defer>
        document.addEventListener('DOMContentLoaded', () => {
            // Вкладки
            const tabButtons = document.querySelectorAll('.tab-button');
            const tabContents = document.querySelectorAll('.tab-content');

            tabButtons.forEach(button => {
                button.addEventListener('click', () => {
                    const target = button.getAttribute('data-tab');

                    // Удаляем активный класс у всех кнопок и контентов
                    tabButtons.forEach(btn => btn.classList.remove('active'));
                    tabContents.forEach(content => content.classList.remove('active'));

                    // Добавляем активный класс выбранной кнопке и контенту
                    button.classList.add('active');
                    document.getElementById(target).classList.add('active');
                });
            });

            // Устанавливаем активной первую вкладку по умолчанию
            if (tabButtons.length > 0) {
                tabButtons[0].classList.add('active');
                tabContents[0].classList.add('active');
            }

            // Аккордеон
            const accordionHeaders = document.querySelectorAll('.accordion-header');

            accordionHeaders.forEach(header => {
                header.addEventListener('click', () => {
                    const expanded = header.getAttribute('aria-expanded') === 'true';
                    
                    // Закрыть все секции
                    accordionHeaders.forEach(item => {
                        item.setAttribute('aria-expanded', 'false');
                        document.getElementById(item.getAttribute('aria-controls')).setAttribute('aria-hidden', 'true');
                    });

                    // Если была закрыта, открыть её
                    if (!expanded) {
                        header.setAttribute('aria-expanded', 'true');
                        document.getElementById(header.getAttribute('aria-controls')).setAttribute('aria-hidden', 'false');
                    }
                });
            });

            // Подача заявки на роль
            const applyButton = document.getElementById('applyRoleButton');
            const messageDiv = document.getElementById('applyMessage');

            applyButton.addEventListener('click', () => {
                // Отображаем сообщение
                messageDiv.textContent = 'Ожидайте принятия вашей заявки.';
                // Отключаем кнопку, чтобы предотвратить повторные заявки
                applyButton.disabled = true;
                applyButton.textContent = 'Заявка отправлена';
            });
        });

        /**
         * Обработчик клика по кнопке Discord.
         * Перенаправляет пользователя на Discord сервер.
         */
        function handleDiscordClick() {
            const discordURL = 'https://discord.gg/ВАША-ССЫЛКА-ЗДЕСЬ'; // Замените на вашу ссылку Discord
            window.open(discordURL, '_blank', 'noopener,noreferrer');
        }
    </script>
</head>
<body>
    <div class="container">
        <header>
            <h1>Правила для Друзей</h1>
            <p>Создано с заботой для комфортного общения и взаимодействия.</p>
        </header>

        <!-- Вкладки -->
        <div class="tabs">
            <button class="tab-button" data-tab="player">Player</button>
            <button class="tab-button" data-tab="admin">Admin</button>
        </div>

        <!-- Контент вкладок -->
        <div id="player" class="tab-content">
            <section class="rules">
                <h2>Правила</h2>
                <ol>
                    <li>
                        💬 <strong>Будьте вежливыми</strong>
                        <ol>
                            <li>1.1 Не используйте оскорблений.</li>
                            <li>1.2 Сохраняйте уважительный тон в общении.</li>
                            <li>1.3 Поддерживайте конструктивный диалог.</li>
                            <li>1.4 Уважайте мнение других участников.</li>
                        </ol>
                    </li>
                    <li>
                        🚫 <strong>Не спамьте</strong>
                        <ol>
                            <li>2.1 Не отправляйте множество сообщений подряд.</li>
                            <li>2.2 Избегайте повторения одного и того же содержания.</li>
                            <li>2.3 Не размещайте рекламные ссылки без разрешения.</li>
                            <li>2.4 Старайтесь, чтобы ваши сообщения были информативными.</li>
                        </ol>
                    </li>
                    <li>
                        ✏️ <strong>Проверяйте правописание</strong>
                        <ol>
                            <li>3.1 Избегайте опечаток и грамматических ошибок.</li>
                            <li>3.2 Пишите понятным и структурированным текстом.</li>
                            <li>3.3 Используйте абзацы для разделения мыслей.</li>
                            <li>3.4 Проверяйте сообщения перед отправкой.</li>
                        </ol>
                    </li>
                    <li>
                        🔇 <strong>Не флудите</strong>
                        <ol>
                            <li>4.1 Не отправляйте бессмысленные сообщения.</li>
                            <li>4.2 Избегайте массового использования стикеров и аудио.</li>
                            <li>4.3 Следите за темой обсуждения и избегайте отклонений.</li>
                            <li>4.4 Уважайте время и внимание других участников.</li>
                        </ol>
                    </li>
                    <li>
                        😊 <strong>Используйте эмодзи и стикеры</strong>
                        <ol>
                            <li>5.1 Выражайте эмоции с помощью эмодзи.</li>
                            <li>5.2 Используйте стикеры для усиления сообщения.</li>
                            <li>5.3 Не злоупотребляйте эмодзи, чтобы не перегружать чат.</li>
                            <li>5.4 Подбирайте эмодзи, соответствующие контексту беседы.</li>
                        </ol>
                    </li>
                    <!-- Добавьте дополнительные правила по необходимости -->
                </ol>
            </section>

            <section class="discord-link">
                <h2>Присоединяйтесь к нашему Discord серверу</h2>
                <button class="discord-button" onclick="handleDiscordClick()">Присоединиться</button>
            </section>

            <section class="privileges">
                <h2>Привилегии</h2>
                <ul>
                    <li><strong>Игрок</strong> - Ислам, Зоя, Арсений</li>
                    <li><strong>Хелпер</strong> - Никто</li>
                    <li><strong>Мл. Админ</strong> - Никто</li>
                    <li><strong>Админ</strong> - Никто</li>
                    <li><strong>Гл. Админ</strong> - Ваня</li>
                    <li><strong>Создатель</strong> - Михаил</li>
                    <li><strong>Тех. Админ</strong> - Илья</li>
                </ul>
            </section>

            <!-- Подача заявки на роль -->
            <section class="apply-role">
                <button class="apply-button" id="applyRoleButton">Подать заявку на роль</button>
                <div class="message" id="applyMessage"></div>
            </section>
        </div>

        <div id="admin" class="tab-content">
            <section class="admin-info">
                <h2>Администраторы</h2>
                <ul class="admin-list">
                    <li><strong>Гл. Админ:</strong> Ваня</li>
                    <li><strong>Создатель:</strong> Михаил</li>
                    <li><strong>Тех. Админ:</strong> Илья</li>
                    <!-- Добавьте дополнительные администраторы по необходимости -->
                </ul>
            </section>
        </div>

        <footer>
            <p>&copy; 2024 Сервер Друзей. Все права защищены.</p>
        </footer>
    </div>
</body>
</html>