Отчёт

Всё работает
доработки
2025-05-07 10:28:26 +04:00 · 2025-04-17 18:42:23 +04:00 · 2025-04-17 12:41:55 +04:00 · 2025-04-17 12:41:38 +04:00 · 2025-04-16 22:13:40 +04:00 · 2025-04-16 22:13:31 +04:00
23 changed files with 1377 additions and 48 deletions
--- a/components/api/client.js
+++ b/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");
--- a/components/board-helper.js
+++ b/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)));
+}
--- a/components/button-helper.js
+++ b/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);
+}
--- a/components/modal-helper.js
+++ b/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;
--- a/components/news/board/controller.js
+++ b/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);
--- a/components/news/board/model.js
+++ b/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);
+    }
+}
--- a/components/news/board/view.js
+++ b/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, "Удаление", "Удаление успешно завершено");
+    }
+}
--- a/components/news/form/controller.js
+++ b/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);
--- a/components/news/form/model.js
+++ b/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);
+        }
+    }
+}
--- a/components/news/form/view.js
+++ b/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, "Сохранение", "Сохранение успешно завершено");
+    }
+}
--- a/components/select-helper.js
+++ b/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);
+    });
+}
--- a/components/storage.js
+++ b/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)) || [];
+}   
--- a/components/toast-helper.js
+++ b/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();
+};
--- a/database/data.json
+++ b/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": "срочно"
+    }
+  ]
+}
--- a/index.html
+++ b/index.html
@@ -47,18 +47,13 @@
                </nav>  
            </header>
            <h1>Новости:</h1>
-            <form id="newsForm" action="/" method="post">
-                <div>
-                    <label class="form-label mx-3" for="description">Описание</label>
-                    <input id="description" name="description" class="form-control mx-3" 
-                        type="text" required />
-                </div>
-                <button class="d-block mx-auto my-3 btn btn-primary w-25 btn-single" 
-                    type="submit">Добавить</button>
-            </form>
-            <div id="news" class="d-flex justify-content-around flex-wrap">
-                <div class="newsItem">Здесь будут ваши новости</div>
+            <div class="mb-2">
+                <a class="btn btn-primary" href="/news">
+                    <i class="bi bi-plus-circle-fill me-2"></i>
+                    Создать новую запись
+                </a>
            </div>
+            <news-board></news-board>
            <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>
@@ -70,26 +65,7 @@
                    <img src="qrtg.png" class="fimg"/>
                </div>
            </footer>
-            <script type="module">
-                const news = document.getElementById("news")
-                const form1 = document.getElementById("newsForm")
-                const inputField = document.getElementById("description")
-
-                function getNewNewsItem(elements){
-                    const { value } = Array.from(elements)[0]
-                    let par = document.createElement("div")
-                    par.setAttribute("class", `newsItem`)
-                    par.textContent = { value }.value
-
-                    return par
-                }
-
-                form1.addEventListener("submit", (event) => {
-                    event.preventDefault()
-                    news.appendChild(getNewNewsItem(event.target.elements))
-                    inputField.value = ""
-                })
-            </script>
+            <script type="module" src="/components/news/board/controller.js"></script>
        </div>
    </body>
 </html>
--- a/js/validation.js
+++ b/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");
+            }
+        });
+    });
+};
--- a/news.html
+++ b/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>
--- a/package-lock.json
+++ b/package-lock.json
@@ -7,10 +7,10 @@
    "": {
      "name": "pibd-21_permyakov_r.g._ip",
      "version": "1.0.0",
-      "license": "ISC",
      "dependencies": {
        "bootstrap": "5.3.3",
-        "bootstrap-icons": "1.11.3"
+        "bootstrap-icons": "1.11.3",
+        "moment": "2.30.1"
      },
      "devDependencies": {
        "eslint": "8.56.0",
@@ -20,6 +20,7 @@
        "eslint-plugin-import": "2.31.0",
        "eslint-plugin-prettier": "5.2.3",
        "http-server": "14.1.1",
+        "json-server": "1.0.0-beta.3",
        "npm-run-all": "4.1.5",
        "vite": "6.2.0"
      }
@@ -601,6 +602,13 @@
        "url": "https://opencollective.com/unts"
      }
    },
+    "node_modules/@polka/url": {
+      "version": "1.0.0-next.29",
+      "resolved": "https://registry.npmjs.org/@polka/url/-/url-1.0.0-next.29.tgz",
+      "integrity": "sha512-wwQAWhWSuHaag8c4q/KN/vCoeOJYshAIvMQwD4GpSb3OiZklFfvAgmj0VCBBImRpuF/aFgIRzllXlVX93Jevww==",
+      "dev": true,
+      "license": "MIT"
+    },
    "node_modules/@popperjs/core": {
      "version": "2.11.8",
      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz",
@@ -885,6 +893,327 @@
      "dev": true,
      "license": "MIT"
    },
