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

frontend/contacts.html
665 строк27 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>
        .contacts-hero {
            background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url('assets/images/zoo-entrance.jpg');
            background-size: cover;
            background-position: center;
            color: var(--white);
            padding: 6rem 0;
            text-align: center;
        }

        .contacts-hero h1 {
            font-size: 3.5rem;
            margin-bottom: 1rem;
        }

        .contacts-section {
            padding: 4rem 0;
        }

        .contact-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 3rem;
            margin-bottom: 4rem;
        }

        .contact-info {
            background: var(--white);
            border-radius: var(--border-radius);
            padding: 2.5rem;
            box-shadow: var(--shadow);
        }

        .contact-item {
            display: flex;
            align-items: flex-start;
            gap: 1.5rem;
            margin-bottom: 2rem;
            padding-bottom: 2rem;
            border-bottom: 1px solid #eee;
        }

        .contact-item:last-child {
            border-bottom: none;
            margin-bottom: 0;
            padding-bottom: 0;
        }

        .contact-icon {
            width: 60px;
            height: 60px;
            background: var(--primary-color);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--white);
            font-size: 1.5rem;
            flex-shrink: 0;
        }

        .contact-content h3 {
            margin-bottom: 0.5rem;
            color: var(--text-color);
        }

        .contact-content p {
            color: var(--text-light);
            line-height: 1.5;
        }

        .contact-form-container {
            background: var(--white);
            border-radius: var(--border-radius);
            padding: 2.5rem;
            box-shadow: var(--shadow);
        }

        .form-title {
            margin-bottom: 2rem;
            color: var(--text-color);
            font-size: 1.8rem;
        }

        .contact-form .form-group {
            margin-bottom: 1.5rem;
        }

        .contact-form label {
            display: block;
            margin-bottom: 0.5rem;
            font-weight: 500;
            color: var(--text-color);
        }

        .contact-form input,
        .contact-form select,
        .contact-form textarea {
            width: 100%;
            padding: 0.75rem 1rem;
            border: 1px solid #ddd;
            border-radius: var(--border-radius);
            font-size: 1rem;
            transition: var(--transition);
        }

        .contact-form input:focus,
        .contact-form select:focus,
        .contact-form textarea:focus {
            outline: none;
            border-color: var(--primary-color);
            box-shadow: 0 0 0 3px rgba(46, 125, 50, 0.1);
        }

        .contact-form textarea {
            resize: vertical;
            min-height: 150px;
        }

        .form-row {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 1rem;
        }

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

        .map-container {
            height: 400px;
            border-radius: var(--border-radius);
            overflow: hidden;
            box-shadow: var(--shadow);
            margin-top: 2rem;
        }

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

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

        .faq-item {
            background: var(--white);
            border-radius: var(--border-radius);
            padding: 1.5rem;
            box-shadow: var(--shadow);
        }

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

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

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

        .department-card {
            background: var(--white);
            border-radius: var(--border-radius);
            padding: 2rem;
            box-shadow: var(--shadow);
            text-align: center;
            transition: var(--transition);
        }

        .department-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 20px rgba(0,0,0,0.1);
        }

        .department-icon {
            font-size: 2.5rem;
            color: var(--primary-color);
            margin-bottom: 1rem;
        }

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

        .hours-table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 1rem;
        }

        .hours-table tr {
            border-bottom: 1px solid #eee;
        }

        .hours-table tr:last-child {
            border-bottom: none;
        }

        .hours-table td {
            padding: 1rem 0;
        }

        .hours-table td:first-child {
            font-weight: 500;
        }

        .hours-table td:last-child {
            text-align: right;
            color: var(--text-light);
        }

        .emergency-contact {
            background: #fff5f5;
            border-radius: var(--border-radius);
            padding: 2rem;
            margin-top: 2rem;
            border-left: 4px solid #f56565;
        }

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

            .form-row {
                grid-template-columns: 1fr;
            }

            .faq-grid {
                grid-template-columns: 1fr;
            }

            .departments-grid {
                grid-template-columns: repeat(2, 1fr);
            }
        }

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

            .contact-item {
                flex-direction: column;
                text-align: center;
            }

            .contact-icon {
                margin: 0 auto;
            }
        }
    </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"><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" class="active"><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="contacts-hero">
            <div class="container">
                <h1>Контакты</h1>
                <p>Свяжитесь с нами любым удобным способом. Мы всегда рады помочь!</p>
            </div>
        </section>

        <section class="contacts-section">
            <div class="container">
                <div class="contact-grid">
                    <div class="contact-info">
                        <h2 class="section-title-sm">Контактная информация</h2>

                        <div class="contact-item">
                            <div class="contact-icon">
                                <i class="fas fa-map-marker-alt"></i>
                            </div>
                            <div class="contact-content">
                                <h3>Адрес</h3>
                                <p>
                                    г. Москва, ул. Зоологическая, 123<br>
                                    Индекс: 123456
                                </p>
                            </div>
                        </div>

                        <div class="contact-item">
                            <div class="contact-icon">
                                <i class="fas fa-phone"></i>
                            </div>
                            <div class="contact-content">
                                <h3>Телефоны</h3>
                                <p>
                                    Справочная: +7 (495) 123-45-67<br>
                                    Кассы: +7 (495) 123-45-68<br>
                                    Экскурсии: +7 (495) 123-45-69
                                </p>
                            </div>
                        </div>

                        <div class="contact-item">
                            <div class="contact-icon">
                                <i class="fas fa-envelope"></i>
                            </div>
                            <div class="contact-content">
                                <h3>Email</h3>
                                <p>
                                    Общие вопросы: info@wildzoo.ru<br>
                                    Экскурсии: tours@wildzoo.ru<br>
                                    Пресса: press@wildzoo.ru
                                </p>
                            </div>
                        </div>

                        <div class="contact-item">
                            <div class="contact-icon">
                                <i class="fas fa-clock"></i>
                            </div>
                            <div class="contact-content">
                                <h3>Режим работы</h3>
                                <p>
                                    Зоопарк: ежедневно с 9:00 до 20:00<br>
                                    Кассы: с 9:00 до 19:00<br>
                                    Администрация: пн-пт с 10:00 до 18:00
                                </p>
                            </div>
                        </div>

                        <div class="emergency-contact">
                            <h3><i class="fas fa-exclamation-triangle"></i> Экстренная связь</h3>
                            <p>В случае экстренной ситуации звоните: +7 (495) 123-45-70</p>
                            <small>Круглосуточная служба безопасности и ветеринарная помощь</small>
                        </div>
                    </div>

                    <div class="contact-form-container">
                        <h2 class="form-title">Напишите нам</h2>

                        <form class="contact-form" id="contactForm">
                            <div class="form-row">
                                <div class="form-group">
                                    <label for="contactName">ФИО *</label>
                                    <input type="text" id="contactName" required placeholder="Иванов Иван Иванович">
                                </div>

                                <div class="form-group">
                                    <label for="contactEmail">Email *</label>
                                    <input type="email" id="contactEmail" required placeholder="example@mail.ru">
                                </div>
                            </div>

                            <div class="form-group">
                                <label for="contactPhone">Телефон</label>
                                <input type="tel" id="contactPhone" placeholder="+7 (999) 123-45-67">
                            </div>

                            <div class="form-group">
                                <label for="contactSubject">Тема обращения *</label>
                                <select id="contactSubject" required>
                                    <option value="">Выберите тему</option>
                                    <option value="general">Общие вопросы</option>
                                    <option value="tickets">Билеты и цены</option>
                                    <option value="excursions">Экскурсии</option>
                                    <option value="animals">Вопросы о животных</option>
                                    <option value="events">Мероприятия</option>
                                    <option value="feedback">Отзывы и предложения</option>
                                    <option value="partnership">Сотрудничество</option>
                                    <option value="other">Другое</option>
                                </select>
                            </div>

                            <div class="form-group">
                                <label for="contactMessage">Сообщение *</label>
                                <textarea id="contactMessage" required placeholder="Опишите ваш вопрос или предложение..."></textarea>
                            </div>

                            <div class="form-group">
                                <label class="checkbox-label">
                                    <input type="checkbox" id="contactAgree" required>
                                    <span>Я согласен на обработку персональных данных *</span>
                                </label>
                            </div>

                            <div class="form-group">
                                <label class="checkbox-label">
                                    <input type="checkbox" id="contactNewsletter">
                                    <span>Хочу получать новости и специальные предложения</span>
                                </label>
                            </div>

                            <button type="submit" class="btn btn-primary btn-large btn-block">
                                <i class="fas fa-paper-plane"></i> Отправить сообщение
                            </button>
                        </form>
                    </div>
                </div>

                <div class="map-section">
                    <h2 class="section-title">Как добраться</h2>

                    <div class="map-container">
                        <iframe
                                src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2245.372951239775!2d37.57626031583824!3d55.76117300000001!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x0!2zNTXCsDQ1JzQwLjIiTiAzN8KwMzQnNDIuNCJF!5e0!3m2!1sru!2sru!4v1620000000000!5m2!1sru!2sru"
                                width="100%"
                                height="100%"
                                style="border:0;"
                                allowfullscreen=""
                                loading="lazy">
                        </iframe>
                    </div>

                    <div class="transport-info" style="margin-top: 2rem;">
                        <div class="form-row">
                            <div class="form-group">
                                <h4><i class="fas fa-subway"></i> Метро</h4>
                                <p>Станция "Зоологическая" (красная линия), выход №4. 10 минут пешком.</p>
                            </div>

                            <div class="form-group">
                                <h4><i class="fas fa-bus"></i> Автобус</h4>
                                <p>Маршруты №123, 456, 789 до остановки "Зоопарк".</p>
                            </div>

                            <div class="form-group">
                                <h4><i class="fas fa-car"></i> Автомобиль</h4>
                                <p>Бесплатная парковка на 500 мест (ул. Зоологическая, 125).</p>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="departments-section">
                    <h2 class="section-title">Отделы и службы</h2>

                    <div class="departments-grid">
                        <div class="department-card">
                            <div class="department-icon">
                                <i class="fas fa-ticket-alt"></i>
                            </div>
                            <h3>Кассы</h3>
                            <p>Продажа билетов, информация о ценах и скидках</p>
                            <p><strong>Телефон:</strong> +7 (495) 123-45-68</p>
                        </div>

                        <div class="department-card">
                            <div class="department-icon">
                                <i class="fas fa-graduation-cap"></i>
                            </div>
                            <h3>Экскурсионный отдел</h3>
                            <p>Организация экскурсий, мастер-классов и мероприятий</p>
                            <p><strong>Телефон:</strong> +7 (495) 123-45-69</p>
                        </div>

                        <div class="department-card">
                            <div class="department-icon">
                                <i class="fas fa-heart"></i>
                            </div>
                            <h3>Ветеринарная служба</h3>
                            <p>Забота о здоровье животных, консультации</p>
                            <p><strong>Телефон:</strong> +7 (495) 123-45-71</p>
                        </div>

                        <div class="department-card">
                            <div class="department-icon">
                                <i class="fas fa-newspaper"></i>
                            </div>
                            <h3>Пресс-служба</h3>
                            <p>СМИ, партнерства, информационные запросы</p>
                            <p><strong>Телефон:</strong> +7 (495) 123-45-72</p>
                        </div>
                    </div>
                </div>

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

                    <div class="faq-grid">
                        <div class="faq-item">
                            <div class="faq-question">Можно ли прийти с собакой?</div>
                            <p>Посещение с домашними животными запрещено по правилам безопасности. Для посетителей с собаками есть специальная зона временного содержания.</p>
                        </div>

                        <div class="faq-item">
                            <div class="faq-question">Есть ли камера хранения?</div>
                            <p>Да, в зоопарке есть бесплатная камера хранения у главного входа. Размер ячеек: 30×40×50 см.</p>
                        </div>

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

                        <div class="faq-item">
                            <div class="faq-question">Доступен ли Wi-Fi в зоопарке?</div>
                            <p>Бесплатный Wi-Fi доступен во всех основных зонах зоопарка. Имя сети: WildZoo_Free.</p>
                        </div>
                    </div>
                </div>

                <div class="opening-hours">
                    <h2 class="section-title-sm">Часы работы</h2>

                    <table class="hours-table">
                        <tr>
                            <td>Понедельник - Пятница</td>
                            <td>9:00 - 20:00</td>
                        </tr>
                        <tr>
                            <td>Суббота</td>
                            <td>9:00 - 21:00</td>
                        </tr>
                        <tr>
                            <td>Воскресенье</td>
                            <td>9:00 - 20:00</td>
                        </tr>
                        <tr>
                            <td>Праздничные дни</td>
                            <td>9:00 - 21:00</td>
                        </tr>
                        <tr>
                            <td>Кассы закрываются</td>
                            <td>За 1 час до закрытия</td>
                        </tr>
                    </table>

                    <div class="note" style="margin-top: 1rem; font-size: 0.9rem; color: var(--text-light);">
                        <p><i class="fas fa-info-circle"></i> Последний вход за 1 час до закрытия. Время работы может меняться в особых случаях.</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>

