проанализируй код ниже index.html

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>Каталог товаров</title>
    <!-- Подключение шрифта Open Sans -->
    <link rel="stylesheet" href="styles.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link href="https://fonts.googleapis.com/css2?family=Open+Sans&display=swap" rel="stylesheet">
</head>
<body>

<!-- Страница ввода данных работника -->
<div id="workerData" class="container">
    <h1>Введите данные работника</h1>
    <form id="workerForm">
        <label for="workerName">ФИО:</label>
        <input type="text" id="workerName" name="workerName" required>
        <label for="workerPhone">Номер телефона:</label>
        <input type="text" id="workerPhone" name="workerPhone" required>
        <button type="submit">Начать работу</button>
    </form>
</div>

<!-- Основное содержимое -->
<div id="mainContent" class="container" style="display:none;">
    <h2 id="currentTime"></h2>
    <button id="endWorkButton">Закончить работу</button>
    <h1>Добавить новый товар</h1>
    <form id="productForm">
        <!-- Название товара -->
        <label for="productName">Название товара* (макс. 50 символов)</label>
        <input type="text" id="productName" name="productName" required maxlength="50">

        <!-- Цена -->
        <label for="productPrice">Цена (диапазон)* (макс. 20 символов)</label>
        <input type="text" id="productPrice" name="productPrice" required maxlength="20">

        <!-- Вид кожи -->
        <label for="productLeather">Вид кожи (макс. 40 символов)</label>
        <input type="text" id="productLeather" name="productLeather" maxlength="40">

        <!-- Описание товара -->
        <label for="productDescription">Описание товара</label>
        <textarea id="productDescription" name="productDescription"></textarea>

        <!-- Фото -->
        <label for="productPhoto">Фото*</label>
        <input type="file" id="productPhoto" name="productPhoto" accept="image/*">

        <!-- Количество -->
        <label for="productQuantity">Количество в наличии (макс. 10 цифр)</label>
        <input type="number" id="productQuantity" name="productQuantity" min="0" max="9999999999">

        <!-- Кнопка отправки -->
        <button type="submit">Добавить товар</button>
    </form>

    <!-- Поиск по названию -->
    <h2>Поиск товаров</h2>
    <input type="text" id="searchInput" placeholder="Поиск по названию">

    <!-- Сортировка -->
    <h3>Сортировка</h3>
    <select id="sortSelect">
        <option value="name">По названию</option>
        <option value="price">По цене</option>
        <option value="leather">По виду кожи</option>
        <option value="quantity">По количеству</option>
    </select>

    <h2>Список товаров</h2>
    <table id="productTable">
        <thead>
            <tr>
                <th>Название</th>
                <th>Цена</th>
                <th>Вид кожи</th>
                <th>Описание</th>
                <th>Фото</th>
                <th>Количество</th>
                <th>Дата добавления</th>
                <th>QR код</th>
                <th>Действия</th>
            </tr>
        </thead>
        <tbody>
            <!-- Товары будут добавляться здесь -->
        </tbody>
    </table>

    <!-- Кнопки -->
    <button id="printButton">Распечатать таблицу</button>
    <button id="exportExcelButton">Экспорт в Excel</button>
    <button id="exportWordButton">Экспорт в Word</button>
</div>

<!-- Страница завершения работы -->
<div id="endWorkPage" class="container" style="display:none;">
    <h1>Работа завершена</h1>
    <p id="earningInfo"></p>
    <p>Пожалуйста, свяжитесь с Владиславом по WhatsApp по номеру 89145407267</p>
</div>

<!-- Подключаем библиотеки -->
<script src="https://cdn.jsdelivr.net/npm/qrcodejs@1/qrcode.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2.0.5/FileSaver.min.js"></script>
<!-- SheetJS для экспорта в Excel -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.18.5/xlsx.full.min.js"></script>
<script src="script.js"></script>
</body>
</html>
styles.css

