Отчёт

.gitignore

@@ -1,14 +1,24 @@
-# ---> VisualStudioCode
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
 .vscode/*
-!.vscode/settings.json
-!.vscode/tasks.json
-!.vscode/launch.json
 !.vscode/extensions.json
-!.vscode/*.code-snippets
-
-# Local History for Visual Studio Code
-.history/
-
-# Built Visual Studio Code Extensions
-*.vsix
-
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

README.md

@@ -1,3 +1,12 @@
-# PIbd-21_Permyakov_R.G._IP
+# React + Vite
 
-Для ИП
+This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+
+Currently, two official plugins are available:
+
+- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) for Fast Refresh
+- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+
+## Expanding the ESLint configuration
+
+If you are developing a production application, we recommend using TypeScript with type-aware lint rules enabled. Check out the [TS template](https://github.com/vitejs/vite/tree/main/packages/create-vite/template-react-ts) for information on how to integrate TypeScript and [`typescript-eslint`](https://typescript-eslint.io) in your project.

database/data.json

@@ -0,0 +1,95 @@
+{
+  "news": [
+    {
+      "id": "e36d",
+      "name": "NEwwsses",
+      "bdate": "2025-05-15",
+      "description": "description",
+      "tegId": "1"
+    },
+    {
+      "id": "74c6",
+      "name": "dsdsds",
+      "bdate": "2025-05-14",
+      "description": "description",
+      "tegId": "2"
+    },
+    {
+      "0": {
+        "id": "e36d",
+        "name": "NEwwsses",
+        "bdate": "2025-05-15",
+        "description": "description",
+        "tegId": "1"
+      },
+      "1": {
+        "id": "74c6",
+        "name": "dsdsds",
+        "bdate": "2025-05-14",
+        "description": "description",
+        "tegId": "2"
+      },
+      "id": "faa8",
+      "name": "NEwdfjhdfhdfh",
+      "bdate": "2025-05-01",
+      "description": "Третья новость",
+      "tegId": "2"
+    },
+    {
+      "0": {
+        "id": "e36d",
+        "name": "NEwwsses",
+        "bdate": "2025-05-15",
+        "description": "description",
+        "tegId": "1"
+      },
+      "1": {
+        "id": "74c6",
+        "name": "dsdsds",
+        "bdate": "2025-05-14",
+        "description": "description",
+        "tegId": "2"
+      },
+      "2": {
+        "0": {
+          "id": "e36d",
+          "name": "NEwwsses",
+          "bdate": "2025-05-15",
+          "description": "description",
+          "tegId": "1"
+        },
+        "1": {
+          "id": "74c6",
+          "name": "dsdsds",
+          "bdate": "2025-05-14",
+          "description": "description",
+          "tegId": "2"
+        },
+        "id": "faa8",
+        "name": "NEwdfjhdfhdfh",
+        "bdate": "2025-05-01",
+        "description": "Третья новость",
+        "tegId": "2"
+      },
+      "id": "dba5",
+      "name": "wetyhfjnbfeRWTYH",
+      "bdate": "2025-05-15",
+      "description": "FGVDDEF",
+      "tegId": "1"
+    }
+  ],
+  "tegs": [
+    {
+      "id": "1",
+      "name": "Обычно"
+    },
+    {
+      "id": "2",
+      "name": "Важно"
+    },
+    {
+      "id": "3",
+      "name": "Срочно"
+    }
+  ]
+}

eslint.config.js

@@ -0,0 +1,49 @@
+import js from "@eslint/js";
+import eslintConfigPrettier from "eslint-config-prettier/flat";
+import pluginImport from "eslint-plugin-import";
+import reactPlugin from "eslint-plugin-react";
+import reactHooks from "eslint-plugin-react-hooks";
+import reactRefresh from "eslint-plugin-react-refresh";
+import globals from "globals";
+import viteConfigObj from "./vite.config.js";
+
+export default [
+    { ignores: ["dist", "vite.config.js"] },
+    {
+        files: ["**/*.{js,jsx}"],
+        languageOptions: {
+            globals: globals.browser,
+        },
+        settings: {
+            react: {
+                version: "detect",
+            },
+            "import/resolver": {
+                node: {
+                    extensions: [".js", ".jsx", ".ts", ".tsx"],
+                },
+                vite: {
+                    viteConfig: viteConfigObj,
+                },
+            },
+        },
+        plugins: {
+            react: reactPlugin,
+            "react-hooks": reactHooks,
+        },
+    },
+    js.configs.recommended,
+    pluginImport.flatConfigs.recommended,
+    reactRefresh.configs.recommended,
+    reactPlugin.configs.flat.recommended,
+    reactPlugin.configs.flat["jsx-runtime"],
+    eslintConfigPrettier,
+    {
+        rules: {
+            ...reactHooks.configs.recommended.rules,
+            "no-unused-vars": ["error", { varsIgnorePattern: "^[A-Z_]" }],
+            "react-refresh/only-export-components": ["warn", { allowConstantExport: true }],
+            "react/prop-types": ["off"],
+        },
+    },
+];

