From ef042c83646ceb27903a189017700c300ffd9c0e Mon Sep 17 00:00:00 2001 From: pufok <127991427+pushokthefox@users.noreply.github.com> Date: Tue, 20 May 2025 04:12:10 +0300 Subject: [PATCH] MAJOR commit added: translations, some fixes and more!!! --- public/index.html | 1 - src/App.css | 42 ++++++++++++++++++++++++------- src/App.js | 25 ++++++++++-------- src/components/Footer.js | 6 +++-- src/components/Navbar.js | 23 ++++++++++++----- src/context/LanguageContext.js | 38 ++++++++++++++++++++++++++++ src/locales/en.json | 46 ++++++++++++++++++++++++++++++++++ src/locales/ru.json | 46 ++++++++++++++++++++++++++++++++++ src/pages/About.js | 11 +++++--- src/pages/Contact.js | 19 ++++++++------ src/pages/Home.js | 15 ++++++----- src/pages/NotFound.js | 11 +++++--- src/pages/Projects.js | 9 ++++--- 13 files changed, 238 insertions(+), 54 deletions(-) create mode 100644 src/context/LanguageContext.js create mode 100644 src/locales/en.json create mode 100644 src/locales/ru.json diff --git a/public/index.html b/public/index.html index 3671626..1b32e77 100644 --- a/public/index.html +++ b/public/index.html @@ -27,7 +27,6 @@ -
diff --git a/src/App.css b/src/App.css index 194ec82..4acd589 100644 --- 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 { diff --git a/src/App.js b/src/App.js index 4d8b65a..733d0b8 100644 --- 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 ( -
- - - } /> - } /> - } /> - } /> - } /> - -
+ +
+ + + } /> + } /> + } /> + } /> + } /> + +
+ ); } diff --git a/src/components/Footer.js b/src/components/Footer.js index 74bde0e..6a3f317 100644 --- 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 ( ); } diff --git a/src/components/Navbar.js b/src/components/Navbar.js index 7a65b45..64e41c7 100644 --- 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 ( ); } -export default Navbar; +export default Navbar; \ No newline at end of file diff --git a/src/context/LanguageContext.js b/src/context/LanguageContext.js new file mode 100644 index 0000000..3c8f55e --- /dev/null +++ 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 ( + + {children} + + ); +}; \ No newline at end of file diff --git a/src/locales/en.json b/src/locales/en.json new file mode 100644 index 0000000..7553dc9 --- /dev/null +++ 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." +} \ No newline at end of file diff --git a/src/locales/ru.json b/src/locales/ru.json new file mode 100644 index 0000000..e3dc30b --- /dev/null +++ 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": "Все права зафырканы." +} \ No newline at end of file diff --git a/src/pages/About.js b/src/pages/About.js index 15703d1..8401eaa 100644 --- 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 (
-

Обо мне

-

можете звать меня пуфок. я очень ленивая лисичка, которая любит заниматься различным творчеством и интересными вещами)

-

местоимения: он/она/любые

+

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

+

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

+

{translations[language].pages.about.p2}

); } diff --git a/src/pages/Contact.js b/src/pages/Contact.js index 4d62b7b..abbdfb3 100644 --- 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 (
-

Контакты

-

можешь найти меня тут:

+

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

+

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

-

Кнопочки

-

интересные кнопочки на другие ресурсы:

+

{translations[language].pages.contact.h2}

+

{translations[language].pages.contact.p2}

-

Веб-кольца

-

цольца, в которых я состою:

+

{translations[language].pages.contact.h3}

+

{translations[language].pages.contact.p3}

@@ -161,4 +164,4 @@ function Contact() { ); } -export default Contact; +export default Contact; \ No newline at end of file diff --git a/src/pages/Home.js b/src/pages/Home.js index eddaac8..41a1004 100644 --- 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 (
-

Добро пожаловать на мой сайт!

-

он пока еще в разработке.. но уже выглядит более взрачным, нежели его первая версия) но все же, еще не полностью готов! наберитесь терпения, друзья :з

-

ты можешь перейти в раздел обо мне, чтобы узнать про меня больше или посетить контакты!

-

сайт имеет репозиторий на git.gay (на момент написания, сайт на обслуживании и не работает)

-

последний глобальный апдейт: 18.04.2025 3:40

+

{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} git.gay

+

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

); } diff --git a/src/pages/NotFound.js b/src/pages/NotFound.js index 1a1cc47..30df0ff 100644 --- 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 (
-

мэъ.. 404 нот фаунд!

-

Страница не найдена! Ты точно ввел верный адрес?

- На главную +

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

+

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

+ {translations[language].pages.not_found.p2}
); } diff --git a/src/pages/Projects.js b/src/pages/Projects.js index 983cd7c..b8b716c 100644 --- 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 (
-

Мои проекты (что? зачем?)

+

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

    -
  • пустовато...
    • +
  • {translations[language].pages.projects.p1}
);