/* Общие стили */
body {
    font-family: 'Open Sans', Arial, sans-serif;
    background: linear-gradient(45deg, #1E90FF, #00BFFF);
    color: #000;
    margin: 0;
    padding: 0;
}

/* Контейнер */
.container {
    position: relative;
    z-index: 1;
    background-color: rgba(255, 255, 255, 0.9);
    color: #000;
    padding: 30px;
    border-radius: 12px;
    max-width: 1000px;
    margin: 20px auto;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

/* Заголовки */
h1, h2, h3 {
    text-align: center;
    font-weight: 600;
    color: #000;
}

h1 {
    margin-bottom: 30px;
}

h2 {
    margin-top: 20px;
    margin-bottom: 20px;
}

#currentTime {
    position: absolute;
    top: 10px;
    right: 20px;
    font-size: 18px;
    font-weight: bold;
    color: #fff;
}

/* Формы */
form label {
    display: block;
    margin-top: 15px;
    font-weight: 500;
    color: #000;
}

form input, form textarea, select {
    width: 100%;
    padding: 12px;
    margin-top: 8px;
    border-radius: 8px;
    border: 1px solid #ccc;
    font-size: 16px;
    color: #000;
    transition: border-color 0.3s;
}

form input:focus, form textarea:focus, select:focus {
    border-color: #1E90FF;
    outline: none;
}

form input[type="file"] {
    padding: 5px;
    background-color: #fff;
    color: #000;
}

form input[type="number"] {
    -moz-appearance: textfield;
}

form input[type="number"]::-webkit-inner-spin-button,
form input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Кнопки */
button {
    padding: 12px 20px;
    margin-top: 25px;
    margin-right: 5px;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.3s;
}

/* Кнопка отправки */
form button {
    background-color: #1E90FF;
    color: #fff;
}

form button:hover {
    background-color: #1C86EE;
}

/* Кнопки действий */
#printButton, #exportExcelButton, #exportWordButton, #endWorkButton {
    background-color: #00BFFF;
    color: #fff;
}

#printButton:hover, #exportExcelButton:hover, #exportWordButton:hover, #endWorkButton:hover {
    background-color: #3A5FCD;
}

/* Кнопки действий (Удалить, Редактировать) */
.action-button {
    background-color: #6495ED;
    color: #fff;
    margin: 2px;
}

.action-button:hover {
    background-color: #4682B4;
}

/* Таблица */
table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
    background-color: rgba(255, 255, 255, 0.9);
    color: #000;
}

table th, table td {
    border: 1px solid #ecf0f1;
    padding: 10px;
    text-align: center;
    font-size: 14px;
}

table th {
    background-color: #1E90FF;
    color: #fff;
    font-weight: 600;
}

table tr:nth-child(even) {
    background-color: rgba(255, 255, 255, 0.7);
}

/* Изображения в таблице */
table img {
    max-width: 80px;
    height: auto;
    border-radius: 6px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

/* Стили ссылок */
a {
    color: #1E90FF;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

/* Стили для QR-кода */
td div {
    margin: 0 auto;
}

/* Стили для поиска */
#searchInput {
    padding: 12px;
    border-radius: 8px;
    border: 1px solid #ccc;
    width: 100%;
    margin-bottom: 20px;
}

/* Стили для печати */
@media print {
    body {
        background-color: #fff;
        color: #000;
    }

    .container {
        background-color: #fff;
        color: #000;
        box-shadow: none;
    }

    form, #printButton, .action-button, #exportExcelButton, #exportWordButton, #searchInput, #sortSelect, #endWorkButton {
        display: none;
    }

    table th, table td {
        border: 1px solid #000;
    }

    table th {
        background-color: #f0f0f0;
    }
}
script.js

let db;
let editingProductId = null;
let startTime;
let workerName = '';
let workerPhone = '';