+    "node_modules/@tinyhttp/accepts": {
+      "version": "2.2.3",
+      "resolved": "https://registry.npmjs.org/@tinyhttp/accepts/-/accepts-2.2.3.tgz",
+      "integrity": "sha512-9pQN6pJAJOU3McmdJWTcyq7LLFW8Lj5q+DadyKcvp+sxMkEpktKX5sbfJgJuOvjk6+1xWl7pe0YL1US1vaO/1w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "mime": "4.0.4",
+        "negotiator": "^0.6.3"
+      },
+      "engines": {
+        "node": ">=12.20.0"
+      },
+      "funding": {
+        "type": "individual",
+        "url": "https://github.com/tinyhttp/tinyhttp?sponsor=1"
+      }
+    },
+    "node_modules/@tinyhttp/accepts/node_modules/mime": {
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/mime/-/mime-4.0.4.tgz",
+      "integrity": "sha512-v8yqInVjhXyqP6+Kw4fV3ZzeMRqEW6FotRsKXjRS5VMTNIuXsdRoAvklpoRgSqXm6o9VNH4/C0mgedko9DdLsQ==",
+      "dev": true,
+      "funding": [
+        "https://github.com/sponsors/broofa"
+      ],
+      "license": "MIT",
+      "bin": {
+        "mime": "bin/cli.js"
+      },
+      "engines": {
+        "node": ">=16"
+      }
+    },
+    "node_modules/@tinyhttp/app": {
+      "version": "2.5.2",
+      "resolved": "https://registry.npmjs.org/@tinyhttp/app/-/app-2.5.2.tgz",
+      "integrity": "sha512-DcB3Y8GQppLQlO2VxRYF7LzTEAoZb+VRQXuIsErcu2fNaM1xdx6NQZDso5rlZUiaeg6KYYRfU34N4XkZbv6jSA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@tinyhttp/cookie": "2.1.1",
+        "@tinyhttp/proxy-addr": "2.2.1",
+        "@tinyhttp/req": "2.2.5",
+        "@tinyhttp/res": "2.2.5",
+        "@tinyhttp/router": "2.2.3",
+        "header-range-parser": "1.1.3",
+        "regexparam": "^2.0.2"
+      },
+      "engines": {
+        "node": ">=14.21.3"
+      },
+      "funding": {
+        "type": "individual",
+        "url": "https://github.com/tinyhttp/tinyhttp?sponsor=1"
+      }
+    },
+    "node_modules/@tinyhttp/content-disposition": {
+      "version": "2.2.2",
+      "resolved": "https://registry.npmjs.org/@tinyhttp/content-disposition/-/content-disposition-2.2.2.tgz",
+      "integrity": "sha512-crXw1txzrS36huQOyQGYFvhTeLeG0Si1xu+/l6kXUVYpE0TjFjEZRqTbuadQLfKGZ0jaI+jJoRyqaWwxOSHW2g==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12.20.0"
+      },
+      "funding": {
+        "type": "individual",
+        "url": "https://github.com/tinyhttp/tinyhttp?sponsor=1"
+      }
+    },
+    "node_modules/@tinyhttp/content-type": {
+      "version": "0.1.4",
+      "resolved": "https://registry.npmjs.org/@tinyhttp/content-type/-/content-type-0.1.4.tgz",
+      "integrity": "sha512-dl6f3SHIJPYbhsW1oXdrqOmLSQF/Ctlv3JnNfXAE22kIP7FosqJHxkz/qj2gv465prG8ODKH5KEyhBkvwrueKQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12.4"
+      }
+    },
+    "node_modules/@tinyhttp/cookie": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/@tinyhttp/cookie/-/cookie-2.1.1.tgz",
+      "integrity": "sha512-h/kL9jY0e0Dvad+/QU3efKZww0aTvZJslaHj3JTPmIPC9Oan9+kYqmh3M6L5JUQRuTJYFK2nzgL2iJtH2S+6dA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12.20.0"
+      },
+      "funding": {
+        "type": "individual",
+        "url": "https://github.com/tinyhttp/tinyhttp?sponsor=1"
+      }
+    },
+    "node_modules/@tinyhttp/cookie-signature": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/@tinyhttp/cookie-signature/-/cookie-signature-2.1.1.tgz",
+      "integrity": "sha512-VDsSMY5OJfQJIAtUgeQYhqMPSZptehFSfvEEtxr+4nldPA8IImlp3QVcOVuK985g4AFR4Hl1sCbWCXoqBnVWnw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12.20.0"
+      }
+    },
+    "node_modules/@tinyhttp/cors": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/@tinyhttp/cors/-/cors-2.0.1.tgz",
+      "integrity": "sha512-qrmo6WJuaiCzKWagv2yA/kw6hIISfF/hOqPWwmI6w0o8apeTMmRN3DoCFvQ/wNVuWVdU5J4KU7OX8aaSOEq51A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@tinyhttp/vary": "^0.1.3"
+      },
+      "engines": {
+        "node": ">=12.20 || 14.x || >=16"
+      }
+    },
+    "node_modules/@tinyhttp/encode-url": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/@tinyhttp/encode-url/-/encode-url-2.1.1.tgz",
+      "integrity": "sha512-AhY+JqdZ56qV77tzrBm0qThXORbsVjs/IOPgGCS7x/wWnsa/Bx30zDUU/jPAUcSzNOzt860x9fhdGpzdqbUeUw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12.20.0"
+      }
+    },
+    "node_modules/@tinyhttp/etag": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/@tinyhttp/etag/-/etag-2.1.2.tgz",
+      "integrity": "sha512-j80fPKimGqdmMh6962y+BtQsnYPVCzZfJw0HXjyH70VaJBHLKGF+iYhcKqzI3yef6QBNa8DKIPsbEYpuwApXTw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12.20.0"
+      }
+    },
+    "node_modules/@tinyhttp/forwarded": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/@tinyhttp/forwarded/-/forwarded-2.1.2.tgz",
+      "integrity": "sha512-9H/eulJ68ElY/+zYpTpNhZ7vxGV+cnwaR6+oQSm7bVgZMyuQfgROW/qvZuhmgDTIxnGMXst+Ba4ij6w6Krcs3w==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12.20.0"
+      }
+    },
+    "node_modules/@tinyhttp/logger": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/@tinyhttp/logger/-/logger-2.1.0.tgz",
+      "integrity": "sha512-Ma1fJ9CwUbn9r61/4HW6+nflsVoslpOnCrfQ6UeZq7GGIgwLzofms3HoSVG7M+AyRMJpxlfcDdbH5oFVroDMKA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "colorette": "^2.0.20",
+        "dayjs": "^1.11.13",
+        "http-status-emojis": "^2.2.0"
+      },
+      "engines": {
+        "node": ">=14.18 || >=16.20"
+      }
+    },
+    "node_modules/@tinyhttp/proxy-addr": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/@tinyhttp/proxy-addr/-/proxy-addr-2.2.1.tgz",
+      "integrity": "sha512-BicqMqVI91hHq2BQmnqJUh0FQUnx7DncwSGgu2ghlh+JZG2rHK2ZN/rXkfhrx1rrUw6hnd0L36O8GPMh01+dDQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@tinyhttp/forwarded": "2.1.2",
+        "ipaddr.js": "^2.2.0"
+      },
+      "engines": {
+        "node": ">=12.20.0"
+      }
+    },
+    "node_modules/@tinyhttp/req": {
+      "version": "2.2.5",
+      "resolved": "https://registry.npmjs.org/@tinyhttp/req/-/req-2.2.5.tgz",
+      "integrity": "sha512-trfsXwtmsNjMcGKcLJ+45h912kLRqBQCQD06ams3Tq0kf4gHLxjHjoYOC1Z9yGjOn81XllRx8wqvnvr+Kbe3gw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@tinyhttp/accepts": "2.2.3",
+        "@tinyhttp/type-is": "2.2.4",
+        "@tinyhttp/url": "2.1.1",
+        "header-range-parser": "^1.1.3"
+      },
+      "engines": {
+        "node": ">=12.20.0"
+      }
+    },
+    "node_modules/@tinyhttp/res": {
+      "version": "2.2.5",
+      "resolved": "https://registry.npmjs.org/@tinyhttp/res/-/res-2.2.5.tgz",
+      "integrity": "sha512-yBsqjWygpuKAVz4moWlP4hqzwiDDqfrn2mA0wviJAcgvGiyOErtlQwXY7aj3aPiCpURvxvEFO//Gdy6yV+xEpA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@tinyhttp/content-disposition": "2.2.2",
+        "@tinyhttp/cookie": "2.1.1",
+        "@tinyhttp/cookie-signature": "2.1.1",
+        "@tinyhttp/encode-url": "2.1.1",
+        "@tinyhttp/req": "2.2.5",
+        "@tinyhttp/send": "2.2.3",
+        "@tinyhttp/vary": "^0.1.3",
+        "es-escape-html": "^0.1.1",
+        "mime": "4.0.4"
+      },
+      "engines": {
+        "node": ">=12.20.0"
+      }
+    },
+    "node_modules/@tinyhttp/res/node_modules/mime": {
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/mime/-/mime-4.0.4.tgz",
+      "integrity": "sha512-v8yqInVjhXyqP6+Kw4fV3ZzeMRqEW6FotRsKXjRS5VMTNIuXsdRoAvklpoRgSqXm6o9VNH4/C0mgedko9DdLsQ==",
+      "dev": true,
+      "funding": [
+        "https://github.com/sponsors/broofa"
+      ],
+      "license": "MIT",
+      "bin": {
+        "mime": "bin/cli.js"
+      },
+      "engines": {
+        "node": ">=16"
+      }
+    },
+    "node_modules/@tinyhttp/router": {
+      "version": "2.2.3",
+      "resolved": "https://registry.npmjs.org/@tinyhttp/router/-/router-2.2.3.tgz",
+      "integrity": "sha512-O0MQqWV3Vpg/uXsMYg19XsIgOhwjyhTYWh51Qng7bxqXixxx2PEvZWnFjP7c84K7kU/nUX41KpkEBTLnznk9/Q==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12.20.0"
+      }
+    },
+    "node_modules/@tinyhttp/send": {
+      "version": "2.2.3",
+      "resolved": "https://registry.npmjs.org/@tinyhttp/send/-/send-2.2.3.tgz",
+      "integrity": "sha512-o4cVHHGQ8WjVBS8UT0EE/2WnjoybrfXikHwsRoNlG1pfrC/Sd01u1N4Te8cOd/9aNGLr4mGxWb5qTm2RRtEi7g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@tinyhttp/content-type": "^0.1.4",
+        "@tinyhttp/etag": "2.1.2",
+        "mime": "4.0.4"
+      },
+      "engines": {
+        "node": ">=12.20.0"
+      }
+    },
+    "node_modules/@tinyhttp/send/node_modules/mime": {
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/mime/-/mime-4.0.4.tgz",
+      "integrity": "sha512-v8yqInVjhXyqP6+Kw4fV3ZzeMRqEW6FotRsKXjRS5VMTNIuXsdRoAvklpoRgSqXm6o9VNH4/C0mgedko9DdLsQ==",
+      "dev": true,
+      "funding": [
+        "https://github.com/sponsors/broofa"
+      ],
+      "license": "MIT",
+      "bin": {
+        "mime": "bin/cli.js"
+      },
+      "engines": {
+        "node": ">=16"
+      }
+    },
+    "node_modules/@tinyhttp/type-is": {
+      "version": "2.2.4",
+      "resolved": "https://registry.npmjs.org/@tinyhttp/type-is/-/type-is-2.2.4.tgz",
+      "integrity": "sha512-7F328NheridwjIfefBB2j1PEcKKABpADgv7aCJaE8x8EON77ZFrAkI3Rir7pGjopV7V9MBmW88xUQigBEX2rmQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@tinyhttp/content-type": "^0.1.4",
+        "mime": "4.0.4"
+      },
+      "engines": {
+        "node": ">=12.20.0"
+      }
+    },
+    "node_modules/@tinyhttp/type-is/node_modules/mime": {
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/mime/-/mime-4.0.4.tgz",
+      "integrity": "sha512-v8yqInVjhXyqP6+Kw4fV3ZzeMRqEW6FotRsKXjRS5VMTNIuXsdRoAvklpoRgSqXm6o9VNH4/C0mgedko9DdLsQ==",
+      "dev": true,
+      "funding": [
+        "https://github.com/sponsors/broofa"
+      ],
+      "license": "MIT",
+      "bin": {
+        "mime": "bin/cli.js"
+      },
+      "engines": {
+        "node": ">=16"
+      }
+    },
+    "node_modules/@tinyhttp/url": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/@tinyhttp/url/-/url-2.1.1.tgz",
+      "integrity": "sha512-POJeq2GQ5jI7Zrdmj22JqOijB5/GeX+LEX7DUdml1hUnGbJOTWDx7zf2b5cCERj7RoXL67zTgyzVblBJC+NJWg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12.20.0"
+      }
+    },
+    "node_modules/@tinyhttp/vary": {
+      "version": "0.1.3",
+      "resolved": "https://registry.npmjs.org/@tinyhttp/vary/-/vary-0.1.3.tgz",
+      "integrity": "sha512-SoL83sQXAGiHN1jm2VwLUWQSQeDAAl1ywOm6T0b0Cg1CZhVsjoiZadmjhxF6FHCCY7OHHVaLnTgSMxTPIDLxMg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12.20"
+      }
+    },
    "node_modules/@types/estree": {
      "version": "1.0.6",
      "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.6.tgz",
@@ -1274,6 +1603,22 @@
        "url": "https://github.com/chalk/chalk?sponsor=1"
      }
    },
