| | <!DOCTYPE html> |
| | <html lang="ru"> |
| | <head> |
| | <meta charset="UTF-8"> |
| | <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| | <title>Документы Службы Качества</title> |
| | <script src="https://cdn.tailwindcss.com"></script> |
| | <script src="https://unpkg.com/feather-icons"></script> |
| | <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> |
| | <link rel="stylesheet" href="style.css"> |
| | </head> |
| | <body class="bg-gray-50 min-h-screen"> |
| | <custom-navbar></custom-navbar> |
| | |
| | <div class="container mx-auto px-4 py-8"> |
| | <header class="text-center mb-8"> |
| | <h1 class="text-3xl font-bold text-gray-800 mb-2">Документы Службы Качества</h1> |
| | <p class="text-gray-600">Управление документами системы качества</p> |
| | </header> |
| | |
| | <div class="flex flex-wrap gap-4 mb-6"> |
| | <button class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-3 rounded-lg font-medium transition" onclick="showAuthModal('add')"> |
| | <i data-feather="plus" class="inline mr-2"></i>Добавить документ |
| | </button> |
| | <button class="bg-green-600 hover:bg-green-700 text-white px-6 py-3 rounded-lg font-medium transition" onclick="exportData()"> |
| | <i data-feather="download" class="inline mr-2"></i>Экспорт в JSON |
| | </button> |
| | <button class="bg-amber-600 hover:bg-amber-700 text-white px-6 py-3 rounded-lg font-medium transition" onclick="showImportSection()"> |
| | <i data-feather="upload" class="inline mr-2"></i>Импорт из JSON |
| | </button> |
| | <button class="bg-red-600 hover:bg-red-700 text-white px-6 py-3 rounded-lg font-medium transition" onclick="showAuthModal('clear')"> |
| | <i data-feather="trash-2" class="inline mr-2"></i>Очистить все |
| | </button> |
| | </div> |
| | |
| | |
| | <div class="bg-white rounded-xl shadow-md p-6 mb-6 max-w-3xl mx-auto hidden" id="addForm"> |
| | <h2 class="text-xl font-semibold text-gray-800 mb-6 text-center" id="formTitle">Добавить новый документ</h2> |
| | <form id="documentForm"> |
| | <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4"> |
| | <div> |
| | <label class="block text-gray-700 mb-2" for="docNumber">№ п/п</label> |
| | <input type="text" id="docNumber" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500" placeholder="Введите номер по порядку"> |
| | </div> |
| | <div> |
| | <label class="block text-gray-700 mb-2" for="docApprovalDate">Дата утверждения</label> |
| | <input type="date" id="docApprovalDate" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"> |
| | </div> |
| | </div> |
| | |
| | <div class="mb-4"> |
| | <label class="block text-gray-700 mb-2" for="docTitle">Наименование документа</label> |
| | <input type="text" id="docTitle" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500" placeholder="Введите название документа"> |
| | </div> |
| | |
| | <div class="mb-4"> |
| | <label class="block text-gray-700 mb-2" for="docCode">Шифр документа</label> |
| | <input type="text" id="docCode" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500" placeholder="Введите шифр документа"> |
| | </div> |
| | |
| | <div class="mb-4"> |
| | <label class="block text-gray-700 mb-2" for="docScope">Область действия документа</label> |
| | <textarea id="docScope" rows="3" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500" placeholder="Опишите область действия документа и структурные подразделения"></textarea> |
| | </div> |
| | |
| | <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6"> |
| | <div> |
| | <label class="block text-gray-700 mb-2" for="docUrl">Ссылка на документ (если есть)</label> |
| | <input type="url" id="docUrl" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500" placeholder="https://sharepoint.example.com/..."> |
| | </div> |
| | <div> |
| | <label class="block text-gray-700 mb-2" for="docLocation">Место хранения (если нет ссылки)</label> |
| | <input type="text" id="docLocation" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500" placeholder="Оригинал в отделе..."> |
| | </div> |
| | </div> |
| | |
| | <button type="button" class="w-full bg-blue-600 hover:bg-blue-700 text-white py-3 rounded-lg font-medium transition" id="saveButton" onclick="saveDocument()"> |
| | Добавить документ |
| | </button> |
| | </form> |
| | </div> |
| | |
| | |
| | <div class="bg-white rounded-xl shadow-md p-6 mb-6 max-w-3xl mx-auto hidden" id="importSection"> |
| | <h2 class="text-xl font-semibold text-gray-800 mb-6 text-center">Импорт документов из JSON</h2> |
| | |
| | <div class="mb-4"> |
| | <label class="block text-gray-700 mb-2" for="jsonFile">Выберите JSON файл для импорта</label> |
| | <input type="file" id="jsonFile" accept=".json" onchange="handleFileSelect(this)" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"> |
| | <div class="text-sm text-gray-500 mt-1" id="fileInfo">Файл не выбран</div> |
| | </div> |
| | |
| | <div class="mb-6"> |
| | <label class="flex items-center"> |
| | <input type="checkbox" id="replaceData" class="rounded text-blue-600 focus:ring-blue-500"> |
| | <span class="ml-2 text-gray-700">Заменить текущие данные (все существующие документы будут удалены)</span> |
| | </label> |
| | </div> |
| | |
| | <div class="flex flex-wrap gap-3"> |
| | <button class="bg-amber-600 hover:bg-amber-700 text-white px-6 py-3 rounded-lg font-medium transition flex-1" onclick="importData()" id="importButton" disabled> |
| | <i data-feather="upload" class="inline mr-2"></i>Импортировать данные |
| | </button> |
| | <button class="bg-gray-200 hover:bg-gray-300 text-gray-800 px-6 py-3 rounded-lg font-medium transition flex-1" onclick="hideImportSection()"> |
| | <i data-feather="x" class="inline mr-2"></i>Отмена |
| | </button> |
| | </div> |
| | </div> |
| | |
| | |
| | <div class="bg-white rounded-xl shadow-md overflow-hidden" id="documentsContainer"> |
| | <div class="grid grid-cols-12 gap-4 bg-gray-800 text-white p-4 sticky top-0 z-10"> |
| | <div class="col-span-1 font-semibold">№ п/п</div> |
| | <div class="col-span-5 font-semibold">Наименование документа</div> |
| | <div class="col-span-2 font-semibold">Шифр</div> |
| | <div class="col-span-2 font-semibold">Дата утверждения</div> |
| | <div class="col-span-2 font-semibold">Статус</div> |
| | </div> |
| | |
| | <div class="empty-state hidden p-12 text-center" id="emptyState"> |
| | <div class="text-5xl mb-4 opacity-30">📄</div> |
| | <div class="text-xl text-gray-600 mb-2">Документы не найдены</div> |
| | <div class="text-gray-500">Нажмите "Добавить документ" чтобы создать первый документ</div> |
| | </div> |
| | |
| | |
| | </div> |
| | </div> |
| | |
| | |
| | <div class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden" id="authModal"> |
| | <div class="bg-white rounded-xl p-6 w-full max-w-md"> |
| | <h2 class="text-xl font-semibold text-gray-800 mb-6 text-center">Требуется аутентификация</h2> |
| | <input type="password" id="passwordInput" class="w-full px-4 py-3 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 mb-4" placeholder="Введите пароль доступа"> |
| | <button class="w-full bg-blue-600 hover:bg-blue-700 text-white py-3 rounded-lg font-medium transition" onclick="authenticate()"> |
| | Подтвердить доступ |
| | </button> |
| | </div> |
| | </div> |
| | |
| | |
| | <div class="fixed top-6 right-6 bg-green-600 text-white px-6 py-3 rounded-lg shadow-lg flex items-center transform translate-x-full transition-transform duration-300 z-50" id="notification"> |
| | <i data-feather="check-circle" class="mr-2"></i> |
| | <span id="notificationText">Документ успешно сохранен!</span> |
| | </div> |
| | |
| | <custom-footer></custom-footer> |
| | |
| | <script src="components/navbar.js"></script> |
| | <script src="components/footer.js"></script> |
| | <script src="script.js"></script> |
| | <script> |
| | document.addEventListener('DOMContentLoaded', function() { |
| | feather.replace(); |
| | loadFromLocalStorage(); |
| | }); |
| | </script> |
| | </body> |
| | </html> |
