Add interactive document demo flows

app.js

@@ -1,26 +1,55 @@
-const modal = document.querySelector('#modal');
-const modalTitle = document.querySelector('#modal-title');
-const modalKicker = document.querySelector('#modal-kicker');
-const modalText = document.querySelector('#modal-text');
-const modalForm = document.querySelector('#modal-form');
-const formSuccess = document.querySelector('#form-success');
+const $ = (selector) => document.querySelector(selector);
+const modal = $('#modal');
+const docModal = $('#doc-modal');
+const favorites = new Set(JSON.parse(localStorage.getItem('talion-favorites') || '[]'));
+const history = JSON.parse(localStorage.getItem('talion-history') || '[]');
+
+const docs = [
+  { title: 'Гражданский кодекс РФ', type: 'Кодекс', description: 'Основные положения гражданского законодательства Российской Федерации.', chapters: ['Общие положения', 'Лица', 'Объекты гражданских прав', 'Сделки и представительство'], url: 'https://www.consultant.ru/document/cons_doc_LAW_5142/' },
+  { title: 'Налоговый кодекс РФ', type: 'Кодекс', description: 'Налоги и сборы, права и обязанности налогоплательщиков.', chapters: ['Общие положения', 'Налогоплательщики', 'Налоговая декларация', 'Налоговый контроль'], url: 'https://www.consultant.ru/document/cons_doc_LAW_19671/' },
+  { title: 'Трудовой кодекс РФ', type: 'Кодекс', description: 'Трудовые отношения, гарантии работникам и правила оформления.', chapters: ['Общие положения', 'Трудовой договор', 'Рабочее время', 'Оплата и нормирование труда'], url: 'https://www.consultant.ru/document/cons_doc_LAW_34683/' },
+  { title: 'О защите прав потребителей', type: 'Федеральный закон', description: 'Права потребителей при покупке товаров и оказании услуг.', chapters: ['Общие положения', 'Защита прав потребителей', 'Общественные организации', 'Ответственность'], url: 'https://www.consultant.ru/document/cons_doc_LAW_305/' },
+  { title: 'Федеральный закон «О персональных данных»', type: 'Федеральный закон', description: 'Правовые основы обработки и защиты персональных данных.', chapters: ['Общие положения', 'Принципы обработки', 'Права субъекта данных', 'Обязанности оператора'], url: 'https://www.consultant.ru/document/cons_doc_LAW_61801/' },
+  { title: 'Конституция Российской Федерации', type: 'Конституция', description: 'Основной закон России: права, свободы и устройство государства.', chapters: ['Основы конституционного строя', 'Права и свободы человека', 'Федеративное устройство', 'Органы государственной власти'], url: 'https://www.consultant.ru/document/cons_doc_LAW_28399/' },
+  { title: 'МРОТ 2026', type: 'Справочная информация', description: 'Минимальный размер оплаты труда и связанные расчетные данные.', chapters: ['Размер МРОТ', 'Регионы', 'Расчетные примеры'], url: 'https://www.consultant.ru/document/cons_doc_LAW_503692/' }
+];
 
 document.querySelectorAll('[data-modal]').forEach((button) => button.addEventListener('click', () => {
   const trial = button.dataset.modal === 'trial';
-  modalKicker.textContent = trial ? 'Пробный доступ' : 'Вход в систему';
-  modalTitle.textContent = trial ? 'Получите доступ к системе' : 'Войти в систему';
-  modalText.textContent = trial ? 'Оставьте контакты, и специалист свяжется с вами.' : 'Демонстрационная форма входа в личный кабинет.';
-  modalForm.style.display = 'block'; formSuccess.style.display = 'none'; modal.classList.add('open'); modal.setAttribute('aria-hidden', 'false');
+  $('#modal-kicker').textContent = trial ? 'Пробный доступ' : 'Вход в систему';
+  $('#modal-title').textContent = trial ? 'Получите доступ к системе' : 'Войти в систему';
+  $('#modal-text').textContent = trial ? 'Оставьте контакты, и специалист свяжется с вами.' : 'Демонстрационная форма входа в личный кабинет.';
+  $('#modal-form').style.display = 'block'; $('#form-success').style.display = 'none'; modal.classList.add('open'); modal.setAttribute('aria-hidden', 'false');
 }));
 document.querySelectorAll('[data-close]').forEach((element) => element.addEventListener('click', () => { modal.classList.remove('open'); modal.setAttribute('aria-hidden', 'true'); }));
-document.addEventListener('keydown', (event) => { if (event.key === 'Escape') modal.classList.remove('open'); });
-modalForm.addEventListener('submit', (event) => { event.preventDefault(); modalForm.style.display = 'none'; formSuccess.style.display = 'block'; });
+$('#modal-form').addEventListener('submit', (event) => { event.preventDefault(); $('#modal-form').style.display = 'none'; $('#form-success').style.display = 'block'; });
 
