Добавь этот текст на страницу НАПИШИ ПОЛНЫЙ КОД

"Помощь
Добро пожаловать в раздел "Помощь"! Здесь вы найдете ответы на часто задаваемые вопросы и полезную информацию, которая поможет вам быстро разобраться с нашими услугами.

Часто задаваемые вопросы (FAQ)
1. Как отследить мою посылку?
Чтобы отследить посылку, введите ваш трек-номер в поле на главной странице сайта или перейдите в раздел "Отслеживание".

2. Что делать, если посылка задерживается?
Если посылка не была доставлена в указанный срок, свяжитесь с нашим отделом поддержки по телефону или через электронную почту, указанную в разделе "Контакты".

3. Какие документы нужны для отправки посылки?
Для отправки посылки вам потребуется удостоверение личности, а также информация о получателе (адрес, телефон). В некоторых случаях могут понадобиться дополнительные документы, такие как декларация на таможню.

4. Как изменить адрес доставки?
Для изменения адреса доставки свяжитесь с нашей поддержкой, предоставив номер отправления и новый адрес.

5. Как вернуть или отменить отправление?
Чтобы отменить или вернуть отправление, обратитесь в ближайшее почтовое отделение или свяжитесь с поддержкой по телефону.

Как связаться с нами?
Если вы не нашли ответ на свой вопрос, вы можете обратиться к нам по следующим каналам:

Телефон горячей линии: 8-800-xxx-xxxx
Электронная почта: <PRESIDIO_ANONYMIZED_EMAIL_ADDRESS>
Чат поддержки: доступен на сайте в рабочие часы.
Мы рады помочь вам в любое время!"
<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Почта - Отслеживание посылок</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" rel="stylesheet">
    <style>
        /* Базовый стиль для бокового меню */
        #sideMenu {
            position: fixed;
            top: 0;
            left: -300px;
            width: 300px;
            height: 100%;
            background-color: #f7fafc;
            transition: left 0.3s ease;
            box-shadow: 2px 0 5px rgba(0, 0, 0, 0.2);
            z-index: 1000;
            padding: 20px;
        }

        #sideMenu.open {
            left: 0;
        }

        #sideMenu h3 {
            font-size: 1.25rem;
            font-weight: 600;
        }

        /* Закрыть меню */
        #closeMenu {
            cursor: pointer;
            position: absolute;
            top: 20px;
            right: 20px;
            font-size: 1.5rem;
            color: #333;
        }

        /* Пункты меню */
        .menu-item {
            display: flex;
            align-items: center;
            padding: 15px 0;
            font-size: 1.1rem;
            font-weight: 500;
            color: #333;
            transition: color 0.3s, background-color 0.3s;
            border-radius: 4px;
        }

        .menu-item i {
            margin-right: 12px;
            font-size: 1.25rem;
            color: #007bff;
        }

        .menu-item:hover {
            background-color: #e2e8f0;
            color: #007bff;
        }

        /* Модальное окно */
        .modal {
            display: none;
            position: fixed;
            z-index: 1000;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
        }

        .modal-content {
            background-color: white;
            margin: 10% auto;
            padding: 20px;
            border-radius: 8px;
            width: 400px; /* Увеличенная ширина */
            position: relative;
         }

        .close-modal {
            cursor: pointer;
            position: absolute;
            top: 10px;
            right: 10px;
            font-size: 1.5rem;
            color: #333;
        }

        .modal-header {
            text-align: center;
            font-size: 1.25rem;
            font-weight: 600;
            margin-bottom: 15px;
        }

        .modal input {
            width: 100%;
            padding: 8px;
            margin: 8px 0;
            border: 1px solid #ccc;
            border-radius: 4px;
            box-sizing: border-box;
        }

        .modal button {
            width: 100%;
            background-color: #007bff;
            color: white;
            padding: 10px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }

        .modal button:hover {
            background-color: #0056b3;
        }

        #sideMenu ul {
            margin-top: 80px; /* Отступ от крестика */
        }

        #sideMenu ul li {
            margin-bottom: 0px; /* Отступ между пунктами меню */
        }

        #sideMenu ul li a, .menu-item {
            display: flex;
            align-items: center;
            font-size: 1rem; /* Размер текста меню */
            font-weight: 500;
            color: #333;
            transition: color 0.3s, background-color 0.3s;
            text-decoration: none;
            padding: 15px 0;
        }

        #sideMenu ul li a i, .menu-item i {
            margin-right: 12px;
            font-size: 1.25rem; /* Размер иконок */
        }

        #sideMenu ul li a:hover, .menu-item:hover {
            color: #007bff;
            background-color: #e2e8f0; /* Добавляем фон при наведении */
            border-radius: 3px;
        }

        /* Стили для слайдера изображений */
        .slider {
            width: 80%; /* Уменьшаем ширину слайдера */
            height: 400px; /* Уменьшаем высоту слайдера */
            position: relative;
            margin: 20px auto; /* Центрируем слайдер */
            overflow: hidden; /* Скрываем переполнение */
            border-radius: 8px; /* Добавляем скругления */
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
        }

        .slides {
            display: flex;
            transition: transform 0.5s ease;
            height: 100%; /* Полная высота */
        }

        .slide {
            min-width: 100%;
            height: 100%; /* Полная высота */
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: #f1f1f1; /* Цвет фона для слайдов */
        }

        .slide img {
            max-width: 100%;
            max-height: 100%;
            object-fit: cover; /* Заполнение контейнера */
            border-radius: 8px; /* Скругление изображения */
        }

        .arrow {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            background-color: rgba(255, 255, 255, 0.8);
            border: none;
            border-radius: 50%;
            padding: 10px;
            cursor: pointer;
            z-index: 10;
        }

        .left-arrow {
            left: 10px;
        }

        .right-arrow {
            right: 10px;
        }

        /* Стили для блока с трек-номером */
        .tracking-container {
            text-align: center;
            margin-top: 20px;
            padding: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative; /* Позиционирование для псевдоэлементов */
        }

        .tracking-container input {
            width: 300px; /* Уменьшаем ширину текстового поля */
            padding: 10px;
            margin-left: 10px; /* Отступ слева от текстового поля */
            border: 1px solid #ccc;
            border-radius: 4px;
            box-sizing: border-box;
        }

        .tracking-container button {
            padding: 10px 15px;
            background-color: #007bff;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            margin-left: 20px; /* Добавлено для увеличения пробела */
        }

        .tracking-container button:hover {
            background-color: #0056b3;
        }

        .tracking-title {
            font-size: 1.25rem;
            font-weight: 600;
            margin-right: 20px; /* Отступ справа от заголовка */
        }

        .tracking-container::before,
        .tracking-container::after {
            content: '';
            position: absolute;
            height: 1px;
            width: 80%; /* Длина линии, меньшая чем контейнер */
            background-color: #e2e2e2;
            top: 0; /* Позиция линии сверху */
        }

        
        .tracking-container::after {
            top: auto; /* Сбросить верхнюю позицию */
            bottom: 0; /* Позиция линии снизу */
        }
    </style>
