четвертая лаба

.eslintignore

@@ -0,0 +1,2 @@
+node_modules
+dist

.eslintrc.json

@@ -0,0 +1,17 @@
+{
+    "env": {
+        "browser": true,
+        "es2021": true
+    },
+    "extends": ["airbnb-base", "prettier"],
+    "plugins": ["prettier", "html"],
+    "parserOptions": {
+        "ecmaVersion": 12,
+        "sourceType": "module"
+    },
+    "rules": {
+        "prettier/prettier": "error",
+        "no-console": "off",
+        "class-methods-use-this": "off"
+    }
+}

.gitignore

@@ -12,3 +12,4 @@
 # Built Visual Studio Code Extensions
 *.vsix
 
+node_modules

.prettierrc

@@ -0,0 +1,7 @@
+{
+    "tabWidth": 4,
+    "singleQuote": false,
+    "printWidth": 120,
+    "trailingComma": "es5",
+    "useTabs": false
+}

.vscode/extensions.json

@@ -0,0 +1,8 @@
+{
+    "recommendations": [
+        "usernamehw.errorlens",
+        "AndersEAndersen.html-class-suggestions",
+        "dbaeumer.vscode-eslint",
+        "esbenp.prettier-vscode"
+    ]
+}

.vscode/launch.json

@@ -0,0 +1,18 @@
+{
+    "configurations": [
+        {
+            "type": "chrome",
+            "name": "Debug",
+            "request": "launch",
+            "url": "http://localhost:5173"
+        },
+        {
+            "type": "node",
+            "name": "Start",
+            "request": "launch",
+            "runtimeExecutable": "npm",
+            "runtimeArgs": ["run-script", "start"],
+            "console": "integratedTerminal"
+        }
+    ]
+}

.vscode/settings.json

@@ -0,0 +1,39 @@
+{
+    "files.autoSave": "onFocusChange",
+    "files.eol": "\n",
+    "editor.detectIndentation": false,
+    "editor.formatOnType": false,
+    "editor.formatOnPaste": true,
+    "editor.formatOnSave": true,
+    "editor.tabSize": 4,
+    "editor.insertSpaces": true,
+    "editor.codeActionsOnSave": {
+        "source.organizeImports": "explicit",
+        "source.sortImports": "explicit"
+    },
+    "editor.snippetSuggestions": "bottom",
+    "debug.toolBarLocation": "commandCenter",
+    "debug.showVariableTypes": true,
+    "errorLens.gutterIconsEnabled": true,
+    "errorLens.messageEnabled": false,
+    "prettier.tabWidth": 4,
+    "prettier.singleQuote": false,
+    "prettier.printWidth": 120,
+    "prettier.trailingComma": "es5",
+    "prettier.useTabs": false,
+    "[json]": {
+        "editor.defaultFormatter": "esbenp.prettier-vscode"
+    },
+    "[jsonc]": {
+        "editor.defaultFormatter": "esbenp.prettier-vscode"
+    },
+    "[javascript]": {
+        "editor.defaultFormatter": "esbenp.prettier-vscode"
+    },
+    "[css]": {
+        "editor.defaultFormatter": "esbenp.prettier-vscode"
+    },
+    "[html]": {
+        "editor.defaultFormatter": "esbenp.prettier-vscode"
+    }
+}

components/api/client.js

@@ -0,0 +1,65 @@
+const URL = "http://localhost:3000/";
+
+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);
+        }
+        console.log(`${URL}${path}${pathVariables}${requestParams}`);
+        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 async function getAllItems(path, query = "") {
+    const url = `${URL}${path}?${query}`;
+
+    try {
+        const response = await fetch(url, {
+            headers: {
+                Accept: "application/json",
+            },
+        });
+
+        if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`);
+        return await response.json();
+    } catch (error) {
+        console.error(`Failed to fetch ${url}:`, error);
+        throw error;
+    }
+}
+
+export const getItem = (path, id) => makeRequest(path, null, id);
+
+export const createItem = async (path, data) => {
+    const response = await fetch(`${URL}${path}`, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify(data),
+    });
+
+    if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`);
+    // eslint-disable-next-line no-return-await
+    return await response.json();
+};
+
+export const updateItem = (path, id, data) => makeRequest(path, null, id, "PUT", data);
+
+export const deleteItem = (path, id) => makeRequest(path, null, id, "DELETE");

components/button-helper.js

@@ -0,0 +1,22 @@
+const icon = (name) => {
+    const inconElement = document.createElement("i");
+    inconElement.classList.add("bi", `bi-${name}`);
+    return inconElement;
+};
+
+const 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 const buttonText = (text, color) => button(text, null, color);
+
+export const buttonIcon = (iconName, color) => 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/select-helper.js

@@ -0,0 +1,26 @@
+export default function populateSelect(selectElement, items) {
+    if (!selectElement || !(selectElement instanceof HTMLSelectElement)) {
+        throw new Error("Invalid select element");
+    }
+
+    // Сохраняем статичные options
+    const staticOptions = Array.from(selectElement.options).filter((opt) => !opt.value);
+
+    // Создаем новый select
+    const newSelect = selectElement.cloneNode(false);
+
+    // Восстанавливаем статичные options
+    staticOptions.forEach((opt) => newSelect.add(opt.cloneNode(true)));
+
+    // Добавляем динамические items
+    if (Array.isArray(items)) {
+        items.forEach((item) => {
+            newSelect.add(new Option(item.name || item.title || `Item ${item.id}`, item.id));
+        });
+    }
+
+    // Заменяем элемент в DOM
+    selectElement.replaceWith(newSelect);
+
+    return newSelect;
+}

components/storage.js

@@ -0,0 +1,5 @@
+export const lsSave = (key, value) => {
+    localStorage.setItem(key, JSON.stringify(value));
+};
+
+export const lsReadArray = (key) => JSON.parse(localStorage.getItem(key)) || [];

components/table-helper.js

@@ -0,0 +1,92 @@
+import { buttonIcon } from "./button-helper";
+
+const deepGetByPath = (obj, path) => {
+    const keys = path.split(".");
+    let result = obj;
+
+    // eslint-disable-next-line no-restricted-syntax
+    for (const key of keys) {
+        if (!result) break;
+        result = result[key];
+    }
+
+    return result || "";
+};
+
+const headCell = (text) => {
+    const column = document.createElement("th");
+    column.setAttribute("scope", "col");
+    column.innerText = text;
+    return column;
+};
+
+const head = (cols) => {
+    if (!cols || !Array.isArray(cols) || cols.length === 0) {
+        throw new Error("Columns are not defined");
+    }
+    const headElement = document.createElement("thead");
+    const rowElement = document.createElement("tr");
+    cols.forEach((col) => rowElement.appendChild(headCell(col)));
+    headElement.appendChild(rowElement);
+    return headElement;
+};
+
+const bodyCell = (value) => {
+    const column = document.createElement("td");
+    column.innerText = value;
+    return column;
+};
+
+const bodyButtonCell = (item, icon, color, callback) => {
+    const button = buttonIcon(icon, color);
+    button.addEventListener("click", () => callback(item));
+    const column = document.createElement("td");
+    column.appendChild(button);
+    return column;
+};
+
+const bodyRow = (item, keys, callbacks) => {
+    const rowElement = document.createElement("tr");
+    if (callbacks?.star) {
+        const starIcon = item.star ? "star-fill" : "star";
+        rowElement.appendChild(bodyButtonCell(item, starIcon, "null", callbacks.star));
+    }
+    if (!keys || !Array.isArray(keys)) {
+        Object.values(item).forEach((value) => rowElement.appendChild(bodyCell(value)));
+    } else {
+        keys.forEach((key) => rowElement.appendChild(bodyCell(deepGetByPath(item, key))));
+    }
+    if (callbacks) {
+        if (callbacks.edit) {
+            rowElement.appendChild(bodyButtonCell(item, "pencil-fill", "warning", callbacks.edit));
+        }
+        if (callbacks.delete) {
+            rowElement.appendChild(bodyButtonCell(item, "trash-fill", "danger", callbacks.delete));
+        }
+    }
+    return rowElement;
+};
+
+const body = (data, keys, callbacks) => {
+    if (!data || !Array.isArray(data)) {
+        throw new Error("Data is not defined");
+    }
+    const bodyElement = document.createElement("tbody");
+    data.forEach((item) => bodyElement.appendChild(bodyRow(item, keys, callbacks)));
+    return bodyElement;
+};
+
+export const table = (cols) => {
+    const tableElement = document.createElement("table");
+    tableElement.classList.add("table", "table-hover", "table-sm");
+    tableElement.appendChild(head(cols));
+    return tableElement;
+};
+
+export const populateTable = (tableElement, data, keys, callbacks) => {
+    const tableBody = tableElement.querySelector("tbody");
+    if (tableBody) {
+        tableElement.removeChild(tableBody);
+    }
+    tableElement.appendChild(body(data, keys, callbacks));
+};

components/videos/form/controller.js

@@ -0,0 +1,87 @@
+import FormModel from "./model";
+import FormView from "./view";
+
+class FormElement extends HTMLElement {
+    constructor() {
+        super();
+
+        this.currentId = null;
+        console.log("Initializing FormElement...");
+
+        const saveCallback = this.save.bind(this);
+        const backCallback = this.back.bind(this);
+        this.view = new FormView(this, saveCallback, backCallback);
+        this.model = new FormModel();
+        console.log("Model initialized:", this.model);
+    }
+
+    async connectedCallback() {
+        const params = new URLSearchParams(document.location.search);
+        this.currentId = params.get("id") || null;
+
+        try {
+            // Загружаем справочники
+            await this.model.getPlaylists();
+            await this.model.getCategories();
+
+            if (!this.currentId) {
+                const nextId = await this.model.getNextId();
+                this.model.resetForNew();
+                this.model.element.id = nextId.toString();
+
+                // Устанавливаем первые доступные значения
+                if (this.model.playlists.length > 0) {
+                    this.model.element.playlistId = this.model.playlists[0].id;
+                }
+                if (this.model.categories.length > 0) {
+                    this.model.element.categoryId = this.model.categories[0].id;
+                }
+            }
+
+            this.view.render(this.model);
+
+            if (this.currentId) {
+                await this.model.get(this.currentId);
+            }
+        } catch (error) {
+            console.error("Error:", error);
+        }
+    }
+
+    async get(id) {
+        if (id) {
+            await this.model.get(id);
+        }
+        this.view.update(this.model); // Обновляем view в любом случае
+    }
+
+    async save() {
+        try {
+            // Проверка заполненности обязательных полей
+            if (!this.model.element.name || !this.model.element.playlistId || !this.model.element.categoryId) {
+                console.error("Заполните все обязательные поля");
+                return;
+            }
+
+            const result = !this.currentId ? await this.model.create() : await this.model.update();
+
+            if (!result || !result.id) {
+                throw new Error("Сервер не вернул созданную запись");
+            }
+
+            this.currentId = result.id;
+            console.log("Успешно сохранено:", result);
+
+            // Перенаправляем на страницу редактирования
+            window.location.href = `/pageForm?id=${result.id}`;
+        } catch (error) {
+            console.error("Ошибка сохранения:", error);
+        }
+    }
+
+    back() {
+        window.location.href = "/pageAccount"; // ?
+    }
+}
+
+customElements.define("videos-form", FormElement);

components/videos/form/model.js

@@ -0,0 +1,90 @@
+import { createItem, getAllItems, getItem, updateItem } from "../../api/client";
+
+const PATH = "video";
+
+export default class FormModel {
+    constructor() {
+        this.resetForNew();
+        this.playlists = [];
+        this.categories = [];
+        this.lastId = 0;
+    }
+
+    resetForNew() {
+        this.element = {
+            id: "",
+            name: "",
+            image: "",
+            description: "",
+            playlistId: "",
+            categoryId: "",
+        };
+    }
+
+    async getNextId() {
+        try {
+            const items = await getAllItems(PATH);
+            this.lastId = items.length > 0 ? Math.max(...items.map((item) => parseInt(item.id, 10))) + 1 : 1;
+            return this.lastId;
+        } catch (error) {
+            console.error("Error fetching last ID:", error);
+            return Date.now(); // Fallback
+        }
+    }
+
+    async getPlaylists() {
+        this.playlists = [];
+        this.playlists = await getAllItems("playlist");
+    }
+
+    async getCategories() {
+        this.categories = [];
+        this.categories = await getAllItems("category");
+    }
+
+    getFullData() {
+        return {
+            ...this.element,
+            playlistName: this.playlists.find((p) => p.id === this.element.playlistId)?.name || "",
+            categoryName: this.categories.find((c) => c.id === this.element.categoryId)?.name || "",
+        };
+    }
+
+    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("Объект для создания пуст");
+        }
+
+        // Убедимся, что передаем все обязательные поля
+        const dataToSend = {
+            ...this.element,
+            playlistId: this.element.playlistId || this.playlists[0]?.id,
+            categoryId: this.element.categoryId || this.categories[0]?.id,
+        };
+
+        this.element = await createItem(PATH, dataToSend);
+        return this.element; // Возвращаем обновленный элемент
+    }
+
+    async update() {
+        if (!this.element || Object.keys(this.element).length === 0) {
+            throw new Error("Item is null or empty!");
+        }
+        this.element = await updateItem(PATH, this.element.id, this.element);
+    }
+
+    getValue(attribute) {
+        return this.element[attribute] || "";
+    }
+
+    setValue(attribute, value) {
+        this.element[attribute] = value;
+    }
+}

components/videos/form/view.js

@@ -0,0 +1,140 @@
+import validation from "../../../js/validation";
+
+const getKey = (input) => input.getAttribute("id").replace("-", "_");
+
+export default class FormView {
+    constructor(root, saveCallback, backCallback) {
+        this.root = root;
+        this.saveCallback = saveCallback;
+        this.backCallback = backCallback;
+        this.playlistsSelector = null; // Явная инициализация
+        this.categoriesSelector = null;
+        this.inputs = null;
+    }
+
+    render(model) {
+        this.root.innerHTML = ""; // Очищаем перед рендером
+        // Клонируем шаблон
+        const template = document.getElementById("videos-form-template");
+        if (!template) {
+            console.error("Template not found!");
+            return;
+        }
+        const content = template.content.cloneNode(true);
+        this.root.appendChild(content);
+        console.log("Model data when rendering:", {
+            playlists: model.playlists,
+            categories: model.categories,
+            element: model.element,
+        });
+
+        // Инициализируем элементы
+        this.form = this.root.querySelector("form");
+        this.inputs = this.root.querySelectorAll("input");
+        this.currentId = this.root.querySelector("id");
+        this.playlistsSelector = this.root.querySelector("#playlist");
+        this.categoriesSelector = this.root.querySelector("#category");
+        this.backButton = this.root.querySelector("#btn-back");
+
+        // Добавляем обработчики только если элементы существуют
+        if (this.form) {
+            this.form.addEventListener("submit", async (e) => {
+                e.preventDefault();
+                if (this.form.checkValidity()) {
+                    await this.saveCallback();
+                }
+            });
+        }
+
+        if (this.inputs) {
+            this.inputs.forEach((input) => {
+                input.addEventListener("change", (event) => {
+                    model.setValue(getKey(event.target), event.target.value);
+                });
+            });
+        }
+
+        if (this.playlistsSelector && model.playlists.length > 0) {
+            this.playlistsSelector.value = model.element.playlistId || model.playlists[0].id;
+        }
+
+        if (this.playlistsSelector) {
+            this.playlistsSelector.addEventListener("change", (event) => {
+                model.setValue("playlistId", event.target.value);
+            });
+            this.updateSelect(this.playlistsSelector, model.playlists, model.element.playlistId);
+        }
+
+        if (this.categoriesSelector) {
+            this.categoriesSelector.addEventListener("change", (event) => {
+                model.setValue("categoryId", event.target.value);
+            });
+            this.updateSelect(this.categoriesSelector, model.categories, model.element.categoryId);
+        }
+
+        if (this.backButton) {
+            this.backButton.addEventListener("click", this.backCallback);
+        }
+
+        validation();
+
+        // Первоначальное заполнение данных
+        this.update(model);
+    }
+
+    update(model) {
+        if (!model || !model.element) return;
+
+        // Обновляем inputs
+        if (this.inputs) {
+            this.inputs.forEach((input) => {
+                const key = getKey(input);
+                // eslint-disable-next-line no-param-reassign
+                input.value = model.getValue(key) || "";
+            });
+        }
+
+        // Принудительно обновляем select'ы
+        if (this.playlistsSelector) {
+            this.playlistsSelector.value = model.element.playlistId || "";
+        }
+        if (this.categoriesSelector) {
+            this.categoriesSelector.value = model.element.categoryId || "";
+        }
+    }
+
+    updateSelect(selectElement, items, selectedValue) {
+        if (!selectElement) return;
+
+        // Создаем новый select
+        const newSelect = selectElement.cloneNode(false);
+
+        // Сохраняем статичные options (с пустым value)
+        const staticOptions = Array.from(selectElement.options).filter((opt) => !opt.value);
+
+        // Добавляем статичные options
+        staticOptions.forEach((opt) => newSelect.add(opt.cloneNode(true)));
+
+        // Добавляем динамические items
+        if (Array.isArray(items)) {
+            items.forEach((item) => {
+                newSelect.add(new Option(item.name, item.id));
+            });
+        }
+
+        // Устанавливаем выбранное значение
+        if (selectedValue) {
+            newSelect.value = selectedValue;
+        }
+
+        // Заменяем элемент в DOM
+        selectElement.replaceWith(newSelect);
+
+        // Обновляем ссылку в классе, если это основной select
+        if (selectElement === this.playlistsSelector) {
+            this.playlistsSelector = newSelect;
+        } else if (selectElement === this.categoriesSelector) {
+            this.categoriesSelector = newSelect;
+        }
+    }
+}