+    "node_modules/chokidar": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-4.0.3.tgz",
+      "integrity": "sha512-Qgzu8kfBvo+cA4962jnP1KkS6Dop5NS6g7R5LFYJr4b8Ub94PPQXUksCw9PvXoeXPRRddRNC5C1JQUR2SMGtnA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "readdirp": "^4.0.1"
+      },
+      "engines": {
+        "node": ">= 14.16.0"
+      },
+      "funding": {
+        "url": "https://paulmillr.com/funding/"
+      }
+    },
    "node_modules/color-convert": {
      "version": "2.0.1",
      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
@@ -1294,6 +1639,13 @@
      "dev": true,
      "license": "MIT"
    },
+    "node_modules/colorette": {
+      "version": "2.0.20",
+      "resolved": "https://registry.npmjs.org/colorette/-/colorette-2.0.20.tgz",
+      "integrity": "sha512-IfEDxwoWIjkeXL1eXcDiow4UbKjhLdq6/EuSVR9GMN7KVH3r9gQ83e73hsz1Nd1T3ijd5xv1wcWRYO+D6kCI2w==",
+      "dev": true,
+      "license": "MIT"
+    },
    "node_modules/concat-map": {
      "version": "0.0.1",
      "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
@@ -1387,6 +1739,13 @@
        "url": "https://github.com/sponsors/ljharb"
      }
    },
