diff --git a/README.md b/README.md deleted file mode 100644 index 8b13789..0000000 --- a/README.md +++ /dev/null @@ -1 +0,0 @@ - diff --git a/app.js b/app.js new file mode 100644 index 0000000..785e31d --- /dev/null +++ b/app.js @@ -0,0 +1,188 @@ +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 автомобилей. Парковка имеет твердое покрытие, хорошо освещается в темное время суток. Въезд и выезд удобные, есть место для разворота. Парковочные места размечены, территория охраняется. Рядом с парковкой расположена основная тропинка к зоне отдыха." + } +]; + +function Header() { + return ( +
+
+
+
+

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

+

База отдыха

+
+
+ ); +} + +function Card({ card, onCardClick }) { + return ( +
onCardClick(card)}> + {card.title} +
+

{card.title}

+

{card.short}

+
+
+ ); +} + +function Modal({ card, isOpen, onClose }) { + const [currentImageIndex, setCurrentImageIndex] = useState(0); + + useEffect(() => { + if (isOpen) { + setCurrentImageIndex(0); + document.body.style.overflow = 'hidden'; + } else { + document.body.style.overflow = ''; + } + return () => (document.body.style.overflow = ''); + }, [isOpen, card]); + + if (!isOpen || !card) return null; + + const next = (e) => { + e.stopPropagation(); + setCurrentImageIndex((i) => (i + 1) % card.images.length); + }; + const prev = (e) => { + e.stopPropagation(); + setCurrentImageIndex((i) => (i - 1 + card.images.length) % card.images.length); + }; + + const modalContent = ( +
e.target === e.currentTarget && onClose()}> +
+
+

{card.title}

+ +
+
+ {card.title} + {card.images.length > 1 && ( + <> + + + + )} +
+
+

{card.long}

+
+
+
+ ); + + return ReactDOM.createPortal(modalContent, document.body); +} + +function CardsSection() { + const [selected, setSelected] = useState(null); + const isOpen = Boolean(selected); + return ( +
+
+

Что есть на участке

+
+ {cardData.map((c, i) => ( + + ))} +
+
+ setSelected(null)} /> +
+ ); +} + +function Footer() { + const ContactLink = ({ href, children }) => ( + + {children} + + ); + + const TelegramIcon = ( + + ); + const WhatsAppIcon = ( + + ); + const PhoneIcon = ( + + ); + + return ( + + ); +} + +function App() { + return ( + <> +
+ +