index.html

@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="ru">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>УлЧУ</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>

package.json

@@ -0,0 +1,39 @@
+{
+  "name": "pibd-21-permyakov-r-g-ip",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+        "start": "npm-run-all --parallel backend vite",
+        "vite": "vite",
+        "build": "vite build",
+        "serve": "http-server -p 3000 ./dist/",
+        "backend": "json-server database/data.json -p 5174",
+        "prod": "npm-run-all build --parallel backend serve",
+        "lint": "eslint ."
+  },
+  "dependencies": {
+      "react": "^19.1.0",
+      "react-dom": "^19.1.0",
+      "react-router-dom": "^7.6.0"
+  },
+  "devDependencies": {
+      "http-server": "^14.1.1",
+      "json-server": "^1.0.0-beta.3",
+      "npm-run-all": "^4.1.5",
+      "vite": "^6.3.5",
+      "@vitejs/plugin-react": "^4.4.1",
+      "@types/react": "^19.1.4",
+      "@types/react-dom": "^19.1.5",
+      "eslint": "^9.26.0",
+      "@eslint/js": "^9.26.0",
+      "eslint-plugin-react": "^7.37.5",
+      "eslint-plugin-react-hooks": "^5.2.0",
+      "eslint-plugin-react-refresh": "^0.4.20",
+      "eslint-plugin-import": "^2.31.0",
+      "eslint-import-resolver-vite": "^2.1.0",
+      "eslint-plugin-prettier": "^5.4.0",
+      "eslint-config-prettier": "^10.1.5",
+      "globals": "^16.1.0"
+  }
+}

public/vite.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>

src/App.css

@@ -0,0 +1,71 @@
+.nav-link:active {
+    color: #a6a6a6;
+}
+
+#root {
+    display: flex;
+    flex-direction: column;
+}
+
+.newsItem {
+    display: flex;
+    object-fit: contain;
+    flex-direction: column;
+    background-color: #1097ec;
+    border: 3px solid #223843;
+    border-radius: 50px;
+    color: #223843;
+    width: 20vw;
+    height: 20vw;
+    min-width: 150px;
+    min-height: 150px;
+    font-size: 20px;
+    align-items: center;
+    justify-content: center;
+    margin: 20px;
+}
+
+.newsBoard {
+    display: flex;
+    flex-wrap: wrap;
+    flex-direction: row;
+}
+
+.newsItem > p {
+    margin: 2px auto;
+}
+
+.pname {
+    color: #000000;
+}
+
+.pteg {
+    color: #ff0000;
+}
+
+.buttonsDiv {
+    display: flex;
+    flex-direction: row;
+}
+
+.input {
+    display: flex;
+    width: 20vw;
+    font-size: 3vh;
+    justify-content: space-between;
+}
+
+.card {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    align-self: center;
+    width: 50vw;
+}
+
+.main {
+    display: flex;
+    justify-content: center;
+    flex-direction: column;
+}

