MAJOR commit

added: translations, some fixes and more!!!
2025-07-18 05:42:24 +07:00 · 2025-05-20 04:12:10 +03:00 · 2025-05-20 04:12:10 +03:00 · ef042c8364
commit ef042c8364
parent 9a1bfee506
13 changed files with 238 additions and 54 deletions
--- a/public/index.html
+++ b/public/index.html
@ -27,7 +27,6 @@
 </head>

 <body>
-  <noscript>You need to enable JavaScript to run this site.</noscript>
  <div id="root"></div>
 </body>

--- a/src/App.css
+++ b/src/App.css
@ -21,22 +21,46 @@ body {
  padding: 1rem;
 }

+.navbar {
+  display: flex; /* Используем Flexbox */
+  justify-content: space-between; /* Размещаем элементы по краям */
+  align-items: center; /* Выравниваем по вертикали */
+  padding: 1rem; /* Внутренний отступ */
+  padding-top: 2rem;
+  list-style: none; /* Убираем маркеры списка */
+  margin: 0; /* Убираем внешние отступы */
+}
+
 .navbar ul {
-  list-style: none;
-  padding: 0;
-  display: flex;
-  gap: 1rem;
-  /* background: #18161f; */
-  padding: 1rem;
+  display: flex; /* Размещаем элементы в строку */
+  gap: 1rem; /* Отступ между элементами */
+  align-items: center; /* Выравниваем элементы по вертикали */
+  margin: 0; /* Убираем внешние отступы */
+  padding: 0; /* Убираем внутренние отступы */
+  list-style: none; /* Убираем маркеры списка */
+}
+
+.navbar li {
+  margin-right: 1rem; /* Отступ между элементами */
+}
+
+.navbar li:last-child {
+  margin-right: 0; /* Убираем отступ у последнего элемента */
+}
+
+.language {
+  font-size: 0.9rem; /* Размер шрифта */
+  color: var(--accent-color); /* Акцентный цвет */
+  cursor: pointer; /* Курсор при наведении */
 }

 .navbar a {
-  color: var(--link-color);
-  text-decoration: none;
+  color: var(--link-color); /* Цвет ссылок */
+  text-decoration: none; /* Убираем подчёркивание */
 }

 .navbar a:hover {
-  color: var(--link-hover-color);
+  color: var(--link-hover-color); /* Цвет ссылок при наведении */
 }

 .footer {
--- a/src/App.js
+++ b/src/App.js
@ -1,4 +1,5 @@
 import React from 'react';
+import { LanguageProvider } from './context/LanguageContext.js';
 import { Routes, Route } from 'react-router-dom';
 import Navbar from './components/Navbar.js';
 import Footer from './components/Footer.js';
@ -10,17 +11,19 @@ import NotFound from './pages/NotFound.js';

 function App() {
  return (
-    <div className="app">
-      <Navbar />
-      <Routes>
-        <Route path="/" element={<Home />} />
-        <Route path="/about" element={<About />} />
-        <Route path="/projects" element={<Projects />} />
-        <Route path="/contact" element={<Contact />} />
-        <Route path="*" element={<NotFound />} />
-      </Routes>
-      <Footer />
-    </div>
+    <LanguageProvider>
+      <div className="app">
+        <Navbar />
+        <Routes>
+          <Route path="/" element={<Home />} />
+          <Route path="/about" element={<About />} />
+          <Route path="/projects" element={<Projects />} />
+          <Route path="/contact" element={<Contact />} />
+          <Route path="*" element={<NotFound />} />
+        </Routes>
+        <Footer />
+      </div>
+    </LanguageProvider>
  );
 }

--- a/src/components/Footer.js
+++ b/src/components/Footer.js
@ -1,11 +1,13 @@
-import React from 'react';
+import React, { useContext } from 'react';
+import { LanguageContext } from '../context/LanguageContext.js';

 function Footer() {
  const currentYear = new Date().getFullYear();
+  const { language, translations } = useContext(LanguageContext);

  return (
    <footer className="footer">
-      <p>&copy; {currentYear} pufok. Все права зафырканы.</p>
+      <p>&copy; {currentYear} pufok. {translations[language].footer}</p>
    </footer>
  );
 }
--- a/src/components/Navbar.js
+++ b/src/components/Navbar.js
@ -1,25 +1,36 @@
-import React from 'react';
+import React, { useContext } from 'react';
 import { Link } from 'react-router-dom';
+import { LanguageContext } from '../context/LanguageContext.js';

 function Navbar() {
+  const { language, translations, toggleLanguage } = useContext(LanguageContext);
+
  return (
    <nav className="navbar">
+      {/* Основные ссылки */}
      <ul>
        <li>
-          <Link to="/">Главная</Link>
+          <Link to="/">{translations[language].navbar.home}</Link>
        </li>
        <li>
-          <Link to="/about">Обо мне</Link>
+          <Link to="/about">{translations[language].navbar.about}</Link>
        </li>
        <li>
-          <Link to="/projects">Проекты (в разработке)</Link>
+          <Link to="/projects">{translations[language].navbar.projects}</Link>
        </li>
        <li>
-          <Link to="/contact">Контакты</Link>
+          <Link to="/contact">{translations[language].navbar.contact}</Link>
        </li>
      </ul>
+
+      {/* Языковой переключатель */}
+      <div className="language-container">
+        <div className="language" onClick={toggleLanguage}>
+          {translations[language].navbar.switchLanguage}
+        </div>
+      </div>
    </nav>
  );
 }

-export default Navbar;
+export default Navbar;
--- a/src/context/LanguageContext.js
+++ b/src/context/LanguageContext.js
@ -0,0 +1,38 @@
+import React, { createContext, useState, useEffect } from 'react';
+import ru from '../locales/ru.json';
+import en from '../locales/en.json';
+export const LanguageContext = createContext();
+
+export const LanguageProvider = ({ children }) => {
+  const [language, setLanguage] = useState('en');
+
+  const translations = {
+    ru,
+    en,
+  };
+
+  useEffect(() => {
+    // Проверяем localStorage при загрузке
+    const savedLanguage = localStorage.getItem('language');
+    if (savedLanguage && ['ru', 'en'].includes(savedLanguage)) {
+      setLanguage(savedLanguage);
+    } else {
+      // Автоопределение языка
+      const userLanguage = navigator.language || navigator.userLanguage;
+      const defaultLanguage = userLanguage.startsWith('ru') ? 'ru' : 'en';
+      setLanguage(defaultLanguage);
+    }
+  }, []);
+  
+  const toggleLanguage = () => {
+    const newLanguage = language === 'en' ? 'ru' : 'en';
+    setLanguage(newLanguage);
+    localStorage.setItem('language', newLanguage); // Сохраняем в localStorage
+  };
+
+  return (
+    <LanguageContext.Provider value={{ language, translations, toggleLanguage }}>
+      {children}
+    </LanguageContext.Provider>
+  );
+};
--- a/src/locales/en.json
+++ b/src/locales/en.json
@ -0,0 +1,46 @@
+{
+    "navbar": {
+        "home": "Home",
+        "about": "About fox!",
+        "projects": "Projects (wip)",
+        "contact": "Links",
+        "switchLanguage": "Переключить на RU"
+    },
+    "pages": {
+        "not_found": {
+            "h1": "huff.. 404 not found!",
+            "p1": "Page not found! Did you enter the correct address?",
+            "p2": "Go home"
+        },
+        "home": {
+            "h1": "Haaiii!",
+            "p1": "you are on my network where you can learn more about me! although the site is still under development, but it will be up soon..... be patient, friends :з",
+            "p2": {
+                "p21": "you can go to the section",
+                "p22": "about fox",
+                "p23": " to learn more about me or to visit",
+                "p24": "links"
+            },
+            "p3": "the site has a repository on",
+            "p4": "latest global update"
+        },
+        "about": {
+            "h1": "What am I?",
+            "p1": "you can call me pufok. I am a very lazy fox who likes to do various creative and interesting things) a little more information about me will be later....",
+            "p2": "pronounce: he/she/any"
+        },
+        "projects": {
+            "h1": "My projects (what? why?)",
+            "p1": "empty..."
+        },
+        "contact": {
+            "h1": "Where I live?",
+            "p1": "you can find me here:",
+            "h2": "Buttons",
+            "p2": "interesting buttons on my friends and not only:",
+            "h3": "Webrings",
+            "p3": "the rings I'm in:"
+        }
+    },
+    "footer": "All rights sniffed."
+}
--- a/src/locales/ru.json
+++ b/src/locales/ru.json
@ -0,0 +1,46 @@
+{
+    "navbar": {
+        "home": "Главная",
+        "about": "О лисичке!",
+        "projects": "Проекты (в разработке)",
+        "contact": "Ссылки",
+        "switchLanguage": "Switch to EN"
+    },
+    "pages": {
+        "not_found": {
+            "h1": "мэъ.. 404 нот фаунд!",
+            "p1": "Страница не найдена! Ты точно ввел верный адрес?",
+            "p2": "На главную"
+        },
+        "home": {
+            "h1": "Приветик!",
+            "p1": "ты находишься на моей сети, где сможешь узнать про меня получше! хоть сайт все еще в разработке, но скоро все будет... наберитесь терпения, друзья :з",
+            "p2": {
+                "p21": "ты можешь перейти в раздел",
+                "p22": "о лисичке",
+                "p23": ", чтобы узнать про меня больше или посетить",
+                "p24": "ссылки"
+            },
+            "p3": "сайт имеет репозиторий на",
+            "p4": "последний глобальный апдейт"
+        },
+        "about": {
+            "h1": "Что я такое?",
+            "p1": "можете звать меня пуфок. я очень ленивая лисичка, которая любит заниматься различным творчеством и интересными вещами) чуть больше информации обо мне будет позже...",
+            "p2": "местоимения: он/она/любые"
+        },
+        "projects": {
+            "h1": "Мои проекты (что? зачем?)",
+            "p1": "пустовато..."
+        },
+        "contact": {
+            "h1": "Где я обитаю?",
+            "p1": "можешь найти меня тут:",
+            "h2": "Кнопочки",
+            "p2": "интересные кнопочки на моих друзей и не только:",
+            "h3": "Веб-кольца",
+            "p3": "колечки, в которых я состою:"
+        }
+    },
+    "footer": "Все права зафырканы."
+}
--- a/src/pages/About.js
+++ b/src/pages/About.js
@ -1,11 +1,14 @@
-import React from 'react';
+import React, { useContext } from 'react';
+import { LanguageContext } from '../context/LanguageContext.js';

 function About() {
+  const { language, translations } = useContext(LanguageContext);
+
  return (
    <div className="page about">
-      <h1>Обо мне</h1>
-      <p>можете звать меня пуфок. я очень ленивая лисичка, которая любит заниматься различным творчеством и интересными вещами)</p>
-      <p>местоимения: он/она/любые</p>
+      <h1>{translations[language].pages.about.h1}</h1>
+      <p>{translations[language].pages.about.p1}</p>
+      <p>{translations[language].pages.about.p2}</p>
    </div>
  );
 }
