diff --git a/src/renderer/App.css b/src/renderer/App.css index 717132a..8f6963a 100644 --- a/src/renderer/App.css +++ b/src/renderer/App.css @@ -18,7 +18,6 @@ body { height: 100vh; background: linear-gradient(242.94deg, #000000 39.07%, #3b4187 184.73%); font-family: 'Benzin-Bold' !important; - overflow-y: hidden; display: flex; justify-content: center; align-items: center; diff --git a/src/renderer/App.tsx b/src/renderer/App.tsx index cf6e8c1..897960a 100644 --- a/src/renderer/App.tsx +++ b/src/renderer/App.tsx @@ -20,6 +20,8 @@ import Marketplace from './pages/Marketplace'; import { Registration } from './pages/Registration'; import { FullScreenLoader } from './components/FullScreenLoader'; import { News } from './pages/News'; +import PageHeader from './components/PageHeader'; +import { useLocation } from 'react-router-dom'; const AuthCheck = ({ children }: { children: ReactNode }) => { const [isAuthenticated, setIsAuthenticated] = useState(null); @@ -95,11 +97,21 @@ const AuthCheck = ({ children }: { children: ReactNode }) => { }; const App = () => { + return ( + + + + ); +}; + +const AppLayout = () => { // Просто используйте window.open без useNavigate const handleRegister = () => { window.open('https://account.ely.by/register', '_blank'); }; const [username, setUsername] = useState(null); + const location = useLocation(); + const path = location.pathname; useEffect(() => { const savedConfig = localStorage.getItem('launcher_config'); @@ -112,23 +124,26 @@ const App = () => { }, []); return ( - - + + - + + } @@ -182,9 +197,8 @@ const App = () => { } /> - - - + + ); }; diff --git a/src/renderer/components/BonusShopItem.tsx b/src/renderer/components/BonusShopItem.tsx index 8e47cfd..20c8f42 100644 --- a/src/renderer/components/BonusShopItem.tsx +++ b/src/renderer/components/BonusShopItem.tsx @@ -81,7 +81,7 @@ export const BonusShopItem: React.FC = ({ sx={{ position: 'relative', width: '100%', - maxWidth: 300, + maxWidth: 220, height: 440, display: 'flex', flexDirection: 'column', @@ -95,8 +95,8 @@ export const BonusShopItem: React.FC = ({ transition: 'transform 0.35s ease, box-shadow 0.35s ease', '&:hover': { - transform: 'scale(1.05)', - boxShadow: '0 20px 60px rgba(242,113,33,0.45)', + transform: 'scale(1.01)', + boxShadow: '0 10px 20px rgba(242,113,33,0.1)', }, }} > @@ -151,7 +151,7 @@ export const BonusShopItem: React.FC = ({ = ({ @@ -177,11 +177,9 @@ export const BonusShopItem: React.FC = ({ {description} @@ -294,7 +292,7 @@ export const BonusShopItem: React.FC = ({ color: '#fff', opacity: buttonDisabled ? 0.6 : 1, '&:hover': { - transform: buttonDisabled ? 'none' : 'scale(1.1)', + transform: buttonDisabled ? 'none' : 'scale(1.05)', }, }} > diff --git a/src/renderer/components/CaseRoulette.tsx b/src/renderer/components/CaseRoulette.tsx index 98bd3a8..e0733ca 100644 --- a/src/renderer/components/CaseRoulette.tsx +++ b/src/renderer/components/CaseRoulette.tsx @@ -408,7 +408,7 @@ export default function CaseRoulette({ opacity: animationFinished ? 1 : 0.4, pointerEvents: animationFinished ? 'auto' : 'none', '&:hover': { - transform: 'scale(1.1)', + transform: 'scale(1.02)', }, }} > diff --git a/src/renderer/components/PageHeader.tsx b/src/renderer/components/PageHeader.tsx new file mode 100644 index 0000000..aab8ae7 --- /dev/null +++ b/src/renderer/components/PageHeader.tsx @@ -0,0 +1,114 @@ +import { Box, Typography } from '@mui/material'; +import { useLocation } from 'react-router-dom'; +import { useMemo } from 'react'; + +interface HeaderConfig { + title: string; + subtitle: string; + hidden?: boolean; +} + +export default function PageHeader() { + const location = useLocation(); + + const headerConfig: HeaderConfig | null = useMemo(() => { + const path = location.pathname; + + // Страницы без заголовка + if ( + path === '/login' || + path === '/registration' || + path === '/marketplace' || + path === '/profile' || + path.startsWith('/launch') + ) { + return { title: '', subtitle: '', hidden: true }; + } + + if (path === '/news') { + return { + title: 'Новости', + subtitle: 'Последние обновления лаунчера, сервера и ивентов', + }; + } + + if (path === '/') { + return { + title: 'Выбор версию клиента', + subtitle: 'Выберите установленную версию или добавьте новую сборку', + }; + } + + if (path.startsWith('/profile')) { + return { + title: 'Профиль пользователя', + subtitle: 'Профиль пользователя для личных настроек', + }; + } + + if (path.startsWith('/shop')) { + return { + title: 'Внутриигровой магазин', + subtitle: 'Тратьте свою уникалькую, виртуальную валюту - Попы!', + }; + } + + if (path.startsWith('/marketplace')) { + return { + title: 'Маркетплейс', + subtitle: 'Покупайте или продавайте - торговая площадка между игроками', + }; + } + + // Дефолт на всякий случай + return { + title: 'test', + subtitle: 'test', + }; + }, [location.pathname]); + + if (!headerConfig || headerConfig.hidden) { + return null; + } + + return ( + + + {headerConfig.title} + + + + {headerConfig.subtitle} + + + ); +} diff --git a/src/renderer/components/PlayerPreviewModal.tsx b/src/renderer/components/PlayerPreviewModal.tsx index 2c326b7..217d0f1 100644 --- a/src/renderer/components/PlayerPreviewModal.tsx +++ b/src/renderer/components/PlayerPreviewModal.tsx @@ -24,7 +24,13 @@ const CapePreviewModal: React.FC = ({ skinUrl, }) => { return ( - + @@ -124,8 +124,9 @@ export default function ShopItem({ background: 'linear-gradient(71deg, #F27121 0%, #E940CD 70%, #8A2387 100%)', '&:hover': { - transform: 'scale(1.1)', + transform: 'scale(1.05)', }, + transition: 'all 0.5s ease' }} > @@ -219,7 +220,7 @@ export default function ShopItem({ borderRadius: '2.5vw', fontSize: '0.85rem', '&:hover': { - transform: 'scale(1.1)', + transform: 'scale(1.02)', }, }} > diff --git a/src/renderer/components/TopBar.tsx b/src/renderer/components/TopBar.tsx index 85df77c..0da5b7d 100644 --- a/src/renderer/components/TopBar.tsx +++ b/src/renderer/components/TopBar.tsx @@ -375,7 +375,7 @@ export default function TopBar({ onRegister, username }: TopBarProps) { '&:hover': { background: 'linear-gradient(71deg, #F27121 0%, #E940CD 70%, #8A2387 100%)', - transform: 'scale(1.05)', + transform: 'scale(1.01)', boxShadow: '0 4px 15px rgba(242, 113, 33, 0.4)', }, boxShadow: '0 2px 8px rgba(0, 0, 0, 0.3)', @@ -411,7 +411,7 @@ export default function TopBar({ onRegister, username }: TopBarProps) { '&:hover': { background: 'linear-gradient(71deg, #F27121 0%, #E940CD 70%, #8A2387 100%)', - transform: 'scale(1.05)', + transform: 'scale(1.01)', boxShadow: '0 4px 15px rgba(242, 113, 33, 0.4)', }, '&:active': { diff --git a/src/renderer/pages/LaunchPage.tsx b/src/renderer/pages/LaunchPage.tsx index 52c1108..8288539 100644 --- a/src/renderer/pages/LaunchPage.tsx +++ b/src/renderer/pages/LaunchPage.tsx @@ -411,8 +411,8 @@ const LaunchPage = ({ value={progress} valueBuffer={buffer} sx={{ - height: 12, - borderRadius: 6, + height: '0.45vw', + borderRadius: '1vw', // Фон прогресс-бара (buffer background) backgroundColor: 'rgba(255,255,255,0.1)', @@ -426,7 +426,7 @@ const LaunchPage = ({ '& .MuiLinearProgress-bar2Buffer': { // Buffer линия (вторая линия) - backgroundColor: 'rgba(255,255,255,0.25)', + backgroundColor: 'rgba(255,255,255,0)', borderRadius: 6, }, @@ -473,7 +473,7 @@ const LaunchPage = ({ background: 'linear-gradient(71deg, #555 0%, #777 100%)', '&:hover': { background: 'linear-gradient(71deg, #666 0%, #888 100%)', - transform: 'scale(1.05)', + transform: 'scale(1.01)', boxShadow: '0 4px 15px rgba(100, 100, 100, 0.4)', }, boxShadow: '0 2px 8px rgba(0, 0, 0, 0.3)', @@ -485,10 +485,11 @@ const LaunchPage = ({ '&:hover': { background: 'linear-gradient(71deg, #F27121 0%, #E940CD 70%, #8A2387 100%)', - transform: 'scale(1.05)', + transform: 'scale(1.01)', boxShadow: '0 4px 15px rgba(242, 113, 33, 0.4)', }, boxShadow: '0 2px 8px rgba(0, 0, 0, 0.3)', + transition: 'all 0.25s ease', }), }} > @@ -506,13 +507,13 @@ const LaunchPage = ({ minHeight: 'unset', minWidth: 'unset', height: '100%', // занимает полную высоту родителя - transition: 'transform 0.3s ease', '&:hover': { background: 'linear-gradient(71deg, #F27121 0%, #E940CD 70%, #8A2387 100%)', transform: 'scale(1.05)', boxShadow: '0 4px 15px rgba(242, 113, 33, 0.4)', }, + transition: 'transform 0.25s ease, box-shadow 0.25s ease', }} onClick={handleOpen} > diff --git a/src/renderer/pages/Marketplace.tsx b/src/renderer/pages/Marketplace.tsx index f3eb8c8..5c3fdd7 100644 --- a/src/renderer/pages/Marketplace.tsx +++ b/src/renderer/pages/Marketplace.tsx @@ -254,7 +254,7 @@ export default function Marketplace() { } return ( - + Рынок сервера{' '} diff --git a/src/renderer/pages/News.tsx b/src/renderer/pages/News.tsx index 035aac2..46c2741 100644 --- a/src/renderer/pages/News.tsx +++ b/src/renderer/pages/News.tsx @@ -151,48 +151,15 @@ export const News = () => { return ( - {/* Заголовок страницы */} - - - Новости - - - Последние обновления лаунчера, сервера и ивентов - - - {/* Админский редактор */} {isAdmin && ( { '& .MuiInputBase-root': { backgroundColor: 'rgba(0,0,0,0.6)', color: 'white', + borderRadius: '1.2vw' }, '& .MuiInputLabel-root': { color: 'rgba(255,255,255,0.7)', @@ -247,6 +215,7 @@ export const News = () => { '& .MuiInputBase-root': { backgroundColor: 'rgba(0,0,0,0.6)', color: 'white', + borderRadius: '1.2vw', }, '& .MuiInputLabel-root': { color: 'rgba(255,255,255,0.7)', @@ -259,21 +228,23 @@ export const News = () => { mb: 2, '& .EasyMDEContainer': { backgroundColor: 'rgba(0,0,0,0.6)', - borderRadius: '0.8vw', + borderRadius: '1.2vw', overflow: 'hidden', - border: '1px solid rgba(255,255,255,0.15)', + border: 'none' }, - '& .editor-toolbar': { + '& .editor-toolbar': { // полоски(разделители) иконок background: 'transparent', - borderBottom: '1px solid rgba(255, 255, 255, 1)', + color: 'white', + border: 'none', + borderBottom: '1px solid #FFFFFF' + }, + '& .editor-toolbar .fa': { // все иконки color: 'white', }, - '& .editor-toolbar .fa': { - color: 'white', - }, - '& .CodeMirror': { + '& .CodeMirror': { // поле ввода backgroundColor: 'transparent', color: 'white', + border: 'none' }, }} > @@ -302,7 +273,7 @@ export const News = () => { borderRadius: '999px', textTransform: 'uppercase', fontFamily: 'Benzin-Bold', - fontSize: '0.8vw', + fontSize: '1vw', letterSpacing: '0.08em', backgroundImage: 'linear-gradient(71deg, #F27121 0%, #E940CD 60%, #8A2387 100%)', @@ -310,7 +281,9 @@ export const News = () => { '&:hover': { boxShadow: '0 18px 40px rgba(0,0,0,1)', filter: 'brightness(1.05)', + transform: 'scale(1.02)', }, + transition: 'all 0.5s ease' }} > {creating ? 'Публикация...' : 'Опубликовать'} @@ -381,12 +354,13 @@ export const News = () => { boxShadow: '0 18px 45px rgba(0, 0, 0, 0.7)', backdropFilter: 'blur(14px)', width: '80vw', - transition: - 'transform 0.25s ease, box-shadow 0.25s.ease, border-color 0.25s ease', + // transition: + // 'transform 0.25s ease, box-shadow 0.25s.ease, border-color 0.25s ease', '&:hover': { boxShadow: '0 24px 60px rgba(0, 0, 0, 0.9)', borderColor: 'rgba(242,113,33,0.5)', }, + transition: 'all 0.25s ease', }} > {/* Шапка новости */} @@ -453,19 +427,20 @@ export const News = () => { handleToggleExpand(item.id)} sx={{ - ml: 1, - alignSelf: 'center', transform: isExpanded ? 'rotate(180deg)' : 'rotate(0deg)', - transition: 'transform 0.25s ease, background 0.25s ease', background: - 'linear-gradient(140deg, rgba(242,113,33,0.15), rgba(233,64,87,0.15))', + 'rgba(242,113,33,0.15)', borderRadius: '1.4vw', '&:hover': { background: - 'linear-gradient(140deg, rgba(242,113,33,0.4), rgba(233,64,87,0.4))', + 'rgba(242,113,33,0.4)', }, + transition: 'all 0.25s ease', }} > { {isAdmin && ( handleDeleteNews(item.id)} sx={{ - mt: 0.5, - backgroundColor: 'rgba(255, 77, 77, 0.1)', + background: 'rgba(255, 77, 77, 0.1)', borderRadius: '1.4vw', '&:hover': { - backgroundColor: 'rgba(255, 77, 77, 0.3)', + background: 'rgba(255, 77, 77, 0.3)', }, }} > diff --git a/src/renderer/pages/Shop.tsx b/src/renderer/pages/Shop.tsx index c91486c..b5bfeb7 100644 --- a/src/renderer/pages/Shop.tsx +++ b/src/renderer/pages/Shop.tsx @@ -407,6 +407,7 @@ export default function Shop() { height: '100%', justifyContent: 'center', alignItems: 'center', + overflow: 'hidden', }} > {(loading || onlineCheckLoading) && ( @@ -418,14 +419,13 @@ export default function Shop() { sx={{ display: 'flex', flexDirection: 'column', - width: '90%', - height: '80%', + width: '100%', + height: '100%', gap: '2vw', overflow: 'auto', - paddingTop: '3vh', - paddingBottom: '10vh', - paddingLeft: '5vw', - paddingRight: '5vw', + paddingBottom: '5vw', + paddingLeft: '2.5vw', + paddingRight: '1.5vw', }} > {/* Блок прокачки */} @@ -434,6 +434,7 @@ export default function Shop() { display: 'flex', flexDirection: 'column', gap: 2, + mt: '2vh' }} > { checkPlayerStatus(); // обновляем онлайн-статус diff --git a/src/renderer/pages/VersionsExplorer.tsx b/src/renderer/pages/VersionsExplorer.tsx index 144128b..32d9bed 100644 --- a/src/renderer/pages/VersionsExplorer.tsx +++ b/src/renderer/pages/VersionsExplorer.tsx @@ -285,63 +285,14 @@ export const VersionsExplorer = () => { return ( - {/* Заголовок страницы в стиле Registration */} - - - Выбор версии клиента - - - Выберите установленную версию или добавьте новую сборку - - - - {/* Глобальный фоновый слой (мягкий эффект) */} - {/* */} - {loading ? ( ) : ( @@ -525,7 +476,7 @@ export const VersionsExplorer = () => { fontSize: '1vw', textTransform: 'none', '&:hover': { - transform: 'scale(1.05)', + transform: 'scale(1.01)', boxShadow: '0 10px 30px rgba(0,0,0,0.6)', }, }}