window.onload = function() {
    let request = window.indexedDB.open('productsDB', 1);

    request.onerror = function(event) {
        console.error('Ошибка открытия базы данных', event);
    };

    request.onsuccess = function(event) {
        db = event.target.result;
        setupEventListeners();
        showCurrentTime();
    };

    request.onupgradeneeded = function(event) {
        db = event.target.result;
        let objectStore = db.createObjectStore('products', { keyPath: 'id', autoIncrement: true });
    };
};

function setupEventListeners() {
    document.getElementById('workerForm').addEventListener('submit', startWork);
    document.getElementById('endWorkButton').addEventListener('click', endWork);

    document.getElementById('productForm').addEventListener('keydown', function(e) {
        if (e.key === 'Enter') {
            e.preventDefault();
            let formElements = Array.from(document.getElementById('productForm').elements);
            let index = formElements.indexOf(e.target);
            formElements[index + 1].focus();
        }
    });

    document.getElementById('productForm').addEventListener('submit', function(e) {
        e.preventDefault();

        let name = document.getElementById('productName').value.trim();
        let price = document.getElementById('productPrice').value.trim();
        let leather = document.getElementById('productLeather').value.trim();
        let description = document.getElementById('productDescription').value.trim();
        const photoInput = document.getElementById('productPhoto');
        let quantity = document.getElementById('productQuantity').value.trim();

        name = name.substring(0, 50);
        price = price.substring(0, 20);
        leather = leather.substring(0, 40);
        quantity = quantity.toString().substring(0, 10);

        let dateAdded = new Date().toLocaleString();

        if (editingProductId !== null) {
            getProductById(editingProductId, function(oldProduct) {
                const product = {
                    id: editingProductId,
                    name: name,
                    price: price,
                    leather: leather,
                    description: description,
                    photo: oldProduct.photo,
                    quantity: quantity,
                    dateAdded: dateAdded
                };

                if (photoInput.files && photoInput.files[0]) {
                    const photoFile = photoInput.files[0];
                    const reader = new FileReader();
                    reader.onload = function(event) {
                        product.photo = event.target.result;
                        updateProductInDB(editingProductId, product);
                    };
                    reader.readAsDataURL(photoFile);
                } else {
                    updateProductInDB(editingProductId, product);
                }
            });
        } else {
            if (photoInput.files && photoInput.files[0]) {
                const photoFile = photoInput.files[0];
                const reader = new FileReader();
                reader.onload = function(event) {
                    const photoData = event.target.result;
                    const product = {
                        name: name,
                        price: price,
                        leather: leather,
                        description: description,
                        photo: photoData,
                        quantity: quantity,
                        dateAdded: dateAdded
                    };
                    saveProduct(product);
                };
                reader.readAsDataURL(photoFile);
            } else {
                alert('Пожалуйста, добавьте фото товара.');
            }
        }

        document.getElementById('productForm').reset();
        document.querySelector('#productForm button').textContent = 'Добавить товар';
        editingProductId = null;
    });

    document.getElementById('searchInput').addEventListener('input', loadProducts);
    document.getElementById('sortSelect').addEventListener('change', loadProducts);

    document.getElementById('printButton').addEventListener('click', function() {
        window.print();
    });

    document.getElementById('exportExcelButton').addEventListener('click', exportToExcel);
    document.getElementById('exportWordButton').addEventListener('click', exportToWord);
}

function startWork(e) {
    e.preventDefault();
    workerName = document.getElementById('workerName').value.trim();
    workerPhone = document.getElementById('workerPhone').value.trim();
    startTime = new Date();
    document.getElementById('workerData').style.display = 'none';
    document.getElementById('mainContent').style.display = 'block';
    loadProducts();
}

function endWork() {
    let endTime = new Date();
    let timeDiff = (endTime - startTime) / (1000 * 60 * 60); // В часах
    let earnings = (timeDiff * 156).toFixed(2);
    document.getElementById('mainContent').style.display = 'none';
    document.getElementById('endWorkPage').style.display = 'block';
    document.getElementById('earningInfo').textContent = `Вы заработали: ${earnings} рублей`;
}