<script src="js/main.js"></script>
<script>
    document.addEventListener('DOMContentLoaded', function() {
        const contactForm = document.getElementById('contactForm');

        if (contactForm) {
            contactForm.addEventListener('submit', function(e) {
                e.preventDefault();

                const submitBtn = this.querySelector('button[type="submit"]');
                const originalText = submitBtn.innerHTML;

                submitBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Отправка...';
                submitBtn.disabled = true;

                setTimeout(() => {
                    submitBtn.innerHTML = originalText;
                    submitBtn.disabled = false;

                    alert('Спасибо за ваше сообщение! Мы свяжемся с вами в ближайшее время.');
                    contactForm.reset();
                }, 2000);
            });
        }

        const phoneInputs = document.querySelectorAll('input[type="tel"]');
        phoneInputs.forEach(input => {
            input.addEventListener('input', function(e) {
                let value = e.target.value.replace(/\D/g, '');

                if (value.length > 0) {
                    if (!value.startsWith('7') && !value.startsWith('8')) {
                        value = '7' + value;
                    }

                    let formatted = '+7';

                    if (value.length > 1) {
                        formatted += ' (' + value.substring(1, 4);
                    }
                    if (value.length > 4) {
                        formatted += ') ' + value.substring(4, 7);
                    }
                    if (value.length > 7) {
                        formatted += '-' + value.substring(7, 9);
                    }
                    if (value.length > 9) {
                        formatted += '-' + value.substring(9, 11);
                    }

                    e.target.value = formatted;
                }
            });
        });
    });
</script>
<script src="js/auth-manager.js"></script>
</body>
</html>