Хорошо, я создам структуру и базовое содержимое для вашего портала. Мы начнем с основных HTML-страниц для каждого раздела и добавим файлы для стилей и моковых данных. Главная - Портал

Портал

Добро пожаловать!

Это главная страница портала.

Поиск - Портал

Портал

Результаты поиска

Здесь будут отображаться результаты детального поиска по запросу "".

Мероприятия - Портал

Портал

Мероприятия

Список мероприятий

Соревнования по аджилити

Дата: 2024-09-01

Место: КЦ "Ясенево"

Детали мероприятия - Портал

Портал

Название мероприятия

Дата:

Место:

Описание:

Участники

Иван Иванов (Собака: Рекс)
Мария Петрова (Собака: Белка)

Собаки - Портал

Портал

Собаки

Рекс

Порода: Немецкая овчарка

Владелец: Иван Иванов

Белка

Порода: Лайка

Владелец: Мария Петрова

Детали собаки - Портал

Портал

Кличка собаки

Порода:

Возраст:

Владелец:

Генеалогическое древо

[Представление генеалогического древа]

(Моковые данные: глубина 10, потомков ~100)

Профиль пользователя - Портал

Портал

Имя пользователя

Email:

Город:

Собаки пользователя

Рекс (Немецкая овчарка)

Участие в мероприятиях

Выставка собак "Лучший друг" (Участник)

