Отчёт

.gitignore

@@ -12,3 +12,6 @@
 # Built Visual Studio Code Extensions
 *.vsix
 
+#my
+/dist
+/node_modules

components/api/client.js

@@ -0,0 +1,40 @@
+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", error);
+        } 
+        else {
+            throw new Error("There was an error", 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");

components/board-helper.js

@@ -0,0 +1,44 @@
+import { buttonIcon } from "./button-helper";
+
+function newsItemButton(item, icon, color, callback) {
+    const button = buttonIcon(icon, color);
+    button.addEventListener("click", () => callback(item));
+    return button;
+};
+
+function newsItem(item, callbacks, tegs) {
+    const news = document.createElement("div");
+    const element1 = document.createElement("div");
+    const element2 = document.createElement("div");
+    const element3 = document.createElement("div");
+    news.classList.add("newsItem", "d-flex", "flex-column");
+    element1.appendChild(newsItemButton(item, "pencil-fill", "warning", callbacks.edit));
+    element1.appendChild(newsItemButton(item, "trash-fill", "danger", callbacks.delete));
+    element1.classList.add("d-flex", "flex-row", "align-self-end");
+    let teg = tegs.filter((f) => f.id === item.teg)[0];
+    element2.innerText = teg.name;
+    element2.classList.add("color2");
+    let text = `Дата: ${item.bdate}`;
+    text += `\n${item.description}`;
+    element3.innerText = text;
+    news.appendChild(element1);
+    news.appendChild(element2);
+    news.appendChild(element3);
+
+    return news;
+}
+
+export function board(data, callbacks, tegs) {
+    if (!data || !Array.isArray(data)){
+        throw new Error("Data is not defined");
+    }
+    const bodyElement = document.createElement("div");
+    bodyElement.classList.add("d-flex", "flex-row", "flex-wrap");
+    data.forEach((item) => bodyElement.appendChild(newsItem(item, callbacks, tegs)));
+    return bodyElement;
+}
+
+export function populateBoard(boardElement, data, callbacks, tegs) {
+    boardElement.innerHTML = "";
+    data.forEach((item) => boardElement.appendChild(newsItem(item, callbacks, tegs)));
+}

components/button-helper.js

@@ -0,0 +1,26 @@
+function icon(name) {
+    const inconElement = document.createElement("i");
+    inconElement.classList.add("bi", `bi-${name}`);
+    return inconElement;
+};
+
+function button(text, iconName, color = "primary") {
+    const buttonElement = document.createElement("button");
+    buttonElement.classList.add("btn", `btn-${color}`);
+    buttonElement.setAttribute("type", "button");
+    if (text) {
+        buttonElement.innerText = text;
+    }
+    if (icon) {
+        buttonElement.appendChild(icon(iconName));
+    }
+    return buttonElement;
+};
+
+export function buttonText(text, color) {
+    return button(text, null, color);
+}
+
+export function buttonIcon(iconName, color) {
+    return button(null, iconName, color);
+}

components/modal-helper.js

@@ -0,0 +1,93 @@
+import { Modal } from "bootstrap";
+
+const wrapper = () => {
+    const wrapperElement = document.createElement("div");
+    wrapperElement.classList.add("modal");
+    wrapperElement.setAttribute("tabindex", -1);
+    return wrapperElement;
+};
+
+const container = (type) => {
+    const containerElement = document.createElement("div");
+    containerElement.classList.add(type);
+    return containerElement;
+};
+
+const closeButton = (closeCallback) => {
+    const closeElement = document.createElement("button");
+    closeElement.setAttribute("type", "button");
+    closeElement.addEventListener("click", () => closeCallback());
+    return closeElement;
+};
+
+const header = (title, closeCallback) => {
+    const containerElement = container("modal-header");
+    const titleElement = document.createElement("h5");
+    titleElement.innerText = title;
+    containerElement.appendChild(titleElement);
+
+    const closeElement = closeButton(closeCallback);
+    closeElement.classList.add("btn-close");
+    containerElement.appendChild(closeElement);
+
+    return containerElement;
+};
+
+const footer = (okTitle, okCallback, closeCallback) => {
+    const footerElement = container("modal-footer");
+
+    const okElement = document.createElement("button");
+    okElement.classList.add("btn", "btn-primary");
+    okElement.setAttribute("type", "button");
+    okElement.innerText = okTitle;
+    okElement.addEventListener("click", () => okCallback());
+    footerElement.appendChild(okElement);
+
+    const closeElement = closeButton(closeCallback);
+    closeElement.classList.add("btn", "btn-secondary");
+    closeElement.innerText = "Отмена";
+    footerElement.appendChild(closeElement);
+
+    return footerElement;
+};
+
+const modal = (title, okTitle, body, okCallback, closeCallback) => {
+    const wrapperElement = wrapper();
+    const dialogElement = container("modal-dialog");
+    const contentElement = container("modal-content");
+
+    const headerElement = header(title, closeCallback);
+    contentElement.appendChild(headerElement);
+
+    const bodyElement = container("modal-body");
+    bodyElement.appendChild(body);
+    contentElement.appendChild(bodyElement);
+
+    const footerElement = footer(okTitle, okCallback, closeCallback);
+    contentElement.appendChild(footerElement);
+
+    dialogElement.appendChild(contentElement);
+    wrapperElement.appendChild(dialogElement);
+    return wrapperElement;
+};
+
+const showQuestion = (title, okTitle, message) => {
+    const messageElement = document.createElement("p");
+    messageElement.innerText = message;
+    return new Promise((resolve) => {
+        let modalDialog;
+        const okCallback = () => {
+            modalDialog.hide();
+            resolve(true);
+        };
+        const cancelCallback = () => {
+            modalDialog.hide();
+            resolve(false);
+        };
+        const questionElement = modal(title, okTitle, messageElement, okCallback, cancelCallback);
+        modalDialog = new Modal(questionElement);
+        modalDialog.show();
+    });
+};
+
+export default showQuestion;

components/news/board/controller.js

@@ -0,0 +1,36 @@
+import BoardModel from "./model";
+import BoardView from "./view";
+
+class BoardElement extends HTMLElement {
+    constructor() {
+        super();
+        const editCallback = this.editNews.bind(this);
+        const deleteCallback = this.deleteNews.bind(this);
+        this.view = new BoardView(this, editCallback, deleteCallback);
+        this.model = new BoardModel();
+    }
+
+    connectedCallback() {
+        this.view.render(this.model);
+        this.getAllNews();
+    }
+
+    async getAllNews() {
+        await this.model.getAll();
+        this.view.update(this.model);
+    }
+
+    editNews(item) {
+        window.location.href = `/news?id=${item.id}`;
+    }
+
+    async deleteNews(item) {
+        if (await this.view.deleteQuestion(item)) {
+            await this.model.delete(item);
+            this.view.successToast();
+            this.getAllNews();
+        }
+    }
+}
+
+customElements.define("news-board", BoardElement);

components/news/board/model.js

@@ -0,0 +1,19 @@
+import { deleteItem, getAllItems } from "../../api/client";
+
+const PATH = "news";
+
+export default class BoardModel {
+    constructor() {
+        this.data = [];
+        this.tegs = [];
+    }
+
+    async getAll() {
+        this.data = await getAllItems(PATH);
+        this.tegs = await getAllItems("tegs");
+    }
+
+    async delete(item) {
+        await deleteItem(PATH, item.id);
+    }
+}

components/news/board/view.js

@@ -0,0 +1,38 @@
+import showQuestion from "../../modal-helper";
+import { populateBoard, board } from "../../board-helper";
+import { showToast, toastsInit } from "../../toast-helper";
+
+export default class BoardView {
+    constructor(root, editCallback, deleteCallback) {
+        this.root = root;
+        this.editCallback = editCallback;
+        this.deleteCallback = deleteCallback;
+    }
+
+    render(model) {
+        this.callbacks = {
+            edit: this.editCallback,
+            delete: this.deleteCallback,
+        };
+        this.boardElement = board(model.data, this.callbacks, model.tegs);
+
+        const boardWrapper = document.createElement("div");
+        boardWrapper.classList.add("board-responsive");
+        boardWrapper.appendChild(this.boardElement);
+        this.root.appendChild(boardWrapper);
+
+        this.toasts = toastsInit();
+    }
+
+    update(model) {
+        populateBoard(this.boardElement, model.data, this.callbacks, model.tegs);
+    }
+
+    deleteQuestion(item = null) {
+        return showQuestion("Удаление", "Удалить", `Удалить элемент '${item.id}'?`);
+    }
+
+    successToast() {
+        showToast(this.toasts, "Удаление", "Удаление успешно завершено");
+    }
+}

components/news/form/controller.js

@@ -0,0 +1,48 @@
+import FormModel from "./model";
+import FormView from "./view";
+
+class FormElement extends HTMLElement {
+    constructor() {
+        super();
+
+        this.currentId = null;
+
+        const saveCallback = this.save.bind(this);
+        const backCallback = this.back.bind(this);
+        this.view = new FormView(this, saveCallback, backCallback);
+        this.model = new FormModel();
+    }
+
+    async connectedCallback() {
+        const params = new URLSearchParams(document.location.search);
+        this.currentId = params.get("id") || null;
+
+        await this.model.getTegs();
+        this.view.render(this.model);
+        this.get();
+    }
+
+    async get() {
+        if (this.currentId) {
+            await this.model.get(this.currentId);
+        }
+        this.view.update(this.model);
+    }
+
+    async save() {
+        if (!this.currentId) {
+            await this.model.create();
+        } 
+        else {
+            await this.model.update();
+        }
+        this.view.successToast();
+        this.view.update(this.model);
+    }
+
+    back() {
+        window.location.href = "/index";
+    }
+}
+
+customElements.define("news-form", FormElement);

components/news/form/model.js

@@ -0,0 +1,55 @@
+import { createItem, getAllItems, getItem, updateItem } from "../../api/client";
+import moment from "moment";
+
+const PATH = "news";
+const DATE_DB = "DD.MM.YYYY";
+const DATE_UI = "YYYY-MM-DD";
+
+export default class FormModel {
+    constructor() {
+        this.element = {};
+        this.tegs = [];
+    }
+
+    async getTegs() {
+        this.tegs = [];
+        this.tegs = await getAllItems("tegs");
+    }
+
+    async get(id) {
+        if (!id) {
+            throw new Error("Element id is not defined!");
+        }
+        this.element = await getItem(PATH, id);
+    }
+
+    async create() {
+        if (!this.element || Object.keys(this.element).length === 0) {
+            throw new Error("Item is null or empty!");
+        }
+        this.element = await createItem(PATH, this.element);
+    }
+
+    async update() {
+        if (!this.element) {
+            throw new Error("Item is null or empty!");
+        }
+        this.element = await updateItem(PATH, this.element.id, this.element);
+    }
+
+    getValue(attribute) {
+        if (attribute !== "bdate") {
+            return this.element[attribute] || "";
+        }
+        return moment(this.element[attribute], DATE_DB).format(DATE_UI);
+    }
+
+    setValue(attribute, value) {
+        if (attribute !== "bdate") {
+            this.element[attribute] = value;
+        }
+        else {
+            this.element[attribute] = moment(value, DATE_UI).format(DATE_DB);
+        }
+    }
+}

components/news/form/view.js

@@ -0,0 +1,62 @@
+import validation from "../../../js/validation";
+import populateSelect from "../../select-helper";
+import { showToast, toastsInit } from "../../toast-helper";
+
+function getKey(input) {
+    return input.getAttribute("id").replace("-", "_");
+}
+
+export default class FormView {
+    constructor(root, saveCallback, backCallback) {
+        this.root = root;
+        this.saveCallback = saveCallback;
+        this.backCallback = backCallback;
+    }
+
+    render(model) {
+        const template = document.getElementById("news-form-template").content.cloneNode(true);
+
+        const form = template.querySelector("form");
+        form.addEventListener("submit", async () => {
+            if (!form.checkValidity()) {
+                return;
+            }
+            this.saveCallback();
+        });
+
+        this.inputs = template.querySelectorAll("input");
+        this.inputs.forEach((input) => {
+            input.addEventListener("change", (event) => {
+                model.setValue(getKey(event.target), event.target.value);
+            });
+        });
+
+        this.tegSelector = template.getElementById("teg");
+        this.tegSelector.addEventListener("change", (event) => {
+            console.log(event.terget.value);
+            model.setValue("teg", event.target.value);
+        });
+        populateSelect(this.tegSelector, model.tegs);
+
+        const backButton = template.getElementById("btn-back");
+        backButton.addEventListener("click", this.backCallback);
+
+        this.root.appendChild(template);
+
+        this.toasts = toastsInit();
+
+        validation();
+    }
+
+    update(model) {
+        this.inputs.forEach((input) => {
+            const control = input;
+            control.value = model.getValue(getKey(input));
+        });
+        this.groupsSelector.value = model.element.groupId || "";
+    }
+
+    successToast() {
+        showToast(this.toasts, "Сохранение", "Сохранение успешно завершено");
+    }
+}

components/select-helper.js

@@ -0,0 +1,8 @@
+export default function populateSelect(select, data) {
+    data.forEach((teg) => {
+        const option = document.createElement("option");
+        option.value = teg.id;
+        option.innerText = teg.name;
+        select.appendChild(option);
+    });
+}

components/storage.js

@@ -0,0 +1,7 @@
+export function lsSave(key, value) {
+    return localStorage.setItem(key, JSON.stringify(value));
+};
+
+export function lsReadArray(key) {
+    return JSON.parse(localStorage.getItem(key)) || [];
+}   

components/toast-helper.js

@@ -0,0 +1,69 @@
+import { Toast } from "bootstrap";
+import moment from "moment";
+
+export const toastsInit = () => {
+    const wrapper = document.createElement("div");
+    wrapper.classList.add("toast-container", "position-fixed", "top-0", "end-0", "p-3", "mt-5");
+    const body = document.querySelector("body");
+    body.appendChild(wrapper);
+    return wrapper;
+};
+
+const toast = () => {
+    const toastElement = document.createElement("div");
+    toastElement.classList.add("toast", "bg-dark", "text-light");
+    toastElement.setAttribute("role", "alert");
+    return toastElement;
+};
+
+const caption = (title) => {
+    const captionElement = document.createElement("strong");
+    captionElement.classList.add("me-auto");
+    captionElement.innerText = title;
+    return captionElement;
+};
+
+const dateTime = () => {
+    const dateTimeElement = document.createElement("small");
+    dateTimeElement.classList.add("text-light");
+    dateTimeElement.innerText = moment().format("DD.MM HH:mm");
+    return dateTimeElement;
+};
+
+const closeButton = () => {
+    const closeElement = document.createElement("button");
+    closeElement.setAttribute("type", "button");
+    closeElement.setAttribute("data-bs-dismiss", "toast");
+    closeElement.classList.add("btn-close", "btn-close-white");
+    return closeElement;
+};
+
+const header = (title) => {
+    const headerElement = document.createElement("div");
+    headerElement.classList.add("toast-header", "bg-dark", "text-light");
+    headerElement.appendChild(caption(title));
+    headerElement.appendChild(dateTime());
+    headerElement.appendChild(closeButton());
+    return headerElement;
+};
+
+const body = (message) => {
+    const bodyElement = document.createElement("div");
+    bodyElement.classList.add("toast-body");
+    bodyElement.innerText = message;
+    return bodyElement;
+};
+
+export const showToast = (container, title, message) => {
+    const toastElement = toast();
+    toastElement.appendChild(header(title));
+    toastElement.appendChild(body(message));
+
+    toastElement.addEventListener("hidden.bs.toast", () => {
+        container.removeChild(toastElement);
+    });
+
+    container.appendChild(toastElement);
+
+    new Toast(toastElement).show();
+};

contacts.html

@@ -1,28 +1,51 @@
 <!DOCTYPE html>
 <html lang="ru">
     <head>
-        <meta lang="UTF-8" />
+        <meta charset="UTF-8" />
         <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
         <title>Контакты</title>
+        <link rel="stylesheet" href="/node_modules/bootstrap/dist/css/bootstrap.min.css" />
+        <link rel="stylesheet" href="/node_modules/bootstrap/dist/js/bootstrap.min.js" />
+        <link rel="stylesheet" href="/node_modules/bootstrap-icons/font/bootstrap-icons.min.css" />
         <link rel="stylesheet" href="style.css" />
     </head>
-    <body>
+    <body class="d-flex justify-content-center">
-        <div class="body">
+        <div class="body d-flex rounded w-75 flex-column">
-            <div class="header">
+            <header class="header d-flex rounded-top justify-content-between flex-column">
-                <img src="logo.png" alt="Логотип УлЧУ" class="logo"/>
+                <div class="d-flex flex-row">
-                <div class="nameBuild">Ульяновский Частный Университет</div>
+                    <img src="logo.png" alt="Логотип УлЧУ" class="logo d-block mx-5 my-5 w-25"/>
-                <div class="navBar">
+                    <label class="nameBuild d-flex align-self-center">Ульяновский Частный Университет</label>
-                    <div class="dropDown">
-                        <span>Перейти</span>
-                        <ul class="navMenu">
-                            <li><div class="navItem"><a href="info.html" target="_blank">Об университете</a></div></li>
-                            <li><div class="navItem"><a href="Education.html" target="_blank">Образование</a></div></li>
-                            <li><div class="navItem"><a href="StudentLive.html" target="_blank">Студенческая жизнь</a></div></li>
-                            <li><div class="navItem"><a href="Contacts.html" target="_blank">Контакты</a></div></li>
-                        </ul>
-                    </div>
                 </div>
-            </div>
+                <nav class="navBar navbar navbar-expand navbar-dark">
+                    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
+                        <span class="navbar-toggler-icon"></span>
+                    </button>
+                    <div class="navbar-collapse collapse justify-content-center" id="navbarNav">
+                        <div class="navbar-nav">
+                            <a class="nav-link" href="/info.html" target="_blank">
+                                <i class="bi bi-info-circle"></i>
+                                Об университете
+                            </a>
+                            <a class="nav-link" href="/Education.html" target="_blank">
+                                <i class="bi bi-card-list"></i>
+                                Образование
+                            </a>
+                            <a class="nav-link" href="/StudentLive.html" target="_blank">
+                                <i class="bi bi-emoji-sunglasses-fill"></i>
+                                Студенческая жизнь
+                            </a>
+                            <a class="nav-link active" href="/Contacts.html" target="_blank">
+                                <i class="bi bi-person-lines-fill"></i>
+                                Контакты
+                            </a>
+                            <a class="nav-link" href="/index.html">
+                                <i class="bi bi-house-fill"></i>
+                                Главная
+                            </a>
+                        </div>
+                    </div>
+                </nav>  
+            </header>
             <h1>Список контактов:</h1>
             <ul>
                 <li>Телефон: <strong class="numb">8-800-476-92-84</strong></li>
@@ -30,18 +53,17 @@
                 <li>Адрес: 432027, г. Ульяновск, ул. Северный Венец, д. 32</li>
                 <li>Официальный телеграмм канал: <strong>https://t.me/UlCHU</strong></li>
             </ul>
-            <div class="footer">
+            <footer class="footer d-flex flex-row justify-content-around rounded-bottem">
-                <div cladd="footerItem">
+                <div class="d-flex align-items-center my-4 mx-0">
-                    <p><a href="index.html">На главную</a></p>
                     <p>Телефон: <strong class="numb">8-800-476-92-84</strong></p>
                     <p>E-mail: <strong>info@ulchu.ru</strong></p>
                     <P>Адрес: 432027, г. Ульяновск, ул. Северный Венец, д. 32</P>
                     <p>Официальный телеграмм канал: <strong>https://t.me/UlCHU</strong></p>
                 </div>
-                <div class="footerItem">
+                <div class="d-flex align-items-center my-4 mx-0">
-                    <img src="qrtg.png" />
+                    <img src="qrtg.png" class="fimg"/>
                 </div>
-            </div>
+            </footer>
         </div>   
     </body>
 </html>

database/data.json

@@ -0,0 +1,42 @@
+{
+  "news": [
+    {
+      "id": "de96",
+      "description": "Что-то там... ",
+      "bdate": "12.04.2025",
+      "teg": "2"
+    },
+    {
+      "id": "d693",
+      "description": "Сегодня произошло событие",
+      "bdate": "17.04.2025",
+      "teg": "3"
+    },
+    {
+      "id": "e192",
+      "description": "Здесь будет большой текст. Это просто текст. Для теста сойдёт и так))",
+      "bdate": "17.04.2025",
+      "teg": "1"
+    },
+    {
+      "id": "6ce0",
+      "description": "Переносимся на следующую строку",
+      "bdate": "17.04.2025",
+      "teg": "2"
+    }
+  ],
+  "tegs": [
+    {
+      "id": "1",
+      "name": "важно"
+    },
+    {
+      "id": "2",
+      "name": "обычно"
+    },
+    {
+      "id": "3",
+      "name": "срочно"
+    }
+  ]
+}

education.html

@@ -4,27 +4,50 @@
         <meta charset="UTF-8" />
         <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
         <title>Образование</title>
+        <link rel="stylesheet" href="/node_modules/bootstrap/dist/css/bootstrap.min.css" />
+        <link rel="stylesheet" href="/node_modules/bootstrap/dist/js/bootstrap.min.js" />
+        <link rel="stylesheet" href="/node_modules/bootstrap-icons/font/bootstrap-icons.min.css" />
         <link rel="stylesheet" href="style.css" />
     </head>
-    <body>
+    <body class="d-flex justify-content-center">
-        <div class="body">
+        <div class="body d-flex rounded w-75 flex-column">
-            <div class="header">
+            <header class="header d-flex rounded-top justify-content-between flex-column">
-                <img src="logo.png" alt="Логотип УлЧУ" class="logo"/>
+                <div class="d-flex flex-row">
-                <div class="nameBuild">Ульяновский Частный Университет</div>
+                    <img src="logo.png" alt="Логотип УлЧУ" class="logo d-block mx-5 my-5 w-25"/>
-                <div class="navBar">
+                    <label class="nameBuild d-flex align-self-center">Ульяновский Частный Университет</label>
-                    <div class="dropDown">
-                        <span>Перейти</span>
-                        <ul class="navMenu">
-                            <li><div class="navItem"><a href="info.html" target="_blank">Об университете</a></div></li>
-                            <li><div class="navItem"><a href="Education.html" target="_blank">Образование</a></div></li>
-                            <li><div class="navItem"><a href="StudentLive.html" target="_blank">Студенческая жизнь</a></div></li>
-                            <li><div class="navItem"><a href="Contacts.html" target="_blank">Контакты</a></div></li>
-                        </ul>
-                    </div>
                 </div>
-            </div>
+                <nav class="navBar navbar navbar-expand navbar-dark">
+                    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
+                        <span class="navbar-toggler-icon"></span>
+                    </button>
+                    <div class="navbar-collapse collapse justify-content-center" id="navbarNav">
+                        <div class="navbar-nav">
+                            <a class="nav-link" href="/info.html" target="_blank">
+                                <i class="bi bi-info-circle"></i>
+                                Об университете
+                            </a>
+                            <a class="nav-link active" href="/Education.html" target="_blank">
+                                <i class="bi bi-card-list"></i>
+                                Образование
+                            </a>
+                            <a class="nav-link" href="/StudentLive.html" target="_blank">
+                                <i class="bi bi-emoji-sunglasses-fill"></i>
+                                Студенческая жизнь
+                            </a>
+                            <a class="nav-link" href="/Contacts.html" target="_blank">
+                                <i class="bi bi-person-lines-fill"></i>
+                                Контакты
+                            </a>
+                            <a class="nav-link" href="/index.html">
+                                <i class="bi bi-house-fill"></i>
+                                Главная
+                            </a>
+                        </div>
+                    </div>
+                </nav>  
+            </header>
             <h1>Доступные направления обучения: </h1>
-            <div class="educItem">
+            <div class="educItem d-flex m-3 border border-dark rounded">
                 <p>Экономика и управление:</p>
                 <ul>
                     <li>Управление предприятиями</li>
@@ -33,7 +56,7 @@
                     <li>Предпринемательская деятельность</li>
                 </ul>
             </div>
-            <div class="educItem">
+            <div class="educItem d-flex m-3 border border-dark rounded">
                 <p>Информационные технологии:</p>
                 <ul>
                     <li>Программная инженерия</li>
@@ -43,7 +66,7 @@
                     <li>Веб-дизайнер</li>
                 </ul>
             </div>
-            <div class="educItem">
+            <div class="educItem d-flex m-3 border border-dark rounded">
                 <p>Гуманитарные науки:</p>
                 <ul>
                     <li>Психология</li>
@@ -53,7 +76,7 @@
                     <li>Журналист</li>
                 </ul>
             </div>
-            <div class="educItem">
+            <div class="educItem d-flex m-3 border border-dark rounded">
                 <p>Международные отношения и право:</p>
                 <ul>
                     <li>Правоведение</li>
@@ -61,25 +84,24 @@
                     <li>Международный бизнес</li>
                 </ul>
             </div>
-            <div class="educItem">
+            <div class="educItem d-flex m-3 border border-dark rounded">
                 <p>Экология и устойчивое развитие:</p>
                 <ul>
                     <li>Специалист по охране окружающей среды</li>
                     <li>Специалист по возобновляемым источникам энергии</li>
                 </ul>
             </div>   
-            <div class="footer">
+            <footer class="footer d-flex flex-row justify-content-around rounded-bottem">
-                <div cladd="footerItem">
+                <div class="d-flex align-items-center my-4 mx-0">
-                    <p><a href="index.html">На главную</a></p>
                     <p>Телефон: <strong class="numb">8-800-476-92-84</strong></p>
                     <p>E-mail: <strong>info@ulchu.ru</strong></p>
                     <P>Адрес: 432027, г. Ульяновск, ул. Северный Венец, д. 32</P>
                     <p>Официальный телеграмм канал: <strong>https://t.me/UlCHU</strong></p>
                 </div>
-                <div class="footerItem">
+                <div class="d-flex align-items-center my-4 mx-0">
-                    <img src="qrtg.png" />
+                    <img src="qrtg.png" class="fimg"/>
                 </div>
-            </div>
+            </footer>
         </div>
     </body>
 </html>

index.html

@@ -4,48 +4,68 @@
         <meta charset="UTF-8" />
         <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
         <title>Главная страница УлЧУ</title>
+        <link rel="stylesheet" href="/node_modules/bootstrap/dist/css/bootstrap.min.css" />
+        <link rel="stylesheet" href="/node_modules/bootstrap/dist/js/bootstrap.min.js" />
+        <link rel="stylesheet" href="/node_modules/bootstrap-icons/font/bootstrap-icons.min.css" />
         <link rel="stylesheet" href="style.css" />
     </head>
-    <body>
+    <body class="d-flex justify-content-center">
-        <div class="body">
+        <div class="body d-flex rounded w-75 flex-column">
-            <div class="header">
+            <header class="header d-flex rounded-top justify-content-between flex-column">
-                <img src="logo.png" alt="Логотип УлЧУ" class="logo"/>
+                <div class="d-flex flex-row">
-                <div class="nameBuild">Ульяновский Частный Университет</div>
+                    <img src="logo.png" alt="Логотип УлЧУ" class="logo d-block mx-5 my-5 w-25"/>
-                <div class="navBar">
+                    <label class="nameBuild d-flex align-self-center">Ульяновский Частный Университет</label>
-                    <div class="dropDown">
-                        <span>Перейти</span>
-                        <ul class="navMenu">
-                            <li><div class="navItem"><a href="info.html" target="_blank">Об университете</a></div></li>
-                            <li><div class="navItem"><a href="Education.html" target="_blank">Образование</a></div></li>
-                            <li><div class="navItem"><a href="StudentLive.html" target="_blank">Студенческая жизнь</a></div></li>
-                            <li><div class="navItem"><a href="Contacts.html" target="_blank">Контакты</a></div></li>
-                        </ul>
-                    </div>
                 </div>
-            </div>
+                <nav class="navBar navbar navbar-expand navbar-dark">
+                    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
+                        <span class="navbar-toggler-icon"></span>
+                    </button>
+                    <div class="navbar-collapse collapse justify-content-center" id="navbarNav">
+                        <div class="navbar-nav">
+                            <a class="nav-link" href="/info.html" target="_blank">
+                                <i class="bi bi-info-circle"></i>
+                                Об университете
+                            </a>
+                            <a class="nav-link" href="/Education.html" target="_blank">
+                                <i class="bi bi-card-list"></i>
+                                Образование
+                            </a>
+                            <a class="nav-link" href="/StudentLive.html" target="_blank">
+                                <i class="bi bi-emoji-sunglasses-fill"></i>
+                                Студенческая жизнь
+                            </a>
+                            <a class="nav-link" href="/Contacts.html" target="_blank">
+                                <i class="bi bi-person-lines-fill"></i>
+                                Контакты
+                            </a>
+                            <a class="nav-link active" href="/index.html">
+                                <i class="bi bi-house-fill"></i>
+                                Главная
+                            </a>
+                        </div>
+                    </div>
+                </nav>  
+            </header>
             <h1>Новости:</h1>
-            <div class="news">
+            <div class="mb-2">
-                <div class="newsItem">новость 1</div>
+                <a class="btn btn-primary" href="/news">
-                <div class="newsItem">новость 2</div>
+                    <i class="bi bi-plus-circle-fill me-2"></i>
-                <div class="newsItem">новость 3</div>
+                    Создать новую запись
-                <div class="newsItem">новость 4</div>
+                </a>
-                <div class="newsItem">новость 5</div>
-                <div class="newsItem">новость 6</div>
-                <div class="newsItem">новость 7</div>
-                <div class="newsItem">новость 8</div>
-                <div class="newsItem">новость 9</div>
             </div>
-            <div class="footer">
+            <news-board></news-board>
-                <div cladd="footerItem">
+            <footer class="footer d-flex flex-row justify-content-around rounded-bottem">
+                <div class="d-flex align-items-center my-4 mx-0">
                     <p>Телефон: <strong class="numb">8-800-476-92-84</strong></p>
                     <p>E-mail: <strong>info@ulchu.ru</strong></p>
                     <P>Адрес: 432027, г. Ульяновск, ул. Северный Венец, д. 32</P>
                     <p>Официальный телеграмм канал: <strong>https://t.me/UlCHU</strong></p>
                 </div>
-                <div class="footerItem">
+                <div class="d-flex align-items-center my-4 mx-0">
-                    <img src="qrtg.png" />
+                    <img src="qrtg.png" class="fimg"/>
                 </div>
-            </div>
+            </footer>
+            <script type="module" src="/components/news/board/controller.js"></script>
         </div>
     </body>
 </html>

info.html

@@ -4,25 +4,48 @@
         <meta charset="UTF-8" />
         <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
         <title>Об университете</title>
+        <link rel="stylesheet" href="/node_modules/bootstrap/dist/css/bootstrap.min.css" />
+        <link rel="stylesheet" href="/node_modules/bootstrap/dist/js/bootstrap.min.js" />
+        <link rel="stylesheet" href="/node_modules/bootstrap-icons/font/bootstrap-icons.min.css" />
         <link rel="stylesheet" href="style.css" />
     </head>
-    <body>
+    <body class="d-flex justify-content-center">
-        <div class="body">
+        <div class="body d-flex rounded w-75 flex-column">
-            <div class="header">
+            <header class="header d-flex rounded-top justify-content-between flex-column">
-                <img src="logo.png" alt="Логотип УлЧУ" class="logo"/>
+                <div class="d-flex flex-row">
-                <div class="nameBuild">Ульяновский Частный Университет</div>
+                    <img src="logo.png" alt="Логотип УлЧУ" class="logo d-block mx-5 my-5 w-25"/>
-                <div class="navBar">
+                    <label class="nameBuild d-flex align-self-center">Ульяновский Частный Университет</label>
-                    <div class="dropDown">
-                        <span>Перейти</span>
-                        <ul class="navMenu">
-                            <li><div class="navItem"><a href="info.html" target="_blank">Об университете</a></div></li>
-                            <li><div class="navItem"><a href="Education.html" target="_blank">Образование</a></div></li>
-                            <li><div class="navItem"><a href="StudentLive.html" target="_blank">Студенческая жизнь</a></div></li>
-                            <li><div class="navItem"><a href="Contacts.html" target="_blank">Контакты</a></div></li>
-                        </ul>
-                    </div>
                 </div>
-            </div>
+                <nav class="navBar navbar navbar-expand navbar-dark">
+                    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
+                        <span class="navbar-toggler-icon"></span>
+                    </button>
+                    <div class="navbar-collapse collapse justify-content-center" id="navbarNav">
+                        <div class="navbar-nav">
+                            <a class="nav-link active" href="/info.html" target="_blank">
+                                <i class="bi bi-info-circle"></i>
+                                Об университете
+                            </a>
+                            <a class="nav-link" href="/Education.html" target="_blank">
+                                <i class="bi bi-card-list"></i>
+                                Образование
+                            </a>
+                            <a class="nav-link" href="/StudentLive.html" target="_blank">
+                                <i class="bi bi-emoji-sunglasses-fill"></i>
+                                Студенческая жизнь
+                            </a>
+                            <a class="nav-link" href="/Contacts.html" target="_blank">
+                                <i class="bi bi-person-lines-fill"></i>
+                                Контакты
+                            </a>
+                            <a class="nav-link" href="/index.html">
+                                <i class="bi bi-house-fill"></i>
+                                Главная
+                            </a>
+                        </div>
+                    </div>
+                </nav>  
+            </header>
             <p>
                 Мы стояли на пороге нового начала, когда в нашем городе возникла идея создания 
                 Ульяновского Частного Университета. Это было время, когда образовательные учреждения 
@@ -71,18 +94,17 @@
                 вдохновляя друг друга на новые достижения и открытия. Это только начало нашего пути, и 
                 мы с нетерпением ждем, что принесет будущее!
             </p>
-            <div class="footer">
+            <footer class="footer d-flex flex-row justify-content-around rounded-bottem">
-                <div cladd="footerItem">
+                <div class="d-flex align-items-center my-4 mx-0">
-                    <p><a href="index.html">На главную</a></p>
                     <p>Телефон: <strong class="numb">8-800-476-92-84</strong></p>
                     <p>E-mail: <strong>info@ulchu.ru</strong></p>
                     <P>Адрес: 432027, г. Ульяновск, ул. Северный Венец, д. 32</P>
                     <p>Официальный телеграмм канал: <strong>https://t.me/UlCHU</strong></p>
                 </div>
-                <div class="footerItem">
+                <div class="d-flex align-items-center my-4 mx-0">
-                    <img src="qrtg.png" />
+                    <img src="qrtg.png" class="fimg"/>
                 </div>
-            </div>
+            </footer>
         </div>
     </body>
 </html>

js/validation.js

@@ -0,0 +1,21 @@
+export default function validation() {
+    // поиск всех форм с классом .needs-validation
+    const forms = document.querySelectorAll("form.needs-validation");
+
+    forms.forEach((form) => {
+        form.setAttribute("novalidate", "");
+        form.addEventListener("submit", (event) => {
+            // выключить стандартное действие
+            event.preventDefault();
+            // предотвращает распространение preventDefault
+            // на другие объекты
+            event.stopPropagation();
+            if (!form.checkValidity()) {
+                // добавляет к форме класс was-validated
+                form.classList.add("was-validated");
+            } else {
+                form.classList.remove("was-validated");
+            }
+        });
+    });
+};

news.html

@@ -0,0 +1,101 @@
+<!DOCTYPE html>
+<html lang="ru">
+    <head>
+        <meta charset="UTF-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
+        <title>Новость</title>
+        <script type="module" src="/node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
+        <link rel="stylesheet" href="/node_modules/bootstrap/dist/css/bootstrap.min.css" />
+        <link rel="stylesheet" href="/node_modules/bootstrap/dist/js/bootstrap.min.js" />
+        <link rel="stylesheet" href="/node_modules/bootstrap-icons/font/bootstrap-icons.min.css" />
+        <link rel="stylesheet" href="style.css" />
+    </head>
+    <body class="d-flex justify-content-center">
+        <div class="body d-flex rounded w-75 flex-column">
+            <header class="header d-flex rounded-top justify-content-between flex-column">
+                <div class="d-flex flex-row">
+                    <img src="logo.png" alt="Логотип УлЧУ" class="logo d-block mx-5 my-5 w-25"/>
+                    <label class="nameBuild d-flex align-self-center">Ульяновский Частный Университет</label>
+                </div>
+                <nav class="navBar navbar navbar-expand navbar-dark">
+                    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
+                        <span class="navbar-toggler-icon"></span>
+                    </button>
+                    <div class="navbar-collapse collapse justify-content-center" id="navbarNav">
+                        <div class="navbar-nav">
+                            <a class="nav-link" href="/info.html" target="_blank">
+                                <i class="bi bi-info-circle"></i>
+                                Об университете
+                            </a>
+                            <a class="nav-link" href="/Education.html" target="_blank">
+                                <i class="bi bi-card-list"></i>
+                                Образование
+                            </a>
+                            <a class="nav-link" href="/StudentLive.html" target="_blank">
+                                <i class="bi bi-emoji-sunglasses-fill"></i>
+                                Студенческая жизнь
+                            </a>
+                            <a class="nav-link" href="/Contacts.html" target="_blank">
+                                <i class="bi bi-person-lines-fill"></i>
+                                Контакты
+                            </a>
+                            <a class="nav-link active" href="/index.html">
+                                <i class="bi bi-house-fill"></i>
+                                Главная
+                            </a>
+                        </div>
+                    </div>
+                </nav>  
+            </header>
+            <news-form></news-form>
+            <template id="news-form-template">
+                <div class="row justify-content-center">
+                    <form class="col needs-validation my-3">
+                        <div class="m-3">
+                            <label for="id" class="form-label">Номер</label>
+                            <input type="text" class="form-control" id="id" readonly disabled />
+                        </div>
+                        <div class="m-3">
+                            <label for="description" class="form-label">Описание</label>
+                            <input type="text" class="form-control" id="description" required />
+                        </div>
+                        <div class="m-3">
+                            <label for="bdate" class="form-label">Дата</label>
+                            <input type="date" class="form-control" id="bdate" required />
+                        </div>
+                        <div class="m-3">
+                            <label for="teg" class="form-label">Тег</label>
+                            <select class="form-select" id="teg" required>
+                                <option value="" selected>Выберите тег</option>
+                            </select>
+                        </div>
+                        <div class="row row-cols-1 justify-content-center">
+                            <div class="col col-md-6 col-lg-4 col-xl-3 m-lg-0 mb-2">
+                                <button id="btn-save" type="submit" class="btn btn-primary d-block m-auto w-75">
+                                    Сохранить
+                                </button>
+                            </div>
+                            <div class="col col-md-6 col-lg-4 col-xl-3 m-lg-0 mb-2">
+                                <button id="btn-back" type="button" class="btn btn-primary d-block m-auto w-75">
+                                    Назад
+                                </button>
+                            </div>
+                        </div>
+                    </form>
+                </div>
+            </template>
+            <footer class="footer d-flex flex-row justify-content-around rounded-bottem">
+                <div class="d-flex align-items-center my-4 mx-0">
+                    <p>Телефон: <strong class="numb">8-800-476-92-84</strong></p>
+                    <p>E-mail: <strong>info@ulchu.ru</strong></p>
+                    <P>Адрес: 432027, г. Ульяновск, ул. Северный Венец, д. 32</P>
+                    <p>Официальный телеграмм канал: <strong>https://t.me/UlCHU</strong></p>
+                </div>
+                <div class="d-flex align-items-center my-4 mx-0">
+                    <img src="qrtg.png" class="fimg"/>
+                </div>
+            </footer>
+            <script type="module" src="/components/news/form/controller.js"></script>
+        </div>
+    </body>
+</html>

package.json

@@ -0,0 +1,36 @@
+{
+  "name": "pibd-21_permyakov_r.g._ip",
+  "version": "1.0.0",
+  "description": "Для ИП",
+  "repository": {
+    "type": "git",
+    "url": "https://git.is.ulstu.ru/Roman/PIbd-21_Permyakov_R.G._IP.git"
+  },
+  "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 . --ext js --report-unused-disable-directives --max-warnings 0"
+  },
+  "dependencies": {
+    "bootstrap" : "5.3.3",
+    "bootstrap-icons" : "1.11.3",
+    "moment": "2.30.1"
+  },
+  "devDependencies": {
+      "http-server": "14.1.1",
+      "json-server": "1.0.0-beta.3",
+      "vite": "6.2.0",
+      "npm-run-all": "4.1.5",
+      "eslint": "8.56.0",
+      "eslint-config-airbnb-base": "15.0.0",
+      "eslint-config-prettier": "10.0.2",
+      "eslint-plugin-import": "2.31.0",
+      "eslint-plugin-prettier": "5.2.3",
+      "eslint-plugin-html": "8.1.2"
+  }
+}

studentLive.html

@@ -1,28 +1,51 @@
 <!DOCTYPE html>
 <html lang="ru">
     <head>
-        <meta lang="UTF-8" />
+        <meta charset="UTF-8" />
         <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
         <title>Студенческая жизнь</title>
+        <link rel="stylesheet" href="/node_modules/bootstrap/dist/css/bootstrap.min.css" />
+        <link rel="stylesheet" href="/node_modules/bootstrap/dist/js/bootstrap.min.js" />
+        <link rel="stylesheet" href="/node_modules/bootstrap-icons/font/bootstrap-icons.min.css" />
         <link rel="stylesheet" href="style.css" />
     </head>
-    <body>
+    <body class="d-flex justify-content-center">
-        <div class="body">
+        <div class="body d-flex rounded w-75 flex-column">
-            <div class="header">
+            <header class="header d-flex rounded-top justify-content-between flex-column">
-                <img src="logo.png" alt="Логотип УлЧУ" class="logo"/>
+                <div class="d-flex flex-row">
-                <div class="nameBuild">Ульяновский Частный Университет</div>
+                    <img src="logo.png" alt="Логотип УлЧУ" class="logo d-block mx-5 my-5 w-25"/>
-                <div class="navBar">
+                    <label class="nameBuild d-flex align-self-center">Ульяновский Частный Университет</label>
-                    <div class="dropDown">
-                        <span>Перейти</span>
-                        <ul class="navMenu">
-                            <li><div class="navItem"><a href="info.html" target="_blank">Об университете</a></div></li>
-                            <li><div class="navItem"><a href="Education.html" target="_blank">Образование</a></div></li>
-                            <li><div class="navItem"><a href="StudentLive.html" target="_blank">Студенческая жизнь</a></div></li>
-                            <li><div class="navItem"><a href="Contacts.html" target="_blank">Контакты</a></div></li>
-                        </ul>
-                    </div>
                 </div>
-            </div>
+                <nav class="navBar navbar navbar-expand navbar-dark">
+                    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
+                        <span class="navbar-toggler-icon"></span>
+                    </button>
+                    <div class="navbar-collapse collapse justify-content-center" id="navbarNav">
+                        <div class="navbar-nav">
+                            <a class="nav-link" href="/info.html" target="_blank">
+                                <i class="bi bi-info-circle"></i>
+                                Об университете
+                            </a>
+                            <a class="nav-link" href="/Education.html" target="_blank">
+                                <i class="bi bi-card-list"></i>
+                                Образование
+                            </a>
+                            <a class="nav-link active" href="/StudentLive.html" target="_blank">
+                                <i class="bi bi-emoji-sunglasses-fill"></i>
+                                Студенческая жизнь
+                            </a>
+                            <a class="nav-link" href="/Contacts.html" target="_blank">
+                                <i class="bi bi-person-lines-fill"></i>
+                                Контакты
+                            </a>
+                            <a class="nav-link" href="/index.html">
+                                <i class="bi bi-house-fill"></i>
+                                Главная
+                            </a>
+                        </div>
+                    </div>
+                </nav>  
+            </header>
             <p>
                 Студенты Ульяновского Частного Университета будут активно участвовать в разнообразной 
                 деятельности, которая поможет им развивать навыки, получать практический опыт и обогащать 
@@ -64,18 +87,17 @@
                 навыки командной работы, лидерства и критического мышления, что сделает их более 
                 конкурентоспособными на рынке труда.
             </p>
-            <div class="footer">
+            <footer class="footer d-flex flex-row justify-content-around rounded-bottem">
-                <div cladd="footerItem">
+                <div class="d-flex align-items-center my-4 mx-0">
-                    <p><a href="index.html">На главную</a></p>
                     <p>Телефон: <strong class="numb">8-800-476-92-84</strong></p>
                     <p>E-mail: <strong>info@ulchu.ru</strong></p>
                     <P>Адрес: 432027, г. Ульяновск, ул. Северный Венец, д. 32</P>
                     <p>Официальный телеграмм канал: <strong>https://t.me/UlCHU</strong></p>
                 </div>
-                <div class="footerItem">
+                <div class="d-flex align-items-center my-4 mx-0">
-                    <img src="qrtg.png" />
+                    <img src="qrtg.png" class="fimg"/>
                 </div>
-            </div>
+            </footer>
         </div>   
     </body>
 </html>

style.css

@@ -1,90 +1,39 @@
 body{
-    display: flex;
     color: #D77A61;
     background-color: #EFF1F3;
-    justify-content: center;
     margin: 3px;
 }
 
 .body{
-    display: flex;
     background-color: #DBD3D8;
-    border: 0px solid #DBD3D8;
+}
-    border-radius: 50px;
+
-    width: 80%;
+.color1{
-    flex-direction: column;
+    color: #DBD3D8;
+}
+
+.color2{
+    color: #91ff00;
 }
 
 .header{
-    display: flex;
     background-color: #223843;
-    border: 0px solid #223843;
-    border-top-left-radius: 50px;
-    border-top-right-radius: 50px;
-    justify-content: space-between;
-}
-
-.logo{
-    display: block;
-    margin: 10px 20px;
-    width: 30%;
-    object-fit: contain;
 }
 
 .nameBuild{
-    display: flex;
-    align-self: center;
     font-size: 5vw;
 }
 
 .navBar{
-    display: flex;
+    background-color: #D77A61;
-    background-color: #EFF1F3;
-    align-self: flex-end;
-    margin-left: -20px;
 }
 
-.dropDown{
+.nav-link:hover{
-    position: relative;
+    color: #1097ec;
 }
 
-.dropDown > span{
+.nav-link{
-    z-index: 2;
+    color: #DBD3D8;
-    position: relative;
-    cursor: pointer;
-    padding: 10px 30px;
-    font-size: 20px;
-}
-
-.navMenu{
-    display: none;
-}
-
-.dropDown:hover .navMenu{
-    display: flex;
-    flex-direction: column;
-    position: absolute;
-    top: 10px;
-    left: -40px;
-    z-index: 1;
-}
-
-.dropDown > ul{
-    list-style: none;
-    width: 100%;
-}
-
-.navItem{
-    background-color: #EFF1F3;
-    border-bottom: 5px solid #D77A61;
-    text-align: center;
-    padding: 20px 0px;
-}
-
-.news{
-    display: flex;
-    justify-content: space-around;
-    flex-wrap: wrap;
 }
 
 .newsItem{
@@ -102,26 +51,15 @@ body{
     align-items: center;
     justify-content: center;
     margin: 20px;
-
+    text-align: center;
 }
 
 .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;
 }
 
-.footerItem{
+.fimg{
-    display: flex;
-    align-items: center;
-    margin: 5px 0px;
-}
-
-.footerItem > img{
     width: 100px;
 }
 
@@ -130,11 +68,7 @@ body{
 }
 
 .educItem{
-    display: flex;
     background-color: #EFF1F3;
-    margin: 20px;
-    border: 3px solid #000000;
-    border-radius: 50px;
 }
 
 .educItem > p{
@@ -147,11 +81,6 @@ h1{
     margin-left: 20px;
 }
 
-hr{
-    background-color: #223843;
-    height: 3px;
-}
-
 strong{
     text-decoration: underline;
     color: #D77A61;

vite.config.js

@@ -0,0 +1,18 @@
+import { resolve } from "path";
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { defineConfig } from "vite";
+
+export default defineConfig({
+    build: {
+        rollupOptions: {
+            input: {
+                main: resolve(__dirname, "index.html"),
+                info: resolve(__dirname, "info.html"),
+                education: resolve(__dirname, "education.html"),
+                studentLive: resolve(__dirname, "studentLive.html"),
+                contacts: resolve(__dirname, "contacts.html"),
+                news: resolve(__dirname, "news.html"),
+            },
+        },
+    },
+});