<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Каталог продукции Pemaks</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.4.120/pdf.min.js"></script>
    <style>
        :root {
            --primary-color: #2c3e50;
            --secondary-color: #3498db;
            --accent-color: #e74c3c;
            --light-color: #ecf0f1;
            --dark-color: #2c3e50;
            --text-color: #333;
            --border-radius: 8px;
            --box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            --transition: all 0.3s ease;
            --sidebar-width: 500px;
        }
        
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }
        
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            height: 100vh;
            overflow: hidden;
            color: var(--text-color);
            background-color: #f9fafb;
        }
        
        .mobile-menu-btn {
            display: none;
            background: var(--primary-color);
            color: white;
            border: none;
            padding: 12px 15px;
            font-size: 16px;
            cursor: pointer;
            width: 100%;
            z-index: 1000;
            box-shadow: var(--box-shadow);
        }
        
        .btn-3d-models {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            padding: 12px 20px;
            background: linear-gradient(135deg, #9b59b6, #8e44ad);
            color: white;
            text-decoration: none;
            border-radius: 8px;
            font-weight: 600;
            font-size: 15px;
            border: none;
            cursor: pointer;
            transition: all 0.3s ease;
            box-shadow: 0 4px 6px rgba(155, 89, 182, 0.2);
            position: relative;
            overflow: hidden;
        }

        .btn-3d-models:hover {
            background: linear-gradient(135deg, #8e44ad, #7d3c98);
            transform: translateY(-2px);
            box-shadow: 0 6px 12px rgba(155, 89, 182, 0.3);
        }

        .btn-3d-models:active {
            transform: translateY(0);
            box-shadow: 0 2px 4px rgba(155, 89, 182, 0.3);
        }

        .btn-3d-models::after {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            width: 5px;
            height: 5px;
            background: rgba(255, 255, 255, 0.5);
            opacity: 0;
            border-radius: 100%;
            transform: scale(1, 1) translate(-50%);
            transform-origin: 50% 50%;
        }

        .btn-3d-models:active::after {
            animation: ripple 0.6s ease-out;
        }

        .btn-3d-models:hover .btn-icon {
            transform: translateY(-2px);
        }

        .container {
            display: flex;
            flex-direction: column;
            height: 100vh;
        }
        
        .header {
            padding: 18px 25px;
            background: linear-gradient(135deg, var(--primary-color) 0%, #1a2530 100%);
            color: white;
            font-size: 25px;
            font-weight: bold;
            box-shadow: var(--box-shadow);
            z-index: 100;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .header-title {
            display: flex;
            align-items: center;
            gap: 10px;
            white-space: nowrap; 
        }

        .header-title {
            display: flex;
            align-items: center;
            gap: 10px;
        }
        
        .header-logo {
            font-weight: bold;
            font-size: 24px;
            letter-spacing: 1px;
        }
        
        .content-wrapper {
            display: flex;
            flex: 1;
            overflow: hidden;
            flex-direction: column;
        }
        
        @media (min-width: 768px) {
            .content-wrapper {
                flex-direction: row;
            }
        }
        
        .sidebar {
            width: 100%;
            background-color: white;
            border-right: 1px solid #e1e4e8;
            overflow-y: auto;
            padding: 15px;
            transition: var(--transition);
            z-index: 100;
            box-shadow: var(--box-shadow);
        }
        
        @media (min-width: 768px) {
            .sidebar {
                width: var(--sidebar-width);
                min-width: var(--sidebar-width);
            }
        }
        
        .sidebar.hidden {
            transform: translateX(-100%);
            position: absolute;
            height: 100%;
        }
        
        @media (min-width: 768px) {
            .sidebar.hidden {
                transform: translateX(0);
                position: relative;
            }
        }
        
        .main-content {
            flex: 1;
            display: flex;
            flex-direction: column;
            overflow: hidden;
            background-color: #f1f3f4;
        }
        
        .pdf-viewer-container {
            flex: 1;
            overflow-y: auto;
            background-color: #525659;
            padding: 20px 0;
            position: relative;
        }
        
        .pdf-page-container {
            margin-bottom: 20px;
            display: flex;
            justify-content: center;
            transition: transform 0.2s ease;
        }
        
        .pdf-page {
            background-color: white;
            box-shadow: 0 5px 15px rgba(0,0,0,0.2);
            max-width: 100%;
            height: auto;
            border-radius: 4px;
        }
        
        .pdf-controls {
            padding: 12px 20px;
            background: linear-gradient(to right, var(--primary-color), #3a506b);
            color: white;
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
            gap: 15px;
            box-shadow: var(--box-shadow);
        }
        
        .zoom-controls {
            display: flex;
            align-items: center;
            gap: 10px;
        }
        
        .pdf-controls button {
            background-color: var(--secondary-color);
            color: white;
            border: none;
            padding: 8px 14px;
            border-radius: var(--border-radius);
            cursor: pointer;
            font-size: 14px;
            transition: var(--transition);
            display: flex;
            align-items: center;
            gap: 5px;
        }
        
        .pdf-controls button:hover {
            background-color: #2980b9;
            transform: translateY(-2px);
        }
        
        /* Улучшенные стили для кнопок */
        .action-buttons {
            display: flex;
            gap: 12px;
            align-items: center;
        }
        
        .download-btn, .print-btn {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            padding: 12px 20px;
            font-size: 15px;
            font-weight: 600;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            transition: all 0.3s ease;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            position: relative;
            overflow: hidden;
        }
        
        .download-btn {
            background: linear-gradient(135deg, #27ae60, #2ecc71);
            color: white;
        }
        
        .download-btn:hover {
            background: linear-gradient(135deg, #219653, #27ae60);
            transform: translateY(-2px);
            box-shadow: 0 6px 12px rgba(39, 174, 96, 0.3);
        }
        
        .download-btn:active {
            transform: translateY(0);
            box-shadow: 0 2px 4px rgba(39, 174, 96, 0.3);
        }
        
        .print-btn {
            background: linear-gradient(135deg, #3498db, #2980b9);
            color: white;
        }
        
        .print-btn:hover {
            background: linear-gradient(135deg, #2980b9, #2573a7);
            transform: translateY(-2px);
            box-shadow: 0 6px 12px rgba(52, 152, 219, 0.3);
        }
        
        .print-btn:active {
            transform: translateY(0);
            box-shadow: 0 2px 4px rgba(52, 152, 219, 0.3);
        }
        
        /* Анимация для кнопок */
        @keyframes pulse {
            0% { transform: scale(1); }
            50% { transform: scale(1.05); }
            100% { transform: scale(1); }
        }
        
        .download-btn.pulse, .print-btn.pulse {
            animation: pulse 0.5s ease;
        }
        
        /* Эффект волны при клике */
        .download-btn::after, .print-btn::after {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            width: 5px;
            height: 5px;
            background: rgba(255, 255, 255, 0.5);
            opacity: 0;
            border-radius: 100%;
            transform: scale(1, 1) translate(-50%);
            transform-origin: 50% 50%;
        }
        
        .download-btn:active::after, .print-btn:active::after {
            animation: ripple 0.6s ease-out;
        }
        
        @keyframes ripple {
            0% {
                transform: scale(0, 0);
                opacity: 0.5;
            }
            100% {
                transform: scale(20, 20);
                opacity: 0;
            }
        }
        
        /* Иконки для кнопок */
        .btn-icon {
            font-size: 18px;
            transition: transform 0.3s ease;
        }
        
        .download-btn:hover .btn-icon {
            transform: translateY(-2px);
        }
        
        .print-btn:hover .btn-icon {
            transform: translateY(-2px);
        }
        
        .zoom-percent {
            min-width: 50px;
            text-align: center;
            font-weight: bold;
        }
        
        .menu-title {
            font-weight: bold;
            margin: 20px 0 12px 0;
            color: var(--primary-color);
            font-size: 14px;
            background-color: #f0f7ff;
            padding: 10px 10px;
            border-radius: var(--border-radius);
            border-left: 4px solid var(--secondary-color);
            cursor: pointer;
            transition: var(--transition);
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .menu-title:hover {
            background-color: #e1f0ff;
        }
        
        .menu-title .toggle-icon {
            font-weight: bold;
            font-size: 16px;
            color: var(--dark-color);
            transition: transform 0.3s;
        }
        
        .menu-item {
            padding: 10px 5px;
            cursor: pointer;
            border-left: 3px solid transparent;
            transition: var(--transition);
            font-size: 13px;
            margin: 5px 0;
            border-radius: 4px;
            display: flex;
            align-items: center;
        }
        
        .menu-item:hover {
            background-color: #e8f4ff;
            transform: translateX(5px);
        }
        
        .menu-item.active {
            border-left: 3px solid var(--secondary-color);
            background-color: #e1f0ff;
            font-color: #DC143C;
            color: var(--secondary-color);
        }
        
        .menu-item span:first-child {
            flex: 1;
        }
        
        .menu-item:hover span {
            color: var(--accent-color) !important;
        }
        
        .submenu .menu-item:hover {
            color: var(--accent-color);
        }
        
        .submenu {
            margin-left: 15px;
            display: none;
            border-left: 2px dashed #ddd;
            padding-left: 5px;
        }
        
        .submenu.show {
            display: block;
            animation: fadeIn 0.3s ease;
        }
        
        .toggle-icon {
            transition: transform 0.3s;
            font-weight: bold;
            font-size: 16px;
            color: var(--dark-color);
        }
        
        .loading {
            color: white;
            font-size: 18px;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 15px;
        }
        
        .error-message {
            color: #c0392b;
            padding: 20px;
            text-align: center;
            background-color: #fdecea;
            margin: 20px;
            border-radius: var(--border-radius);
            font-size: 16px;
            border-left: 4px solid #e74c3c;
            box-shadow: var(--box-shadow);
        }
        
        .page-indicator {
            position: fixed;
            right: 20px;
            bottom: 20px;
            background-color: rgba(44, 62, 80, 0.9);
            color: white;
            padding: 8px 16px;
            border-radius: 30px;
            font-size: 14px;
            z-index: 10;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
        }
        
        .search-box {
            margin: 15px 0;
            position: relative;
        }
        
        .search-box input {
            width: 100%;
            padding: 10px 15px;
            border: 1px solid #ddd;
            border-radius: var(--border-radius);
            font-size: 14px;
            transition: var(--transition);
        }
        
        .search-box input:focus {
            outline: none;
            border-color: var(--secondary-color);
            box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.2);
        }
        
        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }
        
        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
        
        /* Адаптивные стили для всех размеров экранов */
        @media (max-width: 1200px) {
            .sidebar {
                width: 400px;
                min-width: 400px;
            }
            
            .header {
                font-size: 22px;
                padding: 15px 20px;
            }
            
            .action-buttons {
                gap: 10px;
            }
            
            .download-btn, .print-btn, .btn-3d-models {
                padding: 10px 16px;
                font-size: 14px;
            }
        }
        
        @media (max-width: 992px) {
            .sidebar {
                width: 350px;
                min-width: 350px;
            }
            
            .header {
                font-size: 20px;
                padding: 12px 15px;
            }
            
            .current-pdf-name {
                max-width: 200px;
            }
            
            .action-buttons {
                gap: 8px;
            }
            
            .download-btn, .print-btn, .btn-3d-models {
                padding: 8px 14px;
                font-size: 13px;
            }
        }
        
        @media (max-width: 768px) {
            .mobile-menu-btn {
                display: block;
            }
            
            .sidebar {
                position: absolute;
                height: 100%;
                width: 100%;
                max-width: 400px;
                z-index: 999;
            }
            
            .sidebar.hidden {
                transform: translateX(-100%);
            }
            
            .header {
                flex-direction: column;
                gap: 10px;
                align-items: flex-start;
            }
            
            .current-pdf-info {
                width: 100%;
                justify-content: space-between;
            }
            
            .action-buttons {
                flex-wrap: wrap;
                justify-content: flex-end;
            }
            
            .current-pdf-name {
                max-width: 150px;
            }
        }
        
        @media (max-width: 576px) {
            .sidebar {
                max-width: 100%;
            }
            
            .header {
                padding: 10px 15px;
                font-size: 18px;
            }
            
            .current-pdf-info {
                flex-direction: column;
                gap: 10px;
            }
            
            .action-buttons {
                width: 100%;
                justify-content: space-between;
            }
            
            .download-btn, .print-btn, .btn-3d-models {
                padding: 8px 12px;
                font-size: 12px;
                flex: 1;
                justify-content: center;
            }
            
            .pdf-controls {
                padding: 10px 15px;
            }
            
            .pdf-controls button {
                padding: 6px 10px;
                font-size: 13px;
            }
            
            .zoom-percent {
                font-size: 13px;
            }
            
            .page-indicator {
                font-size: 12px;
                padding: 6px 12px;
                right: 10px;
                bottom: 10px;
            }
            
            .menu-title {
                font-size: 13px;
                padding: 8px;
            }
            
            .menu-item {
                font-size: 12px;
                padding: 8px 5px;
            }
        }
        
        @media (max-width: 480px) {
            .header-title {
                font-size: 16px;
            }
            
            .action-buttons {
                flex-direction: column;
                gap: 5px;
            }
            
            .download-btn, .print-btn, .btn-3d-models {
                width: 100%;
                padding: 10px;
            }
            
            .pdf-controls {
                flex-direction: column;
                gap: 10px;
            }
            
            .zoom-controls {
                justify-content: center;
            }
            
            .search-box input {
                padding: 8px 12px;
                font-size: 13px;
            }
        }
        
        /* Стили для скроллбара */
        ::-webkit-scrollbar {
            width: 8px;
            height: 8px;
        }
        
        ::-webkit-scrollbar-track {
            background: #f1f1f1;
            border-radius: 10px;
        }
        
        ::-webkit-scrollbar-thumb {
            background: #c4c4c4;
            border-radius: 10px;
        }
        
        ::-webkit-scrollbar-thumb:hover {
            background: #a0a0a0;
        }
        
        .logo-container {
            display: flex;
            align-items: center;
            margin-bottom: 15px;
            padding-bottom: 15px;
            border-bottom: 1px solid #eee;
        }
        
        .logo {
            font-weight: bold;
            font-size: 22px;
            color: var(--primary-color);
        }
        
        .search-results-info {
            padding: 8px 12px;
            background-color: #e1f0ff;
            border-radius: var(--border-radius);
            margin-bottom: 10px;
            font-size: 14px;
            display: none;
        }
        
        .current-pdf-info {
            display: flex;
            align-items: center;
            gap: 10px;
            font-size: 14px;
        }
        
        .current-pdf-name {
            max-width: 300px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        
        .spinner {
            border: 3px solid rgba(255, 255, 255, 0.3);
            border-radius: 50%;
            border-top: 3px solid white;
            width: 30px;
            height: 30px;
            animation: spin 1s linear infinite;
        }
        
        /* Добавляем класс для скрытия элементов при поиске */
        .search-hidden {
            display: none !important;
        }
        
        /* Стили для группировки разделов */
        .section-group {
            margin-bottom: 10px;
        }
        
        .section-content {
            display: none;
        }
        
        .section-content.show {
            display: block;
            animation: fadeIn 0.3s ease;
        }
    </style>
</head>
<body>
<div class="container">
        <div class="header">
            <div class="header-title">
                <div class="header-logo"></div>
                <div>PEMAKS</div>
            </div>
            <div class="current-pdf-info">
                <span id="current-pdf-name" class="current-pdf-name"></span>
                <div class="action-buttons">
                    <button id="download-btn" class="download-btn" style="display: none;">
                        <span class="btn-icon"></span>
                        Скачать каталог
                    </button>
                    <button id="print-btn" class="print-btn" style="display: none;">
                        <span class="btn-icon"></span>
                        Печать каталога
                    </button>
                    <a href="https://www.3dfindit.com/ru/cad-bim-library/manufacturer/3dfindit-user-content/pemaks-rus?path=00_3df_usercontent%2F38471570" 
                       target="_blank" 
                       class="btn-3d-models">
                        База 3D моделей
                    </a>
                </div>
            </div>
        </div>
        
        <button class="mobile-menu-btn" id="mobileMenuBtn">Меню</button>
        
        <div class="content-wrapper">
            <div class="sidebar" id="sidebar">
                <div class="logo-container">
                    <div class="logo">Каталог продукции</div>
                </div>
                
                <div class="search-box">
                    <input type="text" placeholder="Поиск в каталоге..." id="searchInput">
                </div>
                
                <div class="search-results-info" id="searchResultsInfo">
                    Результаты поиска: <span id="resultsCount">0</span>
                </div>

                <!-- Пневмоцилиндры и принадлежности -->
                <div class="menu-title" onclick="toggleSection(this, 'pneumaticSection')">
                    Пневмоцилиндры и принадлежности
                    <span class="toggle-icon">+</span>
                </div>
                <div class="section-content" id="pneumaticSection">
                    <div class="menu-item" onclick="toggleSubmenu(this, 'ISO15552')">
                        <span style="color: #191970;">Стандартные цилиндры</span>
                        <span class="toggle-icon">+</span>
                    </div>
                    <div class="submenu" id="ISO15552">
                        <div class="menu-item" data-pdf="https://www.pemaks.ru/upload/medialibrary/pdf/pemaks/DMC.pdf" data-name="Серия DMC">
                            <u>Серия DMC.</u> &nbsp; ISO 15552 Ø32-Ø100 мм
                        </div>
                        <div class="menu-item" data-pdf="https://www.pemaks.ru/upload/medialibrary/pdf/pemaks/PST.pdf" data-name="Серия PST">
                            <u>Серия PST.</u> &nbsp; ISO 15552 Ø32-Ø125 мм
                        </div>
                        <div class="menu-item" data-pdf="https://www.pemaks.ru/upload/medialibrary/pdf/pemaks/PNC.pdf" data-name="Серия PNC">
                            <u>Серия PNC.</u> &nbsp; ISO 15552 Ø32-Ø125 мм
                        </div>
                        <div class="menu-item" data-pdf="https://www.pemaks.ru/upload/medialibrary/pdf/pemaks/PMB.pdf" data-name="Серия PMB">
                            <u>Серия PMB.</u> &nbsp; ISO 15552 Ø125-Ø320 мм
                        </div>
                        <div class="menu-item" data-pdf="https://www.pemaks.ru/upload/medialibrary/pdf/pemaks/PNS(32-100).pdf" data-name="Серия PNS">
                            <u>Серия PNS.</u> &nbsp; Стандарт CETOP RP 53P Ø32-Ø320 мм
                        </div>
                        <div class="menu-item" data-pdf="https://www.pemaks.ru/upload/medialibrary/pdf/pemaks/pag.pdf" data-name="Серия PAG">
                            <u>Серия PAG.</u> &nbsp; Стандарт CETOP RP 43P Ø32-Ø100 мм
                        </div>
                    </div>
                  
                    <div class="menu-item" onclick="toggleSubmenu(this, 'ISO6432')">
                        <span style="color: #191970;">Круглые цилиндры</span>
                        <span class="toggle-icon">+</span>
                    </div>
                    <div class="submenu" id="ISO6432">
                        <div class="menu-item" data-pdf="https://www.pemaks.ru/upload/medialibrary/pdf/pemaks/PM.pdf" data-name="Серия PM">
                            <u>Серия PM.</u> &nbsp;ISO 6432 Ø8-Ø25 мм
                        </div>
                        <div class="menu-item" data-pdf="https://www.pemaks.ru/upload/medialibrary/pdf/pemaks/PVB.pdf" data-name="Серия PVB">
                            <u>Серия PVB.</u> &nbsp; ISO 6432 Ø32-Ø100 мм
                        </div>
                    </div>

                    <div class="menu-item" onclick="toggleSubmenu(this, '21287')">
                        <span style="color: #191970;">Компактные цилиндры</span>
                        <span class="toggle-icon">+</span>
                    </div>
                    <div class="submenu" id="21287">
                        <div class="menu-item" data-pdf="https://www.pemaks.ru/upload/medialibrary/pdf/pemaks/KC (12-25).pdf" data-name="Серия KC (12-25)">
                            <u>Серия KC.</u> &nbsp; ISO 21287 Ø12-Ø25 мм
                        </div>
                        <div class="menu-item" data-pdf="https://www.pemaks.ru/upload/medialibrary/pdf/pemaks/KC (32-100).pdf" data-name="Серия KC (32-100)">
                            <u>Серия KC.</u> &nbsp; ISO 21287 Ø32-Ø100 мм
                        </div>
                        <div class="menu-item" data-pdf="https://www.pemaks.ru/upload/medialibrary/pdf/pemaks/PK(32-100).pdf" data-name="Серия PK">
                            <u>Серия PK.</u> &nbsp; UNITOP Ø32-Ø100 мм
                        </div>
                        <div class="menu-item" data-pdf="https://www.pemaks.ru/upload/medialibrary/pdf/pemaks/PK(125).pdf" data-name="Серия PK">
                            <u>Серия PK.</u> &nbsp; Ø125-Ø320 мм
                        </div>
                        <div class="menu-item" data-pdf="https://www.pemaks.ru/upload/medialibrary/pdf/pemaks/KS.pdf" data-name="Серия KS">
                            <u>Серия KS.</u> &nbsp; Ø20-Ø100 мм
                        </div>
                        <div class="menu-item" data-pdf="https://www.pemaks.ru/upload/medialibrary/pdf/pemaks/KD.pdf" data-name="Серия KD">
                            <u>Серия KD.</u> &nbsp; Азиатский стандарт Ø20-Ø63 мм
                        </div>
                    </div>
                  
                    <div class="menu-item" onclick="toggleSubmenu(this, 'AISI')">
                        <span style="color: #191970;">Цилиндры из нержавеющей стали</span>
                        <span class="toggle-icon">+</span>
                    </div>
                    <div class="submenu" id="AISI">
                        <div class="menu-item" data-pdf="https://www.pemaks.ru/upload/medialibrary/pdf/pemaks/PRS.pdf" data-name="Серия PRS">
                            <u>Серия PRS.</u> &nbsp; ISO 15552 Ø32-Ø125 мм
                        </div>
                        <div class="menu-item" data-pdf="https://www.pemaks.ru/upload/medialibrary/pdf/pemaks/PVS.pdf" data-name="Серия PVS">
                            <u>Серия PVS.</u> &nbsp; ISO 6432 Ø8-Ø100 мм
                        </div>
                    </div>

                    <div class="menu-item" onclick="toggleSubmenu(this, 'PGB')">
                        <span style="color: #191970;">Цилиндры с направляющими</span>
                        <span class="toggle-icon">+</span>
                    </div>
                    <div class="submenu" id="PGB">
                        <div class="menu-item" data-pdf="https://www.pemaks.ru/upload/medialibrary/pdf/pemaks/PGB.pdf" data-name="Серия PGB">
                            <u>Серия PGB.</u> &nbsp; Ø12-Ø63 мм
                        </div>
                        <div class="menu-item" data-pdf="https://www.pemaks.ru/upload/medialibrary/pdf/pemaks/PDP.pdf" data-name="Серия PDP">
                            <u>Серия PDP.</u> &nbsp; Двухштоковый Ø6-Ø32 мм
                        </div>
                        <div class="menu-item" data-pdf="https://www.pemaks.ru/upload/medialibrary/pdf/pemaks/PTR.pdf" data-name="Серия PTR">
                            <u>Серия PTR.</u> &nbsp; Ø32-Ø100 мм
                        </div>
                        <div class="menu-item" data-prefix="https://www.pemaks.ru/upload/medialibrary/pdf/pemaks/PRY.pdf" data-name="Серия PRY">
                            <u>Серия PRY.</u> &nbsp; Ø6-Ø20 мм
                        </div>
                        <div class="menu-item" data-pdf="https://www.pemaks.ru/upload/medialibrary/pdf/pemaks/PRD.pdf" data-name="Серия PRD">
                            <u>Серия PRD.</u> &nbsp; Минисуппорт Ø8-Ø25 мм
                        </div>
                        <div class="menu-item" data-pdf="https://www.pemaks.ru/upload/medialibrary/pdf/pemaks/PHB.pdf" data-name="Серия PHB">
                            <u>Серим PHB.</u> &nbsp; Направляющие для цилиндров ISO15552 Ø32-Ø125 мм
                        </div>
                        <div class="menu-item" data-pdf="https://www.pemaks.ru/upload/medialibrary/pdf/pemaks/PHS.pdf" data-name="Серия PHS">
                            <u>Серим PHS.</u> &nbsp; Направляющие для цилиндров ISO6432 Ø12-Ø125 мм
                        </div>
                    </div>
                  
                    <div class="menu-item" onclick="toggleSubmenu(this, 'Z')">
                        <span style="color: #191970;">Бесштоковые цилиндры</span>
                        <span class="toggle-icon">+</span>
                    </div>
                    <div class="submenu" id="Z">
                        <div class="menu-item" data-pdf="https://www.pemaks.ru/upload/medialibrary/pdf/pemaks/Z.pdf" data-name="Серия Z">
                            <u>Серия Z.</u> &nbsp; Стандартная каретка. Ø25-Ø50 мм
                        </div>
                        <div class="menu-item" data-pdf="https://www.pemaks.ru/upload/medialibrary/pdf/pemaks/ZF.pdf" data-name="Серия ZF">
                            <u>Серия ZF.</u> &nbsp; Каретка с опорной платформой. Ø25-Ø50 мм 
                        </div>
                        <div class="menu-item" data-pdf="https://www.pemaks.ru/upload/medialibrary/pdf/pemaks/ZFF.pdf" data-name="Серия ZFF">
                            <u>Серия ZFF.</u> &nbsp; Каретка с двумя опорными платформами. Ø25-Ø50 мм
                        </div>
                        <div class="menu-item" data-pdf="https://www.pemaks.ru/upload/medialibrary/pdf/pemaks/RDF.pdf" data-name="Серия RDF">
                            <u>Серия RDF.</u> &nbsp;  Плоская каретка. Ø16-Ø63 мм
                        </div>
                        <div class="menu-item" data-pdf="https://www.pemaks.ru/upload/medialibrary/pdf/pemaks/RDL.pdf" data-name="Серия RDL">
                            <u>Серия RDL.</u> &nbsp; Вертикальная каретка. Ø16-Ø40 мм
                        </div>
                    </div>

                    <div class="menu-item" onclick="toggleSubmenu(this, 'Zahvati')">
                        <span style="color: #191970;">Захваты пневматические</span>
                        <span class="toggle-icon">+</span>
                    </div>
                    <div class="submenu" id="Zahvati">
                        <div class="menu-item" data-pdf="https://www.pemaks.ru/upload/medialibrary/pdf/pemaks/PGP.pdf" data-name="Серия PGP">
                            <u>Серия PGP.</u> &nbsp; Параллельные захваты Ø10-Ø40 мм
                        </div>
                        <div class="menu-item" data-pdf="https://www.pemaks.ru/upload/medialibrary/pdf/pemaks/PGA.pdf" data-name="Серия PGA">
                            <u>Серия PGA.</u> &nbsp; Угловые захваты Ø16-Ø25 мм
                        </div>
                        <div class="menu-item" data-pdf="https://www.pemaks.ru/upload/medialibrary/pdf/pemaks/PGR.pdf" data-name="Серия PGR">
                            <u>Серия PGR.</u> &nbsp; Радиальные захваты Ø10-Ø25 мм
                        </div>
                        <div class="menu-item" data-pdf="https://www.pemaks.ru/upload/medialibrary/pdf/pemaks/PGM.pdf" data-name="Серия PGM">
                            <u>Серия PGM.</u> &nbsp;  Магнитные захваты Ø16-Ø50 мм
                        </div>
                        <div class="menu-item" data-pdf="https://www.pemaks.ru/upload/medialibrary/pdf/pemaks/PGT.pdf" data-name="Серия PGT">
                            <u>Серия PGT.</u> &nbsp; Кулочковые захваты Ø16-Ø125 мм
                        </div>
                    </div>

                    <div class="menu-item" onclick="toggleSubmenu(this, 'PRD')">
                        <span style="color: #191970;">Датчики положения</span>
                        <span class="toggle-icon">+</span>
                    </div>
                    <div class="submenu" id="PRD">
                        <div class="menu-item" data-pdf="https://www.pemaks.ru/upload/medialibrary/pdf/pemaks/RT.pdf" data-name="Датчики положения и держатели">
                            <u>Датчики положения и держатели</u> 
                        </div>
                    </div>
                </div>

                <!-- Цилиндры электрические -->
                <div class="menu-title" onclick="toggleSection(this, 'electricCylindersSection')">
                    Цилиндры электрические
                    <span class="toggle-icon">+</span>
                </div>
                <div class="section-content" id="electricCylindersSection">
                    <div class="menu-item" data-pdf="https://www.pemaks.ru/upload/medialibrary/pdf/pemaks/PSEK.pdf" data-name="Серия PSEK">
                        <u>PSEK</u> &nbsp; Компактный электроцилиндр
                    </div>
                    <div class="menu-item" data-pdf="https://www.pemaks.ru/upload/medialibrary/pdf/pemaks/PSEX.pdf" data-name="Серия PSEX">
                        <u>PSEX</u> &nbsp; Электроцилиндр для пищевой отрасли
                    </div>
                    <div class="menu-item" data-pdf="https://www.pemaks.ru/upload/medialibrary/pdf/pemaks/PSE.pdf" data-name="Серия PSE">
                        <u>PSE</u> &nbsp; Стандартный электроцилиндр
                    </div>
                </div>


                <!-- Блоки подготовки воздуха -->
                <div class="menu-title" onclick="toggleSection(this, 'airPrepSection')">
                    Блоки подготовки воздуха
                    <span class="toggle-icon">+</span>
                </div>
                <div class="section-content" id="airPrepSection">
                    <div class="menu-item" onclick="toggleSubmenu(this, 'BPV')">
                        <span style="color: #191970;">Блоки подготовки воздуха в сборе</span>
                        <span class="toggle-icon">+</span>
                    </div>
                    <div class="submenu" id="BPV">
                        <div class="menu-item" data-pdf="https://www.pemaks.ru/upload/medialibrary/pdf/pemaks/PS1FRL.pdf" data-name="Серия PS1FRL">
                            <u>Серия PS1FRL.</u> &nbsp; Фильтр-регулятор с лубрикатором
                        </div>
                        <div class="menu-item" data-pdf="https://www.pemaks.ru/upload/medialibrary/pdf/pemaks/PS2FRL.pdf" data-name="Серия PS2FRL">
                            <u>Серия PS2FRL.</u> &nbsp; Фильтр-регулятор с лубрикатором из алюминия
                        </div>
                    </div>

                    <div class="menu-item" onclick="toggleSubmenu(this, 'BPV1')">
                        <span style="color: #191970;">Фильтры-регуляторы</span>
                        <span class="toggle-icon">+</span>
                    </div>
                    <div class="submenu" id="BPV1">
                        <div class="menu-item" data-pdf="https://www.pemaks.ru/upload/medialibrary/pdf/pemaks/PS1FR.pdf" data-name="Серия PS1FR">
                            <u>Серия PS1FR.</u> &nbsp; Фильтр-регулятор
                        </div>
                        <div class="menu-item" data-pdf="https://www.pemaks.ru/upload/medialibrary/pdf/pemaks/PS2FR.pdf" data-name="Серия PS2FR">
                            <u>Серия PS2FR.</u> &nbsp; Фильтр-регулятор из алюминия
                        </div>
                    </div>

                    <div class="menu-item" onclick="toggleSubmenu(this, 'BPV6')">
                        <span style="color: #191970;">Регуляторы давления</span>
                        <span class="toggle-icon">+</span>
                    </div>
                    <div class="submenu" id="BPV6">
                        <div class="menu-item" data-pdf="https://www.pemaks.ru/upload/medialibrary/pdf/pemaks/PS1R.pdf" data-name="Серия PS1R">
                            <u>Серия PS1R.</u> &nbsp; Регулятор давления
                        </div>
                        <div class="menu-item" data-pdf="https://www.pemaks.ru/upload/medialibrary/pdf/pemaks/PS2R.pdf" data-name="Серия PS2R">
                            <u>Серия PS2R.</u> &nbsp;  Регулятор давления из алюминия
                        </div>
                        <div class="menu-item" data-pdf="https://www.pemaks.ru/upload/medialibrary/pdf/pemaks/PS3R.pdf" data-name="Серия PS3R">
                            <u>Серия PS3R.</u> &nbsp; Регулятор давления с обратным клапаном
                        </div>
                        <div class="menu-item" data-pdf="https://www.pemaks.ru/upload/medialibrary/pdf/pemaks/PS4R.pdf" data-name="Серия PS4R">
                            <u>Серия PS4R.</u> &nbsp; Регулятор давления с манометром в ручке
                        </div>
                        <div class="menu-item" data-pdf="https://www.pemaks.ru/upload/medialibrary/pdf/pemaks/PH1R.pdf" data-name="Серия PH1R">
                            <u>Серия PH1R.</u> &nbsp; Минирегулятор давления
                        </div>
                        <div class="menu-item" data-pdf="https://www.pemaks.ru/upload/medialibrary/pdf/pemaks/PH2R.pdf" data-name="Серия PH2R">
                            <u>Серия PH2R.</u> &nbsp; Минирегулятор давления
                        </div>
                        <div class="menu-item" data-pdf="https://www.pemaks.ru/upload/medialibrary/pdf/pemaks/PZVR.pdf" data-name="Серия PZVR">
                            <u>Серия PZVR.</u> &nbsp;  Регулятор давления на вакуум
                        </div>
                        <div class="menu-item" data-pdf="https://www.pemaks.ru/upload/medialibrary/pdf/pemaks/PS1HR.pdf" data-name="Серия PS1HR">
                            <u>Серия PS1HR.</u> &nbsp; Прeцизионный регулятор давления
                        </div>
                        <div class="menu-item" data-pdf="https://www.pemaks.ru/upload/medialibrary/pdf/pemaks/PS1OR.pdf" data-name="Серия PS1OR">
                            <u>Серия PS1OR.</u> &nbsp; Пропорциональный регулятор давления
                        </div>
                    </div>

                    <div class="menu-item" onclick="toggleSubmenu(this, 'BPV7')">
                        <span style="color: #191970;">Датчики давления</span>
                        <span class="toggle-icon">+</span>
                    </div>
                    <div class="submenu" id="BPV7">
                        <div class="menu-item" data-pdf="https://www.pemaks.ru/upload/medialibrary/pdf/pemaks/PS1PS.pdf" data-name="Серия PS1PS">
                            <u>Серия PS1PS.</u> &nbsp; Цифровой датчик давления
                        </div>
                    </div>

                    <div class="menu-item" onclick="toggleSubmenu(this, 'BPV8')">
                        <span style="color: #191970;">Усилители давления и ресиверы</span>
                        <span class="toggle-icon">+</span>
                    </div>
                    <div class="submenu" id="BPV8">
                        <div class="menu-item" data-pdf="https://www.pemaks.ru/upload/medialibrary/pdf/pemaks/PSB.pdf" data-name="Серия PSB">
                            <u>Серия PSB.</u> &nbsp; Усилитель давления
                        </div>
                    </div>

                    <div class="menu-item" onclick="toggleSubmenu(this, 'BPV2')">
                        <span style="color: #191970;">Фильтры</span>
                        <span class="toggle-icon">+</span>
                    </div>
                    <div class="submenu" id="BPV2">
                        <div class="menu-item" data-pdf="https://www.pemaks.ru/upload/medialibrary/pdf/pemaks/PS1F.pdf" data-name="Серия PS1F">
                            <u>Серия PS1F.</u> &nbsp; Фильтры 40 мкм
                        </div>
                        <div class="menu-item" data-pdf="https://www.pemaks.ru/upload/medialibrary/pdf/pemaks/PS1FM-PS1FD.pdf" data-name="Серия PS1FM-PS1FD">
                            <u>Серии PS1FM-PS1FD.</u> &nbsp; Фильтры 0.3 мкм и 0.1 мкм
                        </div>
                    </div>

                    <div class="menu-item" onclick="toggleSubmenu(this, 'BPV3')">
                        <span style="color: #191970;">Маслораспылители</span>
                        <span class="toggle-icon">+</span>
                    </div>
                    <div class="submenu" id="BPV3">
                        <div class="menu-item" data-pdf="https://www.pemaks.ru/upload/medialibrary/pdf/pemaks/PS1L.pdf" data-name="Серия PS1L">
                            <u>Серия PS1L.</u> &nbsp; Лубрикатор
                        </div>
                    </div>

                    <div class="menu-item" onclick="toggleSubmenu(this, 'BPV4')">
                        <span style="color: #191970;">Сепараторы</span>
                        <span class="toggle-icon">+</span>
                    </div>
                    <div class="submenu" id="BPV4">
                        <div class="menu-item" data-pdf="https://www.pemaks.ru/upload/medialibrary/pdf/pemaks/PS1S.pdf" data-name="Серия PS1S">
                            <u>Серия PS1S.</u> &nbsp; Сепаратор
                        </div>
                    </div>

                    <div class="menu-item" onclick="toggleSubmenu(this, 'BPV5')">
                        <span style="color: #191970;">Включающие клапаны</span>
                        <span class="toggle-icon">+</span>
                    </div>
                    <div class="submenu" id="BPV5">
                        <div class="menu-item" data-pdf="https://www.pemaks.ru/upload/medialibrary/pdf/pemaks/PS1M.pdf" data-name="Серия PS1M">
                            <u>Серия PS1M.</u> &nbsp; Включащие клапаны механические
                        </div>
                        <div class="menu-item" data-pdf="https://www.pemaks.ru/upload/medialibrary/pdf/pemaks/PS1E.pdf" data-name="Серия PS1E">
                            <u>Серия PS1E.</u> &nbsp; Включащие клапаны электрические
                        </div>
                        <div class="menu-item" data-pdf="https://www.pemaks.ru/upload/medialibrary/pdf/pemaks/PS2SSV.pdf" data-name="Серия PS2SSV">
                            <u>Серия PS2SSV.</u> &nbsp; Клапаны плавного пуска
                        </div>
                    </div>
                </div>

                <!-- Распределители и пневмоострова -->
                <div class="menu-title" onclick="toggleSection(this, 'distributorsSection')">
                    Распределители и пневмоострова
                    <span class="toggle-icon">+</span>
                </div>
                <div class="section-content" id="distributorsSection">
                    <div class="menu-item" onclick="toggleSubmenu(this, 'PV1E')">
                        <span style="color: #191970;">Распределители с электромагнитным управлением</span>
                        <span class="toggle-icon">+</span>
                    </div>
                    <div class="submenu" id="PV1E">
                        <div class="menu-item" data-pdf="https://www.pemaks.ru/upload/medialibrary/pdf/pemaks/PV1E-32.pdf" data-name="Серия PV1E-32">
                            <u>Серия PV1E-32.</u>&nbsp; Распределители 3/2 Н.З. и Н.О.
                        </div>
                        <div class="menu-item" data-pdf="https://www.pemaks.ru/upload/medialibrary/pdf/pemaks/PV1E-52.pdf" data-name="Серия PV1E-52">
                            <u>Серия PV1E-52.</u>&nbsp; Распределители 5/2 моностабильные
                        </div>
                        <div class="menu-item" data-pdf="https://www.pemaks.ru/upload/medialibrary/pdf/pemaks/PV1E-52D.pdf" data-name="Серия PV1E-52D">
                            <u>Серия PV1E-52D.</u>&nbsp; Распределители 5/2 бистабильные
                        </div>
                        <div class="menu-item" data-pdf="https://www.pemaks.ru/upload/medialibrary/pdf/pemaks/PV1E-53.pdf" data-name="Серия PV1E-53">
                            <u>Серия PV1E-53.</u>&nbsp; Распределители 5/3
                        </div>
                        <div class="menu-item" data-pdf="https://www.pemaks.ru/upload/medialibrary/pdf/pemaks/PV2E-2x32.pdf" data-name="Серия PV2E-2x32">
                            <u>Серия PV2E-2x32.</u>&nbsp; Распределители 2x3/2
                        </div>
                        <div class="menu-item" data-pdf="https://www.pemaks.ru/upload/medialibrary/pdf/pemaks/PV2E-52.pdf" data-name="Серия PV2E-52">
                            <u>Серия PV2E-52.</u>&nbsp; Распределители 5/2 моностабильные
                        </div>
                        <div class="menu-item" data-pdf="https://www.pemaks.ru/upload/medialibrary/pdf/pemaks/PV2E-53.pdf" data-name="Серия PV2E-53">
                            <u>Серия PV2E-53.</u>&nbsp; Распределители 5/3
                        </div>
                    </div>

                    <div class="menu-item" onclick="toggleSubmenu(this, 'ISLAND')">
                        <span style="color: #191970;">Пневмоострова</span>
                        <span class="toggle-icon">+</span>
                    </div>
                    <div class="submenu" id="ISLAND">
                        <div class="menu-item" data-pdf="https://www.pemaks.ru/upload/medialibrary/pdf/pemaks/PV1T.pdf" data-name="Серия PV1T">
                            <u>Серия PV1T.</u>&nbsp; Пневмоостров с многополюсным подключением
                        </div>
                        <div class="menu-item" data-pdf="https://www.pemaks.ru/upload/medialibrary/pdf/pemaks/PV2T.pdf" data-name="Серия PV2T">
                            <u>Серия PV2T.</u>&nbsp; Пневмоостров с подключением FieldBus
                        </div>
                    </div>

                    <div class="menu-item" onclick="toggleSubmenu(this, 'PV3EISO')">
                        <span style="color: #191970;">Распределители электромагнитные по ISO 5599/1</span>
                        <span class="toggle-icon">+</span>
                    </div>
                    <div class="submenu" id="PV3EISO">
                        <div class="menu-item" data-pdf="https://www.pemaks.ru/upload/medialibrary/pdf/pemaks/PV3E-52ISO.pdf" data-name="Серия PV3E-52">
                            <u>Серия PV3E-52.</u>&nbsp; Распределители 5/2 моностабильные
                        </div>
                        <div class="menu-item" data-pdf="https://www.pemaks.ru/upload/medialibrary/pdf/pemaks/PV3E-52DISO.pdf" data-name="Серия PV3E-52D">
                            <u>Серия PV3E-52D.</u>&nbsp; Распределители 5/2 бистабильные
                        </div>
                        <div class="menu-item" data-pdf="https://www.pemaks.ru/upload/medialibrary/pdf/pemaks/PV3E-53ISO.pdf" data-name="Серия PV3E-53">
                            <u>Серия PV3E-53.</u>&nbsp; Распределители 5/3
                        </div>
                    </div>

                    <div class="menu-item" onclick="toggleSubmenu(this, 'PV3EISO2')">
                        <span style="color: #191970;">Распределители пневматические по ISO 5599/1</span>
                        <span class="toggle-icon">+</span>
                    </div>
                    <div class="submenu" id="PV3EISO2">
                        <div class="menu-item" data-pdf="https://www.pemaks.ru/upload/medialibrary/pdf/pemaks/PV3H-52ISO.pdf" data-name="Серия PV3H-52">
                            <u>Серия PV3H-52.</u>&nbsp; Распределители 5/2 моностабильные
                        </div>
                        <div class="menu-item" data-pdf="https://www.pemaks.ru/upload/medialibrary/pdf/pemaks/PV3H-53DISO.pdf" data-name="Серия PV3H-52D">
                            <u>Серия PV3H-52D.</u>&nbsp; Распределители 5/2 бистабильные
                        </div>
                        <div class="menu-item" data-pdf="https://www.pemaks.ru/upload/medialibrary/pdf/pemaks/PV3H-53ISO.pdf" data-name="Серия PV3H-53">
                            <u>Серия PV3H-53.</u>&nbsp; Распределители 5/3
                        </div>
                    </div>

                    <div class="menu-item" onclick="toggleSubmenu(this, 'PV2E')">
                        <span style="color: #191970;">Распределители пневматические</span>
                        <span class="toggle-icon">+</span>
                    </div>
                    <div class="submenu" id="PV2E">
                        <div class="menu-item" data-pdf="https://www.pemaks.ru/upload/medialibrary/pdf/pemaks/PV1H-32.pdf" data-name="Серия PV1H-32">
                            <u>Серия PV1H-32.</u>&nbsp; Распределители 3/2 Н.З. и Н.О.
                        </div>
                        <div class="menu-item" data-pdf="https://www.pemaks.ru/upload/medialibrary/pdf/pemaks/PV1H-52.pdf" data-name="Серия PV1H-52">
                            <u>Серия PV1H-52.</u>&nbsp; Распределители 5/2 моностабильные
                        </div>
                        <div class="menu-item" data-pdf="https://www.pemaks.ru/upload/medialibrary/pdf/pemaks/PV1H-52D.pdf" data-name="Серия PV1H-52D">
                            <u>Серия PV1H-52D.</u>&nbsp; Распределители 5/2 бистабильные
                        </div>
                        <div class="menu-item" data-pdf="https://www.pemaks.ru/upload/medialibrary/pdf/pemaks/PV1H-53.pdf" data-name="Серия PV1H-53">
                            <u>Серия PV1H-53.</u>&nbsp; Распределители 5/3
                        </div>
                    </div>

                    <div class="menu-item" onclick="toggleSubmenu(this, 'PV1E2')">
                        <span style="color: #191970;">Распределители электромагнитные быстродействующие</span>
                        <span class="toggle-icon">+</span>
                    </div>
                    <div class="submenu" id="PV1E2">
                        <div class="menu-item" data-pdf="https://www.pemaks.ru/upload/medialibrary/pdf/pemaks/PVFS-32.pdf" data-name="Серия PVFS-32">
                            <u>Серия PVFS-32.</u>&nbsp; Распределители 3/2 быстродействущие 
                        </div>
                        <div class="menu-item" data-pdf="https://www.pemaks.ru/upload/medialibrary/pdf/pemaks/PV1E-FS.pdf" data-name="Серия PV1E-FS">
                            <u>Серия PV1E-FS.</u> Распределители 3/2 и 5/2 быстродействущие
                        </div>
                    </div>

                    <div class="menu-item" onclick="toggleSubmenu(this, 'namur')">
                        <span style="color: #191970;">Распределители Namur с электроуправлением</span>
                        <span class="toggle-icon">+</span>
                    </div>
                    <div class="submenu" id="namur">
                        <div class="menu-item" data-pdf="https://www.pemaks.ru/upload/medialibrary/pdf/pemaks/PV1EN.pdf" data-name="Серия PV1EN">
                            <u>Серия PV1EN.</u> &nbsp; Распределители 5/2 Namur
                        </div>
                    </div>

                    <div class="menu-item" onclick="toggleSubmenu(this, 'pilot')">
                        <span style="color: #191970;">Распределители электромагнитные с внешним питанием</span>
                        <span class="toggle-icon">+</span>
                    </div>
                    <div class="submenu" id="pilot">
                        <div class="menu-item" data-pdf="https://www.pemaks.ru/upload/medialibrary/pdf/pemaks/PV3E-52.pdf" data-name="Серия PV3E-52">
                            <u>Серия PV3E-52.</u> &nbsp; Распределители 5/2 моностабильные
                        </div>
                        <div class="menu-item" data-pdf="https://www.pemaks.ru/upload/medialibrary/pdf/pemaks/PV3E-52D.pdf" data-name="Серия PV3E-52">
                            <u>Серия PV3E-52.</u> &nbsp; Распределители 5/2 бистабильные
                        </div>
                        <div class="menu-item" data-pdf="https://www.pemaks.ru/upload/medialibrary/pdf/pemaks/PV3E-53.pdf" data-name="Серия PV3E-53">
                            <u>Серия PV3E-53.</u> &nbsp; Распределители 5/3
                        </div>
                    </div>

                    <div class="menu-item" onclick="toggleSubmenu(this, 'hand')">
                        <span style="color: #191970;">Распределители с ручным управлением</span>
                        <span class="toggle-icon">+</span>
                    </div>
                    <div class="submenu" id="hand">
                        <div class="menu-item" data-pdf="https://www.pemaks.ru/upload/medialibrary/pdf/pemaks/PV1MC-32.pdf" data-name="Серия PV1MC-32">
                            <u>Серия PV1MC-32.</u> &nbsp; Распределитель с кнопкой. Функция 3/2
                        </div>
                        <div class="menu-item" data-pdf="https://www.pemaks.ru/upload/medialibrary/pdf/pemaks/PV1MC-52.pdf" data-name="Серия PV1MC-52">
                            <u>Серия PV1MC-52.</u> &nbsp; Распределитель с кнопкой. Функция 5/2
                        </div>
                        <div class="menu-item" data-pdf="https://www.pemaks.ru/upload/medialibrary/pdf/pemaks/PV1MJ-52.pdf" data-name="Серия PV1MJ-52">
                            <u>Серия PV1MJ-52.</u> &nbsp; Распределитель с джойстиком. Функция 5/2
                        </div>
                        <div class="menu-item" data-pdf="https://www.pemaks.ru/upload/medialibrary/pdf/pemaks/PV1MJ-53.pdf" data-name="Серия PV1MJ-53">
                            <u>Серия PV1MJ-53.</u> &nbsp; Распределитель с джойстиком. Функция 5/3
                        </div>
                        <div class="menu-item" data-pdf="https://www.pemaks.ru/upload/medialibrary/pdf/pemaks/PV1MK.pdf" data-name="Серия PV1MK">
                            <u>Серия PV1MK.</u> &nbsp; Функции 4/3 и 4/2
                        </div>
                        <div class="menu-item" data-pdf="https://www.pemaks.ru/upload/medialibrary/pdf/pemaks/PV1M.pdf" data-name="Серия PV1M">
                            <u>Серия PV1M.</u> &nbsp; Плунжерные распределители и принадлежности
                        </div>
                        <div class="menu-item" data-pdf="https://www.pemaks.ru/upload/medialibrary/pdf/pemaks/PV1MP.pdf" data-name="Серия PV1MP">
                            <u>Серия PV1MP.</u> &nbsp; Пневматические педали
                        </div>
                    </div>
                </div>

                <!-- Вакуумная техника -->
                <div class="menu-title" onclick="toggleSection(this, 'vacuumSection')">
                    Вакуумная техника
                    <span class="toggle-icon">+</span>
                </div>
                <div class="section-content" id="vacuumSection">
                    <div class="menu-item" onclick="toggleSubmenu(this, 'Ejectors')">
                        <span style="color: #191970;">Эжекторы</span>
                        <span class="toggle-icon">+</span>
                    </div>
                    <div class="submenu" id="Ejectors">
                        <div class="menu-item" data-pdf="https://www.pemaks.ru/upload/medialibrary/pdf/pemaks/PZ.pdf" data-name="Серия PZE">
                            <u>Серия PZE.</u> &nbsp; Электромагнитные и пневматические эжекторы
                        </div>
                    </div>
                    <div class="menu-item" onclick="toggleSubmenu(this, 'Vakuum')">
                        <span style="color: #191970;">Вакуум-фильтры</span>
                        <span class="toggle-icon">+</span>
                    </div>
                    <div class="submenu" id="Vakuum">
                        <div class="menu-item" data-pdf="https://www.pemaks.ru/upload/medialibrary/pdf/pemaks/PZVF.pdf" data-name="Серия PZVF">
                            <u>Серия PZVF.</u> &nbsp; Фильтры вакуумные
                        </div>
                    </div>
                    <div class="menu-item" onclick="toggleSubmenu(this, 'high')">
                        <span style="color: #191970;">Компенсаторы высоты для вакуумных присосок</span>
                        <span class="toggle-icon">+</span>
                    </div>
                    <div class="submenu" id="high">
                        <div class="menu-item" data-pdf="https://www.pemaks.ru/upload/medialibrary/pdf/pemaks/PZKI.pdf" data-name="Серия PZKI">
                            <u>Серия PZKI.</u> &nbsp; Компенсаторы высоты
                        </div>
                    </div>
                    <div class="menu-item" onclick="toggleSubmenu(this, 'PZVC')">
                        <span style="color: #191970;">Вакуумные присоски</span>
                        <span class="toggle-icon">+</span>
                    </div>
                    <div class="submenu" id="PZVC">
                        <div class="menu-item" data-pdf="https://www.pemaks.ru/upload/medialibrary/pdf/pemaks/PZVC.pdf" data-name="Серия PZVC">
                            <u>Серия PZVC.</u> &nbsp; Присоски
                        </div>
                    </div>
                </div>

                <!-- Трубки, фитинги -->
                <div class="menu-title" onclick="toggleSection(this, 'tubesFittingsSection')">
                    Трубки, фитинги
                    <span class="toggle-icon">+</span>
                </div>
                <div class="section-content" id="tubesFittingsSection">
                        <div class="menu-item" data-pdf="https://www.pemaks.ru/upload/medialibrary/pdf/pemaks/Фитинги.pdf" data-name="Пневматические фитинги">
                            <u>Пневматические фитинги</u>
                        </div>
                        <div class="menu-item" data-pdf="https://www.pemaks.ru/upload/medialibrary/pdf/pemaks/Дроссели, клапаны, глушители.pdf" data-name="Дроссели, клапаны, глушители">
                            <u>Дроссели, клапаны, глушители</u>
                        </div>
                        <div class="menu-item" data-pdf="https://www.pemaks.ru/upload/medialibrary/pdf/pemaks/Трубки.pdf" data-name="Пневматические трубки и принадлежности">
                            <u>Пневматические трубки и принадлежности</u>
                        </div>
                    

                </div>


            </div>

            
            <div class="main-content">
                <div class="pdf-controls">
                    <div class="zoom-controls">
                        <button id="zoom-out">-</button>
                        <span id="zoom-percent" class="zoom-percent">100%</span>
                        <button id="zoom-in">+</button>
                    </div>
                </div>
                
                <div class="pdf-viewer-container" id="pdf-viewer">
                    <div id="loading" class="loading">
                        <div class="spinner"></div>
                        Загрузка документа...
                    </div>
                    <div id="error-message" class="error-message" style="display: none;"></div>
                </div>
                
                <div class="page-indicator">
                    Страница <span id="current-page">1</span> из <span id="total-pages">0</span>
                </div>
            </div>
        </div>
    </div>

    <script>
        // Инициализация PDF.js с актуальной версией
        pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.4.120/pdf.worker.min.js';
        
        const pdfViewer = document.getElementById('pdf-viewer');
        const loadingDiv = document.getElementById('loading');
        const errorDiv = document.getElementById('error-message');
        const zoomPercent = document.getElementById('zoom-percent');
        const currentPageSpan = document.getElementById('current-page');
        const totalPagesSpan = document.getElementById('total-pages');
        const sidebar = document.getElementById('sidebar');
        const mobileMenuBtn = document.getElementById('mobileMenuBtn');
        const searchInput = document.getElementById('searchInput');
        const searchResultsInfo = document.getElementById('searchResultsInfo');
        const resultsCount = document.getElementById('resultsCount');
        const downloadBtn = document.getElementById('download-btn');
        const printBtn = document.getElementById('print-btn');
        const currentPdfName = document.getElementById('current-pdf-name');
        
        let pdfDoc = null;
        let scale = 1.0;
        let currentPageNum = 1;
        let isRendering = false;
        let renderTimeout = null;
        let pagesRendering = [];
        let isSearching = false;
        let currentPdfUrl = '';
        let currentPdfFileName = '';
        let currentScrollPosition = 0;
        
        // Сохраняем позицию прокрутки
        pdfViewer.addEventListener('scroll', function() {
            currentScrollPosition = pdfViewer.scrollTop;
        });
        
        // Проверка мобильного устройства
        function isMobile() {
            return window.innerWidth < 768;
        }
        
        // Установка начального масштаба в зависимости от устройства
        function setInitialScale() {
            const width = window.innerWidth;
            if (width >= 1600) {
                return 2.0; // 250% для больших экранов
            } else if (width >= 1400) {
                return 1.5; // 200% для десктопов
            } else if (width >= 1100) {
                return 1.0; // 150% для ноутбуков
            } else if (width >= 768) {
                return 1.0; // 100% для планшетов
            } else if (width >= 576) {
                return 0.8; // 80% для больших телефонов
            } else {
                return 0.6; // 60% для маленьких телефонов
            }
        }
        
        // Функция для обновления масштаба при изменении размера окна
        function updateScaleOnResize() {
            const newScale = setInitialScale();
            updateScale(newScale);
            scale = newScale;
            zoomPercent.textContent = `${Math.round(scale * 100)}%`;
            if (pdfDoc) {
                updateAllPagesScale();
            }
        }
        
        // Инициализация меню для мобильных устройств
        function initMobileMenu() {
            if (isMobile()) {
                sidebar.classList.add('hidden');
                mobileMenuBtn.style.display = 'block';
            } else {
                sidebar.classList.remove('hidden');
                mobileMenuBtn.style.display = 'none';
            }
        }
        
        // Переключение меню на мобильных устройствах
        function toggleMobileMenu() {
            sidebar.classList.toggle('hidden');
        }
        
        // Обработчик изменения размера окна
        window.addEventListener('resize', function() {
            initMobileMenu();
            updateScaleOnResize();
        });
        
        // Инициализация при загрузке
        initMobileMenu();
        mobileMenuBtn.addEventListener('click', toggleMobileMenu);

        // Функция для загрузки PDF
        async function loadPdf(url, name) {
        try {
        // Показать индикатор загрузки
        loadingDiv.style.display = 'flex';
        errorDiv.style.display = 'none';
        pdfViewer.innerHTML = '';
        pdfViewer.appendChild(loadingDiv);
        
        // Очистить предыдущий PDF
        if (pdfDoc) {
            cancelAllRendering();
            pdfDoc = null;
        }

        // Загрузить PDF с обработкой CORS
        pdfDoc = await pdfjsLib.getDocument({
            url: url,
            withCredentials: false
        }).promise;

        totalPagesSpan.textContent = pdfDoc.numPages;
        currentPageNum = 1;
        currentPageSpan.textContent = currentPageNum;
        
        // Установить масштаб
        if (name === 'Фитинги') {
            scale = 1; // 100%
        } else {
            scale = setInitialScale();
        }
        zoomPercent.textContent = `${Math.round(scale * 100)}%`;

        // Обработчик кликов по пунктам меню с PDF
        document.querySelectorAll('.submenu .menu-item, .section-content .menu-item').forEach(item => {
        item.addEventListener('click', function() {
        // Удаляем активный класс у всех пунктов
        document.querySelectorAll('.menu-item').forEach(i => {
            i.classList.remove('active');
        });
        // Добавляем активный класс текущему пункту
        this.classList.add('active');
        // Загружаем PDF
        const pdfUrl = this.getAttribute('data-pdf');
        const pdfName = this.getAttribute('data-name');
        loadPdf(pdfUrl, pdfName);
        });
        });

        // Сохранить информацию о текущем PDF
        currentPdfUrl = url;
        currentPdfFileName = name + '.pdf';
        currentPdfName.textContent = name;
        downloadBtn.style.display = 'flex';
        printBtn.style.display = 'flex';
        
        // Отрендерить все страницы
        await renderAllPages();
        
        // На мобильных устройствах закрыть меню после выбора файла
        if (isMobile()) {
            sidebar.classList.add('hidden');
        }
        
        } catch (error) {
            console.error('Ошибка загрузка PDF:', error);
            showError(getErrorMessage(error));
        } finally {
            loadingDiv.style.display = 'none';
        }
    }

        // Функция для скачивания PDF
        function downloadPdf() {
            if (!currentPdfUrl) return;
            
            // Анимация кнопки
            downloadBtn.classList.add('pulse');
            setTimeout(() => downloadBtn.classList.remove('pulse'), 500);
            
            // Создаем временную ссылку для скачивания
            const link = document.createElement('a');
            link.href = currentPdfUrl;
            link.download = currentPdfFileName;
            document.body.appendChild(link);
            link.click();
            document.body.removeChild(link);
        }

        // Функция для печати PDF
        function printPdf() {
            if (!currentPdfUrl) return;
            
            // Анимация кнопки
            printBtn.classList.add('pulse');
            setTimeout(() => printBtn.classList.remove('pulse'), 500);
            
            // Открываем PDF в новом окне для печати
            const printWindow = window.open(currentPdfUrl, '_blank');
            if (printWindow) {
                printWindow.onload = function() {
                    printWindow.print();
                };
            }
        }

        // Отменить все текущие рендеринги
        function cancelAllRendering() {
            pagesRendering.forEach(task => {
                if (task && typeof task.cancel === 'function') {
                    task.cancel();
                }
            });
            pagesRendering = [];
        }

        // Функция для отложенного обновления масштаба
        function debouncedUpdateScale() {
            if (renderTimeout) {
                clearTimeout(renderTimeout);
            }
            
            renderTimeout = setTimeout(() => {
                updateAllPagesScale();
                renderTimeout = null;
            }, 100);
        }

        // Отрендерить все страницы (только при первоначальной загрузке)
        async function renderAllPages() {
            if (!pdfDoc || isRendering) return;
            
            isRendering = true;
            cancelAllRendering();
            
            try {
                // Создаем контейнеры для всех страниц
                pdfViewer.innerHTML = '';
                
                for (let i = 1; i <= pdfDoc.numPages; i++) {
                    const pageContainer = document.createElement('div');
                    pageContainer.className = 'pdf-page-container';
                    pageContainer.id = `page-${i}`;
                    pdfViewer.appendChild(pageContainer);
                    
                    const page = await pdfDoc.getPage(i);
                    const viewport = page.getViewport({ scale: scale });
                    
                    const canvas = document.createElement('canvas');
                    const context = canvas.getContext('2d');
                    
                    // Установка размеров canvas с учетом плотности пикселей
                    const outputScale = window.devicePixelRatio || 1;
                    canvas.width = Math.floor(viewport.width * outputScale);
                    canvas.height = Math.floor(viewport.height * outputScale);
                    canvas.style.width = Math.floor(viewport.width) + "px";
                    canvas.style.height = Math.floor(viewport.height) + "px";
                    
                    canvas.className = 'pdf-page';
                    pageContainer.appendChild(canvas);
                    
                    const renderTask = page.render({
                        canvasContext: context,
                        viewport: viewport,
                        transform: outputScale !== 1 ? [outputScale, 0, 0, outputScale, 0, 0] : null
                    });
                    
                    pagesRendering.push(renderTask);
                    
                    await renderTask.promise;
                }
                
                // Восстановить позицию прокрутки после рендеринга
                setTimeout(() => {
                    pdfViewer.scrollTop = currentScrollPosition;
                }, 50);
                
            } catch (error) {
                if (error.name !== 'RenderingCancelledException') {
                    console.error('Ошибка рендеринга страниц:', error);
                    showError('Ошибка отображения страниц');
                }
            } finally {
                isRendering = false;
                loadingDiv.style.display = 'none';
            }
        }

        // Обновить масштаб всех страниц без пересоздания
        async function updateAllPagesScale() {
            if (!pdfDoc || isRendering) return;
            
            isRendering = true;
            cancelAllRendering();
            
            try {
                // Сохраняем текущую позицию прокрутки
                const scrollTopBefore = pdfViewer.scrollTop;
                
                for (let i = 1; i <= pdfDoc.numPages; i++) {
                    const pageContainer = document.getElementById(`page-${i}`);
                    if (!pageContainer) continue;
                    
                    const canvas = pageContainer.querySelector('canvas');
                    if (!canvas) continue;
                    
                    const page = await pdfDoc.getPage(i);
                    const viewport = page.getViewport({ scale: scale });
                    
                    // Обновляем размеры canvas
                    const outputScale = window.devicePixelRatio || 1;
                    canvas.width = Math.floor(viewport.width * outputScale);
                    canvas.height = Math.floor(viewport.height * outputScale);
                    canvas.style.width = Math.floor(viewport.width) + "px";
                    canvas.style.height = Math.floor(viewport.height) + "px";
                    
                    const context = canvas.getContext('2d');
                    context.clearRect(0, 0, canvas.width, canvas.height);
                    
                    const renderTask = page.render({
                        canvasContext: context,
                        viewport: viewport,
                        transform: outputScale !== 1 ? [outputScale, 0, 0, outputScale, 0, 0] : null
                    });
                    
                    pagesRendering.push(renderTask);
                    await renderTask.promise;
                }
                
                // Восстанавливаем позицию прокрутки
                setTimeout(() => {
                    pdfViewer.scrollTop = scrollTopBefore;
                }, 50);
                
            } catch (error) {
                if (error.name !== 'RenderingCancelledException') {
                    console.error('Ошибка обновления масштаба:', error);
                    showError('Ошибка обновления масштаба');
                }
            } finally {
                isRendering = false;
            }
        }

        // Обновить масштаб
        function updateScale(newScale) {
            // Ограничиваем масштаб
            newScale = Math.max(0.2, Math.min(3.0, newScale));
            
            // Округляем до одного знака после запятой
            newScale = Math.round(newScale * 10) / 10;
            
            if (scale !== newScale) {
                scale = newScale;
                zoomPercent.textContent = `${Math.round(scale * 100)}%`;
                if (pdfDoc) {
                    debouncedUpdateScale();
                }
            }
        }

        // Показать ошибку
        function showError(message) {
            errorDiv.textContent = message;
            errorDiv.style.display = 'block';
            loadingDiv.style.display = 'none';
        }

        // Получить понятное сообщение об ошибке
        function getErrorMessage(error) {
            if (error.message.includes('Failed to fetch')) {
                return 'Не удалось загрузить файл. Проверьте: 1) наличие файла по указанному пути, 2) настройки CORS на сервере';
            } else if (error.message.includes('Invalid PDF structure')) {
                return 'Некорректная структура PDF файла. Возможно, файл поврежден.';
            } else if (error.message.includes('Password required')) {
                return 'PDF файл защищен паролем.';
            }
            return error.message || 'Неизвестная ошибка при загрузке PDF';
        }

        // Переключение секций (главных заголовков)
        function toggleSection(element, targetId) {
            const sectionContent = document.getElementById(targetId);
            const icon = element.querySelector('.toggle-icon');
            
            // Если мы в режиме поиска, не позволяем переключать секции
            if (isSearching) return;
            
            sectionContent.classList.toggle('show');
            if (sectionContent.classList.contains('show')) {
                icon.textContent = '-';
            } else {
                icon.textContent = '+';
            }
        }

        // Переключение подменю
        function toggleSubmenu(element, targetId) {
            const submenu = document.getElementById(targetId);
            const icon = element.querySelector('.toggle-icon');
            
            // Если мы в режиме поиска, не позволяем переключать подменю
            if (isSearching) return;
            
            submenu.classList.toggle('show');
            if (submenu.classList.contains('show')) {
                icon.textContent = '-';
            } else {
                icon.textContent = '+';
            }
        }

        // Обработчик кликов по пунктам меню с PDF
        document.querySelectorAll('.submenu .menu-item').forEach(item => {
            item.addEventListener('click', function() {
                // Удаляем активный класс у всех пунктов
                document.querySelectorAll('.menu-item').forEach(i => {
                    i.classList.remove('active');
                });
                // Добавляем активный класс текущему пункту
                this.classList.add('active');
                // Загружаем PDF
                const pdfUrl = this.getAttribute('data-pdf');
                const pdfName = this.getAttribute('data-name');
                loadPdf(pdfUrl, pdfName);
            });
        });

        // Поиск по меню - ИСПРАВЛЕННАЯ ФУНКЦИЯ
        searchInput.addEventListener('input', function() {
            const searchTerm = this.value.toLowerCase().trim();
            let foundCount = 0;
            
            // Удаляем класс search-hidden со всех элементов
            document.querySelectorAll('.search-hidden').forEach(el => {
                el.classList.remove('search-hidden');
            });
            
            if (searchTerm === '') {
                // Если поисковой запрос пустой, показываем все элементы
                document.querySelectorAll('.menu-item, .submenu, .menu-title, .section-content').forEach(item => {
                    item.classList.remove('search-hidden');
                });
                
                // Сворачиваем все подменю и секции
                document.querySelectorAll('.submenu, .section-content').forEach(element => {
                    element.classList.remove('show');
                    const parentItem = element.previousElementSibling;
                    if (parentItem) {
                        const icon = parentItem.querySelector('.toggle-icon');
                        if (icon) {
                            icon.textContent = '+';
                        }
                    }
                });
                
                searchResultsInfo.style.display = 'none';
                isSearching = false;
                return;
            }
            
            isSearching = true;
            
            // Сначала скрываем все элементы меню
            document.querySelectorAll('.menu-item, .submenu, .menu-title, .section-content').forEach(item => {
                item.classList.add('search-hidden');
            });
            
            // Ищем совпадения и показываем соответствующие элементы
            document.querySelectorAll('.menu-item').forEach(item => {
                const text = item.textContent.toLowerCase();
                if (text.includes(searchTerm)) {
                    item.classList.remove('search-hidden');
                    foundCount++;
                    
                    // Показываем родительские элементы и раскрываем подменю
                    let parent = item.closest('.submenu');
                    while (parent) {
                        parent.classList.remove('search-hidden');
                        parent.classList.add('show');
                        
                        const parentItem = parent.previousElementSibling;
                        if (parentItem && parentItem.classList.contains('menu-item')) {
                            parentItem.classList.remove('search-hidden');
                            const icon = parentItem.querySelector('.toggle-icon');
                            if (icon) {
                                icon.textContent = '-';
                            }
                        }
                        
                        // Показываем заголовок раздела
                        const sectionTitle = parent.closest('.submenu') ? 
                            parent.closest('.submenu').previousElementSibling.previousElementSibling : 
                            parent.previousElementSibling.previousElementSibling;
                        
                        if (sectionTitle && sectionTitle.classList.contains('menu-title')) {
                            sectionTitle.classList.remove('search-hidden');
                        }
                        
                        parent = parent.parentElement.closest('.submenu');
                    }
                    
                    // Показываем заголовок раздела для элементов верхнего уровня
                    const sectionTitle = item.closest('.submenu') ? 
                        item.closest('.submenu').previousElementSibling.previousElementSibling : 
                        item.previousElementSibling;
                    
                    if (sectionTitle && sectionTitle.classList.contains('menu-title')) {
                        sectionTitle.classList.remove('search-hidden');
                    }
                    
                    // Показываем родительскую секцию
                    const sectionContent = item.closest('.section-content');
                    if (sectionContent) {
                        sectionContent.classList.remove('search-hidden');
                        sectionContent.classList.add('show');
                        
                        const sectionTitle = sectionContent.previousElementSibling;
                        if (sectionTitle && sectionTitle.classList.contains('menu-title')) {
                            sectionTitle.classList.remove('search-hidden');
                            const icon = sectionTitle.querySelector('.toggle-icon');
                            if (icon) {
                                icon.textContent = '-';
                            }
                        }
                    }
                }
            });
            
            // Показываем информацию о результатах поиска
            if (foundCount > 0) {
                resultsCount.textContent = foundCount;
                searchResultsInfo.style.display = 'block';
                searchResultsInfo.classList.remove('search-hidden');
            } else {
                searchResultsInfo.style.display = 'none';
            }
        });

        // Автоматическая загрузка первого PDF при открытии страницы
        document.addEventListener('DOMContentLoaded', function() {
            const firstPdfItem = document.querySelector('.menu-item[data-pdf]');
            if (firstPdfItem) {
                firstPdfItem.classList.add('active');
                const pdfUrl = firstPdfItem.getAttribute('data-pdf');
                const pdfName = firstPdfItem.getAttribute('data-name');
                loadPdf(pdfUrl, pdfName);
            }
        });

        // Обработчики событий
        document.getElementById('zoom-out').addEventListener('click', () => updateScale(scale - 0.1));
        document.getElementById('zoom-in').addEventListener('click', () => updateScale(scale + 0.1));
        downloadBtn.addEventListener('click', downloadPdf);
        printBtn.addEventListener('click', printPdf);
    </script>
</body>
</html>