src/App.jsx

@@ -0,0 +1,26 @@
+import { BrowserRouter, Route, Routes } from "react-router-dom"
+import MainLayout from "./components/Layout/MainLayout"
+import NewsPage from "./components/Pages/NewsPage"
+import NewsEditPage from "./components/Pages/NewsEditPage"
+import InfoPage from "./components/Pages/InfoPage"
+import ContactsPage from "./components/Pages/ContactsPage"
+import EducationPage from "./components/Pages/EducationPage"
+import StudentLivePage from "./components/Pages/StudentLivePage"
+import './App.css'
+
+export default function App() {
+  return (
+    <BrowserRouter>
+      <Routes>
+        <Route element={<MainLayout />}>
+          <Route index element={<NewsPage />} />
+          <Route path="/news/edit/:newsId?" element={<NewsEditPage />} />
+          <Route path="/info" element={<InfoPage />} />
+          <Route path="/contacts" element={<ContactsPage />} />
+          <Route path="education" element={<EducationPage />} />
+          <Route path="/student-live" element={<StudentLivePage />} />
+        </Route>
+      </Routes>
+    </BrowserRouter>
+  )
+}

src/components/Api/client.js

@@ -0,0 +1,38 @@
+const URL = "http://localhost:5174/";
+
+const makeRequest = async (path, params, vars, method = "GET", data = null) => {
+    try {
+        const requestParams = params ? `?${params}` : "";
+        const pathVariables = vars ? `/${vars}` : "";
+        const options = { method };
+        const hasBody = (method === "POST" || method === "PUT") && data;
+        if (hasBody) {
+            options.headers = { "Content-Type": "application/json;charset=utf-8" };
+            options.body = JSON.stringify(data);
+        }
+        const response = await fetch(`${URL}${path}${pathVariables}${requestParams}`, options);
+        if (!response.ok) {
+            throw new Error(`Response status: ${response?.status}`);
+        }
+
+        const json = await response.json();
+        console.debug(path, json);
+        return json;
+    } catch (error) {
+        if (error instanceof SyntaxError) {
+            throw new Error("There was a SyntaxError");
+        } else {
+            throw new Error("There was an error");
+        }
+    }
+};
+
+export const getAllItems = (path, params) => makeRequest(path, params);
+
+export const getItem = (path, id) => makeRequest(path, null, id);
+
+export const createItem = (path, data) => makeRequest(path, null, null, "POST", data);
+
+export const updateItem = (path, id, data) => makeRequest(path, null, id, "PUT", data);
+
+export const deleteItem = (path, id) => makeRequest(path, null, id, "DELETE");

src/components/Layout/Footer.jsx

@@ -0,0 +1,18 @@
+import "./Footer.modul.css"
+
+export default function Footer() {
+    return (
+        <footer className="footer">
+            <div className="divF">
+                <p>Телефон: <strong className="strong">8-800-476-92-84</strong></p>
+                <p>E-mail: <strong className="strong">info@ulchu.ru</strong></p>
+                <p>Адрес: 432027, г. Ульяновск, ул. Северный Венец, д. 32</p>
+                <p>Официальный телеграмм канал: <strong className="strong">
+                    https://t.me/UlCHU</strong></p>
+            </div>
+            <div className="divF">
+                <img src="qrtg.png" className="fimg"/>
+            </div>
+        </footer>
+    )
+}

src/components/Layout/Footer.modul.css

@@ -0,0 +1,26 @@
+.footer{
+    display: flex;
+    flex-direction: row;
+    justify-content: space-around;
+    background-color: #223843;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    padding: 20px 0px;
+    width: 100%;
+    color: #D77A61;
+}
+
+.divF {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    margin: 5px 0px;
+}
+
+.strong {
+    color: rgb(76, 147, 255);
+}
+
+.fimg {
+    width: 200px;
+}

