public/lab11/task3/index.html - master - erioxis/web-nodejs

public/lab11/task3/index.html
754 строки32 KB
erioxis
lab11fix
15 дек 2025, 23:21
15 дек 2025, 23:2170dc7ba
<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>LR11 - Задание 3: Интеграция LR10</title>
    <style>
        body { 
            font-family: 'Tahoma', 'Arial', sans-serif; 
            margin: 0;
            padding: 0;
            background: #008080 url('../../back.png') center/cover no-repeat fixed;
            color: #000;
            height: 100vh;
            overflow: hidden;
        }
        
        .desktop {
            padding: 20px;
            height: calc(100vh - 40px);
            position: relative;
        }
        
        .window {
            background-color: #ece9d8;
            border: 2px solid;
            border-top-color: #fff;
            border-left-color: #fff;
            border-right-color: #808080;
            border-bottom-color: #808080;
            padding: 3px;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 95%;
            max-width: 1200px;
            height: 85vh;
            box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.3);
            overflow: hidden;
        }
        
        .title-bar {
            background: linear-gradient(to right, #000080, #1084d0);
            color: white;
            padding: 3px 6px;
            font-weight: bold;
            font-size: 13px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .window-content {
            padding: 15px;
            background: #ece9d8;
            height: calc(100% - 60px);
            overflow-y: auto;
        }
        
        h1 {
            color: #000080;
            text-align: center;
            margin: 0 0 20px 0;
            font-size: 16px;
            font-weight: bold;
            text-transform: uppercase;
        }
        
        .auth-status {
            margin-bottom: 20px;
            padding: 10px;
            background: #d4d0c8;
            border: 1px solid #808080;
            font-size: 11px;
            display: flex;
            align-items: center;
            gap: 10px;
        }
        
        .nav {
            display: flex;
            gap: 10px;
            margin-bottom: 20px;
            flex-wrap: wrap;
        }
        
        .button, .btn {
            background: linear-gradient(to bottom, #d4d0c8, #ece9d8);
            border: 2px solid;
            border-top-color: #fff;
            border-left-color: #fff;
            border-right-color: #808080;
            border-bottom-color: #808080;
            padding: 5px 10px;
            cursor: pointer;
            font-family: 'Tahoma';
            font-size: 11px;
            color: #000;
            min-width: 100px;
            text-align: center;
        }
        
        .button:hover, .btn:hover {
            background: linear-gradient(to bottom, #316ac5, #245edb);
            color: white;
            border: 2px dotted #316ac5;
        }
        
        .content {
            display: none;
            padding: 15px;
            background: #fff;
            border: 1px solid #808080;
            margin-bottom: 15px;
            min-height: 500px;
        }
        
        .active {
            display: block;
        }
        
        .search-bar {
            padding: 10px;
            background: #d4d0c8;
            border: 1px solid #808080;
            margin-bottom: 15px;
            display: flex;
            gap: 10px;
            flex-wrap: wrap;
            align-items: center;
        }
        
        .search-bar input, .search-bar select {
            padding: 4px 8px;
            border: 1px solid #808080;
            background: white;
            font-family: 'Tahoma';
            font-size: 11px;
            min-width: 150px;
        }
        
        .product-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
            gap: 15px;
            margin-top: 15px;
        }
        
        .product-card {
            border: 1px solid #808080;
            padding: 10px;
            background: #fff;
            font-size: 11px;
            text-align: center;
        }
        
        .product-card img {
            width: 100%;
            height: 120px;
            object-fit: contain;
            border: 1px solid #808080;
            margin-bottom: 8px;
            background: #f0f0f0;
        }
        
        .management-tab {
            display: none;
            padding: 15px;
            background: #fff;
            border: 1px solid #808080;
            margin-top: 10px;
        }
        
        .management-tab.active {
            display: block;
        }
        
        .form-group {
            margin-bottom: 12px;
        }
        
        .form-group label {
            display: block;
            margin-bottom: 3px;
            font-weight: bold;
            font-size: 11px;
            color: #000080;
        }
        
        .form-group input, .form-group select, .form-group textarea {
            width: 100%;
            padding: 4px 6px;
            border: 1px solid #808080;
            background: white;
            font-family: 'Tahoma';
            font-size: 11px;
        }
        
        .modal {
            display: none;
            position: fixed;
            z-index: 1000;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0,0,0,0.5);
        }
        
        .modal-content {
            background-color: #ece9d8;
            margin: 50px auto;
            padding: 3px;
            border: 2px solid;
            border-top-color: #fff;
            border-left-color: #fff;
            border-right-color: #808080;
            border-bottom-color: #808080;
            width: 80%;
            max-width: 700px;
            position: relative;
            max-height: 80vh;
            overflow-y: auto;
        }
        
        .modal-header {
            background: linear-gradient(to right, #000080, #1084d0);
            color: white;
            padding: 6px 10px;
            font-weight: bold;
            font-size: 12px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .close {
            color: white;
            font-size: 20px;
            font-weight: bold;
            cursor: pointer;
            background: transparent;
            border: none;
        }
        
        .modal-body {
            padding: 15px;
            background: #fff;
        }
        
        .schedule-table, .schedule-records-table {
            width: 100%;
            border-collapse: collapse;
            font-size: 11px;
            margin-top: 10px;
        }
        
        .schedule-table th, .schedule-records-table th {
            background: linear-gradient(to bottom, #000080, #1084d0);
            color: white;
            padding: 6px 8px;
            text-align: left;
            border: 1px solid #808080;
            font-weight: bold;
        }
        
        .schedule-table td, .schedule-records-table td {
            padding: 5px 8px;
            border: 1px solid #808080;
            background: white;
            vertical-align: top;
        }
        
        tr:nth-child(even) td {
            background: #f0f0f0;
        }
        
        .error {
            color: #c00000;
            background: #ffe0e0;
            border: 1px solid #c00000;
            padding: 8px;
            margin: 10px 0;
            font-size: 11px;
            font-weight: bold;
        }
        
        .loading {
            text-align: center;
            padding: 30px;
            color: #808080;
            font-style: italic;
            font-size: 12px;
        }
        
        .tab {
            cursor: pointer;
            padding: 6px 12px;
            border: 1px solid #808080;
            margin-right: 2px;
            background: linear-gradient(to bottom, #d4d0c8, #ece9d8);
            font-size: 11px;
            display: inline-block;
        }
        
        .tab.active {
            background: #ece9d8;
            border-bottom: 1px solid #ece9d8;
        }
        
        .edit-product-form {
            display: grid;
            gap: 10px;
        }
        
        .taskbar {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            background: linear-gradient(to bottom, #245edb, #1d52c1);
            height: 30px;
            display: flex;
            align-items: center;
            padding: 0 5px;
            border-top: 1px solid #fff;
        }
        
        .start-button {
            background: linear-gradient(to bottom, #6ca035, #3d751b);
            color: white;
            padding: 4px 10px;
            border: 1px solid;
            border-top-color: #fff;
            border-left-color: #fff;
            border-right-color: #2d4f0f;
            border-bottom-color: #2d4f0f;
            font-weight: bold;
            margin-right: 10px;
            font-size: 11px;
        }
        
        footer {
            display: none;
        }
        
        h2.title {
            color: #000080;
            font-size: 14px;
            margin-bottom: 15px;
            border-bottom: 1px solid #808080;
            padding-bottom: 5px;
        }
        
        h3 {
            color: #000080;
            font-size: 12px;
            margin: 15px 0 10px 0;
            font-weight: bold;
        }
        
        h4 {
            color: #000080;
            font-size: 11px;
            margin: 10px 0 5px 0;
            font-weight: bold;
        }
        
        #products-container, #products-list, #categories-list, #schedule-container,
        #schedule-records-list, #groups-list, #teachers-list, #disciplines-list,
        #rooms-list {
            max-height: 400px;
            overflow-y: auto;
            border: 1px solid #808080;
            padding: 10px;
            background: #fff;
            font-size: 11px;
        }
        
        .cart-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 5px 0;
            border-bottom: 1px solid #d4d0c8;
            font-size: 11px;
        }
        
        .cart-total {
            text-align: right;
            font-weight: bold;
            padding: 10px;
            background: #d4d0c8;
            border-top: 1px solid #808080;
            font-size: 12px;
        }
    </style>
</head>
<body>
    <div class="desktop">
        <div class="window">
            <div class="title-bar">
                <span>LR11 - Задание 3: Интеграция LR10 с Аутентификацией</span>
                <span style="font-family: 'Arial'; font-size: 16px;">_ □ X</span>
            </div>
            <div class="window-content">
                <h1>ИНТЕГРАЦИЯ LR10 С СИСТЕМОЙ АУТЕНТИФИКАЦИИ</h1>

                <div class="auth-status">
                    <span id="user-status">Гость | </span>
                    <button id="login-btn" class="button" onclick="goToAuth()">Войти</button>
                    <button id="logout-btn" class="button" style="display: none;" onclick="logout()">Выйти</button>
                </div>

                <div class="nav">
                    <button class="button" onclick="showContent('store')">Интернет-магазин</button>
                    <button class="button" onclick="showContent('schedule')">Расписание</button>
                </div>

                <div id="store" class="content active">
                    <h3>ИНТЕРНЕТ-МАГАЗИН С АУТЕНТИФИКАЦИЕЙ</h3>
                    
                    <div class="nav">
                        <button class="button" onclick="showStoreTab('store-view')">Просмотр товаров</button>
                        <button class="button management-tab" onclick="showStoreTab('store-management')">Управление</button>
                    </div>
                    
                    <div id="store-view">
                        <div class="search-bar">
                            <input type="text" id="search-input" placeholder="Поиск товара..." oninput="filterProducts()">
                            <select id="category-filter" onchange="filterProducts()">
                                <option value="">Все категории</option>
                            </select>
                            <button class="button" onclick="showCartModal()">Корзина</button>
                        </div>
                        <div id="products-container" class="product-grid"></div>
                    </div>
                    
                    <div id="store-management" class="content">
                        <div class="nav">
                            <button class="button" onclick="showManagementTab('products-management')">Товары</button>
                            <button class="button" onclick="showManagementTab('categories-management')">Категории</button>
                        </div>
                        
                        <div id="products-management" class="management-tab active">
                            <h4>Управление товарами</h4>
                            <div class="form-group">
                                <label for="product-title">Название:</label>
                                <input type="text" id="product-title" placeholder="Введите название">
                            </div>
                            <div class="form-group">
                                <label for="product-price">Цена:</label>
                                <input type="number" id="product-price" placeholder="Введите цену" step="0.01">
                            </div>
                            <div class="form-group">
                                <label for="product-amount">Количество:</label>
                                <input type="number" id="product-amount" placeholder="Введите количество">
                            </div>
                            <div class="form-group">
                                <label for="product-category-id">Категория:</label>
                                <select id="product-category-id">
                                    <option value="">Без категории</option>
                                </select>
                            </div>
                            <div class="form-group">
                                <label for="product-image">Изображение (URL):</label>
                                <input type="text" id="product-image" placeholder="Введите URL изображения">
                            </div>
                            <button class="button" onclick="addProduct()">Добавить товар</button>
                            <div id="products-list"></div>
                        </div>
                        
                        <div id="categories-management" class="management-tab">
                            <h4>Управление категориями</h4>
                            <div class="form-group">
                                <label for="category-name">Название категории:</label>
                                <input type="text" id="category-name" placeholder="Введите название">
                            </div>
                            <button class="button" onclick="addCategory()">Добавить категорию</button>
                            <div id="categories-list"></div>
                        </div>
                    </div>
                </div>

                <div id="schedule" class="content">
                    <h3>РАСПИСАНИЕ С АУТЕНТИФИКАЦИЕЙ</h3>
                    
                    <div class="nav">
                        <button class="button" onclick="showScheduleTab('schedule-view')">Просмотр расписания</button>
                        <button class="button management-tab" onclick="showScheduleTab('schedule-management')">Управление данными</button>
                    </div>
                    
                    <div id="schedule-view">
                        <div class="search-bar">
                            <select id="group-filter" onchange="loadSchedule()">
                                <option value="">Все группы</option>
                            </select>
                            <select id="teacher-filter" onchange="loadSchedule()">
                                <option value="">Все преподаватели</option>
                            </select>
                            <select id="discipline-filter" onchange="loadSchedule()">
                                <option value="">Все дисциплины</option>
                            </select>
                            <select id="room-filter" onchange="loadSchedule()">
                                <option value="">Все аудитории</option>
                            </select>
                            <select id="day-filter" onchange="loadSchedule()">
                                <option value="">Все дни</option>
                                <option value="1">Понедельник</option>
                                <option value="2">Вторник</option>
                                <option value="3">Среда</option>
                                <option value="4">Четверг</option>
                                <option value="5">Пятница</option>
                                <option value="6">Суббота</option>
                            </select>
                            <select id="week-filter" onchange="loadSchedule()">
                                <option value="">Все недели</option>
                                <option value="1">1</option>
                                <option value="2">2</option>
                            </select>
                        </div>
                        <div id="schedule-container"></div>
                    </div>
                    
                    <div id="schedule-management" class="content">
                        <div class="nav">
                            <button class="button" onclick="showScheduleRecordsManagement()">Расписание</button>
                            <button class="button" onclick="showGroupsManagement()">Группы</button>
                            <button class="button" onclick="showTeachersManagement()">Преподаватели</button>
                            <button class="button" onclick="showDisciplinesManagement()">Дисциплины</button>
                            <button class="button" onclick="showRoomsManagement()">Аудитории</button>
                        </div>
                        
                        <div id="schedule-records-management" class="management-tab active">
                            <h4>Управление расписанием</h4>
                            <div class="form-group">
                                <label for="schedule-week-number">Номер недели:</label>
                                <select id="schedule-week-number">
                                    <option value="1">1</option>
                                    <option value="2">2</option>
                                </select>
                            </div>
                            <div class="form-group">
                                <label for="schedule-day-of-week">День недели:</label>
                                <select id="schedule-day-of-week">
                                    <option value="1">Понедельник</option>
                                    <option value="2">Вторник</option>
                                    <option value="3">Среда</option>
                                    <option value="4">Четверг</option>
                                    <option value="5">Пятница</option>
                                    <option value="6">Суббота</option>
                                </select>
                            </div>
                            <div class="form-group">
                                <label for="schedule-start-time">Время начала (HH:MM):</label>
                                <input type="text" id="schedule-start-time" placeholder="Например: 09:00">
                            </div>
                            <div class="form-group">
                                <label for="schedule-end-time">Время окончания (HH:MM):</label>
                                <input type="text" id="schedule-end-time" placeholder="Например: 10:30">
                            </div>
                            <div class="form-group">
                                <label for="schedule-group-id">Группа:</label>
                                <select id="schedule-group-id">
                                    <option value="">Выберите группу</option>
                                </select>
                            </div>
                            <div class="form-group">
                                <label for="schedule-teacher-id">Преподаватель:</label>
                                <select id="schedule-teacher-id">
                                    <option value="">Выберите преподавателя</option>
                                </select>
                            </div>
                            <div class="form-group">
                                <label for="schedule-discipline-id">Дисциплина:</label>
                                <select id="schedule-discipline-id">
                                    <option value="">Выберите дисциплину</option>
                                </select>
                            </div>
                            <div class="form-group">
                                <label for="schedule-room-id">Аудитория:</label>
                                <select id="schedule-room-id">
                                    <option value="">Выберите аудиторию</option>
                                </select>
                            </div>
                            <div class="form-group">
                                <label for="schedule-type">Тип занятия:</label>
                                <select id="schedule-type">
                                    <option value="лекция">лекция</option>
                                    <option value="практика">практика</option>
                                    <option value="лабораторная">лабораторная</option>
                                </select>
                            </div>
                            <button class="button" onclick="addScheduleRecord()">Добавить запись</button>
                            <div id="schedule-records-list"></div>
                        </div>
                        
                        <div id="groups-management" class="management-tab">
                            <h4>Управление группами</h4>
                            <div class="form-group">
                                <label for="group-name">Название группы:</label>
                                <input type="text" id="group-name" placeholder="Введите название">
                            </div>
                            <button class="button" onclick="addGroup()">Добавить группу</button>
                            <div id="groups-list"></div>
                        </div>
                        
                        <div id="teachers-management" class="management-tab">
                            <h4>Управление преподавателями</h4>
                            <div class="form-group">
                                <label for="teacher-full-name">ФИО:</label>
                                <input type="text" id="teacher-full-name" placeholder="Введите ФИО">
                            </div>
                            <div class="form-group">
                                <label for="teacher-position">Должность:</label>
                                <input type="text" id="teacher-position" placeholder="Введите должность">
                            </div>
                            <div class="form-group">
                                <label for="teacher-department">Кафедра:</label>
                                <input type="text" id="teacher-department" placeholder="Введите кафедру">
                            </div>
                            <button class="button" onclick="addTeacher()">Добавить преподавателя</button>
                            <div id="teachers-list"></div>
                        </div>
                        
                        <div id="disciplines-management" class="management-tab">
                            <h4>Управление дисциплинами</h4>
                            <div class="form-group">
                                <label for="discipline-name">Название дисциплины:</label>
                                <input type="text" id="discipline-name" placeholder="Введите название">
                            </div>
                            <div class="form-group">
                                <label for="discipline-hours">Количество часов:</label>
                                <input type="number" id="discipline-hours" placeholder="Введите количество часов">
                            </div>
                            <button class="button" onclick="addDiscipline()">Добавить дисциплину</button>
                            <div id="disciplines-list"></div>
                        </div>
                        
                        <div id="rooms-management" class="management-tab">
                            <h4>Управление аудиториями</h4>
                            <div class="form-group">
                                <label for="room-name">Название аудитории:</label>
                                <input type="text" id="room-name" placeholder="Введите название">
                            </div>
                            <div class="form-group">
                                <label for="room-building">Корпус:</label>
                                <input type="text" id="room-building" placeholder="Введите корпус">
                            </div>
                            <div class="form-group">
                                <label for="room-capacity">Вместимость:</label>
                                <input type="number" id="room-capacity" placeholder="Введите вместимость">
                            </div>
                            <button class="button" onclick="addRoom()">Добавить аудиторию</button>
                            <div id="rooms-list"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Модальные окна -->
    <div id="product-modal" class="modal">
        <div class="modal-content">
            <div class="modal-header">
                <span>Детали товара</span>
                <span class="close" onclick="closeProductModal()">&times;</span>
            </div>
            <div class="modal-body">
                <div style="display: flex; gap: 20px;">
                    <img id="modal-product-image" src="" alt="Изображение товара" style="max-width: 150px; max-height: 150px; border: 1px solid #808080;">
                    <div>
                        <h4 id="modal-product-title" style="margin: 0 0 10px 0; color: #000080;"></h4>
                        <p id="modal-product-description" style="font-size: 11px;"></p>
                        <p class="price" id="modal-product-price" style="font-size: 11px;">Цена: </p>
                        <p class="amount" id="modal-product-amount" style="font-size: 11px;">Количество: </p>
                        <p id="modal-product-category" style="font-size: 11px;">Категория: </p>
                        <button class="button" onclick="addToCartFromModal()" style="margin-top: 10px;">Добавить в корзину</button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div id="cart-modal" class="modal">
        <div class="modal-content">
            <div class="modal-header">
                <span>Корзина</span>
                <span class="close" onclick="closeCartModal()">&times;</span>
            </div>
            <div class="modal-body">
                <div id="cart-items"></div>
                <div id="cart-total" class="cart-total">Итого: 0 руб.</div>
            </div>
            <div style="padding: 10px; background: #d4d0c8; text-align: right;">
                <button class="button" onclick="checkoutCart()">Оформить заказ</button>
            </div>
        </div>
    </div>

    <div id="editProductModal" class="modal">
        <div class="modal-content">
            <div class="modal-header">
                <span>Редактировать товар</span>
                <span class="close" onclick="closeEditModal()">&times;</span>
            </div>
            <div class="modal-body">
                <form class="edit-product-form">
                    <input type="hidden" id="edit-product-id" value="">
                    <div class="form-group">
                        <label for="edit-product-title">Название:</label>
                        <input type="text" id="edit-product-title" placeholder="Введите название">
                    </div>
                    <div class="form-group">
                        <label for="edit-product-price">Цена:</label>
                        <input type="number" id="edit-product-price" placeholder="Введите цену" step="0.01">
                    </div>
                    <div class="form-group">
                        <label for="edit-product-amount">Количество:</label>
                        <input type="number" id="edit-product-amount" placeholder="Введите количество">
                    </div>
                    <div class="form-group">
                        <label for="edit-product-category-id">Категория:</label>
                        <select id="edit-product-category-id">
                            <option value="">Без категории</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="edit-product-image">Изображение (URL):</label>
                        <input type="text" id="edit-product-image" placeholder="Введите URL изображения">
                    </div>
                    <div class="form-group">
                        <label for="edit-product-description">Описание:</label>
                        <textarea id="edit-product-description" rows="4" placeholder="Введите описание товара"></textarea>
                    </div>
                    <div style="text-align: right; margin-top: 15px;">
                        <button class="button" type="button" onclick="saveProductEdit()">Сохранить изменения</button>
                        <button class="button" type="button" onclick="closeEditModal()">Отмена</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    
    <div class="taskbar">
        <div class="start-button">Пуск</div>
    </div>

    <!-- ВАЖНО: Ваш JavaScript файл подключается без изменений -->
    <script src="script.js"></script>
</body>
</html>