+    "node_modules/dayjs": {
+      "version": "1.11.13",
+      "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.13.tgz",
+      "integrity": "sha512-oaMBel6gjolK862uaPQOVTA7q3TZhuSvuMQAAglQDOWYO9A91IrAOUJEyKVlqJlHE0vq5p5UXxzdPfMH/x6xNg==",
+      "dev": true,
+      "license": "MIT"
+    },
    "node_modules/debug": {
      "version": "4.4.0",
      "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.0.tgz",
@@ -1520,6 +1879,35 @@
        "url": "https://github.com/fb55/domutils?sponsor=1"
      }
    },
+    "node_modules/dot-prop": {
+      "version": "9.0.0",
+      "resolved": "https://registry.npmjs.org/dot-prop/-/dot-prop-9.0.0.tgz",
+      "integrity": "sha512-1gxPBJpI/pcjQhKgIU91II6Wkay+dLcN3M6rf2uwP8hRur3HtQXjVrdAK3sjC0piaEuxzMwjXChcETiJl47lAQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "type-fest": "^4.18.2"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/dot-prop/node_modules/type-fest": {
+      "version": "4.40.0",
+      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-4.40.0.tgz",
+      "integrity": "sha512-ABHZ2/tS2JkvH1PEjxFDTUWC8dB5OsIGZP4IFLhR293GqT5Y5qB1WwL2kMPYhQW9DVgVD8Hd7I8gjwPIf5GFkw==",
+      "dev": true,
+      "license": "(MIT OR CC0-1.0)",
+      "engines": {
+        "node": ">=16"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
    "node_modules/dunder-proto": {
      "version": "1.0.1",
      "resolved": "https://registry.npmjs.org/dunder-proto/-/dunder-proto-1.0.1.tgz",
@@ -1644,6 +2032,16 @@
        "node": ">= 0.4"
      }
    },
+    "node_modules/es-escape-html": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/es-escape-html/-/es-escape-html-0.1.1.tgz",
+      "integrity": "sha512-yUx1o+8RsG7UlszmYPtks+dm6Lho2m8lgHMOsLJQsFI0R8XwUJwiMhM1M4E/S8QLeGyf6MkDV/pWgjQ0tdTSyQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12.x"
+      }
+    },
    "node_modules/es-object-atoms": {
      "version": "1.1.1",
      "resolved": "https://registry.npmjs.org/es-object-atoms/-/es-object-atoms-1.1.1.tgz",
@@ -2093,6 +2491,19 @@
        "node": ">=0.10.0"
      }
    },