src/components/Layout/Header.jsx

@@ -0,0 +1,20 @@
+import { NavLink } from "react-router-dom"
+import "./Header.modul.css"
+
+export default function Header() {
+    return (
+        <header class="header">
+            <div class="div">
+                <img src="logo.png" alt="Логотип УлЧУ" class="logo"/>
+                <label class="nameBuild">Ульяновский Частный Университет</label>
+            </div>
+            <div class="navBar">
+                <NavLink className="nav-link" to="/">Главная</NavLink>
+                <NavLink className="nav-link" to="/info">Об университете</NavLink>
+                <NavLink className="nav-link" to="/education">Образование</NavLink>
+                <NavLink className="nav-link" to="/student-live">Студенческая жизнь</NavLink>
+                <NavLink className="nav-link" to="/contacts">Контакты</NavLink>
+            </div>  
+        </header>
+    )
+}

src/components/Layout/Header.modul.css

@@ -0,0 +1,42 @@
+.header {
+    display: flex;
+    flex-direction: column;
+    background-color: #223843;
+    border: 0px solid #223843;
+    border-top-left-radius: 50px;
+    border-top-right-radius: 50px;
+    color: #D77A61;
+}
+
+.div {
+    display: flex;
+    flex-direction: row;
+}
+
+.logo {
+    display: block;
+    margin: 10px 20px;
+    width: 30%;
+    object-fit: contain;
+}
+
+.nameBuild{
+    display: flex;
+    align-self: center;
+    font-size: 5vw;
+}
+
+.navBar{
+    display: flex;
+    flex-direction: row;
+    justify-content: space-around;
+    background-color: #D77A61;
+    align-self: flex-end;
+    width: 100%;
+    height: 3vh;
+    align-items: center;
+}
+
+.nav-link {
+    color: #5bc8ff;
+}

src/components/Layout/MainLayout.jsx

@@ -0,0 +1,15 @@
+import Header from "./Header"
+import Footer from "./Footer"
+import { Outlet } from "react-router-dom"
+
+export default function MainLayout() {
+    return (
+        <>
+            <Header />
+            <main className="main">
+                <Outlet />
+            </main>
+            <Footer />
+        </>
+    )
+}

src/components/Layout/MainLayout.modul.css

@@ -0,0 +1,3 @@
+.main {
+    
+}

src/components/News/Hooks/NewsHook.jsx

@@ -0,0 +1,37 @@
+import { useEffect, useState } from "react";
+import { createItem, getItem, updateItem } from "../../Api/client";
+
+const PATH = "news";
+
+export const useNews = (id) => {
+    const [news, setNews] = useState(null);
+
+    const getNews = (id) => {
+        return getItem(PATH, id);
+    };
+
+    useEffect(() => {
+        getNews(id).then((value) => setNews(value))
+    }, [])
+
+    const saveNews = async () => {
+        let newsId = news.id;
+        if (!newsId) {
+            await createItem(PATH, news);
+        } else {
+            await updateItem(PATH, newsId, news);
+        }
+        const result = await getNews(newsId);
+        setNews(result);
+    };
+
+    const updateNews = (key, value) => {
+        setNews({ ...news, [key]: value });
+    };
+
+    const clearNews = () => {
+        setNews(null);
+    };
+
+    return { news, updateNews, saveNews, clearNews };
+};

src/components/News/Hooks/NewsTegHook.jsx

@@ -0,0 +1,12 @@
+import { useEffect, useState } from "react";
+import { getAllItems } from "../../Api/client";
+
+export default function NewsTegHook() {
+    const [tegs, setTegs] = useState(null);
+
+    useEffect(() => {
+        getAllItems("tegs").then((value) => setTegs(value))
+    }, [])
+
+    return tegs;
+};

src/components/News/Hooks/NewssHook.jsx