function saveProduct(product) {
    let transaction = db.transaction(['products'], 'readwrite');
    let objectStore = transaction.objectStore('products');
    let request = objectStore.add(product);

    request.onsuccess = function(event) {
        product.id = event.target.result;
        addProductToTable(product);
    };

    request.onerror = function(event) {
        console.error('Ошибка сохранения товара', event);
    };
}

function getProductById(id, callback) {
    let transaction = db.transaction(['products'], 'readonly');
    let objectStore = transaction.objectStore('products');
    let request = objectStore.get(id);

    request.onsuccess = function(event) {
        callback(event.target.result);
    };

    request.onerror = function(event) {
        console.error('Ошибка получения товара', event);
    };
}

function updateProductInDB(id, updatedProduct) {
    let transaction = db.transaction(['products'], 'readwrite');
    let objectStore = transaction.objectStore('products');
    let request = objectStore.put(updatedProduct);

    request.onsuccess = function() {
        loadProducts();
    };

    request.onerror = function(event) {
        console.error('Ошибка обновления товара', event);
    };
}

function loadProducts() {
    clearTable();

    let transaction = db.transaction(['products'], 'readonly');
    let objectStore = transaction.objectStore('products');
    let request = objectStore.getAll();

    request.onsuccess = function(event) {
        let products = event.target.result;
        let searchTerm = document.getElementById('searchInput').value.trim().toLowerCase();

        if (searchTerm !== '') {
            products = products.filter(product => product.name.toLowerCase().includes(searchTerm));
        }

        let sortBy = document.getElementById('sortSelect').value;
        products.sort((a, b) => {
            if (sortBy === 'name') {
                return a.name.localeCompare(b.name);
            } else if (sortBy === 'price') {
                return parseFloat(a.price) - parseFloat(b.price);
            } else if (sortBy === 'leather') {
                return a.leather.localeCompare(b.leather);
            } else if (sortBy === 'quantity') {
                return parseInt(a.quantity) - parseInt(b.quantity);
            }
            return 0;
        });

        products.forEach(product => addProductToTable(product));
    };

    request.onerror = function(event) {
        console.error('Ошибка загрузки товаров', event);
    };
}

function addProductToTable(product) {
    const table = document.getElementById('productTable').getElementsByTagName('tbody')[0];
    const newRow = table.insertRow();

    newRow.dataset.id = product.id;

    const nameCell = newRow.insertCell();
    nameCell.textContent = product.name;

    const priceCell = newRow.insertCell();
    priceCell.textContent = product.price;

    const leatherCell = newRow.insertCell();
    leatherCell.textContent = product.leather;

    const descCell = newRow.insertCell();
    descCell.textContent = product.description;

    const photoCell = newRow.insertCell();
    const photoImg = document.createElement('img');
    photoImg.src = product.photo;
    photoCell.appendChild(photoImg);

    const quantityCell = newRow.insertCell();
    quantityCell.textContent = product.quantity;

    const dateCell = newRow.insertCell();
    dateCell.textContent = product.dateAdded;

    const qrCell = newRow.insertCell();
    const qrCanvas = document.createElement('div');
    qrCell.appendChild(qrCanvas);

    const qrData = 'https://t.me/BOSS404';

    try {
        new QRCode(qrCanvas, {
            text: qrData,
            width: 100,
            height: 100,
            correctLevel: QRCode.CorrectLevel.L
        });
    } catch (error) {
        console.error('Ошибка при создании QR-кода:', error);
        qrCell.textContent = 'QR-код недоступен';
    }

    const actionCell = newRow.insertCell();

    const editButton = document.createElement('button');
    editButton.textContent = 'Редактировать';
    editButton.classList.add('action-button');
    editButton.addEventListener('click', function() {
        editingProductId = product.id;
        editProduct(product);
        window.scrollTo({ top: 0, behavior: 'smooth' });
    });
    actionCell.appendChild(editButton);

    const deleteButton = document.createElement('button');
    deleteButton.textContent = 'Удалить';
    deleteButton.classList.add('action-button');
    deleteButton.addEventListener('click', function() {
        deleteProduct(product.id);
        table.removeChild(newRow);
    });
    actionCell.appendChild(deleteButton);
}

