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

frontend/ticket.html
1 458 строк61 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>
        /* Дополнительные стили для страницы билетов */
        .ticket-section {
            padding: 60px 0;
        }
        
        .ticket-steps {
            display: flex;
            justify-content: center;
            gap: 30px;
            margin-bottom: 50px;
            flex-wrap: wrap;
        }
        
        .step {
            display: flex;
            align-items: center;
            gap: 15px;
            padding: 20px 25px;
            background: var(--white);
            border-radius: var(--border-radius);
            box-shadow: var(--shadow);
            min-width: 220px;
            opacity: 0.6;
            transition: var(--transition);
        }
        
        .step.active {
            opacity: 1;
            border: 2px solid var(--primary-color);
            transform: translateY(-5px);
            box-shadow: 0 10px 25px rgba(46, 125, 50, 0.2);
        }
        
        .step-number {
            width: 40px;
            height: 40px;
            background: var(--bg-color);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 700;
            font-size: 1.2rem;
            color: var(--text-color);
        }
        
        .step.active .step-number {
            background: var(--primary-color);
            color: var(--white);
            animation: pulse 2s infinite;
        }
        
        .step-content h3 {
            font-size: 1.1rem;
            margin-bottom: 5px;
            color: var(--text-color);
            font-weight: 600;
        }
        
        .step-content p {
            font-size: 0.9rem;
            color: var(--text-light);
        }
        
        .ticket-container {
            display: grid;
            grid-template-columns: 2fr 1fr;
            gap: 40px;
            max-width: 1400px;
            margin: 0 auto;
        }
        
        .ticket-main {
            display: flex;
            flex-direction: column;
            gap: 40px;
        }
        
        .section-title-sm {
            font-size: 1.5rem;
            margin-bottom: 20px;
            color: var(--primary-dark);
            font-weight: 700;
            position: relative;
            padding-bottom: 10px;
        }
        
        .section-title-sm::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 50px;
            height: 3px;
            background-color: var(--primary-color);
            border-radius: 2px;
        }
        
        .ticket-options-section,
        .ticket-date-time-section,
        .ticket-checkout-section {
            background: var(--white);
            border-radius: var(--border-radius);
            padding: 30px;
            box-shadow: var(--shadow);
        }
        
        /* Сетка для билетов */
        .ticket-options {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            gap: 25px;
        }
        
        .ticket-option {
            background: var(--white);
            border-radius: var(--border-radius);
            padding: 25px;
            box-shadow: var(--shadow);
            border-left: 4px solid #e0e0e0;
            transition: var(--transition);
            display: flex;
            flex-direction: column;
        }
        
        .ticket-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 15px;
        }
        
        .ticket-name {
            font-size: 1.3rem;
            font-weight: 700;
            color: var(--text-color);
            margin: 0;
        }
        
        .ticket-price {
            font-size: 1.8rem;
            font-weight: 800;
            color: var(--primary-color);
        }
        
        .ticket-description {
            color: var(--text-light);
            margin-bottom: 20px;
            font-size: 0.95rem;
            line-height: 1.5;
        }
        
        .ticket-includes {
            list-style: none;
            padding: 0;
            margin: 0 0 20px 0;
            flex-grow: 1;
        }
        
        .ticket-includes li {
            padding: 8px 0;
            display: flex;
            align-items: center;
            gap: 10px;
            font-size: 0.9rem;
            color: var(--text-color);
        }
        
        .ticket-includes i {
            color: var(--primary-color);
            font-size: 0.9rem;
        }
        
        .ticket-controls {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 20px;
        }
        
        .quantity-control {
            display: flex;
            align-items: center;
            gap: 10px;
        }
        
        .quantity-btn {
            width: 36px;
            height: 36px;
            border: 2px solid #e0e0e0;
            background: var(--white);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            color: var(--text-color);
            transition: var(--transition);
            font-size: 0.9rem;
        }
        
        .quantity-btn:hover {
            border-color: var(--primary-color);
            color: var(--primary-color);
            transform: scale(1.1);
        }
        
        .quantity-input {
            width: 60px;
            height: 36px;
            border: 2px solid #e0e0e0;
            border-radius: var(--border-radius);
            text-align: center;
            font-size: 1rem;
            font-weight: 600;
            color: var(--text-color);
            background: var(--white);
            transition: var(--transition);
        }
        
        .quantity-input:focus {
            outline: none;
            border-color: var(--primary-color);
            box-shadow: 0 0 0 3px rgba(46, 125, 50, 0.1);
        }
        
        .ticket-subtotal {
            font-size: 1.3rem;
            font-weight: 700;
            color: var(--text-light);
            transition: var(--transition);
        }
        
        .ticket-subtotal.has-tickets {
            color: var(--primary-color);
        }
        
        /* Стили для даты и времени */
        .date-selection {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 20px;
            margin-bottom: 30px;
        }
        
        .input-group {
            display: flex;
            flex-direction: column;
            gap: 10px;
        }
        
        .input-group label {
            font-weight: 600;
            color: var(--text-color);
            display: flex;
            align-items: center;
            gap: 10px;
        }
        
        .input-group label i {
            color: var(--primary-color);
        }
        
        .input-group input,
        .input-group select {
            padding: 12px 15px;
            border: 2px solid #e0e0e0;
            border-radius: var(--border-radius);
            font-size: 1rem;
            background: var(--white);
            transition: var(--transition);
            width: 100%;
        }
        
        .input-group input:focus,
        .input-group select:focus {
            outline: none;
            border-color: var(--primary-color);
            box-shadow: 0 0 0 3px rgba(46, 125, 50, 0.1);
        }
        
        .input-with-button {
            display: flex;
            gap: 10px;
        }
        
        .input-with-button input {
            flex: 1;
        }
        
        .quick-selection {
            background: #f8f9fa;
            border-radius: var(--border-radius);
            padding: 20px;
        }
        
        .quick-selection h4 {
            font-size: 1rem;
            margin-bottom: 15px;
            color: var(--text-color);
            font-weight: 600;
        }
        
        .quick-buttons {
            display: flex;
            gap: 10px;
            flex-wrap: wrap;
            margin-bottom: 20px;
        }
        
        /* Стили для формы */
        .checkout-form {
            display: flex;
            flex-direction: column;
            gap: 25px;
        }
        
        .form-row {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 20px;
        }
        
        .form-group {
            display: flex;
            flex-direction: column;
            gap: 10px;
        }
        
        .form-group label {
            font-weight: 600;
            color: var(--text-color);
            display: flex;
            align-items: center;
            gap: 10px;
        }
        
        .form-group label i {
            color: var(--primary-color);
        }
        
        .form-group input,
        .form-group textarea,
        .form-group select {
            padding: 12px 15px;
            border: 2px solid #e0e0e0;
            border-radius: var(--border-radius);
            font-size: 1rem;
            background: var(--white);
            transition: var(--transition);
            width: 100%;
        }
        
        .form-group input:focus,
        .form-group textarea:focus,
        .form-group select:focus {
            outline: none;
            border-color: var(--primary-color);
            box-shadow: 0 0 0 3px rgba(46, 125, 50, 0.1);
        }
        
        .form-group textarea {
            resize: vertical;
            min-height: 100px;
        }
        
        .form-hint {
            font-size: 0.9rem;
            color: var(--text-light);
            margin-top: 5px;
        }
        
        .form-hint.active {
            color: var(--primary-color);
            font-weight: 600;
        }
        
        .payment-options {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
            gap: 15px;
        }
        
        .payment-option {
            border: 2px solid #e0e0e0;
            border-radius: var(--border-radius);
            padding: 15px;
            cursor: pointer;
            transition: var(--transition);
            position: relative;
        }
        
        .payment-option:hover {
            border-color: var(--primary-color);
        }
        
        .payment-option input {
            position: absolute;
            opacity: 0;
        }
        
        .payment-content {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 10px;
            color: var(--text-color);
        }
        
        .payment-content i {
            font-size: 2rem;
            color: var(--text-light);
            transition: var(--transition);
        }
        
        .payment-option input:checked + .payment-content {
            color: var(--primary-color);
        }
        
        .payment-option input:checked + .payment-content i {
            color: var(--primary-color);
        }
        
        .payment-option input:checked ~ .payment-option {
            border-color: var(--primary-color);
            background: rgba(46, 125, 50, 0.05);
        }
        
        .payment-details {
            display: none;
            background: #f8f9fa;
            border-radius: var(--border-radius);
            padding: 20px;
            margin-top: 10px;
        }
        
        .payment-details.active {
            display: block;
            animation: fadeIn 0.3s ease;
        }
        
        .promo-input {
            display: flex;
            gap: 10px;
        }
        
        .promo-input input {
            flex: 1;
        }
        
        .promo-message {
            font-size: 0.9rem;
            margin-top: 5px;
            min-height: 20px;
        }
        
        .promo-message.success {
            color: #28a745;
            font-weight: 600;
        }
        
        .promo-message.error {
            color: #dc3545;
        }
        
        /* Исправленные стили для чекбоксов */
        .checkbox-label {
            display: flex;
            align-items: flex-start;
            gap: 12px;
            cursor: pointer;
            font-size: 0.95rem;
            color: var(--text-color);
            line-height: 1.5;
            padding: 5px 0;
            position: relative;
        }
        
        .checkbox-label input[type="checkbox"] {
            position: absolute;
            opacity: 0;
            width: 0;
            height: 0;
        }
        
        .checkbox-custom {
            position: relative;
            display: inline-block;
            width: 20px;
            height: 20px;
            background: var(--white);
            border: 2px solid #e0e0e0;
            border-radius: 4px;
            flex-shrink: 0;
            margin-top: 2px;
            transition: all 0.3s ease;
        }
        
        .checkbox-label input[type="checkbox"]:checked + .checkbox-custom {
            background-color: var(--primary-color);
            border-color: var(--primary-color);
        }
        
        .checkbox-label input[type="checkbox"]:checked + .checkbox-custom::after {
            content: '';
            position: absolute;
            left: 6px;
            top: 2px;
            width: 6px;
            height: 10px;
            border: solid white;
            border-width: 0 2px 2px 0;
            transform: rotate(45deg);
        }
        
        .checkbox-label input[type="checkbox"]:focus + .checkbox-custom {
            border-color: var(--primary-color);
            box-shadow: 0 0 0 3px rgba(46, 125, 50, 0.1);
        }
        
        .checkbox-text {
            flex: 1;
            word-wrap: break-word;
            overflow-wrap: break-word;
            hyphens: auto;
        }
        
        .checkbox-label a {
            color: var(--primary-color);
            text-decoration: none;
            transition: var(--transition);
            white-space: nowrap;
        }
        
        .checkbox-label a:hover {
            text-decoration: underline;
        }
        
        /* Группа чекбоксов с правильным выравниванием */
        .checkbox-group {
            display: flex;
            flex-direction: column;
            gap: 15px;
        }
        
        .btn-block {
            width: 100%;
            padding: 16px;
            font-size: 1.1rem;
            font-weight: 600;
            margin-top: 10px;
        }
        
        .btn-block:disabled {
            opacity: 0.5;
            cursor: not-allowed;
        }
        
        .btn-block:disabled:hover {
            transform: none;
            background: var(--primary-color);
        }
        
        /* Сайдбар с заказом */
        .ticket-sidebar {
            position: relative;
        }
        
        .order-summary {
            background: var(--white);
            border-radius: var(--border-radius);
            box-shadow: var(--shadow);
            overflow: hidden;
            position: sticky;
            top: 30px;
        }
        
        .order-summary h3 {
            background: var(--primary-color);
            color: var(--white);
            padding: 20px;
            margin: 0;
            font-size: 1.3rem;
            display: flex;
            align-items: center;
            gap: 10px;
        }
        
        .summary-content {
            padding: 20px;
        }
        
        .summary-items {
            min-height: 150px;
            margin-bottom: 20px;
        }
        
        .empty-summary {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 150px;
            color: var(--text-light);
            text-align: center;
        }
        
        .empty-summary i {
            font-size: 3rem;
            margin-bottom: 15px;
            opacity: 0.3;
        }
        
        .summary-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 10px 0;
            border-bottom: 1px solid #eee;
            font-size: 0.9rem;
        }
        
        .summary-item:last-child {
            border-bottom: none;
        }
        
        .summary-totals {
            border-top: 2px solid #eee;
            padding-top: 20px;
            margin-top: 20px;
        }
        
        .total-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 8px 0;
            font-size: 1rem;
        }
        
        .discount-row {
            color: #28a745;
            font-weight: 600;
        }
        
        .final-total {
            font-size: 1.3rem;
            font-weight: 800;
            color: var(--primary-color);
            border-top: 2px solid #eee;
            margin-top: 10px;
            padding-top: 15px;
        }
        
        .summary-info {
            background: #f8f9fa;
            border-radius: var(--border-radius);
            padding: 15px;
            margin-top: 20px;
        }
        
        .info-item {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 8px 0;
            font-size: 0.85rem;
            color: var(--text-light);
        }
        
        .info-item i {
            color: var(--primary-color);
            font-size: 1rem;
        }
        
        .ticket-count-badge {
            position: absolute;
            top: -15px;
            right: -15px;
            width: 40px;
            height: 40px;
            background: var(--secondary-color);
            color: var(--white);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 800;
            font-size: 1.2rem;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
            opacity: 0;
            transform: scale(0.5);
            transition: var(--transition);
        }
        
        .ticket-count-badge.visible {
            opacity: 1;
            transform: scale(1);
        }
        
        /* FAQ секция */
        .ticket-info-section {
            padding: 60px 0;
            background: var(--bg-color);
            margin-top: 60px;
        }
        
        .faq-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 30px;
            margin-top: 40px;
        }
        
        .faq-item {
            background: var(--white);
            border-radius: var(--border-radius);
            padding: 25px;
            box-shadow: var(--shadow);
        }
        
        .faq-item h3 {
            font-size: 1.2rem;
            margin-bottom: 15px;
            color: var(--primary-color);
            font-weight: 700;
            display: flex;
            align-items: center;
            gap: 10px;
        }
        
        .faq-item p {
            color: var(--text-light);
            line-height: 1.6;
        }
        
        /* Адаптивность */
        @media (max-width: 1200px) {
            .ticket-container {
                grid-template-columns: 1fr;
            }
            
            .ticket-sidebar {
                position: static;
            }
            
            .order-summary {
                position: static;
            }
        }
        
        @media (max-width: 992px) {
            .ticket-options {
                grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
            }
            
            .date-selection {
                grid-template-columns: 1fr;
            }
            
            .form-row {
                grid-template-columns: 1fr;
            }
            
            .ticket-steps {
                flex-direction: column;
                align-items: center;
            }
            
            .step {
                width: 100%;
                max-width: 300px;
            }
            
            .checkbox-label {
                font-size: 0.9rem;
            }
        }
        
        @media (max-width: 768px) {
            .ticket-options {
                grid-template-columns: 1fr;
            }
            
            .ticket-controls {
                flex-direction: column;
                align-items: stretch;
            }
            
            .ticket-subtotal {
                text-align: center;
            }
            
            .faq-grid {
                grid-template-columns: 1fr;
            }
            
            .quick-buttons {
                justify-content: center;
            }
            
            .payment-options {
                grid-template-columns: 1fr;
            }
            
            .checkbox-label {
                align-items: flex-start;
            }
            
            .checkbox-custom {
                margin-top: 3px;
            }
        }
        
        @media (max-width: 480px) {
            .ticket-section {
                padding: 20px 0;
            }
            
            .ticket-option,
            .ticket-date-time-section,
            .ticket-checkout-section {
                padding: 20px;
            }
            
            .modal-footer {
                flex-direction: column;
                gap: 10px;
            }
            
            .modal-footer .btn {
                width: 100%;
            }
            
            .checkbox-label {
                font-size: 0.85rem;
                gap: 8px;
            }
            
            .checkbox-custom {
                width: 18px;
                height: 18px;
            }
            
            .checkbox-label input[type="checkbox"]:checked + .checkbox-custom::after {
                left: 5px;
                top: 1px;
                width: 5px;
                height: 9px;
            }
        }
    </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"><i class="fas fa-tag"></i> Цены</a></li>
                <li><a href="ticket.html" class="active"><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">Забронируйте посещение и получите скидку 10% при покупке онлайн</p>
            </div>
        </section>

        <section class="ticket-section">
            <div class="container">
                <div class="ticket-steps">
                    <div class="step active">
                        <div class="step-number">1</div>
                        <div class="step-content">
                            <h3>Выберите билеты</h3>
                            <p>Выберите тип и количество билетов</p>
                        </div>
                    </div>
                    <div class="step">
                        <div class="step-number">2</div>
                        <div class="step-content">
                            <h3>Дата и время</h3>
                            <p>Выберите дату и время посещения</p>
                        </div>
                    </div>
                    <div class="step">
                        <div class="step-number">3</div>
                        <div class="step-content">
                            <h3>Оформление</h3>
                            <p>Заполните данные и оплатите</p>
                        </div>
                    </div>
                </div>

                <div class="ticket-container">
                    <div class="ticket-main">
                        <!-- Блок с типами билетов -->
                        <div class="ticket-options-section">
                            <h2 class="section-title-sm">Выберите билеты</h2>
                            <div class="ticket-options" id="ticketOptions">
                                <!-- Статическая разметка билетов -->
                                <div class="ticket-option hover-animation" data-ticket="adult" style="border-left-color: #2E7D32;">
                                    <div class="ticket-header">
                                        <h3 class="ticket-name">Взрослый</h3>
                                        <div class="ticket-price">1 200 ₽</div>
                                    </div>
                                    <p class="ticket-description">Для посетителей от 18 лет</p>
                                    <ul class="ticket-includes">
                                        <li><i class="fas fa-check"></i> Доступ ко всем зонам</li>
                                        <li><i class="fas fa-check"></i> Карта зоопарка</li>
                                        <li><i class="fas fa-check"></i> Посещение шоу</li>
                                    </ul>
                                    <div class="ticket-controls">
                                        <div class="quantity-control">
                                            <button class="quantity-btn minus" data-ticket="adult">
                                                <i class="fas fa-minus"></i>
                                            </button>
                                            <input type="number" class="quantity-input" id="quantity-adult" value="0" min="0" max="10" data-price="1200">
                                            <button class="quantity-btn plus" data-ticket="adult">
                                                <i class="fas fa-plus"></i>
                                            </button>
                                        </div>
                                        <div class="ticket-subtotal" id="subtotal-adult">0 ₽</div>
                                    </div>
                                </div>
                                
                                <div class="ticket-option hover-animation" data-ticket="child" style="border-left-color: #2196F3;">
                                    <div class="ticket-header">
                                        <h3 class="ticket-name">Детский</h3>
                                        <div class="ticket-price">600 ₽</div>
                                    </div>
                                    <p class="ticket-description">Для детей от 3 до 17 лет</p>
                                    <ul class="ticket-includes">
                                        <li><i class="fas fa-check"></i> Доступ ко всем зонам</li>
                                        <li><i class="fas fa-check"></i> Детская карта</li>
                                        <li><i class="fas fa-check"></i> Игровая зона</li>
                                    </ul>
                                    <div class="ticket-controls">
                                        <div class="quantity-control">
                                            <button class="quantity-btn minus" data-ticket="child">
                                                <i class="fas fa-minus"></i>
                                            </button>
                                            <input type="number" class="quantity-input" id="quantity-child" value="0" min="0" max="10" data-price="600">
                                            <button class="quantity-btn plus" data-ticket="child">
                                                <i class="fas fa-plus"></i>
                                            </button>
                                        </div>
                                        <div class="ticket-subtotal" id="subtotal-child">0 ₽</div>
                                    </div>
                                </div>
                                
                                <div class="ticket-option hover-animation" data-ticket="student" style="border-left-color: #FF9800;">
                                    <div class="ticket-header">
                                        <h3 class="ticket-name">Студенческий</h3>
                                        <div class="ticket-price">800 ₽</div>
                                    </div>
                                    <p class="ticket-description">При предъявлении студенческого билета</p>
                                    <ul class="ticket-includes">
                                        <li><i class="fas fa-check"></i> Доступ ко всем зонам</li>
                                        <li><i class="fas fa-check"></i> Карта зоопарка</li>
                                    </ul>
                                    <div class="ticket-controls">
                                        <div class="quantity-control">
                                            <button class="quantity-btn minus" data-ticket="student">
                                                <i class="fas fa-minus"></i>
                                            </button>
                                            <input type="number" class="quantity-input" id="quantity-student" value="0" min="0" max="5" data-price="800">
                                            <button class="quantity-btn plus" data-ticket="student">
                                                <i class="fas fa-plus"></i>
                                            </button>
                                        </div>
                                        <div class="ticket-subtotal" id="subtotal-student">0 ₽</div>
                                    </div>
                                </div>
                                
                                <div class="ticket-option hover-animation" data-ticket="senior" style="border-left-color: #9C27B0;">
                                    <div class="ticket-header">
                                        <h3 class="ticket-name">Пенсионный</h3>
                                        <div class="ticket-price">700 ₽</div>
                                    </div>
                                    <p class="ticket-description">Для посетителей от 60 лет</p>
                                    <ul class="ticket-includes">
                                        <li><i class="fas fa-check"></i> Доступ ко всем зонам</li>
                                        <li><i class="fas fa-check"></i> Карта зоопарка</li>
                                    </ul>
                                    <div class="ticket-controls">
                                        <div class="quantity-control">
                                            <button class="quantity-btn minus" data-ticket="senior">
                                                <i class="fas fa-minus"></i>
                                            </button>
                                            <input type="number" class="quantity-input" id="quantity-senior" value="0" min="0" max="10" data-price="700">
                                            <button class="quantity-btn plus" data-ticket="senior">
                                                <i class="fas fa-plus"></i>
                                            </button>
                                        </div>
                                        <div class="ticket-subtotal" id="subtotal-senior">0 ₽</div>
                                    </div>
                                </div>
                                
                                <div class="ticket-option hover-animation" data-ticket="family" style="border-left-color: #E91E63;">
                                    <div class="ticket-header">
                                        <h3 class="ticket-name">Семейный</h3>
                                        <div class="ticket-price">3 000 ₽</div>
                                    </div>
                                    <p class="ticket-description">2 взрослых + 2 ребенка</p>
                                    <ul class="ticket-includes">
                                        <li><i class="fas fa-check"></i> Доступ ко всем зонам</li>
                                        <li><i class="fas fa-check"></i> Семейная карта</li>
                                        <li><i class="fas fa-check"></i> Скидка в кафе</li>
                                    </ul>
                                    <div class="ticket-controls">
                                        <div class="quantity-control">
                                            <button class="quantity-btn minus" data-ticket="family">
                                                <i class="fas fa-minus"></i>
                                            </button>
                                            <input type="number" class="quantity-input" id="quantity-family" value="0" min="0" max="2" data-price="3000">
                                            <button class="quantity-btn plus" data-ticket="family">
                                                <i class="fas fa-plus"></i>
                                            </button>
                                        </div>
                                        <div class="ticket-subtotal" id="subtotal-family">0 ₽</div>
                                    </div>
                                </div>
                                
                                <div class="ticket-option hover-animation" data-ticket="group" style="border-left-color: #795548;">
                                    <div class="ticket-header">
                                        <h3 class="ticket-name">Групповой</h3>
                                        <div class="ticket-price">900 ₽</div>
                                    </div>
                                    <p class="ticket-description">От 10 человек</p>
                                    <ul class="ticket-includes">
                                        <li><i class="fas fa-check"></i> Доступ ко всем зонам</li>
                                        <li><i class="fas fa-check"></i> Экскурсовод</li>
                                        <li><i class="fas fa-check"></i> Групповая скидка</li>
                                    </ul>
                                    <div class="ticket-controls">
                                        <div class="quantity-control">
                                            <button class="quantity-btn minus" data-ticket="group">
                                                <i class="fas fa-minus"></i>
                                            </button>
                                            <input type="number" class="quantity-input" id="quantity-group" value="0" min="0" max="50" data-price="900">
                                            <button class="quantity-btn plus" data-ticket="group">
                                                <i class="fas fa-plus"></i>
                                            </button>
                                        </div>
                                        <div class="ticket-subtotal" id="subtotal-group">0 ₽</div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Блок с датой и временем -->
                        <div class="ticket-date-time-section">
                            <h2 class="section-title-sm">Дата и время посещения</h2>
                            <div class="ticket-date-time">
                                <div class="date-selection">
                                    <div class="input-group">
                                        <label for="visitDate">
                                            <i class="fas fa-calendar-alt"></i> Дата посещения
                                        </label>
                                        <div class="input-with-button">
                                            <input type="date" id="visitDate" required>
                                            <button type="button" class="btn btn-small btn-outline" id="openCalendar">
                                                <i class="fas fa-calendar"></i>
                                            </button>
                                        </div>
                                    </div>

                                    <div class="input-group">
                                        <label for="visitTime">
                                            <i class="fas fa-clock"></i> Время посещения
                                        </label>
                                        <select id="visitTime" required>
                                            <!-- Время будет заполнено через JavaScript -->
                                        </select>
                                    </div>
                                </div>

                                <div class="quick-selection">
                                    <h4>Быстрый выбор даты:</h4>
                                    <div class="quick-buttons">
                                        <button class="btn btn-small date-quick-select" data-days="0">
                                            Сегодня
                                        </button>
                                        <button class="btn btn-small date-quick-select" data-days="1">
                                            Завтра
                                        </button>
                                        <button class="btn btn-small date-quick-select" data-days="7">
                                            Через неделю
                                        </button>
                                        <button class="btn btn-small date-quick-select" data-days="14">
                                            Через 2 недели
                                        </button>
                                    </div>

                                    <h4>Рекомендуемое время:</h4>
                                    <div class="quick-buttons">
                                        <button class="btn btn-small time-quick-select" data-time="10:00">
                                            10:00 Утро
                                        </button>
                                        <button class="btn btn-small time-quick-select" data-time="12:00">
                                            12:00 День
                                        </button>
                                        <button class="btn btn-small time-quick-select" data-time="14:00">
                                            14:00 После обеда
                                        </button>
                                        <button class="btn btn-small time-quick-select" data-time="16:00">
                                            16:00 Вечер
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Блок оформления заказа -->
                        <div class="ticket-checkout-section">
                            <h2 class="section-title-sm">Оформление заказа</h2>
                            <div class="ticket-checkout">
                                <form id="checkoutForm" class="checkout-form">
                                    <div class="form-group">
                                        <label for="visitorName">
                                            <i class="fas fa-user"></i> ФИО *
                                        </label>
                                        <input type="text" id="visitorName" required
                                               placeholder="Иванов Иван Иванович">
                                    </div>

                                    <div class="form-row">
                                        <div class="form-group">
                                            <label for="visitorEmail">
                                                <i class="fas fa-envelope"></i> Email *
                                            </label>
                                            <input type="email" id="visitorEmail" required
                                                   placeholder="example@mail.ru">
                                        </div>

                                        <div class="form-group">
                                            <label for="visitorPhone">
                                                <i class="fas fa-phone"></i> Телефон *
                                            </label>
                                            <input type="tel" id="visitorPhone" required
                                                   placeholder="+7 (999) 123-45-67">
                                        </div>
                                    </div>

                                    <div class="form-group">
                                        <label for="visitorCount">
                                            <i class="fas fa-users"></i> Количество человек в группе
                                        </label>
                                        <input type="number" id="visitorCount"
                                               min="1" max="50" value="1">
                                        <div class="form-hint" id="groupDiscount">
                                            Для групповой скидки нужно минимум 10 человек
                                        </div>
                                    </div>

                                    <div class="form-group">
                                        <label for="specialRequests">
                                            <i class="fas fa-comment"></i> Особые пожелания
                                        </label>
                                        <textarea id="specialRequests"
                                                  placeholder="Особые требования, аллергии и т.д."
                                                  rows="3"></textarea>
                                    </div>

                                    <div class="form-group">
                                        <label>
                                            <i class="fas fa-credit-card"></i> Способ оплаты
                                        </label>
                                        <div class="payment-options">
                                            <label class="payment-option">
                                                <input type="radio" name="payment" value="card" checked>
                                                <div class="payment-content">
                                                    <i class="fas fa-credit-card"></i>
                                                    <span>Банковская карта</span>
                                                </div>
                                            </label>
                                            <label class="payment-option">
                                                <input type="radio" name="payment" value="paypal">
                                                <div class="payment-content">
                                                    <i class="fab fa-cc-paypal"></i>
                                                    <span>PayPal</span>
                                                </div>
                                            </label>
                                        </div>
                                    </div>

                                    <div class="payment-details" id="cardDetails">
                                        <div class="form-row">
                                            <div class="form-group">
                                                <label for="cardNumber">Номер карты *</label>
                                                <input type="text" id="cardNumber"
                                                       placeholder="1234 5678 9012 3456"
                                                       pattern="\d{4} \d{4} \d{4} \d{4}">
                                            </div>
                                        </div>
                                        <div class="form-row">
                                            <div class="form-group">
                                                <label for="cardExpiry">Срок действия *</label>
                                                <input type="text" id="cardExpiry"
                                                       placeholder="ММ/ГГ"
                                                       pattern="\d{2}/\d{2}">
                                            </div>
                                            <div class="form-group">
                                                <label for="cardCVC">CVC *</label>
                                                <input type="text" id="cardCVC"
                                                       placeholder="123"
                                                       pattern="\d{3}">
                                            </div>
                                        </div>
                                    </div>

                                    <div class="payment-details" id="paypalDetails">
                                        <div class="form-group">
                                            <p>Вы будете перенаправлены на сайт PayPal для завершения оплаты</p>
                                        </div>
                                    </div>

                                    <div class="form-group">
                                        <label for="promoCode">
                                            <i class="fas fa-tag"></i> Промокод
                                        </label>
                                        <div class="promo-input">
                                            <input type="text" id="promoCode"
                                                   placeholder="Введите промокод">
                                            <button type="button" class="btn btn-small" id="applyPromo">
                                                Применить
                                            </button>
                                        </div>
                                        <div class="promo-message" id="promoMessage"></div>
                                    </div>

                                    <div class="checkbox-group">
                                        <label class="checkbox-label">
                                            <input type="checkbox" id="termsAgree" required>
                                            <span class="checkbox-custom"></span>
                                            <span class="checkbox-text">
                                                Я согласен с <a href="#">правилами посещения</a> и
                                                <a href="#">политикой конфиденциальности</a> *
                                            </span>
                                        </label>
                                        
                                        <label class="checkbox-label">
                                            <input type="checkbox" id="newsletterSubscribe">
                                            <span class="checkbox-custom"></span>
                                            <span class="checkbox-text">
                                                Подписаться на рассылку новостей и специальных предложений
                                            </span>
                                        </label>
                                    </div>

                                    <button type="submit" class="btn btn-primary btn-large btn-block" id="checkoutBtn" disabled>
                                        <i class="fas fa-lock"></i> Перейти к оплате
                                        <span class="btn-loading"></span>
                                    </button>
                                </form>
                            </div>
                        </div>
                    </div>

                    <div class="ticket-sidebar">
                        <div class="order-summary">
                            <h3><i class="fas fa-shopping-cart"></i> Ваш заказ</h3>

                            <div class="summary-content">
                                <div class="summary-items" id="ticketSummary">
                                    <div id="emptySummary" class="empty-summary">
                                        <i class="fas fa-ticket-alt"></i>
                                        <p>Выберите билеты</p>
                                    </div>
                                </div>

                                <div class="summary-totals">
                                    <div class="total-row">
                                        <span>Сумма:</span>
                                        <span id="totalAmount">0 ₽</span>
                                    </div>
                                    <div class="total-row discount-row" style="display: none;">
                                        <span>Скидка:</span>
                                        <span id="discountAmount">0 ₽</span>
                                    </div>
                                    <div class="total-row final-total">
                                        <span>Итого к оплате:</span>
                                        <span id="finalTotal">0 ₽</span>
                                    </div>
                                </div>

                                <div class="summary-info">
                                    <div class="info-item">
                                        <i class="fas fa-check-circle"></i>
                                        <span>Мгновенное подтверждение</span>
                                    </div>
                                    <div class="info-item">
                                        <i class="fas fa-undo"></i>
                                        <span>Бесплатная отмена за 24 часа</span>
                                    </div>
                                    <div class="info-item">
                                        <i class="fas fa-mobile-alt"></i>
                                        <span>Билеты на телефон</span>
                                    </div>
                                    <div class="info-item">
                                        <i class="fas fa-gift"></i>
                                        <span>Скидка 10% онлайн</span>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="ticket-count-badge" id="ticketCount">
                            <span>0</span>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <section class="ticket-info-section">
            <div class="container">
                <h2 class="section-title">Часто задаваемые вопросы</h2>
                <div class="faq-grid">
                    <div class="faq-item">
                        <h3><i class="fas fa-qrcode"></i> Как получить билеты после оплаты?</h3>
                        <p>Билеты будут отправлены на указанный email и доступны в вашем личном кабинете. Также вы можете показать QR-код на телефоне при входе в зоопарк.</p>
                    </div>
                    <div class="faq-item">
                        <h3><i class="fas fa-calendar-edit"></i> Можно ли изменить дату посещения?</h3>
                        <p>Да, вы можете бесплатно изменить дату посещения за 24 часа до визита через личный кабинет или связавшись с нами по телефону +7 (495) 123-45-67.</p>
                    </div>
                    <div class="faq-item">
                        <h3><i class="fas fa-users"></i> Есть ли скидки для групп?</h3>
                        <p>Да, для групп от 10 человек предоставляется скидка 10%. Для групп от 20 человек - скидка 15%, от 30 человек - скидка 20%.</p>
                    </div>
                    <div class="faq-item">
                        <h3><i class="fas fa-store"></i> Можно ли купить билет на месте?</h3>
                        <p>Да, но онлайн билеты на 10% дешевле. Также при покупке онлайн вы избегаете очередей и гарантируете себе место на выбранное время.</p>
                    </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>