components/videos/table/controller.js

@@ -0,0 +1,41 @@
+import TableModel from "./model";
+import TableView from "./view";
+
+class TableElement extends HTMLElement {
+    constructor() {
+        super();
+        const toggleStarCallback = this.toggleStar.bind(this);
+        const editCallback = this.editVideo.bind(this);
+        const deleteCallback = this.deleteVideo.bind(this);
+        this.view = new TableView(this, toggleStarCallback, editCallback, deleteCallback);
+        this.model = new TableModel();
+    }
+
+    connectedCallback() {
+        this.view.render();
+        this.getAllVideos();
+    }
+
+    async getAllVideos() {
+        await this.model.getAll();
+        this.view.update(this.model);
+    }
+
+    editVideo(item) {
+        window.location.href = `/pageForm?id=${item.id}`; // ?
+    }
+
+    toggleStar(item) {
+        this.model.toggleStar(item);
+        this.view.update(this.model);
+    }
+
+    async deleteVideo(item) {
+        if (await this.view.deleteQuestion(item)) {
+            await this.model.delete(item);
+            this.getAllVideos();
+        }
+    }
+}
+
+customElements.define("videos-table", TableElement);

components/videos/table/model.js

@@ -0,0 +1,46 @@
+import { deleteItem, getAllItems } from "../../api/client";
+import { lsReadArray, lsSave } from "../../storage";
+
+const PATH = "video";
+const STARS_KEY = "video-stars";
+
+export default class TableModel {
+    constructor() {
+        this.data = [];
+        this.stars = lsReadArray(STARS_KEY);
+    }
+
+    async getAll() {
+        try {
+            const videos = await getAllItems("video");
+            const playlists = await getAllItems("playlist");
+            const categories = await getAllItems("category");
+
+            this.data = videos.map((video) => ({
+                ...video,
+                playlistName: playlists.find((p) => p.id === video.playlistId)?.name || "Не указан",
+                categoryName: categories.find((c) => c.id === video.categoryId)?.name || "Не указан",
+            }));
+        } catch (error) {
+            console.error("Failed to load videos:", error);
+            this.data = [];
+        }
+    }
+
+    async delete(item) {
+        await deleteItem(PATH, item.id);
+        this.stars = this.stars.filter((element) => element !== item.id);
+        lsSave(STARS_KEY, this.stars);
+    }
+
+    toggleStar(item) {
+        const current = item;
+        current.star = !current.star;
+        if (current.star) {
+            this.stars.push(current.id);
+        } else {
+            this.stars = this.stars.filter((element) => element !== current.id);
+        }
+        lsSave(STARS_KEY, this.stars);
+    }
+}

components/videos/table/view.js

@@ -0,0 +1,47 @@
+import showQuestion from "../../modal-helper";
+import { populateTable, table } from "../../table-helper";
+
+export default class TableView {
+    constructor(root, toggleStarCallback, editCallback, deleteCallback) {
+        this.root = root;
+        this.toggleStarCallback = toggleStarCallback;
+        this.editCallback = editCallback;
+        this.deleteCallback = deleteCallback;
+    }
+
+    render() {
+        const columns = ["", "№", "Название", "Превью", "Описание", "Плейлист", "Категория", "Группа", "", ""];
+        this.keys = ["id", "name", "image", "description", "playlistName", "categoryName"];
+        this.callbacks = {
+            star: this.toggleStarCallback,
+            edit: this.editCallback,
+            delete: this.deleteCallback,
+        };
+        this.tableElement = table(columns);
+
+        const tableWrapper = document.createElement("div");
+        tableWrapper.classList.add("table-responsive");
+        tableWrapper.appendChild(this.tableElement);
+        this.root.appendChild(tableWrapper);
+    }
+
+    update(model) {
+        const displayData =
+            model.data.length > 0
+                ? model.data
+                : [
+                      {
+                          id: "Нет данных",
+                          name: "",
+                          playlistName: "",
+                          categoryName: "",
+                      },
+                  ];
+
+        populateTable(this.tableElement, displayData, this.keys, this.callbacks);
+    }
+
+    deleteQuestion(item = null) {
+        return showQuestion("Удаление", "Удалить", `Удалить элемент '${item.id}'?`);
+    }
+}

database/data.json

@@ -0,0 +1,72 @@
+{
+  "video": [
+    {
+      "id": "1",
+      "name": "new_vid",
+      "image": "adfefwefw",
+      "description": "frefeerfe",
+      "playlistId": "1",
+      "categoryId": "1"
+    },
+    {
+      "id": "2",
+      "name": "new_vid2",
+      "image": "fdsdvrvr",
+      "description": "vvgtgtg",
+      "playlistId": "0",
+      "categoryId": "1"
+    },
+    {
+      "id": "3",
+      "name": "new_vid3",
+      "image": "gergreg",
+      "description": "wsfrf3",
+      "playlistId": "3",
+      "categoryId": "2"
+    },
+    {
+      "id": "4",
+      "name": "NEW VIDEO",
+      "image": "preview",
+      "description": "da",
+      "playlistId": "2",
+      "categoryId": "3"
+    },
+    {
+      "id": "5",
+      "name": "1234124",
+      "image": "4аывацу",
+      "description": "3213133",
+      "playlistId": "1",
+      "categoryId": "1"
+    }
+  ],
+  "playlist": [
+    {
+      "id": "1",
+      "name": "Very good videos"
+    },
+    {
+      "id": "2",
+      "name": "baskemtbal"
+    },
+    {
+      "id": "3",
+      "name": "How to make a nuclear bomb at home! Guide"
+    }
+  ],
+  "category": [
+    {
+      "id": "1",
+      "name": "jst vibing"
+    },
+    {
+      "id": "2",
+      "name": "letsplay"
+    },
+    {
+      "id": "3",
+      "name": "cooking"
+    }
+  ]
+}

dist/assets/client-BDIKmhNV.js

@@ -0,0 +1 @@
+(function(){const r=document.createElement("link").relList;if(r&&r.supports&&r.supports("modulepreload"))return;for(const e of document.querySelectorAll('link[rel="modulepreload"]'))n(e);new MutationObserver(e=>{for(const t of e)if(t.type==="childList")for(const c of t.addedNodes)c.tagName==="LINK"&&c.rel==="modulepreload"&&n(c)}).observe(document,{childList:!0,subtree:!0});function s(e){const t={};return e.integrity&&(t.integrity=e.integrity),e.referrerPolicy&&(t.referrerPolicy=e.referrerPolicy),e.crossOrigin==="use-credentials"?t.credentials="include":e.crossOrigin==="anonymous"?t.credentials="omit":t.credentials="same-origin",t}function n(e){if(e.ep)return;e.ep=!0;const t=s(e);fetch(e.href,t)}})();const i="http://localhost:3000/",u=async(o,r,s,n="GET",e=null)=>{try{const t=r?`?${r}`:"",c=s?`/${s}`:"",l={method:n};(n==="POST"||n==="PUT")&&e&&(l.headers={"Content-Type":"application/json;charset=utf-8"},l.body=JSON.stringify(e)),console.log(`${i}${o}${c}${t}`);const a=await fetch(`${i}${o}${c}${t}`,l);if(!a.ok)throw new Error(`Response status: ${a==null?void 0:a.status}`);const f=await a.json();return console.debug(o,f),f}catch(t){throw t instanceof SyntaxError?new Error("There was a SyntaxError",t):new Error("There was an error",t)}};async function p(o,r=""){const s=`${i}${o}?${r}`;try{const n=await fetch(s,{headers:{Accept:"application/json"}});if(!n.ok)throw new Error(`HTTP error! status: ${n.status}`);return await n.json()}catch(n){throw console.error(`Failed to fetch ${s}:`,n),n}}const h=(o,r)=>u(o,null,r),y=async(o,r)=>{const s=await fetch(`${i}${o}`,{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify(r)});if(!s.ok)throw new Error(`HTTP error! status: ${s.status}`);return s.json()},w=(o,r,s)=>u(o,null,r,"PUT",s),$=(o,r)=>u(o,null,r,"DELETE");export{h as a,y as c,$ as d,p as g,w as u};

dist/assets/styleStreamingService-CUHvxLFI.css