function clearTable() {
    const tableBody = document.getElementById('productTable').getElementsByTagName('tbody')[0];
    while (tableBody.firstChild) {
        tableBody.removeChild(tableBody.firstChild);
    }
}

function deleteProduct(id) {
    let transaction = db.transaction(['products'], 'readwrite');
    let objectStore = transaction.objectStore('products');
    let request = objectStore.delete(id);

    request.onsuccess = function() {
        console.log('Товар удален из базы данных');
        loadProducts();
    };

    request.onerror = function(event) {
        console.error('Ошибка удаления товара', event);
    };
}

function editProduct(product) {
    document.getElementById('productName').value = product.name;
    document.getElementById('productPrice').value = product.price;
    document.getElementById('productLeather').value = product.leather;
    document.getElementById('productDescription').value = product.description;
    document.getElementById('productQuantity').value = product.quantity;

    document.querySelector('#productForm button').textContent = 'Сохранить изменения';
}

function exportToExcel() {
    let transaction = db.transaction(['products'], 'readonly');
    let objectStore = transaction.objectStore('products');
    let request = objectStore.getAll();

    request.onsuccess = function(event) {
        let products = event.target.result;
        let worksheet = XLSX.utils.json_to_sheet(products.map(product => ({
            'Название': product.name,
            'Цена': product.price,
            'Вид кожи': product.leather,
            'Описание': product.description,
            'Количество': product.quantity,
            'Дата добавления': product.dateAdded
        })));

        let workbook = XLSX.utils.book_new();
        XLSX.utils.book_append_sheet(workbook, worksheet, 'Товары');
        let wbout = XLSX.write(workbook, { bookType: 'xlsx', type: 'array' });
        saveAs(new Blob([wbout], { type: 'application/octet-stream' }), 'Товары.xlsx');
    };

    request.onerror = function(event) {
        console.error('Ошибка экспорта в Excel', event);
    };
}

function exportToWord() {
    let transaction = db.transaction(['products'], 'readonly');
    let objectStore = transaction.objectStore('products');
    let request = objectStore.getAll();

    request.onsuccess = function(event) {
        let products = event.target.result;
        let header = ['Название', 'Цена', 'Вид кожи', 'Описание', 'Количество', 'Дата добавления'];
        let rows = products.map(product => [
            product.name,
            product.price,
            product.leather,
            product.description,
            product.quantity,
            product.dateAdded
        ]);

        let tableHTML = '<table border="1" cellspacing="0" cellpadding="5"><tr>';
        header.forEach(h => {
            tableHTML += `<th>${h}</th>`;
        });
        tableHTML += '</tr>';

        rows.forEach(row => {
            tableHTML += '<tr>';
            row.forEach(cell => {
                tableHTML += `<td>${cell}</td>`;
            });
            tableHTML += '</tr>';
        });
        tableHTML += '</table>';

        let html = `<html><head><meta charset="utf-8"></head><body>${tableHTML}</body></html>`;
        let blob = new Blob(['\ufeff', html], { type: 'application/msword' });
        saveAs(blob, 'Товары.doc');
    };

    request.onerror = function(event) {
        console.error('Ошибка экспорта в Word', event);
    };
}

function showCurrentTime() {
    setInterval(() => {
        let now = new Date();
        let timeString = now.toLocaleTimeString();
        document.getElementById('currentTime').textContent = timeString;
    }, 1000);
}