+
+ );
+};
+
+export default MainPageLayout;
diff --git a/src/components/Layouts/index.ts b/src/components/Layouts/index.ts
new file mode 100644
index 00000000..a03812a2
--- /dev/null
+++ b/src/components/Layouts/index.ts
@@ -0,0 +1,7 @@
+import MainPageLayout from "./MainPageLayout/MainPageLayout";
+import AppLayout from "./AppLayout/AppLayout";
+
+export {
+ MainPageLayout,
+ AppLayout,
+};
diff --git a/src/components/MainPage/About/About.module.scss b/src/components/MainPage/About/About.module.scss
new file mode 100644
index 00000000..97753b31
--- /dev/null
+++ b/src/components/MainPage/About/About.module.scss
@@ -0,0 +1,9 @@
+.container {
+ padding: 0 24px;
+ margin-bottom: 24px;
+
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+}
\ No newline at end of file
diff --git a/src/components/MainPage/About/About.tsx b/src/components/MainPage/About/About.tsx
new file mode 100644
index 00000000..ef9af196
--- /dev/null
+++ b/src/components/MainPage/About/About.tsx
@@ -0,0 +1,45 @@
+
+import React from 'react';
+import styles from './About.module.scss';
+import { Typography, Button } from '@mui/material';
+import { useTheme } from '@mui/material/styles';
+import { textColor } from '../../../utils/ThemeConstants';
+import { NavLink } from 'react-router-dom';
+
+const About = () => {
+
+ const theme = useTheme();
+
+ return (
+
+
+ Работайте с результатами палеомагнитных исследований.
+
+
+ В любое время, в любом месте, с любого устройства.
+
+
+ И не беспокойтесь о защите данных.
+
+
+
+
+
+
+ );
+};
+
+export default About;
diff --git a/src/components/MainPage/Description/Description.module.scss b/src/components/MainPage/Description/Description.module.scss
new file mode 100644
index 00000000..a861e898
--- /dev/null
+++ b/src/components/MainPage/Description/Description.module.scss
@@ -0,0 +1,71 @@
+.container {
+ position: relative;
+ padding: 72px 240px 52px 240px;
+ margin: 48px 0;
+
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+}
+
+.tabs {
+ position: relative;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+
+ width: 100%;
+ min-height: 120px;
+}
+
+.icon {
+ position: absolute;
+ top: -60px;
+ left: calc(50% - 36px);
+
+ width: 72px;
+ height: 72px;
+
+ display: flex;
+ justify-content: center;
+ align-items: center;
+
+ border-radius: 12px;
+
+ background-color: #fff;
+}
+
+.indicator {
+ position: absolute;
+ width: 100%;
+ height: 10px;
+
+ display: flex;
+ flex-direction: row;
+ justify-content: space-between;
+ align-items: center;
+
+ padding: 0 168px;
+ bottom: -32px;
+ box-sizing: border-box;
+
+ &:hover {
+ & .indicatorItem {
+ height: 9px;
+ }
+ }
+
+ & .indicatorItem {
+ height: 7px;
+ border-radius: 4px;
+
+ &:hover {
+ cursor: pointer;
+ }
+ }
+
+ & .active {
+ box-shadow: 0px 0px 5px 1px #119dff;
+ }
+}
\ No newline at end of file
diff --git a/src/components/MainPage/Description/Description.tsx b/src/components/MainPage/Description/Description.tsx
new file mode 100644
index 00000000..3cd6a802
--- /dev/null
+++ b/src/components/MainPage/Description/Description.tsx
@@ -0,0 +1,101 @@
+
+import React, { useEffect, useState } from 'react';
+import styles from './Description.module.scss';
+import { Typography, Button } from '@mui/material';
+import { useTheme } from '@mui/material/styles';
+import { textColor, bgColorBlocks } from '../../../utils/ThemeConstants';
+import tools from './assets/tools.png';
+import privacy from './assets/privacy.png';
+import modules from './assets/modules.png';
+import table from './assets/table.png';
+import graph from './assets/graph.png';
+
+type Content = Array<{
+ text: string,
+ icon: string,
+}>;
+
+const PrettyTabs = ({content}: {content: Content}) => {
+
+ const theme = useTheme();
+
+ const [tabIndex, setTabIndex] = useState
+
+ { content[tabIndex].text }
+
+ hover(true)}
// onPointerOut={(event) => hover(false)}
>
);
diff --git a/src/components/Main/DynamicLogo/SetArc3D.tsx b/src/components/MainPage/DynamicLogo/SetArc3D.tsx
similarity index 100%
rename from src/components/Main/DynamicLogo/SetArc3D.tsx
rename to src/components/MainPage/DynamicLogo/SetArc3D.tsx
diff --git a/src/components/Main/DynamicLogo/SpherePath.tsx b/src/components/MainPage/DynamicLogo/SpherePath.tsx
similarity index 100%
rename from src/components/Main/DynamicLogo/SpherePath.tsx
rename to src/components/MainPage/DynamicLogo/SpherePath.tsx
diff --git a/src/components/Main/DynamicLogo/SphericalPoints.tsx b/src/components/MainPage/DynamicLogo/SphericalPoints.tsx
similarity index 100%
rename from src/components/Main/DynamicLogo/SphericalPoints.tsx
rename to src/components/MainPage/DynamicLogo/SphericalPoints.tsx
diff --git a/src/components/Main/DynamicLogo/Word.tsx b/src/components/MainPage/DynamicLogo/Word.tsx
similarity index 100%
rename from src/components/Main/DynamicLogo/Word.tsx
rename to src/components/MainPage/DynamicLogo/Word.tsx
diff --git a/src/components/MainPage/FeaturesCards/FeatureCard.tsx b/src/components/MainPage/FeaturesCards/FeatureCard.tsx
new file mode 100644
index 00000000..535f1fb3
--- /dev/null
+++ b/src/components/MainPage/FeaturesCards/FeatureCard.tsx
@@ -0,0 +1,51 @@
+import React, { useEffect, useState } from 'react';
+import styles from './FeaturesCards.module.scss';
+import { Typography, Button } from '@mui/material';
+import { useTheme } from '@mui/material/styles';
+import { textColor, bgColorBlocks } from '../../../utils/ThemeConstants';
+
+export type Content = {
+ text: {title: string, description: string};
+ image: string,
+ align: 'left' | 'right',
+};
+
+const FeatureCard = ({ text, image, align }: Content) => {
+
+ const theme = useTheme();
+
+ return (
+ = [
+ {
+ text: {
+ title: 'Проводите компонентный анализ',
+ description: 'Страница магнитных чисток (PCA) предоставляет классические инструменты для выделения компонент намагниченности. Работайте напрямую с коллекцией образцов и экспортируйте выделенные направления в любом удобном формате.'
+ },
+ image: theme.palette.mode === 'light' ? pca : pcaDark,
+ align: 'left'
+ },
+ {
+ text: {
+ title: 'Изучайте распределения направлений',
+ description: 'Страница статистики направлений (DIR) даёт возможность найти средние направления различными методами. И на этой же странице вы можете провести палеомагнитные статистические тесты для проверки своих гипотез.'
+ },
+ image: theme.palette.mode === 'light' ? dir : dirDark,
+ align: 'right'
+ },
+ {
+ text: {
+ title: 'Находите виртуальные геомагнитные полюса',
+ description: 'Для расчёта полюсов достаточно на странице DIR открыть соответствующий модуль и просто ввести или импортировать координаты точек отбора образцов (можно даже из XLSX файла). И полученные VGP можно тут же экспортировать в формате, подходящем для программы GPLates',
+ },
+ image: theme.palette.mode === 'light' ? vgp : vgpDark,
+ align: 'left'
+ },
+ {
+ text: {
+ title: 'Взаимодействие с данными ещё не было столь простым',
+ description: 'Все данные в PMTools представлены в виде таблиц и графиков, которые напрямую связаны между собой — вы можете выбирать нужные вам направления (точки) прямиком из таблиц, обводя их на графиках, или даже вводя их через в специальное поле.'
+ },
+ image: theme.palette.mode === 'light' ? selection : selectionDark,
+ align: 'right'
+ },
+ {
+ text: {
+ title: 'Работайте с данными в любом формате',
+ description: 'Встроенный в PMTools конвертер форматов хранения палеомагнитных данных позволяет вам импортировать классические форматы данных и экспортировать их в любой удобный формат, в том числе в Excel.'
+ },
+ image: theme.palette.mode === 'light' ? exportData : exportDataDark,
+ align: 'left'
+ },
+ {
+ text: {
+ title: 'Забудьте о трудностях при работе с графикой',
+ description: 'Все графики и диаграммы в PMTools написаны с нуля специально для отображения палеомагнитных данных — все они заранее подготовлены для использования в публикациях и презентациях, а при их экспорте вы получите SVG файл с понятной и легко редактируемой структурой.'
+ },
+ image: theme.palette.mode === 'light' ? exportGraphs : exportGraphsDark,
+ align: 'right'
+ },
+ {
+ text: {
+ title: 'Комфортная работа в любое время суток',
+ description: 'В PMTools вы можете переключиться на тёмную тему и комфортно работать в полной темноте.'
+ },
+ image: theme.palette.mode === 'light' ? darkTheme : darkThemeDark,
+ align: 'left'
+ },
+ ];
+
+ return (
+ = ({ label, to, external }) => {
+
+ const onClickExternal = () => {
+ window.location.href = to;
+ };
+
+ if (external) {
+ return (
+
+ )
+ };
+
+ return (
+
+ {
+ ({ isActive }) => {
+ return (
+
+ );
+ }
+ }
+
+ )
+}
+
+export default NavButton;
diff --git a/src/components/MainPage/NavPanel/NavPanel.module.scss b/src/components/MainPage/NavPanel/NavPanel.module.scss
new file mode 100644
index 00000000..f1dbedbc
--- /dev/null
+++ b/src/components/MainPage/NavPanel/NavPanel.module.scss
@@ -0,0 +1,22 @@
+.container {
+ position: relative;
+ display: flex;
+ flex-direction: row;
+ justify-content: center;
+ align-items: center;
+
+ padding: 8px 0px;
+
+ & .settings {
+ position: absolute;
+ top: calc(50% - 20px);
+ right: 28px;
+
+ width: 80px;
+ height: 40px;
+
+ display: flex;
+ flex-direction: row;
+ // align-items: flex-end;
+ }
+}
\ No newline at end of file
diff --git a/src/components/MainPage/NavPanel/NavPanel.tsx b/src/components/MainPage/NavPanel/NavPanel.tsx
new file mode 100644
index 00000000..f524e624
--- /dev/null
+++ b/src/components/MainPage/NavPanel/NavPanel.tsx
@@ -0,0 +1,76 @@
+import React, { FC, useEffect } from "react";
+import styles from './NavPanel.module.scss';
+import { useMediaQuery } from "react-responsive";
+import NavButton from "./NavButton";
+import pmtoolsLogo from './pmtools_logo.png';
+// import { default as pmtoolsLogo } from './PMTools_logo.svg';
+import { NavLink } from "react-router-dom";
+import { IconButton } from "@mui/material";
+import { useTheme } from '@mui/material/styles';
+import { useSystemTheme } from "../../../utils/GlobalHooks";
+import Brightness4Icon from '@mui/icons-material/Brightness4';
+import Brightness7Icon from '@mui/icons-material/Brightness7';
+import LanguageIcon from '@mui/icons-material/Language';
+import { useAppDispatch, useAppSelector } from "../../../services/store/hooks";
+import { setColorMode } from "../../../services/reducers/appSettings";
+
+const NavPanel = () => {
+
+ const dispatch = useAppDispatch();
+
+ const isSmallScreen = useMediaQuery({ query: '(max-width: 1464px)' });
+ const { colorMode } = useAppSelector(state => state.appSettingsReducer);
+ const systemTheme = useSystemTheme();
+ const theme = useTheme();
+
+ const onColorModeClick = () => {
+ dispatch(setColorMode(colorMode === 'dark' ? 'light' : 'dark'));
+ };
+
+ const onLanguageClick = () => {
+ console.log('language click');
+ };
+
+ useEffect(() => {
+ dispatch(setColorMode(systemTheme));
+ }, [systemTheme]);
+
+ return (
+ = ({ dataToShow }) => {
diff --git a/src/pages/MainPage/MainPage.module.scss b/src/pages/MainPage/MainPage.module.scss
index fa50063f..8a72fc8d 100644
--- a/src/pages/MainPage/MainPage.module.scss
+++ b/src/pages/MainPage/MainPage.module.scss
@@ -1,8 +1,9 @@
-.mainPage {
+.logo {
+ width: 100%;
+ height: 520px;
+
display: flex;
- flex-direction: row;
+ flex-direction: column;
justify-content: center;
align-items: center;
-
- color: white;
}
\ No newline at end of file
diff --git a/src/pages/MainPage/MainPage.tsx b/src/pages/MainPage/MainPage.tsx
index 4c03c077..882c1601 100644
--- a/src/pages/MainPage/MainPage.tsx
+++ b/src/pages/MainPage/MainPage.tsx
@@ -2,25 +2,25 @@ import React, { FC } from 'react';
import styles from './MainPage.module.scss';
import { useTheme } from '@mui/material/styles';
import {
- bgColorMain,
+ textColor,
} from '../../utils/ThemeConstants';
-import { DynamicLogo } from '../../components/Main';
+import { DynamicLogo, NavPanel, About, Description, FeatureCards, Footer } from '../../components/MainPage';
+import { Typography } from '@mui/material';
const MainPage: FC = ({}) => {
const theme = useTheme();
-
- console.log(theme.palette.mode);
return (
<>
-
+ 
+
+
+ {
+ content.map((tabContent, index) => (
+
+ );
+};
+
+const Description = () => {
+
+ const theme = useTheme();
+
+ const content: Content = [
+ {
+ text: 'PMTools — веб-приложение, включающее в себя множество инструментов для статистической обработки данных, полученных в ходе палеомагнитных исследований.',
+ icon: tools,
+ },
+ {
+ text: 'PMTools имеет открытый исходный код и не имеет связи ни с какими другими приложениями и серверами. Все данные хранятся и обрабатываются только на стороне пользователя.',
+ icon: privacy,
+ },
+ {
+ text: 'В PMTools имеются все необходимые инструменты для компонентного анализа (модуль PCA) и статистики векторов на сфере (модуль DIR).',
+ icon: modules,
+ },
+ {
+ text: 'PMTools поддерживает импорт таких форматов данных, как PMD, DIR, PMM. В этих же форматах может быть произведён экспорт любых табличных данных в PMTools. Более того, возможен экспорт данных в форматах XLSX и CSV.',
+ icon: table,
+ },
+ {
+ text: 'Все графики и диаграммы, генерируемые в ходе обработки данных в PMTools, могут быть экспортированы в векторном формате и имеют идеально подготовленную для редактирования внутреннюю структуру.',
+ icon: graph,
+ }
+ ];
+
+ return (
+ setTabIndex(index)}
+ style={{
+ width: `calc(72% / ${content.length})`,
+ backgroundColor: theme.palette.mode === 'dark' ? '#fff' : '#474c50',
+ }}
+ />
+ ))
+ }
+
+
+
+ );
+};
+
+export default Description;
diff --git a/src/components/MainPage/Description/assets/graph.png b/src/components/MainPage/Description/assets/graph.png
new file mode 100644
index 00000000..92a5341d
Binary files /dev/null and b/src/components/MainPage/Description/assets/graph.png differ
diff --git a/src/components/MainPage/Description/assets/modules.png b/src/components/MainPage/Description/assets/modules.png
new file mode 100644
index 00000000..d2b7cf15
Binary files /dev/null and b/src/components/MainPage/Description/assets/modules.png differ
diff --git a/src/components/MainPage/Description/assets/privacy.png b/src/components/MainPage/Description/assets/privacy.png
new file mode 100644
index 00000000..15d14d59
Binary files /dev/null and b/src/components/MainPage/Description/assets/privacy.png differ
diff --git a/src/components/MainPage/Description/assets/table.png b/src/components/MainPage/Description/assets/table.png
new file mode 100644
index 00000000..577442f6
Binary files /dev/null and b/src/components/MainPage/Description/assets/table.png differ
diff --git a/src/components/MainPage/Description/assets/tools.png b/src/components/MainPage/Description/assets/tools.png
new file mode 100644
index 00000000..5eefd09c
Binary files /dev/null and b/src/components/MainPage/Description/assets/tools.png differ
diff --git a/src/components/Main/DynamicLogo/Coordinates.tsx b/src/components/MainPage/DynamicLogo/Coordinates.tsx
similarity index 100%
rename from src/components/Main/DynamicLogo/Coordinates.tsx
rename to src/components/MainPage/DynamicLogo/Coordinates.tsx
diff --git a/src/components/Main/DynamicLogo/DynamicLogo.module.scss b/src/components/MainPage/DynamicLogo/DynamicLogo.module.scss
similarity index 100%
rename from src/components/Main/DynamicLogo/DynamicLogo.module.scss
rename to src/components/MainPage/DynamicLogo/DynamicLogo.module.scss
diff --git a/src/components/Main/DynamicLogo/DynamicLogo.tsx b/src/components/MainPage/DynamicLogo/DynamicLogo.tsx
similarity index 95%
rename from src/components/Main/DynamicLogo/DynamicLogo.tsx
rename to src/components/MainPage/DynamicLogo/DynamicLogo.tsx
index 8fb8b422..e853d2f0 100644
--- a/src/components/Main/DynamicLogo/DynamicLogo.tsx
+++ b/src/components/MainPage/DynamicLogo/DynamicLogo.tsx
@@ -62,18 +62,20 @@ const Sphere = (props: JSX.IntrinsicElements['mesh'] & {themeMode: 'dark' | 'lig
+
+ );
+};
+
+export default FeatureCard;
+
diff --git a/src/components/MainPage/FeaturesCards/FeaturesCards.module.scss b/src/components/MainPage/FeaturesCards/FeaturesCards.module.scss
new file mode 100644
index 00000000..d34e413d
--- /dev/null
+++ b/src/components/MainPage/FeaturesCards/FeaturesCards.module.scss
@@ -0,0 +1,32 @@
+.container {
+ position: relative;
+ padding: 72px 120px 52px 120px;
+ margin: 48px 0;
+
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+}
+
+.card {
+ width: 100%;
+ height: 100%;
+
+ display: flex;
+ flex-direction: row;
+ justify-content: center;
+ align-items: center;
+
+ padding: 32px 96px;
+
+ .cardText {
+ width: 80%;
+ height: 100%;
+ }
+
+ .cardImage {
+ width: 100%;
+ height: 100%;
+ }
+}
\ No newline at end of file
diff --git a/src/components/MainPage/FeaturesCards/FeaturesCards.tsx b/src/components/MainPage/FeaturesCards/FeaturesCards.tsx
new file mode 100644
index 00000000..b2f1b4d0
--- /dev/null
+++ b/src/components/MainPage/FeaturesCards/FeaturesCards.tsx
@@ -0,0 +1,110 @@
+
+import React, { useEffect, useState } from 'react';
+import styles from './FeaturesCards.module.scss';
+import { Typography, Button } from '@mui/material';
+import { useTheme } from '@mui/material/styles';
+import { textColor, bgColorBlocks } from '../../../utils/ThemeConstants';
+import FeatureCard, { Content } from './FeatureCard';
+import {
+ pca,
+ pcaDark,
+ dir,
+ dirDark,
+ vgp,
+ vgpDark,
+ selection,
+ selectionDark,
+ exportData,
+ exportDataDark,
+ exportGraphs,
+ exportGraphsDark,
+ darkTheme,
+ darkThemeDark,
+} from './assets';
+
+
+const Description = () => {
+
+ const theme = useTheme();
+
+ const content: Array
+
+ {text.title}
+
+
+ {text.description}
+
+
+
+ 
+
+
+ {
+ content.map((card, index) => (
+
+ );
+};
+
+export default Description;
diff --git a/src/components/MainPage/FeaturesCards/assets/darkTheme.png b/src/components/MainPage/FeaturesCards/assets/darkTheme.png
new file mode 100644
index 00000000..70056e98
Binary files /dev/null and b/src/components/MainPage/FeaturesCards/assets/darkTheme.png differ
diff --git a/src/components/MainPage/FeaturesCards/assets/darkThemeDark.png b/src/components/MainPage/FeaturesCards/assets/darkThemeDark.png
new file mode 100644
index 00000000..4eb48038
Binary files /dev/null and b/src/components/MainPage/FeaturesCards/assets/darkThemeDark.png differ
diff --git a/src/components/MainPage/FeaturesCards/assets/dir.png b/src/components/MainPage/FeaturesCards/assets/dir.png
new file mode 100644
index 00000000..e3646efe
Binary files /dev/null and b/src/components/MainPage/FeaturesCards/assets/dir.png differ
diff --git a/src/components/MainPage/FeaturesCards/assets/dirDark.png b/src/components/MainPage/FeaturesCards/assets/dirDark.png
new file mode 100644
index 00000000..e79e3265
Binary files /dev/null and b/src/components/MainPage/FeaturesCards/assets/dirDark.png differ
diff --git a/src/components/MainPage/FeaturesCards/assets/exportData.png b/src/components/MainPage/FeaturesCards/assets/exportData.png
new file mode 100644
index 00000000..e1e043a2
Binary files /dev/null and b/src/components/MainPage/FeaturesCards/assets/exportData.png differ
diff --git a/src/components/MainPage/FeaturesCards/assets/exportDataDark.png b/src/components/MainPage/FeaturesCards/assets/exportDataDark.png
new file mode 100644
index 00000000..d8f2f1df
Binary files /dev/null and b/src/components/MainPage/FeaturesCards/assets/exportDataDark.png differ
diff --git a/src/components/MainPage/FeaturesCards/assets/exportGraphs.png b/src/components/MainPage/FeaturesCards/assets/exportGraphs.png
new file mode 100644
index 00000000..2c5cb053
Binary files /dev/null and b/src/components/MainPage/FeaturesCards/assets/exportGraphs.png differ
diff --git a/src/components/MainPage/FeaturesCards/assets/exportGraphsDark.png b/src/components/MainPage/FeaturesCards/assets/exportGraphsDark.png
new file mode 100644
index 00000000..f81ed032
Binary files /dev/null and b/src/components/MainPage/FeaturesCards/assets/exportGraphsDark.png differ
diff --git a/src/components/MainPage/FeaturesCards/assets/index.ts b/src/components/MainPage/FeaturesCards/assets/index.ts
new file mode 100644
index 00000000..039d86f9
--- /dev/null
+++ b/src/components/MainPage/FeaturesCards/assets/index.ts
@@ -0,0 +1,31 @@
+import pca from './pca.png';
+import pcaDark from './pcaDark.png';
+import dir from './dir.png';
+import dirDark from './dirDark.png';
+import vgp from './vgp.png';
+import vgpDark from './vgpDark.png';
+import selection from './selection.png';
+import selectionDark from './selectionDark.png';
+import exportData from './exportData.png';
+import exportDataDark from './exportDataDark.png';
+import exportGraphs from './exportGraphs.png';
+import exportGraphsDark from './exportGraphsDark.png';
+import darkTheme from './darkTheme.png';
+import darkThemeDark from './darkThemeDark.png';
+
+export {
+ pca,
+ pcaDark,
+ dir,
+ dirDark,
+ vgp,
+ vgpDark,
+ selection,
+ selectionDark,
+ exportData,
+ exportDataDark,
+ exportGraphs,
+ exportGraphsDark,
+ darkTheme,
+ darkThemeDark,
+};
diff --git a/src/components/MainPage/FeaturesCards/assets/pca.png b/src/components/MainPage/FeaturesCards/assets/pca.png
new file mode 100644
index 00000000..7ed5bc18
Binary files /dev/null and b/src/components/MainPage/FeaturesCards/assets/pca.png differ
diff --git a/src/components/MainPage/FeaturesCards/assets/pcaDark.png b/src/components/MainPage/FeaturesCards/assets/pcaDark.png
new file mode 100644
index 00000000..45b8e808
Binary files /dev/null and b/src/components/MainPage/FeaturesCards/assets/pcaDark.png differ
diff --git a/src/components/MainPage/FeaturesCards/assets/selection.png b/src/components/MainPage/FeaturesCards/assets/selection.png
new file mode 100644
index 00000000..fab639c0
Binary files /dev/null and b/src/components/MainPage/FeaturesCards/assets/selection.png differ
diff --git a/src/components/MainPage/FeaturesCards/assets/selectionDark.png b/src/components/MainPage/FeaturesCards/assets/selectionDark.png
new file mode 100644
index 00000000..a1460aa4
Binary files /dev/null and b/src/components/MainPage/FeaturesCards/assets/selectionDark.png differ
diff --git a/src/components/MainPage/FeaturesCards/assets/vgp.png b/src/components/MainPage/FeaturesCards/assets/vgp.png
new file mode 100644
index 00000000..b7e15d71
Binary files /dev/null and b/src/components/MainPage/FeaturesCards/assets/vgp.png differ
diff --git a/src/components/MainPage/FeaturesCards/assets/vgpDark.png b/src/components/MainPage/FeaturesCards/assets/vgpDark.png
new file mode 100644
index 00000000..5b422270
Binary files /dev/null and b/src/components/MainPage/FeaturesCards/assets/vgpDark.png differ
diff --git a/src/components/MainPage/Footer/Footer.module.scss b/src/components/MainPage/Footer/Footer.module.scss
new file mode 100644
index 00000000..a7bacf60
--- /dev/null
+++ b/src/components/MainPage/Footer/Footer.module.scss
@@ -0,0 +1,21 @@
+.container {
+ width: 100%;
+ height: 100%;
+
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ justify-content: space-between;
+
+ padding: 72px 240px 52px 240px;
+ margin: 48px 0 0 0;
+
+ box-sizing: border-box;
+}
+
+.rightBlock {
+ display: flex;
+ flex-direction: row;
+ justify-content: space-between;
+ align-items: center;
+}
\ No newline at end of file
diff --git a/src/components/MainPage/Footer/Footer.tsx b/src/components/MainPage/Footer/Footer.tsx
new file mode 100644
index 00000000..ca4bd0e6
--- /dev/null
+++ b/src/components/MainPage/Footer/Footer.tsx
@@ -0,0 +1,32 @@
+
+import React, { useEffect, useState } from 'react';
+import styles from './Footer.module.scss';
+import { Divider, Typography } from '@mui/material';
+import { useTheme } from '@mui/material/styles';
+import { textColor, bgColorBlocks } from '../../../utils/ThemeConstants';
+
+const Footer = () => {
+
+ const theme = useTheme();
+
+ return (
+
+ {/*
+ © 2022 PMTools 2.0. Все права защищены.
+
+
+ );
+};
+
+export default Footer;
diff --git a/src/components/MainPage/NavPanel/NavButton.tsx b/src/components/MainPage/NavPanel/NavButton.tsx
new file mode 100644
index 00000000..345fab99
--- /dev/null
+++ b/src/components/MainPage/NavPanel/NavButton.tsx
@@ -0,0 +1,62 @@
+import React, { FC } from "react";
+import styles from './AppNavigation.module.scss';
+import { Button } from '@mui/material';
+import { NavLink } from 'react-router-dom';
+
+interface INavButton {
+ label: string;
+ to: string;
+ external?: boolean;
+}
+
+const NavButton: FC
+
+ Проект поставляется под лицензией MIT.
+
+
+
+
+ 
+
+
+ );
+}
+
+export default NavPanel;
diff --git a/src/components/MainPage/NavPanel/PMTools_logo.svg b/src/components/MainPage/NavPanel/PMTools_logo.svg
new file mode 100644
index 00000000..9e801f9d
Binary files /dev/null and b/src/components/MainPage/NavPanel/PMTools_logo.svg differ
diff --git a/src/components/MainPage/NavPanel/pmtools_logo.png b/src/components/MainPage/NavPanel/pmtools_logo.png
new file mode 100644
index 00000000..5323077f
Binary files /dev/null and b/src/components/MainPage/NavPanel/pmtools_logo.png differ
diff --git a/src/components/MainPage/index.ts b/src/components/MainPage/index.ts
new file mode 100644
index 00000000..fa306405
--- /dev/null
+++ b/src/components/MainPage/index.ts
@@ -0,0 +1,15 @@
+import NavPanel from './NavPanel/NavPanel';
+import DynamicLogo from './DynamicLogo/DynamicLogo';
+import About from './About/About';
+import Description from './Description/Description';
+import FeatureCards from './FeaturesCards/FeaturesCards';
+import Footer from './Footer/Footer';
+
+export {
+ NavPanel,
+ DynamicLogo,
+ About,
+ Description,
+ FeatureCards,
+ Footer,
+};
diff --git a/src/components/Sub/Modal/SettingsModal/Sections/HotkeysSection/HotkeysSection.tsx b/src/components/Sub/Modal/SettingsModal/Sections/HotkeysSection/HotkeysSection.tsx
index 896b1df0..b868065b 100644
--- a/src/components/Sub/Modal/SettingsModal/Sections/HotkeysSection/HotkeysSection.tsx
+++ b/src/components/Sub/Modal/SettingsModal/Sections/HotkeysSection/HotkeysSection.tsx
@@ -7,7 +7,7 @@ import { textColor, bgColorBlocks } from "../../../../../../utils/ThemeConstants
import { useForm } from "react-hook-form";
import { HotkeysType } from "../../../../../../utils/GlobalTypes";
-import { defaultHotkeys } from "../../../../../Main/AppSettings/hotkeys";
+import { defaultHotkeys } from "../../../../../AppLogic/AppSettings/hotkeys";
import { useAppDispatch, useAppSelector } from "../../../../../../services/store/hooks";
import { setHotkeys } from "../../../../../../services/reducers/appSettings";
diff --git a/src/index.scss b/src/index.scss
index ea03904e..a175d5fe 100644
--- a/src/index.scss
+++ b/src/index.scss
@@ -5,6 +5,7 @@ body {
sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
+ overflow: overlay;
}
code {
@@ -15,7 +16,6 @@ code {
::-webkit-scrollbar {
width: 4px;
height: 4px;
- background-color: transparent;
}
*:hover::-webkit-scrollbar {
@@ -24,6 +24,11 @@ code {
}
::-webkit-scrollbar-thumb {
- background-color: #9facb3;
+ background-color: #474c50;
border-radius: 6px;
}
+
+::-webkit-scrollbar-track {
+ // background: #202020;
+ background: transparent;
+}
diff --git a/src/pages/DIRPage/DIRPage.tsx b/src/pages/DIRPage/DIRPage.tsx
index d411e5f8..fb241a44 100644
--- a/src/pages/DIRPage/DIRPage.tsx
+++ b/src/pages/DIRPage/DIRPage.tsx
@@ -1,19 +1,23 @@
import React, { FC, useEffect, useState } from 'react';
import styles from './DIRPage.module.scss';
-import { useTheme } from '@mui/material/styles';
-import ToolsDIR from '../../components/Main/ToolsDIR/ToolsDIR';
-import { filesToData } from '../../services/axios/filesAndData';
-import { addInterpretation, setStatisticsMode, showSelectionInput, updateCurrentInterpretation } from '../../services/reducers/dirPage';
import { useAppDispatch, useAppSelector } from '../../services/store/hooks';
+import {
+ addInterpretation,
+ setStatisticsMode,
+ showSelectionInput,
+ updateCurrentInterpretation
+} from '../../services/reducers/dirPage';
+import { filesToData } from '../../services/axios/filesAndData';
import { IDirData } from '../../utils/GlobalTypes';
-import { bgColorMain } from '../../utils/ThemeConstants';
+import calculateStatisticsDIR from '../../utils/statistics/calculateStatisticsDIR';
import Tables from './Tables';
import Graphs from './Graphs';
-import calculateStatisticsDIR from '../../utils/statistics/calculateStatisticsDIR';
+import { ToolsDIR } from '../../components/AppLogic';
+import { useTheme } from '@mui/material/styles';
+import { bgColorMain } from '../../utils/ThemeConstants';
import ModalWrapper from '../../components/Sub/Modal/ModalWrapper';
import UploadModal from '../../components/Sub/Modal/UploadModal/UploadModal';
-
const DIRPage: FC = ({}) => {
const dispatch = useAppDispatch();
diff --git a/src/pages/DIRPage/Graphs.tsx b/src/pages/DIRPage/Graphs.tsx
index 29929075..18f3bcf1 100644
--- a/src/pages/DIRPage/Graphs.tsx
+++ b/src/pages/DIRPage/Graphs.tsx
@@ -3,7 +3,7 @@ import styles from './DIRPage.module.scss';
import { useWindowSize } from '../../utils/GlobalHooks';
import { IDirData } from '../../utils/GlobalTypes';
import GraphsSkeleton from './GraphsSkeleton';
-import StereoGraphDIR from '../../components/Graph/StereoGraphDIR/StereoGraphDIR';
+import { StereoGraphDIR }from '../../components/AppGraphs';
interface IGraphs {
dataToShow: IDirData | null;
diff --git a/src/pages/DIRPage/Tables.tsx b/src/pages/DIRPage/Tables.tsx
index f2d9b07f..326483d8 100644
--- a/src/pages/DIRPage/Tables.tsx
+++ b/src/pages/DIRPage/Tables.tsx
@@ -1,16 +1,16 @@
import React, { FC, useEffect, useState } from 'react';
import styles from './DIRPage.module.scss';
-import { useAppDispatch, useAppSelector } from '../../services/store/hooks';
+import { useAppSelector } from '../../services/store/hooks';
+import { IDirData, StatisitcsInterpretation } from "../../utils/GlobalTypes";
+import { DataTableDIR, StatisticsDataTableDIR } from '../../components/AppLogic';
import { useTheme } from '@mui/material/styles';
-import { DataTableDIR, StatisticsDataTableDIR } from '../../components/Main';
-import { IDirData, IPmdData, StatisitcsInterpretation } from "../../utils/GlobalTypes";
import {
bgColorMain,
} from '../../utils/ThemeConstants';
interface ITables {
dataToShow: IDirData | null;
-}
+};
const Tables: FC
+
+ {theme.palette.mode === 'dark' ?
+
+
+
+
+
+
- //
)
}
diff --git a/src/pages/MainPage/pmtools_logo.png b/src/pages/MainPage/pmtools_logo.png
new file mode 100644
index 00000000..06cc6ff3
Binary files /dev/null and b/src/pages/MainPage/pmtools_logo.png differ
diff --git a/src/pages/PCAPage/Graphs.tsx b/src/pages/PCAPage/Graphs.tsx
index 32d95402..aeb1dde2 100644
--- a/src/pages/PCAPage/Graphs.tsx
+++ b/src/pages/PCAPage/Graphs.tsx
@@ -1,7 +1,7 @@
import React, { FC, useEffect, useRef, useState } from 'react';
import styles from './PCAPage.module.scss';
import { useWindowSize } from '../../utils/GlobalHooks';
-import { ZijdGraph, StereoGraph, MagGraph} from '../../components/Graph';
+import { ZijdGraph, StereoGraph, MagGraph} from '../../components/AppGraphs';
import { IPmdData } from '../../utils/GlobalTypes';
import GraphsSkeleton from './GraphsSkeleton';
diff --git a/src/pages/PCAPage/PCAPage.tsx b/src/pages/PCAPage/PCAPage.tsx
index 823af987..c0e6b4e0 100644
--- a/src/pages/PCAPage/PCAPage.tsx
+++ b/src/pages/PCAPage/PCAPage.tsx
@@ -1,17 +1,22 @@
import React, { FC, useEffect, useState } from 'react';
import styles from './PCAPage.module.scss';
import { useAppDispatch, useAppSelector } from '../../services/store/hooks';
+import {
+ addInterpretation,
+ setStatisticsMode,
+ showStepsInput,
+ updateCurrentInterpretation
+} from '../../services/reducers/pcaPage';
import { filesToData } from '../../services/axios/filesAndData';
import { IPmdData } from '../../utils/GlobalTypes';
-import { MetaDataTablePMD, ToolsPMD } from '../../components/Main';
+import calculateStatisticsPMD from '../../utils/statistics/calculateStatisticsPMD';
+import { MetaDataTablePMD, ToolsPMD } from '../../components/AppLogic';
import Graphs from './Graphs';
import Tables from './Tables';
import { useTheme } from '@mui/material/styles';
import {
bgColorMain,
} from '../../utils/ThemeConstants';
-import { addInterpretation, setStatisticsMode, showStepsInput, updateCurrentInterpretation } from '../../services/reducers/pcaPage';
-import calculateStatisticsPMD from '../../utils/statistics/calculateStatisticsPMD';
import ModalWrapper from '../../components/Sub/Modal/ModalWrapper';
import UploadModal from '../../components/Sub/Modal/UploadModal/UploadModal';
diff --git a/src/pages/PCAPage/Tables.tsx b/src/pages/PCAPage/Tables.tsx
index fa0a09c0..182e719e 100644
--- a/src/pages/PCAPage/Tables.tsx
+++ b/src/pages/PCAPage/Tables.tsx
@@ -1,9 +1,9 @@
import React, { FC, useEffect, useState } from 'react';
import styles from './PCAPage.module.scss';
-import { useAppDispatch, useAppSelector } from '../../services/store/hooks';
-import { useTheme } from '@mui/material/styles';
-import { DataTablePMD, StatisticsDataTablePMD } from '../../components/Main';
+import { useAppSelector } from '../../services/store/hooks';
import { IPmdData, StatisitcsInterpretation } from "../../utils/GlobalTypes";
+import { DataTablePMD, StatisticsDataTablePMD } from '../../components/AppLogic';
+import { useTheme } from '@mui/material/styles';
import {
bgColorMain,
} from '../../utils/ThemeConstants';
diff --git a/src/utils/GlobalTypes.ts b/src/utils/GlobalTypes.ts
index f7081cc9..f8e2f8b7 100644
--- a/src/utils/GlobalTypes.ts
+++ b/src/utils/GlobalTypes.ts
@@ -1,6 +1,4 @@
-import { IMagGraph } from "../components/Graph/MagGraph/MagGraph";
-import { IStereoGraph } from "../components/Graph/StereoGraph/StereoGraph";
-import { IZijdGraph } from "../components/Graph/ZijdGraph/ZijdGraph";
+import { IZijdGraph, IStereoGraph, IMagGraph } from '../components/AppGraphs/';
import Coordinates from "./graphs/classes/Coordinates";
import Direction from "./graphs/classes/Direction";
import { StatisticsModeDIR, StatisticsModePCA } from "./graphs/types";