@@ -0,0 +1,27 @@
+import { useState, useEffect } from "react"
+import { deleteItem, getAllItems } from "../../Api/client"
+
+const PATH = "news"
+
+export default function useNewss() {
+    const [news, setNews] = useState(null)
+
+    function getNews() {
+        return getAllItems(PATH)
+    }
+
+    useEffect(() => {
+        getNews().then((value) => setNews(value))
+    }, [])
+
+    async function deleteNews(id) {
+        if (!id) {
+            throw new Error("News id is not defined");
+        }
+        await deleteItem(PATH, id)
+        const newNewss = getNews()
+        setNews(newNewss)
+    }
+
+    return { news, deleteNews }
+}

src/components/News/News.jsx

@@ -0,0 +1,20 @@
+import { Link, useNavigate } from "react-router-dom"
+import NewsBoard from "./NewsBoard/NewsBoard"
+import useNewsTeg from "./Hooks/NewsTegHook"
+import useNewss from "./Hooks/NewssHook"
+
+export default function News() {
+    const navigate = useNavigate()
+    const { news, deleteNews } = useNewss()
+    const tegs = useNewsTeg()
+
+    function handleUpdate(id) { navigate(`/news/edit/${id}`) }
+    function handleDelete(id) { deleteNews(id) }
+
+    return (
+        <div>
+            <Link to="/news/edit"><button>Добавить новость</button></Link>
+            <NewsBoard data={news} tegs={tegs} onUpdate={handleUpdate} onDelete={handleDelete} />
+        </div>
+    )
+}

src/components/News/NewsBoard/NewsBoard.jsx

@@ -0,0 +1,23 @@
+export default function NewsBoard({ data, tegs, onUpdate, onDelete}) {
+    const body = data?.map((news) => {
+        return (
+            <div className="newsItem">
+                <p className="pname">{news.name}</p>
+                <p className="pteg">{tegs?.find((teg) => teg.id === news.tegId).name}</p>
+                <p>{news.bdate}</p>
+                <p>{news.description}</p>
+                <div className="buttonsDiv">
+                    <button onClick={() => onUpdate(news.id)}>Изменить</button>
+                    <button onClick={() => onDelete(news.id)}>Удалить</button>
+                </div>
+            </div>
+        )
+    })
+    
+    return (
+        <>
+            <h1>Новости:</h1>
+            <div className="newsBoard">{body}</div>
+        </>
+    )
+}

src/components/News/NewsForm/NewsForm.jsx

@@ -0,0 +1,80 @@
+import { useParams } from "react-router-dom"
+import useNewsTeg from "../Hooks/NewsTegHook"
+import { useNews } from "../Hooks/NewsHook"
+
+const newsModel = {
+    name: ["Название", "text"],
+    tegId: ["Тег", "text"],
+    bdate: ["Дата", "date"],
+    description: ["Описание", "text"]
+}
+
+export default function NewsForm() {
+    const params = useParams()
+    const tegs = useNewsTeg()
+    const { news, updateNews, saveNews, clearNews } = useNews(params.newsId)
+
+    async function handleSave(event) {
+        event.preventDefault()
+        event.stopPropagation()
+        try {
+            await saveNews()
+            setError(false)
+        }
+        catch (err) {
+            setError(err)
+        }
+    }
+
+    function handleChange(event) {
+        console.log(event.target.name, event.target.value)
+        updateNews(event.target.name, event.target.value)
+    }
+
+    const inputs = Object.keys(newsModel).map((field) => {
+        if (field === "tegId") return
+
+        return (
+            <div key={field} className="input">
+                <label htmlFor={field}>{newsModel[field][0]}:</label>
+                <input
+                    id={field}
+                    name={field}
+                    type={newsModel[field][1]}
+                    value={news === null ? "" : news[field]}
+                    onChange={handleChange}
+                />
+            </div>
+        );
+    });
+
+    const tegOptions = tegs?.map((teg) => {
+        return (
+            <option key={teg.id} value={teg.id}>
+                {teg.name}
+            </option>
+        );
+    });
+
+    return (
+        <form className="card" onSubmit={handleSave}>
+            {inputs}
+            <div className="input">
+                <label htmlFor="tegId">Тег:</label>
+                <select
+                    id="tegId"
+                    name="tegId"
+                    value={news === null ? 0 : news.tegId}
+                    onChange={handleChange}
+                >
+                    <option value="">Выберите тег</option>
+                    {tegOptions}
+                </select>
+            </div>
+            <div>
+                <button type="submit"> Сохранить </button>
+                <button type="button" onClick={() => clearNews()}> Очистить </button>
+            </div>
+        </form>
+    )
+}