-const docs = ['Гражданский кодекс РФ', 'Налоговый кодекс РФ', 'Трудовой кодекс РФ', 'О защите прав потребителей', 'Федеральный закон «О персональных данных»', 'Конституция Российской Федерации'];
-document.querySelector('#search-form').addEventListener('submit', (event) => {
-  event.preventDefault(); const query = document.querySelector('#search-input').value.trim().toLowerCase(); const result = document.querySelector('#search-results');
-  const matches = query ? docs.filter((doc) => doc.toLowerCase().includes(query)) : [];
-  result.textContent = query ? (matches.length ? `Найдено документов: ${matches.join(', ')}` : 'По вашему запросу ничего не найдено') : 'Введите название документа'; result.style.display = 'block'; result.style.position = 'static'; result.style.marginTop = '12px'; result.style.color = matches.length ? '#12263a' : '#6b7e90';
-});
-document.querySelector('#cookie-ok').addEventListener('click', () => document.querySelector('#cookie').remove());
-document.querySelector('.search-open').addEventListener('click', () => { document.querySelector('#search-input').focus(); document.querySelector('#search').scrollIntoView({ behavior: 'smooth' }); });
+const renderResults = (query = '', type = 'Все типы') => {
+  const result = $('#search-results');
+  const matches = docs.filter((doc) => (!query || `${doc.title} ${doc.description}`.toLowerCase().includes(query.toLowerCase())) && (type === 'Все типы' || doc.type === type));
+  result.innerHTML = `<div class="result-toolbar"><b>${matches.length ? `Найдено документов: ${matches.length}` : 'Ничего не найдено'}</b><select id="result-filter"><option>Все типы</option><option>Кодекс</option><option>Федеральный закон</option><option>Конституция</option><option>Справочная информация</option></select></div>${matches.map((doc) => `<button class="result-card" data-result="${doc.title}"><span class="result-type">${doc.type}</span><strong>${doc.title}</strong><small>${doc.description}</small><i>Открыть документ →</i></button>`).join('')}`;
+  result.style.display = 'block'; result.style.position = 'static'; result.style.marginTop = '16px';
+  $('#result-filter').value = type; $('#result-filter').addEventListener('change', (event) => renderResults(query, event.target.value));
+  result.querySelectorAll('[data-result]').forEach((card) => card.addEventListener('click', () => openDocument(card.dataset.result)));
+};
+$('#search-form').addEventListener('submit', (event) => { event.preventDefault(); renderResults($('#search-input').value.trim()); });
+
+function openDocument(title) {
+  const doc = docs.find((item) => item.title === title) || docs[0];
+  $('#doc-title').textContent = doc.title; $('.doc-breadcrumb').textContent = `Документы / ${doc.type}`;
+  $('.doc-viewer .section-kicker').textContent = doc.type; $('.doc-layout article h3').textContent = 'О документе'; $('.doc-layout article p').textContent = doc.description;
+  $('.doc-layout aside').innerHTML = `<b>Оглавление</b>${doc.chapters.map((chapter) => `<a href="#doc-body">${chapter}</a>`).join('')}`;
+  $('.doc-layout article .button').href = doc.url; updateFavorite(doc.title);
+  if (!history.includes(doc.title)) { history.unshift(doc.title); history.splice(5); localStorage.setItem('talion-history', JSON.stringify(history)); }
+  docModal.classList.add('open'); docModal.setAttribute('aria-hidden', 'false');
+}
+function updateFavorite(title) {
+  let button = $('#doc-favorite');
+  if (!button) { button = document.createElement('button'); button.id = 'doc-favorite'; button.className = 'favorite-button'; $('.doc-meta').append(button); }
+  button.textContent = favorites.has(title) ? '★ В избранном' : '☆ В избранное'; button.onclick = () => { favorites.has(title) ? favorites.delete(title) : favorites.add(title); localStorage.setItem('talion-favorites', JSON.stringify([...favorites])); updateFavorite(title); };
+}
+document.querySelectorAll('[data-doc]').forEach((link) => link.addEventListener('click', (event) => { event.preventDefault(); openDocument(link.dataset.doc); }));
+document.querySelectorAll('[data-doc-close]').forEach((element) => element.addEventListener('click', () => { docModal.classList.remove('open'); docModal.setAttribute('aria-hidden', 'true'); }));
+document.addEventListener('keydown', (event) => { if (event.key === 'Escape') { modal.classList.remove('open'); docModal.classList.remove('open'); } });
+$('#cookie-ok').addEventListener('click', () => $('#cookie').remove());
+$('.search-open').addEventListener('click', () => { $('#search-input').focus(); $('#search').scrollIntoView({ behavior: 'smooth' }); });

index.html