body { font-family: sans-serif; margin: 0; padding: 0; background-color: #f4f4f4; } header { background-color: #333; color: #fff; padding: 1rem 0; text-align: center; } header h1 { margin: 0; padding-bottom: 0.5rem; } nav ul { list-style: none; padding: 0; margin: 0; display: flex; justify-content: center; background-color: #444; } nav ul li { margin: 0; } nav ul li a { color: #fff; text-decoration: none; padding: 0.8rem 1.5rem; display: block; } nav ul li a:hover { background-color: #555; } .search-container { margin-top: 1rem; position: relative; /* Для позиционирования подсказок */ } #search-input { padding: 0.5rem; width: 300px; } #search-suggestions { position: absolute; background-color: white; border: 1px solid #ccc; width: 300px; max-height: 150px; overflow-y: auto; left: 50%; /* Центрируем под полем ввода */ transform: translateX(-50%); z-index: 10; box-shadow: 0 2px 4px rgba(0,0,0,0.1); } #search-suggestions div { padding: 0.5rem; cursor: pointer; } #search-suggestions div:hover { background-color: #eee; } main { padding: 1.5rem; max-width: 1200px; margin: 1rem auto; background-color: #fff; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); min-height: 60vh; /* Минимальная высота для контента */ } main h2, main h3, main h4 { color: #333; } footer { text-align: center; margin-top: 2rem; padding: 1rem; background-color: #333; color: #fff; } /* Стили для списков */ #event-list, #dog-list { margin-top: 1rem; } .event-item, .dog-item { border: 1px solid #ddd; padding: 1rem; margin-bottom: 1rem; background-color: #f9f9f9; display: flex; /* Для dog-item */ align-items: center; /* Для dog-item */ gap: 1rem; /* Для dog-item */ } .dog-item img { border-radius: 5px; } /* Стили для детальных страниц */ #event-details img, #dog-details img, #user-profile img { float: left; margin-right: 1.5rem; margin-bottom: 1rem; border: 1px solid #ccc; padding: 3px; background: #fff; } #event-details::after, #dog-details::after, #user-profile::after { /* Clearfix */ content: ""; display: table; clear: both; } #genealogy { margin-top: 2rem; padding-top: 1rem; border-top: 1px solid #eee; clear: both; /* Чтобы секция была под плавающими элементами */ } #genealogy-tree { /* Стили для отображения древа */ min-height: 100px; /* Пример */ border: 1px dashed #ccc; padding: 1rem; text-align: center; color: #777; } /* Стили для страницы мероприятий */ #events main { display: flex; gap: 1.5rem; } #events aside { flex: 0 0 250px; /* Фиксированная ширина для фильтров и календаря */ } #events section#event-list { flex-grow: 1; /* Занимает оставшееся место */ } #events aside h3 { margin-top: 0; } #event-calendar { margin-top: 1rem; border: 1px solid #ccc; padding: 1rem; min-height: 150px; text-align: center; color: #777; } /* Стили для профиля пользователя */ #user-profile section { margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid #eee; clear: both; } #user-profile ul { list-style: none; padding-left: 0; } #user-profile ul li { margin-bottom: 0.5rem; } // Placeholder для логики поиска и подсказок const searchInput = document.getElementById('search-input'); const suggestionsContainer = document.getElementById('search-suggestions'); if (searchInput && suggestionsContainer) { searchInput.addEventListener('input', () => { const query = searchInput.value.trim(); suggestionsContainer.innerHTML = ''; // Очищаем старые подсказки suggestionsContainer.style.display = 'none'; if (query.length > 1) { // Здесь будет AJAX-запрос к бэкенду или поиск по локальным данным console.log('Поиск подсказок для:', query); // Пример моковых подсказок const mockSuggestions = [ `Мероприятие: ${query} выставка`, `Собака: ${query} рекс`, `Пользователь: ${query} иванов` ].filter(s => s.toLowerCase().includes(query.toLowerCase())); if (mockSuggestions.length > 0) { mockSuggestions.forEach(suggestion => { const div = document.createElement('div'); div.textContent = suggestion; div.onclick = () => { searchInput.value = suggestion; // Или перейти на страницу результата suggestionsContainer.innerHTML = ''; suggestionsContainer.style.display = 'none'; // window.location.href = `/search.html?q=${encodeURIComponent(suggestion)}`; }; suggestionsContainer.appendChild(div); }); suggestionsContainer.style.display = 'block'; } } }); // Скрывать подсказки при клике вне поля document.addEventListener('click', (event) => { if (!searchInput.contains(event.target) && !suggestionsContainer.contains(event.target)) { suggestionsContainer.style.display = 'none'; } }); } else { console.warn("Элементы поиска не найдены на этой странице."); } // Логика для страницы детального поиска (search.html) if (document.getElementById('search-results')) { const urlParams = new URLSearchParams(window.location.search); const query = urlParams.get('q'); const resultsContainer = document.getElementById('search-results'); const titleElement = document.querySelector('main h2'); if (query) { titleElement.textContent = `Результаты поиска по запросу "${query}"`; // Здесь будет логика выполнения поиска и отображения результатов resultsContainer.innerHTML = `

Идет поиск по запросу "${query}"...

`; // Пример отображения моковых результатов setTimeout(() => { resultsContainer.innerHTML = `

Выставка собак "Лучший друг"

Тип: Мероприятие

Описание совпадения...

Рекс

Тип: Собака

Порода: Немецкая овчарка...

`; }, 1000); } else { titleElement.textContent = 'Поиск'; resultsContainer.innerHTML = '

Введите поисковый запрос в поле выше.

'; } } // Placeholder для логики фильтрации и календаря мероприятий console.log('Скрипт для страницы мероприятий загружен.'); const applyFiltersButton = document.getElementById('apply-filters'); const eventListContainer = document.getElementById('event-list'); // Убедитесь, что у контейнера есть этот ID if (applyFiltersButton && eventListContainer) { applyFiltersButton.addEventListener('click', () => { const eventType = document.getElementById('event-type').value; const eventDate = document.getElementById('event-date').value; console.log('Применение фильтров:', { eventType, eventDate }); // Здесь будет логика фильтрации (AJAX или работа с DOM) // Пример: очистка и добавление отфильтрованных элементов eventListContainer.innerHTML = '

Список мероприятий

Загрузка отфильтрованных мероприятий...

'; // Моковая загрузка setTimeout(() => { eventListContainer.innerHTML = `

Список мероприятий

Отфильтрованное мероприятие 1

Дата: 2024-08-15

Место: Парк Сокольники

`; }, 500); }); } // Логика для календаря (потребует библиотеку или сложную реализацию) const calendarContainer = document.getElementById('event-calendar'); if (calendarContainer) { console.log('Инициализация календаря (заглушка)...'); // Здесь будет код для отрисовки календаря и выделения дат с мероприятиями } // Placeholder для отрисовки генеалогического древа function renderGenealogyTree(dogId) { const treeContainer = document.getElementById('genealogy-tree'); if (!treeContainer) return; console.log(`Отрисовка древа для собаки ID: ${dogId}`); treeContainer.innerHTML = `

Загрузка генеалогического древа для собаки ${dogId}...

`; // Здесь будет сложная логика получения данных (из data/dogs.js или API) // и отрисовки древа (возможно, с использованием SVG или Canvas, или библиотеки) // Пример простой моковой отрисовки setTimeout(() => { // Получаем моковые данные (пример) const genealogyData = getMockGenealogy(dogId); // Функция должна быть определена в data/dogs.js if (genealogyData) { treeContainer.innerHTML = `

${genealogyData.name} (ID: ${genealogyData.id}) ${renderBranch(genealogyData.parents)}

`; } else { treeContainer.innerHTML = '

Данные о родословной не найдены.

'; } }, 1000); } // Вспомогательная рекурсивная функция для отрисовки ветки (очень упрощенно) function renderBranch(parents) { if (!parents || parents.length === 0) { return ''; } let html = '

${parent.name} (ID: ${parent.id}) ${renderBranch(parent.parents)}
(Неизвестный родитель)

'; return html; } // Эта функция должна быть в data/dogs.js или загружаться оттуда // Здесь моковая заглушка function getMockGenealogy(dogId) { console.warn("Используется моковая функция getMockGenealogy из genealogy.js"); // Очень упрощенная структура для примера if (dogId === '1') { return { id: '1', name: 'Рекс', parents: [ { id: '10', name: 'Барон', parents: [ { id: '100', name: 'Цезарь', parents: [] }, { id: '101', name: 'Гера', parents: [] } ]}, { id: '11', name: 'Альфа', parents: [ { id: '110', name: 'Зевс', parents: [] }, null // Пример неизвестного родителя ]} ] }; } return null; } // Вызов функции отрисовки, если мы на странице dog-detail.html // (Перенесено в inline-скрипт в dog-detail.html для простоты получения dogId) // const urlParamsGenealogy = new URLSearchParams(window.location.search); // const currentDogId = urlParamsGenealogy.get('id'); // if (currentDogId && document.getElementById('genealogy-tree')) { // renderGenealogyTree(currentDogId); // } // Моковые данные пользователей const mockUsers = [ { id: 1, name: "Иван Иванов", email: "ivan@example.com", city: "Москва", dogs: [1], // ID собак пользователя events: [1] // ID мероприятий, в которых участвовал }, { id: 2, name: "Мария Петрова", email: "maria@example.com", city: "Санкт-Петербург", dogs: [2], events: [1, 2] }, { id: 3, name: "Сергей Сидоров", email: "sergey@example.com", city: "Новосибирск", dogs: [], events: [2] } ]; // Функции для доступа к данным (пример) function getUserById(id) { return mockUsers.find(user => user.id === parseInt(id)); } // Сделать данные доступными глобально (для простоты примера) // В реальном приложении использовать модули или другой способ управления данными window.mockUsers = mockUsers; window.getUserById = getUserById; console.log('Моковые данные пользователей загружены.'); // Моковые данные собак const mockDogs = [ { id: 1, name: "Рекс", breed: "Немецкая овчарка", age: 3, ownerId: 1, photo: "placeholder-dog.jpg", // Генеалогия будет генерироваться или загружаться отдельно // genealogy: { ... } // См. функцию generateGenealogy ниже }, { id: 2, name: "Белка", breed: "Лайка", age: 5, ownerId: 2, photo: "placeholder-dog.jpg", // genealogy: { ... } }, { id: 3, // Собака для примера генеалогии name: "Барон", breed: "Немецкая овчарка", age: 6, ownerId: 1, photo: "placeholder-dog.jpg", }, { id: 4, // Собака для примера генеалогии name: "Альфа", breed: "Немецкая овчарка", age: 5, ownerId: 1, photo: "placeholder-dog.jpg", } // Добавить больше собак ]; // Функция для генерации мокового генеалогического древа (упрощенная) // В реальном приложении эти данные должны храниться или генерироваться сложнее function generateMockGenealogy(dogId, currentDepth = 0, maxDepth = 3, parentBaseId = '') { const dog = mockDogs.find(d => d.id === dogId); if (!dog || currentDepth >= maxDepth) { return null; } const genealogyNode = { id: dog.id, name: dog.name, parents: [] }; // Генерируем ID для родителей (просто для примера) const fatherId = parentBaseId ? `${parentBaseId}-f` : `${dogId}-f`; const motherId = parentBaseId ? `${parentBaseId}-m` : `${dogId}-m`; // Создаем моковых родителей (если их нет в mockDogs) const mockFather = { id: fatherId, name: `Отец ${dog.name} (${fatherId})` }; const mockMother = { id: motherId, name: `Мать ${dog.name} (${motherId})` }; // Рекурсивно генерируем для родителей // В реальном приложении нужно искать существующих собак по ID genealogyNode.parents.push(generateMockGenealogy(fatherId, currentDepth + 1, maxDepth, fatherId) || mockFather); genealogyNode.parents.push(generateMockGenealogy(motherId, currentDepth + 1, maxDepth, motherId) || mockMother); // Ограничение на количество потомков не реализовано в этой простой версии // Для 100 потомков и 10 уровней нужна более сложная структура данных return genealogyNode; } // Функция для получения данных о собаке по ID function getDogById(id) { const dog = mockDogs.find(d => d.id === parseInt(id)); if (dog) { // Добавляем сгенерированную генеалогию (для примера, глубина 3) // dog.genealogy = generateMockGenealogy(dog.id, 0, 3); // Упрощенная генерация // Используем более простую статическую структуру для getMockGenealogy в genealogy.js } return dog; } // Функция для получения генеалогии (используется в genealogy.js) function getMockGenealogy(dogId) { // Эта функция теперь определена в genealogy.js для простоты // Здесь можно было бы реализовать более сложную логику поиска/генерации console.warn("Вызов getMockGenealogy из data/dogs.js (должна быть в genealogy.js)"); // Возвращаем заглушку, чтобы избежать ошибки, если genealogy.js не загружен первым if (typeof window.getMockGenealogy === 'function') { return window.getMockGenealogy(dogId); } return null; } // Сделать данные доступными глобально window.mockDogs = mockDogs; window.getDogById = getDogById; // window.generateMockGenealogy = generateMockGenealogy; // Не делаем глобальной по умолчанию window.getMockGenealogy = getMockGenealogy; // Делаем доступной для genealogy.js console.log('Моковые данные собак загружены.'); // Моковые данные мероприятий const mockEvents = [ { id: 1, name: "Выставка собак \"Лучший друг\"", date: "2024-08-15", location: "Парк Сокольники", description: "Ежегодная выставка собак всех пород. Оцениваются экстерьер, послушание.", type: "exhibition", // exhibition, competition, seminar isPast: false, // Или вычислять на основе даты results: null, // Заполняется, если isPast = true participants: [ // Массив ID пользователей { userId: 1, dogId: 1 }, { userId: 2, dogId: 2 } ] }, { id: 2, name: "Соревнования по аджилити", date: "2024-09-01", location: "КЦ \"Ясенево\"", description: "Открытые соревнования по аджилити для начинающих и профессионалов.", type: "competition", isPast: false, results: null, participants: [ { userId: 2, dogId: 2 }, // Мария Петрова с Белкой { userId: 3 } // Сергей Сидоров (без собаки на это мероприятие?) ] }, { id: 3, name: "Семинар по грумингу", date: "2023-11-20", // Прошедшее событие location: "Зоосалон \"Красотка\"", description: "Практический семинар по основам груминга.", type: "seminar", isPast: true, results: "Семинар успешно проведен, участники получили сертификаты.", participants: [ { userId: 1 } ] } ]; // Функция для получения данных о мероприятии по ID function getEventById(id) { const event = mockEvents.find(event => event.id === parseInt(id)); if (event) { // Проверяем, прошло ли событие event.isPast = new Date(event.date) < new Date(); // Можно добавить логику для загрузки деталей участников if (event.participants) { event.participantsDetails = event.participants.map(p => { const user = window.getUserById ? window.getUserById(p.userId) : { name: `User ${p.userId}`}; const dog = p.dogId && window.getDogById ? window.getDogById(p.dogId) : null; return { user: user, dog: dog }; }); } } return event; } // Сделать данные доступными глобально window.mockEvents = mockEvents; window.getEventById = getEventById; console.log('Моковые данные мероприятий загружены.'); Эта структура создает основные HTML-страницы для каждого раздела, базовые CSS-стили и JavaScript-файлы для моковых данных и начальной функциональности (поиск, фильтры, детализация). **Дальнейшие шаги:** 1. **Заполнить контентом:** Добавить реальное или более подробное моковое содержимое на страницы. 2. **Реализовать JavaScript:** Написать код для загрузки данных из `data/*.js` файлов на соответствующие страницы, реализовать фильтры, календарь, отрисовку генеалогического древа (это может потребовать внешние библиотеки). 3. **Стилизация:** Улучшить внешний вид с помощью CSS. 4. **Изображения:** Заменить плейсхолдеры реальными или более качественными заглушками. 5. **Бэкенд (если нужно):** Для полноценного портала потребуется серверная часть для хранения и обработки данных, аутентификации и т.д.