</head>
<body class="bg-white text-gray-800 font-sans">
    <header class="border-b border-gray-200">
        <div class="container mx-auto px-4 py-4 flex justify-between items-center">
            <div class="flex items-center space-x-4">
                <h1 class="text-2xl font-bold">Почта</h1>
                <!-- Иконка меню для открытия бокового меню -->
                <button id="menuButton" class="text-gray-800 text-2xl focus:outline-none">
                    <i class="fas fa-bars"></i>
                </button>
            </div>
            <nav>
                <ul class="flex space-x-6">
                    <li><a href="#" class="hover:text-gray-600">Отделения</a></li>
                    <li><a href="help.php" class="hover:text-gray-600">Помощь</a></li>
                    <li><a href="#" id="loginButton" class="hover:text-gray-600">Войти</a></li>
                </ul>
            </nav>
        </div>
    </header>

    <!-- Боковое меню -->
    <div id="sideMenu">
        <!-- Закрыть меню -->
        <div id="closeMenu">
            <i class="fas fa-times"></i>
        </div>

        <!-- Пункты меню -->
        <ul>
            <li class="menu-item"><i class="fas fa-home"></i> Главная</li>
            <li class="menu-item" id="openModal" style="display: none;"> <i class="fas fa-truck"></i> Отследить посылку</li>
            <li class="menu-item"><i class="fas fa-info-circle"></i> Помощь</li>
        </ul>
    </div>

    <form method="post" action="./php/authorization/auto.php">
        <div id="loginModal" class="modal">
            <div class="modal-content">
                <span id="closeModal" class="close-modal">&times;</span>
                <div class="modal-header">Вход</div>
                <p>Логин</p>
                <input type="text" class="name" name="login"><br>
                <p>Пароль</p>
                <input type="password" class="pw" name="password"><br><br>
                <button class="button" type="submit">Войти</button>
            </div>
        </div>
    </form>

    <!-- Модальное окно для отслеживания посылок -->
    <div id="trackModal" class="modal">
        <div class="modal-content">
            <span id="closeTrackModal" class="close-modal">&times;</span>
            <div class="modal-header">Заявка</div>
            <form method="post" action="index_request.php">
                <p>Трек-номер</p>
                <input name='trek_number' type="text"  id="trackNumber" required><br>
                <p>Содержание</p>
                <input name='content' type="text"  id="content" required><br>
                <p>Город отправления</p>
                <input name='origin_city' type="text"  id="sendCity" required><br>
                <p>Имя отправителя</p>
                <input name='sender_name' type="text"  id="sender" required><br>
                <p>Номер телефона</p>
                <input name='phone_number' type="text"  id="number" required><br>
                <p>Электронный адрес</p>
                <input name='email_address' type="text"  id="email" required><br><br>
                <button name='index_request.php' type="submit">Отправить заявку</button>
            </form>
        </div>
    </div>
   
    <!-- Слайдер изображений -->
    <div class="slider">
        <button class="arrow left-arrow" onclick="changeSlide(-1)">
            <i class="fas fa-chevron-left"></i>
        </button>
        <button class="arrow right-arrow" onclick="changeSlide(1)">
            <i class="fas fa-chevron-right"></i>
        </button>
        <div class="slides" id="slides">
            <div class="slide"><img src="image.png" alt="Изображение 1"></div>
            <div class="slide"><img src="image.png" alt="Изображение 2"></div>
            <div class="slide"><img src="image3.jpg" alt="Изображение 3"></div>
            <div class="slide"><img src="image4.jpg" alt="Изображение 4"></div>
        </div>
    </div>
        
    <!-- Контейнер с трек-номером -->
    <div class="tracking-container">
        <div class="tracking-title">Где моя посылка?</div>
        <input type="text" id="track-number" placeholder="Введите трек-номер">
        <button id="track-button" style="margin-left: 20px;">Узнать</button> 
    </div>

    <!-- Контейнер с картинкой -->
    <div class="image-container" style="display: flex; justify-content: center; margin-top: 20px;">
        <img src="Pochta_Req.png" alt="Картинка под текстовым полем" style="max-width: 100%; height: auto; border-radius: 8px; cursor: pointer;" id="openTrackModalImg">
    </div>

    <script>
        // Открытие и закрытие бокового меню
        const menuButton = document.getElementById('menuButton');
        const sideMenu = document.getElementById('sideMenu');
        const closeMenu = document.getElementById('closeMenu');

        // Открыть меню
        menuButton.addEventListener('click', function () {
            sideMenu.classList.add('open');
        });

        // Закрыть меню
        closeMenu.addEventListener('click', function () {
            sideMenu.classList.remove('open');
        });

        // Открытие и закрытие модального окна для входа
        const loginButton = document.getElementById('loginButton');
        const loginModal = document.getElementById('loginModal');
        const closeModal = document.getElementById('closeModal');

        // Открыть модальное окно
        loginButton.addEventListener('click', function () {
            loginModal.style.display = 'block';
        });

        // Закрыть модальное окно
        closeModal.addEventListener('click', function () {
            loginModal.style.display = 'none';
        });

        // Закрыть модальное окно при клике вне его
        window.addEventListener('click', function (event) {
            if (event.target == loginModal) {
                loginModal.style.display = 'none';
            }
        });

        // Открытие и закрытие модального окна для отслеживания
        const openTrackModal = document.getElementById('openModal');
        const trackModal = document.getElementById('trackModal');
        const closeTrackModal = document.getElementById('closeTrackModal');

        openTrackModal.addEventListener('click', function () {
            trackModal.style.display = 'block';
        });

        closeTrackModal.addEventListener('click', function () {
            trackModal.style.display = 'none';
        });

        window.addEventListener('click', function (event) {
            if (event.target == trackModal) {
                trackModal.style.display = 'none';
            }
        });

        // Открываем модальное окно для отслеживания по нажатию на картинку
        const openTrackModalImg = document.getElementById('openTrackModalImg');

        openTrackModalImg.addEventListener('click', function () {
            trackModal.style.display = 'block';
        });

        // Слайдер изображений
        let currentIndex = 0;
        const slides = document.getElementById('slides').children;

        function showSlide(index) {
            const totalSlides = slides.length;
            // Условие для кругового слайдера
            currentIndex = (index + totalSlides) % totalSlides;
            const offset = -currentIndex * 100; // Определяем смещение
            for (let slide of slides) {
                slide.style.transform = translateX(${offset}%); // Перемещение слайдов
            }
        }

        function changeSlide(direction) {
            showSlide(currentIndex + direction);
        }

        // Автоматическая смена слайдов каждые 10 секунд
        setInterval(() => {
            showSlide(currentIndex + 1);
        }, 10000);

        // Инициализация отображения первого слайда
        showSlide(currentIndex);

    </script>
</body>
</html>