frontend/catalog.html - master - varsl/HTML-CSS

frontend/catalog.html
1 014 строк43 KB
varsl
Добавление файлов фронтеда
21 дек 2025, 23:11
21 дек 2025, 23:117b4bf01
<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Каталог животных - Зоопарк Дикий Мир</title>
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/animations.css">
    <link rel="stylesheet" href="libs/all.min.css">
    <style>
        .catalog-section {
            padding: 2rem 0 4rem;
        }

        .catalog-filters {
            background: var(--white);
            border-radius: var(--border-radius);
            padding: 2rem;
            box-shadow: var(--shadow);
            margin-bottom: 2rem;
        }

        .filter-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 1.5rem;
        }

        .filter-tabs {
            display: flex;
            gap: 1rem;
            margin-bottom: 1.5rem;
            flex-wrap: wrap;
        }

        .filter-tab {
            padding: 0.5rem 1rem;
            background: var(--bg-color);
            border: none;
            border-radius: 50px;
            cursor: pointer;
            font-size: 0.9rem;
            transition: var(--transition);
        }

        .filter-tab:hover,
        .filter-tab.active {
            background: var(--primary-color);
            color: var(--white);
        }

        .filter-options {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 1.5rem;
            margin-top: 1.5rem;
        }

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

        .filter-group h4 {
            margin-bottom: 0.5rem;
            color: var(--text-color);
        }

        .filter-checkboxes {
            display: flex;
            flex-direction: column;
            gap: 0.5rem;
        }

        .filter-checkbox {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            cursor: pointer;
        }

        .filter-checkbox input {
            width: auto;
        }

        .filter-slider {
            margin-top: 0.5rem;
        }

        .slider-values {
            display: flex;
            justify-content: space-between;
            margin-top: 0.5rem;
            font-size: 0.9rem;
            color: var(--text-light);
        }

        .catalog-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            gap: 2rem;
            margin-top: 2rem;
        }

        .animal-card-catalog {
            background: var(--white);
            border-radius: var(--border-radius);
            overflow: hidden;
            box-shadow: var(--shadow);
            transition: var(--transition);
            position: relative;
        }

        .animal-card-catalog:hover {
            transform: translateY(-10px);
            box-shadow: 0 12px 24px rgba(0,0,0,0.15);
        }

        .animal-badge {
            position: absolute;
            top: 1rem;
            right: 1rem;
            background: var(--primary-color);
            color: var(--white);
            padding: 0.25rem 0.75rem;
            border-radius: 50px;
            font-size: 0.8rem;
            z-index: 1;
        }

        .animal-image {
            height: 200px;
            overflow: hidden;
            position: relative;
        }

        .animal-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.5s;
        }

        .animal-card-catalog:hover .animal-image img {
            transform: scale(1.1);
        }

        .animal-overlay {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            background: linear-gradient(transparent, rgba(0,0,0,0.7));
            padding: 1rem;
            color: var(--white);
        }

        .animal-overlay h3 {
            font-size: 1.3rem;
            margin-bottom: 0.25rem;
        }

        .animal-overlay .scientific {
            font-size: 0.9rem;
            opacity: 0.8;
        }

        .animal-details {
            padding: 1.5rem;
        }

        .animal-meta {
            display: flex;
            gap: 1rem;
            margin-bottom: 1rem;
            font-size: 0.9rem;
        }

        .meta-item {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            color: var(--text-light);
        }

        .animal-description {
            margin-bottom: 1.5rem;
            line-height: 1.5;
        }

        .animal-actions {
            display: flex;
            gap: 0.5rem;
        }

        .catalog-controls {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin: 2rem 0;
            padding: 1rem;
            background: var(--white);
            border-radius: var(--border-radius);
            box-shadow: var(--shadow);
        }

        .sort-controls {
            display: flex;
            align-items: center;
            gap: 1rem;
        }

        .view-controls {
            display: flex;
            gap: 0.5rem;
        }

        .view-btn {
            width: 40px;
            height: 40px;
            border-radius: 6px;
            border: 1px solid #ddd;
            background: var(--white);
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: var(--transition);
        }

        .view-btn:hover,
        .view-btn.active {
            background: var(--primary-color);
            color: var(--white);
            border-color: var(--primary-color);
        }

        .pagination {
            display: flex;
            justify-content: center;
            gap: 0.5rem;
            margin-top: 3rem;
        }

        .page-btn {
            width: 40px;
            height: 40px;
            border-radius: 6px;
            border: 1px solid #ddd;
            background: var(--white);
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: var(--transition);
        }

        .page-btn:hover,
        .page-btn.active {
            background: var(--primary-color);
            color: var(--white);
            border-color: var(--primary-color);
        }

        .page-btn.disabled {
            opacity: 0.5;
            cursor: not-allowed;
        }

        .no-results {
            text-align: center;
            padding: 4rem 2rem;
            background: var(--white);
            border-radius: var(--border-radius);
            box-shadow: var(--shadow);
        }

        .no-results i {
            font-size: 4rem;
            color: var(--text-light);
            margin-bottom: 1rem;
        }

        @media (max-width: 768px) {
            .catalog-grid {
                grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
            }

            .filter-options {
                grid-template-columns: 1fr;
            }

            .catalog-controls {
                flex-direction: column;
                gap: 1rem;
                align-items: stretch;
            }

            .sort-controls {
                flex-direction: column;
                align-items: stretch;
            }
        }

        @media (max-width: 480px) {
            .catalog-grid {
                grid-template-columns: 1fr;
            }

            .animal-actions {
                flex-direction: column;
            }

            .animal-actions .btn {
                width: 100%;
            }
        }
    </style>
