/
Jenison4ik
/
SeaSearch_Alt
Обзор
Документация
Войти
/
Jenison4ik
/
SeaSearch_Alt
Код
Запросы
0
Задачи
Вики
Пакеты
0
Релизы
0
CI/CD
Аналитика
Безопасность
master
index.html
115 строк
5 KB
Jenison4ik
first_commit
04 мар 2026, 05:34
04 мар 2026, 05:34
d740bbc
Код
Авторство
О чём код?
<!DOCTYPE html> <html lang="ru"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- Заголовок вкладки браузера --> <title>SeaSearch — Места у воды во Владивостоке</title> <!-- Подключаем стили --> <link rel="stylesheet" href="styles.css"> </head> <body> <!-- ===== ХЕДЕР ===== --> <!-- Верхняя часть страницы: логотип, название, город --> <header class="header"> <div class="header__inner"> <!-- Иконка волны (SVG инлайн, чтобы не тянуть внешние библиотеки) --> <svg class="header__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <path d="M2 6c.6.5 1.2 1 2.5 1C7 7 7 5 9.5 5c2.6 0 2.4 2 5 2 2.5 0 2.5-2 5-2 1.3 0 1.9.5 2.5 1"/> <path d="M2 12c.6.5 1.2 1 2.5 1 2.5 0 2.5-2 5-2 2.6 0 2.4 2 5 2 2.5 0 2.5-2 5-2 1.3 0 1.9.5 2.5 1"/> <path d="M2 18c.6.5 1.2 1 2.5 1 2.5 0 2.5-2 5-2 2.6 0 2.4 2 5 2 2.5 0 2.5-2 5-2 1.3 0 1.9.5 2.5 1"/> </svg> <!-- Текстовая часть хедера --> <div class="header__text"> <h1 class="header__title">SeaSearch</h1> <p class="header__subtitle">Владивосток</p> </div> </div> </header> <!-- ===== ФИЛЬТРЫ ===== --> <!-- Кнопки фильтрации по типу места: Все / Пляж / Бухта / Гавань --> <nav class="filters"> <!-- data-type хранит значение для фильтра; пустая строка = показать все --> <button class="filters__btn filters__btn--active" data-type="">Все</button> <button class="filters__btn" data-type="Пляж">Пляж</button> <button class="filters__btn" data-type="Бухта">Бухта</button> <button class="filters__btn" data-type="Гавань">Гавань</button> </nav> <!-- ===== ОСНОВНОЙ КОНТЕНТ ===== --> <main class="main"> <!-- Индикатор загрузки — показывается, пока данные не пришли из API --> <div class="loader" id="loader"> <div class="loader__spinner"></div> <p class="loader__text">Загрузка мест…</p> </div> <!-- Сообщение об ошибке (скрыто по умолчанию) --> <div class="error" id="error" hidden> <p class="error__text">Не удалось загрузить данные. Попробуйте позже.</p> <button class="error__btn" id="retryBtn">Повторить</button> </div> <!-- Список карточек мест — заполняется динамически из JS --> <div class="cards" id="cards"></div> <!-- Сообщение, если нет мест по текущему фильтру --> <div class="empty" id="empty" hidden> <p class="empty__text">Мест не найдено</p> </div> </main> <!-- ===== МОДАЛЬНОЕ ОКНО ДЕТАЛЬНОГО ПРОСМОТРА ===== --> <!-- Появляется при клике на карточку, показывает полную информацию о месте --> <div class="modal" id="modal" hidden> <!-- Оверлей (затемнённый фон) — при клике закрывает модалку --> <div class="modal__overlay" id="modalOverlay"></div> <!-- Контент модалки --> <div class="modal__content"> <!-- Кнопка закрытия --> <button class="modal__close" id="modalClose" aria-label="Закрыть"> <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <line x1="18" y1="6" x2="6" y2="18"/> <line x1="6" y1="6" x2="18" y2="18"/> </svg> </button> <!-- Изображение места (фото из API) --> <div class="modal__image-wrap"> <img class="modal__image" id="modalImage" src="" alt=""> </div> <!-- Текстовый блок модалки --> <div class="modal__body"> <!-- Бейдж с типом (Пляж / Бухта / Гавань) --> <span class="badge" id="modalBadge"></span> <!-- Название места --> <h2 class="modal__title" id="modalTitle"></h2> <!-- Адрес (если есть) --> <p class="modal__address" id="modalAddress"></p> <!-- Описание (рендерится через Showdown.js из Markdown) --> <div class="modal__description" id="modalDescription"></div> </div> </div> </div> <!-- ===== ПОДВАЛ (О ПРОЕКТЕ) ===== --> <footer class="footer"> <p class="footer__text">SeaSearch © 2025 — Места у воды во Владивостоке</p> </footer> <!-- Showdown.js — конвертер Markdown → HTML (CDN) --> <script src="https://cdn.jsdelivr.net/npm/showdown@latest/dist/showdown.min.js"></script> <!-- Основной скрипт приложения --> <script src="app.js"></script> </body> </html>