329 lines
15 KiB
HTML
329 lines
15 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="ru" data-theme="light">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||
<title>Алия — Сопровождение договоров</title>
|
||
<link rel="stylesheet" href="design-system/kt-ai-fonts.css">
|
||
<link rel="stylesheet" href="design-system/kt-ai-tokens.css">
|
||
<link rel="stylesheet" href="design-system/kt-ai-components.css">
|
||
<link rel="stylesheet" href="design-system/kt-ai-page.css">
|
||
<style>
|
||
a.kt-ai-btn { text-decoration: none; }
|
||
.search-box { position: relative; max-width: 720px; margin: 0 auto; }
|
||
.search-input { width: 100%; padding: var(--kt-ai-space-4) var(--kt-ai-space-5); font-size: var(--kt-ai-text-lg); border: 2px solid var(--kt-ai-border); border-radius: var(--kt-ai-radius-2xl); background: var(--kt-ai-bg); color: var(--kt-ai-fg); }
|
||
.search-input:focus { outline: none; border-color: var(--kt-ai-primary); }
|
||
.search-icon { position: absolute; right: var(--kt-ai-space-4); top: 50%; transform: translateY(-50%); color: var(--kt-ai-fg-muted); }
|
||
.qa-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: var(--kt-ai-space-5); margin-top: var(--kt-ai-space-8); }
|
||
.qa-card { cursor: pointer; transition: transform 0.2s, box-shadow 0.2s; }
|
||
.qa-card:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,0.12); }
|
||
.qa-card[data-expanded="true"] { grid-column: 1 / -1; }
|
||
.qa-answer { display: none; margin-top: var(--kt-ai-space-4); padding-top: var(--kt-ai-space-4); border-top: 1px solid var(--kt-ai-border); }
|
||
.qa-card[data-expanded="true"] .qa-answer { display: block; }
|
||
.step-list { counter-reset: step; list-style: none; padding: 0; }
|
||
.step-list li { position: relative; padding-left: var(--kt-ai-space-10); margin-bottom: var(--kt-ai-space-3); }
|
||
.step-list li::before { counter-increment: step; content: counter(step); position: absolute; left: 0; top: 0; width: 28px; height: 28px; background: var(--kt-ai-primary); color: var(--kt-ai-bg); border-radius: var(--kt-ai-radius-full); text-align: center; line-height: 28px; font-size: var(--kt-ai-text-sm); font-weight: var(--kt-ai-weight-semibold); }
|
||
.link-hint { color: var(--kt-ai-link); font-size: var(--kt-ai-text-sm); }
|
||
.no-source { color: var(--kt-ai-fg-muted); font-style: italic; }
|
||
.category-filter { display: flex; flex-wrap: wrap; gap: var(--kt-ai-space-2); justify-content: center; margin-top: var(--kt-ai-space-6); }
|
||
.filter-chip { cursor: pointer; }
|
||
.ask-form { max-width: 600px; margin: var(--kt-ai-space-8) auto; display: none; padding: var(--kt-ai-space-6); }
|
||
.ask-form[data-visible="true"] { display: block; }
|
||
.toast { position: fixed; bottom: var(--kt-ai-space-6); right: var(--kt-ai-space-6); background: var(--kt-ai-card-bg); border: 1px solid var(--kt-ai-border); padding: var(--kt-ai-space-4) var(--kt-ai-space-5); border-radius: var(--kt-ai-radius-xl); box-shadow: 0 8px 24px rgba(0,0,0,0.15); z-index: 1000; display: none; }
|
||
.toast[data-visible="true"] { display: block; }
|
||
</style>
|
||
</head>
|
||
<body class="kt-ai-app" data-kt-data-mode="demo">
|
||
|
||
<header class="kt-ai-pagehead">
|
||
<div class="kt-ai-wrap kt-ai-pagehead-in">
|
||
<div style="display:flex;align-items:center;gap:var(--kt-ai-space-3)">
|
||
<img src="https://code.vibe42.kz/tore/aitu/kt-logo.svg" alt="Казахтелеком" height="28">
|
||
<strong>Алия — Помощник по договорам</strong>
|
||
</div>
|
||
<span class="kt-ai-spacer"></span>
|
||
<span class="kt-ai-chip" data-tone="orange">Демо-данные</span>
|
||
<span class="kt-ai-spacer"></span>
|
||
<button class="kt-ai-btn" data-variant="primary" id="btnAsk">Задать вопрос</button>
|
||
</div>
|
||
</header>
|
||
|
||
<main class="kt-ai-wrap" style="padding-top:var(--kt-ai-space-10);padding-bottom:var(--kt-ai-space-12)">
|
||
|
||
<section class="kt-ai-hero" data-align="center" style="padding:0;margin-bottom:var(--kt-ai-space-8)">
|
||
<h1>Помощник по сопровождению договоров</h1>
|
||
<p class="kt-ai-hero-sub" style="max-width:600px;margin:0 auto">
|
||
Найдите готовый ответ или задайте свой вопрос — коллегии помогут
|
||
</p>
|
||
<div class="search-box" style="margin-top:var(--kt-ai-space-6)">
|
||
<input type="text" class="search-input" id="searchInput" placeholder="Например: как создать заявку в портале?">
|
||
<span class="search-icon">
|
||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||
<circle cx="11" cy="11" r="8"></circle>
|
||
<path d="m21 21-4.35-4.35"></path>
|
||
</svg>
|
||
</span>
|
||
</div>
|
||
</section>
|
||
|
||
<div class="category-filter" id="categoryFilter">
|
||
<span class="kt-ai-chip filter-chip" data-category="all" data-active="true">Все вопросы</span>
|
||
<span class="kt-ai-chip filter-chip" data-category="create">Создание заявки</span>
|
||
<span class="kt-ai-chip filter-chip" data-category="approve">Согласование</span>
|
||
<span class="kt-ai-chip filter-chip" data-category="find">Поиск решений</span>
|
||
<span class="kt-ai-chip filter-chip" data-category="other">Другое</span>
|
||
</div>
|
||
|
||
<div id="emptyState" class="kt-ai-empty" style="display:none;text-align:center;padding:var(--kt-ai-space-12) var(--kt-ai-space-6)">
|
||
<svg width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="var(--kt-ai-fg-faint)" stroke-width="1.5" style="margin-bottom:var(--kt-ai-space-4)">
|
||
<circle cx="11" cy="11" r="8"></circle>
|
||
<path d="m21 21-4.35-4.35"></path>
|
||
</svg>
|
||
<h3 style="color:var(--kt-ai-fg);margin-bottom:var(--kt-ai-space-2)">Ничего не найдено</h3>
|
||
<p style="color:var(--kt-ai-fg-muted)">Попробуйте изменить поисковый запрос или категорию</p>
|
||
<button class="kt-ai-btn" data-variant="primary" style="margin-top:var(--kt-ai-space-4)" onclick="showAskForm()">Задать свой вопрос</button>
|
||
</div>
|
||
|
||
<div class="qa-grid" id="qaGrid"></div>
|
||
|
||
<form class="kt-ai-card ask-form" id="askForm">
|
||
<h2 style="margin-bottom:var(--kt-ai-space-4)">Новый вопрос</h2>
|
||
<p style="color:var(--kt-ai-fg-muted);margin-bottom:var(--kt-ai-space-4)">Опишите вопрос своими словами — ответ появится в базе после проверки</p>
|
||
<div class="kt-ai-field" style="margin-bottom:var(--kt-ai-space-4)">
|
||
<label for="questionTitle">Ваш вопрос</label>
|
||
<input type="text" class="kt-ai-input" id="questionTitle" required placeholder="Кратко сформулируйте вопрос">
|
||
</div>
|
||
<div class="kt-ai-field" style="margin-bottom:var(--kt-ai-space-4)">
|
||
<label for="questionDetails">Подробности</label>
|
||
<textarea class="kt-ai-textarea" id="questionDetails" rows="4" placeholder="Опишите вашу ситуацию"></textarea>
|
||
</div>
|
||
<div style="display:flex;gap:var(--kt-ai-space-3)">
|
||
<button type="submit" class="kt-ai-btn" data-variant="primary">Отправить вопрос</button>
|
||
<button type="button" class="kt-ai-btn" data-variant="ghost" id="btnCancel">Отмена</button>
|
||
</div>
|
||
</form>
|
||
|
||
</main>
|
||
|
||
<footer class="kt-ai-wrap kt-ai-pagefoot">
|
||
<span>© 2026 Казахтелеком — Помощник по договорам</span>
|
||
<span class="kt-ai-spacer"></span>
|
||
<span style="color:var(--kt-ai-fg-muted)">База знаний для сотрудников</span>
|
||
</footer>
|
||
|
||
<div class="toast" id="toast"></div>
|
||
|
||
<script>
|
||
// === Демо-данные: база знаний ===
|
||
const DEMO_DATA = [
|
||
{
|
||
id: 1,
|
||
category: 'create',
|
||
question: 'Как создать заявку в портале?',
|
||
answer: '<ol class="step-list"><li>Войдите в портал</li><li>Нажмите кнопку «Создать заявку»</li><li>Заполните поля: тип договора, контрагент, сумма</li><li>Прикрепите документы</li><li>Нажмите «Отправить на согласование»</li></ol>',
|
||
hasSource: true
|
||
},
|
||
{
|
||
id: 2,
|
||
category: 'create',
|
||
question: 'Какие документы нужны для создания заявки?',
|
||
answer: '<ol class="step-list"><li>Устав контрагента</li><li>Свидетельство о регистрации (ОГРН)</li><li>Приказ о назначении руководителя</li><li>Доверенность (если подписывает не руководитель)</li><li>Коммерческое предложение или счёт</li></ol>',
|
||
hasSource: true
|
||
},
|
||
{
|
||
id: 3,
|
||
category: 'approve',
|
||
question: 'Кого добавить в согласование?',
|
||
answer: '<p style="color:var(--kt-ai-fg-muted)">Инструкции пока нет. Обратитесь к руководителю департамента.</p>',
|
||
hasSource: false
|
||
},
|
||
{
|
||
id: 4,
|
||
category: 'approve',
|
||
question: 'Сколько времени занимает согласование?',
|
||
answer: '<p style="color:var(--kt-ai-fg-muted)">Инструкции пока нет. Нормативные сроки уточняйте в юридическом департаменте.</p>',
|
||
hasSource: false
|
||
},
|
||
{
|
||
id: 5,
|
||
category: 'find',
|
||
question: 'Где найти решение по договору?',
|
||
answer: '<ol class="step-list"><li>Откройте раздел «Мои заявки»</li><li>Найдите договор по номеру</li><li>Перейдите на вкладку «Решения»</li><li>Скачайте файл</li></ol>',
|
||
hasSource: true
|
||
},
|
||
{
|
||
id: 6,
|
||
category: 'find',
|
||
question: 'Как посмотреть историю изменений договора?',
|
||
answer: '<p style="color:var(--kt-ai-fg-muted)">Инструкции пока нет. Попробуйте найти договор в архиве.</p>',
|
||
hasSource: false
|
||
},
|
||
{
|
||
id: 7,
|
||
category: 'other',
|
||
question: 'Что делать, если заявка возвращена на доработку?',
|
||
answer: '<ol class="step-list"><li>Откройте уведомление</li><li>Прочитайте комментарий</li><li>Исправьте замечания</li><li>Нажмите «Отправить повторно»</li></ol>',
|
||
hasSource: true
|
||
},
|
||
{
|
||
id: 8,
|
||
category: 'other',
|
||
question: 'Как отозвать заявку на согласовании?',
|
||
answer: '<p style="color:var(--kt-ai-fg-muted)">Инструкции пока нет. Свяжитесь с согласующим.</p>',
|
||
hasSource: false
|
||
}
|
||
];
|
||
|
||
// === Состояние приложения ===
|
||
const FILTERS = [
|
||
{ id: 'category', label: 'Категория', affects: ['table'] }
|
||
];
|
||
|
||
let state = {
|
||
currentCategory: 'all',
|
||
searchQuery: '',
|
||
userQuestions: JSON.parse(localStorage.getItem('userQuestions') || '[]')
|
||
};
|
||
|
||
// === Инициализация ===
|
||
document.addEventListener('DOMContentLoaded', () => {
|
||
renderQA();
|
||
setupEventListeners();
|
||
});
|
||
|
||
// === Рендеринг карточек ===
|
||
function renderQA() {
|
||
const grid = document.getElementById('qaGrid');
|
||
const emptyState = document.getElementById('emptyState');
|
||
|
||
let data = [...DEMO_DATA, ...state.userQuestions.map((q, i) => ({
|
||
id: 'user-' + i,
|
||
category: q.category || 'other',
|
||
question: q.title,
|
||
answer: '<p style="color:var(--kt-ai-fg-muted)">Вопрос на рассмотрении</p>',
|
||
hasSource: false,
|
||
isUser: true
|
||
}))];
|
||
|
||
// Фильтр по категории
|
||
if (state.currentCategory !== 'all') {
|
||
data = data.filter(q => q.category === state.currentCategory);
|
||
}
|
||
|
||
// Поиск
|
||
if (state.searchQuery) {
|
||
const query = state.searchQuery.toLowerCase();
|
||
data = data.filter(q =>
|
||
q.question.toLowerCase().includes(query)
|
||
);
|
||
}
|
||
|
||
if (data.length === 0) {
|
||
grid.innerHTML = '';
|
||
emptyState.style.display = 'block';
|
||
return;
|
||
}
|
||
|
||
emptyState.style.display = 'none';
|
||
grid.innerHTML = data.map(q => {
|
||
const answerHtml = q.isUser
|
||
? q.answer
|
||
: q.answer;
|
||
|
||
return `
|
||
<div class="kt-ai-card qa-card" data-id="${q.id}" data-expanded="false" onclick="toggleCard('${q.id}')">
|
||
<div style="display:flex;justify-content:space-between;align-items:flex-start;gap:var(--kt-ai-space-3)">
|
||
<h3 style="margin:0;color:var(--kt-ai-fg)">${q.question}</h3>
|
||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="var(--kt-ai-fg-muted)" stroke-width="2" style="flex-shrink:0;transition:transform 0.3s" class="chevron">
|
||
<path d="m6 9 6 6 6-6"></path>
|
||
</svg>
|
||
</div>
|
||
<div class="qa-answer">
|
||
${answerHtml}
|
||
</div>
|
||
</div>
|
||
`}).join('');
|
||
}
|
||
|
||
// === Переключение карточки ===
|
||
function toggleCard(id) {
|
||
const cards = document.querySelectorAll('.qa-card');
|
||
cards.forEach(card => {
|
||
if (card.dataset.id !== String(id)) {
|
||
card.dataset.expanded = 'false';
|
||
} else {
|
||
card.dataset.expanded = card.dataset.expanded === 'true' ? 'false' : 'true';
|
||
}
|
||
});
|
||
}
|
||
|
||
function showAskForm() {
|
||
document.getElementById('askForm').dataset.visible = 'true';
|
||
document.getElementById('qaGrid').style.display = 'none';
|
||
document.getElementById('categoryFilter').style.display = 'none';
|
||
document.getElementById('emptyState').style.display = 'none';
|
||
}
|
||
|
||
function hideAskForm() {
|
||
document.getElementById('askForm').dataset.visible = 'false';
|
||
document.getElementById('qaGrid').style.display = 'grid';
|
||
document.getElementById('categoryFilter').style.display = 'flex';
|
||
renderQA();
|
||
}
|
||
|
||
// === Обработчики событий ===
|
||
function setupEventListeners() {
|
||
// Поиск
|
||
document.getElementById('searchInput').addEventListener('input', (e) => {
|
||
state.searchQuery = e.target.value;
|
||
renderQA();
|
||
});
|
||
|
||
// Фильтры категорий
|
||
document.querySelectorAll('.filter-chip').forEach(chip => {
|
||
chip.addEventListener('click', () => {
|
||
document.querySelectorAll('.filter-chip').forEach(c => c.dataset.active = 'false');
|
||
chip.dataset.active = 'true';
|
||
state.currentCategory = chip.dataset.category;
|
||
renderQA();
|
||
});
|
||
});
|
||
|
||
// Кнопка "Задать вопрос"
|
||
document.getElementById('btnAsk').addEventListener('click', showAskForm);
|
||
|
||
// Отмена
|
||
document.getElementById('btnCancel').addEventListener('click', hideAskForm);
|
||
|
||
// Отправка формы
|
||
document.getElementById('askForm').addEventListener('submit', (e) => {
|
||
e.preventDefault();
|
||
const title = document.getElementById('questionTitle').value;
|
||
const details = document.getElementById('questionDetails').value;
|
||
|
||
state.userQuestions.push({ title, details, date: new Date().toISOString() });
|
||
localStorage.setItem('userQuestions', JSON.stringify(state.userQuestions));
|
||
|
||
document.getElementById('askForm').reset();
|
||
hideAskForm();
|
||
|
||
showToast('Вопрос отправлен. Коллеги ответят в чате.');
|
||
});
|
||
}
|
||
|
||
function showToast(message) {
|
||
const toast = document.getElementById('toast');
|
||
toast.textContent = message;
|
||
toast.dataset.visible = 'true';
|
||
setTimeout(() => {
|
||
toast.dataset.visible = 'false';
|
||
}, 4000);
|
||
}
|
||
|
||
window.toggleCard = toggleCard;
|
||
window.showAskForm = showAskForm;
|
||
</script>
|
||
|
||
</body>
|
||
</html>
|