major site visual updates!

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+  "editor.fontFamily": "JetBrains Mono"
+}

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;
+  background: var(--main-secondary-color);
-  color: rgb(241, 209, 190);
+  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);
-}
+}

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;

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 (
+    <div>
+      {isPrideMonth && (
+        <h1 className="pride-h">
+          {translations[language].pages.home.h2}{' '}
+          <img
+            className="pride"
+            src="https://pufok.gay/PublicResources/pride.png"
+            alt="pride"
+          />
+        </h1>
+      )}
+    </div>
+  );
+}
+
+export default PrideHeader;

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 (
     <div className="page home">
-      <h1 className='header'>{translations[language].pages.home.h1}</h1>
+      <img className="pufok-home-icon" src="https://pufok.gay/PublicResources/logo512x.png" alt="pufok" />
-      <p className='paragraph'>{translations[language].pages.home.p1}</p>
+      <h1 className="header">{translations[language].pages.home.h1}</h1>
-      <p className='paragraph'>
+      <p className="paragraph">{translations[language].pages.home.p1}</p>
+      <p className="paragraph">
         {translations[language].pages.home.p2.p21}{' '}
         <Link to="/about">{translations[language].pages.home.p2.p22}</Link>
         {translations[language].pages.home.p2.p23}{' '}
         <Link to="/contact">{translations[language].pages.home.p2.p24}!</Link>
       </p>
-      <p className='paragraph'>
+      <p className="paragraph">
         {translations[language].pages.home.p3}{' '}
         <a
           href="https://git.gay/DeltaStudio/PufokReactApp/"
@@ -26,16 +28,11 @@ function Home() {
           git.gay
         </a>
       </p>
-      <p className='paragraph'>{translations[language].pages.home.p4}: 20.05.2025 4:11 UTC +3</p>
+      <p className="paragraph">
+        {translations[language].pages.home.p4}: 01.07.2025 6:10 UTC +3
+      </p>
       <br />
-      <h1 className="pride-h">
+      <Pride />
-        {translations[language].pages.home.h2}{' '}
-        <img
-          className="pride"
-          src="https://pufok.gay/PublicResources/pride.png "
-          alt="pride2025"
-        />
-      </h1>
     </div>
   );
 }