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>

styles.css

@@ -2,3 +2,5 @@
 :root{--ink:#12263a;--muted:#6b7e90;--blue:#246bfe;--line:#dbe4eb;--pale:#f3f7fa}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;color:var(--ink);font:15px/1.55 Manrope,Arial,sans-serif;background:#fff}a{color:inherit;text-decoration:none}button,input{font:inherit}.container{width:min(1180px,calc(100% - 64px));margin:auto}.site-header{background:#fff;border-bottom:1px solid #e7eef2}.topbar{height:78px;display:flex;align-items:center;justify-content:space-between}.brand{display:flex;align-items:center;gap:11px;font-size:15px;line-height:1.05;letter-spacing:-.03em}.brand b{font-weight:800}.brand em{font-style:normal;color:var(--blue)}.brand-mark{width:38px;height:38px;display:grid;place-items:center;border-radius:11px;background:var(--blue);color:#fff;font-weight:800;font-size:17px;box-shadow:0 7px 15px #246bfe30}.utility-nav,.mainnav{display:flex;align-items:center;gap:27px}.utility-nav{font-size:13px;color:var(--muted)}.utility-nav a:hover,.mainnav a:hover{color:var(--blue)}.login-link,.search-open,.menu-toggle{border:0;background:none;color:var(--blue);cursor:pointer}.login-link span{font-size:18px;margin-left:4px}.mainnav-wrap{border-top:1px solid #f0f4f6}.mainnav{height:51px;gap:31px;font-size:13px}.mainnav a{height:100%;display:flex;align-items:center;border-bottom:2px solid transparent}.mainnav a.active{color:var(--blue);border-color:var(--blue)}.search-open{margin-left:auto;font-size:28px}.menu-toggle{display:none;font-size:24px}.hero{min-height:485px;display:grid;grid-template-columns:1fr 1fr;align-items:center;padding:52px 0 42px}.eyebrow,.section-kicker{color:var(--blue);font-size:11px;text-transform:uppercase;letter-spacing:.13em;font-weight:800}.hero h1{font-size:clamp(42px,5vw,68px);line-height:1.04;letter-spacing:-.07em;margin:17px 0 24px}.hero h1 span{color:var(--blue)}.hero-copy>p{max-width:470px;color:var(--muted);font-size:17px}.hero-actions{display:flex;align-items:center;gap:24px;margin-top:30px}.button{border:0;border-radius:7px;padding:14px 20px;cursor:pointer;font-weight:700;display:inline-flex;align-items:center;gap:22px}.button.primary{background:var(--blue);color:#fff;box-shadow:0 8px 20px #246bfe30}.button span{font-size:19px}.text-button{border:0;background:none;cursor:pointer;color:var(--ink);font-weight:600}.text-button span,.arrow-link span{color:var(--blue);font-size:18px;margin-left:6px}.hero-visual{height:355px;position:relative;display:grid;place-items:center}.orb{position:absolute;border-radius:50%;filter:blur(1px)}.orb-one{width:280px;height:280px;background:#dbe8ff;right:40px;top:25px}.orb-two{width:130px;height:130px;background:#d6f1ef;left:78px;bottom:15px}.document-card{position:relative;width:310px;height:340px;background:#fff;border:1px solid #e1eaf0;border-radius:7px;padding:29px 34px;box-shadow:0 20px 45px #182d4018;transform:rotate(6deg)}.doc-top{display:flex;gap:5px;margin-bottom:28px}.doc-dot{width:23px;height:4px;background:var(--blue);border-radius:8px}.doc-top span:not(.doc-dot){width:5px;height:5px;background:#b4c4d3;border-radius:50%}.doc-line{height:5px;background:#e7edf2;border-radius:5px;width:75%;margin:16px 0}.doc-line.wide{width:90%}.doc-line.short{width:50%}.doc-highlight{height:37px;background:#edf4ff;border-left:3px solid var(--blue);margin:23px 0}.floating-label{position:absolute;right:4px;bottom:52px;background:#fff;border:1px solid #e1eaf0;border-radius:8px;padding:12px 15px;box-shadow:0 10px 30px #182d4020;font-size:15px;font-weight:800}.floating-label span{color:#17b596;margin-right:5px}.floating-label small{font-size:10px;color:var(--muted);font-weight:500}.search-panel{background:var(--pale);padding:30px 38px;border-radius:8px;display:flex;align-items:center;gap:50px}.search-heading{min-width:250px}.search-heading h2,.section h2{margin:8px 0 0;font-size:27px;line-height:1.18;letter-spacing:-.045em}.search-form{flex:1;display:flex;height:52px;background:#fff;border:1px solid var(--line);border-radius:6px;overflow:hidden}.search-form input{border:0;outline:0;flex:1;padding:0 18px;color:var(--ink);min-width:0}.search-form button{border:0;background:var(--blue);color:#fff;padding:0 25px;cursor:pointer;font-weight:700}.search-results{position:absolute;display:none}.section{padding:90px 0}.section-head{display:flex;justify-content:space-between;align-items:end;margin-bottom:30px}.arrow-link{color:var(--blue);font-weight:700;font-size:13px}.role-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.role-card{position:relative;min-height:230px;padding:25px;border-radius:8px;transition:.2s transform}.role-card:hover{transform:translateY(-5px)}.role-blue{background:#e9f0ff}.role-yellow{background:#fff4d9}.role-violet{background:#f0eaff}.role-green{background:#e7f5ed}.role-icon{display:grid;place-items:center;width:42px;height:42px;border-radius:12px;background:#fff;font-size:21px;margin-bottom:42px}.role-label{font-size:19px;font-weight:800;display:block;letter-spacing:-.04em}.role-card p{color:var(--muted);font-size:12pxLine truncated
 @media(max-width:800px){.container{width:min(100% - 34px,600px)}.utility-nav,.mainnav-wrap{display:none}.menu-toggle{display:block}.hero{grid-template-columns:1fr;padding-top:35px}.hero-visual{height:310px;order:-1}.hero-copy{text-align:center}.hero-copy>p{margin:0 auto}.hero-actions{justify-content:center;flex-wrap:wrap}.search-panel{display:block;padding:24px}.search-form{margin-top:18px}.section{padding:65px 0}.role-grid{grid-template-columns:repeat(2,1fr)}.news-grid{grid-template-columns:1fr}.document-links{grid-template-columns:1fr}.cta{display:block;padding:35px}.cta .button{margin-top:22px}.about-number{width:180px;padding-left:25px}.about-copy h2{font-size:36px}.footer-top,.footer-bottom{display:grid;gap:20px}.footer-contact{text-align:left}.footer-bottom{justify-content:start}.footer-links{flex-wrap:wrap}.section-head{align-items:start;gap:18px;flex-wrap:wrap}}
 @media(max-width:470px){.role-grid{grid-template-columns:1fr}.hero h1{font-size:43px}.hero-visual{transform:scale(.84);margin:-20px 0}.about{display:block}.about-number{border-left:0;border-top:1px solid var(--line);width:100%;padding:24px 0;margin-top:35px;height:auto}.news-main h3{margin-top:35px}.search-form button{padding:0 15px}}
+.doc-modal{position:fixed;inset:0;display:none;z-index:6}.doc-modal.open{display:grid;place-items:center}.doc-viewer{position:relative;background:#fff;border-radius:10px;width:min(850px,calc(100% - 32px));max-height:calc(100vh - 40px);overflow:auto;padding:38px 44px;box-shadow:0 20px 80px #10253940}.doc-breadcrumb{font-size:11px;color:var(--muted);margin-bottom:30px}.doc-viewer h2{font-size:34px;line-height:1.1;letter-spacing:-.05em;margin:12px 0 20px}.doc-meta{display:flex;gap:10px;flex-wrap:wrap;padding-bottom:25px;border-bottom:1px solid var(--line);color:var(--muted);font-size:11px}.doc-meta span{background:var(--pale);padding:7px 10px;border-radius:4px}.doc-layout{display:grid;grid-template-columns:225px 1fr;gap:38px;padding-top:28px}.doc-layout aside{display:flex;flex-direction:column;gap:13px;font-size:12px}.doc-layout aside b{font-size:13px;margin-bottom:5px}.doc-layout aside a{color:var(--muted)}.doc-layout aside a:hover{color:var(--blue)}.doc-layout article h3{font-size:21px;margin:0 0 13px}.doc-layout article p{color:var(--muted);font-size:13px}.doc-notice{margin:22px 0;padding:15px;border-left:3px solid var(--blue);background:#edf4ff;color:var(--ink);font-size:12px}
+.search-results{width:100%;}.result-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 2px 12px;font-size:12px}.result-toolbar select{border:1px solid var(--line);border-radius:5px;padding:7px 10px;background:#fff;color:var(--ink)}.result-card{display:grid;grid-template-columns:145px 1fr 150px;align-items:center;gap:12px;width:100%;border:0;border-top:1px solid var(--line);background:#fff;padding:14px 2px;text-align:left;color:var(--ink);cursor:pointer}.result-card:hover strong,.result-card:hover i{color:var(--blue)}.result-card strong{font-size:13px}.result-card small{color:var(--muted);font-size:11px}.result-card i{font-style:normal;color:var(--blue);font-size:11px;text-align:right}.result-type{color:var(--muted);font-size:10px;text-transform:uppercase;letter-spacing:.08em}.favorite-button{border:1px solid var(--line);background:#fff;color:var(--blue);border-radius:4px;padding:7px 10px;cursor:pointer;font-size:11px}.favorite-button:hover{border-color:var(--blue)}