+    "node_modules/eta": {
+      "version": "3.5.0",
+      "resolved": "https://registry.npmjs.org/eta/-/eta-3.5.0.tgz",
+      "integrity": "sha512-e3x3FBvGzeCIHhF+zhK8FZA2vC5uFn6b4HJjegUbIWrDb4mJ7JjTGMJY9VGIbRVpmSwHopNiaJibhjIr+HfLug==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/eta-dev/eta?sponsor=1"
+      }
+    },
    "node_modules/eventemitter3": {
      "version": "4.0.7",
      "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-4.0.7.tgz",
@@ -2546,6 +2957,16 @@
        "he": "bin/he"
      }
    },
+    "node_modules/header-range-parser": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/header-range-parser/-/header-range-parser-1.1.3.tgz",
+      "integrity": "sha512-B9zCFt3jH8g09LR1vHL4pcAn8yMEtlSlOUdQemzHMRKMImNIhhszdeosYFfNW0WXKQtXIlWB+O4owHJKvEJYaA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12.22.0"
+      }
+    },
    "node_modules/hosted-git-info": {
      "version": "2.8.9",
      "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-2.8.9.tgz",
@@ -2629,6 +3050,13 @@
        "node": ">=12"
      }
    },
+    "node_modules/http-status-emojis": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/http-status-emojis/-/http-status-emojis-2.2.0.tgz",
+      "integrity": "sha512-ompKtgwpx8ff0hsbpIB7oE4ax1LXoHmftsHHStMELX56ivG3GhofTX8ZHWlUaFKfGjcGjw6G3rPk7dJRXMmbbg==",
+      "dev": true,
+      "license": "MIT"
+    },
    "node_modules/iconv-lite": {
      "version": "0.6.3",
      "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz",
@@ -2679,6 +3107,16 @@
        "node": ">=0.8.19"
      }
    },
