diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 0000000..ccde5d8 --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "editor.fontFamily": "JetBrains Mono" +} diff --git a/src/App.css b/src/App.css index a23a5b2..d9d3617 100644 --- a/src/App.css +++ b/src/App.css @@ -1,14 +1,15 @@ :root { --main-accent-color: #f5844f; - --link-hover-color: #ee7f4b; + --main-primary-color: #f1d1be; + --main-secondary-color: #140f10; } body { font-family: jetbrains-mono, monospace; margin: 0; padding: 0; - background: #140f10; - color: rgb(241, 209, 190); + background: var(--main-secondary-color); + color: var(--main-primary-color); } .app { @@ -21,12 +22,21 @@ body { padding: 1rem; } +.pufok-home-icon { + width: 8vw; + align-items: center; + display: flex; + justify-content: center; + margin-left: auto; + margin-right: auto; +} + .navbar { display: flex; /* Используем Flexbox */ justify-content: space-between; /* Размещаем элементы по краям */ align-items: center; /* Выравниваем по вертикали */ padding: 1rem; /* Внутренний отступ */ - padding-top: 2rem; + padding-top: 1rem; list-style: none; /* Убираем маркеры списка */ margin: 0; /* Убираем внешние отступы */ } @@ -50,27 +60,30 @@ body { .language { font-size: 0.9rem; /* Размер шрифта */ - color: var(--accent-color); /* Акцентный цвет */ + color: var(--main-accent-color); /* Акцентный цвет */ cursor: pointer; /* Курсор при наведении */ } .navbar a { color: var(--main-accent-color); - + display: inline-flex; align-items: center; text-decoration: none; - color: #efc3ea; + color: var(--main-secondary-color); gap: 0.5rem; transition: all 0.3s ease; border-radius: 8px; + border: 2px solid var(--main-accent-color); background-color: var(--main-accent-color); padding: 0.5rem 1rem; position: relative; } .navbar a:hover { - color: var(--link-hover-color); /* Цвет ссылок при наведении */ + color: var(--main-accent-color); + background-color: var(--main-secondary-color); + border-color: var(--main-accent-color); } .footer { @@ -108,10 +121,36 @@ body { } .pride-h { + color: #ff69b4; display: flex; /* Используем Flexbox для inline-размещения */ align-items: center; /* Выравниваем элементы по центру по вертикали */ gap: 0.5rem; /* Отступ между текстом и изображением */ justify-content: center; /* Центрируем содержимое по горизонтали */ + animation: rainbow 5s infinite ease-in-out; +} + +@keyframes rainbow { + 0% { + color: rgb(205, 64, 64); + } + 17% { + color: rgb(239, 160, 70); + } + 33% { + color: rgb(237, 237, 83); + } + 50% { + color: rgb(90, 179, 90); + } + 66% { + color: rgb(65, 65, 231); + } + 83% { + color: rgb(68, 36, 90); + } + 100% { + color: rgb(205, 64, 64); + } } /* КОНТАКТЫ! */ @@ -238,4 +277,4 @@ body { .webring-links a:hover { color: var(--link-hover-color); -} \ No newline at end of file +} diff --git a/src/components/SeasonalEvents.js b/src/components/SeasonalEvents.js new file mode 100644 index 0000000..02f57a9 --- /dev/null +++ b/src/components/SeasonalEvents.js @@ -0,0 +1,39 @@ +import { useState, useEffect } from 'react'; + +/** + * Хук для проверки сезонных событий + * @param {Object} options - Настройки события + * @param {number} options.month - Месяц (0–11) + * @param {number} [options.startDay] - День начала (опционально) + * @param {number} [options.endDay] - День окончания (опционально) + * @returns {boolean} - Флаг, активно ли событие сейчас + */ +function useSeasonalEvent(options) { + const [isActive, setIsActive] = useState(false); + + useEffect(() => { + const today = new Date(); + const currentMonth = today.getMonth(); + const currentDay = today.getDate(); + + if (options.month !== undefined && currentMonth !== options.month) { + setIsActive(false); + return; + } + + if ( + options.startDay !== undefined && + options.endDay !== undefined && + (currentDay < options.startDay || currentDay > options.endDay) + ) { + setIsActive(false); + return; + } + + setIsActive(true); + }, [options]); + + return isActive; +} + +export default useSeasonalEvent; diff --git a/src/components/events/Pride.js b/src/components/events/Pride.js new file mode 100644 index 0000000..4928ee1 --- /dev/null +++ b/src/components/events/Pride.js @@ -0,0 +1,25 @@ +import React, { useContext } from 'react'; +import useSeasonalEvent from '../SeasonalEvents.js'; +import { LanguageContext } from '../../context/LanguageContext.js'; + +function PrideHeader() { + const { language, translations } = useContext(LanguageContext); + const isPrideMonth = useSeasonalEvent({ month: 5 }); + + return ( +
+ {isPrideMonth && ( +

+ {translations[language].pages.home.h2}{' '} + pride +

+ )} +
+ ); +} + +export default PrideHeader; diff --git a/src/pages/Home.js b/src/pages/Home.js index 1171c62..31ebdde 100644 --- a/src/pages/Home.js +++ b/src/pages/Home.js @@ -1,4 +1,5 @@ import React, { useContext } from 'react'; +import Pride from '../components/events/Pride.js'; import { Link } from 'react-router-dom'; import { LanguageContext } from '../context/LanguageContext.js'; @@ -7,15 +8,16 @@ function Home() { return (
-

{translations[language].pages.home.h1}

-

{translations[language].pages.home.p1}

-

+ pufok +

{translations[language].pages.home.h1}

+

{translations[language].pages.home.p1}

+

{translations[language].pages.home.p2.p21}{' '} {translations[language].pages.home.p2.p22} {translations[language].pages.home.p2.p23}{' '} {translations[language].pages.home.p2.p24}!

-

+

{translations[language].pages.home.p3}{' '}

-

{translations[language].pages.home.p4}: 20.05.2025 4:11 UTC +3

+

+ {translations[language].pages.home.p4}: 01.07.2025 6:10 UTC +3 +


-

- {translations[language].pages.home.h2}{' '} - pride2025 -

+
); }