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

frontend/prices.html
1 174 строки54 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>
        .pricing-section {
            padding: 4rem 0;
        }

        .pricing-header {
            text-align: center;
            margin-bottom: 3rem;
        }

        .pricing-switch {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 1rem;
            margin-top: 1.5rem;
        }

        .switch-label {
            font-weight: 500;
            font-size: 1.1rem;
        }

        .switch {
            position: relative;
            display: inline-block;
            width: 70px;
            height: 35px;
        }

        .switch input {
            opacity: 0;
            width: 0;
            height: 0;
        }

        .slider-switch {
            position: absolute;
            cursor: pointer;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: #e0e0e0;
            transition: .4s;
            border-radius: 34px;
        }

        .slider-switch:before {
            position: absolute;
            content: "";
            height: 27px;
            width: 27px;
            left: 4px;
            bottom: 4px;
            background-color: white;
            transition: .4s;
            border-radius: 50%;
            box-shadow: 0 2px 4px rgba(0,0,0,0.2);
        }

        input:checked + .slider-switch {
            background-color: var(--primary-color);
        }

        input:checked + .slider-switch:before {
            transform: translateX(35px);
        }

        .pricing-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
            gap: 2rem;
            margin-bottom: 4rem;
            justify-items: center;
        }

        .pricing-card {
            background: var(--white);
            border-radius: var(--border-radius);
            padding: 2.5rem 2rem;
            box-shadow: var(--shadow);
            position: relative;
            transition: var(--transition);
            border: 2px solid transparent;
            max-width: 380px;
            width: 100%;
        }

        .pricing-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 15px 30px rgba(0,0,0,0.15);
        }

        .pricing-card.popular {
            border-color: var(--primary-color);
            transform: scale(1.05);
            background: linear-gradient(145deg, #ffffff 0%, #f9fff9 100%);
        }

        .pricing-card.popular:hover {
            transform: scale(1.05) translateY(-10px);
        }

        .popular-badge {
            position: absolute;
            top: -12px;
            left: 50%;
            transform: translateX(-50%);
            background: var(--primary-color);
            color: var(--white);
            padding: 0.6rem 2.5rem;
            border-radius: 50px;
            font-weight: 700;
            font-size: 0.9rem;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            box-shadow: 0 4px 8px rgba(46, 125, 50, 0.3);
        }

        .pricing-header-card {
            text-align: center;
            margin-bottom: 2rem;
        }

        .pricing-title {
            font-size: 1.6rem;
            margin-bottom: 0.5rem;
            color: var(--text-color);
            font-weight: 700;
        }

        .pricing-subtitle {
            color: var(--text-light);
            font-size: 0.95rem;
            line-height: 1.4;
        }

        .pricing-price {
            text-align: center;
            margin-bottom: 2rem;
            padding: 1.5rem;
            background: linear-gradient(135deg, #f8f9fa, #e9ecef);
            border-radius: var(--border-radius);
        }

        .price-amount {
            font-size: 3.5rem;
            font-weight: 800;
            color: var(--primary-color);
            line-height: 1;
            margin-bottom: 0.5rem;
        }

        .price-period {
            color: var(--text-color);
            font-size: 1rem;
            font-weight: 600;
        }

        .pricing-features {
            margin-bottom: 2rem;
        }

        .feature-list {
            list-style: none;
            padding: 0;
        }

        .feature-item {
            padding: 0.9rem 0;
            border-bottom: 1px solid #eee;
            display: flex;
            align-items: center;
            gap: 0.75rem;
            font-size: 0.95rem;
        }

        .feature-item:last-child {
            border-bottom: none;
        }

        .feature-item i {
            color: var(--primary-color);
            font-size: 1.1rem;
            min-width: 20px;
        }

        .feature-item.disabled {
            color: var(--text-light);
        }

        .feature-item.disabled i {
            color: #ccc;
        }

        .pricing-button {
            text-align: center;
        }

        .btn-pricing {
            width: 100%;
            padding: 1rem;
            font-size: 1.1rem;
            font-weight: 600;
            letter-spacing: 0.5px;
        }

        .comparison-section {
            margin: 5rem 0;
            text-align: center;
        }

        .comparison-table {
            background: var(--white);
            border-radius: var(--border-radius);
            overflow: hidden;
            box-shadow: var(--shadow);
            margin: 3rem auto;
            max-width: 1200px;
        }

        .comparison-header {
            padding: 2rem;
            background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
            color: var(--white);
        }

        .comparison-header h2 {
            margin: 0;
            font-size: 1.8rem;
            font-weight: 700;
        }

        .comparison-body {
            overflow-x: auto;
            padding: 1rem;
        }

        .comparison-table-table {
            width: 100%;
            border-collapse: collapse;
            min-width: 800px;
            font-size: 0.95rem;
        }

        .comparison-table-table th {
            padding: 1.5rem;
            text-align: center;
            background: #f8f9fa;
            border-bottom: 2px solid #dee2e6;
            font-weight: 700;
            color: var(--text-color);
            font-size: 1.1rem;
        }

        .comparison-table-table th:first-child {
            background: #e9f7ef;
            font-weight: 700;
            color: var(--primary-dark);
        }

        .comparison-table-table td {
            padding: 1.2rem 1.5rem;
            text-align: center;
            border-bottom: 1px solid #eee;
            vertical-align: middle;
        }

        .comparison-table-table tr:hover {
            background-color: #f8f9fa;
        }

        .comparison-table-table tr:nth-child(even) {
            background-color: #fcfcfc;
        }

        .comparison-table-table tr:nth-child(even):hover {
            background-color: #f5f5f5;
        }

        .feature-name {
            text-align: left !important;
            font-weight: 600;
            color: var(--text-color);
            white-space: nowrap;
            padding-right: 2rem;
        }

        .feature-description {
            font-size: 0.85rem;
            color: var(--text-light);
            font-weight: 400;
            display: block;
            margin-top: 3px;
        }

        .check-icon {
            color: #28a745;
            font-size: 1.3rem;
            font-weight: 900;
        }

        .cross-icon {
            color: #dc3545;
            font-size: 1.3rem;
            font-weight: 900;
        }

        .partial-icon {
            color: #ffc107;
            font-size: 1.3rem;
            font-weight: 900;
        }

        .text-available {
            color: #28a745;
            font-weight: 600;
            font-size: 0.9rem;
        }

        .text-limited {
            color: #ffc107;
            font-weight: 600;
            font-size: 0.9rem;
        }

        .text-not-available {
            color: #dc3545;
            font-weight: 600;
            font-size: 0.9rem;
        }

        .table-price {
            font-weight: 700;
            color: var(--primary-color);
            font-size: 1.2rem;
        }

        .table-price-small {
            font-size: 0.8rem;
            color: var(--text-light);
            display: block;
        }

        .faq-section {
            margin-bottom: 4rem;
        }

        .faq-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
            gap: 2rem;
            margin-top: 2rem;
            justify-items: center;
        }

        .faq-item {
            background: var(--white);
            border-radius: var(--border-radius);
            padding: 1.8rem;
            box-shadow: var(--shadow);
            max-width: 500px;
            width: 100%;
            transition: var(--transition);
            border-left: 4px solid var(--primary-color);
        }

        .faq-item:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 25px rgba(0,0,0,0.1);
        }

        .faq-question {
            font-weight: 700;
            margin-bottom: 1rem;
            color: var(--primary-color);
            font-size: 1.1rem;
            line-height: 1.4;
        }

        .discounts-section {
            background: linear-gradient(135deg, #f8f9fa, #e9ecef);
            padding: 4rem 0;
            border-radius: var(--border-radius);
            margin: 5rem 0;
        }

        .discounts-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 2rem;
            margin-top: 2rem;
            justify-items: center;
        }

        .discount-card {
            background: var(--white);
            border-radius: var(--border-radius);
            padding: 2.5rem 2rem;
            box-shadow: var(--shadow);
            text-align: center;
            max-width: 280px;
            width: 100%;
            transition: var(--transition);
        }

        .discount-card:hover {
            transform: translateY(-8px);
            box-shadow: 0 15px 30px rgba(0,0,0,0.15);
        }

        .discount-icon {
            font-size: 3.5rem;
            color: var(--primary-color);
            margin-bottom: 1.5rem;
        }

        .discount-amount {
            font-size: 3rem;
            font-weight: 800;
            color: var(--primary-color);
            margin-bottom: 0.5rem;
            line-height: 1;
        }

        .discount-card h3 {
            font-size: 1.4rem;
            margin-bottom: 1rem;
            color: var(--text-color);
            font-weight: 700;
        }

        .discount-conditions {
            font-size: 0.9rem;
            color: var(--text-light);
            line-height: 1.5;
        }

        .additional-info {
            background: var(--white);
            border-radius: var(--border-radius);
            padding: 2.5rem;
            box-shadow: var(--shadow);
            margin: 3rem 0;
            border-top: 4px solid var(--primary-color);
        }

        .additional-info h3 {
            color: var(--primary-color);
            margin-bottom: 1.5rem;
            font-size: 1.5rem;
        }

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

        .additional-info li {
            padding: 0.8rem 0;
            border-bottom: 1px solid #eee;
            display: flex;
            align-items: flex-start;
            gap: 1rem;
        }

        .additional-info li:last-child {
            border-bottom: none;
        }

        .additional-info li i {
            color: var(--primary-color);
            margin-top: 0.2rem;
        }

        .additional-info strong {
            color: var(--text-color);
            font-weight: 600;
            min-width: 200px;
            display: inline-block;
        }

        @media (max-width: 1200px) {
            .pricing-grid {
                grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            }
            
            .comparison-table {
                margin: 2rem;
            }
        }

        @media (max-width: 992px) {
            .pricing-card.popular {
                transform: scale(1.02);
            }
            
            .feature-name {
                white-space: normal;
            }
        }

        @media (max-width: 768px) {
            .pricing-grid {
                grid-template-columns: 1fr;
                max-width: 400px;
                margin-left: auto;
                margin-right: auto;
            }

            .pricing-card.popular {
                transform: none;
            }

            .pricing-card.popular:hover {
                transform: translateY(-10px);
            }

            .faq-grid {
                grid-template-columns: 1fr;
            }
            
            .switch-label {
                font-size: 1rem;
            }
            
            .comparison-table {
                margin: 1rem;
            }
            
            .additional-info li {
                flex-direction: column;
                gap: 0.5rem;
            }
            
            .additional-info strong {
                min-width: auto;
            }
        }

        @media (max-width: 480px) {
            .price-amount {
                font-size: 3rem;
            }
            
            .discount-amount {
                font-size: 2.5rem;
            }
            
            .pricing-switch {
                flex-direction: column;
                gap: 0.8rem;
            }
        }
    </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"><i class="fas fa-th-list"></i> Каталог</a></li>
                <li><a href="prices.html" class="active"><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="pricing-section">
            <div class="container">
                <div class="pricing-header">
                    <h2>Билеты в зоопарк</h2>
                    <p>Купите билет онлайн и получите скидку 10%</p>

                    <div class="pricing-switch">
                        <span class="switch-label">Разовые билеты</span>
                        <label class="switch">
                            <input type="checkbox" id="pricingToggle">
                            <span class="slider-switch"></span>
                        </label>
                        <span class="switch-label">Абонементы</span>
                    </div>
                </div>

                <div id="singleVisitPricing" class="pricing-grid">
                    <div class="pricing-card">
                        <div class="pricing-header-card">
                            <h3 class="pricing-title">Взрослый</h3>
                            <p class="pricing-subtitle">Для посетителей от 18 лет</p>
                        </div>

                        <div class="pricing-price">
                            <div class="price-amount">1 200 ₽</div>
                            <div class="price-period">за один визит</div>
                        </div>

                        <div class="pricing-features">
                            <ul class="feature-list">
                                <li class="feature-item">
                                    <i class="fas fa-check"></i>
                                    <span>Доступ ко всем зонам зоопарка</span>
                                </li>
                                <li class="feature-item">
                                    <i class="fas fa-check"></i>
                                    <span>Карта зоопарка в подарок</span>
                                </li>
                                <li class="feature-item">
                                    <i class="fas fa-check"></i>
                                    <span>Посещение шоу и кормлений</span>
                                </li>
                                <li class="feature-item">
                                    <i class="fas fa-check"></i>
                                    <span>Фотографирование животных</span>
                                </li>
                                <li class="feature-item disabled">
                                    <i class="fas fa-times"></i>
                                    <span>Экскурсия с гидом</span>
                                </li>
                            </ul>
                        </div>

                        <div class="pricing-button">
                            <a href="ticket.html" class="btn btn-outline btn-pricing">
                                <i class="fas fa-shopping-cart"></i> Купить билет
                            </a>
                        </div>
                    </div>

                    <div class="pricing-card popular">
                        <div class="popular-badge">Самый популярный</div>
                        <div class="pricing-header-card">
                            <h3 class="pricing-title">Семейный</h3>
                            <p class="pricing-subtitle">2 взрослых + 2 ребенка (3-17 лет)</p>
                        </div>

                        <div class="pricing-price">
                            <div class="price-amount">3 000 ₽</div>
                            <div class="price-period">экономия 600 ₽</div>
                        </div>

                        <div class="pricing-features">
                            <ul class="feature-list">
                                <li class="feature-item">
                                    <i class="fas fa-check"></i>
                                    <span>Доступ ко всем зонам</span>
                                </li>
                                <li class="feature-item">
                                    <i class="fas fa-check"></i>
                                    <span>Семейная карта зоопарка</span>
                                </li>
                                <li class="feature-item">
                                    <i class="fas fa-check"></i>
                                    <span>Посещение всех шоу и мероприятий</span>
                                </li>
                                <li class="feature-item">
                                    <i class="fas fa-check"></i>
                                    <span>Скидка 15% в кафе и сувенирном магазине</span>
                                </li>
                                <li class="feature-item">
                                    <i class="fas fa-check"></i>
                                    <span>Детская игровая зона и мастер-классы</span>
                                </li>
                            </ul>
                        </div>

                        <div class="pricing-button">
                            <a href="ticket.html" class="btn btn-primary btn-pricing">
                                <i class="fas fa-shopping-cart"></i> Купить билет
                            </a>
                        </div>
                    </div>

                    <div class="pricing-card">
                        <div class="pricing-header-card">
                            <h3 class="pricing-title">Детский</h3>
                            <p class="pricing-subtitle">Для детей от 3 до 17 лет</p>
                        </div>

                        <div class="pricing-price">
                            <div class="price-amount">600 ₽</div>
                            <div class="price-period">за один визит</div>
                        </div>

                        <div class="pricing-features">
                            <ul class="feature-list">
                                <li class="feature-item">
                                    <i class="fas fa-check"></i>
                                    <span>Доступ ко всем зонам зоопарка</span>
                                </li>
                                <li class="feature-item">
                                    <i class="fas fa-check"></i>
                                    <span>Детская карта зоопарка с играми</span>
                                </li>
                                <li class="feature-item">
                                    <i class="fas fa-check"></i>
                                    <span>Посещение детских шоу и кормлений</span>
                                </li>
                                <li class="feature-item">
                                    <i class="fas fa-check"></i>
                                    <span>Игровая зона и развлечения</span>
                                </li>
                                <li class="feature-item">
                                    <i class="fas fa-check"></i>
                                    <span>Образовательные материалы и квесты</span>
                                </li>
                            </ul>
                        </div>

                        <div class="pricing-button">
                            <a href="ticket.html" class="btn btn-outline btn-pricing">
                                <i class="fas fa-shopping-cart"></i> Купить билет
                            </a>
                        </div>
                    </div>
                </div>

                <div id="subscriptionPricing" class="pricing-grid" style="display: none;">
                    <div class="pricing-card">
                        <div class="pricing-header-card">
                            <h3 class="pricing-title">Месячный</h3>
                            <p class="pricing-subtitle">Неограниченное посещение в течение месяца</p>
                        </div>

                        <div class="pricing-price">
                            <div class="price-amount">2 500 ₽</div>
                            <div class="price-period">в месяц (экономия 30%)</div>
                        </div>

                        <div class="pricing-features">
                            <ul class="feature-list">
                                <li class="feature-item">
                                    <i class="fas fa-check"></i>
                                    <span>Неограниченное посещение в течение месяца</span>
                                </li>
                                <li class="feature-item">
                                    <i class="fas fa-check"></i>
                                    <span>Приоритетный вход без очереди</span>
                                </li>
                                <li class="feature-item">
                                    <i class="fas fa-check"></i>
                                    <span>Скидка 20% в кафе и ресторанах</span>
                                </li>
                                <li class="feature-item">
                                    <i class="fas fa-check"></i>
                                    <span>Приглашения на специальные мероприятия</span>
                                </li>
                                <li class="feature-item disabled">
                                    <i class="fas fa-times"></i>
                                    <span>Персональный гид и экскурсии</span>
                                </li>
                            </ul>
                        </div>

                        <div class="pricing-button">
                            <button class="btn btn-outline btn-pricing">
                                <i class="fas fa-shopping-cart"></i> Купить абонемент
                            </button>
                        </div>
                    </div>

                    <div class="pricing-card popular">
                        <div class="popular-badge">Лучшее предложение</div>
                        <div class="pricing-header-card">
                            <h3 class="pricing-title">Годовой</h3>
                            <p class="pricing-subtitle">Экономия 40% при покупке на год</p>
                        </div>

                        <div class="pricing-price">
                            <div class="price-amount">18 000 ₽</div>
                            <div class="price-period">экономия 12 000 ₽ в год</div>
                        </div>

                        <div class="pricing-features">
                            <ul class="feature-list">
                                <li class="feature-item">
                                    <i class="fas fa-check"></i>
                                    <span>Неограниченное посещение весь год</span>
                                </li>
                                <li class="feature-item">
                                    <i class="fas fa-check"></i>
                                    <span>Приоритетный вход и VIP-парковка</span>
                                </li>
                                <li class="feature-item">
                                    <i class="fas fa-check"></i>
                                    <span>Скидка 25% в кафе, магазинах и на услуги</span>
                                </li>
                                <li class="feature-item">
                                    <i class="fas fa-check"></i>
                                    <span>VIP-приглашения на все мероприятия</span>
                                </li>
                                <li class="feature-item">
                                    <i class="fas fa-check"></i>
                                    <span>2 бесплатные экскурсии с гидом в год</span>
                                </li>
                            </ul>
                        </div>

                        <div class="pricing-button">
                            <button class="btn btn-primary btn-pricing">
                                <i class="fas fa-shopping-cart"></i> Купить абонемент
                            </button>
                        </div>
                    </div>

                    <div class="pricing-card">
                        <div class="pricing-header-card">
                            <h3 class="pricing-title">Семейный годовой</h3>
                            <p class="pricing-subtitle">Для всей семьи до 4 человек</p>
                        </div>

                        <div class="pricing-price">
                            <div class="price-amount">35 000 ₽</div>
                            <div class="price-period">экономия 25 000 ₽ в год</div>
                        </div>

                        <div class="pricing-features">
                            <ul class="feature-list">
                                <li class="feature-item">
                                    <i class="fas fa-check"></i>
                                    <span>Неограниченное посещение для 4 человек</span>
                                </li>
                                <li class="feature-item">
                                    <i class="fas fa-check"></i>
                                    <span>Приоритетный вход для всей семьи</span>
                                </li>
                                <li class="feature-item">
                                    <i class="fas fa-check"></i>
                                    <span>Скидка 30% в кафе и детских мастер-классах</span>
                                </li>
                                <li class="feature-item">
                                    <i class="fas fa-check"></i>
                                    <span>Бесплатные мастер-классы для детей (ежемесячно)</span>
                                </li>
                                <li class="feature-item">
                                    <i class="fas fa-check"></i>
                                    <span>Персональный менеджер и помощь в организации</span>
                                </li>
                            </ul>
                        </div>

                        <div class="pricing-button">
                            <button class="btn btn-outline btn-pricing">
                                <i class="fas fa-shopping-cart"></i> Купить абонемент
                            </button>
                        </div>
                    </div>
                </div>

                <div class="comparison-section">
                    <h2 class="section-title">Сравнение тарифов</h2>
                    <p class="page-subtitle" style="max-width: 800px; margin: 0 auto 2rem;">Выберите оптимальный вариант для вашего посещения</p>
                    
                    <div class="comparison-table">
                        <div class="comparison-header">
                            <h2>Сравнительная таблица тарифов</h2>
                        </div>
                        <div class="comparison-body">
                            <table class="comparison-table-table">
                                <thead>
                                <tr>
                                    <th style="min-width: 250px;">Возможности и услуги</th>
                                    <th style="min-width: 180px;">Взрослый билет<br><span class="table-price">1 200 ₽</span></th>
                                    <th style="min-width: 180px;">Детский билет<br><span class="table-price">600 ₽</span></th>
                                    <th style="min-width: 180px;">Семейный билет<br><span class="table-price">3 000 ₽</span></th>
                                    <th style="min-width: 180px;">Годовой абонемент<br><span class="table-price">18 000 ₽</span></th>
                                </tr>
                                </thead>
                                <tbody>
                                <tr>
                                    <td class="feature-name">
                                        Стоимость за одно посещение
                                        <span class="feature-description">Расчет на одного человека</span>
                                    </td>
                                    <td><span class="table-price">1 200 ₽</span></td>
                                    <td><span class="table-price">600 ₽</span></td>
                                    <td><span class="table-price">750 ₽</span><span class="table-price-small">(на человека)</span></td>
                                    <td><span class="table-price">500 ₽</span><span class="table-price-small">(при 3+ посещениях в месяц)</span></td>
                                </tr>
                                <tr>
                                    <td class="feature-name">
                                        Доступ ко всем зонам зоопарка
                                        <span class="feature-description">Основные и специальные экспозиции</span>
                                    </td>
                                    <td><i class="fas fa-check check-icon"></i><br><span class="text-available">Полный доступ</span></td>
                                    <td><i class="fas fa-check check-icon"></i><br><span class="text-available">Полный доступ</span></td>
                                    <td><i class="fas fa-check check-icon"></i><br><span class="text-available">Полный доступ</span></td>
                                    <td><i class="fas fa-check check-icon"></i><br><span class="text-available">Неограниченно</span></td>
                                </tr>
                                <tr>
                                    <td class="feature-name">
                                        Шоу и кормления животных
                                        <span class="feature-description">Ежедневные представления</span>
                                    </td>
                                    <td><i class="fas fa-check check-icon"></i><br><span class="text-available">Все шоу</span></td>
                                    <td><i class="fas fa-check check-icon"></i><br><span class="text-available">Детские шоу</span></td>
                                    <td><i class="fas fa-check check-icon"></i><br><span class="text-available">Все шоу</span></td>
                                    <td><i class="fas fa-check check-icon"></i><br><span class="text-available">Все шоу + VIP-места</span></td>
                                </tr>
                                <tr>
                                    <td class="feature-name">
                                        Карта зоопарка и материалы
                                        <span class="feature-description">Печатные и электронные материалы</span>
                                    </td>
                                    <td><i class="fas fa-check check-icon"></i><br><span class="text-available">Базовая карта</span></td>
                                    <td><i class="fas fa-check check-icon"></i><br><span class="text-available">Детская карта</span></td>
                                    <td><i class="fas fa-check check-icon"></i><br><span class="text-available">Семейный набор</span></td>
                                    <td><i class="fas fa-check check-icon"></i><br><span class="text-available">Премиум-набор</span></td>
                                </tr>
                                <tr>
                                    <td class="feature-name">
                                        Скидки в кафе и магазинах
                                        <span class="feature-description">На еду, напитки и сувениры</span>
                                    </td>
                                    <td><i class="fas fa-times cross-icon"></i><br><span class="text-not-available">Нет скидки</span></td>
                                    <td><i class="fas fa-times cross-icon"></i><br><span class="text-not-available">Нет скидки</span></td>
                                    <td><i class="fas fa-check check-icon"></i><br><span class="text-available">15% скидка</span></td>
                                    <td><i class="fas fa-check check-icon"></i><br><span class="text-available">25% скидка</span></td>
                                </tr>
                                <tr>
                                    <td class="feature-name">
                                        Приоритетный вход
                                        <span class="feature-description">Отдельная очередь</span>
                                    </td>
                                    <td><i class="fas fa-times cross-icon"></i><br><span class="text-not-available">Общая очередь</span></td>
                                    <td><i class="fas fa-times cross-icon"></i><br><span class="text-not-available">Общая очередь</span></td>
                                    <td><i class="fas fa-times cross-icon"></i><br><span class="text-not-available">Общая очередь</span></td>
                                    <td><i class="fas fa-check check-icon"></i><br><span class="text-available">Без очереди</span></td>
                                </tr>
                                <tr>
                                    <td class="feature-name">
                                        Экскурсии с гидом
                                        <span class="feature-description">Групповые и индивидуальные</span>
                                    </td>
                                    <td><i class="fas fa-times cross-icon"></i><br><span class="text-not-available">Доп. оплата</span></td>
                                    <td><i class="fas fa-times cross-icon"></i><br><span class="text-not-available">Доп. оплата</span></td>
                                    <td><i class="fas fa-minus partial-icon"></i><br><span class="text-limited">Со скидкой 20%</span></td>
                                    <td><i class="fas fa-check check-icon"></i><br><span class="text-available">2 бесплатно в год</span></td>
                                </tr>
                                <tr>
                                    <td class="feature-name">
                                        Участие в мероприятиях
                                        <span class="feature-description">Специальные события и праздники</span>
                                    </td>
                                    <td><i class="fas fa-minus partial-icon"></i><br><span class="text-limited">По отдельному билету</span></td>
                                    <td><i class="fas fa-minus partial-icon"></i><br><span class="text-limited">По отдельному билету</span></td>
                                    <td><i class="fas fa-check check-icon"></i><br><span class="text-available">Стандартный доступ</span></td>
                                    <td><i class="fas fa-check check-icon"></i><br><span class="text-available">VIP-доступ ко всем</span></td>
                                </tr>
                                <tr>
                                    <td class="feature-name">
                                        Детские мастер-классы
                                        <span class="feature-description">Творческие и образовательные занятия</span>
                                    </td>
                                    <td><i class="fas fa-times cross-icon"></i><br><span class="text-not-available">Не включено</span></td>
                                    <td><i class="fas fa-check check-icon"></i><br><span class="text-available">Базовые занятия</span></td>
                                    <td><i class="fas fa-check check-icon"></i><br><span class="text-available">Все мастер-классы</span></td>
                                    <td><i class="fas fa-check check-icon"></i><br><span class="text-available">Премиум-программа</span></td>
                                </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>

                <div class="discounts-section">
                    <div class="container">
                        <h2 class="section-title">Специальные скидки и льготы</h2>
                        <p class="page-subtitle" style="max-width: 800px; margin: 0 auto 2rem;">Дополнительные выгоды для различных категорий посетителей</p>

                        <div class="discounts-grid">
                            <div class="discount-card">
                                <div class="discount-icon">
                                    <i class="fas fa-users"></i>
                                </div>
                                <div class="discount-amount">10-25%</div>
                                <h3>Групповые скидки</h3>
                                <p class="discount-conditions">От 10 человек - 10% скидка, от 20 человек - 15%, от 30 человек - 25%</p>
                            </div>

                            <div class="discount-card">
                                <div class="discount-icon">
                                    <i class="fas fa-birthday-cake"></i>
                                </div>
                                <div class="discount-amount">15%</div>
                                <h3>День рождения</h3>
                                <p class="discount-conditions">В день рождения и неделю после для именинника и сопровождающих (до 3 человек)</p>
                            </div>

                            <div class="discount-card">
                                <div class="discount-icon">
                                    <i class="fas fa-graduation-cap"></i>
                                </div>
                                <div class="discount-amount">20%</div>
                                <h3>Студентам</h3>
                                <p class="discount-conditions">При предъявлении действующего студенческого билета дневного отделения</p>
                            </div>

                            <div class="discount-card">
                                <div class="discount-icon">
                                    <i class="fas fa-user-clock"></i>
                                </div>
                                <div class="discount-amount">30%</div>
                                <h3>Пенсионерам</h3>
                                <p class="discount-conditions">Для посетителей старше 60 лет при предъявлении пенсионного удостоверения</p>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="additional-info">
                    <h3><i class="fas fa-info-circle"></i> Дополнительная информация</h3>
                    <ul>
                        <li>
                            <i class="fas fa-child"></i>
                            <div>
                                <strong>Дети до 3 лет:</strong> Посещают зоопарк бесплатно в сопровождении взрослого с действующим билетом (не более 2 детей на одного взрослого).
                            </div>
                        </li>
                        <li>
                            <i class="fas fa-user-friends"></i>
                            <div>
                                <strong>Многодетные семьи:</strong> Дополнительная скидка 15% на все типы билетов при предъявлении удостоверения многодетной семьи.
                            </div>
                        </li>
                        <li>
                            <i class="fas fa-wheelchair"></i>
                            <div>
                                <strong>Инвалиды и сопровождающие:</strong> Посещение бесплатно для инвалидов I и II групп и одного сопровождающего.
                            </div>
                        </li>
                        <li>
                            <i class="fas fa-calendar-alt"></i>
                            <div>
                                <strong>Время работы касс:</strong> Ежедневно с 8:30 до 19:00. Зоопарк работает с 9:00 до 20:00, вход до 19:00.
                            </div>
                        </li>
                        <li>
                            <i class="fas fa-undo"></i>
                            <div>
                                <strong>Возврат билетов:</strong> Билеты можно вернуть не позднее чем за 24 часа до даты посещения через личный кабинет или в кассах зоопарка.
                            </div>
                        </li>
                    </ul>
                </div>

                <div class="faq-section">
                    <h2 class="section-title">Частые вопросы о ценах</h2>

                    <div class="faq-grid">
                        <div class="faq-item">
                            <div class="faq-question">Нужно ли покупать билет для ребенка до 3 лет?</div>
                            <p>Дети до 3 лет посещают зоопарк бесплатно в сопровождении взрослого с действующим билетом. Один взрослый может сопровождать не более 2 детей до 3 лет.</p>
                        </div>

                        <div class="faq-item">
                            <div class="faq-question">Можно ли вернуть билет?</div>
                            <p>Да, билеты можно вернуть не позднее чем за 24 часа до даты посещения. Возврат осуществляется через личный кабинет на сайте или в кассах зоопарка при предъявлении документа, удостоверяющего личность.</p>
                        </div>

                        <div class="faq-item">
                            <div class="faq-question">Действует ли билет целый день?</div>
                            <p>Да, билет действует с момента входа до закрытия зоопарка в день посещения. Выход и повторный вход возможен по тому же билету в течение дня.</p>
                        </div>

                        <div class="faq-item">
                            <div class="faq-question">Есть ли скидки для многодетных семей?</div>
                            <p>Да, многодетные семьи получают дополнительную скидку 15% на все типы билетов при предъявлении удостоверения многодетной семьи. Скидка суммируется с другими акциями.</p>
                        </div>

                        <div class="faq-item">
                            <div class="faq-question">Можно ли купить билет онлайн со скидкой?</div>
                            <p>Да, при покупке билета онлайн вы получаете автоматическую скидку 10%. Скидка онлайн не суммируется с другими персональными скидками, но доступна всем посетителям.</p>
                        </div>

                        <div class="faq-item">
                            <div class="faq-question">Что входит в стоимость билета?</div>
                            <p>В стоимость билета входит доступ ко всем экспозициям зоопарка, посещение ежедневных шоу и кормлений, карта зоопарка. Дополнительно оплачиваются: экскурсии, мастер-классы, питание и сувениры.</p>
                        </div>
                    </div>
                </div>
            </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 pricingToggle = document.getElementById('pricingToggle');
        const singleVisitPricing = document.getElementById('singleVisitPricing');
        const subscriptionPricing = document.getElementById('subscriptionPricing');

        if (pricingToggle) {
            pricingToggle.addEventListener('change', function() {
                if (this.checked) {
                    singleVisitPricing.style.display = 'none';
                    subscriptionPricing.style.display = 'grid';
                } else {
                    singleVisitPricing.style.display = 'grid';
                    subscriptionPricing.style.display = 'none';
                }
            });
        }

        const pricingButtons = document.querySelectorAll('.btn-pricing');
        pricingButtons.forEach(button => {
            button.addEventListener('click', function(e) {
                if (!this.href) {
                    e.preventDefault();
                    alert('Для покупки абонемента пожалуйста, свяжитесь с нашими менеджерами по телефону +7 (495) 123-45-67 или посетите кассы зоопарка. Вы также можете оформить абонемент в нашем мобильном приложении.');
                }
            });
        });
    });
</script>
<script src="js/auth-manager.js"></script>
</body>
</html>