diff --git a/src/App.tsx b/src/App.tsx index 76eeb75..55b7456 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -11,6 +11,8 @@ import {UserProvider} from "./utils/users/UserProvider.tsx"; import {DashboardLayout} from "./layouts/DashboardLayout.tsx"; import {MainLayout} from "./layouts/MainLayout.tsx"; import {DataPage} from "./pages/dashboards/DataPage.tsx"; +import './css/Global.css' +import './css/Containers.css' export default function App() { diff --git a/src/css/Colors.css b/src/css/Colors.css new file mode 100644 index 0000000..2dfeccf --- /dev/null +++ b/src/css/Colors.css @@ -0,0 +1,12 @@ +:root { + /* Основные цвета */ + --color-background: #EEEDFF; + --color-text-primary: #000000; + --color-accent: #003CFF; + --color-secondary: #4C76FE; + --color-button-text: #FFFFFF; + + /* Дополнительно можно добавить общие шрифты и т.п. */ + --font-family: 'Arial', sans-serif; + --font-size-base: 16px; +} \ No newline at end of file diff --git a/src/css/Containers.css b/src/css/Containers.css new file mode 100644 index 0000000..660b552 --- /dev/null +++ b/src/css/Containers.css @@ -0,0 +1,65 @@ +/* === Базовый контейнер === */ +.container { + display: flex; + flex-direction: row; + align-items: stretch; + justify-content: flex-start; + flex-wrap: nowrap; + gap: 0; +} + +/* === Направление flex-direction === */ +.flex-row { flex-direction: row; } +.flex-row-reverse { flex-direction: row-reverse; } +.flex-col { flex-direction: column; } +.flex-col-reverse { flex-direction: column-reverse; } + +/* === Выравнивание элементов по главной оси (justify-content) === */ +.justify-start { justify-content: flex-start; } +.justify-end { justify-content: flex-end; } +.justify-center { justify-content: center; } +.justify-between { justify-content: space-between; } +.justify-around { justify-content: space-around; } +.justify-evenly { justify-content: space-evenly; } + +/* === Выравнивание элементов по поперечной оси (align-items) === */ +.items-start { align-items: flex-start; } +.items-end { align-items: flex-end; } +.items-center { align-items: center; } +.items-stretch { align-items: stretch; } +.items-baseline { align-items: baseline; } + +/* === Выравнивание для самого контейнера на внешнем уровне (align-self) === */ +.self-start { align-self: flex-start; } +.self-end { align-self: flex-end; } +.self-center { align-self: center; } +.self-stretch { align-self: stretch; } + +/* === Обертка дочерних элементов (flex-wrap) === */ +.flex-wrap { flex-wrap: wrap; } +.flex-wrap-reverse { flex-wrap: wrap-reverse; } +.flex-nowrap { flex-wrap: nowrap; } + +/* === Отступы между дочерними элементами (gap) === */ +.gap-1 { gap: 0.25rem; } /* 4px */ +.gap-2 { gap: 0.5rem; } /* 8px */ +.gap-3 { gap: 1rem; } /* 16px */ +.gap-4 { gap: 1.5rem; } /* 24px */ +.gap-5 { gap: 2rem; } /* 32px */ + +/* === Размеры ширины и высоты контейнера === */ +.full-width { width: 100%; } +.full-height { height: 100%; } + +/* === Позиционирование дочерних элементов как самостоятельные flex-элементы === */ +.item { + flex: 1 1 auto; +} +.item-grow { flex-grow: 1; } +.item-shrink { flex-shrink: 1; } + + +.margin-center{ + margin-left: auto; + margin-right: auto; +} \ No newline at end of file diff --git a/src/css/Global.css b/src/css/Global.css new file mode 100644 index 0000000..4344921 --- /dev/null +++ b/src/css/Global.css @@ -0,0 +1,101 @@ +@import './Colors.css'; + +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +body { + font-family: var(--font-family); + font-size: var(--font-size-base); + background-color: var(--color-background); + color: var(--color-text-primary); + line-height: 1.5; +} + + +/* Заголовки */ +h1, h2, h3, h4, h5, h6 { + margin-bottom: 16px; + font-weight: 600; +} + +/* Кнопки */ +button { + font-family: var(--font-family); + font-size: 1rem; + padding: 12px 24px; + background-color: var(--color-accent); + color: var(--color-button-text); + border: none; + border-radius: 4px; + cursor: pointer; + transition: background-color 0.3s ease; +} + +button:hover { + background-color: var(--color-secondary); +} + +/* Формы и инпуты */ +input, +textarea, +select { + font-family: var(--font-family); + font-size: 1rem; + padding: 10px; + border: 1px solid #ccc; + border-radius: 4px; + width: 100%; +} + +input:focus, +textarea:focus, +select:focus { + outline: none; + border-color: var(--color-accent); + box-shadow: 0 0 0 2px rgba(0, 60, 255, 0.2); +} + +/* Адаптивы */ +@media (max-width: 768px) { + body { + font-size: 14px; + } + + button { + width: 100%; + padding: 14px; + } +} + +@media (max-width: 480px) { + body { + font-size: 13px; + } + + button { + font-size: 14px; + padding: 12px; + } +} + +a,button{ + text-decoration: none; + color: var(--color-button-text); + background-color: var(--color-accent); + padding: 10px 20px; + border-radius: 30px; +} + +a,button .selected{ + background-color: var(--color-secondary); +} + +.underline{ + text-decoration: underline; + text-decoration: #af4360; +} \ No newline at end of file diff --git a/src/css/MainPage.css b/src/css/MainPage.css deleted file mode 100644 index e69de29..0000000 diff --git a/src/img/logo.svg b/src/img/logo.svg new file mode 100644 index 0000000..1ec5ab6 --- /dev/null +++ b/src/img/logo.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/layouts/MainLayout.tsx b/src/layouts/MainLayout.tsx index 97be445..f901e90 100644 --- a/src/layouts/MainLayout.tsx +++ b/src/layouts/MainLayout.tsx @@ -1,15 +1,23 @@ import {Link, Outlet} from "react-router-dom"; import React from "react"; +import logoUrl from '../img/logo.svg'; +import "./css/MainLayout.css" export function MainLayout() { return ( <> -
- ☰ -

Pro-Fi Test

+
+ + + + + + + + Logo
- +
); diff --git a/src/layouts/css/MainLayout.css b/src/layouts/css/MainLayout.css new file mode 100644 index 0000000..350e73a --- /dev/null +++ b/src/layouts/css/MainLayout.css @@ -0,0 +1,25 @@ +.header { + display: flex; + flex-direction: column; +} + +.header .menu-button{ + background: none; + position: fixed; + right: 20px; + top: 20px; +} + +.header>img{ + width: 50%; + align-self: center; + margin-top: 50px; +} + +.header .rect{ + fill: var(--color-accent) +} + +.header .menu-button:hover .rect{ + fill: var(--color-secondary) +} \ No newline at end of file diff --git a/src/main.tsx b/src/main.tsx index 4aff025..b305b07 100644 --- a/src/main.tsx +++ b/src/main.tsx @@ -1,4 +1,4 @@ -import { StrictMode } from 'react' +import React, { StrictMode } from 'react' import { createRoot } from 'react-dom/client' import App from './App.tsx' diff --git a/src/pages/MainPage.tsx b/src/pages/MainPage.tsx index 789113e..d69c74a 100644 --- a/src/pages/MainPage.tsx +++ b/src/pages/MainPage.tsx @@ -1,9 +1,9 @@ import React from 'react'; import { Link } from 'react-router-dom'; -import '../css/MainPage.css'; import {Survey} from "../types/survey.ts"; import {LoadingList} from "../components/LoadingList.tsx"; import {useDataPage} from "../API/hooks.ts"; +import "./css/MainPage.css" export function MainPage() { @@ -12,20 +12,42 @@ export function MainPage() { return ( -
+

Тесты для школьников и абитуриентов

-
- ( +
+ ( {s.title} )}/>

- Добро пожаловать на Pro-Fi Test — ваш надежный помощник в мире профессий! - Мы понимаем, что выбор будущей профессии — это одно из самых важных решений - в жизни каждого школьника. Наша миссия — помочь молодым людям найти свой путь, - раскрыть таланты и понять, какие профессии соответствуют их интересам и способностям. + Добро пожаловать на Pro-Fi Test — платформу, созданную для тех, кто стоит перед важным + выбором: какую профессию выбрать, куда поступать и кем стать. + Мы знаем, что определиться с будущим бывает непросто — особенно когда вариантов много, а уверенность в + правильности выбора не всегда есть. + Наша цель — сделать этот путь понятнее, интереснее и максимально персонализированным. +

+

+ Pro-Fi Test — это не просто набор тестов. Это интеллектуальный гид в мире профессий, который поможет + вам: +

    +
  • Узнать себя лучше: выявить свои сильные стороны, склонности и скрытые таланты;
    • +
  • Познакомиться с миром современных профессий через призму реальных навыков и интересов;
    • +
  • Понять, какие специальности подходят именно вам, исходя из ваших целей и возможностей;
    • +
  • Сэкономить время на выборе направления обучения и сосредоточиться на главном — вашем развитии. +
    • +
+

+

+ Независимо от того, стоите ли вы на пороге выпускного класса, подаёте документы в вуз или уже начали + обучение в колледже, + Pro-Fi Test будет с вами на каждом этапе. Мы верим, что у каждого есть своё уникальное + призвание — и помогаем найти его без страха, сомнений и лишней путаницы. +

+

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

); diff --git a/src/pages/css/MainPage.css b/src/pages/css/MainPage.css new file mode 100644 index 0000000..6a335cd --- /dev/null +++ b/src/pages/css/MainPage.css @@ -0,0 +1,8 @@ +.main-page{ + width: 600px; +} + + +@media (min-width: 1600px) { + width: 1000px; +} \ No newline at end of file diff --git a/src/pages/surveys/SurveyPage.tsx b/src/pages/surveys/SurveyPage.tsx index deab071..cc5efc2 100644 --- a/src/pages/surveys/SurveyPage.tsx +++ b/src/pages/surveys/SurveyPage.tsx @@ -92,7 +92,7 @@ export function SurveyPage() { }; return ( -
+

{survey?.title}

{survey?.description}