</head>
<body>
<div class="page-wrapper">
    <header class="header">
        <nav class="navbar container">
            <div class="logo">
                <i class="fas fa-paw"></i>
                <span>Зоопарк Дикий Мир</span>
            </div>
            <button class="menu-toggle" id="menuToggle">
                <i class="fas fa-bars"></i>
            </button>
            <ul class="nav-menu" id="navMenu">
                <li><a href="index.html"><i class="fas fa-home"></i> Главная</a></li>
                <li><a href="about.html"><i class="fas fa-info-circle"></i> О нас</a></li>
                <li><a href="animals.html"><i class="fas fa-dove"></i> Животные</a></li>
                <li><a href="catalog.html" class="active"><i class="fas fa-th-list"></i> Каталог</a></li>
                <li><a href="prices.html"><i class="fas fa-tag"></i> Цены</a></li>
                <li><a href="ticket.html"><i class="fas fa-ticket-alt"></i> Билеты</a></li>
                <li><a href="excursion.html"><i class="fas fa-calendar-alt"></i> Экскурсии</a></li>
                <li><a href="contacts.html"><i class="fas fa-address-book"></i> Контакты</a></li>
                <li><a href="map.html"><i class="fas fa-map-marked-alt"></i> Карта</a></li>
                <li class="auth-buttons">
                    <a href="login.html" class="btn btn-outline"><i class="fas fa-sign-in-alt"></i> Вход</a>
                    <a href="register.html" class="btn btn-primary"><i class="fas fa-user-plus"></i> Регистрация</a>
                </li>
            </ul>
        </nav>
    </header>

    <main class="main-content">
        <section class="page-header">
            <div class="container">
                <h1 class="page-title">Каталог животных</h1>
                <p class="page-subtitle">Изучите нашу богатую коллекцию животных со всего мира</p>
            </div>
        </section>

        <section class="catalog-section">
            <div class="container">
                <div class="catalog-filters">
                    <div class="filter-header">
                        <h2>Фильтры</h2>
                        <button class="btn btn-small btn-outline" id="resetFilters">
                            <i class="fas fa-redo"></i> Сбросить фильтры
                        </button>
                    </div>

                    <div class="filter-tabs">
                        <button class="filter-tab active" data-filter="all">Все животные</button>
                        <button class="filter-tab" data-filter="mammals">Млекопитающие</button>
                        <button class="filter-tab" data-filter="birds">Птицы</button>
                        <button class="filter-tab" data-filter="reptiles">Рептилии</button>
                        <button class="filter-tab" data-filter="fish">Рыбы</button>
                        <button class="filter-tab" data-filter="endangered">Исчезающие виды</button>
                        <button class="filter-tab" data-filter="new">Новые поступления</button>
                    </div>

                    <div class="search-box" style="margin-bottom: 1.5rem;">
                        <i class="fas fa-search"></i>
                        <input type="text" id="catalogSearch" placeholder="Поиск по названию, виду или описанию...">
                    </div>

                    <div class="filter-options">
                        <div class="filter-group">
                            <h4>Среда обитания</h4>
                            <div class="filter-checkboxes">
                                <label class="filter-checkbox">
                                    <input type="checkbox" name="habitat" value="savanna">
                                    <span>Саванна</span>
                                </label>
                                <label class="filter-checkbox">
                                    <input type="checkbox" name="habitat" value="forest">
                                    <span>Лес</span>
                                </label>
                                <label class="filter-checkbox">
                                    <input type="checkbox" name="habitat" value="jungle">
                                    <span>Джунгли</span>
                                </label>
                                <label class="filter-checkbox">
                                    <input type="checkbox" name="habitat" value="aquatic">
                                    <span>Водная</span>
                                </label>
                                <label class="filter-checkbox">
                                    <input type="checkbox" name="habitat" value="arctic">
                                    <span>Арктика</span>
                                </label>
                            </div>
                        </div>

                        <div class="filter-group">
                            <h4>Питание</h4>
                            <div class="filter-checkboxes">
                                <label class="filter-checkbox">
                                    <input type="checkbox" name="diet" value="carnivore">
                                    <span>Хищник</span>
                                </label>
                                <label class="filter-checkbox">
                                    <input type="checkbox" name="diet" value="herbivore">
                                    <span>Травоядное</span>
                                </label>
                                <label class="filter-checkbox">
                                    <input type="checkbox" name="diet" value="omnivore">
                                    <span>Всеядное</span>
                                </label>
                            </div>
                        </div>

                        <div class="filter-group">
                            <h4>Размер</h4>
                            <div class="filter-slider">
                                <input type="range" id="sizeRange" min="0" max="100" value="100" class="slider">
                                <div class="slider-values">
                                    <span>Маленькие</span>
                                    <span id="sizeValue">Все размеры</span>
                                    <span>Крупные</span>
                                </div>
                            </div>
                        </div>

                        <div class="filter-group">
                            <h4>Статус сохранения</h4>
                            <div class="filter-checkboxes">
                                <label class="filter-checkbox">
                                    <input type="checkbox" name="conservation" value="lc">
                                    <span>Вызывающие наименьшие опасения</span>
                                </label>
                                <label class="filter-checkbox">
                                    <input type="checkbox" name="conservation" value="vu">
                                    <span>Уязвимые</span>
                                </label>
                                <label class="filter-checkbox">
                                    <input type="checkbox" name="conservation" value="en">
                                    <span>Вымирающие</span>
                                </label>
                                <label class="filter-checkbox">
                                    <input type="checkbox" name="conservation" value="cr">
                                    <span>На грани исчезновения</span>
                                </label>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="catalog-controls">
                    <div class="sort-controls">
                        <span>Сортировка:</span>
                        <select id="sortSelect" class="sort-select">
                            <option value="name_asc">По названию (А-Я)</option>
                            <option value="name_desc">По названию (Я-А)</option>
                            <option value="size_asc">По размеру (маленькие → большие)</option>
                            <option value="size_desc">По размеру (большие → маленькие)</option>
                            <option value="popular">По популярности</option>
                            <option value="newest">Сначала новые</option>
                        </select>
                    </div>

                    <div class="results-count">
                        <span id="resultsCount">Найдено: 0 животных</span>
                    </div>

                    <div class="view-controls">
                        <button class="view-btn active" data-view="grid" title="Сетка">
                            <i class="fas fa-th-large"></i>
                        </button>
                        <button class="view-btn" data-view="list" title="Список">
                            <i class="fas fa-list"></i>
                        </button>
                    </div>
                </div>

                <div class="catalog-grid" id="catalogGrid">
                    <div class="animal-card-catalog">
                        <div class="animal-badge">
                            Новое
                        </div>
                        <div class="animal-image">
                            <img src="assets/images/lion.jpg" alt="Лев">
                            <div class="animal-overlay">
                                <h3>Лев</h3>
                                <p class="scientific">Panthera leo</p>
                            </div>
                        </div>
                        <div class="animal-details">
                            <div class="animal-meta">
                                    <span class="meta-item">
                                        <i class="fas fa-paw"></i>
                                        Млекопитающее
                                    </span>
                                <span class="meta-item">
                                        <i class="fas fa-home"></i>
                                        Саванна
                                    </span>
                            </div>
                            <div class="animal-description">
                                Крупная кошка, известная как "царь зверей". Социальные животные, живут в прайдах.
                            </div>
                            <div class="animal-actions">
                                <button class="btn btn-small btn-primary" onclick="window.location.href='animals.html#lion'">
                                    <i class="fas fa-binoculars"></i> Подробнее
                                </button>
                                <button class="btn btn-small btn-outline favorite-btn">
                                    <i class="far fa-heart"></i>
                                </button>
                                <button class="btn btn-small btn-outline compare-btn">
                                    <i class="fas fa-balance-scale"></i>
                                </button>
                            </div>
                        </div>
                    </div>

                    <div class="animal-card-catalog">
                        <div class="animal-badge endangered">
                            Исчезающий
                        </div>
                        <div class="animal-image">
                            <img src="assets/images/elephant.jpg" alt="Слон">
                            <div class="animal-overlay">
                                <h3>Африканский слон</h3>
                                <p class="scientific">Loxodonta africana</p>
                            </div>
                        </div>
                        <div class="animal-details">
                            <div class="animal-meta">
                                    <span class="meta-item">
                                        <i class="fas fa-paw"></i>
                                        Млекопитающее
                                    </span>
                                <span class="meta-item">
                                        <i class="fas fa-home"></i>
                                        Саванна, лес
                                    </span>
                            </div>
                            <div class="animal-description">
                                Крупнейшее наземное животное. Обладает отличной памятью и сложной социальной структурой.
                            </div>
                            <div class="animal-actions">
                                <button class="btn btn-small btn-primary" onclick="window.location.href='animals.html#elephant'">
                                    <i class="fas fa-binoculars"></i> Подробнее
                                </button>
                                <button class="btn btn-small btn-outline favorite-btn">
                                    <i class="far fa-heart"></i>
                                </button>
                                <button class="btn btn-small btn-outline compare-btn">
                                    <i class="fas fa-balance-scale"></i>
                                </button>
                            </div>
                        </div>
                    </div>

                    <div class="animal-card-catalog">
                        <div class="animal-badge">
                            Популярное
                        </div>
                        <div class="animal-image">
                            <img src="assets/images/panda.jpg" alt="Панда">
                            <div class="animal-overlay">
                                <h3>Большая панда</h3>
                                <p class="scientific">Ailuropoda melanoleuca</p>
                            </div>
                        </div>
                        <div class="animal-details">
                            <div class="animal-meta">
                                    <span class="meta-item">
                                        <i class="fas fa-paw"></i>
                                        Млекопитающее
                                    </span>
                                <span class="meta-item">
                                        <i class="fas fa-home"></i>
                                        Бамбуковые леса
                                    </span>
                            </div>
                            <div class="animal-description">
                                Символ Китая и охраны природы. Проводят большую часть дня за едой (99% бамбук).
                            </div>
                            <div class="animal-actions">
                                <button class="btn btn-small btn-primary" onclick="window.location.href='animals.html#panda'">
                                    <i class="fas fa-binoculars"></i> Подробнее
                                </button>
                                <button class="btn btn-small btn-outline favorite-btn">
                                    <i class="far fa-heart"></i>
                                </button>
                                <button class="btn btn-small btn-outline compare-btn">
                                    <i class="fas fa-balance-scale"></i>
                                </button>
                            </div>
                        </div>
                    </div>

                    <div class="animal-card-catalog">
                        <div class="animal-image">
                            <img src="assets/images/tiger.jpg" alt="Тигр">
                            <div class="animal-overlay">
                                <h3>Амурский тигр</h3>
                                <p class="scientific">Panthera tigris altaica</p>
                            </div>
                        </div>
                        <div class="animal-details">
                            <div class="animal-meta">
                                    <span class="meta-item">
                                        <i class="fas fa-paw"></i>
                                        Млекопитающее
                                    </span>
                                <span class="meta-item">
                                        <i class="fas fa-home"></i>
                                        Тайга
                                    </span>
                            </div>
                            <div class="animal-description">
                                Самый крупный представитель семейства кошачьих. Отличный охотник и пловец.
                            </div>
                            <div class="animal-actions">
                                <button class="btn btn-small btn-primary" onclick="window.location.href='animals.html#tiger'">
                                    <i class="fas fa-binoculars"></i> Подробнее
                                </button>
                                <button class="btn btn-small btn-outline favorite-btn">
                                    <i class="far fa-heart"></i>
                                </button>
                                <button class="btn btn-small btn-outline compare-btn">
                                    <i class="fas fa-balance-scale"></i>
                                </button>
                            </div>
                        </div>
                    </div>

                    <div class="animal-card-catalog">
                        <div class="animal-image">
                            <img src="assets/images/giraffe.jpg" alt="Жираф">
                            <div class="animal-overlay">
                                <h3>Жираф</h3>
                                <p class="scientific">Giraffa camelopardalis</p>
                            </div>
                        </div>
                        <div class="animal-details">
                            <div class="animal-meta">
                                    <span class="meta-item">
                                        <i class="fas fa-paw"></i>
                                        Млекопитающее
                                    </span>
                                <span class="meta-item">
                                        <i class="fas fa-home"></i>
                                        Саванна
                                    </span>
                            </div>
                            <div class="animal-description">
                                Самое высокое наземное животное. Длинная шея помогает доставать листья с деревьев.
                            </div>
                            <div class="animal-actions">
                                <button class="btn btn-small btn-primary" onclick="window.location.href='animals.html#giraffe'">
                                    <i class="fas fa-binoculars"></i> Подробнее
                                </button>
                                <button class="btn btn-small btn-outline favorite-btn">
                                    <i class="far fa-heart"></i>
                                </button>
                                <button class="btn btn-small btn-outline compare-btn">
                                    <i class="fas fa-balance-scale"></i>
                                </button>
                            </div>
                        </div>
                    </div>

                    <div class="animal-card-catalog">
                        <div class="animal-badge">
                            Новое
                        </div>
                        <div class="animal-image">
                            <img src="assets/images/penguin.jpg" alt="Пингвин">
                            <div class="animal-overlay">
                                <h3>Императорский пингвин</h3>
                                <p class="scientific">Aptenodytes forsteri</p>
                            </div>
                        </div>
                        <div class="animal-details">
                            <div class="animal-meta">
                                    <span class="meta-item">
                                        <i class="fas fa-dove"></i>
                                        Птица
                                    </span>
                                <span class="meta-item">
                                        <i class="fas fa-home"></i>
                                        Антарктика
                                    </span>
                            </div>
                            <div class="animal-description">
                                Самый крупный вид пингвинов. Отличные пловцы, могут нырять на глубину до 500 метров.
                            </div>
                            <div class="animal-actions">
                                <button class="btn btn-small btn-primary" onclick="window.location.href='animals.html#penguin'">
                                    <i class="fas fa-binoculars"></i> Подробнее
                                </button>
                                <button class="btn btn-small btn-outline favorite-btn">
                                    <i class="far fa-heart"></i>
                                </button>
                                <button class="btn btn-small btn-outline compare-btn">
                                    <i class="fas fa-balance-scale"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="no-results" id="noResults" style="display: none;">
                    <i class="fas fa-search"></i>
                    <h3>Животные не найдены</h3>
                    <p>Попробуйте изменить параметры поиска или фильтры</p>
                    <button class="btn btn-primary" id="clearAllFilters">
                        <i class="fas fa-redo"></i> Сбросить все фильтры
                    </button>
                </div>

                <div class="pagination">
                    <button class="page-btn disabled">
                        <i class="fas fa-chevron-left"></i>
                    </button>
                    <button class="page-btn active">1</button>
                    <button class="page-btn">2</button>
                    <button class="page-btn">3</button>
                    <button class="page-btn">4</button>
                    <button class="page-btn">5</button>
                    <button class="page-btn">
                        <i class="fas fa-chevron-right"></i>
                    </button>
                </div>
            </div>
        </section>

        <section class="cta-section">
            <div class="container">
                <h2 class="section-title">Не нашли нужное животное?</h2>
                <p class="cta-text">Свяжитесь с нами, и мы поможем вам получить информацию о любом животном из нашей коллекции</p>
                <a href="contacts.html" class="btn btn-primary btn-large">
                    <i class="fas fa-question-circle"></i> Задать вопрос
                </a>
            </div>
        </section>
    </main>

    <footer class="footer">
        <div class="container">
            <div class="footer-content">
                <div class="footer-section">
                    <h3>Зоопарк Дикий Мир</h3>
                    <p>г. Москва, ул. Зоологическая, 123</p>
                    <p>Ежедневно с 9:00 до 20:00</p>
                </div>
                <div class="footer-section">
                    <h3>Контакты</h3>
                    <p><i class="fas fa-phone"></i> +7 (495) 123-45-67</p>
                    <p><i class="fas fa-envelope"></i> info@wildzoo.ru</p>
                </div>
             </div>
            <div class="footer-bottom">
                <p>&copy; 2025 Зоопарк Дикий Мир. Все права защищены.</p>
            </div>
        </div>
    </footer>