src/components/Pages/ContactsPage.jsx

@@ -0,0 +1,13 @@
+export default function ContactsPage() {
+    return (
+        <>
+            <h1>Список контактов:</h1>
+            <ul>
+                <li>Телефон: <strong class="numb">8-800-476-92-84</strong></li>
+                <li>E-mail: <strong>info@ulchu.ru</strong></li>
+                <li>Адрес: 432027, г. Ульяновск, ул. Северный Венец, д. 32</li>
+                <li>Официальный телеграмм канал: <strong>https://t.me/UlCHU</strong></li>
+            </ul>
+        </>
+    )
+}

src/components/Pages/EducationPage.jsx

@@ -0,0 +1,52 @@
+export default function EducationPage() {
+    return (
+        <>
+            <h1>Доступные направления обучения: </h1>
+            <div class="educItem">
+                <p>Экономика и управление:</p>
+                <ul>
+                    <li>Управление предприятиями</li>
+                    <li>Маркетинг</li>
+                    <li>Финансовый менеджмент</li>
+                    <li>Предпринемательская деятельность</li>
+                </ul>
+            </div>
+            <div class="educItem">
+                <p>Информационные технологии:</p>
+                <ul>
+                    <li>Программная инженерия</li>
+                    <li>Кибербезопастность</li>
+                    <li>Искуственный интелект</li>
+                    <li>Анализ данных</li>
+                    <li>Веб-дизайнер</li>
+                </ul>
+            </div>
+            <div class="educItem">
+                <p>Гуманитарные науки:</p>
+                <ul>
+                    <li>Психология</li>
+                    <li>Социология</li>
+                    <li>Культурология</li>
+                    <li>История</li>
+                    <li>Журналист</li>
+                </ul>
+            </div>
+            <div class="educItem">
+                <p>Международные отношения и право:</p>
+                <ul>
+                    <li>Правоведение</li>
+                    <li>Диплоооматя</li>
+                    <li>Международный бизнес</li>
+                </ul>
+            </div>
+            <div class="educItem">
+                <p>Экология и устойчивое развитие:</p>
+                <ul>
+                    <li>Специалист по охране окружающей среды</li>
+                    <li>Специалист по возобновляемым источникам энергии</li>
+                </ul>
+            </div> 
+
+        </>
+    )
+}

src/components/Pages/InfoPage.jsx