+    "node_modules/inflection": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/inflection/-/inflection-3.0.2.tgz",
+      "integrity": "sha512-+Bg3+kg+J6JUWn8J6bzFmOWkTQ6L/NHfDRSYU+EVvuKHDxUDHAXgqixHfVlzuBQaPOTac8hn43aPhMNk6rMe3g==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18.0.0"
+      }
+    },
    "node_modules/inflight": {
      "version": "1.0.6",
      "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz",
@@ -2713,6 +3151,16 @@
        "node": ">= 0.4"
      }
    },
+    "node_modules/ipaddr.js": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-2.2.0.tgz",
+      "integrity": "sha512-Ag3wB2o37wslZS19hZqorUnrnzSkpOVy+IiiDEiTqNubEYpYuHWIf6K4psgN2ZWKExS4xhVCrRVfb/wfW8fWJA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 10"
+      }
+    },
    "node_modules/is-array-buffer": {
      "version": "3.0.5",
      "resolved": "https://registry.npmjs.org/is-array-buffer/-/is-array-buffer-3.0.5.tgz",
@@ -3146,6 +3594,60 @@
      "dev": true,
      "license": "MIT"
    },
+    "node_modules/json-server": {
+      "version": "1.0.0-beta.3",
+      "resolved": "https://registry.npmjs.org/json-server/-/json-server-1.0.0-beta.3.tgz",
+      "integrity": "sha512-DwE69Ep5ccwIJZBUIWEENC30Yj8bwr4Ax9W9VoIWAYnB8Sj4ReptscO8/DRHv/nXwVlmb3Bk73Ls86+VZdYkkA==",
+      "dev": true,
+      "license": "SEE LICENSE IN ./LICENSE",
+      "dependencies": {
+        "@tinyhttp/app": "^2.4.0",
+        "@tinyhttp/cors": "^2.0.1",
+        "@tinyhttp/logger": "^2.0.0",
+        "chalk": "^5.3.0",
+        "chokidar": "^4.0.1",
+        "dot-prop": "^9.0.0",
+        "eta": "^3.5.0",
+        "inflection": "^3.0.0",
+        "json5": "^2.2.3",
+        "lowdb": "^7.0.1",
+        "milliparsec": "^4.0.0",
+        "sirv": "^2.0.4",
+        "sort-on": "^6.1.0"
+      },
+      "bin": {
+        "json-server": "lib/bin.js"
+      },
+      "engines": {
+        "node": ">=18.3"
+      }
+    },
+    "node_modules/json-server/node_modules/chalk": {
+      "version": "5.4.1",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-5.4.1.tgz",
+      "integrity": "sha512-zgVZuo2WcZgfUEmsn6eO3kINexW8RAE4maiQ8QNs8CtpPCSyMiYsULR3HQYkm3w8FIA3SberyMJMSldGsW+U3w==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "^12.17.0 || ^14.13 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/chalk?sponsor=1"
+      }
+    },
+    "node_modules/json-server/node_modules/json5": {
+      "version": "2.2.3",
+      "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.3.tgz",
+      "integrity": "sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "json5": "lib/cli.js"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
    "node_modules/json-stable-stringify-without-jsonify": {
      "version": "1.0.1",
      "resolved": "https://registry.npmjs.org/json-stable-stringify-without-jsonify/-/json-stable-stringify-without-jsonify-1.0.1.tgz",
@@ -3229,6 +3731,22 @@
      "dev": true,
      "license": "MIT"
    },
+    "node_modules/lowdb": {
+      "version": "7.0.1",
+      "resolved": "https://registry.npmjs.org/lowdb/-/lowdb-7.0.1.tgz",
+      "integrity": "sha512-neJAj8GwF0e8EpycYIDFqEPcx9Qz4GUho20jWFR7YiFeXzF1YMLdxB36PypcTSPMA+4+LvgyMacYhlr18Zlymw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "steno": "^4.0.2"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/typicode"
+      }
+    },
    "node_modules/math-intrinsics": {
      "version": "1.1.0",
      "resolved": "https://registry.npmjs.org/math-intrinsics/-/math-intrinsics-1.1.0.tgz",
@@ -3248,6 +3766,16 @@
        "node": ">= 0.10.0"
      }
    },
