From 612c4584ecbe920b9e887d5cdf9c81e3dea38f3b Mon Sep 17 00:00:00 2001 From: Emil Shanaty <65846814+emil28092005@users.noreply.github.com> Date: Sat, 2 Aug 2025 22:43:51 +0300 Subject: [PATCH] . --- Images/.gitkeep | 0 Images/cards/.gitkeep | 0 Images/cards/card1/.gitkeep | 0 app.js | 154 +++++++++++++++++++++++++----------- index.html | 14 +++- style.css | 2 +- 6 files changed, 119 insertions(+), 51 deletions(-) create mode 100644 Images/.gitkeep create mode 100644 Images/cards/.gitkeep create mode 100644 Images/cards/card1/.gitkeep diff --git a/Images/.gitkeep b/Images/.gitkeep new file mode 100644 index 0000000..e69de29 diff --git a/Images/cards/.gitkeep b/Images/cards/.gitkeep new file mode 100644 index 0000000..e69de29 diff --git a/Images/cards/card1/.gitkeep b/Images/cards/card1/.gitkeep new file mode 100644 index 0000000..e69de29 diff --git a/app.js b/app.js index 785e31d..46c8444 100644 --- a/app.js +++ b/app.js @@ -1,64 +1,101 @@ const { useState, useEffect } = React; -// Demo data - РЕДАКТИРОВАТЬ ЗДЕСЬ ДЛЯ ДОБАВЛЕНИЯ НОВЫХ КАРТОЧЕК -const cardData = [ - { - title: "Уютная беседка", - short: "Просторная беседка для отдыха на свежем воздухе", - images: [ - 'https://picsum.photos/600/400?random=2', - 'https://picsum.photos/600/400?random=3', - 'https://picsum.photos/600/400?random=4' - ], - long: "Просторная деревянная беседка на 10-12 человек, оборудованная столами и скамейками. Идеальное место для семейных обедов, игр и вечерних посиделок. Беседка защищена от дождя и ветра, имеет хорошее освещение. Рядом расположена зона для барбекю и мангала. В беседке есть розетки для подключения электроприборов." - }, - { - title: "Зона барбекю", - short: "Оборудованная площадка для приготовления шашлыков", - images: [ - 'https://picsum.photos/600/400?random=5', - 'https://picsum.photos/600/400?random=6' - ], - long: "Специально оборудованная зона для приготовления пищи на открытом огне. В наличии: стационарный мангал, решетки для гриля, столы для разделки продуктов. Рядом расположены мойка с проточной водой и место для хранения дров. Зона безопасна и соответствует всем противопожарным требованиям." - }, - { - title: "Детская площадка", - short: "Безопасная игровая зона для детей разных возрастов", - images: [ - 'https://picsum.photos/600/400?random=7', - 'https://picsum.photos/600/400?random=8', - 'https://picsum.photos/600/400?random=9' - ], - long: "Современная детская площадка с качелями, горками, песочницей и спортивными снарядами. Все оборудование изготовлено из экологически чистых материалов и регулярно проходит проверку безопасности. Площадка огорожена и имеет мягкое покрытие. Рядом установлены скамейки для родителей." - }, - { - title: "Парковка", - short: "Удобная парковочная зона для автомобилей гостей", - images: [ - 'https://picsum.photos/600/400?random=10', - 'https://picsum.photos/600/400?random=11' - ], - long: "Просторная парковочная зона на 8-10 автомобилей. Парковка имеет твердое покрытие, хорошо освещается в темное время суток. Въезд и выезд удобные, есть место для разворота. Парковочные места размечены, территория охраняется. Рядом с парковкой расположена основная тропинка к зоне отдыха." +// Функция для получения настроек сайта из HTML +function getSiteConfigFromHTML() { + const configElement = document.querySelector('#site-config site-header'); + if (!configElement) { + return { + bgImage: 'https://picsum.photos/1920/1080?random=1', + title: 'Станция Сосновая', + subtitle: 'База отдыха' + }; } -]; + + return { + bgImage: configElement.getAttribute('data-bg-image') || 'https://picsum.photos/1920/1080?random=1', + title: configElement.getAttribute('data-title') || 'Станция Сосновая', + subtitle: configElement.getAttribute('data-subtitle') || 'База отдыха' + }; +} + +// Функция для получения данных карточек из HTML +function getCardDataFromHTML() { + const cardElements = document.querySelectorAll('#cards-data card-data'); + return Array.from(cardElements).map(element => { + const images = element.getAttribute('data-images'); + return { + title: element.getAttribute('data-title'), + short: element.getAttribute('data-short'), + images: images ? images.split(',').map(img => img.trim()) : [], + long: element.getAttribute('data-long') + }; + }); +} + +// Функция для установки фонового изображения +function setHeaderBackground(bgImage) { + useEffect(() => { + const headerBg = document.querySelector('.header-bg'); + if (headerBg && bgImage) { + headerBg.style.backgroundImage = `url('${bgImage}')`; + } + }, [bgImage]); +} function Header() { + const [siteConfig, setSiteConfig] = useState({ + bgImage: '', + title: 'Станция Сосновая', + subtitle: 'База отдыха' + }); + + useEffect(() => { + const config = getSiteConfigFromHTML(); + setSiteConfig(config); + }, []); + + // Устанавливаем фоновое изображение + useEffect(() => { + const headerBg = document.querySelector('.header-bg'); + if (headerBg && siteConfig.bgImage) { + headerBg.style.backgroundImage = `url('${siteConfig.bgImage}')`; + } + }, [siteConfig.bgImage]); + return (
-

Станция Сосновая

-

База отдыха

+

{siteConfig.title}

+

{siteConfig.subtitle}

); } +function SafeImage({ src, alt, className, fallback = '/images/placeholder.jpg' }) { + const [imgSrc, setImgSrc] = useState(src); + + const handleError = () => { + console.warn(`Не удалось загрузить изображение: ${src}`); + setImgSrc(fallback); + }; + + return ( + {alt} + ); +} + function Card({ card, onCardClick }) { return (
onCardClick(card)}> - {card.title} (i + 1) % card.images.length); }; + const prev = (e) => { e.stopPropagation(); setCurrentImageIndex((i) => (i - 1 + card.images.length) % card.images.length); @@ -103,7 +141,11 @@ function Modal({ card, isOpen, onClose }) {
- {card.title} + {card.images.length > 1 && ( <> @@ -123,7 +165,15 @@ function Modal({ card, isOpen, onClose }) { function CardsSection() { const [selected, setSelected] = useState(null); + const [cardData, setCardData] = useState([]); const isOpen = Boolean(selected); + + // Загружаем данные карточек из HTML при монтировании компонента + useEffect(() => { + const data = getCardDataFromHTML(); + setCardData(data); + }, []); + return (
@@ -147,13 +197,21 @@ function Footer() { ); const TelegramIcon = ( - + + + ); + const WhatsAppIcon = ( - + + + ); + const PhoneIcon = ( - + + + ); return ( @@ -185,4 +243,4 @@ function App() { ); } -ReactDOM.render(, document.getElementById('root')); \ No newline at end of file +ReactDOM.render(, document.getElementById('root')); diff --git a/index.html b/index.html index 8359e19..aed1cf3 100644 --- a/index.html +++ b/index.html @@ -15,13 +15,23 @@ + + + +