</div>

<script src="js/main.js"></script>
<script>
    document.addEventListener('DOMContentLoaded', function() {
        const filterTabs = document.querySelectorAll('.filter-tab');
        const viewBtns = document.querySelectorAll('.view-btn');
        const catalogGrid = document.getElementById('catalogGrid');
        const favoriteBtns = document.querySelectorAll('.favorite-btn');
        const compareBtns = document.querySelectorAll('.compare-btn');
        const resetFiltersBtn = document.getElementById('resetFilters');
        const clearAllFiltersBtn = document.getElementById('clearAllFilters');
        const noResults = document.getElementById('noResults');
        const sizeRange = document.getElementById('sizeRange');
        const sizeValue = document.getElementById('sizeValue');
        const searchInput = document.getElementById('catalogSearch');
        const resultsCount = document.getElementById('resultsCount');

        filterTabs.forEach(tab => {
            tab.addEventListener('click', function() {
                filterTabs.forEach(t => t.classList.remove('active'));
                this.classList.add('active');

                filterAnimals();
            });
        });

        viewBtns.forEach(btn => {
            btn.addEventListener('click', function() {
                const viewType = this.getAttribute('data-view');

                viewBtns.forEach(b => b.classList.remove('active'));
                this.classList.add('active');

                if (viewType === 'list') {
                    catalogGrid.classList.add('list-view');
                } else {
                    catalogGrid.classList.remove('list-view');
                }
            });
        });

        favoriteBtns.forEach(btn => {
            btn.addEventListener('click', function() {
                const icon = this.querySelector('i');
                if (icon.classList.contains('far')) {
                    icon.classList.remove('far');
                    icon.classList.add('fas');
                    this.classList.add('favorited');
                } else {
                    icon.classList.remove('fas');
                    icon.classList.add('far');
                    this.classList.remove('favorited');
                }
            });
        });

        compareBtns.forEach(btn => {
            btn.addEventListener('click', function() {
                this.classList.toggle('active');
            });
        });

        if (sizeRange && sizeValue) {
            sizeRange.addEventListener('input', function() {
                const value = this.value;
                if (value === '100') {
                    sizeValue.textContent = 'Все размеры';
                } else if (value < 33) {
                    sizeValue.textContent = 'Маленькие';
                } else if (value < 66) {
                    sizeValue.textContent = 'Средние';
                } else {
                    sizeValue.textContent = 'Крупные';
                }

                filterAnimals();
            });
        }

        if (resetFiltersBtn) {
            resetFiltersBtn.addEventListener('click', function() {
                resetAllFilters();
            });
        }

        if (clearAllFiltersBtn) {
            clearAllFiltersBtn.addEventListener('click', function() {
                resetAllFilters();
            });
        }

        if (searchInput) {
            searchInput.addEventListener('input', function() {
                filterAnimals();
            });
        }

        const checkboxes = document.querySelectorAll('input[type="checkbox"]');
        checkboxes.forEach(checkbox => {
            checkbox.addEventListener('change', filterAnimals);
        });

        const sortSelect = document.getElementById('sortSelect');
        if (sortSelect) {
            sortSelect.addEventListener('change', sortAnimals);
        }

        function filterAnimals() {
            const searchTerm = searchInput ? searchInput.value.toLowerCase() : '';
            const activeTab = document.querySelector('.filter-tab.active').getAttribute('data-filter');
            const sizeFilter = sizeRange ? sizeRange.value : 100;

            let visibleCount = 0;
            const animalCards = document.querySelectorAll('.animal-card-catalog');

            animalCards.forEach(card => {
                const title = card.querySelector('h3').textContent.toLowerCase();
                const description = card.querySelector('.animal-description').textContent.toLowerCase();
                const scientific = card.querySelector('.scientific') ? card.querySelector('.scientific').textContent.toLowerCase() : '';

                let shouldShow = true;

                if (searchTerm) {
                    shouldShow = title.includes(searchTerm) ||
                        description.includes(searchTerm) ||
                        scientific.includes(searchTerm);
                }

                if (activeTab !== 'all') {
                    switch(activeTab) {
                        case 'mammals':
                            shouldShow = shouldShow && card.querySelector('.meta-item:nth-child(1)').textContent.includes('Млекопитающее');
                            break;
                        case 'birds':
                            shouldShow = shouldShow && card.querySelector('.meta-item:nth-child(1)').textContent.includes('Птица');
                            break;
                        case 'reptiles':
                            shouldShow = shouldShow && card.querySelector('.meta-item:nth-child(1)').textContent.includes('Рептилия');
                            break;
                        case 'endangered':
                            shouldShow = shouldShow && card.querySelector('.animal-badge.endangered');
                            break;
                        case 'new':
                            shouldShow = shouldShow && card.querySelector('.animal-badge:not(.endangered)');
                            break;
                    }
                }

                if (sizeFilter < 100) {
                    shouldShow = shouldShow && Math.random() > 0.5;
                }

                if (shouldShow) {
                    card.style.display = 'block';
                    visibleCount++;
                    card.classList.add('animate-fade-in');
                } else {
                    card.style.display = 'none';
                    card.classList.remove('animate-fade-in');
                }
            });

            if (resultsCount) {
                resultsCount.textContent = `Найдено: ${visibleCount} животных`;
            }

            if (noResults) {
                if (visibleCount === 0) {
                    noResults.style.display = 'block';
                    catalogGrid.style.display = 'none';
                } else {
                    noResults.style.display = 'none';
                    catalogGrid.style.display = 'grid';
                }
            }
        }

        function sortAnimals() {
            const sortValue = sortSelect.value;
            const container = catalogGrid;
            const items = Array.from(container.querySelectorAll('.animal-card-catalog'));

            items.sort((a, b) => {
                const aTitle = a.querySelector('h3').textContent;
                const bTitle = b.querySelector('h3').textContent;

                switch(sortValue) {
                    case 'name_asc':
                        return aTitle.localeCompare(bTitle);
                    case 'name_desc':
                        return bTitle.localeCompare(aTitle);
                    case 'size_asc':
                        return Math.random() - 0.5;
                    case 'size_desc':
                        return Math.random() - 0.5;
                    case 'popular':
                        return Math.random() - 0.5;
                    case 'newest':
                        const aNew = a.querySelector('.animal-badge:not(.endangered)') ? 1 : 0;
                        const bNew = b.querySelector('.animal-badge:not(.endangered)') ? 1 : 0;
                        return bNew - aNew;
                    default:
                        return 0;
                }
            });

            items.forEach(item => container.appendChild(item));
        }

        function resetAllFilters() {
            filterTabs.forEach(tab => {
                if (tab.getAttribute('data-filter') === 'all') {
                    tab.classList.add('active');
                } else {
                    tab.classList.remove('active');
                }
            });

            if (searchInput) searchInput.value = '';
            if (sizeRange) sizeRange.value = 100;
            if (sizeValue) sizeValue.textContent = 'Все размеры';

            checkboxes.forEach(checkbox => {
                checkbox.checked = false;
            });

            if (sortSelect) sortSelect.value = 'name_asc';

            filterAnimals();
            sortAnimals();
        }

        filterAnimals();
        sortAnimals();
    });
</script>
<script src="js/auth-manager.js"></script>
</body>
</html>