+    "node_modules/milliparsec": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/milliparsec/-/milliparsec-4.0.0.tgz",
+      "integrity": "sha512-/wk9d4Z6/9ZvoEH/6BI4TrTCgmkpZPuSRN/6fI9aUHOfXdNTuj/VhLS7d+NqG26bi6L9YmGXutVYvWC8zQ0qtA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=20"
+      }
+    },
    "node_modules/mime": {
      "version": "1.6.0",
      "resolved": "https://registry.npmjs.org/mime/-/mime-1.6.0.tgz",
@@ -3297,6 +3825,25 @@
        "mkdirp": "bin/cmd.js"
      }
    },
+    "node_modules/moment": {
+      "version": "2.30.1",
+      "resolved": "https://registry.npmjs.org/moment/-/moment-2.30.1.tgz",
+      "integrity": "sha512-uEmtNhbDOrWPFS+hdjFCBfy9f2YoyzRpwcl+DqpC6taX21FzsTLQVbMV/W7PzNSX6x/bhC1zA3c2UQ5NzH6how==",
+      "license": "MIT",
+      "engines": {
+        "node": "*"
+      }
+    },
+    "node_modules/mrmime": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/mrmime/-/mrmime-2.0.1.tgz",
+      "integrity": "sha512-Y3wQdFg2Va6etvQ5I82yUhGdsKrcYox6p7FfL1LbK2J4V01F9TGlepTIhnK24t7koZibmg82KGglhA1XK5IsLQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      }
+    },
    "node_modules/ms": {
      "version": "2.1.3",
      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
@@ -3330,6 +3877,16 @@
      "dev": true,
      "license": "MIT"
    },
+    "node_modules/negotiator": {
+      "version": "0.6.4",
+      "resolved": "https://registry.npmjs.org/negotiator/-/negotiator-0.6.4.tgz",
+      "integrity": "sha512-myRT3DiWPHqho5PrJaIRyaMv2kgYf0mUVgBNOYMuCH5Ki1yEiQaf/ZJuQ62nvpc44wL5WDbTX7yGJi1Neevw8w==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
    "node_modules/nice-try": {
      "version": "1.0.5",
      "resolved": "https://registry.npmjs.org/nice-try/-/nice-try-1.0.5.tgz",
@@ -4000,6 +4557,20 @@
        "node": ">=4"
      }
    },
+    "node_modules/readdirp": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-4.1.2.tgz",
+      "integrity": "sha512-GDhwkLfywWL2s6vEjyhri+eXmfH6j1L7JE27WhqLeYzoh/A3DBaYGEj2H/HFZCn/kMfim73FXxEJTw06WtxQwg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 14.18.0"
+      },
+      "funding": {
+        "type": "individual",
+        "url": "https://paulmillr.com/funding/"
+      }
+    },
    "node_modules/reflect.getprototypeof": {
      "version": "1.0.10",
      "resolved": "https://registry.npmjs.org/reflect.getprototypeof/-/reflect.getprototypeof-1.0.10.tgz",
@@ -4044,6 +4615,16 @@
        "url": "https://github.com/sponsors/ljharb"
      }
    },