--- a/src/pages/Contact.js
+++ b/src/pages/Contact.js
@ -1,6 +1,9 @@
-import React from 'react';
+import React, { useContext } from 'react';
+import { LanguageContext } from '../context/LanguageContext.js';

 function Contact() {
+  const { language, translations } = useContext(LanguageContext);
+
  const contacts = [
    {
      name: 'Discord',
@ -66,8 +69,8 @@ function Contact() {

  return (
    <div className="page contact">
-      <h1>Контакты</h1>
-      <p>можешь найти меня тут:</p>
+      <h1>{translations[language].pages.contact.h1}</h1>
+      <p>{translations[language].pages.contact.p1}</p>
      <ul class="contact-list">
        {contacts.map((contact, index) => (
          <li key={index} style={{ '--accent-color': contact.accentColor }}>
@ -89,8 +92,8 @@ function Contact() {
          </li>
        ))}
      </ul>
-      <h1>Кнопочки</h1>
-      <p>интересные кнопочки на другие ресурсы:</p>
+      <h1>{translations[language].pages.contact.h2}</h1>
+      <p>{translations[language].pages.contact.p2}</p>
      <div class="button-group">
        <a
          href="https://pufok.gay/"
@ -115,8 +118,8 @@ function Contact() {
          />
        </a>
      </div>
-      <h1>Веб-кольца</h1>
-      <p>цольца, в которых я состою:</p>
+      <h1>{translations[language].pages.contact.h3}</h1>
+      <p>{translations[language].pages.contact.p3}</p>
      <div class="webring-group">
        <div class="webring-ring">
          <h2>
@ -161,4 +164,4 @@ function Contact() {
  );
 }

-export default Contact;
+export default Contact;
--- a/src/pages/Home.js
+++ b/src/pages/Home.js
@ -1,14 +1,17 @@
-import React from 'react';
+import React, { useContext } from 'react';
 import { Link } from 'react-router-dom';
+import { LanguageContext } from '../context/LanguageContext.js';

 function Home() {
+  const { language, translations } = useContext(LanguageContext);
+
  return (
    <div className="page home">
-      <h1>Добро пожаловать на мой сайт!</h1>
-      <p>он пока еще в разработке.. но уже выглядит более взрачным, нежели его первая версия) но все же, еще не полностью готов! наберитесь терпения, друзья :з</p>
-      <p>ты можешь перейти в раздел <Link to="/about">обо мне</Link>, чтобы узнать про меня больше или посетить <Link to="/contact">контакты</Link>!</p>
-      <p>сайт имеет репозиторий на <a href="https://git.gay/DeltaStudio/PufokReactApp/" title="git.gay репозиторий" target="_blank" rel="noreferrer">git.gay</a> (на момент написания, сайт на обслуживании и не работает)</p>
-      <p>последний глобальный апдейт: 18.04.2025 3:40</p>
+      <h1>{translations[language].pages.home.h1}</h1>
+      <p>{translations[language].pages.home.p1}</p>
+      <p>{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>{translations[language].pages.home.p3} <a href="https://git.gay/DeltaStudio/PufokReactApp/" title="git.gay" target="_blank" rel="noreferrer">git.gay</a></p>
+      <p>{translations[language].pages.home.p4}: 20.05.2025 4:11 UTC +3</p>
    </div>
  );
 }
--- a/src/pages/NotFound.js
+++ b/src/pages/NotFound.js
@ -1,12 +1,15 @@
-import React from 'react';
+import React, { useContext } from 'react';
 import { Link } from 'react-router-dom';
+import { LanguageContext } from '../context/LanguageContext.js';

 function NotFound() {
+  const { language, translations } = useContext(LanguageContext);
+
  return (
    <div className="page not-found">
-      <h1>мэъ.. 404 нот фаунд!</h1>
-      <p>Страница не найдена! Ты точно ввел верный адрес?</p>
-      <Link to="/">На главную</Link>
+      <h1>{translations[language].pages.not_found.h1}</h1>
+      <p>{translations[language].pages.not_found.p1}</p>
+      <Link to="/">{translations[language].pages.not_found.p2}</Link>
    </div>
  );
 }
--- a/src/pages/Projects.js
+++ b/src/pages/Projects.js
@ -1,11 +1,14 @@
-import React from 'react';
+import React, { useContext } from 'react';
+import { LanguageContext } from '../context/LanguageContext.js';

 function Projects() {
+  const { language, translations } = useContext(LanguageContext);
+
  return (
    <div className="page projects">
-      <h1>Мои проекты (что? зачем?)</h1>
+      <h1>{translations[language].pages.projects.h1}</h1>
      <ul>
-        <li>пустовато...</li>
+        <li>{translations[language].pages.projects.p1}</li>
      </ul>
    </div>
  );