---
name: legal-summary-html
description: Создание интерактивных HTML-документов для юридических и аналитических материалов — резюме арбитражных решений, процессуальных приказов, отчётов, аналитических записок. Использовать для создания красивых mobile-first HTML-документов с аккордеонами, таймлайнами, навигацией и профессиональным дизайном в сине-золотой цветовой гамме.
---
# Навык: Юридические HTML-документы
Создание интерактивных HTML-документов с профессиональным дизайном для юридических и аналитических материалов.
## Дизайн-система
### Цветовая палитра
```css
:root {
--primary: #1a2a3a; /* Тёмно-синий — заголовки, кнопки */
--secondary: #2d4a5e; /* Синий — градиенты, hover */
--accent: #c9a227; /* Золотой — акценты, маркеры */
--accent-light: #e8d49c; /* Светло-золотой — подсветка */
--bg: #f8f6f1; /* Кремовый фон страницы */
--card-bg: #ffffff; /* Белый фон карточек */
--text: #2c3e50; /* Основной текст */
--text-light: #5a6a7a; /* Вспомогательный текст */
--success: #27ae60; /* Зелёный — одобрено */
--danger: #c0392b; /* Красный — отклонено */
--warning: #f39c12; /* Оранжевый — частично */
--border: #e0ddd5; /* Границы */
}
```
### Типографика
```css
/* Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;600;700&family=Source+Sans+3:wght@300;400;500;600&display=swap');
/* Заголовки — Cormorant Garamond */
h1, h2, h3 { font-family: 'Cormorant Garamond', serif; }
/* h1: 1.6rem, font-weight: 700 */
/* h2: 1.1rem, font-weight: 600 */
/* h3: 1.0rem, font-weight: 600 */
/* Основной текст — Source Sans 3 */
body { font-family: 'Source Sans 3', sans-serif; line-height: 1.6; }
```
## Структура документа
### HTML-каркас
```html
[Название] | [Номер дела]
...
```
## Компоненты
### Header
```html
```
```css
.header {
background: linear-gradient(135deg, var(--primary), var(--secondary));
color: white;
padding: 1.5rem 1rem;
position: sticky;
top: 0;
z-index: 100;
}
.case-badge {
background: var(--accent);
color: var(--primary);
padding: 0.25rem 0.75rem;
border-radius: 4px;
font-size: 0.75rem;
font-weight: 600;
}
```
### Navigation Pills
```html
```
```css
.nav-container {
background: white;
padding: 0.75rem;
overflow-x: auto;
border-bottom: 1px solid var(--border);
}
.nav-pills {
display: flex;
gap: 0.5rem;
min-width: max-content;
}
.nav-pill {
padding: 0.5rem 1rem;
border: none;
border-radius: 20px;
background: var(--bg);
cursor: pointer;
white-space: nowrap;
}
.nav-pill.active {
background: var(--primary);
color: white;
}
```
### Section (аккордеон)
```html
```
```css
.section {
background: white;
border-radius: 12px;
margin: 1rem;
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
overflow: hidden;
}
.section-header {
padding: 1rem;
display: flex;
justify-content: space-between;
align-items: center;
cursor: pointer;
}
.section-content {
padding: 0 1rem 1rem;
display: none;
}
.section.open .section-content {
display: block;
}
.section-icon {
width: 36px;
height: 36px;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
}
.section-icon.blue { background: #e3f2fd; color: #1976d2; }
.section-icon.green { background: #e8f5e9; color: #388e3c; }
.section-icon.orange { background: #fff3e0; color: #f57c00; }
.section-icon.red { background: #ffebee; color: #d32f2f; }
```
### Status Badges
```html
✓ Одобрено
✗ Отклонено
~ Частично
```
```css
.status-badge {
padding: 0.25rem 0.75rem;
border-radius: 12px;
font-size: 0.8rem;
font-weight: 500;
}
.status-badge.approved { background: #e8f5e9; color: #2e7d32; }
.status-badge.rejected { background: #ffebee; color: #c62828; }
.status-badge.partial { background: #fff3e0; color: #ef6c00; }
```
### Timeline
```html
15 октября 2025
Описание события
```
```css
.timeline {
border-left: 2px solid var(--accent);
margin-left: 1rem;
padding-left: 1.5rem;
}
.timeline-item {
position: relative;
margin-bottom: 1.5rem;
}
.timeline-dot {
position: absolute;
left: -2rem;
top: 0.5rem;
width: 12px;
height: 12px;
background: var(--accent);
border-radius: 50%;
}
.timeline-date {
font-weight: 600;
color: var(--primary);
}
```
### Quote Block
```html
«Текст цитаты»
— Источник, п. 123
ИСТЦЫ
Название компании
🇷🇺 Россия
ОТВЕТЧИКИ
Название компании
🇮🇹 Италия
```
```css
.parties-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1rem;
}
.party-card {
padding: 1rem;
border-radius: 8px;
}
.party-card.claimants { background: #e3f2fd; }
.party-card.respondents { background: #fce4ec; }
.party-label {
font-size: 0.7rem;
font-weight: 600;
letter-spacing: 0.05em;
margin-bottom: 0.5rem;
}
```
## JavaScript
```javascript
function toggleSection(header) {
const section = header.parentElement;
section.classList.toggle('open');
}
function scrollToSection(id) {
document.getElementById(id).scrollIntoView({ behavior: 'smooth' });
// Обновить активную pill
document.querySelectorAll('.nav-pill').forEach(p => p.classList.remove('active'));
event.target.classList.add('active');
}
// Scroll to top
document.querySelector('.scroll-top').addEventListener('click', () => {
window.scrollTo({ top: 0, behavior: 'smooth' });
});
// Показать кнопку scroll-top при прокрутке
window.addEventListener('scroll', () => {
const btn = document.querySelector('.scroll-top');
btn.style.display = window.scrollY > 300 ? 'block' : 'none';
});
```
## Процесс создания
1. Определить структуру разделов из исходного материала
2. Выбрать нужные компоненты
3. Собрать HTML с inline CSS и JS
4. Сохранить как `.html` файл
## Применение
- Резюме арбитражных решений
- Обзоры процессуальных приказов
- Аналитические записки
- Отчёты для клиентов
- Интерактивные презентации материалов дела