/
varsl
/
HTML-CSS
Обзор
Документация
Войти
/
varsl
/
HTML-CSS
Код
Запросы
0
Задачи
Вики
Пакеты
0
Релизы
0
CI/CD
Аналитика
Безопасность
master
frontend/animals.html
259 строк
12 KB
varsl
Изменение логики загрузки видео
21 дек 2025, 23:46
21 дек 2025, 23:46
1a2eb94
Код
Авторство
О чём код?
<!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> /* Добавляем стили для YouTube видео */ .youtube-modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.9); display: flex; align-items: center; justify-content: center; z-index: 9999; } .youtube-modal-content { width: 90%; max-width: 900px; background: transparent; border: none; box-shadow: none; } .youtube-video-container { position: relative; padding-bottom: 56.25%; /* 16:9 соотношение */ height: 0; overflow: hidden; } .youtube-video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none; } .animal-video { width: 100%; max-height: 70vh; background: #000; } </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" class="active"><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"><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">Более 500 видов животных со всего мира</p> </div> </section> <section class="animals-section"> <div class="container"> <div class="animals-controls"> <div class="search-box"> <i class="fas fa-search"></i> <input type="text" id="animalSearch" placeholder="Поиск животных..."> </div> <div class="filter-controls"> <div class="filter-group"> <span class="filter-label">Фильтр:</span> <div class="filter-buttons"> <button class="animal-filter active" data-filter="all">Все</button> <button class="animal-filter" data-filter="mammal">Млекопитающие</button> <button class="animal-filter" data-filter="bird">Птицы</button> <button class="animal-filter" data-filter="reptile">Рептилии</button> <button class="animal-filter" data-filter="fish">Рыбы</button> </div> </div> <div class="sort-group"> <span class="sort-label">Сортировка:</span> <select id="sortAnimals" class="sort-select"> <option value="name">По названию</option> <option value="size">По размеру</option> <option value="lifespan">По продолжительности жизни</option> </select> </div> </div> <div class="animals-actions"> <button class="btn btn-outline" id="randomAnimal"> <i class="fas fa-random"></i> Случайное животное </button> <button class="btn btn-primary" id="compareAnimals"> <i class="fas fa-balance-scale"></i> Сравнить </button> </div> </div> <div class="animals-info"> <div class="info-card"> <i class="fas fa-paw"></i> <div> <h3>500+ видов</h3> <p>животных в коллекции</p> </div> </div> <div class="info-card"> <i class="fas fa-shield-alt"></i> <div> <h3>15 программ</h3> <p>по сохранению видов</p> </div> </div> <div class="info-card"> <i class="fas fa-heart"></i> <div> <h3>50 ветеринаров</h3> <p>работают круглосуточно</p> </div> </div> </div> <div class="animals-count"> <span id="animalCount">Загрузка...</span> </div> <div class="animals-grid" id="animalsGrid"> <!-- Животные будут загружены через JavaScript --> </div> <div class="animals-features"> <div class="feature-highlight"> <div class="feature-icon"> <i class="fas fa-volume-up"></i> </div> <h3>Послушайте звуки животных</h3> <p>Нажмите на кнопку "Послушать" на карточке животного, чтобы услышать его голос</p> </div> <div class="feature-highlight"> <div class="feature-icon"> <i class="fas fa-video"></i> </div> <h3>Смотрите видео</h3> <p>Каждое животное имеет видеоролик с его участием</p> </div> <div class="feature-highlight"> <div class="feature-icon"> <i class="fas fa-map-marker-alt"></i> </div> <h3>Найдите на карте</h3> <p>Узнайте, где в нашем зоопарке живёт каждое животное</p> </div> </div> </div> </section> <section class="conservation-section"> <div class="container"> <h2 class="section-title">Программы сохранения видов</h2> <div class="conservation-grid"> <div class="conservation-card"> <img src="assets/images/lion.jpg" alt="Львы"> <div class="conservation-content"> <h3>Программа сохранения львов</h3> <p>Участвуем в международной программе по сохранению африканских львов</p> <span class="conservation-status">Уязвимый вид</span> </div> </div> <div class="conservation-card"> <img src="assets/images/panda.jpg" alt="Панды"> <div class="conservation-content"> <h3>Программа сохранения панд</h3> <p>Единственный зоопарк в России, участвующий в программе сохранения больших панд</p> <span class="conservation-status">Уязвимый вид</span> </div> </div> <div class="conservation-card"> <img src="assets/images/elephant.jpg" alt="Слоны"> <div class="conservation-content"> <h3>Программа сохранения слонов</h3> <p>Поддерживаем программы по защите слонов от браконьерства</p> <span class="conservation-status">Находящийся под угрозой</span> </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>© 2025 Зоопарк Дикий Мир. Все права защищены.</p> </div> </div> </footer> </div> <!-- Модальное окно для деталей животного --> <div class="modal" id="animalDetailsModal"> <!-- Контент будет загружен через JavaScript --> </div> <!-- Модальное окно для видео (будет создаваться динамически) --> <script src="js/main.js"></script> <script src="js/animals.js"></script> <script src="js/auth-manager.js"></script> </body> </html>