@@ -0,0 +1,54 @@
+export default function InfoPage() {
+    return (
+        <>
+            <p>
+                Мы стояли на пороге нового начала, когда в нашем городе возникла идея создания 
+                Ульяновского Частного Университета. Это было время, когда образовательные учреждения 
+                нуждались в обновлении, а студенты искали новые возможности для роста и развития. 
+                Мы, группа единомышленников — преподавателей, предпринимателей и студентов — собрались 
+                вместе, чтобы воплотить в жизнь мечту о качественном и доступном образовании.
+            </p>
+            <p>
+                Сначала мы провели множество встреч, обсуждая, каким мы хотим видеть наш университет. 
+                Мы понимали, что образование должно быть не только академическим, но и практическим, 
+                поэтому решили сделать акцент на инновационных методах обучения, сотрудничестве с 
+                бизнесом и интеграции современных технологий. Мы хотели создать атмосферу, в которой 
+                каждый студент чувствовал бы себя важным и востребованным.
+            </p>
+            <p>
+                После долгих обсуждений и планирования мы начали искать подходящее помещение. 
+                Мы нашли старое здание, которое нуждалось в ремонте, но у него была своя история и душа.
+                Мы вложили в него наши силы и средства, и вскоре стены начали наполняться жизнью. 
+                С каждым днем мы видели, как наше видение становится реальностью — появились аудитории,
+                лаборатории, библиотека и даже уютные места для отдыха студентов.
+            </p>
+            <p>
+                Когда настал день открытия, мы были полны волнения и гордости. Мы пригласили местных 
+                жителей, представителей власти и, конечно, студентов. В этот день мы не просто открывали 
+                двери университета, мы открывали новые горизонты для будущих поколений. Мы представили 
+                нашу миссию: стремление к качественному образованию, которое бы отвечало требованиям 
+                современного мира.
+            </p>
+            <p>
+                С каждым годом наш университет рос и развивался. Мы привлекали новых преподавателей, 
+                которые делились своим опытом и знаниями. Мы организовывали мастер-классы, конференции 
+                и стажировки, чтобы студенты могли применить свои знания на практике. Мы гордились тем, 
+                что наши выпускники находили работу в престижных компаниях и становились успешными 
+                профессионалами.
+            </p>
+            <p>
+                Мы также понимали, насколько важно поддерживать связь с обществом. Поэтому мы активно 
+                участвовали в социальных проектах, помогая местным жителям и развивая культуру в нашем 
+                регионе. Это помогло нам создать крепкие связи с сообществом и стать важной частью его 
+                жизни.
+            </p>
+            <p>
+                Теперь, оглядываясь назад, мы видим, как далеко мы продвинулись. Ульяновский Частный 
+                Университет стал местом, где рождаются идеи, где студенты могут развивать свои таланты и 
+                где каждый может найти свой путь к успеху. Мы продолжаем стремиться к совершенству, 
+                вдохновляя друг друга на новые достижения и открытия. Это только начало нашего пути, и 
+                мы с нетерпением ждем, что принесет будущее!
+            </p>
+        </>
+    )
+}

src/components/Pages/NewsEditPage.jsx

@@ -0,0 +1,11 @@
+import { Link } from "react-router-dom";
+import NewsForm from "../News/NewsForm/NewsForm";
+
+export default function NewsEditPage() {
+    return (
+        <>
+            <NewsForm />
+            <Link to="/"><button>Вернуться назад</button></Link>
+        </>
+    )
+}

src/components/Pages/NewsPage.jsx

@@ -0,0 +1,7 @@
+import News from "../News/News"
+
+export default function NewsPage() {
+    return (
+        <News />
+    )
+}

src/components/Pages/StudentLivePage.jsx