+    "node_modules/regexparam": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/regexparam/-/regexparam-2.0.2.tgz",
+      "integrity": "sha512-A1PeDEYMrkLrfyOwv2jwihXbo9qxdGD3atBYQA9JJgreAx8/7rC6IUkWOw2NQlOxLp2wL0ifQbh1HuidDfYA6w==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
    "node_modules/requires-port": {
      "version": "1.0.0",
      "resolved": "https://registry.npmjs.org/requires-port/-/requires-port-1.0.0.tgz",
@@ -4420,6 +5001,37 @@
        "url": "https://github.com/sponsors/ljharb"
      }
    },
+    "node_modules/sirv": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/sirv/-/sirv-2.0.4.tgz",
+      "integrity": "sha512-94Bdh3cC2PKrbgSOUqTiGPWVZeSiXfKOVZNJniWoqrWrRkB1CJzBU3NEbiTsPcYy1lDsANA/THzS+9WBiy5nfQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@polka/url": "^1.0.0-next.24",
+        "mrmime": "^2.0.0",
+        "totalist": "^3.0.0"
+      },
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/sort-on": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/sort-on/-/sort-on-6.1.0.tgz",
+      "integrity": "sha512-WTECP0nYNWO1n2g5bpsV0yZN9cBmZsF8ThHFbOqVN0HBFRoaQZLLEMvMmJlKHNPYQeVngeI5+jJzIfFqOIo1OA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "dot-prop": "^9.0.0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
    "node_modules/source-map-js": {
      "version": "1.2.1",
      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
@@ -4466,6 +5078,19 @@
      "dev": true,
      "license": "CC0-1.0"
    },
+    "node_modules/steno": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/steno/-/steno-4.0.2.tgz",
+      "integrity": "sha512-yhPIQXjrlt1xv7dyPQg2P17URmXbuM5pdGkpiMB3RenprfiBlvK415Lctfe0eshk90oA7/tNq7WEiMK8RSP39A==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/typicode"
+      }
+    },
    "node_modules/string.prototype.padend": {
      "version": "3.1.6",
      "resolved": "https://registry.npmjs.org/string.prototype.padend/-/string.prototype.padend-3.1.6.tgz",
@@ -4630,6 +5255,16 @@
      "dev": true,
      "license": "MIT"
    },
+    "node_modules/totalist": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/totalist/-/totalist-3.0.1.tgz",
+      "integrity": "sha512-sf4i37nQ2LBx4m3wB74y+ubopq6W/dIzXg0FDGjsYnZHVa1Da8FH853wlL2gtUhg+xJXjfk3kUZS3BRoQeoQBQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
    "node_modules/tsconfig-paths": {
      "version": "3.15.0",
      "resolved": "https://registry.npmjs.org/tsconfig-paths/-/tsconfig-paths-3.15.0.tgz",
--- a/package.json
+++ b/package.json
@@ -8,25 +8,29 @@
  },
  "type": "module",
  "scripts": {
-    "start": "vite",
-    "build": "vite build",
-    "serve": "http-server -p 3000 ./dist/",
-    "prod": "npm-run-all build serve",
-    "lint": "eslint …"
+      "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"
+    "bootstrap-icons" : "1.11.3",
+    "moment": "2.30.1"
  },
  "devDependencies": {
-    "http-server": "14.1.1",
-    "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"
+      "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"
  }
 }
--- a/style.css
+++ b/style.css
@@ -12,6 +12,10 @@ body{
    color: #DBD3D8;
 }

+.color2{
+    color: #91ff00;
+}
+
 .header{
    background-color: #223843;
 }
--- a/vite.config.js
+++ b/vite.config.js
@@ -11,6 +11,7 @@ export default defineConfig({
                education: resolve(__dirname, "education.html"),
                studentLive: resolve(__dirname, "studentLive.html"),
                contacts: resolve(__dirname, "contacts.html"),
+                news: resolve(__dirname, "news.html"),
            },
        },
    },
--- a/Отчёт3.docx
+++ b/Отчёт3.docx
--- a/Отчёт4.docx
+++ b/Отчёт4.docx
Author	SHA1	Message	Date
Рома Пермяков	e10fed8fc5	Отчёт	2025-05-07 10:28:26 +04:00
Рома Пермяков	bc8d5ca5b0	Всё работает	2025-04-17 18:42:23 +04:00
Рома Пермяков	e8309fb6cc	доработки	2025-04-17 12:41:55 +04:00
Рома Пермяков	f0cd1cd1f1	правки	2025-04-17 12:41:38 +04:00
Рома Пермяков	7cd561e86b	клиент	2025-04-16 22:13:40 +04:00
Рома Пермяков	5e341c99a2	форма	2025-04-16 22:13:31 +04:00
Рома Пермяков	3f1c93c1fb	расширения	2025-04-16 22:12:42 +04:00