@@ -0,0 +1 @@
+body{font-family:Helvetica,Arial,sans-serif;font-size:18px;background-color:#ade8f4}h1{font-size:1.5em;margin:20px auto}h2{font-size:1em;margin:20px auto;text-align:left}@media only screen and (max-width: 400px){h1{font-size:1em}h2,h3,p{text-align:center}.navbar{flex-direction:column;align-self:center;row-gap:5px}.navbar a{height:30px}.dropdown:hover .features-menu{height:max-content}.features-item a{height:40px;text-align:start}.avatar{justify-content:center}.avatar img{width:200px;height:auto}.photo-grid,.subButtons{justify-content:center}}@media only screen and (min-width: 401px) and (max-width: 960px){body{justify-content:center}}.button{color:#081c15;background-color:#90e0ef;font-weight:700;padding:10px 5px;text-align:center;border:2px solid #5d6063;border-radius:5px;width:150px;box-sizing:border-box;margin:10px}.blue-button{background-color:#0077b6}.button:hover{background:#48cae4}.blue-button:hover{background:#016296}header{background-color:#00b4d8;color:#081c15;box-shadow:0 4px 10px #0003}.header-logo img{width:50px;height:auto;margin:5px}.navbar a{display:flex;text-decoration:none;align-items:center;justify-content:center;padding:8px 15px;width:fit-content;color:#081c15;font-weight:700;background:#90e0ef;border-radius:5px}.navbar a:hover{background:#48cae4}.dropdown{width:max-content}.dropdown>span{z-index:2;position:relative;cursor:pointer}.dropdown:hover .features-menu{display:flex;flex-direction:column;background:#90e0ef;border-radius:5px;padding:5px;position:absolute;z-index:1}.features-menu{display:none}.features-item:hover{border-radius:5px;background:#48cae4}.photo-grid img{width:256px;height:200px}.photo-grid-item{height:200px;background-color:#5995da;align-items:center;justify-self:center;border:2px solid #fff}.footer{background-color:#023047;text-align:center}.company-name{color:#ade8f4}

dist/pageAccount.html

@@ -0,0 +1,60 @@
+<!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>
+        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.5/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-SgOJa3DmI69IUzQ2PVdRZhwQ+dy64/BUtbMJw1MZ8t5HZApcHrRKUc4W0kG879m7" crossorigin="anonymous">
+        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css">
+
+      <script type="module" crossorigin src="/assets/page3-C-EbPu6q.js"></script>
+      <link rel="modulepreload" crossorigin href="/assets/client-BDIKmhNV.js">
+      <link rel="stylesheet" crossorigin href="/assets/styleStreamingService-CUHvxLFI.css">
+    </head>
+    <body class="min-vh-100 d-flex flex-column m-0 p-0">
+        <header class="d-flex align-items-center justify-content-between position-sticky h-60 p-3">
+            <div class="header-logo d-flex align-items-center g-3">
+                <a href="pageMain.html"><img src="/assets/%D0%9A%D0%90%D0%99%D0%A4-Dbw7IVze.jpg" alt="Логотип"/></a>
+                <h1>НАЗВАНИЕ СЕРВИСА</h1>
+            </div>
+            <nav class="navbar d-flex align-items-center justify-content-center me-3 g-3 column-gap-2">
+                <a href="pageCategories.html">Категории</a>
+                <nav class="dropdown position-relative">
+                    <span><a>Мой аккаунт ▾</a></span>
+                    <nav class="features-menu">
+                        <nav class="features-item"><a href="pageAccount.html">Настройки</a></nav>
+                        <nav class="features-item"><a href="pageSubscriptions.html">Подписки</a></nav>
+                        <nav class="features-item"><a href="pageSavedStreams.html">Сохраненные трансляции</a></nav>
+                    </nav>
+                </nav>
+            </nav>
+        </header>
+        <div class="content flex-grow-1 p-3 px-4">
+            <h2><em>Ваш никнейм</em> <i class="bi bi-patch-check-fill"></i></h2>
+            <div class="avatar d-flex"><img src="/assets/derzko-pSp-01RX.webp" alt="derzko" /></div>
+            <p>ПОЛ МИЛЛИОНА ПОДПИЩИКОВ</p>
+            <div class="buttons d-flex align-items-center gap-3">
+                <div class="button">Выйти из аккаунта</div>
+                <div class="button">Сменить пароль</div>
+            </div>
+            <div class="mb-2">
+                <a class="btn btn-primary" href="/pageForm"
+                    ><i class="bi bi-plus-circle-fill me-2"></i>Создать новую запись</a
+                >
+            </div>
+            <videos-table></videos-table>
+        </div>
+        <div class="footer overflow-hidden flex-shrink-1 h-75 p-0 px-4">
+            <div class="footer-content d-flex justify-content-between align-items-center">
+                <div class="company-name flex-grow-1">RBCS CORP. <i class="bi bi-c-circle"></i></div>
+                <div class="footer-images d-flex gap-3 p-3">
+                    <a href="https://vk.com/sheym_not_shame" target="_blank">
+                        <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAACXBIWXMAAAsTAAALEwEAmpwYAAAEcUlEQVR4nO2aX2wURRzH71GNSigSd5BAYmIwMTFGjfHVvvhm5E80QV980KqRRExnripwtgLyYDCaaJACUSFYQVBfjOFBia31wEM6v7tem0Na6l1pKdw1pbQ0ba9jfnu0ureztzO7e3s+3Df5JZd2Ojefnd+/mW0kUldddYUm8lbiHqO5ZyOhsJNQOE4YP00oJEzDzwyO4e8MltywqiW9IvJ/UsOWzN1GtOc1g/FuQnmRMBBKRnnRoPw3g0ETzlEzgOXRxLLS04Vx5cU7mEGhQBhvDR3oXgbPEcov+wWwATEYNhjfVHUAEkvcYVB+KGgACVD76q3dt1cFYk0LLEefrjYEWYohOIPJI1AIzDCEQio0CLZkydVbUw2BuRNhEK8BhCi5Ge8OxM3CiAlXGAr7/WenGkOQf3dmk/dCx2C41gBkyfgI1i5tELPNqPniwWqUv6cFgeRBVOzA3YtCQav6Y+8km+jFQ4Ni548jFlv7TlL6pZsPWse+8fXfjgtkJ3KWsRv3XawQK9CkDoINoGSS9s6rolyP7uqTfuGRM3nLuLODU9JxT3zQLxYWrHO+ftQZ2mC8S6P4ybvYPT+N2kAa92Z8gRzoumYZNz1bFOtivZXipKhU8THNOU1CT+RsIC8cHPQM8tTejJidt27HV/G8e6yw5AZf2QoXXS7cJS8gD2xPib6Rm5YxkzNF8cj7aYXA560qIMedJngw1iuKZf58Kj2hDYKuEx+4YXsobx7LqmUwyr9RcC34tdIk/aPWpzgztyD1aRnIfVEQL315SWQLszaIT34eU4MogfziDkLhz0qTfPG7NThR0ZM5V5DrN4viyvU5IRNmQ2UIZqbgc75Bnv74gm0hoxOz4v53UxVBZMKY2NLhnGqJLxAX10I7n522LQrTqC5IYWpeNH+bM11OC4YquJZ5ZeMyERYsmbb9MKwFsqjOC5Ni3Y5ejR3hHYE0i6uiYAavTEfPFsRDrWkbSOLSlOj4oyDyN+Rxgqn4sd3yLsFT+jUv2BQme3JPv5iYnpcuCotc+YL33wroNW8nRcvJYenfZq7MqO1MM6z31aKUGzZ32FKoaBHkvw9i4OqMbdz3PeNu8VFUPsfr3JY889lfYmxyThsE7fHdfeKaxNU2O7Q9ZnxQ6FSCKIHAqzpZ5OG2tPju/Liti3UDQXv58JBtbGJoqsKOwCt6x1zzGlMvLTZ+lDGbPkyrqiBoPZJ03ijpqg3G8yto310RHWFm0AVZNKwLCIWHqQ9PjYpPT4+JpiNDjuPRlQ7H8xZ7vn1A5lY7IrpCcoNBzitM0GZQyK6Mpe6MeFGls0noIEzhDFIRhvIDtYYglO+L+BVeVzqd4cPZCd61NjZ4m2+QEkyqAS+Uw98JgMAusS2vFRjvChEkHvhrBaubQXsIEJ8H5k5u2awaqdmgkPWdnbzUGbyL9dIBSAI6j8Vupdc6EYRu3do3mfGj/XoaOrF30m47qi0zuzXDekJ5G17Z4JF06R8GzM/mz9oIhWcDz0Z11VVXpJL+Aemdmrez0du5AAAAAElFTkSuQmCC" alt="vk"/>
+                    </a>
+                    <a href="https://t.me/sheymuh" target="_blank">
+                        <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAACXBIWXMAAAsTAAALEwEAmpwYAAAEnklEQVR4nO2aS2wbRRjHfae8xOuOqnbXalMkJLiAhDggBOVQaBFSpCKOoCJVnAoSQoKm0AMSJw6gIh4ioliigXbGjqzmUSVxaF4YE+okjpO6TrBD0zpOZuxde/dDM7YTO3bWM/auzcF/6bvsrmf3N99jvp21y9VRRx21TF39m4+6vfSEgkmPgqhHwWRYxXSSGyJDxWM97Jr9OP2I6/+kw1dSD7oxeVdB9LqKiKliCkKGiKlgOq4gcurIpbsPtBVAReQzFZO08MPvDbWhYnKu5UAKoicVRJNNA+wyBdOEG9NuxwEO9sG9KiK9dgNUASHyg3sQ9jkCcejXzcdURKechlB3bJIVD/shMJlrIQQUjMzZBsPCSUF0uvUQdNsztoQZi9c2QgDPGUx+ahKCnmw3hFq0hqsZWyecKLG17IWhDJwJavDM1YyFV2iioXWmsNg59/BdPgrvzWgQuG2ACQWdCWr1QqxH2huF1dZ+gBeHM/D1Yg7WtdLj7+jYSNb694impLzCeic7H/6Ij8LpaQ3GymZ/t3QDuJfqjaVg8o4wCG8AbQB4yWL2NV2vgAqlDLFxEQ0IQbAFSKqLlZz9XD4PscQaBOejoOm57eMXYzlBEGIe+C39cF0Q9Qp9vRGAl4uzf1ffK3gA1jfSEFpYgj/no7BFMxXnPgrpwvdyY3K8flhh0iM64BNls28lmsnC/M04zIQj8FdkCWhWq7rmxGidRMflRj4WyQ9PvYGOXivMfspi9pnyeQPiyX/hj3CEQ8wuLkNW06uvM4FPiioIomByUQCEXKv148NeCh+GdJ6UIiqFEQNgdiMaAz23kxPlCqcFEx1v58mgiEdqNohfzFXPZC2RsjAq2dzyLZ7ke+mXeF4ShE41DMLaCH8iD1s56zAqB2C2EFsBw7D24tlZ3QkQUjO0SnbIS+H4aBY+D+s8yTWjOoxKFo3/A6ZpnUdM3YGsI6HlkRn02FC6CoDZrcRa/TgEAMMEeLJfrtQrQskuUX5Ldjm0XAGxsnYbRBXZNOW8gQXLL9s8kx34g7HkNkRfcBkGltaFQS6vSCY6pnAQkdccaVGe86dhugjy3cQSXBoYgx9nYkIg529IJjomhlCLUggvOi47S55gjINcCCxA38Aot68CEd7VWunNcelEHxOC4CCInJIFOT1SKL3fjMxyCM9AAF7xJXlFqtX9MrGjT/kzsh55WxiEvbzIvlg93b8FU+FF6B2e4BBHfcmKNWhhs9o1N4lkoiOaetx/536XjNherKxXvpyMw8+7IErGSuzVROXq7l2VS3QFkbMuWe3HcJ+K6KrMjZ71bcDz3juWi+mF6E5r8Onf4omuNLr5wMS2YGS9ImJv/Z6F94Mab0QlQN5wNSMFk++dgJHLDdLbFAT3yiDsK351aguEguj1rn64x2WH+CLZjk1sRMK2f6JT/BsPsR2MFoJM2P5ZoTzMWrKpjci3toWTJRCm3awc2g9AV5uuTrJiNZ23/HZsrSKaUhD5RHrVtlPs5mwbs5A/xBAHIAZrAFnv1FaAWmLtNXtXYLPL3uLYK2nZHwYG2TF+zkteZcWj5iAdddSRywn9B9E5uZlJrzFcAAAAAElFTkSuQmCC" alt="tg"/>
+                    </a>
+                </div>
+            </div>
+        </div>
+

dist/pageCategories.html

@@ -0,0 +1,52 @@
+<!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>
+        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.5/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-SgOJa3DmI69IUzQ2PVdRZhwQ+dy64/BUtbMJw1MZ8t5HZApcHrRKUc4W0kG879m7" crossorigin="anonymous">
+        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css">
+
+      <link rel="stylesheet" crossorigin href="/assets/styleStreamingService-CUHvxLFI.css">
+    </head>
+    <body class="min-vh-100 d-flex flex-column m-0 p-0">
+        <header class="d-flex align-items-center justify-content-between position-sticky h-60 p-3">
+            <div class="header-logo d-flex align-items-center g-3">
+                <a href="pageMain.html"><img src="/assets/%D0%9A%D0%90%D0%99%D0%A4-Dbw7IVze.jpg" alt="Логотип"/></a>
+                <h1>НАЗВАНИЕ СЕРВИСА</h1>
+            </div>
+            <nav class="navbar d-flex align-items-center justify-content-center me-3 g-3 column-gap-2">
+                <a href="pageCategories.html">Категории</a>
+                <nav class="dropdown position-relative">
+                    <span><a>Мой аккаунт ▾</a></span>
+                    <nav class="features-menu">
+                        <nav class="features-item"><a href="pageAccount.html">Настройки</a></nav>
+                        <nav class="features-item"><a href="pageSubscriptions.html">Подписки</a></nav>
+                        <nav class="features-item"><a href="pageSavedStreams.html">Сохраненные трансляции</a></nav>
+                    </nav>
+                </nav>
+            </nav>
+        </header>
+        <div class="content flex-grow-1 p-3 px-4">
+            <h2>Популярные категории</h2>
+            <ol>
+                <li>Общение</li>
+                <li>Казик</li>
+                <li>Стрелялки</li>
+                <li>пупупу</li>
+            </ol>
+        </div>
+        <div class="footer overflow-hidden flex-shrink-1 h-75 p-0 px-4">
+            <div class="footer-content d-flex justify-content-between align-items-center">
+                <div class="company-name flex-grow-1">RBCS CORP. <i class="bi bi-c-circle"></i></div>
+                <div class="footer-images d-flex gap-3 p-3">
+                    <a href="https://vk.com/sheym_not_shame" target="_blank">
+                        <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAACXBIWXMAAAsTAAALEwEAmpwYAAAEcUlEQVR4nO2aX2wURRzH71GNSigSd5BAYmIwMTFGjfHVvvhm5E80QV980KqRRExnripwtgLyYDCaaJACUSFYQVBfjOFBia31wEM6v7tem0Na6l1pKdw1pbQ0ba9jfnu0ureztzO7e3s+3Df5JZd2Ojefnd+/mW0kUldddYUm8lbiHqO5ZyOhsJNQOE4YP00oJEzDzwyO4e8MltywqiW9IvJ/UsOWzN1GtOc1g/FuQnmRMBBKRnnRoPw3g0ETzlEzgOXRxLLS04Vx5cU7mEGhQBhvDR3oXgbPEcov+wWwATEYNhjfVHUAEkvcYVB+KGgACVD76q3dt1cFYk0LLEefrjYEWYohOIPJI1AIzDCEQio0CLZkydVbUw2BuRNhEK8BhCi5Ge8OxM3CiAlXGAr7/WenGkOQf3dmk/dCx2C41gBkyfgI1i5tELPNqPniwWqUv6cFgeRBVOzA3YtCQav6Y+8km+jFQ4Ni548jFlv7TlL6pZsPWse+8fXfjgtkJ3KWsRv3XawQK9CkDoINoGSS9s6rolyP7uqTfuGRM3nLuLODU9JxT3zQLxYWrHO+ftQZ2mC8S6P4ybvYPT+N2kAa92Z8gRzoumYZNz1bFOtivZXipKhU8THNOU1CT+RsIC8cHPQM8tTejJidt27HV/G8e6yw5AZf2QoXXS7cJS8gD2xPib6Rm5YxkzNF8cj7aYXA560qIMedJngw1iuKZf58Kj2hDYKuEx+4YXsobx7LqmUwyr9RcC34tdIk/aPWpzgztyD1aRnIfVEQL315SWQLszaIT34eU4MogfziDkLhz0qTfPG7NThR0ZM5V5DrN4viyvU5IRNmQ2UIZqbgc75Bnv74gm0hoxOz4v53UxVBZMKY2NLhnGqJLxAX10I7n522LQrTqC5IYWpeNH+bM11OC4YquJZ5ZeMyERYsmbb9MKwFsqjOC5Ni3Y5ejR3hHYE0i6uiYAavTEfPFsRDrWkbSOLSlOj4oyDyN+Rxgqn4sd3yLsFT+jUv2BQme3JPv5iYnpcuCotc+YL33wroNW8nRcvJYenfZq7MqO1MM6z31aKUGzZ32FKoaBHkvw9i4OqMbdz3PeNu8VFUPsfr3JY889lfYmxyThsE7fHdfeKaxNU2O7Q9ZnxQ6FSCKIHAqzpZ5OG2tPju/Liti3UDQXv58JBtbGJoqsKOwCt6x1zzGlMvLTZ+lDGbPkyrqiBoPZJ03ijpqg3G8yto310RHWFm0AVZNKwLCIWHqQ9PjYpPT4+JpiNDjuPRlQ7H8xZ7vn1A5lY7IrpCcoNBzitM0GZQyK6Mpe6MeFGls0noIEzhDFIRhvIDtYYglO+L+BVeVzqd4cPZCd61NjZ4m2+QEkyqAS+Uw98JgMAusS2vFRjvChEkHvhrBaubQXsIEJ8H5k5u2awaqdmgkPWdnbzUGbyL9dIBSAI6j8Vupdc6EYRu3do3mfGj/XoaOrF30m47qi0zuzXDekJ5G17Z4JF06R8GzM/mz9oIhWcDz0Z11VVXpJL+Aemdmrez0du5AAAAAElFTkSuQmCC" alt="vk"/>
+                    </a>
+                    <a href="https://t.me/sheymuh" target="_blank">
+                        <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAACXBIWXMAAAsTAAALEwEAmpwYAAAEnklEQVR4nO2aS2wbRRjHfae8xOuOqnbXalMkJLiAhDggBOVQaBFSpCKOoCJVnAoSQoKm0AMSJw6gIh4ioliigXbGjqzmUSVxaF4YE+okjpO6TrBD0zpOZuxde/dDM7YTO3bWM/auzcF/6bvsrmf3N99jvp21y9VRRx21TF39m4+6vfSEgkmPgqhHwWRYxXSSGyJDxWM97Jr9OP2I6/+kw1dSD7oxeVdB9LqKiKliCkKGiKlgOq4gcurIpbsPtBVAReQzFZO08MPvDbWhYnKu5UAKoicVRJNNA+wyBdOEG9NuxwEO9sG9KiK9dgNUASHyg3sQ9jkCcejXzcdURKechlB3bJIVD/shMJlrIQQUjMzZBsPCSUF0uvUQdNsztoQZi9c2QgDPGUx+ahKCnmw3hFq0hqsZWyecKLG17IWhDJwJavDM1YyFV2iioXWmsNg59/BdPgrvzWgQuG2ACQWdCWr1QqxH2huF1dZ+gBeHM/D1Yg7WtdLj7+jYSNb694impLzCeic7H/6Ij8LpaQ3GymZ/t3QDuJfqjaVg8o4wCG8AbQB4yWL2NV2vgAqlDLFxEQ0IQbAFSKqLlZz9XD4PscQaBOejoOm57eMXYzlBEGIe+C39cF0Q9Qp9vRGAl4uzf1ffK3gA1jfSEFpYgj/no7BFMxXnPgrpwvdyY3K8flhh0iM64BNls28lmsnC/M04zIQj8FdkCWhWq7rmxGidRMflRj4WyQ9PvYGOXivMfspi9pnyeQPiyX/hj3CEQ8wuLkNW06uvM4FPiioIomByUQCEXKv148NeCh+GdJ6UIiqFEQNgdiMaAz23kxPlCqcFEx1v58mgiEdqNohfzFXPZC2RsjAq2dzyLZ7ke+mXeF4ShE41DMLaCH8iD1s56zAqB2C2EFsBw7D24tlZ3QkQUjO0SnbIS+H4aBY+D+s8yTWjOoxKFo3/A6ZpnUdM3YGsI6HlkRn02FC6CoDZrcRa/TgEAMMEeLJfrtQrQskuUX5Ldjm0XAGxsnYbRBXZNOW8gQXLL9s8kx34g7HkNkRfcBkGltaFQS6vSCY6pnAQkdccaVGe86dhugjy3cQSXBoYgx9nYkIg529IJjomhlCLUggvOi47S55gjINcCCxA38Aot68CEd7VWunNcelEHxOC4CCInJIFOT1SKL3fjMxyCM9AAF7xJXlFqtX9MrGjT/kzsh55WxiEvbzIvlg93b8FU+FF6B2e4BBHfcmKNWhhs9o1N4lkoiOaetx/536XjNherKxXvpyMw8+7IErGSuzVROXq7l2VS3QFkbMuWe3HcJ+K6KrMjZ71bcDz3juWi+mF6E5r8Onf4omuNLr5wMS2YGS9ImJv/Z6F94Mab0QlQN5wNSMFk++dgJHLDdLbFAT3yiDsK351aguEguj1rn64x2WH+CLZjk1sRMK2f6JT/BsPsR2MFoJM2P5ZoTzMWrKpjci3toWTJRCm3awc2g9AV5uuTrJiNZ23/HZsrSKaUhD5RHrVtlPs5mwbs5A/xBAHIAZrAFnv1FaAWmLtNXtXYLPL3uLYK2nZHwYG2TF+zkteZcWj5iAdddSRywn9B9E5uZlJrzFcAAAAAElFTkSuQmCC" alt="tg"/>
+                    </a>
+                </div>
+            </div>
+        </div>
+    </body>

dist/pageForm.html

@@ -0,0 +1,94 @@
+<!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>
+        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.5/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-SgOJa3DmI69IUzQ2PVdRZhwQ+dy64/BUtbMJw1MZ8t5HZApcHrRKUc4W0kG879m7" crossorigin="anonymous">
+        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css">
+
+      <script type="module" crossorigin src="/assets/page6-TNsk-iOd.js"></script>
+      <link rel="modulepreload" crossorigin href="/assets/client-BDIKmhNV.js">
+      <link rel="stylesheet" crossorigin href="/assets/styleStreamingService-CUHvxLFI.css">
+    </head>
+    <body class="min-vh-100 d-flex flex-column m-0 p-0">
+        <header class="d-flex align-items-center justify-content-between position-sticky h-60 p-3">
+            <div class="header-logo d-flex align-items-center g-3">
+                <a href="pageMain.html"><img src="/assets/%D0%9A%D0%90%D0%99%D0%A4-Dbw7IVze.jpg" alt="Логотип"/></a>
+                <h1>НАЗВАНИЕ СЕРВИСА</h1>
+            </div>
+            <nav class="navbar d-flex align-items-center justify-content-center me-3 g-3 column-gap-2">
+                <a href="pageCategories.html">Категории</a>
+                <nav class="dropdown position-relative">
+                    <span><a>Мой аккаунт ▾</a></span>
+                    <nav class="features-menu">
+                        <nav class="features-item"><a href="pageAccount.html">Настройки</a></nav>
+                        <nav class="features-item"><a href="pageSubscriptions.html">Подписки</a></nav>
+                        <nav class="features-item"><a href="pageSavedStreams.html">Сохраненные трансляции</a></nav>
+                    </nav>
+                </nav>
+            </nav>
+        </header>
+        <div class="content flex-grow-1 p-3 px-4">
+            <videos-form></videos-form>
+            <template id="videos-form-template">
+                <div class="row justify-content-center">
+                    <form class="col col-md-6 needs-validation">
+                        <div class="mb-2">
+                            <label for="id" class="form-label">Номер</label>
+                            <input type="text" class="form-control" id="id" readonly disabled />
+                        </div>
+                        <div class="mb-2">
+                            <label for="name" class="form-label">Название</label>
+                            <input type="text" class="form-control" id="name" required />
+                        </div>
+                        <div class="mb-2">
+                            <label for="image" class="form-label">Превью</label>
+                            <input type="text" class="form-control" id="image" required />
+                        </div>
+                        <div class="mb-2">
+                            <label for="description" class="form-label">Описание</label>
+                            <input type="text" class="form-control" id="description" required />
+                        </div>
+                        <div class="mb-2">
+                            <label for="playlist" class="form-label">Плейлист</label>
+                            <select class="form-select" id="playlist">
+                                <option value="" selected>Выберите плейлист</option>
+                            </select>
+                        </div>
+                        <div class="mb-2">
+                            <label for="category" class="form-label">Категория</label>
+                            <select class="form-select" id="category" 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-100">
+                                    Сохранить
+                                </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-100">
+                                    Назад
+                                </button>
+                            </div>
+                        </div>
+                    </form>
+                </div>
+            </template>
+        </div>
+        <div class="footer overflow-hidden flex-shrink-1 h-75 p-0 px-4">
+            <div class="footer-content d-flex justify-content-between align-items-center">
+                <div class="company-name flex-grow-1">RBCS CORP. <i class="bi bi-c-circle"></i></div>
+                <div class="footer-images d-flex gap-3 p-3">
+                    <a href="https://vk.com/sheym_not_shame" target="_blank">
+                        <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAACXBIWXMAAAsTAAALEwEAmpwYAAAEcUlEQVR4nO2aX2wURRzH71GNSigSd5BAYmIwMTFGjfHVvvhm5E80QV980KqRRExnripwtgLyYDCaaJACUSFYQVBfjOFBia31wEM6v7tem0Na6l1pKdw1pbQ0ba9jfnu0ureztzO7e3s+3Df5JZd2Ojefnd+/mW0kUldddYUm8lbiHqO5ZyOhsJNQOE4YP00oJEzDzwyO4e8MltywqiW9IvJ/UsOWzN1GtOc1g/FuQnmRMBBKRnnRoPw3g0ETzlEzgOXRxLLS04Vx5cU7mEGhQBhvDR3oXgbPEcov+wWwATEYNhjfVHUAEkvcYVB+KGgACVD76q3dt1cFYk0LLEefrjYEWYohOIPJI1AIzDCEQio0CLZkydVbUw2BuRNhEK8BhCi5Ge8OxM3CiAlXGAr7/WenGkOQf3dmk/dCx2C41gBkyfgI1i5tELPNqPniwWqUv6cFgeRBVOzA3YtCQav6Y+8km+jFQ4Ni548jFlv7TlL6pZsPWse+8fXfjgtkJ3KWsRv3XawQK9CkDoINoGSS9s6rolyP7uqTfuGRM3nLuLODU9JxT3zQLxYWrHO+ftQZ2mC8S6P4ybvYPT+N2kAa92Z8gRzoumYZNz1bFOtivZXipKhU8THNOU1CT+RsIC8cHPQM8tTejJidt27HV/G8e6yw5AZf2QoXXS7cJS8gD2xPib6Rm5YxkzNF8cj7aYXA560qIMedJngw1iuKZf58Kj2hDYKuEx+4YXsobx7LqmUwyr9RcC34tdIk/aPWpzgztyD1aRnIfVEQL315SWQLszaIT34eU4MogfziDkLhz0qTfPG7NThR0ZM5V5DrN4viyvU5IRNmQ2UIZqbgc75Bnv74gm0hoxOz4v53UxVBZMKY2NLhnGqJLxAX10I7n522LQrTqC5IYWpeNH+bM11OC4YquJZ5ZeMyERYsmbb9MKwFsqjOC5Ni3Y5ejR3hHYE0i6uiYAavTEfPFsRDrWkbSOLSlOj4oyDyN+Rxgqn4sd3yLsFT+jUv2BQme3JPv5iYnpcuCotc+YL33wroNW8nRcvJYenfZq7MqO1MM6z31aKUGzZ32FKoaBHkvw9i4OqMbdz3PeNu8VFUPsfr3JY889lfYmxyThsE7fHdfeKaxNU2O7Q9ZnxQ6FSCKIHAqzpZ5OG2tPju/Liti3UDQXv58JBtbGJoqsKOwCt6x1zzGlMvLTZ+lDGbPkyrqiBoPZJ03ijpqg3G8yto310RHWFm0AVZNKwLCIWHqQ9PjYpPT4+JpiNDjuPRlQ7H8xZ7vn1A5lY7IrpCcoNBzitM0GZQyK6Mpe6MeFGls0noIEzhDFIRhvIDtYYglO+L+BVeVzqd4cPZCd61NjZ4m2+QEkyqAS+Uw98JgMAusS2vFRjvChEkHvhrBaubQXsIEJ8H5k5u2awaqdmgkPWdnbzUGbyL9dIBSAI6j8Vupdc6EYRu3do3mfGj/XoaOrF30m47qi0zuzXDekJ5G17Z4JF06R8GzM/mz9oIhWcDz0Z11VVXpJL+Aemdmrez0du5AAAAAElFTkSuQmCC" alt="vk"/>
+                    </a>
+                    <a href="https://t.me/sheymuh" target="_blank">
+                        <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAACXBIWXMAAAsTAAALEwEAmpwYAAAEnklEQVR4nO2aS2wbRRjHfae8xOuOqnbXalMkJLiAhDggBOVQaBFSpCKOoCJVnAoSQoKm0AMSJw6gIh4ioliigXbGjqzmUSVxaF4YE+okjpO6TrBD0zpOZuxde/dDM7YTO3bWM/auzcF/6bvsrmf3N99jvp21y9VRRx21TF39m4+6vfSEgkmPgqhHwWRYxXSSGyJDxWM97Jr9OP2I6/+kw1dSD7oxeVdB9LqKiKliCkKGiKlgOq4gcurIpbsPtBVAReQzFZO08MPvDbWhYnKu5UAKoicVRJNNA+wyBdOEG9NuxwEO9sG9KiK9dgNUASHyg3sQ9jkCcejXzcdURKechlB3bJIVD/shMJlrIQQUjMzZBsPCSUF0uvUQdNsztoQZi9c2QgDPGUx+ahKCnmw3hFq0hqsZWyecKLG17IWhDJwJavDM1YyFV2iioXWmsNg59/BdPgrvzWgQuG2ACQWdCWr1QqxH2huF1dZ+gBeHM/D1Yg7WtdLj7+jYSNb694impLzCeic7H/6Ij8LpaQ3GymZ/t3QDuJfqjaVg8o4wCG8AbQB4yWL2NV2vgAqlDLFxEQ0IQbAFSKqLlZz9XD4PscQaBOejoOm57eMXYzlBEGIe+C39cF0Q9Qp9vRGAl4uzf1ffK3gA1jfSEFpYgj/no7BFMxXnPgrpwvdyY3K8flhh0iM64BNls28lmsnC/M04zIQj8FdkCWhWq7rmxGidRMflRj4WyQ9PvYGOXivMfspi9pnyeQPiyX/hj3CEQ8wuLkNW06uvM4FPiioIomByUQCEXKv148NeCh+GdJ6UIiqFEQNgdiMaAz23kxPlCqcFEx1v58mgiEdqNohfzFXPZC2RsjAq2dzyLZ7ke+mXeF4ShE41DMLaCH8iD1s56zAqB2C2EFsBw7D24tlZ3QkQUjO0SnbIS+H4aBY+D+s8yTWjOoxKFo3/A6ZpnUdM3YGsI6HlkRn02FC6CoDZrcRa/TgEAMMEeLJfrtQrQskuUX5Ldjm0XAGxsnYbRBXZNOW8gQXLL9s8kx34g7HkNkRfcBkGltaFQS6vSCY6pnAQkdccaVGe86dhugjy3cQSXBoYgx9nYkIg529IJjomhlCLUggvOi47S55gjINcCCxA38Aot68CEd7VWunNcelEHxOC4CCInJIFOT1SKL3fjMxyCM9AAF7xJXlFqtX9MrGjT/kzsh55WxiEvbzIvlg93b8FU+FF6B2e4BBHfcmKNWhhs9o1N4lkoiOaetx/536XjNherKxXvpyMw8+7IErGSuzVROXq7l2VS3QFkbMuWe3HcJ+K6KrMjZ71bcDz3juWi+mF6E5r8Onf4omuNLr5wMS2YGS9ImJv/Z6F94Mab0QlQN5wNSMFk++dgJHLDdLbFAT3yiDsK351aguEguj1rn64x2WH+CLZjk1sRMK2f6JT/BsPsR2MFoJM2P5ZoTzMWrKpjci3toWTJRCm3awc2g9AV5uuTrJiNZ23/HZsrSKaUhD5RHrVtlPs5mwbs5A/xBAHIAZrAFnv1FaAWmLtNXtXYLPL3uLYK2nZHwYG2TF+zkteZcWj5iAdddSRywn9B9E5uZlJrzFcAAAAAElFTkSuQmCC" alt="tg"/>
+                    </a>
+                </div>
+            </div>
+        </div>
+

dist/pageMain.html

@@ -0,0 +1,180 @@
+<!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>
+        <link
+            rel="stylesheet"
+            href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.5/dist/css/bootstrap.min.css"
+            integrity="sha384-SgOJa3DmI69IUzQ2PVdRZhwQ+dy64/BUtbMJw1MZ8t5HZApcHrRKUc4W0kG879m7"
+            crossorigin="anonymous"
+        />
+        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css" />
+      <link rel="stylesheet" crossorigin href="/assets/styleStreamingService-CUHvxLFI.css">
+    </head>
+    <body class="min-vh-100 d-flex flex-column m-0 p-0">
+        <header class="d-flex align-items-center justify-content-between position-sticky h-60 p-3">
+            <div class="header-logo d-flex align-items-center g-3">
+                <a href="pageMain.html"><img src="/assets/%D0%9A%D0%90%D0%99%D0%A4-Dbw7IVze.jpg" alt="Логотип" /></a>
+                <h1>НАЗВАНИЕ СЕРВИСА</h1>
+            </div>
+            <nav class="navbar d-flex align-items-center justify-content-center me-3 g-3 column-gap-2">
+                <a href="pageCategories.html">Категории</a>
+                <nav class="dropdown position-relative">
+                    <span><a>Мой аккаунт ▾</a></span>
+                    <nav class="features-menu">
+                        <nav class="features-item"><a href="pageAccount.html">Настройки</a></nav>
+                        <nav class="features-item"><a href="pageSubscriptions.html">Подписки</a></nav>
+                        <nav class="features-item"><a href="pageSavedStreams.html">Сохраненные трансляции</a></nav>
+                    </nav>
+                </nav>
+            </nav>
+        </header>
+        <div class="content flex-grow-1 p-3 px-4" id="content">
+            <p>Сейчас в эфире <i class="bi bi-cast"></i></p>
+            <form id="imageForm" class="mb-4">
+                <div class="photo-grid-container d-flex justify-content-center mb-2">
+                    <div class="photo-grid d-flex align-items-center flex-wrap w-100">
+                        <div class="photo-grid-item">
+                            <input
+                                type="checkbox"
+                                name="images"
+                                value="https://steamuserimages-a.akamaihd.net/ugc/2462990917964003785/9E09A87AE9B299BC1F0FC1CBA9F20DB16289442A/?imw=512&amp;imh=298&amp;ima=fit&amp;impolicy=Letterbox&amp;imcolor=%23000000&amp;letterbox=true"
+                                id="cs2"
+                            />
+                            <label for="cs2"
+                                ><img
+                                    src="https://steamuserimages-a.akamaihd.net/ugc/2462990917964003785/9E09A87AE9B299BC1F0FC1CBA9F20DB16289442A/?imw=512&amp;imh=298&amp;ima=fit&amp;impolicy=Letterbox&amp;imcolor=%23000000&amp;letterbox=true"
+                                    alt="cs2"
+                            /></label>
+                        </div>
+                        <div class="photo-grid-item">
+                            <input
+                                type="checkbox"
+                                name="images"
+                                value="https://avatars.mds.yandex.net/i?id=7839e8d6f40309bdce67fac62990d108_sr-10636981-images-thumbs&n=13"
+                                id="derzko"
+                            />
+                            <label for="derzko"
+                                ><img
+                                    src="https://avatars.mds.yandex.net/i?id=7839e8d6f40309bdce67fac62990d108_sr-10636981-images-thumbs&n=13"
+                                    alt="derzko"
+                            /></label>
+                        </div>
+                        <div class="photo-grid-item">
+                            <input
+                                type="checkbox"
+                                name="images"
+                                value="https://vkplay.ru/pre_0x736_resize/hotbox/content_files/news/2020/02/12/fe52b98a1367439ea2be293fcf48224a.jpg?quality=85"
+                                id="stardew"
+                            />
+                            <label for="stardew"
+                                ><img
+                                    src="https://vkplay.ru/pre_0x736_resize/hotbox/content_files/news/2020/02/12/fe52b98a1367439ea2be293fcf48224a.jpg?quality=85"
+                                    alt="stardew"
+                            /></label>
+                        </div>
+                        <div class="photo-grid-item">
+                            <input
+                                type="checkbox"
+                                name="images"
+                                value="https://avatars.mds.yandex.net/i?id=c111e02e6999cca7c4a7aa47f00a2ab3c384b6dd-5884537-images-thumbs&n=13"
+                                id="teddy"
+                            />
+                            <label for="teddy"
+                                ><img
+                                    src="https://avatars.mds.yandex.net/i?id=c111e02e6999cca7c4a7aa47f00a2ab3c384b6dd-5884537-images-thumbs&n=13"
+                                    alt="teddy"
+                            /></label>
+                        </div>
+                        <div class="photo-grid-item">
+                            <input
+                                type="checkbox"
+                                name="images"
+                                value="https://i.pinimg.com/736x/a8/f1/c0/a8f1c04546867fbcd5eccd41c115fb51.jpg"
+                                id="lofi_girl"
+                            />
+                            <label for="lofi_girl"
+                                ><img
+                                    src="https://i.pinimg.com/736x/a8/f1/c0/a8f1c04546867fbcd5eccd41c115fb51.jpg"
+                                    alt="lofi_girl"
+                            /></label>
+                        </div>
+                    </div>
+                </div>
+                <button type="submit" class="btn btn-primary">Смотреть позже</button>
+            </form>
+            <h3>Популярные каналы <i class="bi bi-patch-check-fill"></i></h3>
+            <ul>
+                <li>
+                    <a href="pageAccount.html" target="_blank"
+                        ><em>ВЫ</em> самый популярный стример на данной платформе!!!</a
+                    >
+                </li>
+                <li>какой-то стример 1</li>
+                <li>какой-то стример 2</li>
+                <li>ммм <b>МАРМОК</b></li>
+            </ul>
+            <h2>Смотреть позже <i class="bi bi-clock-fill"></i></h2>
+            <div class="photo-grid-container d-flex justify-content-center">
+                <div class="photo-grid d-flex align-items-center flex-wrap w-100" id="savedImagesGrid">
+                    <div class="photo-grid-item">
+                        <img
+                            src="https://sun9-27.userapi.com/impf/c9811/u99622377/d_9475926f.jpg?quality=96&as=50x50,100x100&sign=a4fcc81d8c851f41a7f85dea825afc66&u=pHWjezk_9pOPyRtoH8161qsxD963pzSE2bk8P8vDAyE&cs=100x100"
+                            alt="pusto"
+                        />
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="footer overflow-hidden flex-shrink-1 h-75 p-0 px-4">
+            <div class="footer-content d-flex justify-content-between align-items-center">
+                <div class="company-name flex-grow-1">RBCS CORP. <i class="bi bi-c-circle"></i></div>
+                <div class="footer-images d-flex gap-3 p-3">
+                    <a href="https://vk.com/sheym_not_shame" target="_blank">
+                        <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAACXBIWXMAAAsTAAALEwEAmpwYAAAEcUlEQVR4nO2aX2wURRzH71GNSigSd5BAYmIwMTFGjfHVvvhm5E80QV980KqRRExnripwtgLyYDCaaJACUSFYQVBfjOFBia31wEM6v7tem0Na6l1pKdw1pbQ0ba9jfnu0ureztzO7e3s+3Df5JZd2Ojefnd+/mW0kUldddYUm8lbiHqO5ZyOhsJNQOE4YP00oJEzDzwyO4e8MltywqiW9IvJ/UsOWzN1GtOc1g/FuQnmRMBBKRnnRoPw3g0ETzlEzgOXRxLLS04Vx5cU7mEGhQBhvDR3oXgbPEcov+wWwATEYNhjfVHUAEkvcYVB+KGgACVD76q3dt1cFYk0LLEefrjYEWYohOIPJI1AIzDCEQio0CLZkydVbUw2BuRNhEK8BhCi5Ge8OxM3CiAlXGAr7/WenGkOQf3dmk/dCx2C41gBkyfgI1i5tELPNqPniwWqUv6cFgeRBVOzA3YtCQav6Y+8km+jFQ4Ni548jFlv7TlL6pZsPWse+8fXfjgtkJ3KWsRv3XawQK9CkDoINoGSS9s6rolyP7uqTfuGRM3nLuLODU9JxT3zQLxYWrHO+ftQZ2mC8S6P4ybvYPT+N2kAa92Z8gRzoumYZNz1bFOtivZXipKhU8THNOU1CT+RsIC8cHPQM8tTejJidt27HV/G8e6yw5AZf2QoXXS7cJS8gD2xPib6Rm5YxkzNF8cj7aYXA560qIMedJngw1iuKZf58Kj2hDYKuEx+4YXsobx7LqmUwyr9RcC34tdIk/aPWpzgztyD1aRnIfVEQL315SWQLszaIT34eU4MogfziDkLhz0qTfPG7NThR0ZM5V5DrN4viyvU5IRNmQ2UIZqbgc75Bnv74gm0hoxOz4v53UxVBZMKY2NLhnGqJLxAX10I7n522LQrTqC5IYWpeNH+bM11OC4YquJZ5ZeMyERYsmbb9MKwFsqjOC5Ni3Y5ejR3hHYE0i6uiYAavTEfPFsRDrWkbSOLSlOj4oyDyN+Rxgqn4sd3yLsFT+jUv2BQme3JPv5iYnpcuCotc+YL33wroNW8nRcvJYenfZq7MqO1MM6z31aKUGzZ32FKoaBHkvw9i4OqMbdz3PeNu8VFUPsfr3JY889lfYmxyThsE7fHdfeKaxNU2O7Q9ZnxQ6FSCKIHAqzpZ5OG2tPju/Liti3UDQXv58JBtbGJoqsKOwCt6x1zzGlMvLTZ+lDGbPkyrqiBoPZJ03ijpqg3G8yto310RHWFm0AVZNKwLCIWHqQ9PjYpPT4+JpiNDjuPRlQ7H8xZ7vn1A5lY7IrpCcoNBzitM0GZQyK6Mpe6MeFGls0noIEzhDFIRhvIDtYYglO+L+BVeVzqd4cPZCd61NjZ4m2+QEkyqAS+Uw98JgMAusS2vFRjvChEkHvhrBaubQXsIEJ8H5k5u2awaqdmgkPWdnbzUGbyL9dIBSAI6j8Vupdc6EYRu3do3mfGj/XoaOrF30m47qi0zuzXDekJ5G17Z4JF06R8GzM/mz9oIhWcDz0Z11VVXpJL+Aemdmrez0du5AAAAAElFTkSuQmCC" alt="vk" />
+                    </a>
+                    <a href="https://t.me/sheymuh" target="_blank">
+                        <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAACXBIWXMAAAsTAAALEwEAmpwYAAAEnklEQVR4nO2aS2wbRRjHfae8xOuOqnbXalMkJLiAhDggBOVQaBFSpCKOoCJVnAoSQoKm0AMSJw6gIh4ioliigXbGjqzmUSVxaF4YE+okjpO6TrBD0zpOZuxde/dDM7YTO3bWM/auzcF/6bvsrmf3N99jvp21y9VRRx21TF39m4+6vfSEgkmPgqhHwWRYxXSSGyJDxWM97Jr9OP2I6/+kw1dSD7oxeVdB9LqKiKliCkKGiKlgOq4gcurIpbsPtBVAReQzFZO08MPvDbWhYnKu5UAKoicVRJNNA+wyBdOEG9NuxwEO9sG9KiK9dgNUASHyg3sQ9jkCcejXzcdURKechlB3bJIVD/shMJlrIQQUjMzZBsPCSUF0uvUQdNsztoQZi9c2QgDPGUx+ahKCnmw3hFq0hqsZWyecKLG17IWhDJwJavDM1YyFV2iioXWmsNg59/BdPgrvzWgQuG2ACQWdCWr1QqxH2huF1dZ+gBeHM/D1Yg7WtdLj7+jYSNb694impLzCeic7H/6Ij8LpaQ3GymZ/t3QDuJfqjaVg8o4wCG8AbQB4yWL2NV2vgAqlDLFxEQ0IQbAFSKqLlZz9XD4PscQaBOejoOm57eMXYzlBEGIe+C39cF0Q9Qp9vRGAl4uzf1ffK3gA1jfSEFpYgj/no7BFMxXnPgrpwvdyY3K8flhh0iM64BNls28lmsnC/M04zIQj8FdkCWhWq7rmxGidRMflRj4WyQ9PvYGOXivMfspi9pnyeQPiyX/hj3CEQ8wuLkNW06uvM4FPiioIomByUQCEXKv148NeCh+GdJ6UIiqFEQNgdiMaAz23kxPlCqcFEx1v58mgiEdqNohfzFXPZC2RsjAq2dzyLZ7ke+mXeF4ShE41DMLaCH8iD1s56zAqB2C2EFsBw7D24tlZ3QkQUjO0SnbIS+H4aBY+D+s8yTWjOoxKFo3/A6ZpnUdM3YGsI6HlkRn02FC6CoDZrcRa/TgEAMMEeLJfrtQrQskuUX5Ldjm0XAGxsnYbRBXZNOW8gQXLL9s8kx34g7HkNkRfcBkGltaFQS6vSCY6pnAQkdccaVGe86dhugjy3cQSXBoYgx9nYkIg529IJjomhlCLUggvOi47S55gjINcCCxA38Aot68CEd7VWunNcelEHxOC4CCInJIFOT1SKL3fjMxyCM9AAF7xJXlFqtX9MrGjT/kzsh55WxiEvbzIvlg93b8FU+FF6B2e4BBHfcmKNWhhs9o1N4lkoiOaetx/536XjNherKxXvpyMw8+7IErGSuzVROXq7l2VS3QFkbMuWe3HcJ+K6KrMjZ71bcDz3juWi+mF6E5r8Onf4omuNLr5wMS2YGS9ImJv/Z6F94Mab0QlQN5wNSMFk++dgJHLDdLbFAT3yiDsK351aguEguj1rn64x2WH+CLZjk1sRMK2f6JT/BsPsR2MFoJM2P5ZoTzMWrKpjci3toWTJRCm3awc2g9AV5uuTrJiNZ23/HZsrSKaUhD5RHrVtlPs5mwbs5A/xBAHIAZrAFnv1FaAWmLtNXtXYLPL3uLYK2nZHwYG2TF+zkteZcWj5iAdddSRywn9B9E5uZlJrzFcAAAAAElFTkSuQmCC" alt="tg" />
+                    </a>
+                </div>
+            </div>
+        </div>
+        <script>
+            document.getElementById("imageForm").addEventListener("submit", (event) => {
+                event.preventDefault();
+
+                const selectedImages = Array.from(document.querySelectorAll('input[name="images"]:checked')).map(
+                    (checkbox) => checkbox.value
+                );
+                const savedImagesGrid = document.getElementById("savedImagesGrid");
+
+                const initialImageSrc =
+        "https://sun9-27.userapi.com/impf/c9811/u99622377/d_9475926f.jpg?quality=96&as=50x50,100x100&sign=a4fcc81d8c851f41a7f85dea825afc66&u=pHWjezk_9pOPyRtoH8161qsxD963pzSE2bk8P8vDAyE&cs=100x100";
+
+                const existingImage = Array.from(savedImagesGrid.children).find((item) => {
+                    const imgElement = item.querySelector("img");
+                    return imgElement && imgElement.src === initialImageSrc;
+                });
+                if (existingImage) {
+                    savedImagesGrid.removeChild(existingImage);
+                }
+
+                selectedImages.forEach((image) => {
+                    const imageExists = Array.from(savedImagesGrid.children).some((item) => {
+                        const imgElement = item.querySelector("img");
+                        return imgElement && imgElement.src === image;
+                    });
+
+                    if (!imageExists) {
+                        const item = document.createElement("div");
+                        item.className = "photo-grid-item";
+                        item.innerHTML = `<img src="${image}" alt="сохраненное изображение"/>`;
+                        savedImagesGrid.appendChild(item);
+                    }
+                });
+            });
+        </script>
+    </body>
+</html>

dist/pageSavedStreams.html

@@ -0,0 +1,79 @@
+<!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>
+        <link
+            href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.5/dist/css/bootstrap.min.css"
+            rel="stylesheet"
+            integrity="sha384-SgOJa3DmI69IUzQ2PVdRZhwQ+dy64/BUtbMJw1MZ8t5HZApcHrRKUc4W0kG879m7"
+            crossorigin="anonymous"
+        />
+        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css" />
+
+      <link rel="stylesheet" crossorigin href="/assets/styleStreamingService-CUHvxLFI.css">
+    </head>
+    <body class="min-vh-100 d-flex flex-column m-0 p-0">
+        <header class="d-flex align-items-center justify-content-between position-sticky h-60 p-3">
+            <div class="header-logo d-flex align-items-center g-3">
+                <a href="pageMain.html"><img src="/assets/%D0%9A%D0%90%D0%99%D0%A4-Dbw7IVze.jpg" alt="Логотип" /></a>
+                <h1>НАЗВАНИЕ СЕРВИСА</h1>
+            </div>
+            <nav class="navbar d-flex align-items-center justify-content-center me-3 g-3 column-gap-2">
+                <a href="pageCategories.html">Категории</a>
+                <nav class="dropdown position-relative">
+                    <span><a>Мой аккаунт ▾</a></span>
+                    <nav class="features-menu">
+                        <nav class="features-item"><a href="pageAccount.html">Настройки</a></nav>
+                        <nav class="features-item"><a href="pageSubscriptions.html">Подписки</a></nav>
+                        <nav class="features-item"><a href="pageSavedStreams.html">Сохраненные трансляции</a></nav>
+                    </nav>
+                </nav>
+            </nav>
+        </header>
+        <div class="content flex-grow-1 p-3 px-4">
+            <h2>Смотреть позже <i class="bi bi-clock-fill"></i></h2>
+            <div class="photo-grid-container d-flex justify-content-center">
+                <div class="photo-grid d-flex align-items-center flex-wrap w-100" id="savedImagesGrid">
+                    <div class="photo-grid-item"><img src="/assets/2016-BUapLfv6.jpeg" alt="стрим ксго" /></div>
+                    <div class="photo-grid-item"><img src="/assets/%D0%B0%D1%81%D0%BC%D1%80%20%D1%87%D0%B5%D0%BB%D0%BE%D0%B2%D0%B5%D0%BA%20%D0%BF%D0%B0%D1%83%D0%BA-RgZcxljT.webp" alt="асмр" /></div>
+                    <div class="photo-grid-item"><img src="/assets/%D1%80%D0%B5%D0%B7%D0%BD%D1%8F-Du5Ks9ja.jpg" alt="резня" /></div>
+                </div>
+            </div>
+            <h2>Запланированные трансляции <i class="bi bi-calendar-event"></i></h2>
+            <div class="photo-grid-container d-flex justify-content-center">
+                <div class="photo-grid d-flex align-items-center flex-wrap w-100">
+                    <div class="photo-grid-item"><img src="/assets/%D1%81%D1%82%D1%80%D0%B8%D0%BC%20%D0%BA%D1%81%D0%B3%D0%BE-d7c_w3u0.webp" alt="стрим ксго" /></div>
+                    <div class="photo-grid-item"><img src="/assets/goats-D56R5-1i.png" alt="goats" /></div>
+                    <div class="photo-grid-item"><img src="/assets/%D0%BF%D0%B0%D0%BF%D0%B0%D0%BD%D1%8F-BZOoCf1B.jpg" alt="папаня" /></div>
+                </div>
+            </div>
+        </div>
+        <div class="footer overflow-hidden flex-shrink-1 h-75 p-0 px-4">
+            <div class="footer-content d-flex justify-content-between align-items-center">
+                <div class="company-name flex-grow-1">RBCS CORP. <i class="bi bi-c-circle"></i></div>
+                <div class="footer-images d-flex gap-3 p-3">
+                    <a href="https://vk.com/sheym_not_shame" target="_blank">
+                        <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAACXBIWXMAAAsTAAALEwEAmpwYAAAEcUlEQVR4nO2aX2wURRzH71GNSigSd5BAYmIwMTFGjfHVvvhm5E80QV980KqRRExnripwtgLyYDCaaJACUSFYQVBfjOFBia31wEM6v7tem0Na6l1pKdw1pbQ0ba9jfnu0ureztzO7e3s+3Df5JZd2Ojefnd+/mW0kUldddYUm8lbiHqO5ZyOhsJNQOE4YP00oJEzDzwyO4e8MltywqiW9IvJ/UsOWzN1GtOc1g/FuQnmRMBBKRnnRoPw3g0ETzlEzgOXRxLLS04Vx5cU7mEGhQBhvDR3oXgbPEcov+wWwATEYNhjfVHUAEkvcYVB+KGgACVD76q3dt1cFYk0LLEefrjYEWYohOIPJI1AIzDCEQio0CLZkydVbUw2BuRNhEK8BhCi5Ge8OxM3CiAlXGAr7/WenGkOQf3dmk/dCx2C41gBkyfgI1i5tELPNqPniwWqUv6cFgeRBVOzA3YtCQav6Y+8km+jFQ4Ni548jFlv7TlL6pZsPWse+8fXfjgtkJ3KWsRv3XawQK9CkDoINoGSS9s6rolyP7uqTfuGRM3nLuLODU9JxT3zQLxYWrHO+ftQZ2mC8S6P4ybvYPT+N2kAa92Z8gRzoumYZNz1bFOtivZXipKhU8THNOU1CT+RsIC8cHPQM8tTejJidt27HV/G8e6yw5AZf2QoXXS7cJS8gD2xPib6Rm5YxkzNF8cj7aYXA560qIMedJngw1iuKZf58Kj2hDYKuEx+4YXsobx7LqmUwyr9RcC34tdIk/aPWpzgztyD1aRnIfVEQL315SWQLszaIT34eU4MogfziDkLhz0qTfPG7NThR0ZM5V5DrN4viyvU5IRNmQ2UIZqbgc75Bnv74gm0hoxOz4v53UxVBZMKY2NLhnGqJLxAX10I7n522LQrTqC5IYWpeNH+bM11OC4YquJZ5ZeMyERYsmbb9MKwFsqjOC5Ni3Y5ejR3hHYE0i6uiYAavTEfPFsRDrWkbSOLSlOj4oyDyN+Rxgqn4sd3yLsFT+jUv2BQme3JPv5iYnpcuCotc+YL33wroNW8nRcvJYenfZq7MqO1MM6z31aKUGzZ32FKoaBHkvw9i4OqMbdz3PeNu8VFUPsfr3JY889lfYmxyThsE7fHdfeKaxNU2O7Q9ZnxQ6FSCKIHAqzpZ5OG2tPju/Liti3UDQXv58JBtbGJoqsKOwCt6x1zzGlMvLTZ+lDGbPkyrqiBoPZJ03ijpqg3G8yto310RHWFm0AVZNKwLCIWHqQ9PjYpPT4+JpiNDjuPRlQ7H8xZ7vn1A5lY7IrpCcoNBzitM0GZQyK6Mpe6MeFGls0noIEzhDFIRhvIDtYYglO+L+BVeVzqd4cPZCd61NjZ4m2+QEkyqAS+Uw98JgMAusS2vFRjvChEkHvhrBaubQXsIEJ8H5k5u2awaqdmgkPWdnbzUGbyL9dIBSAI6j8Vupdc6EYRu3do3mfGj/XoaOrF30m47qi0zuzXDekJ5G17Z4JF06R8GzM/mz9oIhWcDz0Z11VVXpJL+Aemdmrez0du5AAAAAElFTkSuQmCC" alt="vk" />
+                    </a>
+                    <a href="https://t.me/sheymuh" target="_blank">
+                        <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAACXBIWXMAAAsTAAALEwEAmpwYAAAEnklEQVR4nO2aS2wbRRjHfae8xOuOqnbXalMkJLiAhDggBOVQaBFSpCKOoCJVnAoSQoKm0AMSJw6gIh4ioliigXbGjqzmUSVxaF4YE+okjpO6TrBD0zpOZuxde/dDM7YTO3bWM/auzcF/6bvsrmf3N99jvp21y9VRRx21TF39m4+6vfSEgkmPgqhHwWRYxXSSGyJDxWM97Jr9OP2I6/+kw1dSD7oxeVdB9LqKiKliCkKGiKlgOq4gcurIpbsPtBVAReQzFZO08MPvDbWhYnKu5UAKoicVRJNNA+wyBdOEG9NuxwEO9sG9KiK9dgNUASHyg3sQ9jkCcejXzcdURKechlB3bJIVD/shMJlrIQQUjMzZBsPCSUF0uvUQdNsztoQZi9c2QgDPGUx+ahKCnmw3hFq0hqsZWyecKLG17IWhDJwJavDM1YyFV2iioXWmsNg59/BdPgrvzWgQuG2ACQWdCWr1QqxH2huF1dZ+gBeHM/D1Yg7WtdLj7+jYSNb694impLzCeic7H/6Ij8LpaQ3GymZ/t3QDuJfqjaVg8o4wCG8AbQB4yWL2NV2vgAqlDLFxEQ0IQbAFSKqLlZz9XD4PscQaBOejoOm57eMXYzlBEGIe+C39cF0Q9Qp9vRGAl4uzf1ffK3gA1jfSEFpYgj/no7BFMxXnPgrpwvdyY3K8flhh0iM64BNls28lmsnC/M04zIQj8FdkCWhWq7rmxGidRMflRj4WyQ9PvYGOXivMfspi9pnyeQPiyX/hj3CEQ8wuLkNW06uvM4FPiioIomByUQCEXKv148NeCh+GdJ6UIiqFEQNgdiMaAz23kxPlCqcFEx1v58mgiEdqNohfzFXPZC2RsjAq2dzyLZ7ke+mXeF4ShE41DMLaCH8iD1s56zAqB2C2EFsBw7D24tlZ3QkQUjO0SnbIS+H4aBY+D+s8yTWjOoxKFo3/A6ZpnUdM3YGsI6HlkRn02FC6CoDZrcRa/TgEAMMEeLJfrtQrQskuUX5Ldjm0XAGxsnYbRBXZNOW8gQXLL9s8kx34g7HkNkRfcBkGltaFQS6vSCY6pnAQkdccaVGe86dhugjy3cQSXBoYgx9nYkIg529IJjomhlCLUggvOi47S55gjINcCCxA38Aot68CEd7VWunNcelEHxOC4CCInJIFOT1SKL3fjMxyCM9AAF7xJXlFqtX9MrGjT/kzsh55WxiEvbzIvlg93b8FU+FF6B2e4BBHfcmKNWhhs9o1N4lkoiOaetx/536XjNherKxXvpyMw8+7IErGSuzVROXq7l2VS3QFkbMuWe3HcJ+K6KrMjZ71bcDz3juWi+mF6E5r8Onf4omuNLr5wMS2YGS9ImJv/Z6F94Mab0QlQN5wNSMFk++dgJHLDdLbFAT3yiDsK351aguEguj1rn64x2WH+CLZjk1sRMK2f6JT/BsPsR2MFoJM2P5ZoTzMWrKpjci3toWTJRCm3awc2g9AV5uuTrJiNZ23/HZsrSKaUhD5RHrVtlPs5mwbs5A/xBAHIAZrAFnv1FaAWmLtNXtXYLPL3uLYK2nZHwYG2TF+zkteZcWj5iAdddSRywn9B9E5uZlJrzFcAAAAAElFTkSuQmCC" alt="tg" />
+                    </a>
+                </div>
+            </div>
+        </div>
+        <!-- <script>
+            const savedImages = JSON.parse(localStorage.getItem("savedImages")) || [];
+
+            const savedImagesGrid = document.getElementById("savedImagesGrid");
+
+            savedImages.forEach((image) => {
+                console.log(image);
+                const item = document.createElement("div");
+                item.className = "photo-grid-item";
+                item.innerHTML = `<img src="${image}" alt="сохраненное изображение"/>`;
+                savedImagesGrid.appendChild(item);
+            });
+        </script> -->
+    </body>

dist/pageSubscriptions.html

@@ -0,0 +1,54 @@
+<!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>
+        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.5/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-SgOJa3DmI69IUzQ2PVdRZhwQ+dy64/BUtbMJw1MZ8t5HZApcHrRKUc4W0kG879m7" crossorigin="anonymous">
+        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css">
+
+      <link rel="stylesheet" crossorigin href="/assets/styleStreamingService-CUHvxLFI.css">
+    </head>
+    <body class="min-vh-100 d-flex flex-column m-0 p-0">
+        <header class="d-flex align-items-center justify-content-between position-sticky h-60 p-3">
+            <div class="header-logo d-flex align-items-center g-3">
+                <a href="pageMain.html"><img src="/assets/%D0%9A%D0%90%D0%99%D0%A4-Dbw7IVze.jpg" alt="Логотип"/></a>
+                <h1>НАЗВАНИЕ СЕРВИСА</h1>
+            </div>
+            <nav class="navbar d-flex align-items-center justify-content-center me-3 g-3 column-gap-2">
+                <a href="pageCategories.html">Категории</a>
+                <nav class="dropdown position-relative">
+                    <span><a>Мой аккаунт ▾</a></span>
+                    <nav class="features-menu">
+                        <nav class="features-item"><a href="pageAccount.html">Настройки</a></nav>
+                        <nav class="features-item"><a href="pageSubscriptions.html">Подписки</a></nav>
+                        <nav class="features-item"><a href="pageSavedStreams.html">Сохраненные трансляции</a></nav>
+                    </nav>
+                </nav>
+            </nav>
+        </header>
+        <div class="content flex-grow-1 p-3 px-4">
+            <h2>Ваши подписки <i class="bi bi-bookmark-heart-fill"></i></h2>
+            <ol>
+                <li>НОРМ канал</li>
+                <div class="subButtons d-flex"><div class="button">Вы подписаны</div></div>
+                <li>САМЫЙ КРУТОЙ КАНАЛ</li>
+                <div class="subButtons d-flex"><div class="button blue-button">Вы спонсор</div></div>
+                <li>ПРОСТО КРУТОЙ канал</li>
+                <div class="subButtons d-flex"><div class="button">Вы подписаны</div></div>
+            </ol>
+        </div>
+        <div class="footer overflow-hidden flex-shrink-1 h-75 p-0 px-4">
+            <div class="footer-content d-flex justify-content-between align-items-center">
+                <div class="company-name flex-grow-1">RBCS CORP. <i class="bi bi-c-circle"></i></div>
+                <div class="footer-images d-flex gap-3 p-3">
+                    <a href="https://vk.com/sheym_not_shame" target="_blank">
+                        <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAACXBIWXMAAAsTAAALEwEAmpwYAAAEcUlEQVR4nO2aX2wURRzH71GNSigSd5BAYmIwMTFGjfHVvvhm5E80QV980KqRRExnripwtgLyYDCaaJACUSFYQVBfjOFBia31wEM6v7tem0Na6l1pKdw1pbQ0ba9jfnu0ureztzO7e3s+3Df5JZd2Ojefnd+/mW0kUldddYUm8lbiHqO5ZyOhsJNQOE4YP00oJEzDzwyO4e8MltywqiW9IvJ/UsOWzN1GtOc1g/FuQnmRMBBKRnnRoPw3g0ETzlEzgOXRxLLS04Vx5cU7mEGhQBhvDR3oXgbPEcov+wWwATEYNhjfVHUAEkvcYVB+KGgACVD76q3dt1cFYk0LLEefrjYEWYohOIPJI1AIzDCEQio0CLZkydVbUw2BuRNhEK8BhCi5Ge8OxM3CiAlXGAr7/WenGkOQf3dmk/dCx2C41gBkyfgI1i5tELPNqPniwWqUv6cFgeRBVOzA3YtCQav6Y+8km+jFQ4Ni548jFlv7TlL6pZsPWse+8fXfjgtkJ3KWsRv3XawQK9CkDoINoGSS9s6rolyP7uqTfuGRM3nLuLODU9JxT3zQLxYWrHO+ftQZ2mC8S6P4ybvYPT+N2kAa92Z8gRzoumYZNz1bFOtivZXipKhU8THNOU1CT+RsIC8cHPQM8tTejJidt27HV/G8e6yw5AZf2QoXXS7cJS8gD2xPib6Rm5YxkzNF8cj7aYXA560qIMedJngw1iuKZf58Kj2hDYKuEx+4YXsobx7LqmUwyr9RcC34tdIk/aPWpzgztyD1aRnIfVEQL315SWQLszaIT34eU4MogfziDkLhz0qTfPG7NThR0ZM5V5DrN4viyvU5IRNmQ2UIZqbgc75Bnv74gm0hoxOz4v53UxVBZMKY2NLhnGqJLxAX10I7n522LQrTqC5IYWpeNH+bM11OC4YquJZ5ZeMyERYsmbb9MKwFsqjOC5Ni3Y5ejR3hHYE0i6uiYAavTEfPFsRDrWkbSOLSlOj4oyDyN+Rxgqn4sd3yLsFT+jUv2BQme3JPv5iYnpcuCotc+YL33wroNW8nRcvJYenfZq7MqO1MM6z31aKUGzZ32FKoaBHkvw9i4OqMbdz3PeNu8VFUPsfr3JY889lfYmxyThsE7fHdfeKaxNU2O7Q9ZnxQ6FSCKIHAqzpZ5OG2tPju/Liti3UDQXv58JBtbGJoqsKOwCt6x1zzGlMvLTZ+lDGbPkyrqiBoPZJ03ijpqg3G8yto310RHWFm0AVZNKwLCIWHqQ9PjYpPT4+JpiNDjuPRlQ7H8xZ7vn1A5lY7IrpCcoNBzitM0GZQyK6Mpe6MeFGls0noIEzhDFIRhvIDtYYglO+L+BVeVzqd4cPZCd61NjZ4m2+QEkyqAS+Uw98JgMAusS2vFRjvChEkHvhrBaubQXsIEJ8H5k5u2awaqdmgkPWdnbzUGbyL9dIBSAI6j8Vupdc6EYRu3do3mfGj/XoaOrF30m47qi0zuzXDekJ5G17Z4JF06R8GzM/mz9oIhWcDz0Z11VVXpJL+Aemdmrez0du5AAAAAElFTkSuQmCC" alt="vk"/>
+                    </a>
+                    <a href="https://t.me/sheymuh" target="_blank">
+                        <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAACXBIWXMAAAsTAAALEwEAmpwYAAAEnklEQVR4nO2aS2wbRRjHfae8xOuOqnbXalMkJLiAhDggBOVQaBFSpCKOoCJVnAoSQoKm0AMSJw6gIh4ioliigXbGjqzmUSVxaF4YE+okjpO6TrBD0zpOZuxde/dDM7YTO3bWM/auzcF/6bvsrmf3N99jvp21y9VRRx21TF39m4+6vfSEgkmPgqhHwWRYxXSSGyJDxWM97Jr9OP2I6/+kw1dSD7oxeVdB9LqKiKliCkKGiKlgOq4gcurIpbsPtBVAReQzFZO08MPvDbWhYnKu5UAKoicVRJNNA+wyBdOEG9NuxwEO9sG9KiK9dgNUASHyg3sQ9jkCcejXzcdURKechlB3bJIVD/shMJlrIQQUjMzZBsPCSUF0uvUQdNsztoQZi9c2QgDPGUx+ahKCnmw3hFq0hqsZWyecKLG17IWhDJwJavDM1YyFV2iioXWmsNg59/BdPgrvzWgQuG2ACQWdCWr1QqxH2huF1dZ+gBeHM/D1Yg7WtdLj7+jYSNb694impLzCeic7H/6Ij8LpaQ3GymZ/t3QDuJfqjaVg8o4wCG8AbQB4yWL2NV2vgAqlDLFxEQ0IQbAFSKqLlZz9XD4PscQaBOejoOm57eMXYzlBEGIe+C39cF0Q9Qp9vRGAl4uzf1ffK3gA1jfSEFpYgj/no7BFMxXnPgrpwvdyY3K8flhh0iM64BNls28lmsnC/M04zIQj8FdkCWhWq7rmxGidRMflRj4WyQ9PvYGOXivMfspi9pnyeQPiyX/hj3CEQ8wuLkNW06uvM4FPiioIomByUQCEXKv148NeCh+GdJ6UIiqFEQNgdiMaAz23kxPlCqcFEx1v58mgiEdqNohfzFXPZC2RsjAq2dzyLZ7ke+mXeF4ShE41DMLaCH8iD1s56zAqB2C2EFsBw7D24tlZ3QkQUjO0SnbIS+H4aBY+D+s8yTWjOoxKFo3/A6ZpnUdM3YGsI6HlkRn02FC6CoDZrcRa/TgEAMMEeLJfrtQrQskuUX5Ldjm0XAGxsnYbRBXZNOW8gQXLL9s8kx34g7HkNkRfcBkGltaFQS6vSCY6pnAQkdccaVGe86dhugjy3cQSXBoYgx9nYkIg529IJjomhlCLUggvOi47S55gjINcCCxA38Aot68CEd7VWunNcelEHxOC4CCInJIFOT1SKL3fjMxyCM9AAF7xJXlFqtX9MrGjT/kzsh55WxiEvbzIvlg93b8FU+FF6B2e4BBHfcmKNWhhs9o1N4lkoiOaetx/536XjNherKxXvpyMw8+7IErGSuzVROXq7l2VS3QFkbMuWe3HcJ+K6KrMjZ71bcDz3juWi+mF6E5r8Onf4omuNLr5wMS2YGS9ImJv/Z6F94Mab0QlQN5wNSMFk++dgJHLDdLbFAT3yiDsK351aguEguj1rn64x2WH+CLZjk1sRMK2f6JT/BsPsR2MFoJM2P5ZoTzMWrKpjci3toWTJRCm3awc2g9AV5uuTrJiNZ23/HZsrSKaUhD5RHrVtlPs5mwbs5A/xBAHIAZrAFnv1FaAWmLtNXtXYLPL3uLYK2nZHwYG2TF+zkteZcWj5iAdddSRywn9B9E5uZlJrzFcAAAAAElFTkSuQmCC" alt="tg"/>
+                    </a>
+                </div>
+            </div>
+        </div>
+    </body>

js/validation.js

@@ -0,0 +1,25 @@
+// модуль используется для валидации форма на странице
+
+const 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");
+            }
+        });
+    });
+};
+
+export default validation;