@@ -0,0 +1,47 @@
+export default function StudentLivePage() {
+    return (
+        <>
+            <p>
+                Студенты Ульяновского Частного Университета будут активно участвовать в разнообразной 
+                деятельности, которая поможет им развивать навыки, получать практический опыт и обогащать 
+                свою образовательную жизнь. Вот несколько направлений, чем могут заниматься студенты:
+            </p>
+            <ul>
+                <li>Участие в научных проектах и исследованиях под руководством преподавателей.</li>
+                <li>Проведение собственных исследований и публикация результатов в научных журналах.</li>
+                <li>Прохождение стажировок в компаниях и организациях, связанных с их специальностью.</li>
+                <li>Участие в практических проектах, которые позволяют применять теоретические знания 
+                    на практике.</li>
+                <li>Присоединение к студенческим клубам по интересам (например, клубы по программированию, 
+                    дизайну, спорту или театру).</li>
+                <li>Участие в мероприятиях, организуемых клубами, таких как мастер-классы, лекции 
+                    и конкурсы.</li>
+                <li>Участие в социальных проектах и волонтерских инициативах, направленных на помощь 
+                    местному сообществу.</li>
+                <li>Организация мероприятий по экологии, образованию и здравоохранению.</li>
+                <li>Участие в спортивных секциях и соревнованиях, которые помогают развивать физическую 
+                    активность и командный дух.</li>
+                <li>Организация спортивных мероприятий и турниров для студентов.</li>
+                <li>Участие в театральных постановках, художественных выставках и музыкальных 
+                    концертах.</li>
+                <li>Создание и реализация собственных творческих проектов, таких как короткометражные фильмы 
+                    или художественные выставки.</li>
+                <li>Участие в семинарах, конференциях и вебинарах, где студенты могут обмениваться опытом и 
+                    знаниями.</li>
+                <li>Проведение открытых лекций и мастер-классов для других студентов и жителей города.</li>
+                <li>Посещение карьерных ярмарок и тренингов по развитию профессиональных навыков.</li>
+                <li>Участие в программах менторства, где студенты могут получать советы от опытных 
+                    специалистов.</li>
+                <li>Изучение иностранных языков и участие в языковых клубах.</li>
+                <li>Участие в программах обмена с зарубежными университетами.</li>
+                <li>Участие в дебатных клубах и дискуссиях на актуальные темы.</li>
+                <li>Организация круглых столов и форумов для обмена мнениями и идеями.</li>
+            </ul>
+            <p>
+                Эти виды деятельности помогут студентам не только углубить свои знания, но и развить 
+                навыки командной работы, лидерства и критического мышления, что сделает их более 
+                конкурентоспособными на рынке труда.
+            </p>
+        </>
+    )
+}

src/index.css

@@ -0,0 +1,3 @@
+body {
+    background-color: #b1b1b1;
+}

src/main.jsx

@@ -0,0 +1,10 @@
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import './index.css'
+import App from './App.jsx'
+
+createRoot(document.getElementById('root')).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+)

style.css

@@ -0,0 +1,99 @@
+body{
+    color: #D77A61;
+    background-color: #EFF1F3;
+    margin: 3px;
+}
+
+.body{
+    background-color: #DBD3D8;
+}
+
+.color1{
+    color: #DBD3D8;
+}
+
+.color2{
+    color: #91ff00;
+}
+
+.header{
+    background-color: #223843;
+}
+
+.nameBuild{
+    font-size: 5vw;
+}
+
+.navBar{
+    background-color: #D77A61;
+}
+
+.nav-link:hover{
+    color: #1097ec;
+}
+
+.nav-link{
+    color: #DBD3D8;
+}
+
+.newsItem{
+    display: flex;
+    object-fit: contain;
+    background-color: #1097ec;
+    border: 3px solid #223843;
+    border-radius: 50px;
+    color: #223843;
+    width: 20vw;
+    height: 20vw;
+    min-width: 150px;
+    min-height: 150px;
+    font-size: 20px;
+    align-items: center;
+    justify-content: center;
+    margin: 20px;
+    text-align: center;
+}
+
+.footer{
+    background-color: #223843;
+    padding: 20px 0px;
+}
+
+.fimg{
+    width: 100px;
+}
+
+.body > p{
+    margin: 20px 20px;
+}
+
+.educItem{
+    background-color: #EFF1F3;
+}
+
+.educItem > p{
+    align-self: center;
+    margin-left: 20px;
+    font-size: 20px;
+}
+
+h1{
+    margin-left: 20px;
+}
+
+strong{
+    text-decoration: underline;
+    color: #D77A61;
+}
+
+.numb{
+    color: #1097ec;
+    text-decoration: none;
+}
+
+@media only screen and (max-width: 1000px){
+    .body{
+        width: 100%;
+        margin: 0px;
+    }
+}

vite.config.js

@@ -0,0 +1,6 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+
+export default defineConfig({
+  plugins: [react()],
+})