-
+
+
+
+
-
+
diff --git a/script.js b/script.js
index 8693403..c5be210 100644
--- a/script.js
+++ b/script.js
@@ -94,11 +94,9 @@ function renderTable() {
if (filtered.length === 0) {
tbody.innerHTML = `
-
-
-
- Нет записей для отображения
- |
+ 📋
+ Нет записей для отображения
|
`;
@@ -109,18 +107,18 @@ function renderTable() {
tbody.innerHTML = filtered.map((item, idx) => {
const isOverdue = item.status === "Просрочено";
return `
-
- | ${idx + 1} |
- ${escapeHtml(item.fio)} |
- ${escapeHtml(item.item)} |
- ${formatDate(item.issueDate)} |
- ${formatDate(item.returnDate)} |
-
+ |
+ | ${idx + 1} |
+ ${escapeHtml(item.fio)} |
+ ${escapeHtml(item.item)} |
+ ${formatDate(item.issueDate)} |
+ ${formatDate(item.returnDate)} |
+
${item.status}
|
-
-
-
+ |
+
+
|
`;
@@ -169,7 +167,7 @@ function updateCounts() {
// Модальное окно
function openModal(isEdit = false) {
- document.getElementById("modal").style.display = "flex";
+ document.getElementById("modal").classList.remove("hidden");
document.getElementById("modal-title").textContent = isEdit ? "Редактирование выдачи" : "Новая выдача";
if (!isEdit) {
@@ -181,7 +179,7 @@ function openModal(isEdit = false) {
}
function closeModal() {
- document.getElementById("modal").style.display = "none";
+ document.getElementById("modal").classList.add("hidden");
}
// Сохранение (добавление/редактирование)
@@ -280,7 +278,7 @@ function renderLog() {
const dateStr = date.toLocaleDateString("ru-RU") + " " + date.toLocaleTimeString("ru-RU", { hour: "2-digit", minute: "2-digit" });
return `
- ${log.message}
+ ${log.message}
(${dateStr})
`;
diff --git a/style.css b/style.css
index 3d3a8ba..e77e958 100644
--- a/style.css
+++ b/style.css
@@ -1,16 +1,167 @@
-/* Кастомные стили поверх Tailwind */
+/* Дополнительные стили поверх KT AI дизайн-системы */
-body {
- font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+/* Сетка счётчиков */
+.stats-grid {
+ display: grid;
+ grid-template-columns: repeat(2, 1fr);
+ gap: var(--kt-ai-space-4);
}
-/* Статусы в таблице */
+@media (min-width: 768px) {
+ .stats-grid {
+ grid-template-columns: repeat(4, 1fr);
+ }
+}
+
+.stat-card {
+ background: var(--kt-ai-card-bg);
+ border: 1px solid var(--kt-ai-card-border);
+ border-radius: var(--kt-ai-radius-xl);
+ padding: var(--kt-ai-space-5);
+ text-align: center;
+ transition: transform 0.2s, box-shadow 0.2s;
+}
+
+.stat-card:hover {
+ transform: translateY(-2px);
+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+}
+
+.stat-label {
+ font-size: var(--kt-ai-text-sm);
+ color: var(--kt-ai-fg-muted);
+ margin-bottom: var(--kt-ai-space-2);
+}
+
+.stat-value {
+ font-size: var(--kt-ai-text-3xl);
+ font-weight: var(--kt-ai-weight-bold);
+ color: var(--kt-ai-fg);
+}
+
+.stat-blue .stat-value { color: var(--kt-ai-primary); }
+.stat-green .stat-value { color: #16a34a; }
+.stat-red .stat-value { color: var(--kt-ai-danger); }
+
+/* Поиск и фильтры */
+.search-filters-row {
+ display: flex;
+ flex-direction: column;
+ gap: var(--kt-ai-space-4);
+}
+
+@media (min-width: 768px) {
+ .search-filters-row {
+ flex-direction: row;
+ align-items: center;
+ }
+}
+
+.search-input {
+ flex: 1;
+ min-width: 280px;
+}
+
+.filters-container {
+ display: flex;
+ flex-wrap: wrap;
+ gap: var(--kt-ai-space-2);
+}
+
+/* Фильтры-чипсы */
+.filter-chip {
+ padding: var(--kt-ai-space-2) var(--kt-ai-space-4);
+ border-radius: var(--kt-ai-radius-full);
+ font-size: var(--kt-ai-text-sm);
+ font-weight: var(--kt-ai-weight-medium);
+ cursor: pointer;
+ transition: all 0.2s;
+ border: 2px solid var(--kt-ai-border);
+ background: var(--kt-ai-card-bg);
+ color: var(--kt-ai-fg-muted);
+}
+
+.filter-chip:hover {
+ border-color: var(--kt-ai-primary);
+ color: var(--kt-ai-primary);
+}
+
+.filter-chip.active {
+ background: var(--kt-ai-primary);
+ border-color: var(--kt-ai-primary);
+ color: white;
+}
+
+/* Таблица */
+.table-container {
+ overflow: hidden;
+ padding: 0;
+}
+
+.table-scroll {
+ overflow-x: auto;
+}
+
+.data-table {
+ width: 100%;
+ border-collapse: collapse;
+}
+
+.data-table thead {
+ background: var(--kt-ai-bg-soft);
+ border-bottom: 2px solid var(--kt-ai-border);
+}
+
+.data-table th {
+ padding: var(--kt-ai-space-3) var(--kt-ai-space-4);
+ text-align: left;
+ font-size: var(--kt-ai-text-xs);
+ font-weight: var(--kt-ai-weight-semibold);
+ color: var(--kt-ai-fg-muted);
+ text-transform: uppercase;
+ letter-spacing: 0.5px;
+ white-space: nowrap;
+}
+
+.data-table td {
+ padding: var(--kt-ai-space-3) var(--kt-ai-space-4);
+ border-bottom: 1px solid var(--kt-ai-border);
+ font-size: var(--kt-ai-text-sm);
+ color: var(--kt-ai-fg);
+}
+
+.data-table tbody tr {
+ transition: background-color 0.2s;
+}
+
+.data-table tbody tr:hover {
+ background: var(--kt-ai-bg-soft);
+}
+
+/* Просроченные строки */
+.row-overdue {
+ background-color: #fef2f2 !important;
+ border-left: 4px solid var(--kt-ai-danger);
+}
+
+.row-overdue:hover {
+ background-color: #fee2e2 !important;
+}
+
+.col-num { width: 50px; }
+.col-fio { min-width: 180px; }
+.col-item { min-width: 200px; }
+.col-date { width: 120px; white-space: nowrap; }
+.col-status { width: 120px; }
+.col-actions { width: 180px; }
+
+/* Статусы */
.status-badge {
display: inline-block;
- padding: 4px 12px;
- border-radius: 9999px;
- font-size: 12px;
- font-weight: 600;
+ padding: var(--kt-ai-space-1) var(--kt-ai-space-3);
+ border-radius: var(--kt-ai-radius-full);
+ font-size: var(--kt-ai-text-xs);
+ font-weight: var(--kt-ai-weight-semibold);
text-transform: uppercase;
letter-spacing: 0.5px;
}
@@ -30,80 +181,51 @@ body {
color: #991b1b;
}
-/* Подсветка просроченных строк */
-.row-overdue {
- background-color: #fef2f2 !important;
- border-left: 4px solid #ef4444;
-}
-
-.row-overdue:hover {
- background-color: #fee2e2 !important;
-}
-
-/* Фильтры-чипсы */
-.filter-chip {
- padding: 6px 16px;
- border-radius: 9999px;
- font-size: 14px;
- font-weight: 500;
+/* Кнопки действий */
+.action-btn {
+ background: none;
+ border: none;
cursor: pointer;
- transition: all 0.2s;
- border: 2px solid #e5e7eb;
- background: white;
- color: #6b7280;
+ padding: var(--kt-ai-space-1) var(--kt-ai-space-2);
+ border-radius: var(--kt-ai-radius-md);
+ font-size: var(--kt-ai-text-sm);
+ font-weight: var(--kt-ai-weight-medium);
+ transition: background-color 0.2s;
}
-.filter-chip:hover {
- border-color: #3b82f6;
- color: #3b82f6;
+.action-btn.edit {
+ color: var(--kt-ai-primary);
}
-.filter-chip.active {
- background: #3b82f6;
- border-color: #3b82f6;
- color: white;
+.action-btn.edit:hover {
+ background: #eff6ff;
}
-/* Анимации */
-@keyframes fadeIn {
- from { opacity: 0; transform: translateY(-10px); }
- to { opacity: 1; transform: translateY(0); }
+.action-btn.delete {
+ color: var(--kt-ai-danger);
}
-.modal-content {
- animation: fadeIn 0.2s ease-out;
+.action-btn.delete:hover {
+ background: #fef2f2;
}
-/* Скроллбар для журнала */
-#log-container::-webkit-scrollbar {
- width: 8px;
+/* Журнал изменений */
+.log-container {
+ max-height: 400px;
+ overflow-y: auto;
}
-#log-container::-webkit-scrollbar-track {
- background: #f1f1f1;
- border-radius: 4px;
-}
-
-#log-container::-webkit-scrollbar-thumb {
- background: #c1c1c1;
- border-radius: 4px;
-}
-
-#log-container::-webkit-scrollbar-thumb:hover {
- background: #a1a1a1;
-}
-
-/* Лог записи */
.log-entry {
- padding: 8px 12px;
- background: #f9fafb;
- border-radius: 6px;
- font-size: 13px;
- border-left: 3px solid #6b7280;
+ padding: var(--kt-ai-space-2) var(--kt-ai-space-3);
+ background: var(--kt-ai-bg-soft);
+ border-radius: var(--kt-ai-radius-md);
+ font-size: var(--kt-ai-text-sm);
+ margin-bottom: var(--kt-ai-space-2);
+ border-left: 3px solid var(--kt-ai-border);
}
.log-entry.delete {
- border-left-color: #ef4444;
+ border-left-color: var(--kt-ai-danger);
background: #fef2f2;
}
@@ -113,20 +235,81 @@ body {
}
.log-entry.edit {
- border-left-color: #3b82f6;
+ border-left-color: var(--kt-ai-primary);
background: #eff6ff;
}
+/* Модальное окно */
+.modal-overlay {
+ position: fixed;
+ inset: 0;
+ background: rgba(0, 0, 0, 0.5);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ z-index: 1000;
+ padding: var(--kt-ai-space-4);
+}
+
+.modal-overlay.hidden {
+ display: none;
+}
+
+.modal-content {
+ background: var(--kt-ai-card-bg);
+ border: 1px solid var(--kt-ai-card-border);
+ border-radius: var(--kt-ai-radius-2xl);
+ padding: var(--kt-ai-space-6);
+ width: 100%;
+ max-width: 480px;
+ max-height: 90vh;
+ overflow-y: auto;
+ animation: modalFadeIn 0.2s ease-out;
+}
+
+@keyframes modalFadeIn {
+ from { opacity: 0; transform: translateY(-10px); }
+ to { opacity: 1; transform: translateY(0); }
+}
+
+.modal-actions {
+ display: flex;
+ gap: var(--kt-ai-space-3);
+ margin-top: var(--kt-ai-space-6);
+}
+
+.modal-actions .kt-ai-btn {
+ flex: 1;
+}
+
/* Пустое состояние */
.empty-state {
text-align: center;
- padding: 48px 24px;
- color: #9ca3af;
+ padding: var(--kt-ai-space-12) var(--kt-ai-space-6);
+ color: var(--kt-ai-fg-faint);
}
-.empty-state svg {
- width: 64px;
- height: 64px;
- margin-bottom: 16px;
+.empty-state-icon {
+ font-size: 64px;
opacity: 0.5;
+ margin-bottom: var(--kt-ai-space-4);
+}
+
+/* Скроллбар для журнала */
+.log-container::-webkit-scrollbar {
+ width: 8px;
+}
+
+.log-container::-webkit-scrollbar-track {
+ background: var(--kt-ai-bg-soft);
+ border-radius: var(--kt-ai-radius-md);
+}
+
+.log-container::-webkit-scrollbar-thumb {
+ background: var(--kt-ai-border);
+ border-radius: var(--kt-ai-radius-md);
+}
+
+.log-container::-webkit-scrollbar-thumb:hover {
+ background: var(--kt-ai-fg-muted);
}