package.json

@@ -0,0 +1,31 @@
+{
+    "name": "pibd-23_sheymuhov_a.i._internet_programming",
+    "version": "1.0.0",
+    "type": "module",
+    "scripts": {
+        "start": "npm-run-all --parallel serve vite",
+        "vite": "vite",
+        "build": "vite build",
+        "serve": "http-server -p 4000 ./dist/",
+        "server": "json-server --watch ./database/data.json --port 3000",
+        "prod": "npm-run-all build 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": {
+        "eslint": "8.56.0",
+        "eslint-config-airbnb-base": "15.0.0",
+        "eslint-config-prettier": "10.0.2",
+        "eslint-plugin-html": "8.1.2",
+        "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"
+    }
+}

pageAccount.html

@@ -4,43 +4,56 @@
         <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="styleStreamingService.css" />
+        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.5/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-SgOJa3DmI69IUzQ2PVdRZhwQ+dy64/BUtbMJw1MZ8t5HZApcHrRKUc4W0kG879m7" crossorigin="anonymous">
+        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css">
+        <link rel="stylesheet" href="styleStreamingService.css"/>
     </head>
-    <body>
+    <body class="min-vh-100 d-flex flex-column m-0 p-0">
-        <div class="header">
+        <header class="d-flex align-items-center justify-content-between position-sticky h-60 p-3">
-            <div class="header-logo">
+            <div class="header-logo d-flex align-items-center g-3">
-                <a href="pageMain.html"><img src="Resources\КАЙФ.jpg" alt="Логотип"></a>
+                <a href="pageMain.html"><img src="Resources\КАЙФ.jpg" alt="Логотип"/></a>
                 <h1>НАЗВАНИЕ СЕРВИСА</h1>
             </div>
-            <nav class="navbar">
+            <nav class="navbar d-flex align-items-center justify-content-center me-3 g-3 column-gap-2">
                 <a href="pageCategories.html">Категории</a>
-                <nav class="dropdown">
+                <nav class="dropdown position-relative">
                     <span><a>Мой аккаунт ▾</a></span>
                     <nav class="features-menu">
-                    <a href="pageAccount.html">Настройки</a>
+                        <nav class="features-item"><a href="pageAccount.html">Настройки</a></nav>
-                    <a href="pageSubscriptions.html">Подписки</a>
+                        <nav class="features-item"><a href="pageSubscriptions.html">Подписки</a></nav>
-                    <a href="pageSavedStreams.html">Сохраненные трансляции</a>
+                        <nav class="features-item"><a href="pageSavedStreams.html">Сохраненные трансляции</a></nav>
                     </nav>
                 </nav>
             </nav>
-        </div>
+        </header>
-        <div class="content">
+        <div class="content flex-grow-1 p-3 px-4">
-            <h2><em>Ваш никнейм</em></h2>
+            <h2><em>Ваш никнейм</em> <i class="bi bi-patch-check-fill"></i></h2>
-            <div class="avatar"><img src="Resources\derzko.webp" alt="derzko"></div>
+            <div class="avatar d-flex"><img src="Resources\derzko.webp" alt="derzko" /></div>
             <p>ПОЛ МИЛЛИОНА ПОДПИЩИКОВ</p>
-            <div class="header-logo">
+            <div class="buttons d-flex align-items-center gap-3">
                 <div class="button">Выйти из аккаунта</div>
                 <div class="button">Сменить пароль</div>
             </div>
+            <div class="mb-2">
+                <a class="btn btn-primary" href="/pageForm"
+                    ><i class="bi bi-plus-circle-fill me-2"></i>Создать новую запись</a
+                >
+            </div>
+            <videos-table></videos-table>
         </div>
-        <div class="footer">
+        <div class="footer overflow-hidden flex-shrink-1 h-75 p-0 px-4">
-            <div class="footer-content">
+            <div class="footer-content d-flex justify-content-between align-items-center">
-                <div class="company-name">RBCS CORP.</div>
+                <div class="company-name flex-grow-1">RBCS CORP. <i class="bi bi-c-circle"></i></div>
-                <div class="footer-images">
+                <div class="footer-images d-flex gap-3 p-3">
-                    <img src="Resources\vk_icon.png" alt="vk" class="footer-image">
+                    <a href="https://vk.com/sheym_not_shame" target="_blank">
-                    <img src="Resources\tg_icon.png" alt="tg" class="footer-image">
+                        <img src="Resources\vk_icon.png" alt="vk"/>
+                    </a>
+                    <a href="https://t.me/sheymuh" target="_blank">
+                        <img src="Resources\tg_icon.png" alt="tg"/>
+                    </a>
                 </div>
             </div>
         </div>
+        <script type="module" src="/components/videos/table/controller.js"></script>
     </body>
 </html>

pageCategories.html

@@ -4,27 +4,29 @@
         <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="styleStreamingService.css" />
+        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.5/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-SgOJa3DmI69IUzQ2PVdRZhwQ+dy64/BUtbMJw1MZ8t5HZApcHrRKUc4W0kG879m7" crossorigin="anonymous">
+        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css">
+        <link rel="stylesheet" href="styleStreamingService.css"/>
     </head>
-    <body>
+    <body class="min-vh-100 d-flex flex-column m-0 p-0">
-        <div class="header">
+        <header class="d-flex align-items-center justify-content-between position-sticky h-60 p-3">
-            <div class="header-logo">
+            <div class="header-logo d-flex align-items-center g-3">
-                <a href="pageMain.html"><img src="Resources\КАЙФ.jpg" alt="Логотип"></a>
+                <a href="pageMain.html"><img src="Resources\КАЙФ.jpg" alt="Логотип"/></a>
                 <h1>НАЗВАНИЕ СЕРВИСА</h1>
             </div>
-            <nav class="navbar">
+            <nav class="navbar d-flex align-items-center justify-content-center me-3 g-3 column-gap-2">
                 <a href="pageCategories.html">Категории</a>
-                <nav class="dropdown">
+                <nav class="dropdown position-relative">
                     <span><a>Мой аккаунт ▾</a></span>
                     <nav class="features-menu">
-                    <a href="pageAccount.html">Настройки</a>
+                        <nav class="features-item"><a href="pageAccount.html">Настройки</a></nav>
-                    <a href="pageSubscriptions.html">Подписки</a>
+                        <nav class="features-item"><a href="pageSubscriptions.html">Подписки</a></nav>
-                    <a href="pageSavedStreams.html">Сохраненные трансляции</a>
+                        <nav class="features-item"><a href="pageSavedStreams.html">Сохраненные трансляции</a></nav>
                     </nav>
                 </nav>
             </nav>
-        </div>
+        </header>
-        <div class="content">
+        <div class="content flex-grow-1 p-3 px-4">
             <h2>Популярные категории</h2>
             <ol>
                 <li>Общение</li>
@@ -33,12 +35,16 @@
                 <li>пупупу</li>
             </ol>
         </div>
-        <div class="footer">
+        <div class="footer overflow-hidden flex-shrink-1 h-75 p-0 px-4">
-            <div class="footer-content">
+            <div class="footer-content d-flex justify-content-between align-items-center">
-                <div class="company-name">RBCS CORP.</div>
+                <div class="company-name flex-grow-1">RBCS CORP. <i class="bi bi-c-circle"></i></div>
-                <div class="footer-images">
+                <div class="footer-images d-flex gap-3 p-3">
-                    <img src="Resources\vk_icon.png" alt="vk" class="footer-image">
+                    <a href="https://vk.com/sheym_not_shame" target="_blank">
-                    <img src="Resources\tg_icon.png" alt="tg" class="footer-image">
+                        <img src="Resources\vk_icon.png" alt="vk"/>
+                    </a>
+                    <a href="https://t.me/sheymuh" target="_blank">
+                        <img src="Resources\tg_icon.png" alt="tg"/>
+                    </a>
                 </div>
             </div>
         </div>

pageForm.html

@@ -0,0 +1,93 @@
+<!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>
+        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.5/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-SgOJa3DmI69IUzQ2PVdRZhwQ+dy64/BUtbMJw1MZ8t5HZApcHrRKUc4W0kG879m7" crossorigin="anonymous">
+        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css">
+        <link rel="stylesheet" href="styleStreamingService.css"/>
+    </head>
+    <body class="min-vh-100 d-flex flex-column m-0 p-0">
+        <header class="d-flex align-items-center justify-content-between position-sticky h-60 p-3">
+            <div class="header-logo d-flex align-items-center g-3">
+                <a href="pageMain.html"><img src="Resources\КАЙФ.jpg" alt="Логотип"/></a>
+                <h1>НАЗВАНИЕ СЕРВИСА</h1>
+            </div>
+            <nav class="navbar d-flex align-items-center justify-content-center me-3 g-3 column-gap-2">
+                <a href="pageCategories.html">Категории</a>
+                <nav class="dropdown position-relative">
+                    <span><a>Мой аккаунт ▾</a></span>
+                    <nav class="features-menu">
+                        <nav class="features-item"><a href="pageAccount.html">Настройки</a></nav>
+                        <nav class="features-item"><a href="pageSubscriptions.html">Подписки</a></nav>
+                        <nav class="features-item"><a href="pageSavedStreams.html">Сохраненные трансляции</a></nav>
+                    </nav>
+                </nav>
+            </nav>
+        </header>
+        <div class="content flex-grow-1 p-3 px-4">
+            <videos-form></videos-form>
+            <template id="videos-form-template">
+                <div class="row justify-content-center">
+                    <form class="col col-md-6 needs-validation">
+                        <div class="mb-2">
+                            <label for="id" class="form-label">Номер</label>
+                            <input type="text" class="form-control" id="id" readonly disabled />
+                        </div>
+                        <div class="mb-2">
+                            <label for="name" class="form-label">Название</label>
+                            <input type="text" class="form-control" id="name" required />
+                        </div>
+                        <div class="mb-2">
+                            <label for="image" class="form-label">Превью</label>
+                            <input type="text" class="form-control" id="image" required />
+                        </div>
+                        <div class="mb-2">
+                            <label for="description" class="form-label">Описание</label>
+                            <input type="text" class="form-control" id="description" required />
+                        </div>
+                        <div class="mb-2">
+                            <label for="playlist" class="form-label">Плейлист</label>
+                            <select class="form-select" id="playlist">
+                                <option value="" selected>Выберите плейлист</option>
+                            </select>
+                        </div>
+                        <div class="mb-2">
+                            <label for="category" class="form-label">Категория</label>
+                            <select class="form-select" id="category" 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-100">
+                                    Сохранить
+                                </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-100">
+                                    Назад
+                                </button>
+                            </div>
+                        </div>
+                    </form>
+                </div>
+            </template>
+        </div>
+        <div class="footer overflow-hidden flex-shrink-1 h-75 p-0 px-4">
+            <div class="footer-content d-flex justify-content-between align-items-center">
+                <div class="company-name flex-grow-1">RBCS CORP. <i class="bi bi-c-circle"></i></div>
+                <div class="footer-images d-flex gap-3 p-3">
+                    <a href="https://vk.com/sheym_not_shame" target="_blank">
+                        <img src="Resources\vk_icon.png" alt="vk"/>
+                    </a>
+                    <a href="https://t.me/sheymuh" target="_blank">
+                        <img src="Resources\tg_icon.png" alt="tg"/>
+                    </a>
+                </div>
+            </div>
+        </div>
+        <script type="module" src="/components/videos/form/controller.js"></script>
+    </body>
+</html>

pageMain.html

@@ -1,56 +1,180 @@
-<!DOCTYPE html>
+<!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>
+        <link
+            rel="stylesheet"
+            href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.5/dist/css/bootstrap.min.css"
+            integrity="sha384-SgOJa3DmI69IUzQ2PVdRZhwQ+dy64/BUtbMJw1MZ8t5HZApcHrRKUc4W0kG879m7"
+            crossorigin="anonymous"
+        />
+        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css" />
         <link rel="stylesheet" href="styleStreamingService.css" />
     </head>
-    <body>
+    <body class="min-vh-100 d-flex flex-column m-0 p-0">
-        <div class="header">
+        <header class="d-flex align-items-center justify-content-between position-sticky h-60 p-3">
-            <div class="header-logo">
+            <div class="header-logo d-flex align-items-center g-3">
-                <a href="pageMain.html"><img src="Resources\КАЙФ.jpg" alt="Логотип"></a>
+                <a href="pageMain.html"><img src="Resources\КАЙФ.jpg" alt="Логотип" /></a>
                 <h1>НАЗВАНИЕ СЕРВИСА</h1>
             </div>
-            <nav class="navbar">
+            <nav class="navbar d-flex align-items-center justify-content-center me-3 g-3 column-gap-2">
                 <a href="pageCategories.html">Категории</a>
-                <nav class="dropdown">
+                <nav class="dropdown position-relative">
                     <span><a>Мой аккаунт ▾</a></span>
                     <nav class="features-menu">
-                    <a href="pageAccount.html">Настройки</a>
+                        <nav class="features-item"><a href="pageAccount.html">Настройки</a></nav>
-                    <a href="pageSubscriptions.html">Подписки</a>
+                        <nav class="features-item"><a href="pageSubscriptions.html">Подписки</a></nav>
-                    <a href="pageSavedStreams.html">Сохраненные трансляции</a>
+                        <nav class="features-item"><a href="pageSavedStreams.html">Сохраненные трансляции</a></nav>
                     </nav>
                 </nav>
             </nav>
-        </div>
+        </header>
-        <div class="content">
+        <div class="content flex-grow-1 p-3 px-4" id="content">
-            <p>Сейчас в эфире</p>
+            <p>Сейчас в эфире <i class="bi bi-cast"></i></p>
-            <div class="photo-grid-container">
+            <form id="imageForm" class="mb-4">
-                <div class="photo-grid">
+                <div class="photo-grid-container d-flex justify-content-center mb-2">
-                    <div class="photo-grid-item"><img src="Resources\cs2.webp" alt="cs2"></div>
+                    <div class="photo-grid d-flex align-items-center flex-wrap w-100">
-                    <div class="photo-grid-item"><img src="Resources\derzko.webp" alt="derzko"></div>
+                        <div class="photo-grid-item">
-                    <div class="photo-grid-item"><img src="Resources\stardew.webp" alt="stardew"></div>
+                            <input
-                    <div class="photo-grid-item"><img src="Resources\teddy.jpg" alt="teddy"></div>
+                                type="checkbox"
-                    <div class="photo-grid-item"><img src="Resources\lofi_girl.jpg" alt="lofi_girl"></div>
+                                name="images"
+                                value="https://steamuserimages-a.akamaihd.net/ugc/2462990917964003785/9E09A87AE9B299BC1F0FC1CBA9F20DB16289442A/?imw=512&amp;imh=298&amp;ima=fit&amp;impolicy=Letterbox&amp;imcolor=%23000000&amp;letterbox=true"
+                                id="cs2"
+                            />
+                            <label for="cs2"
+                                ><img
+                                    src="https://steamuserimages-a.akamaihd.net/ugc/2462990917964003785/9E09A87AE9B299BC1F0FC1CBA9F20DB16289442A/?imw=512&amp;imh=298&amp;ima=fit&amp;impolicy=Letterbox&amp;imcolor=%23000000&amp;letterbox=true"
+                                    alt="cs2"
+                            /></label>
+                        </div>
+                        <div class="photo-grid-item">
+                            <input
+                                type="checkbox"
+                                name="images"
+                                value="https://avatars.mds.yandex.net/i?id=7839e8d6f40309bdce67fac62990d108_sr-10636981-images-thumbs&n=13"
+                                id="derzko"
+                            />
+                            <label for="derzko"
+                                ><img
+                                    src="https://avatars.mds.yandex.net/i?id=7839e8d6f40309bdce67fac62990d108_sr-10636981-images-thumbs&n=13"
+                                    alt="derzko"
+                            /></label>
+                        </div>
+                        <div class="photo-grid-item">
+                            <input
+                                type="checkbox"
+                                name="images"
+                                value="https://vkplay.ru/pre_0x736_resize/hotbox/content_files/news/2020/02/12/fe52b98a1367439ea2be293fcf48224a.jpg?quality=85"
+                                id="stardew"
+                            />
+                            <label for="stardew"
+                                ><img
+                                    src="https://vkplay.ru/pre_0x736_resize/hotbox/content_files/news/2020/02/12/fe52b98a1367439ea2be293fcf48224a.jpg?quality=85"
+                                    alt="stardew"
+                            /></label>
+                        </div>
+                        <div class="photo-grid-item">
+                            <input
+                                type="checkbox"
+                                name="images"
+                                value="https://avatars.mds.yandex.net/i?id=c111e02e6999cca7c4a7aa47f00a2ab3c384b6dd-5884537-images-thumbs&n=13"
+                                id="teddy"
+                            />
+                            <label for="teddy"
+                                ><img
+                                    src="https://avatars.mds.yandex.net/i?id=c111e02e6999cca7c4a7aa47f00a2ab3c384b6dd-5884537-images-thumbs&n=13"
+                                    alt="teddy"
+                            /></label>
+                        </div>
+                        <div class="photo-grid-item">
+                            <input
+                                type="checkbox"
+                                name="images"
+                                value="https://i.pinimg.com/736x/a8/f1/c0/a8f1c04546867fbcd5eccd41c115fb51.jpg"
+                                id="lofi_girl"
+                            />
+                            <label for="lofi_girl"
+                                ><img
+                                    src="https://i.pinimg.com/736x/a8/f1/c0/a8f1c04546867fbcd5eccd41c115fb51.jpg"
+                                    alt="lofi_girl"
+                            /></label>
+                        </div>
+                    </div>
                 </div>
-            </div>
+                <button type="submit" class="btn btn-primary">Смотреть позже</button>
-            <h3>Популярные каналы</h3>
+            </form>
+            <h3>Популярные каналы <i class="bi bi-patch-check-fill"></i></h3>
             <ul>
-                <li><a href="pageAccount.html" target="_blank"><em>ВЫ</em> самый популярный стример на данной платформе!!!</a></li>
+                <li>
+                    <a href="pageAccount.html" target="_blank"
+                        ><em>ВЫ</em> самый популярный стример на данной платформе!!!</a
+                    >
+                </li>
                 <li>какой-то стример 1</li>
                 <li>какой-то стример 2</li>
                 <li>ммм <b>МАРМОК</b></li>
             </ul>
-        </div>
+            <h2>Смотреть позже <i class="bi bi-clock-fill"></i></h2>
-        <div class="footer">
+            <div class="photo-grid-container d-flex justify-content-center">
-            <div class="footer-content">
+                <div class="photo-grid d-flex align-items-center flex-wrap w-100" id="savedImagesGrid">
-                <div class="company-name">RBCS CORP.</div>
+                    <div class="photo-grid-item">
-                <div class="footer-images">
+                        <img
-                    <a href="https://vk.com/sheym_not_shame" target="_blank"><img src="Resources\vk_icon.png" alt="vk" class="footer-image"></a>
+                            src="https://sun9-27.userapi.com/impf/c9811/u99622377/d_9475926f.jpg?quality=96&as=50x50,100x100&sign=a4fcc81d8c851f41a7f85dea825afc66&u=pHWjezk_9pOPyRtoH8161qsxD963pzSE2bk8P8vDAyE&cs=100x100"
-                    <a href="https://t.me/sheymuh" target="_blank"><img src="Resources\tg_icon.png" alt="tg" class="footer-image"></a>
+                            alt="pusto"
+                        />
+                    </div>
                 </div>
             </div>
         </div>
+        <div class="footer overflow-hidden flex-shrink-1 h-75 p-0 px-4">
+            <div class="footer-content d-flex justify-content-between align-items-center">
+                <div class="company-name flex-grow-1">RBCS CORP. <i class="bi bi-c-circle"></i></div>
+                <div class="footer-images d-flex gap-3 p-3">
+                    <a href="https://vk.com/sheym_not_shame" target="_blank">
+                        <img src="Resources\vk_icon.png" alt="vk" />
+                    </a>
+                    <a href="https://t.me/sheymuh" target="_blank">
+                        <img src="Resources\tg_icon.png" alt="tg" />
+                    </a>
+                </div>
+            </div>
+        </div>
+        <script>
+            document.getElementById("imageForm").addEventListener("submit", (event) => {
+                event.preventDefault();
+
+                const selectedImages = Array.from(document.querySelectorAll('input[name="images"]:checked')).map(
+                    (checkbox) => checkbox.value
+                );
+                const savedImagesGrid = document.getElementById("savedImagesGrid");
+
+                const initialImageSrc =
+        "https://sun9-27.userapi.com/impf/c9811/u99622377/d_9475926f.jpg?quality=96&as=50x50,100x100&sign=a4fcc81d8c851f41a7f85dea825afc66&u=pHWjezk_9pOPyRtoH8161qsxD963pzSE2bk8P8vDAyE&cs=100x100";
+
+                const existingImage = Array.from(savedImagesGrid.children).find((item) => {
+                    const imgElement = item.querySelector("img");
+                    return imgElement && imgElement.src === initialImageSrc;
+                });
+                if (existingImage) {
+                    savedImagesGrid.removeChild(existingImage);
+                }
+
+                selectedImages.forEach((image) => {
+                    const imageExists = Array.from(savedImagesGrid.children).some((item) => {
+                        const imgElement = item.querySelector("img");
+                        return imgElement && imgElement.src === image;
+                    });
+
+                    if (!imageExists) {
+                        const item = document.createElement("div");
+                        item.className = "photo-grid-item";
+                        item.innerHTML = `<img src="${image}" alt="сохраненное изображение"/>`;
+                        savedImagesGrid.appendChild(item);
+                    }
+                });
+            });
+        </script>
     </body>
 </html>

pageSavedStreams.html

@@ -1,55 +1,79 @@
-<!DOCTYPE html>
+<!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>
+        <link
+            href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.5/dist/css/bootstrap.min.css"
+            rel="stylesheet"
+            integrity="sha384-SgOJa3DmI69IUzQ2PVdRZhwQ+dy64/BUtbMJw1MZ8t5HZApcHrRKUc4W0kG879m7"
+            crossorigin="anonymous"
+        />
+        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css" />
         <link rel="stylesheet" href="styleStreamingService.css" />
     </head>
-    <body>
+    <body class="min-vh-100 d-flex flex-column m-0 p-0">
-        <div class="header">
+        <header class="d-flex align-items-center justify-content-between position-sticky h-60 p-3">
-            <div class="header-logo">
+            <div class="header-logo d-flex align-items-center g-3">
-                <a href="pageMain.html"><img src="Resources\КАЙФ.jpg" alt="Логотип"></a>
+                <a href="pageMain.html"><img src="Resources\КАЙФ.jpg" alt="Логотип" /></a>
                 <h1>НАЗВАНИЕ СЕРВИСА</h1>
             </div>
-            <nav class="navbar">
+            <nav class="navbar d-flex align-items-center justify-content-center me-3 g-3 column-gap-2">
                 <a href="pageCategories.html">Категории</a>
-                <nav class="dropdown">
+                <nav class="dropdown position-relative">
                     <span><a>Мой аккаунт ▾</a></span>
                     <nav class="features-menu">
-                    <a href="pageAccount.html">Настройки</a>
+                        <nav class="features-item"><a href="pageAccount.html">Настройки</a></nav>
-                    <a href="pageSubscriptions.html">Подписки</a>
+                        <nav class="features-item"><a href="pageSubscriptions.html">Подписки</a></nav>
-                    <a href="pageSavedStreams.html">Сохраненные трансляции</a>
+                        <nav class="features-item"><a href="pageSavedStreams.html">Сохраненные трансляции</a></nav>
                     </nav>
                 </nav>
             </nav>
-        </div>
+        </header>
-        <div class="content">
+        <div class="content flex-grow-1 p-3 px-4">
-            <h2>Запланированные трансляции</h2>
+            <h2>Смотреть позже <i class="bi bi-clock-fill"></i></h2>
-            <div class="photo-grid-container">
+            <div class="photo-grid-container d-flex justify-content-center">
-                <div class="photo-grid">
+                <div class="photo-grid d-flex align-items-center flex-wrap w-100" id="savedImagesGrid">
-                    <div class="photo-grid-item"><img src="Resources\стрим ксго.webp" alt="стрим ксго"></div>
+                    <div class="photo-grid-item"><img src="Resources\2016.jpeg" alt="стрим ксго" /></div>
-                    <div class="photo-grid-item"><img src="Resources\goats.png" alt="goats"></div>
+                    <div class="photo-grid-item"><img src="Resources\асмр человек паук.webp" alt="асмр" /></div>
-                    <div class="photo-grid-item"><img src="Resources\папаня.jpg" alt="папаня"></div>
+                    <div class="photo-grid-item"><img src="Resources\резня.jpg" alt="резня" /></div>
                 </div>
             </div>
-            <h2>Смотреть позже</h2>
+            <h2>Запланированные трансляции <i class="bi bi-calendar-event"></i></h2>
-            <div class="photo-grid-container">
+            <div class="photo-grid-container d-flex justify-content-center">
-                <div class="photo-grid">
+                <div class="photo-grid d-flex align-items-center flex-wrap w-100">
-                    <div class="photo-grid-item"><img src="Resources\2016.jpeg" alt="стрим ксго"></div>
+                    <div class="photo-grid-item"><img src="Resources\стрим ксго.webp" alt="стрим ксго" /></div>
-                    <div class="photo-grid-item"><img src="Resources\асмр человек паук.webp" alt="асмр"></div>
+                    <div class="photo-grid-item"><img src="Resources\goats.png" alt="goats" /></div>
-                    <div class="photo-grid-item"><img src="Resources\резня.jpg" alt="резня"></div>
+                    <div class="photo-grid-item"><img src="Resources\папаня.jpg" alt="папаня" /></div>
                 </div>
             </div>
         </div>
-        <div class="footer">
+        <div class="footer overflow-hidden flex-shrink-1 h-75 p-0 px-4">
-            <div class="footer-content">
+            <div class="footer-content d-flex justify-content-between align-items-center">
-                <div class="company-name">RBCS CORP.</div>
+                <div class="company-name flex-grow-1">RBCS CORP. <i class="bi bi-c-circle"></i></div>
-                <div class="footer-images">
+                <div class="footer-images d-flex gap-3 p-3">
-                    <img src="Resources\vk_icon.png" alt="vk" class="footer-image">
+                    <a href="https://vk.com/sheym_not_shame" target="_blank">
-                    <img src="Resources\tg_icon.png" alt="tg" class="footer-image">
+                        <img src="Resources\vk_icon.png" alt="vk" />
+                    </a>
+                    <a href="https://t.me/sheymuh" target="_blank">
+                        <img src="Resources\tg_icon.png" alt="tg" />
+                    </a>
                 </div>
             </div>
         </div>
+        <!-- <script>
+            const savedImages = JSON.parse(localStorage.getItem("savedImages")) || [];
+
+            const savedImagesGrid = document.getElementById("savedImagesGrid");
+
+            savedImages.forEach((image) => {
+                console.log(image);
+                const item = document.createElement("div");
+                item.className = "photo-grid-item";
+                item.innerHTML = `<img src="${image}" alt="сохраненное изображение"/>`;
+                savedImagesGrid.appendChild(item);
+            });
+        </script> -->
     </body>
 </html>

pageSubscriptions.html

@@ -4,40 +4,49 @@
         <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="styleStreamingService.css" />
+        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.5/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-SgOJa3DmI69IUzQ2PVdRZhwQ+dy64/BUtbMJw1MZ8t5HZApcHrRKUc4W0kG879m7" crossorigin="anonymous">
+        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css">
+        <link rel="stylesheet" href="styleStreamingService.css"/>
     </head>
-    <body>
+    <body class="min-vh-100 d-flex flex-column m-0 p-0">
-        <div class="header">
+        <header class="d-flex align-items-center justify-content-between position-sticky h-60 p-3">
-            <div class="header-logo">
+            <div class="header-logo d-flex align-items-center g-3">
-                <a href="pageMain.html"><img src="Resources\КАЙФ.jpg" alt="Логотип"></a>
+                <a href="pageMain.html"><img src="Resources\КАЙФ.jpg" alt="Логотип"/></a>
                 <h1>НАЗВАНИЕ СЕРВИСА</h1>
             </div>
-            <nav class="navbar">
+            <nav class="navbar d-flex align-items-center justify-content-center me-3 g-3 column-gap-2">
                 <a href="pageCategories.html">Категории</a>
-                <nav class="dropdown">
+                <nav class="dropdown position-relative">
                     <span><a>Мой аккаунт ▾</a></span>
                     <nav class="features-menu">
-                    <a href="pageAccount.html">Настройки</a>
+                        <nav class="features-item"><a href="pageAccount.html">Настройки</a></nav>
-                    <a href="pageSubscriptions.html">Подписки</a>
+                        <nav class="features-item"><a href="pageSubscriptions.html">Подписки</a></nav>
-                    <a href="pageSavedStreams.html">Сохраненные трансляции</a>
+                        <nav class="features-item"><a href="pageSavedStreams.html">Сохраненные трансляции</a></nav>
                     </nav>
                 </nav>
             </nav>
-        </div>
+        </header>
-        <div class="content">
+        <div class="content flex-grow-1 p-3 px-4">
-            <h2>Ваши подписки</h2>
+            <h2>Ваши подписки <i class="bi bi-bookmark-heart-fill"></i></h2>
             <ol>
-                <li>НОРМ канал<div class="button">Вы подписаны</div></li>
+                <li>НОРМ канал</li>
-                <li>САМЫЙ КРУТОЙ КАНАЛ<div class="button blue-button">Вы спонсор</div></li>
+                <div class="subButtons d-flex"><div class="button">Вы подписаны</div></div>
-                <li>ПРОСТО КРУТОЙ канал<div class="button">Вы подписаны</div></li>
+                <li>САМЫЙ КРУТОЙ КАНАЛ</li>
+                <div class="subButtons d-flex"><div class="button blue-button">Вы спонсор</div></div>
+                <li>ПРОСТО КРУТОЙ канал</li>
+                <div class="subButtons d-flex"><div class="button">Вы подписаны</div></div>
             </ol>
         </div>
-        <div class="footer">
+        <div class="footer overflow-hidden flex-shrink-1 h-75 p-0 px-4">
-            <div class="footer-content">
+            <div class="footer-content d-flex justify-content-between align-items-center">
-                <div class="company-name">RBCS CORP.</div>
+                <div class="company-name flex-grow-1">RBCS CORP. <i class="bi bi-c-circle"></i></div>
-                <div class="footer-images">
+                <div class="footer-images d-flex gap-3 p-3">
-                    <img src="Resources\vk_icon.png" alt="vk" class="footer-image">
+                    <a href="https://vk.com/sheym_not_shame" target="_blank">
-                    <img src="Resources\tg_icon.png" alt="tg" class="footer-image">
+                        <img src="Resources\vk_icon.png" alt="vk"/>
+                    </a>
+                    <a href="https://t.me/sheymuh" target="_blank">
+                        <img src="Resources\tg_icon.png" alt="tg"/>
+                    </a>
                 </div>
             </div>
         </div>

server.json

@@ -0,0 +1,9 @@
+{
+  "/": {
+    "cors": true,
+    "headers": {
+      "Access-Control-Allow-Origin": "*",
+      "Access-Control-Allow-Methods": "GET, POST, PUT, DELETE, OPTIONS"
+    }
+  }
+}

styleStreamingService.css

@@ -1,11 +1,6 @@
 body {
-    display: flex;
-    flex-direction: column;
-    min-height: 100vh;
     font-family: "Helvetica", "Arial", sans-serif;
     font-size: 18px;
-    margin: 0;
-	padding: 0;
     background-color: #ade8f4;
 }
 
@@ -20,18 +15,15 @@ h2 {
     text-align: left;
 }
 
-
 /* Мобильное устройство (ширина области отображения от 0 до 400px)*/
 @media only screen and (max-width: 400px) {
-    body {
-        background-color: #ff0008;
-        width: fit-content;
-    }
     h1 {
-        font-size: 1em;;
+        font-size: 1em;
     }
-    .header {
+    h2,
-        gap: 20px;
+    h3,
+    p {
+        text-align: center;
     }
     .navbar {
         flex-direction: column;
@@ -39,33 +31,37 @@ h2 {
         row-gap: 5px;
     }
     .navbar a {
-        height: 10px;
+        height: 30px;
+    }
+    .dropdown:hover .features-menu {
+        height: max-content;
+    }
+    .features-item a {
+        height: 40px;
+        text-align: start;
+    }
+    .avatar {
+        justify-content: center;
     }
     .avatar img {
         width: 200px;
         height: auto;
     }
+    .photo-grid {
+        justify-content: center;
+    }
+    .subButtons {
+        justify-content: center;
+    }
 }
 
 /* Планшет (ширина области отображения от 401 до 960px)*/
 @media only screen and (min-width: 401px) and (max-width: 960px) {
     body {
-        background-color: #ffa200;
+        justify-content: center;
-        width: fit-content;
-    }
-    .header {
-        gap: 20px;
     }
 }
 
-/* ПК (ширина области отображения от 961 до inf px) */
-/* @media only screen and (min-width: 961px) {
-    body {
-        background-color: #b2d6ff;
-    }
-} */
-
-
 .button {
     color: #081c15;
     background-color: #90e0ef;
@@ -91,48 +87,28 @@ h2 {
     background: #016296;
 }
 
-.header {
+header {
-    display: flex;
-    top: 0;
-    left: 0;
-    height: 60px;
-    position: sticky;
     background-color: #00b4d8;
     color: #081c15;
-    align-items: center;
-    justify-content: space-between;
-    padding: 10px;
     box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
 }
 
-.header-logo {
-    display: flex;
-    align-items: center;
-    gap: 15px;
-}
-
 .header-logo img {
     width: 50px;
     height: auto;
-}
+    margin: 5px;
-
-.navbar {
-    display: flex;
-    justify-content: center;
-    column-gap: 15px;
-    margin-right: 20px;
 }
 
 .navbar a {
     display: flex;
     text-decoration: none;
-    width: fit-content;
     align-items: center;
     justify-content: center;
+    padding: 8px 15px;
+    width: fit-content;
     color: #081c15;
     font-weight: bold;
     background: #90e0ef;
-    padding: 8px 15px;
     border-radius: 5px;
 }
 
@@ -142,7 +118,6 @@ h2 {
 
 .dropdown {
     width: max-content;
-    position: relative;
 }
 
 .dropdown > span {
@@ -156,8 +131,7 @@ h2 {
     flex-direction: column;
     background: #90e0ef;
     border-radius: 5px;
-    padding-top: 20px;
+    padding: 5px;
-
     position: absolute;
     z-index: 1;
 }
@@ -166,29 +140,9 @@ h2 {
     display: none;
 }
 
-
+.features-item:hover {
-.content {
+    border-radius: 5px;
-    flex: 1;
+    background: #48cae4;
-    padding: 10px 20px;
-}
-
-.avatar {
-    display: flex;
-    justify-content: left;
-}
-
-.photo-grid-container {
-    display: flex;
-    justify-content: center;
-}
-
-.photo-grid {
-    width: 100%;
-    display: flex;
-    justify-content: left;
-    align-items: center;
-    flex-wrap: wrap;
-    flex-direction: row;
 }
 
 .photo-grid img {
@@ -204,32 +158,11 @@ h2 {
     border: 2px solid #fff;
 }
 
-
 .footer {
-	height: 80px;
     background-color: #023047;
     text-align: center;
-    padding: 0 40px;
-}
-
-.footer-content {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
 }
 
 .company-name {
-    flex: 1; /* Занимает доступное пространство */
     color: #ade8f4;
 }
-
-.footer-images {
-    display: flex;
-    gap: 20px;
-    padding: 10px;
-}
-
-.footer-image {
-    width: 60px;
-    height: auto;
-}

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, "pageMain.html"),
+                page2: resolve(__dirname, "pageCategories.html"),
+                page3: resolve(__dirname, "pageAccount.html"),
+                page4: resolve(__dirname, "pageSubscriptions.html"),
+                page5: resolve(__dirname, "pageSavedStreams.html"),
+                page6: resolve(__dirname, "pageForm.html"),
+            },
+        },
+    },
+});