<!-- Модальное окно успешного заказа -->
<div class="modal" id="successModal">
    <div class="modal-content">
        <div class="modal-header">
            <h2><i class="fas fa-check-circle"></i> Заказ успешно оформлен!</h2>
            <button class="modal-close">
                <i class="fas fa-times"></i>
            </button>
        </div>
        <div class="modal-body">
            <div class="order-confirmation">
                <div class="confirmation-icon">
                    <i class="fas fa-check-circle"></i>
                </div>

                <div class="order-details">
                    <div class="order-detail">
                        <span>Номер заказа:</span>
                        <strong id="orderNumber">000001</strong>
                    </div>
                    <div class="order-detail">
                        <span>Дата посещения:</span>
                        <strong id="orderDate">01.01.2025</strong>
                    </div>
                    <div class="order-detail">
                        <span>Время посещения:</span>
                        <strong id="orderTime">10:00</strong>
                    </div>
                    <div class="order-detail">
                        <span>Сумма:</span>
                        <strong id="orderTotal">0 ₽</strong>
                    </div>
                </div>

                <div class="order-tickets" id="orderTickets">
                    <!-- Билеты будут добавлены через JavaScript -->
                </div>

                <div class="confirmation-info">
                    <p><i class="fas fa-envelope"></i> Подтверждение заказа отправлено на ваш email</p>
                    <p><i class="fas fa-info-circle"></i> Сохраните номер заказа для входа в зоопарк</p>
                    <p><i class="fas fa-qrcode"></i> QR-код для входа будет доступен в личном кабинете</p>
                </div>
            </div>
        </div>
        <div class="modal-footer">
            <button class="btn btn-outline" id="printTicket">
                <i class="fas fa-print"></i> Распечатать билет
            </button>
            <button class="btn btn-primary" id="emailTicket">
                <i class="fas fa-paper-plane"></i> Отправить на email
            </button>
            <button class="btn btn-primary" onclick="window.location.href='index.html'">
                <i class="fas fa-home"></i> На главную
            </button>
        </div>
    </div>
</div>

<script src="js/main.js"></script>
<script src="js/ticket.js"></script>
<script src="js/auth-manager.js"></script>
</body>
</html>