@@ -62,7 +62,7 @@
 
     <section class="news-section" id="news"><div class="section container"><div class="section-head"><div><span class="section-kicker">Будьте в курсе</span><h2>Новости законодательства</h2></div><a class="arrow-link" href="https://www.consultant.ru/law/news/" target="_blank" rel="noreferrer">Все новости <span>→</span></a></div><div class="news-grid"><article class="news-main"><span class="news-date">Сегодня</span><h3>СПОТ, налоги, взносы и отчетность в июле: основные изменения</h3><a href="#news" class="arrow-link">Читать новость <span>→</span></a></article><div class="news-list"><a href="#news"><span>Сегодня</span><b>Суд поддержал выплату больничных по основному месту работы</b><i>→</i></a><a href="#news"><span>Вчера</span><b>Платформенная экономика: новые правила для продавцов</b><i>→</i></a><a href="#news"><span>Вчера</span><b>Какие важные изменения ждут юриста в августе</b><i>→</i></a></div></div></div></section>
 
-    <section class="section container" id="documents"><div class="section-head"><div><span class="section-kicker">Всегда под рукой</span><h2>Популярные документы</h2></div><a class="arrow-link" href="https://www.consultant.ru/document/" target="_blank" rel="noreferrer">Все документы <span>→</span></a></div><div class="document-links"><a href="#documents">Гражданский кодекс РФ <span>→</span></a><a href="#documents">Налоговый кодекс РФ <span>→</span></a><a href="#documents">Трудовой кодекс РФ <span>→</span></a><a href="#documents">О защите прав потребителей <span>→</span></a><a href="#documents">Федеральный закон «О персональных данных» <span>→</span></a><a href="#documents">Конституция Российской Федерации <span>→</span></a></div></section>
+    <section class="section container" id="documents"><div class="section-head"><div><span class="section-kicker">Всегда под рукой</span><h2>Популярные документы</h2></div><a class="arrow-link" href="https://www.consultant.ru/document/" target="_blank" rel="noreferrer">Все документы <span>→</span></a></div><div class="document-links"><a href="#documents" data-doc="Гражданский кодекс РФ">Гражданский кодекс РФ <span>→</span></a><a href="#documents" data-doc="Налоговый кодекс РФ">Налоговый кодекс РФ <span>→</span></a><a href="#documents" data-doc="Трудовой кодекс РФ">Трудовой кодекс РФ <span>→</span></a><a href="#documents" data-doc="О защите прав потребителей">О защите прав потребителей <span>→</span></a><a href="#documents" data-doc="Федеральный закон «О персональных данных»">Федеральный закон «О персональных данных» <span>→</span></a><a href="#documents" data-doc="Конституция Российской Федерации">Конституция Российской Федерации <span>→</span></a></div></section>
 
     <section class="cta container"><div><span class="section-kicker">Попробуйте сами</span><h2>Убедитесь, как легко<br>работать с информацией</h2></div><button class="button light" data-modal="trial">Получить пробный доступ <span>→</span></button></section>
 
@@ -73,6 +73,7 @@
 
   <div class="modal" id="modal" aria-hidden="true"><div class="modal-backdrop" data-close></div><div class="modal-card"><button class="modal-close" data-close aria-label="Закрыть">×</button><span class="section-kicker" id="modal-kicker">Пробный доступ</span><h2 id="modal-title">Получите доступ к системе</h2><p id="modal-text">Оставьте контакты, и специалист свяжется с вами.</p><form id="modal-form"><label>Ваше имя<input required name="name" placeholder="Имя"></label><label>Телефон или e-mail<input required name="contact" placeholder="+7 (___) ___-__-__"></label><button class="button primary" type="submit">Отправить заявку <span>→</span></button></form><div class="form-success" id="form-success">Спасибо! Заявка отправлена.</div></div></div>
   <div class="cookie" id="cookie"><span>Мы используем файлы cookies, чтобы сайт работал удобнее.</span><button id="cookie-ok">Понятно</button></div>
+  <div class="doc-modal" id="doc-modal" aria-hidden="true"><div class="modal-backdrop" data-doc-close></div><div class="doc-viewer"><button class="modal-close" data-doc-close aria-label="Закрыть">×</button><div class="doc-breadcrumb">Документы / Российское законодательство</div><span class="section-kicker">Документ</span><h2 id="doc-title">Конституция Российской Федерации</h2><div class="doc-meta"><span>Действующая редакция</span><span>Обновлено сегодня</span><span>Официальный текст</span></div><div class="doc-layout"><aside><b>Оглавление</b><a href="#doc-body">Общие положения</a><a href="#doc-body">Основные права и свободы</a><a href="#doc-body">Федеративное устройство</a><a href="#doc-body">Органы государственной власти</a></aside><article id="doc-body"><h3>О документе</h3><p>Это демонстрационный просмотр карточки нормативного документа. В полной версии здесь открывается текст, навигация по статьям и связанные материалы.</p><div class="doc-notice">Для работы с актуальной редакцией откройте документ на официальном сайте КонсультантПлюс.</div><a class="button primary" href="https://www.consultant.ru/document/cons_doc_LAW_28399/" target="_blank" rel="noreferrer">Открыть полный текст <span>↗</span></a></article></div></div></div>
   <script src="app.js"></script>
 </body>
 </html>